twntyx-css 1.0.0

package/llm/components/table.json

@@ -0,0 +1,223 @@
+{
+  "id": "table",
+  "name": "Table",
+  "status": "stable",
+  "summary": "Table component for displaying data in a grid layout with various styling options and features.",
+  "keywords": [
+    "cell",
+    "column",
+    "content",
+    "data",
+    "display",
+    "filter",
+    "grid",
+    "header",
+    "list",
+    "pagination",
+    "row",
+    "sort",
+    "spreadsheet",
+    "table"
+  ],
+  "sourcePaths": [
+    "app/design-system/table/page.js",
+    "assets/styles/combobox.css",
+    "assets/styles/datepicker.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/menu.css",
+    "assets/styles/table.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "table",
+  "variants": [
+    {
+      "name": "table-overflow",
+      "className": "table-overflow",
+      "description": "Enables horizontal scrolling"
+    },
+    {
+      "name": "table-sticky-first",
+      "className": "table-sticky-first",
+      "description": "Makes first column sticky while scrolling"
+    },
+    {
+      "name": "table-striped-rows",
+      "className": "table-striped-rows",
+      "description": "Adds alternating row backgrounds"
+    },
+    {
+      "name": "table-striped-columns",
+      "className": "table-striped-columns",
+      "description": "Adds alternating column backgrounds"
+    },
+    {
+      "name": "table-hover",
+      "className": "table-hover",
+      "description": "Adds hover effect to rows"
+    },
+    {
+      "name": "table-compact",
+      "className": "table-compact",
+      "description": "Reduces cell padding"
+    },
+    {
+      "name": "table-sticky-last",
+      "className": "table-sticky-last",
+      "description": "Makes last column sticky while scrolling"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "table-sm",
+      "className": "table-sm",
+      "description": "Small size variant with reduced padding"
+    },
+    {
+      "name": "table-lg",
+      "className": "table-lg",
+      "description": "Large size variant with increased padding"
+    }
+  ],
+  "states": [
+    {
+      "name": "is-selected",
+      "className": "is-selected",
+      "description": "Highlights selected rows"
+    }
+  ],
+  "structure": {
+    "rootElement": "button",
+    "requiredClasses": [
+      "table"
+    ],
+    "optionalClasses": [
+      "table-overflow",
+      "table-sticky-first",
+      "table-striped-rows",
+      "table-striped-columns",
+      "table-hover",
+      "table-compact",
+      "table-sticky-last",
+      "table-sm",
+      "table-lg",
+      "is-selected"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "role",
+      "aria-label",
+      "aria-sort",
+      "scope"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [
+      "table",
+      "row",
+      "columnheader",
+      "cell"
+    ],
+    "aria": [
+      "aria-sort",
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-sort (when sortable)",
+      "aria-label (when table purpose is unclear from context)"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Enter",
+      "Space",
+      "Arrow keys"
+    ],
+    "focusBehavior": "Keep focusable controls inside cells and preserve visible focus on row actions and sort controls."
+  },
+  "dos": [
+    "Use semantic table markup (`thead`, `tbody`, `th`, `td`) before applying utility classes.",
+    "Expose sorting state with both visual affordance and `aria-sort`.",
+    "Pair large datasets with pagination or filtering controls."
+  ],
+  "donts": [
+    "Do not use tables for non-tabular layout.",
+    "Do not hide critical row actions behind hover-only behavior.",
+    "Do not collapse column headers on desktop data-heavy views."
+  ],
+  "tokenUsage": [
+    "background-brand",
+    "background-brand-hover",
+    "background-error",
+    "background-info",
+    "background-success",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "background-warning",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-200",
+    "core-ui-300",
+    "core-ui-400",
+    "core-ui-50",
+    "core-ui-500",
+    "core-ui-600",
+    "core-ui-700",
+    "core-ui-800",
+    "core-ui-900",
+    "core-white",
+    "line-brand",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-info",
+    "line-strong",
+    "line-success",
+    "line-warning",
+    "text-brand",
+    "text-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-inverted",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/table.html",
+      "description": "Minimal canonical Table usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "table-data-disclosure"
+    ],
+    "relatedComponents": [
+      "pagination",
+      "checkbox",
+      "button"
+    ],
+    "notes": [
+      "Use sticky column variants only when key identifiers must remain visible during horizontal scroll."
+    ]
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/tabs.json

@@ -0,0 +1,147 @@
+{
+  "id": "tabs",
+  "name": "Tabs",
+  "status": "stable",
+  "summary": "Tab component for switching between different views.",
+  "keywords": [
+    "content",
+    "interface",
+    "menu",
+    "navigation",
+    "panels",
+    "panes",
+    "sections",
+    "switch",
+    "tabpanel",
+    "tabs",
+    "toggle",
+    "views"
+  ],
+  "sourcePaths": [
+    "app/design-system/tabs/page.js",
+    "assets/styles/shared.css",
+    "assets/styles/tab.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "tab-list",
+  "variants": [
+    {
+      "name": "tab-boxed",
+      "className": "tab-boxed",
+      "description": "Boxed variant with background"
+    },
+    {
+      "name": "tab-toggle",
+      "className": "tab-toggle",
+      "description": "Toggle variant"
+    },
+    {
+      "name": "tab-list-full",
+      "className": "tab-list-full",
+      "description": "Makes tabs take full width"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "tab-xs",
+      "className": "tab-xs",
+      "description": "Extra small size variant"
+    },
+    {
+      "name": "tab-sm",
+      "className": "tab-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "tab-lg",
+      "className": "tab-lg",
+      "description": "Large size variant"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "button",
+    "requiredClasses": [
+      "tab-list"
+    ],
+    "optionalClasses": [
+      "tab-boxed",
+      "tab-toggle",
+      "tab-list-full",
+      "tab-xs",
+      "tab-sm",
+      "tab-lg"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "id",
+      "tabindex"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label (when no visible label)"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Enter",
+      "Space"
+    ],
+    "focusBehavior": "Visible focus state is required when the component is focusable or clickable."
+  },
+  "dos": [
+    "Apply the base class 'tab-list' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "background-surface",
+    "background-surface-elevated",
+    "brand-default",
+    "brand-moderate",
+    "line-brand",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-strong",
+    "text-brand",
+    "text-default",
+    "text-inverted",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/tabs.html",
+      "description": "Minimal canonical Tabs usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "navigation-hierarchy"
+    ],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/template-ai.json

@@ -0,0 +1,80 @@
+{
+  "id": "template-ai",
+  "name": "Fundraising AI components",
+  "status": "preview",
+  "summary": "Explore AI components tailored to fundraising workflows.",
+  "keywords": [
+    "agent",
+    "ai",
+    "alva",
+    "chat",
+    "fundraising AI",
+    "gpt",
+    "llama",
+    "llm",
+    "openai",
+    "template ai",
+    "template-ai",
+    "twntyX"
+  ],
+  "sourcePaths": [
+    "app/design-system/template-ai/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "template-ai",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "template-ai"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'template-ai' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/template-ai.html",
+      "description": "Minimal canonical Fundraising AI components usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/template-login.json

@@ -0,0 +1,88 @@
+{
+  "id": "template-login",
+  "name": "Login components",
+  "status": "preview",
+  "summary": "Explore various authentication components including login and password setup templates.",
+  "keywords": [
+    "auth",
+    "authentication",
+    "google",
+    "login",
+    "microsoft",
+    "oauth",
+    "password",
+    "sign in",
+    "single sign on",
+    "sso",
+    "template login",
+    "template-login"
+  ],
+  "sourcePaths": [
+    "app/design-system/template-login/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "template-login",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "template-login"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [
+      "separator"
+    ],
+    "aria": [
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [
+      "separator"
+    ],
+    "requiredAria": [
+      "aria-label"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'template-login' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/template-login.html",
+      "description": "Minimal canonical Login components usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/template-stats.json

@@ -0,0 +1,76 @@
+{
+  "id": "template-stats",
+  "name": "Stats template",
+  "status": "preview",
+  "summary": "Tailwind-first stats template for composing metric cards directly in markup without component-specific classes.",
+  "keywords": [
+    "dashboard",
+    "kpi",
+    "metrics",
+    "stats",
+    "tailwind",
+    "template",
+    "template stats",
+    "template-stats"
+  ],
+  "sourcePaths": [
+    "app/design-system/template-stats/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "template-stats",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "template-stats"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'template-stats' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/template-stats.html",
+      "description": "Minimal canonical Stats template usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}