@rdna/radiants 0.1.0 → 0.1.2

package/components/core/Accordion/Accordion.dna.json

@@ -0,0 +1,16 @@
+{
+  "component": "Accordion",
+  "tokenBindings": {
+    "item": {
+      "background": "surface-primary",
+      "border": "edge-primary"
+    },
+    "trigger": {
+      "text": "content-primary",
+      "hoverBackground": "content-primary/5"
+    },
+    "content": {
+      "text": "content-primary"
+    }
+  }
+}

package/components/core/Accordion/Accordion.schema.json

@@ -0,0 +1,48 @@
+{
+  "name": "Accordion",
+  "description": "Collapsible content sections with smooth expand/collapse animations. Supports single or multiple expanded items.",
+  "subcomponents": ["AccordionItem", "AccordionTrigger", "AccordionContent"],
+  "props": {
+    "type": {
+      "type": "enum",
+      "values": ["single", "multiple"],
+      "default": "single",
+      "description": "Allow single or multiple items to be expanded at once"
+    },
+    "defaultValue": {
+      "type": "string | string[]",
+      "description": "Default expanded item(s) - string for single, array for multiple"
+    },
+    "value": {
+      "type": "string | string[]",
+      "description": "Controlled expanded value(s)"
+    },
+    "onValueChange": {
+      "type": "function",
+      "description": "Callback when expanded items change"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes to apply"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "AccordionItem components"
+    }
+  },
+  "examples": [
+    {
+      "name": "Single accordion",
+      "code": "<Accordion>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Section 1</AccordionTrigger>\n    <AccordionContent>Content for section 1</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger>Section 2</AccordionTrigger>\n    <AccordionContent>Content for section 2</AccordionContent>\n  </AccordionItem>\n</Accordion>"
+    },
+    {
+      "name": "Multiple expanded",
+      "code": "<Accordion type=\"multiple\" defaultValue={[\"item-1\", \"item-2\"]}>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>FAQ 1</AccordionTrigger>\n    <AccordionContent>Answer 1</AccordionContent>\n  </AccordionItem>\n  <AccordionItem value=\"item-2\">\n    <AccordionTrigger>FAQ 2</AccordionTrigger>\n    <AccordionContent>Answer 2</AccordionContent>\n  </AccordionItem>\n</Accordion>"
+    },
+    {
+      "name": "Controlled accordion",
+      "code": "<Accordion value={expanded} onValueChange={setExpanded}>\n  <AccordionItem value=\"settings\">\n    <AccordionTrigger>Settings</AccordionTrigger>\n    <AccordionContent>Settings content</AccordionContent>\n  </AccordionItem>\n</Accordion>"
+    }
+  ]
+}

package/components/core/Alert/Alert.dna.json

@@ -0,0 +1,56 @@
+{
+  "component": "Alert",
+  "description": "Token bindings for Alert component variants",
+  "tokenBindings": {
+    "base": {
+      "padding": "spacing-md",
+      "gap": "spacing-sm",
+      "font": "body",
+      "titleFont": "heading",
+      "borderWidth": "2px",
+      "borderRadius": "sm"
+    },
+    "default": {
+      "background": "surface-primary",
+      "text": "content-primary",
+      "border": "edge-primary"
+    },
+    "success": {
+      "background": "status-success/10",
+      "text": "content-primary",
+      "border": "status-success"
+    },
+    "warning": {
+      "background": "status-warning/10",
+      "text": "content-primary",
+      "border": "status-warning"
+    },
+    "error": {
+      "background": "status-error/10",
+      "text": "content-primary",
+      "border": "status-error"
+    },
+    "info": {
+      "background": "status-info/10",
+      "text": "content-primary",
+      "border": "status-info"
+    }
+  },
+  "elements": {
+    "title": {
+      "font": "heading",
+      "fontSize": "xs",
+      "textTransform": "uppercase",
+      "marginBottom": "spacing-xs"
+    },
+    "content": {
+      "font": "body",
+      "fontSize": "base",
+      "textOpacity": "80%"
+    },
+    "closeButton": {
+      "textOpacity": "50%",
+      "textHoverOpacity": "100%"
+    }
+  }
+}

package/components/core/Alert/Alert.schema.json

@@ -0,0 +1,66 @@
+{
+  "name": "Alert",
+  "description": "Static alert banners for important messages. Supports multiple semantic variants with optional icons and close button.",
+  "props": {
+    "variant": {
+      "type": "enum",
+      "values": ["default", "success", "warning", "error", "info"],
+      "default": "default",
+      "description": "Visual variant determining background and border colors for status indication"
+    },
+    "title": {
+      "type": "string",
+      "description": "Optional alert title displayed above the content"
+    },
+    "closable": {
+      "type": "boolean",
+      "default": false,
+      "description": "Show close button to dismiss the alert"
+    },
+    "onClose": {
+      "type": "function",
+      "description": "Callback when close button is clicked"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Alert message content"
+    },
+    "icon": {
+      "description": "Icon component rendered before the content"
+    },
+    "closeIcon": {
+      "description": "Custom close icon component (replaces default X icon)"
+    }
+  },
+  "examples": [
+    {
+      "name": "Default alert",
+      "code": "<Alert>This is a default alert message.</Alert>"
+    },
+    {
+      "name": "Alert with title",
+      "code": "<Alert title=\"Notice\">Important information here.</Alert>"
+    },
+    {
+      "name": "Success alert",
+      "code": "<Alert variant=\"success\" title=\"Success\">Operation completed successfully.</Alert>"
+    },
+    {
+      "name": "Warning alert",
+      "code": "<Alert variant=\"warning\">Please review before continuing.</Alert>"
+    },
+    {
+      "name": "Error alert",
+      "code": "<Alert variant=\"error\" title=\"Error\">Something went wrong.</Alert>"
+    },
+    {
+      "name": "Info alert with icon",
+      "code": "<Alert variant=\"info\" icon={<InfoIcon />}>Additional details here.</Alert>"
+    },
+    {
+      "name": "Closable alert",
+      "code": "<Alert closable onClose={() => setVisible(false)}>Dismissible message.</Alert>"
+    }
+  ]
+}

package/components/core/Badge/Badge.dna.json

@@ -0,0 +1,48 @@
+{
+  "component": "Badge",
+  "description": "Token bindings for Badge component variants",
+  "tokenBindings": {
+    "base": {
+      "font": "heading",
+      "border": "edge-primary",
+      "text": "content-primary"
+    },
+    "default": {
+      "background": "surface-primary",
+      "text": "content-primary",
+      "border": "edge-primary"
+    },
+    "success": {
+      "background": "status-success",
+      "text": "content-primary",
+      "border": "edge-primary"
+    },
+    "warning": {
+      "background": "status-warning",
+      "text": "content-primary",
+      "border": "edge-primary"
+    },
+    "error": {
+      "background": "status-error",
+      "text": "content-primary",
+      "border": "edge-primary"
+    },
+    "info": {
+      "background": "status-info",
+      "text": "content-primary",
+      "border": "edge-primary"
+    }
+  },
+  "sizes": {
+    "sm": {
+      "paddingX": "spacing-sm",
+      "paddingY": "spacing-xs",
+      "fontSize": "2xs"
+    },
+    "md": {
+      "paddingX": "spacing-sm",
+      "paddingY": "spacing-xs",
+      "fontSize": "xs"
+    }
+  }
+}

package/components/core/Badge/Badge.schema.json

@@ -0,0 +1,49 @@
+{
+  "name": "Badge",
+  "description": "Status indicator and label component with semantic color variants.",
+  "props": {
+    "variant": {
+      "type": "enum",
+      "values": ["default", "success", "warning", "error", "info"],
+      "default": "default",
+      "description": "Visual variant determining background color for status indication"
+    },
+    "size": {
+      "type": "enum",
+      "values": ["sm", "md"],
+      "default": "md",
+      "description": "Size preset controlling padding and text size"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Badge label text or content"
+    }
+  },
+  "examples": [
+    {
+      "name": "Default badge",
+      "code": "<Badge>Label</Badge>"
+    },
+    {
+      "name": "Success status",
+      "code": "<Badge variant=\"success\">Active</Badge>"
+    },
+    {
+      "name": "Warning status",
+      "code": "<Badge variant=\"warning\">Pending</Badge>"
+    },
+    {
+      "name": "Error status",
+      "code": "<Badge variant=\"error\">Failed</Badge>"
+    },
+    {
+      "name": "Info status",
+      "code": "<Badge variant=\"info\">New</Badge>"
+    },
+    {
+      "name": "Small badge",
+      "code": "<Badge size=\"sm\">Tiny</Badge>"
+    }
+  ]
+}

package/components/core/Breadcrumbs/Breadcrumbs.dna.json

@@ -0,0 +1,29 @@
+{
+  "component": "Breadcrumbs",
+  "description": "Token bindings for Breadcrumbs navigation component",
+  "tokenBindings": {
+    "base": {
+      "font": "heading",
+      "gap": "spacing-sm"
+    },
+    "separator": {
+      "text": "content-primary/40"
+    },
+    "link": {
+      "text": "content-primary/60",
+      "textHover": "content-primary"
+    },
+    "current": {
+      "text": "content-primary",
+      "fontWeight": "semibold"
+    },
+    "inactive": {
+      "text": "content-primary/60"
+    }
+  },
+  "states": {
+    "hover": {
+      "textDecoration": "underline"
+    }
+  }
+}

package/components/core/Breadcrumbs/Breadcrumbs.schema.json

@@ -0,0 +1,39 @@
+{
+  "name": "Breadcrumbs",
+  "description": "Navigation hierarchy component showing the current page location within a site structure.",
+  "props": {
+    "items": {
+      "type": "array",
+      "required": true,
+      "description": "Array of breadcrumb items with label and optional href"
+    },
+    "separator": {
+      "type": "string",
+      "default": "/",
+      "description": "Character or string used as separator between items"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes for the nav container"
+    }
+  },
+  "slots": {
+    "items": {
+      "description": "Breadcrumb items rendered as list elements with links or text"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic breadcrumbs",
+      "code": "<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Products', href: '/products' }, { label: 'Details' }]} />"
+    },
+    {
+      "name": "Custom separator",
+      "code": "<Breadcrumbs items={[{ label: 'Dashboard', href: '/dashboard' }, { label: 'Settings' }]} separator=\">\" />"
+    },
+    {
+      "name": "Single item",
+      "code": "<Breadcrumbs items={[{ label: 'Home' }]} />"
+    }
+  ]
+}

package/components/core/Button/Button.dna.json

@@ -0,0 +1,58 @@
+{
+  "component": "Button",
+  "description": "Token bindings for Button component variants",
+  "tokenBindings": {
+    "base": {
+      "border": "edge-primary",
+      "font": "heading",
+      "focusRing": "edge-focus",
+      "shadow": "btn",
+      "shadowHover": "btn-hover"
+    },
+    "primary": {
+      "background": "action-primary",
+      "text": "content-primary",
+      "border": "edge-primary",
+      "backgroundHover": "action-primary",
+      "backgroundActive": "action-primary"
+    },
+    "secondary": {
+      "background": "surface-secondary",
+      "text": "content-inverted",
+      "border": "edge-primary",
+      "backgroundHover": "surface-primary",
+      "textHover": "content-primary",
+      "backgroundActive": "action-primary",
+      "textActive": "content-primary"
+    },
+    "outline": {
+      "background": "transparent",
+      "text": "content-primary",
+      "border": "edge-primary",
+      "backgroundHover": "content-primary/5",
+      "backgroundActive": "action-primary"
+    },
+    "ghost": {
+      "background": "transparent",
+      "text": "content-primary",
+      "border": "transparent",
+      "borderHover": "edge-primary",
+      "backgroundActive": "action-primary",
+      "borderActive": "edge-primary"
+    }
+  },
+  "states": {
+    "disabled": {
+      "opacity": "50%",
+      "cursor": "not-allowed"
+    },
+    "hover": {
+      "transform": "translateY(-0.125rem)",
+      "shadow": "btn-hover"
+    },
+    "active": {
+      "transform": "translateY(0.125rem)",
+      "shadow": "none"
+    }
+  }
+}

package/components/core/Button/Button.schema.json

@@ -0,0 +1,84 @@
+{
+  "name": "Button",
+  "description": "Primary action trigger with retro lift effect. Supports button and link behaviors with customizable variants and sizes.",
+  "props": {
+    "variant": {
+      "type": "enum",
+      "values": ["primary", "secondary", "outline", "ghost"],
+      "default": "primary",
+      "description": "Visual variant determining colors and hover states"
+    },
+    "size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "description": "Size preset controlling height, padding, and text size"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "default": false,
+      "description": "Expand button to fill container width"
+    },
+    "iconOnly": {
+      "type": "boolean",
+      "default": false,
+      "description": "Square button with icon only (no text)"
+    },
+    "loading": {
+      "type": "boolean",
+      "default": false,
+      "description": "Show loading state (replaces icon with loadingIndicator slot)"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable button interactions"
+    },
+    "href": {
+      "type": "string",
+      "description": "URL for link navigation. When provided, button renders as anchor or opens via window.open"
+    },
+    "asLink": {
+      "type": "boolean",
+      "default": true,
+      "description": "When href is provided: true renders as <a>, false uses window.open"
+    },
+    "target": {
+      "type": "string",
+      "description": "Link target (e.g., '_blank' for new tab)"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Button label text"
+    },
+    "icon": {
+      "description": "Icon component rendered on the right side of the button"
+    },
+    "loadingIndicator": {
+      "description": "Spinner component shown when loading is true (replaces icon)"
+    }
+  },
+  "examples": [
+    {
+      "name": "Primary button",
+      "code": "<Button>Click me</Button>"
+    },
+    {
+      "name": "Secondary with icon",
+      "code": "<Button variant=\"secondary\" icon={<ArrowIcon />}>Next</Button>"
+    },
+    {
+      "name": "Icon-only button",
+      "code": "<Button iconOnly icon={<MenuIcon />} aria-label=\"Open menu\" />"
+    },
+    {
+      "name": "Link button",
+      "code": "<Button href=\"/dashboard\">Go to Dashboard</Button>"
+    },
+    {
+      "name": "Loading state",
+      "code": "<Button loading loadingIndicator={<Spinner />} icon={<SendIcon />}>Submit</Button>"
+    }
+  ]
+}

package/components/core/Card/Card.dna.json

@@ -0,0 +1,21 @@
+{
+  "component": "Card",
+  "tokenBindings": {
+    "default": {
+      "background": "surface-primary",
+      "text": "content-primary",
+      "border": "edge-primary"
+    },
+    "dark": {
+      "background": "surface-secondary",
+      "text": "content-inverted",
+      "border": "edge-primary"
+    },
+    "raised": {
+      "background": "surface-primary",
+      "text": "content-primary",
+      "border": "edge-primary",
+      "shadow": "shadow-card"
+    }
+  }
+}

package/components/core/Card/Card.schema.json

@@ -0,0 +1,23 @@
+{
+  "name": "Card",
+  "description": "Container with header, body, and footer sections",
+  "props": {
+    "variant": {
+      "type": "enum",
+      "values": ["default", "dark", "raised"],
+      "default": "default",
+      "description": "Visual variant controlling background and text colors"
+    },
+    "noPadding": {
+      "type": "boolean",
+      "default": false,
+      "description": "Remove default padding from the card container"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes to apply"
+    }
+  },
+  "slots": ["children"],
+  "subcomponents": ["CardHeader", "CardBody", "CardFooter"]
+}

package/components/core/Checkbox/Checkbox.dna.json

@@ -0,0 +1,38 @@
+{
+  "component": "Checkbox",
+  "description": "Token bindings for Checkbox and Radio components",
+  "tokenBindings": {
+    "container": {
+      "gap": "spacing-xs"
+    },
+    "input": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "backgroundChecked": "action-primary",
+      "focusRing": "edge-focus"
+    },
+    "checkmark": {
+      "color": "content-primary"
+    },
+    "radioDot": {
+      "background": "content-primary"
+    },
+    "label": {
+      "text": "content-primary",
+      "font": "mondwest"
+    }
+  },
+  "states": {
+    "disabled": {
+      "opacity": "50%",
+      "cursor": "not-allowed"
+    },
+    "checked": {
+      "background": "action-primary"
+    },
+    "focus": {
+      "ring": "edge-focus",
+      "ringOffset": "1px"
+    }
+  }
+}

package/components/core/Checkbox/Checkbox.schema.json

@@ -0,0 +1,55 @@
+{
+  "name": "Checkbox",
+  "description": "Retro-styled checkbox and radio components for form selections. Provides accessible input controls with visual feedback states.",
+  "subcomponents": ["Checkbox", "Radio"],
+  "props": {
+    "label": {
+      "type": "string",
+      "description": "Label text displayed next to the input"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable input interactions"
+    },
+    "checked": {
+      "type": "boolean",
+      "description": "Controlled checked state (native HTML attribute)"
+    },
+    "defaultChecked": {
+      "type": "boolean",
+      "description": "Initial checked state for uncontrolled usage"
+    },
+    "name": {
+      "type": "string",
+      "description": "Input name for form submission"
+    },
+    "value": {
+      "type": "string",
+      "description": "Input value for form submission"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Basic checkbox",
+      "code": "<Checkbox label=\"Accept terms\" />"
+    },
+    {
+      "name": "Checked checkbox",
+      "code": "<Checkbox label=\"Subscribe to newsletter\" defaultChecked />"
+    },
+    {
+      "name": "Disabled checkbox",
+      "code": "<Checkbox label=\"Locked option\" disabled />"
+    },
+    {
+      "name": "Basic radio",
+      "code": "<Radio label=\"Option A\" name=\"choice\" value=\"a\" />"
+    },
+    {
+      "name": "Radio group",
+      "code": "<>\n  <Radio label=\"Small\" name=\"size\" value=\"sm\" />\n  <Radio label=\"Medium\" name=\"size\" value=\"md\" defaultChecked />\n  <Radio label=\"Large\" name=\"size\" value=\"lg\" />\n</>"
+    }
+  ]
+}

package/components/core/ContextMenu/ContextMenu.dna.json

@@ -0,0 +1,25 @@
+{
+  "component": "ContextMenu",
+  "description": "Token bindings for ContextMenu component",
+  "tokenBindings": {
+    "content": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "shadow": "edge-primary"
+    },
+    "item": {
+      "text": "content-primary",
+      "textDestructive": "status-error",
+      "backgroundHover": "action-primary"
+    },
+    "separator": {
+      "border": "edge-primary/20"
+    }
+  },
+  "states": {
+    "disabled": {
+      "opacity": "50%",
+      "cursor": "not-allowed"
+    }
+  }
+}