{ "version": "0.2.0-preview.1", "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721", "status": "preview", "authority": { "repository": "cloakedinc/design", "path": "packages/design-system", "catalog": "packages/design-system/catalog.json", "status": "preview" }, "provenance": { "repo": "cloakedinc/automation", "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "path": "packages/design-system", "imported_spec_status": "approved" }, "adaptations": [ { "id": "button-content-gap", "status": "preview", "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap." }, { "id": "keyboard-focus", "status": "preview", "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows." }, { "id": "supporting-text-contrast", "status": "preview", "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream." }, { "id": "danger-text-contrast", "status": "preview", "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair." }, { "id": "preview-status", "status": "preview", "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only." }, { "id": "motion-comparison-accessibility", "status": "preview", "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens." }, { "id": "list-item-ownership", "status": "preview", "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics." }, { "id": "card-delta-text-contrast", "status": "preview", "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills." }, { "id": "carousel-keyboard-access", "status": "preview", "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel." } ], "id": "emptystate", "name": "EmptyState", "category": "Status", "summary": "A calm full-region placeholder that centers a title, optional description, icon, and recovery action when an area has nothing to show.", "documentation": { "summary": "A calm full-region placeholder that centers a title, optional description, icon, and recovery action when an area has nothing to show.", "guidance": [ { "heading": "Overview", "body": "A full-region placeholder for when a whole area has nothing to show — a title, optional description\nand icon, and an optional recovery `action`." }, { "heading": "When to use", "body": "Reach for `EmptyState` when an entire region is empty and you want to explain why and offer a way\nforward — a cleared queue, a search with no hits, a list before its first item. Pass an `action`\n(usually a `Button`) when there's a recovery path.\n\n- Content IS present and you're annotating it (a note or warning alongside real data)? Use `Banner`.\n- The region isn't empty, it's still loading? Use `Skeleton` to preserve the layout while it loads." } ], "usage": [], "examples": [], "source": "packages/design-system/src/components/status/EmptyState/EmptyState.mdx", "status": "local-preview", "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification." }, "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "code": "import React from 'react';\nimport { cn } from '../../../utilities';\nimport type { CdsSpace } from '../../../tokens/CdsSpace';\nimport { Text } from '../../primitives/Text/Text';\nimport styles from './EmptyState.module.scss';\n\nexport type EmptyStateAlign = 'center' | 'start';\n\n/**\n * Props for the full-region placeholder shown when an area has nothing to display.\n */\nexport interface EmptyStateProps {\n /** Headline naming what is missing. Renders as an `h3`. */\n title: string;\n /** Optional supporting line beneath the title. */\n description?: React.ReactNode;\n /** Optional visual shown above the title. */\n icon?: React.ReactNode;\n /** Optional action slot, usually a Button. */\n action?: React.ReactNode;\n /** Text alignment and horizontal placement of the block. Defaults to `center`. */\n align?: EmptyStateAlign;\n /** Outer padding token. Defaults to `32`. */\n padding?: CdsSpace;\n className?: string;\n style?: React.CSSProperties;\n /** Optional test selector. */\n testId?: string;\n}\n\n/**\n * A placeholder for a region with nothing in it — an empty list, a search with no hits, a cleared\n * queue. Use `Banner` instead to annotate content that is present.\n */\nexport function EmptyState({\n title,\n description,\n icon,\n action,\n align = 'center',\n padding = 32,\n className,\n style,\n testId,\n}: EmptyStateProps) {\n const emptyStateStyle = {\n // `CdsSpace` includes 0 but `spacing.css` defines no `--cds-space-0`, so zero is written literally.\n '--empty-state-padding': padding === 0 ? '0' : `var(--cds-space-${padding})`,\n ...style,\n } as React.CSSProperties;\n\n return (\n \n {icon &&
{icon}
}\n
\n \n {title}\n \n {description && (\n \n {description}\n \n )}\n
\n {action &&
{action}
}\n \n );\n}\n" }, "spec": { "$schema": "../../../specs/component-spec.schema.json", "identity": { "name": "EmptyState", "status": "preview", "version": "1.0.0", "summary": "A calm full-region placeholder that centers a title, optional description, icon, and recovery action when an area has nothing to show." }, "parts": [ { "id": "root", "label": "Root", "description": "Column that stacks the icon, copy, and action with outer padding.", "required": true }, { "id": "icon", "label": "Icon", "description": "Optional round visual above the title." }, { "id": "copy", "label": "Copy", "description": "Title plus optional description." }, { "id": "action", "label": "Action", "description": "Optional recovery control, usually a Button." } ], "allowedDesignChoices": { "variants": { "placeholder": { "label": "Placeholder", "description": "The single empty/no-results treatment." } }, "sizes": {}, "alignments": { "center": { "label": "Center", "description": "Centers the block and its text." }, "start": { "label": "Start", "description": "Left-aligns the block and its text inside a panel." } } }, "variants": [ { "id": "placeholder", "label": "Placeholder", "description": "Centered empty-region treatment.", "platforms": [ "ios", "android", "web" ] } ], "sizes": [], "measurements": [ { "id": "content-gap", "label": "Content gap", "kind": "exact", "token": "--cds-space-16", "value": 16, "unit": "px", "appliesTo": [ "root" ] }, { "id": "icon-size", "label": "Icon container size", "kind": "exact", "token": "--cds-size-56", "value": 56, "unit": "px", "appliesTo": [ "icon" ] }, { "id": "default-padding", "label": "Default outer padding", "kind": "exact", "token": "--cds-space-32", "value": 32, "unit": "px", "appliesTo": [ "root" ], "notes": "The padding prop selects a spacing step; 32 is the default." } ], "layout": { "alignment": "Icon, copy, and action stack vertically; alignment controls horizontal placement and text alignment.", "flow": "A single column with a max-width copy block capped at 320.", "notes": [ "Use Banner to annotate content that is present rather than a whole empty region." ] }, "typographyAndColor": { "typography": [ { "label": "Title", "description": "Uses the h4 ramp.", "token": "--cds-type-h4-size" }, { "label": "Description", "description": "Uses the body ramp.", "token": "--cds-type-body-size" } ], "colors": [ { "label": "Title", "description": "Primary text for the title.", "token": "--cds-text-primary" }, { "label": "Description", "description": "Secondary text for supporting copy and the icon.", "token": "--cds-text-secondary" }, { "label": "Icon surface", "description": "The icon sits on a raised surface disc.", "token": "--cds-bg-surface" } ] }, "states": [ { "id": "center", "label": "Centered", "description": "Content centered on both the horizontal axis and text." }, { "id": "start", "label": "Start aligned", "description": "Content left-aligned inside a panel." }, { "id": "with-icon", "label": "With icon", "description": "Shows the round icon disc above the title." }, { "id": "with-action", "label": "With action", "description": "Shows a recovery action below the copy." } ], "behavior": [ { "label": "Alignment", "description": "Set align to center for standalone screens or start for in-panel placeholders." }, { "label": "Recovery action", "description": "Offer an action only when the user can meaningfully resolve the empty state." } ], "accessibility": [ { "label": "Heading", "description": "The title renders as a heading so the empty region is announced." }, { "label": "Actionable copy", "description": "Describe the next step in the description rather than relying on the icon." } ], "contentAdaptation": [ { "label": "Copy width", "description": "The copy column caps its width so long descriptions stay readable." }, { "label": "Optional slots", "description": "Icon, description, and action each render only when provided." } ], "motionHaptics": { "motion": [ { "label": "Static", "description": "EmptyState does not animate on appearance." } ], "haptics": [ { "label": "No feedback", "description": "The container requests no haptics; its action button owns any feedback." } ] }, "platformDifferences": [] }, "spec_source": "packages/design-system/src/components/status/EmptyState/EmptyState.spec.json", "guidance_source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.mdx", "code": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\nimport { ComponentSpec } from '../../../../.storybook/blocks';\nimport * as Stories from './EmptyState.stories';\nimport emptyStateSpec from './EmptyState.spec.json';\n\n\n\n# EmptyState\n\nA full-region placeholder for when a whole area has nothing to show — a title, optional description\nand icon, and an optional recovery `action`.\n\n\n\n## When to use\n\nReach for `EmptyState` when an entire region is empty and you want to explain why and offer a way\nforward — a cleared queue, a search with no hits, a list before its first item. Pass an `action`\n(usually a `Button`) when there's a recovery path.\n\n- Content IS present and you're annotating it (a note or warning alongside real data)? Use `Banner`.\n- The region isn't empty, it's still loading? Use `Skeleton` to preserve the layout while it loads.\n\n\n\n## Design Guidelines\n\n\n\n## Props\n\n\n" }, "props": [ { "name": "title", "type": "string", "declared_type": "string", "required": true, "description": "Headline naming what is missing. Renders as an `h3`.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 14 } }, { "name": "description", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Optional supporting line beneath the title.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 16 } }, { "name": "icon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Optional visual shown above the title.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 18 } }, { "name": "action", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Optional action slot, usually a Button.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 20 } }, { "name": "align", "type": "EmptyStateAlign | undefined", "declared_type": "EmptyStateAlign", "required": false, "description": "Text alignment and horizontal placement of the block. Defaults to `center`.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 22 }, "values": [ "center", "start" ], "values_complete": true, "default": "'center'", "default_kind": "source-expression" }, { "name": "padding", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Outer padding token. Defaults to `32`.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 24 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true, "default": "32", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 25 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 26 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional test selector.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 28 } } ], "prop_shapes": {}, "examples": [], "tokens": [ { "name": "--cds-space-16", "light": "16px", "dark": "16px" }, { "name": "--cds-size-56", "light": "56px", "dark": "56px" }, { "name": "--cds-space-32", "light": "32px", "dark": "32px" }, { "name": "--cds-type-h4-size", "light": "1.25rem", "dark": "1.25rem" }, { "name": "--cds-type-body-size", "light": "1rem", "dark": "1rem" }, { "name": "--cds-text-primary", "light": "#141410", "dark": "#f3f1ed" }, { "name": "--cds-text-secondary", "light": "#646260", "dark": "#ffffff99" }, { "name": "--cds-bg-surface", "light": "#ffffff", "dark": "#1b1b18" } ], "visual_reference": { "stories": [ { "id": "cloaked-design-system-status-emptystate--playground", "name": "Playground", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Playground", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--playground&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--default", "name": "Default", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Default", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--default&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--with-icon", "name": "With Icon", "title": "Cloaked Design System/Status/EmptyState", "exportName": "WithIcon", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--with-icon&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--with-action", "name": "With Action", "title": "Cloaked Design System/Status/EmptyState", "exportName": "WithAction", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--with-action&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--start-aligned", "name": "Start Aligned", "title": "Cloaked Design System/Status/EmptyState", "exportName": "StartAligned", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--start-aligned&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--padded", "name": "Padded", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Padded", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--padded&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--long-content", "name": "Long Content", "title": "Cloaked Design System/Status/EmptyState", "exportName": "LongContent", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--long-content&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Status/EmptyState", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--dark-theme&viewMode=story" } ], "name": "EmptyState", "id": "emptystate", "category": "Status" }, "stories": [ { "id": "cloaked-design-system-status-emptystate--playground", "name": "Playground", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Playground", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--playground&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--default", "name": "Default", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Default", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--default&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--with-icon", "name": "With Icon", "title": "Cloaked Design System/Status/EmptyState", "exportName": "WithIcon", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--with-icon&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--with-action", "name": "With Action", "title": "Cloaked Design System/Status/EmptyState", "exportName": "WithAction", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--with-action&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--start-aligned", "name": "Start Aligned", "title": "Cloaked Design System/Status/EmptyState", "exportName": "StartAligned", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--start-aligned&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--padded", "name": "Padded", "title": "Cloaked Design System/Status/EmptyState", "exportName": "Padded", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--padded&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--long-content", "name": "Long Content", "title": "Cloaked Design System/Status/EmptyState", "exportName": "LongContent", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--long-content&viewMode=story" }, { "id": "cloaked-design-system-status-emptystate--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Status/EmptyState", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "source_digest": "97255d640c3165566d35ac7c23ff2b3ad9b45dad7825c50bc7aa4b6368870e3b", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-status-emptystate--dark-theme&viewMode=story" } ], "stories_source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.stories.tsx", "code": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Button } from '../../primitives/Button/Button';\nimport { Icon } from '../../primitives/Icon/Icon';\nimport { SPACE_OPTIONS, disabledControl, selectArgType } from '../../../storybook/controlOptions';\nimport { EmptyState } from './EmptyState';\nimport type { EmptyStateAlign } from './EmptyState';\n\nconst EMPTY_STATE_ALIGN_OPTIONS = ['center', 'start'] as const satisfies readonly EmptyStateAlign[];\n\nconst meta: Meta = {\n title: 'Cloaked Design System/Status/EmptyState',\n component: EmptyState,\n parameters: {\n a11y: { test: 'error' },\n docs: {\n description: {\n component:\n 'Full-region placeholder for when there is nothing to show — an empty list, a search with no ' +\n 'hits, or a queue that has been cleared. It centers a title, optional description, optional ' +\n 'icon, and an optional recovery `action`. Use it when a whole area is empty; use `Banner` ' +\n 'instead to annotate content that IS present (a note or warning alongside real data).',\n },\n },\n },\n args: {\n title: 'No results found',\n description: 'Try changing your filters or searching for something else.',\n },\n argTypes: {\n align: {\n ...selectArgType(EMPTY_STATE_ALIGN_OPTIONS),\n description: 'Text alignment and horizontal placement of the block.',\n },\n padding: {\n ...selectArgType(SPACE_OPTIONS),\n description: 'Outer padding as a `--cds-space-*` token. Defaults to `32`.',\n },\n icon: { ...disabledControl, description: 'Optional visual shown above the title.' },\n action: { ...disabledControl, description: 'Optional recovery action, usually a `Button`.' },\n },\n};\nexport default meta;\ntype Story = StoryObj;\n\nexport const Playground: Story = {};\n\nexport const Default: Story = {\n args: {\n title: 'No results found',\n description: 'Try changing your filters or searching for something else.',\n },\n};\n\nexport const WithIcon: Story = {\n args: {\n title: 'No messages yet',\n description: 'New alerts will appear here when there is activity.',\n icon: ,\n },\n};\n\nexport const WithAction: Story = {\n args: {\n title: 'No scans yet',\n description: 'Run your first scan to see what information is exposed.',\n action: (\n \n ),\n },\n};\n\nexport const StartAligned: Story = {\n parameters: {\n docs: { description: { story: '`align=\"start\"` for left-aligned empty states inside a panel.' } },\n },\n args: {\n align: 'start',\n title: 'Nothing to review',\n description: 'Completed items will move out of this queue.',\n },\n};\n\nexport const Padded: Story = {\n parameters: {\n docs: { description: { story: 'Custom `padding` token (`24`) overriding the default `32`.' } },\n },\n args: {\n title: 'No exposure found',\n description: 'Your monitored details look clear right now.',\n icon: ,\n padding: 24,\n },\n};\n\nexport const LongContent: Story = {\n parameters: {\n docs: { description: { story: 'Long copy to check wrapping and vertical spacing with a recovery action.' } },\n },\n args: {\n title: 'Nothing matched your current filters',\n description:\n 'This longer message checks wrapping and vertical spacing when the empty state needs to explain what happened and what the user can do next.',\n action: (\n \n ),\n },\n};\n\nexport const DarkTheme: Story = {\n parameters: {\n docs: { description: { story: 'EmptyState with an icon and action rendered against the dark theme surface.' } },\n },\n args: {\n title: 'No exposure found',\n description: 'Your monitored details look clear right now.',\n icon: ,\n action: (\n \n ),\n },\n globals: { theme: 'dark' },\n};\n" }, "links": { "human": "/component-emptystate", "json": "/data/components/emptystate.json", "markdown": "/data/components/emptystate.md", "storybook": "/storybook/?path=/story/cloaked-design-system-status-emptystate--playground" }, "contract_status": "preview", "contract_kind": "source-derived", "approval": "required", "api": { "method": "typescript-type-checker", "typescript_version": "5.9.3", "public_export": "EmptyState", "public_path": "EmptyState", "import_path": "@cloakedinc/design-system", "root_kind": "component", "entrypoints": [ { "name": "EmptyState", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 35 }, "props_type": "EmptyStateProps", "props": [ { "name": "title", "type": "string", "declared_type": "string", "required": true, "description": "Headline naming what is missing. Renders as an `h3`.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 14 } }, { "name": "description", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Optional supporting line beneath the title.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 16 } }, { "name": "icon", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Optional visual shown above the title.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 18 } }, { "name": "action", "type": "React.ReactNode", "declared_type": "React.ReactNode", "required": false, "description": "Optional action slot, usually a Button.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 20 } }, { "name": "align", "type": "EmptyStateAlign | undefined", "declared_type": "EmptyStateAlign", "required": false, "description": "Text alignment and horizontal placement of the block. Defaults to `center`.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 22 }, "values": [ "center", "start" ], "values_complete": true, "default": "'center'", "default_kind": "source-expression" }, { "name": "padding", "type": "0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 96 | 120 | 240 | undefined", "declared_type": "CdsSpace", "required": false, "description": "Outer padding token. Defaults to `32`.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 24 }, "values": [ 0, 12, 120, 16, 20, 24, 240, 32, 4, 40, 48, 56, 64, 72, 8, 80, 96 ], "values_complete": true, "default": "32", "default_kind": "source-expression" }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 25 } }, { "name": "style", "type": "React.CSSProperties | undefined", "declared_type": "React.CSSProperties", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 26 } }, { "name": "testId", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Optional test selector.", "source": { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 28 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" } ], "type_sources": [ { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 7, "name": "EmptyStateAlign", "code": "export type EmptyStateAlign = 'center' | 'start';" }, { "path": "packages/design-system/src/components/status/EmptyState/EmptyState.tsx", "line": 12, "name": "EmptyStateProps", "code": "export interface EmptyStateProps {\n /** Headline naming what is missing. Renders as an `h3`. */\n title: string;\n /** Optional supporting line beneath the title. */\n description?: React.ReactNode;\n /** Optional visual shown above the title. */\n icon?: React.ReactNode;\n /** Optional action slot, usually a Button. */\n action?: React.ReactNode;\n /** Text alignment and horizontal placement of the block. Defaults to `center`. */\n align?: EmptyStateAlign;\n /** Outer padding token. Defaults to `32`. */\n padding?: CdsSpace;\n className?: string;\n style?: React.CSSProperties;\n /** Optional test selector. */\n testId?: string;\n}" }, { "path": "packages/design-system/src/tokens/CdsSpace.ts", "line": 8, "name": "PUI_SPACES", "code": "PUI_SPACES = [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 120, 240] as const" }, { "path": "packages/design-system/src/tokens/CdsSpace.ts", "line": 13, "name": "CdsSpace", "code": "export type CdsSpace = (typeof PUI_SPACES)[number];" } ], "defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source." }, "platforms": { "implemented": [ "web" ], "native": "Imported design guidance only; no native implementation or parity verification in this preview.", "react": { "implementation": "local", "status": "preview", "parity": "web-reference" }, "vue": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" }, "swift": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" }, "kotlin": { "implementation": "absent", "parity": "not-verified", "status": "reference-only" } }, "missing_facts": [ { "code": "human-review-pending", "detail": "This local preview has no recorded human design or engineering sign-off." }, { "code": "platform-parity-unverified", "detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified." }, { "code": "figma-mapping-unverified", "detail": "No current component-level Figma node and immutable revision have been verified for this contract." } ], "review": { "local_status": "not-reviewed", "source_approval": null, "imported_spec_status": "approved", "spec_origin": "imported-adapted", "local_spec_source_status": "approved", "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract." } }