{ "metadata": { "schemaVersion": "1.4.0", "designSystemVersion": "0.2.0-beta", "generatedFrom": "lib/component-registry.ts", "canonicalBaseUrl": "https://skrewww.com", "componentCount": 47, "implementedComponentCount": 47, "lastUpdated": "2026-07-13" }, "components": [ { "slug": "button", "name": "Button", "category": "Actions", "summary": "Button is a primary interactive trigger for user actions — submit, confirm, navigate, or initiate a process.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/button", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Actions / Button — Style × Size × State (45 variants)", "supportedVariants": [ "primary", "secondary", "danger" ], "supportedStates": [ "primary", "secondary", "danger" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "component/radius/control", "semantic/action/primary", "semantic/action/danger", "semantic/surface/default", "semantic/text/inverse", "semantic/text/primary", "semantic/focus-ring", "opacity/disabled" ], "relatedComponents": [ { "name": "Icon Button", "slug": "icon-button", "href": "https://skrewww.com/components/icon-button" }, { "name": "Link", "slug": "link", "href": "https://skrewww.com/components/link" }, { "name": "Split Button", "slug": "split-button", "href": "https://skrewww.com/components/split-button" } ], "openQuestions": [ "Confirm exact control height and horizontal padding per size from Figma.", "Trailing icon is not defined as a separate Figma property on Button — supported in code for composition; confirm with design.", "Gradient and Glass surface personalities for Button need Surface collection token values." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "dependencies": [], "coreDependencies": [ "tokens", "shape", "surface" ], "files": [ "components/ui/Button.tsx", "components/ui/button.module.css" ], "cssTokens": [ "--control-font-size-lg", "--control-font-size-md", "--control-font-size-sm", "--control-gap", "--control-height-lg", "--control-height-md", "--control-height-sm", "--control-padding-x-lg", "--control-padding-x-md", "--control-padding-x-sm", "--glass-backdrop-filter-sm", "--opacity-disabled", "--semantic-action-danger", "--semantic-action-danger-hover", "--semantic-action-danger-pressed", "--semantic-action-primary", "--semantic-action-primary-hover", "--semantic-action-primary-pressed", "--semantic-border-default", "--semantic-border-disabled", "--semantic-border-strong", "--semantic-focus-ring", "--semantic-surface-disabled", "--semantic-surface-elevated", "--semantic-surface-subtle", "--semantic-text-disabled", "--semantic-text-inverse", "--semantic-text-primary", "--shape-radius-control", "--squircle-clip-path-control", "--surface-fill-control" ] }, { "slug": "card", "name": "Card", "category": "Containers & Overlays", "summary": "Card is a general-purpose content container grouping related information with a clear visual boundary.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/card", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Containers / Card — Elevation (Flat/Raised)", "supportedVariants": [ "flat", "raised" ], "supportedStates": [ "flat", "raised" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "semantic/border/default", "component/radius/container", "shadow-blur/3", "shadow-color/3" ], "relatedComponents": [ { "name": "Dialog", "slug": "dialog", "href": "https://skrewww.com/components/dialog" }, { "name": "Accordion", "slug": "accordion", "href": "https://skrewww.com/components/accordion" } ], "openQuestions": [ "Confirm raised elevation shadow offset/spread values from Figma shadow tokens.", "Clickable-card pattern (single interactive target) not implemented — TODO before using Card as a link surface." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "dependencies": [], "coreDependencies": [ "tokens", "shape", "surface" ], "files": [ "components/ui/Card.tsx", "components/ui/card.module.css" ], "cssTokens": [ "--glass-backdrop-filter-md", "--semantic-text-primary", "--semantic-text-secondary", "--shape-radius-container", "--squircle-clip-path-container", "--surface-border-default", "--surface-fill-default", "--surface-shadow-raised" ] }, { "slug": "text-input", "name": "Text Input", "category": "Forms", "summary": "Text Input is a single-line text entry for short, free-form data such as names, emails, or search terms.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/text-input", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Forms / Text Input — State × Size (15 variants)", "supportedVariants": [ "default", "error", "disabled" ], "supportedStates": [ "default", "error", "disabled" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "component/radius/control", "semantic/border/default", "semantic/border/strong", "semantic/focus-ring", "semantic/action/danger", "semantic/surface/default" ], "relatedComponents": [ { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" }, { "name": "Validation Message", "slug": "validation-message", "href": "https://skrewww.com/components/validation-message" }, { "name": "Textarea", "slug": "textarea", "href": "https://skrewww.com/components/textarea" }, { "name": "Search Field", "slug": "search-field", "href": "https://skrewww.com/components/search-field" } ], "openQuestions": [ "FormField composes label/helper/error internally — confirm parity with Figma Form Field Wrapper split.", "Hover state token mapping not explicitly documented — uses semantic/border/strong on hover.", "Trailing action slot is a documentation convenience; confirm Figma trailing icon property semantics." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "dependencies": [], "coreDependencies": [ "tokens", "shape", "surface" ], "files": [ "components/ui/TextInput.tsx", "components/ui/text-input.module.css" ], "cssTokens": [ "--control-font-size-lg", "--control-font-size-md", "--control-font-size-sm", "--control-height-lg", "--control-height-md", "--control-height-sm", "--control-padding-x-lg", "--control-padding-x-md", "--control-padding-x-sm", "--glass-backdrop-filter-sm", "--opacity-disabled", "--semantic-action-danger", "--semantic-border-default", "--semantic-border-disabled", "--semantic-border-strong", "--semantic-focus-ring", "--semantic-icon-muted", "--semantic-surface-disabled", "--semantic-surface-subtle", "--semantic-text-disabled", "--semantic-text-primary", "--shape-radius-control", "--squircle-clip-path-control", "--surface-fill-control" ] }, { "slug": "form-field", "name": "Form Field", "category": "Forms", "summary": "Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/form-field", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Form Field Wrapper — State (Default/Error)", "supportedVariants": [ "default", "error" ], "supportedStates": [ "default", "error" ], "supportedSizes": [], "tokensUsed": [ "semantic/text/primary", "semantic/text/secondary", "semantic/action/danger" ], "relatedComponents": [ { "name": "Validation Message", "slug": "validation-message", "href": "https://skrewww.com/components/validation-message" }, { "name": "Text Input", "slug": "text-input", "href": "https://skrewww.com/components/text-input" }, { "name": "Textarea", "slug": "textarea", "href": "https://skrewww.com/components/textarea" }, { "name": "Select", "slug": "select", "href": "https://skrewww.com/components/select" }, { "name": "Search Field", "slug": "search-field", "href": "https://skrewww.com/components/search-field" }, { "name": "Checkbox", "slug": "checkbox", "href": "https://skrewww.com/components/checkbox" } ], "openQuestions": [ "Horizontal label layout is unresolved in Figma — vertical layout only.", "React name is FormField; Figma name is Form Field Wrapper." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "dependencies": [], "coreDependencies": [ "tokens" ], "files": [ "components/ui/FormField.tsx", "components/ui/form-field.module.css" ], "cssTokens": [ "--semantic-action-danger", "--semantic-text-primary", "--semantic-text-secondary" ] }, { "slug": "validation-message", "name": "Validation Message", "category": "Forms", "summary": "Validation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/validation-message", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Validation Message — Type (Error/Warning/Success/Info)", "supportedVariants": [ "error", "warning", "success", "info" ], "supportedStates": [ "error", "warning", "success", "info" ], "supportedSizes": [], "tokensUsed": [ "semantic/action/danger", "semantic/feedback/warning", "semantic/feedback/success", "semantic/feedback/info" ], "relatedComponents": [ { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" }, { "name": "Text Input", "slug": "text-input", "href": "https://skrewww.com/components/text-input" } ], "openQuestions": [ "Info type icon swap to dedicated Info icon is pending Figma confirmation." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "dependencies": [ "@phosphor-icons/react" ], "coreDependencies": [ "tokens" ], "files": [ "components/ui/ValidationMessage.tsx", "components/ui/validation-message.module.css" ], "cssTokens": [ "--semantic-action-danger", "--semantic-feedback-info", "--semantic-feedback-success", "--semantic-feedback-warning" ] }, { "slug": "checkbox", "name": "Checkbox", "category": "Forms", "summary": "Checkbox is a native checkbox for independent or multi-select choices, including indeterminate group states.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/checkbox", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Checkbox — Value × State (12 variants)", "supportedVariants": [ "unchecked", "checked", "indeterminate", "disabled", "error" ], "supportedStates": [ "unchecked", "checked", "indeterminate", "disabled", "error" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "semantic/border/default", "semantic/action/primary", "semantic/focus-ring", "semantic/action/danger" ], "relatedComponents": [ { "name": "Switch", "slug": "switch", "href": "https://skrewww.com/components/switch" }, { "name": "Radio", "slug": "radio", "href": "https://skrewww.com/components/radio" }, { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" } ], "openQuestions": [ "Figma does not define a separate Checkbox size variant — single control size implemented.", "Checkbox controls intentionally ignore decorative Gradient/Glass surfaces." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "radio", "name": "Radio", "category": "Forms", "summary": "Radio is a native radio button for a single option inside a mutually exclusive group.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/radio", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Radio — Value × State (8 variants)", "supportedVariants": [ "unselected", "selected", "disabled", "error" ], "supportedStates": [ "unselected", "selected", "disabled", "error" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "semantic/border/default", "semantic/action/primary", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Radio Group", "slug": "radio-group", "href": "https://skrewww.com/components/radio-group" }, { "name": "Select", "slug": "select", "href": "https://skrewww.com/components/select" } ], "openQuestions": [ "Radio indicator remains circular in all shape personalities by design." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "radio-group", "name": "Radio Group", "category": "Forms", "summary": "Radio Group is an accessible grouping layer for mutually exclusive radio options with legend, helper text, and errors.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "partial", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/radio-group", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Radio — composed as a named set", "supportedVariants": [ "default", "disabled", "error" ], "supportedStates": [ "default", "disabled", "error" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "semantic/border/default", "semantic/action/primary", "semantic/focus-ring", "semantic/action/danger" ], "relatedComponents": [ { "name": "Radio", "slug": "radio", "href": "https://skrewww.com/components/radio" }, { "name": "Select", "slug": "select", "href": "https://skrewww.com/components/select" }, { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" } ], "openQuestions": [ "Figma documents Radio variants but not a separate Radio Group component frame — group behavior inferred from accessibility requirements." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "switch", "name": "Switch", "category": "Forms", "summary": "Switch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/switch", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Switch — Value (Off/On) × State (8 variants)", "supportedVariants": [ "off", "on", "disabled" ], "supportedStates": [ "off", "on", "disabled" ], "supportedSizes": [], "tokensUsed": [ "semantic/border/strong", "semantic/action/primary", "semantic/surface/default", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Checkbox", "slug": "checkbox", "href": "https://skrewww.com/components/checkbox" }, { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" } ], "openQuestions": [ "Switch thumb travel uses temporary spacing tokens pending Figma alignment property confirmation.", "Switch surfaces remain functionally flat in Gradient/Glass modes." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "textarea", "name": "Textarea", "category": "Forms", "summary": "Textarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/textarea", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Textarea — State × Size (15 variants)", "supportedVariants": [ "default", "error", "disabled", "read-only" ], "supportedStates": [ "default", "error", "disabled", "read-only" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "component/radius/control", "semantic/border/default", "semantic/focus-ring", "semantic/surface/default" ], "relatedComponents": [ { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" }, { "name": "Text Input", "slug": "text-input", "href": "https://skrewww.com/components/text-input" }, { "name": "Validation Message", "slug": "validation-message", "href": "https://skrewww.com/components/validation-message" } ], "openQuestions": [ "Minimum height uses temporary tokens — Figma has no numeric height property.", "Vertical resize enabled as temporary default pending Figma confirmation." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "select", "name": "Select", "category": "Forms", "summary": "Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/select", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Select — State × Size (15 variants)", "supportedVariants": [ "default", "error", "disabled" ], "supportedStates": [ "default", "error", "disabled" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "component/radius/control", "semantic/border/default", "semantic/icon/muted", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" }, { "name": "Radio Group", "slug": "radio-group", "href": "https://skrewww.com/components/radio-group" }, { "name": "Combobox", "slug": "combobox", "href": "https://skrewww.com/components/combobox" } ], "openQuestions": [ "Decorative CaretDown icon overlays native appearance:none styling." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "combobox", "name": "Combobox", "category": "Forms", "summary": "Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/combobox", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-12", "figmaReference": "Forms / Combobox — State (5 variants)", "supportedVariants": [ "default", "error", "disabled" ], "supportedStates": [ "default", "error", "disabled" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "component/radius/control", "combobox/popup-surface", "combobox/option-active-surface", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Select", "slug": "select", "href": "https://skrewww.com/components/select" }, { "name": "Search Field", "slug": "search-field", "href": "https://skrewww.com/components/search-field" }, { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" } ], "openQuestions": [ "Figma MCP inspection unavailable in parity pass — component-set node ID and exact token values remain unresolved.", "Multi-select chips mode exists in Figma but is deferred in Beta.", "Clear control not confirmed via MCP — deferred.", "Option leading icons and descriptions not confirmed via MCP — deferred.", "Remote/async fetching is not implemented.", "Free-form custom values are not supported — closed predefined option list only.", "Diacritic-insensitive filtering is not implemented — locale lowercase only." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Polite role=status region announces on open, when results become empty, and when results return after empty. No role=option for empty rows." }, { "slug": "search-field", "name": "Search Field", "category": "Forms", "summary": "Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.", "status": "beta", "version": "0.2.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/search-field", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Search Field — State × Size (12 variants)", "supportedVariants": [ "default", "error", "disabled" ], "supportedStates": [ "default", "error", "disabled" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "component/radius/control", "semantic/border/default", "semantic/icon/muted", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Text Input", "slug": "text-input", "href": "https://skrewww.com/components/text-input" }, { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" } ], "openQuestions": [ "No autocomplete, suggestions, or result popover in this phase.", "Escape clears the field when a value is present and showClear is enabled." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "date-picker", "name": "Date Picker", "category": "Forms", "summary": "Date Picker is a date-only field with editable D MMM YYYY text entry (en-GB) and calendar popover for single-date selection.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/date-picker", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / Date Picker — text-input-style trigger + calendar popover", "supportedVariants": [ "single-date" ], "supportedStates": [ "single-date" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "component/radius/control", "semantic/border/default", "semantic/icon/muted", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Calendar Grid", "slug": "calendar-grid", "href": "https://skrewww.com/components/calendar-grid" }, { "name": "Calendar Day", "slug": "calendar-day", "href": "https://skrewww.com/components/calendar-day" }, { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" }, { "name": "Popover", "slug": "popover", "href": "https://skrewww.com/components/popover" } ], "openQuestions": [ "Custom formatDate/parseDate pairs override locale display when both are provided." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "file-upload", "name": "File Upload", "category": "Forms", "summary": "File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not network upload.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/file-upload", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Forms / File Upload — State (Empty/Dragging/Filled/Error/Disabled)", "supportedVariants": [ "empty", "dragging", "filled", "error", "disabled" ], "supportedStates": [ "empty", "dragging", "filled", "error", "disabled" ], "supportedSizes": [], "tokensUsed": [ "semantic/border/default", "semantic/action/primary", "semantic/action/danger", "semantic/surface/elevated", "file-upload-surface", "file-upload-border-dragging" ], "relatedComponents": [ { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" }, { "name": "Validation Message", "slug": "validation-message", "href": "https://skrewww.com/components/validation-message" }, { "name": "Progress Bar", "slug": "progress-bar", "href": "https://skrewww.com/components/progress-bar" }, { "name": "Button", "slug": "button", "href": "https://skrewww.com/components/button" } ], "openQuestions": [ "Figma component-set node ID unresolved — live MCP verification pending.", "Temporary file-upload tokens await Figma variable confirmation.", "Controlled files prop is intentionally unsupported in this MVP.", "Upload progress, retry, preview, and async behavior are deferred." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Polite status region announces selection, rejection, removal, and clear events — not every dragenter/dragleave." }, { "slug": "alert", "name": "Alert", "category": "Feedback", "summary": "Alert is a persistent inline feedback block for contextual status tied to page content — not auto-dismissing.", "status": "beta", "version": "0.3.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/alert", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Feedback / Alert — Type (Info/Success/Warning/Error)", "supportedVariants": [ "info", "success", "warning", "error" ], "supportedStates": [ "info", "success", "warning", "error" ], "supportedSizes": [], "tokensUsed": [ "component/radius/container", "semantic/feedback/info", "semantic/feedback/success", "semantic/feedback/warning", "semantic/action/danger" ], "relatedComponents": [ { "name": "Toast", "slug": "toast", "href": "https://skrewww.com/components/toast" }, { "name": "Validation Message", "slug": "validation-message", "href": "https://skrewww.com/components/validation-message" } ], "openQuestions": [ "Optional action slot semantics pending Figma confirmation for primary action placement." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Default off. Use polite for non-urgent dynamic updates. Use assertive only for dynamically introduced urgent errors." }, { "slug": "toast", "name": "Toast", "category": "Feedback", "summary": "Toast is a transient floating notification for confirming actions or reporting short-lived events.", "status": "beta", "version": "0.3.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/toast", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Feedback / Toast — Type (4 variants)", "supportedVariants": [ "info", "success", "warning", "error" ], "supportedStates": [ "info", "success", "warning", "error" ], "supportedSizes": [], "tokensUsed": [ "component/radius/container", "semantic/surface/default", "semantic/feedback/info", "semantic/feedback/success" ], "relatedComponents": [ { "name": "Alert", "slug": "alert", "href": "https://skrewww.com/components/alert" }, { "name": "Dialog", "slug": "dialog", "href": "https://skrewww.com/components/dialog" } ], "openQuestions": [ "Undo action pattern pending Figma confirmation for Toast action slot." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Success and info use polite live regions. Error may use assertive when urgent. Toasts do not steal focus." }, { "slug": "progress-bar", "name": "Progress Bar", "category": "Feedback", "summary": "Progress Bar is determinate or indeterminate progress toward a known or unknown completion point.", "status": "beta", "version": "0.3.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/progress-bar", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Feedback / Progress Bar — Style (Default/Success/Warning/Danger)", "supportedVariants": [ "default", "success", "warning", "danger" ], "supportedStates": [ "default", "success", "warning", "danger" ], "supportedSizes": [], "tokensUsed": [ "semantic/border/default", "semantic/action/primary", "semantic/feedback/success", "semantic/feedback/warning", "semantic/action/danger" ], "relatedComponents": [ { "name": "Spinner", "slug": "spinner", "href": "https://skrewww.com/components/spinner" } ], "openQuestions": [ "Figma has no numeric value property — React exposes value/max for determinate usage." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "No live region by default. Do not announce every percentage change." }, { "slug": "spinner", "name": "Spinner", "category": "Feedback", "summary": "Spinner is an indeterminate loading indicator for operations without a meaningful completion percentage.", "status": "beta", "version": "0.3.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/spinner", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Feedback / Spinner — Size (Small/Medium/Large)", "supportedVariants": [ "decorative", "labeled" ], "supportedStates": [ "decorative", "labeled" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "semantic/border/default", "semantic/action/primary" ], "relatedComponents": [ { "name": "Progress Bar", "slug": "progress-bar", "href": "https://skrewww.com/components/progress-bar" } ], "openQuestions": [ "Reduced-motion fallback uses stepped opacity pulse rather than rotation." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Decorative spinners are aria-hidden. Standalone spinners expose one status label." }, { "slug": "badge", "name": "Badge", "category": "Feedback", "summary": "Badge is a compact non-interactive label for status, classification, or numeric counts at a glance.", "status": "beta", "version": "0.3.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/badge", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Feedback / Badge — Style × Size (12 variants)", "supportedVariants": [ "neutral", "info", "success", "warning", "error" ], "supportedStates": [ "neutral", "info", "success", "warning", "error" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "semantic/surface/elevated", "semantic/feedback/info", "semantic/feedback/success", "semantic/feedback/warning", "semantic/action/danger", "component/radius/control" ], "relatedComponents": [ { "name": "Alert", "slug": "alert", "href": "https://skrewww.com/components/alert" }, { "name": "Validation Message", "slug": "validation-message", "href": "https://skrewww.com/components/validation-message" } ], "openQuestions": [ "Removable Badge behavior is deferred — use Content/Tag when user-generated removable labels are required." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Static badges do not use live regions. Dynamic count updates may use a separate polite strategy." }, { "slug": "tooltip", "name": "Tooltip", "category": "Feedback", "summary": "Tooltip is a brief supplementary label for a trigger, shown on keyboard focus or pointer hover.", "status": "beta", "version": "0.3.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/tooltip", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Feedback / Tooltip — Position (Top/Bottom/Left/Right)", "supportedVariants": [ "top", "right", "bottom", "left" ], "supportedStates": [ "top", "right", "bottom", "left" ], "supportedSizes": [], "tokensUsed": [ "color/neutral/900", "component/radius/container", "semantic/text/inverse" ], "relatedComponents": [ { "name": "Popover", "slug": "popover", "href": "https://skrewww.com/components/popover" }, { "name": "Form Field", "slug": "form-field", "href": "https://skrewww.com/components/form-field" } ], "openQuestions": [ "Arrow pointer position remains a fixed Figma approximation — not dynamically bound to label width." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Tooltip content is exposed through aria-describedby while open — not a live region." }, { "slug": "skeleton", "name": "Skeleton", "category": "Feedback", "summary": "Skeleton is temporary placeholder shapes that preserve layout while known content is loading.", "status": "beta", "version": "0.3.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/skeleton", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Feedback / Skeleton — Shape (Text/Circle/Rectangle)", "supportedVariants": [ "text", "circle", "rectangle" ], "supportedStates": [ "text", "circle", "rectangle" ], "supportedSizes": [], "tokensUsed": [ "color/neutral/300", "semantic/border/default", "component/radius/control" ], "relatedComponents": [ { "name": "Spinner", "slug": "spinner", "href": "https://skrewww.com/components/spinner" }, { "name": "Progress Bar", "slug": "progress-bar", "href": "https://skrewww.com/components/progress-bar" } ], "openQuestions": [ "Composite skeleton layouts remain documentation examples until Figma confirms reusable list-item presets." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Skeleton shapes are aria-hidden. Loading containers expose aria-busy and optional loading text." }, { "slug": "link", "name": "Link", "category": "Actions", "summary": "Link is semantic navigational text styled as inline or standalone links — not for primary actions.", "status": "beta", "version": "0.4.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/link", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Actions / Link — Style × Size × State (45 variants)", "supportedVariants": [ "default", "subtle", "danger" ], "supportedStates": [ "default", "subtle", "danger" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "semantic/text/secondary", "semantic/action/primary", "semantic/action/danger", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Button", "slug": "button", "href": "https://skrewww.com/components/button" }, { "name": "Breadcrumb", "slug": "breadcrumb", "href": "https://skrewww.com/components/breadcrumb" } ], "openQuestions": [ "Visited link styling is not confirmed in Figma — omitted in Beta.", "Disabled link styling is not confirmed — use non-navigating text instead." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "breadcrumb", "name": "Breadcrumb", "category": "Navigation", "summary": "Breadcrumb is an ordered hierarchical trail showing location with navigable ancestors and a current-page indicator.", "status": "beta", "version": "0.4.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/breadcrumb", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Navigation / Breadcrumb — composed from Breadcrumb Item (Default/Hover/Current)", "supportedVariants": [ "default" ], "supportedStates": [ "default" ], "supportedSizes": [], "tokensUsed": [ "semantic/text/secondary", "semantic/text/primary", "semantic/action/primary" ], "relatedComponents": [ { "name": "Link", "slug": "link", "href": "https://skrewww.com/components/link" }, { "name": "Tabs", "slug": "tabs", "href": "https://skrewww.com/components/tabs" } ], "openQuestions": [ "Collapsed breadcrumb ellipsis is not confirmed in Figma — deferred." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "tabs", "name": "Tabs", "category": "Navigation", "summary": "Tabs is a navigation pattern that switches between related in-context views using tablist/tab/tabpanel semantics and roving focus.", "status": "beta", "version": "0.4.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/tabs", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Navigation / Tabs — State × Size (15 variants)", "supportedVariants": [ "automatic", "manual" ], "supportedStates": [ "automatic", "manual" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "semantic/text/secondary", "semantic/action/primary", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Breadcrumb", "slug": "breadcrumb", "href": "https://skrewww.com/components/breadcrumb" }, { "name": "Top Nav Item", "slug": "top-nav-item", "href": "https://skrewww.com/components/top-nav-item" } ], "openQuestions": [ "Vertical Tabs orientation is documented in APG but not confirmed as a Figma variant — horizontal default only." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "pagination", "name": "Pagination", "category": "Navigation", "summary": "Pagination is a paged navigation control with Previous/Next boundaries, numbered pages, and optional ellipsis.", "status": "beta", "version": "0.4.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/pagination", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Navigation / Pagination — composed from Page Item (Default/Hover/Current/Disabled)", "supportedVariants": [ "link", "button" ], "supportedStates": [ "link", "button" ], "supportedSizes": [], "tokensUsed": [ "semantic/text/secondary", "semantic/action/primary", "semantic/surface/elevated" ], "relatedComponents": [ { "name": "Link", "slug": "link", "href": "https://skrewww.com/components/link" }, { "name": "Spinner", "slug": "spinner", "href": "https://skrewww.com/components/spinner" } ], "openQuestions": [ "Responsive collapsed pagination is not confirmed in Figma — sibling/boundary range only." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "menu", "name": "Menu", "category": "Navigation", "summary": "Menu is a compact command surface for contextual actions — distinct from Select (form values) and Popover (supplementary content).", "status": "beta", "version": "0.4.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/menu", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-12", "figmaReference": "Navigation / Menu Item + Dropdown Trigger — composed Menu pattern (Dropdown Menu is a usage alias, not a separate component)", "supportedVariants": [ "default", "destructive" ], "supportedStates": [ "default", "destructive" ], "supportedSizes": [], "tokensUsed": [ "menu/surface", "menu/border", "menu/item-text", "menu/item-hover-surface", "menu/item-destructive-text", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Popover", "slug": "popover", "href": "https://skrewww.com/components/popover" }, { "name": "Select", "slug": "select", "href": "https://skrewww.com/components/select" }, { "name": "Button", "slug": "button", "href": "https://skrewww.com/components/button" }, { "name": "Menu Item", "slug": "menu-item", "href": "https://skrewww.com/components/menu-item" } ], "openQuestions": [ "Checkbox and radio menu items are not confirmed in Figma — deferred.", "Submenus and Context Menu are separate future components.", "Dropdown Menu is documented as a usage pattern, not a duplicate public component." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "accordion", "name": "Accordion", "category": "Containers & Overlays", "summary": "Accordion is a set of stacked collapsible sections for progressive disclosure, built from Accordion Item building blocks.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/accordion", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Containers / Accordion Item — collapsed/expanded states; public API composes Accordion Item", "supportedVariants": [ "single", "multiple" ], "supportedStates": [ "single", "multiple" ], "supportedSizes": [], "tokensUsed": [ "semantic/border/default", "semantic/text/primary", "semantic/icon/muted", "component/radius/container", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Tabs", "slug": "tabs", "href": "https://skrewww.com/components/tabs" }, { "name": "Card", "slug": "card", "href": "https://skrewww.com/components/card" }, { "name": "Dialog", "slug": "dialog", "href": "https://skrewww.com/components/dialog" } ], "openQuestions": [ "Figma documents Accordion Item only — single vs multiple expansion is an implementation convention, not a separate Figma variant.", "Disabled accordion items, leading icons, and size variants are not confirmed in Figma.", "Arrow-key roving accordion pattern is intentionally not implemented." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "dialog", "name": "Dialog", "category": "Containers & Overlays", "summary": "Dialog is a modal overlay that interrupts workflow for focused attention, information, or a decision.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/dialog", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Containers / Dialog — Title + Body + Footer with real Button instances and scrim composition", "supportedVariants": [ "modal" ], "supportedStates": [ "modal" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "component/radius/container", "shadow-blur/5", "shadow-color/5", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Popover", "slug": "popover", "href": "https://skrewww.com/components/popover" }, { "name": "Drawer", "slug": "drawer", "href": "https://skrewww.com/components/drawer" }, { "name": "Card", "slug": "card", "href": "https://skrewww.com/components/card" } ], "openQuestions": [ "Destructive alertdialog variant not confirmed as a separate Figma pattern — use Dialog with danger actions for now.", "Full-screen mobile Dialog layout not confirmed — viewport padding and max-height cap used instead." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Dialog content is exposed through role=\"dialog\" naming — not a live region." }, { "slug": "popover", "name": "Popover", "category": "Containers & Overlays", "summary": "Popover is a non-modal floating panel for supplementary or lightly interactive content anchored to a trigger.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/popover", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Containers / Popover — Title + Body with bottom-pointing arrow variant", "supportedVariants": [ "default" ], "supportedStates": [ "default" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "semantic/border/default", "component/radius/container", "shadow-blur/4", "shadow-color/4", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Tooltip", "slug": "tooltip", "href": "https://skrewww.com/components/tooltip" }, { "name": "Dialog", "slug": "dialog", "href": "https://skrewww.com/components/dialog" }, { "name": "Card", "slug": "card", "href": "https://skrewww.com/components/card" } ], "openQuestions": [ "Confirm whether additional arrow placements beyond the Figma bottom variant are required.", "Popover inside scrollable clipped containers may need dedicated collision tuning." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Named Popovers use role=\"dialog\" without aria-modal. Simple unnamed supplementary Popovers use a semantic-neutral container with no landmark role." }, { "slug": "drawer", "name": "Drawer", "category": "Containers & Overlays", "summary": "Drawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/drawer", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-11", "figmaReference": "Containers / Drawer — left-anchored panel; viewport-attached left edge flush, exposed right corners rounded", "supportedVariants": [ "left" ], "supportedStates": [ "left" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "component/radius/container", "shadow-blur/5", "shadow-color/5", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Dialog", "slug": "dialog", "href": "https://skrewww.com/components/dialog" }, { "name": "Popover", "slug": "popover", "href": "https://skrewww.com/components/popover" }, { "name": "Card", "slug": "card", "href": "https://skrewww.com/components/card" } ], "openQuestions": [ "Right, top, and bottom placements are not confirmed in Figma — only left placement is implemented.", "Swipe-to-close, drag handles, and snap points are not confirmed.", "Full-screen mobile Drawer layout is not confirmed — max-width cap used instead.", "Figma prose said “left corners rounded, right edge flush” but topRightRadius=0 refers to the viewport-attached corner. Implementation uses left edge flush with right-corner radius per edge-attachment geometry." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Drawer uses role=\"dialog\" with aria-modal=\"true\" and the same modality model as Dialog." }, { "slug": "tag", "name": "Tag", "category": "Content & Data", "summary": "Tag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/tag", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Content & Data / Tag — Label + optional remove control", "supportedVariants": [ "default", "removable" ], "supportedStates": [ "default", "removable" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/elevated", "semantic/border/default", "semantic/text/primary", "semantic/icon/muted", "radius/full" ], "relatedComponents": [ { "name": "Badge", "slug": "badge", "href": "https://skrewww.com/components/badge" }, { "name": "Button", "slug": "button", "href": "https://skrewww.com/components/button" } ], "openQuestions": [ "Selectable or filter-chip Tag behavior is not confirmed in Figma — only removable label is implemented.", "Chip is not a separate Figma component — Tag is the canonical name." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "avatar", "name": "Avatar", "category": "Content & Data", "summary": "Avatar is a circular visual identity for a user or entity with image, initials, or icon fallback.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/avatar", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Content & Data / Avatar — Size (Small/Medium/Large), initials fallback", "supportedVariants": [ "image", "initials", "icon" ], "supportedStates": [ "image", "initials", "icon" ], "supportedSizes": [ "sm", "md", "lg" ], "tokensUsed": [ "semantic/action/primary", "semantic/text/inverse", "semantic/border/default", "radius/full" ], "relatedComponents": [ { "name": "List Item", "slug": "list-item", "href": "https://skrewww.com/components/list-item" }, { "name": "Badge", "slug": "badge", "href": "https://skrewww.com/components/badge" } ], "openQuestions": [ "Avatar Group overflow behavior is not confirmed — deferred.", "Status indicator ring on Avatar is not confirmed in Figma." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "divider", "name": "Divider", "category": "Content & Data", "summary": "Divider is a thin separator line between content sections — horizontal or vertical, semantic or decorative.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/divider", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Content & Data / Divider — Orientation (Horizontal/Vertical), component set 2044:26035. Both variants confirmed token-bound to semantic/border/default. In-context usage shown in demo frame \"Divider (example — in context)\", node 2116:2.", "supportedVariants": [ "thematic", "decorative", "structural" ], "supportedStates": [ "thematic", "decorative", "structural" ], "supportedSizes": [], "tokensUsed": [ "semantic/border/default" ], "relatedComponents": [ { "name": "Card", "slug": "card", "href": "https://skrewww.com/components/card" } ], "openQuestions": [ "Separator is a synonym — Divider is the established Figma name.", "Inset divider variants are not confirmed." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "list-item", "name": "List Item", "category": "Content & Data", "summary": "List Item is a single row inside a collection — avatar, title, description, metadata, and optional trailing content.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/list-item", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Content & Data / List Item — Default/Hover; Title, Subtitle, Meta", "supportedVariants": [ "static", "navigational", "action" ], "supportedStates": [ "static", "navigational", "action" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/elevated", "semantic/text/primary", "semantic/text/secondary", "component/radius/control", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Avatar", "slug": "avatar", "href": "https://skrewww.com/components/avatar" }, { "name": "Badge", "slug": "badge", "href": "https://skrewww.com/components/badge" }, { "name": "Menu Item", "slug": "menu-item", "href": "https://skrewww.com/components/menu-item" }, { "name": "Card", "slug": "card", "href": "https://skrewww.com/components/card" } ], "openQuestions": [ "Selected and density variants are not confirmed in Figma — not implemented.", "Compose List Item inside native ul/ol — no separate List component.", "Nested Avatar initials cannot be driven from List Item Figma properties." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "table", "name": "Table", "category": "Content & Data", "summary": "Table is a native HTML table foundation with captions, headers, body rows, footers, cell alignment, responsive overflow, RTL support, print-friendly scrolling, and composition patterns for empty/loading/error — not the interactive Data Table pattern (no sorting, selection, or pagination).", "status": "beta", "version": "0.1.1-beta", "reactAvailability": "available", "figmaAvailability": "unavailable", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/table", "documentationLastUpdated": "2026-07-13", "reactLastUpdated": "2026-07-13", "figmaReference": "React-first Table foundation — Figma component set unverified; MCP audit pending", "supportedVariants": [ "layout-auto", "layout-fixed" ], "supportedStates": [ "layout-auto", "layout-fixed" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "semantic/surface/elevated", "semantic/border/default", "semantic/text/primary", "semantic/text/secondary", "semantic/focus-ring", "table-surface", "table-cell-padding-inline", "table-scroll-shadow" ], "relatedComponents": [ { "name": "List Item", "slug": "list-item", "href": "https://skrewww.com/components/list-item" }, { "name": "Badge", "slug": "badge", "href": "https://skrewww.com/components/badge" }, { "name": "Link", "slug": "link", "href": "https://skrewww.com/components/link" }, { "name": "Menu", "slug": "menu", "href": "https://skrewww.com/components/menu" }, { "name": "Checkbox", "slug": "checkbox", "href": "https://skrewww.com/components/checkbox" }, { "name": "Empty State", "slug": "empty-state", "href": "https://skrewww.com/components/empty-state" }, { "name": "Skeleton", "slug": "skeleton", "href": "https://skrewww.com/components/skeleton" }, { "name": "Alert", "slug": "alert", "href": "https://skrewww.com/components/alert" }, { "name": "Pagination", "slug": "pagination", "href": "https://skrewww.com/components/pagination" } ], "openQuestions": [ "Figma component-set node ID unresolved — live MCP verification pending.", "Temporary table geometry and scroll-shadow tokens await Figma confirmation.", "Data Table (implemented 2026-07-15) composes Table for the narrow MVP scope approved 2026-07-13 — sorting only, external Pagination; selection, sticky headers, and density remain excluded from v1." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Caption provides the accessible table name. Screen-reader captions remain in the accessibility tree. Scroll regions should use a distinct accessibleLabel — do not duplicate the caption verbatim." }, { "slug": "data-table", "name": "Data Table", "category": "Content & Data", "summary": "Data Table is an interactive data-table pattern composing Table with header sorting and external Pagination — no columns-config prop; the consumer writes their own Table/TableHead/TableBody markup and drops in DataTableSortHeader for sortable columns.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "unavailable", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/data-table", "documentationLastUpdated": "2026-07-15", "reactLastUpdated": "2026-07-15", "figmaReference": "React-first Data Table MVP — no Figma component set exists yet; MCP audit pending", "supportedVariants": [ "sortable-header" ], "supportedStates": [ "sortable-header" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "semantic/surface/elevated", "semantic/border/default", "semantic/text/primary", "semantic/icon/muted", "semantic/focus-ring", "table-header-text" ], "relatedComponents": [ { "name": "Table", "slug": "table", "href": "https://skrewww.com/components/table" }, { "name": "Pagination", "slug": "pagination", "href": "https://skrewww.com/components/pagination" }, { "name": "Menu", "slug": "menu", "href": "https://skrewww.com/components/menu" }, { "name": "Checkbox", "slug": "checkbox", "href": "https://skrewww.com/components/checkbox" } ], "openQuestions": [ "No Figma component set exists for Data Table yet — sort-header anatomy and token bindings are React-first, same precedent as Table.", "Row selection (Checkbox column), sticky headers, density variants, and virtualization remain deferred to a later pass — not in this MVP.", "Row-actions conventions beyond composing Menu in a cell are still open." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "aria-sort on the th communicates the current sort state to assistive technology per column (\"ascending\"/\"descending\"/\"none\"). Data Table does not add a live region announcing sort changes — the aria-sort update itself is the accessible signal." }, { "slug": "tree-view", "name": "Tree View", "category": "Content & Data", "summary": "Tree View is a hierarchical, keyboard-navigable tree — file explorers, nested category browsers, org charts. Composes Content/Tree Item rows with roving-tabindex keyboard navigation and depth-based indentation.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/tree-view", "documentationLastUpdated": "2026-07-18", "reactLastUpdated": "2026-07-18", "figmaReference": "Content & Data / Content/Tree Item component set (node 2058:1988; Label, Show chevron, State: Default/Hover/Selected — variant nodes 2058:1985/1986/1987) + the \"Tree View (example)\" composed demo (node 2058:1998), confirming 20px-per-depth indentation. Parent section \"Content/Tree View\", node 2058:2071. Node IDs confirmed via direct Figma inspection 2026-07-18.", "supportedVariants": [ "default", "hover", "selected" ], "supportedStates": [ "default", "hover", "selected" ], "supportedSizes": [], "tokensUsed": [ "component/menu/item-hover", "semantic/action/primary", "semantic/icon/muted", "semantic/text/primary", "component/radius/control", "semantic/focus-ring" ], "relatedComponents": [ { "name": "List Item", "slug": "list-item", "href": "https://skrewww.com/components/list-item" }, { "name": "Menu", "slug": "menu", "href": "https://skrewww.com/components/menu" } ], "openQuestions": [ "Multi-select is a deferred v2 — not shown in the Figma reference and not built here.", "Drag-and-drop reordering, virtualization, and async/lazy-loaded children are all out of scope — none are shown in the Figma reference." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "aria-expanded is present only on rows with children (omitted entirely on leaf rows). aria-level, aria-setsize, and aria-posinset are set explicitly on every row from the flattened depth-first position, since Tree View does not nest DOM groups the way the WAI-ARIA authoring practice's canonical example does." }, { "slug": "bar-chart", "name": "Bar Chart", "category": "Content & Data", "summary": "Bar Chart is a single-series, static bar chart built on recharts — real proportional bar heights, month labels below, no Y-axis/gridlines/legend/tooltip.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/bar-chart", "documentationLastUpdated": "2026-07-18", "reactLastUpdated": "2026-07-18", "figmaReference": "Content & Data / \"Bar Chart (example)\" (Content/Charts section, node 2058:2568), frame node 2058:2532 — 6 bars (Jan-Jun), single semantic/action/primary fill, real proportional heights (58/95/76/128/108/140 out of a 160px plot area), semantic/text/secondary month labels. No Y-axis, gridlines, legend, or tooltip in the Figma reference. Node IDs confirmed via direct Figma inspection 2026-07-18.", "supportedVariants": [ "default" ], "supportedStates": [ "default" ], "supportedSizes": [], "tokensUsed": [ "semantic/action/primary", "semantic/text/secondary" ], "relatedComponents": [ { "name": "Line Chart", "slug": "line-chart", "href": "https://skrewww.com/components/line-chart" } ], "openQuestions": [ "Multi-series support is deferred — not shown in the Figma reference and not built here; v1 is single-series only.", "Interactivity (hover tooltips, legend interactivity) is deferred — v1 is deliberately static, per the approved v1 scope.", "A Y-axis and gridlines beyond the existing X-axis month labels are deferred — not shown in the Figma reference.", "Bar corner radius/spacing beyond fill color and the X-axis label treatment is this implementation's own decision, not something Figma specified." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "The chart container exposes role=\"img\" with an accessible name (the required `label` prop) and aria-describedby pointing at a visually-hidden table containing the exact label/value pairs. The chart's own SVG is aria-hidden so assistive tech doesn't attempt to read partial axis text out of context." }, { "slug": "line-chart", "name": "Line Chart", "category": "Content & Data", "summary": "Line Chart is a single-series, static line chart built on recharts — a single stroked path with hollow-ring point markers, no axes/gridlines/legend/tooltip.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/line-chart", "documentationLastUpdated": "2026-07-18", "reactLastUpdated": "2026-07-18", "figmaReference": "Content & Data / \"Line Chart (example)\" (Content/Charts section, node 2058:2568), frame node 2058:2559 — single 2px semantic/action/primary stroke, 7 data points as 6px hollow-ring markers (fill: semantic/surface/default, stroke: semantic/action/primary, 2px). No axis labels, gridlines, or legend in the Figma reference. Node IDs confirmed via direct Figma inspection 2026-07-18.", "supportedVariants": [ "default" ], "supportedStates": [ "default" ], "supportedSizes": [], "tokensUsed": [ "semantic/action/primary", "semantic/surface/default" ], "relatedComponents": [ { "name": "Bar Chart", "slug": "bar-chart", "href": "https://skrewww.com/components/bar-chart" } ], "openQuestions": [ "Multi-series support is deferred — not shown in the Figma reference and not built here; v1 is single-series only.", "Interactivity (hover tooltips, legend interactivity) is deferred — v1 is deliberately static, per the approved v1 scope.", "Axis labels and gridlines are deferred — the Figma reference has none at all for Line Chart.", "Fixed chart height (width is fluid) is this implementation's own decision, not something Figma specified." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "The chart container exposes role=\"img\" with an accessible name (the required `label` prop) and aria-describedby pointing at a visually-hidden table containing the exact label/value pairs. The chart's own SVG is aria-hidden." }, { "slug": "timeline", "name": "Timeline", "category": "Content & Data", "summary": "Timeline is a vertical, chronological event list built on Content/Timeline Item rows — Default outlined-ring or Highlighted solid-dot markers, connector suppression purely positional.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/timeline", "documentationLastUpdated": "2026-07-19", "reactLastUpdated": "2026-07-19", "figmaReference": "Content & Data / \"Content/Timeline Item\" component set (node 2058:2092; Title/Timestamp/Description text properties + State: Default/Highlighted variant) + the \"Timeline (example)\" composed demo (node 2058:2102). Parent section \"Content/Timeline\", node 2058:2130. Node IDs confirmed via direct Figma Plugin API inspection 2026-07-24. Confirmed anatomy: Default is a 10x10 stroke-only dot (1.5px, semantic/action/primary) + a 2x48px Connector Line (semantic/border/default); Highlighted is a 12x12 solid-fill dot (semantic/action/primary), no stroke. Title is always semantic/text/primary; Timestamp/Description are always semantic/text/secondary in both states. Connector-line suppression is purely positional and structural — the last item's Marker Column has no Connector Line child at all, independent of state; there is no formal \"Show connector\" boolean property on the component.", "supportedVariants": [ "default", "highlighted" ], "supportedStates": [ "default", "highlighted" ], "supportedSizes": [], "tokensUsed": [ "semantic/action/primary", "semantic/border/default", "semantic/text/primary" ], "relatedComponents": [ { "name": "Tree View", "slug": "tree-view", "href": "https://skrewww.com/components/tree-view" }, { "name": "List Item", "slug": "list-item", "href": "https://skrewww.com/components/list-item" } ], "openQuestions": [ "Exact marker/connector pixel sizing, using one shared marker color across both states, and the Timestamp/Description secondary-text token choice are this implementation's own decisions where the given facts didn't specify them.", "No truncation is applied anywhere (Title, Timestamp, or Description) — Alert and Card don't truncate their titles either, and Figma's own reference shows the Description wrapping, not truncating, at 220px. List Item does truncate, but its single-line row density isn't comparable to Timeline's larger content blocks.", "An empty data array renders nothing (null) — no other collection component in this codebase (Table, Tree View, Bar Chart, Line Chart) has an established empty-state convention to follow instead." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "Renders as a real ordered list; each Timestamp is visible text read in document order, not implied by marker position or state alone." }, { "slug": "empty-state", "name": "Empty State", "category": "Content & Data", "summary": "Empty State is a zero-content placeholder with title, description, and optional recovery actions for collections, search, or first-use flows.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/empty-state", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-13", "figmaReference": "Content & Data / Empty State — Title, Description, Button CTA", "supportedVariants": [ "first-use", "no-results", "informational" ], "supportedStates": [ "first-use", "no-results", "informational" ], "supportedSizes": [], "tokensUsed": [ "semantic/icon/muted", "semantic/text/primary", "semantic/text/secondary" ], "relatedComponents": [ { "name": "Alert", "slug": "alert", "href": "https://skrewww.com/components/alert" }, { "name": "Skeleton", "slug": "skeleton", "href": "https://skrewww.com/components/skeleton" }, { "name": "Button", "slug": "button", "href": "https://skrewww.com/components/button" }, { "name": "Link", "slug": "link", "href": "https://skrewww.com/components/link" } ], "openQuestions": [ "No Results, Placeholder State, and Result Empty State are synonyms — Empty State is canonical.", "Permission-restricted empty states are not confirmed as a separate variant.", "Error states remain separate from Empty State." ], "hasImplementation": true, "hasPreview": true, "indexing": "index", "announcementBehavior": "No automatic live region on the component. Parent results regions may announce dynamic no-results updates." }, { "slug": "banking-transaction-row", "name": "Banking Transaction Row", "category": "Content & Data", "industry": "Banking", "summary": "Banking Transaction Row is a single financial transaction entry — merchant, date, amount, and status — with a Popover for full transaction detail.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "unavailable", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/banking-transaction-row", "documentationLastUpdated": "2026-07-25", "reactLastUpdated": "2026-07-25", "figmaReference": "Layer 4 Industry Systems (Banking pilot) — no Figma reference exists. Confirmed via a full Figma file search (every page checked) on 2026-07-25: no Industry Systems page and no Banking-related frame or component exists anywhere in the design file. This is a confirmed absence, not a pending MCP check (see lib/banking-figma-metadata.ts, BANKING_FIGMA_AUDIT_STATUS = \"confirmed-no-reference-2026-07-25\").", "supportedVariants": [ "success", "warning", "error" ], "supportedStates": [ "success", "warning", "error" ], "supportedSizes": [], "tokensUsed": [ "semantic/feedback/success", "semantic/feedback/warning", "semantic/action/danger", "semantic/text/primary", "semantic/text/secondary" ], "relatedComponents": [ { "name": "List Item", "slug": "list-item", "href": "https://skrewww.com/components/list-item" }, { "name": "Avatar", "slug": "avatar", "href": "https://skrewww.com/components/avatar" }, { "name": "Badge", "slug": "badge", "href": "https://skrewww.com/components/badge" }, { "name": "Popover", "slug": "popover", "href": "https://skrewww.com/components/popover" }, { "name": "Banking Account Card", "slug": "banking-account-card", "href": "https://skrewww.com/components/banking-account-card" } ], "openQuestions": [ "No Figma reference exists for this component or for Industry Systems generally — confirmed absent via full file search on 2026-07-25, not an oversight.", "List Item gained aria-expanded/aria-haspopup/aria-controls passthrough for this component's disclosure trigger — a genuine Layer 2 extension, not a Banking-specific workaround (see components/ui/ListItem.tsx).", "Currency/amount formatting is the consumer's responsibility — amount is a pre-formatted display string, not a number with a built-in formatter, consistent with how Account Card and Balance Summary also take pre-formatted figures." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "banking-account-card", "name": "Banking Account Card", "category": "Content & Data", "industry": "Banking", "summary": "Banking Account Card is a summary card for one financial account — account type, current balance, a compact balance-history sparkline, and an action button.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "unavailable", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/banking-account-card", "documentationLastUpdated": "2026-07-25", "reactLastUpdated": "2026-07-25", "figmaReference": "Layer 4 Industry Systems (Banking pilot) — no Figma reference exists. Confirmed via a full Figma file search (every page checked) on 2026-07-25 (see lib/banking-figma-metadata.ts, BANKING_FIGMA_AUDIT_STATUS = \"confirmed-no-reference-2026-07-25\").", "supportedVariants": [], "supportedStates": [], "supportedSizes": [], "tokensUsed": [ "semantic/text/primary", "semantic/text/secondary" ], "relatedComponents": [ { "name": "Card", "slug": "card", "href": "https://skrewww.com/components/card" }, { "name": "Tag", "slug": "tag", "href": "https://skrewww.com/components/tag" }, { "name": "Button", "slug": "button", "href": "https://skrewww.com/components/button" }, { "name": "Line Chart", "slug": "line-chart", "href": "https://skrewww.com/components/line-chart" }, { "name": "Banking Transaction Row", "slug": "banking-transaction-row", "href": "https://skrewww.com/components/banking-transaction-row" } ], "openQuestions": [ "No Figma reference exists for this component or for Industry Systems generally — confirmed absent via full file search on 2026-07-25, not an oversight.", "Line Chart gained an additive `sparkline` prop for this component's balance-history treatment — a genuine Layer 2 extension (suppresses point-marker dots, uses a thinner stroke), not a Banking-specific style override (see components/ui/LineChart.tsx).", "Glass Surface + Pill Shape inheritance was verified live (not assumed) — this component sets no background-color or border-radius of its own anywhere in its stylesheet; every surface property comes from Card's own custom properties." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "banking-balance-summary", "name": "Banking Balance Summary", "category": "Content & Data", "industry": "Banking", "summary": "Banking Balance Summary is a spending/income overview card with a time-range-filtered Bar Chart and a loading state.", "status": "beta", "version": "0.1.0-beta", "reactAvailability": "available", "figmaAvailability": "unavailable", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/banking-balance-summary", "documentationLastUpdated": "2026-07-25", "reactLastUpdated": "2026-07-25", "figmaReference": "Layer 4 Industry Systems (Banking pilot) — no Figma reference exists. Confirmed via a full Figma file search (every page checked) on 2026-07-25 (see lib/banking-figma-metadata.ts, BANKING_FIGMA_AUDIT_STATUS = \"confirmed-no-reference-2026-07-25\").", "supportedVariants": [], "supportedStates": [], "supportedSizes": [], "tokensUsed": [ "semantic/text/primary", "semantic/text/secondary" ], "relatedComponents": [ { "name": "Card", "slug": "card", "href": "https://skrewww.com/components/card" }, { "name": "Bar Chart", "slug": "bar-chart", "href": "https://skrewww.com/components/bar-chart" }, { "name": "Tabs", "slug": "tabs", "href": "https://skrewww.com/components/tabs" }, { "name": "Skeleton", "slug": "skeleton", "href": "https://skrewww.com/components/skeleton" }, { "name": "Banking Transaction Row", "slug": "banking-transaction-row", "href": "https://skrewww.com/components/banking-transaction-row" } ], "openQuestions": [ "No Figma reference exists for this component or for Industry Systems generally — confirmed absent via full file search on 2026-07-25, not an oversight.", "Each time range renders its own Bar Chart instance inside its own Tabs panel — real per-range data is expected from the consumer, not one dataset re-scaled across ranges." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "calendar-day", "name": "Calendar Day", "category": "Content & Data", "summary": "Calendar Day is a single selectable day cell inside a month calendar grid.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "available", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/calendar-day", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-12", "figmaReference": "Content & Data / Calendar Day — Default/Today/Selected/Disabled/Outside", "supportedVariants": [ "default", "today", "selected", "disabled", "outside" ], "supportedStates": [ "default", "today", "selected", "disabled", "outside" ], "supportedSizes": [], "tokensUsed": [ "semantic/text/primary", "semantic/text/secondary", "semantic/text/disabled", "semantic/action/primary", "semantic/focus-ring", "component/radius/control" ], "relatedComponents": [ { "name": "Calendar Grid", "slug": "calendar-grid", "href": "https://skrewww.com/components/calendar-grid" }, { "name": "Date Picker", "slug": "date-picker", "href": "https://skrewww.com/components/date-picker" } ], "openQuestions": [ "Multi-select and event-indicator states are not confirmed. Range start/middle/end states are implemented — see Calendar Grid's range mode.", "Calendar Day should be composed inside Calendar Grid — not used standalone without grid context." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" }, { "slug": "calendar-grid", "name": "Calendar Grid", "category": "Content & Data", "summary": "Calendar Grid is a composed month-view calendar with single-date or range selection and grid keyboard navigation.", "status": "beta", "version": "0.5.0-beta", "reactAvailability": "available", "figmaAvailability": "partial", "documentationCompleteness": "partial", "accessibilityLevel": "WCAG 2.2 AA (target)", "documentationUrl": "https://skrewww.com/components/calendar-grid", "documentationLastUpdated": "2026-06-01", "reactLastUpdated": "2026-07-12", "figmaReference": "Content & Data / Calendar Day composition — 7×6 month grid (inferred)", "supportedVariants": [ "single-date", "range" ], "supportedStates": [ "single-date", "range" ], "supportedSizes": [], "tokensUsed": [ "semantic/surface/default", "semantic/border/default", "semantic/text/primary", "semantic/text/secondary", "component/radius/container", "semantic/focus-ring" ], "relatedComponents": [ { "name": "Calendar Day", "slug": "calendar-day", "href": "https://skrewww.com/components/calendar-day" }, { "name": "Date Picker", "slug": "date-picker", "href": "https://skrewww.com/components/date-picker" }, { "name": "Popover", "slug": "popover", "href": "https://skrewww.com/components/popover" } ], "openQuestions": [ "Month/year drill-up and range selection are implemented on Calendar Grid.", "Six-week grid with outside-month days visible is an initial policy — not fully verified in Figma Month Grid." ], "hasImplementation": true, "hasPreview": true, "indexing": "index" } ] }