@rdna/radiants 0.1.0 → 0.1.1

package/components/core/Popover/Popover.schema.json

@@ -0,0 +1,46 @@
+{
+  "name": "Popover",
+  "description": "Floating content panel anchored to a trigger element. Supports controlled and uncontrolled states with keyboard accessibility and click-outside dismissal.",
+  "subcomponents": ["PopoverTrigger", "PopoverContent"],
+  "props": {
+    "open": {
+      "type": "boolean",
+      "description": "Controlled open state for the popover"
+    },
+    "defaultOpen": {
+      "type": "boolean",
+      "default": false,
+      "description": "Default open state for uncontrolled usage"
+    },
+    "onOpenChange": {
+      "type": "function",
+      "description": "Callback when open state changes"
+    },
+    "position": {
+      "type": "enum",
+      "values": ["top", "bottom", "left", "right"],
+      "default": "bottom",
+      "description": "Position of the popover relative to the trigger"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Popover subcomponents (PopoverTrigger, PopoverContent)"
+    }
+  },
+  "variants": {},
+  "examples": [
+    {
+      "name": "Basic popover",
+      "code": "<Popover>\n  <PopoverTrigger asChild>\n    <Button>Open Popover</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Popover content goes here.</p>\n  </PopoverContent>\n</Popover>"
+    },
+    {
+      "name": "Controlled popover",
+      "code": "<Popover open={isOpen} onOpenChange={setIsOpen}>\n  <PopoverTrigger asChild>\n    <Button>Info</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Some helpful information.</p>\n  </PopoverContent>\n</Popover>"
+    },
+    {
+      "name": "Popover with position",
+      "code": "<Popover position=\"right\">\n  <PopoverTrigger asChild>\n    <Button variant=\"outline\">More Options</Button>\n  </PopoverTrigger>\n  <PopoverContent align=\"start\">\n    <p>Additional options appear to the right.</p>\n  </PopoverContent>\n</Popover>"
+    }
+  ]
+}

package/components/core/Progress/Progress.dna.json

@@ -0,0 +1,29 @@
+{
+  "component": "Progress",
+  "description": "Token bindings for Progress component variants",
+  "tokenBindings": {
+    "track": {
+      "background": "surface-primary",
+      "border": "edge-primary"
+    },
+    "fill": {
+      "default": "action-primary",
+      "success": "status-success",
+      "warning": "surface-tertiary",
+      "error": "status-error"
+    },
+    "label": {
+      "text": "content-primary",
+      "font": "heading"
+    }
+  },
+  "subcomponents": {
+    "Spinner": {
+      "description": "PixelCode animated loader with completion checkmark",
+      "tokenBindings": {
+        "text": "content-primary",
+        "font": "monospace"
+      }
+    }
+  }
+}

package/components/core/Progress/Progress.schema.json

@@ -0,0 +1,57 @@
+{
+  "name": "Progress",
+  "description": "Progress bar with retro pixel-art styling. Displays completion state with optional percentage label.",
+  "subcomponents": ["Spinner"],
+  "props": {
+    "value": {
+      "type": "number",
+      "required": true,
+      "description": "Current progress value (0 to max)"
+    },
+    "max": {
+      "type": "number",
+      "default": 100,
+      "description": "Maximum progress value"
+    },
+    "variant": {
+      "type": "enum",
+      "values": ["default", "success", "warning", "error"],
+      "default": "default",
+      "description": "Visual variant for different states/meanings"
+    },
+    "size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "description": "Height preset for the progress bar"
+    },
+    "showLabel": {
+      "type": "boolean",
+      "default": false,
+      "description": "Display percentage label below the bar"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes for the container"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Default progress",
+      "code": "<Progress value={50} />"
+    },
+    {
+      "name": "Success variant with label",
+      "code": "<Progress value={75} variant=\"success\" showLabel />"
+    },
+    {
+      "name": "Error variant small",
+      "code": "<Progress value={30} variant=\"error\" size=\"sm\" />"
+    },
+    {
+      "name": "Large progress bar",
+      "code": "<Progress value={90} size=\"lg\" showLabel />"
+    }
+  ]
+}

package/components/core/Select/Select.dna.json

@@ -0,0 +1,42 @@
+{
+  "component": "Select",
+  "description": "Token bindings for Select component",
+  "tokenBindings": {
+    "trigger": {
+      "background": "surface-primary",
+      "text": "content-primary",
+      "textPlaceholder": "content-primary/40",
+      "border": "edge-primary",
+      "borderError": "status-error",
+      "shadow": "edge-primary",
+      "focusRing": "edge-focus"
+    },
+    "dropdown": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "shadow": "edge-primary"
+    },
+    "option": {
+      "text": "content-primary",
+      "backgroundSelected": "action-primary",
+      "backgroundHover": "action-primary"
+    }
+  },
+  "states": {
+    "disabled": {
+      "opacity": "50%",
+      "cursor": "not-allowed"
+    },
+    "open": {
+      "shadowOffset": "3px",
+      "transform": "translateY(-0.125rem)"
+    },
+    "closed": {
+      "shadowOffset": "1px"
+    },
+    "optionDisabled": {
+      "opacity": "50%",
+      "cursor": "not-allowed"
+    }
+  }
+}

package/components/core/Select/Select.schema.json

@@ -0,0 +1,66 @@
+{
+  "name": "Select",
+  "description": "Custom dropdown select with retro styling. Provides a fully accessible select experience with keyboard navigation and customizable states.",
+  "props": {
+    "options": {
+      "type": "array",
+      "required": true,
+      "description": "Array of option objects with value, label, and optional disabled properties"
+    },
+    "value": {
+      "type": "string",
+      "description": "Currently selected value"
+    },
+    "placeholder": {
+      "type": "string",
+      "default": "Select...",
+      "description": "Placeholder text when no value is selected"
+    },
+    "onChange": {
+      "type": "function",
+      "description": "Callback fired when selection changes, receives the selected value"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable select interactions"
+    },
+    "error": {
+      "type": "boolean",
+      "default": false,
+      "description": "Show error state with red border"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "default": false,
+      "description": "Expand select to fill container width"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Basic select",
+      "code": "<Select options={[{value: 'a', label: 'Option A'}, {value: 'b', label: 'Option B'}]} value={selected} onChange={setSelected} />"
+    },
+    {
+      "name": "With placeholder",
+      "code": "<Select options={options} placeholder=\"Choose an option...\" onChange={handleChange} />"
+    },
+    {
+      "name": "Full width",
+      "code": "<Select options={options} value={selected} onChange={setSelected} fullWidth />"
+    },
+    {
+      "name": "Error state",
+      "code": "<Select options={options} value={selected} onChange={setSelected} error />"
+    },
+    {
+      "name": "Disabled",
+      "code": "<Select options={options} value={selected} onChange={setSelected} disabled />"
+    },
+    {
+      "name": "With disabled option",
+      "code": "<Select options={[{value: 'a', label: 'Option A'}, {value: 'b', label: 'Option B', disabled: true}]} value={selected} onChange={setSelected} />"
+    }
+  ]
+}

package/components/core/Sheet/Sheet.dna.json

@@ -0,0 +1,28 @@
+{
+  "component": "Sheet",
+  "tokenBindings": {
+    "overlay": {
+      "background": "surface-secondary/50"
+    },
+    "content": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "shadow": "shadow-card"
+    },
+    "header": {
+      "border": "edge-primary/20"
+    },
+    "title": {
+      "text": "content-primary"
+    },
+    "description": {
+      "text": "content-primary/70"
+    },
+    "body": {
+      "text": "content-primary"
+    },
+    "footer": {
+      "border": "edge-primary/20"
+    }
+  }
+}

package/components/core/Sheet/Sheet.schema.json

@@ -0,0 +1,53 @@
+{
+  "name": "Sheet",
+  "description": "Slide-in panel from screen edges for contextual content, navigation, or forms. Supports all four sides with smooth animations and keyboard accessibility.",
+  "subcomponents": ["SheetTrigger", "SheetContent", "SheetHeader", "SheetTitle", "SheetDescription", "SheetBody", "SheetFooter", "SheetClose"],
+  "props": {
+    "open": {
+      "type": "boolean",
+      "description": "Controlled open state for the sheet"
+    },
+    "defaultOpen": {
+      "type": "boolean",
+      "default": false,
+      "description": "Default open state for uncontrolled usage"
+    },
+    "onOpenChange": {
+      "type": "function",
+      "description": "Callback when open state changes"
+    },
+    "side": {
+      "type": "enum",
+      "values": ["left", "right", "top", "bottom"],
+      "default": "right",
+      "description": "Side of the screen to slide in from"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Sheet subcomponents (SheetTrigger, SheetContent, etc.)"
+    }
+  },
+  "variants": {
+    "side": {
+      "left": "Slides in from the left edge",
+      "right": "Slides in from the right edge (default)",
+      "top": "Slides in from the top edge",
+      "bottom": "Slides in from the bottom edge"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic sheet",
+      "code": "<Sheet>\n  <SheetTrigger asChild>\n    <Button>Open Sheet</Button>\n  </SheetTrigger>\n  <SheetContent>\n    <SheetHeader>\n      <SheetTitle>Sheet Title</SheetTitle>\n      <SheetDescription>This is a description of the sheet.</SheetDescription>\n    </SheetHeader>\n    <SheetBody>\n      <p>Sheet content goes here.</p>\n    </SheetBody>\n    <SheetFooter>\n      <SheetClose asChild>\n        <Button variant=\"outline\">Close</Button>\n      </SheetClose>\n    </SheetFooter>\n  </SheetContent>\n</Sheet>"
+    },
+    {
+      "name": "Left-side navigation sheet",
+      "code": "<Sheet side=\"left\">\n  <SheetTrigger asChild>\n    <Button iconOnly aria-label=\"Menu\"><MenuIcon /></Button>\n  </SheetTrigger>\n  <SheetContent>\n    <SheetHeader>\n      <SheetTitle>Navigation</SheetTitle>\n    </SheetHeader>\n    <SheetBody>\n      <nav>\n        <ul>\n          <li><a href=\"/home\">Home</a></li>\n          <li><a href=\"/settings\">Settings</a></li>\n        </ul>\n      </nav>\n    </SheetBody>\n  </SheetContent>\n</Sheet>"
+    },
+    {
+      "name": "Controlled sheet",
+      "code": "<Sheet open={isOpen} onOpenChange={setIsOpen}>\n  <SheetTrigger asChild>\n    <Button>Filters</Button>\n  </SheetTrigger>\n  <SheetContent>\n    <SheetHeader>\n      <SheetTitle>Filters</SheetTitle>\n    </SheetHeader>\n    <SheetBody>\n      <p>Filter options here.</p>\n    </SheetBody>\n    <SheetFooter>\n      <Button variant=\"outline\" onClick={() => setIsOpen(false)}>Cancel</Button>\n      <Button onClick={applyFilters}>Apply</Button>\n    </SheetFooter>\n  </SheetContent>\n</Sheet>"
+    }
+  ]
+}

package/components/core/Slider/Slider.dna.json

@@ -0,0 +1,49 @@
+{
+  "component": "Slider",
+  "description": "Token bindings for Slider component",
+  "tokenBindings": {
+    "label": {
+      "text": "content-primary",
+      "font": "heading"
+    },
+    "value": {
+      "text": "content-primary/60",
+      "font": "heading"
+    },
+    "track": {
+      "background": "edge-primary/10",
+      "border": "edge-primary",
+      "focusRing": "edge-focus"
+    },
+    "fill": {
+      "background": "action-primary"
+    },
+    "thumb": {
+      "background": "surface-muted",
+      "border": "edge-primary"
+    }
+  },
+  "states": {
+    "disabled": {
+      "opacity": "50%",
+      "cursor": "not-allowed"
+    },
+    "dragging": {
+      "thumbScale": "110%"
+    }
+  },
+  "sizes": {
+    "sm": {
+      "trackHeight": "0.25rem",
+      "thumbSize": "0.75rem"
+    },
+    "md": {
+      "trackHeight": "0.5rem",
+      "thumbSize": "1rem"
+    },
+    "lg": {
+      "trackHeight": "0.75rem",
+      "thumbSize": "1.25rem"
+    }
+  }
+}

package/components/core/Slider/Slider.schema.json

@@ -0,0 +1,70 @@
+{
+  "name": "Slider",
+  "description": "Numeric range input with draggable thumb. Supports keyboard navigation and customizable sizes.",
+  "props": {
+    "value": {
+      "type": "number",
+      "required": true,
+      "description": "Current numeric value"
+    },
+    "onChange": {
+      "type": "function",
+      "required": true,
+      "description": "Callback when value changes: (value: number) => void"
+    },
+    "min": {
+      "type": "number",
+      "default": 0,
+      "description": "Minimum value"
+    },
+    "max": {
+      "type": "number",
+      "default": 100,
+      "description": "Maximum value"
+    },
+    "step": {
+      "type": "number",
+      "default": 1,
+      "description": "Step increment between values"
+    },
+    "size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "description": "Size preset controlling track height and thumb dimensions"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable slider interactions"
+    },
+    "showValue": {
+      "type": "boolean",
+      "default": false,
+      "description": "Display current value next to label"
+    },
+    "label": {
+      "type": "string",
+      "description": "Label text displayed above the slider"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Basic slider",
+      "code": "<Slider value={50} onChange={setValue} />"
+    },
+    {
+      "name": "With label and value display",
+      "code": "<Slider value={volume} onChange={setVolume} label=\"Volume\" showValue />"
+    },
+    {
+      "name": "Custom range with step",
+      "code": "<Slider value={temp} onChange={setTemp} min={0} max={10} step={0.5} />"
+    },
+    {
+      "name": "Large disabled slider",
+      "code": "<Slider value={75} onChange={() => {}} size=\"lg\" disabled />"
+    }
+  ]
+}

package/components/core/Switch/Switch.dna.json

@@ -0,0 +1,47 @@
+{
+  "component": "Switch",
+  "description": "Token bindings for Switch component",
+  "tokenBindings": {
+    "track": {
+      "border": "edge-primary",
+      "backgroundOff": "edge-primary/10",
+      "backgroundOn": "action-primary",
+      "focusRing": "edge-focus"
+    },
+    "thumb": {
+      "background": "surface-secondary",
+      "border": "edge-primary"
+    },
+    "label": {
+      "text": "content-primary",
+      "font": "mondwest"
+    }
+  },
+  "states": {
+    "disabled": {
+      "opacity": "50%",
+      "cursor": "not-allowed"
+    },
+    "checked": {
+      "background": "action-primary",
+      "thumbTranslate": "size-dependent"
+    }
+  },
+  "sizes": {
+    "sm": {
+      "trackWidth": "2rem",
+      "trackHeight": "1rem",
+      "thumbSize": "0.75rem"
+    },
+    "md": {
+      "trackWidth": "2.5rem",
+      "trackHeight": "1.25rem",
+      "thumbSize": "1rem"
+    },
+    "lg": {
+      "trackWidth": "3rem",
+      "trackHeight": "1.5rem",
+      "thumbSize": "1.25rem"
+    }
+  }
+}

package/components/core/Switch/Switch.schema.json

@@ -0,0 +1,64 @@
+{
+  "name": "Switch",
+  "description": "On/off toggle control for binary settings. Provides accessible switch interaction with customizable sizes and optional label.",
+  "props": {
+    "checked": {
+      "type": "boolean",
+      "required": true,
+      "description": "Controlled checked state of the switch"
+    },
+    "onChange": {
+      "type": "function",
+      "required": true,
+      "description": "Callback fired when checked state changes, receives new checked value"
+    },
+    "size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "description": "Size preset controlling track and thumb dimensions"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable switch interactions"
+    },
+    "label": {
+      "type": "string",
+      "description": "Optional label text for the switch"
+    },
+    "labelPosition": {
+      "type": "enum",
+      "values": ["left", "right"],
+      "default": "right",
+      "description": "Position of label relative to switch"
+    },
+    "id": {
+      "type": "string",
+      "description": "ID for accessibility linking between label and switch"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Basic switch",
+      "code": "<Switch checked={enabled} onChange={setEnabled} />"
+    },
+    {
+      "name": "With label",
+      "code": "<Switch checked={enabled} onChange={setEnabled} label=\"Enable notifications\" />"
+    },
+    {
+      "name": "Label on left",
+      "code": "<Switch checked={enabled} onChange={setEnabled} label=\"Dark mode\" labelPosition=\"left\" />"
+    },
+    {
+      "name": "Small size",
+      "code": "<Switch checked={enabled} onChange={setEnabled} size=\"sm\" />"
+    },
+    {
+      "name": "Disabled state",
+      "code": "<Switch checked={true} onChange={() => {}} disabled label=\"Locked setting\" />"
+    }
+  ]
+}

package/components/core/Tabs/Tabs.dna.json

@@ -0,0 +1,39 @@
+{
+  "component": "Tabs",
+  "tokenBindings": {
+    "list": {
+      "background": "surface-primary",
+      "border": "edge-primary"
+    },
+    "trigger": {
+      "text": "content-primary",
+      "border": "edge-primary"
+    },
+    "triggerPill": {
+      "inactive": {
+        "background": "transparent",
+        "hoverBackground": "surface-secondary/5"
+      },
+      "active": {
+        "background": "action-primary",
+        "text": "content-primary"
+      }
+    },
+    "triggerLine": {
+      "inactive": {
+        "background": "transparent",
+        "hoverBackground": "surface-primary/50"
+      },
+      "active": {
+        "background": "surface-primary",
+        "border": "edge-primary"
+      }
+    },
+    "content": {
+      "line": {
+        "background": "surface-primary",
+        "border": "edge-primary"
+      }
+    }
+  }
+}

package/components/core/Tabs/Tabs.schema.json

@@ -0,0 +1,62 @@
+{
+  "name": "Tabs",
+  "description": "Tab-based navigation with support for pill and line variants. Compound component with TabsList, TabsTrigger, and TabsContent subcomponents.",
+  "subcomponents": ["TabsList", "TabsTrigger", "TabsContent"],
+  "props": {
+    "defaultValue": {
+      "type": "string",
+      "description": "Default active tab ID for uncontrolled mode"
+    },
+    "value": {
+      "type": "string",
+      "description": "Active tab ID for controlled mode"
+    },
+    "onValueChange": {
+      "type": "function",
+      "description": "Callback when tab changes (controlled mode)"
+    },
+    "variant": {
+      "type": "enum",
+      "values": ["pill", "line"],
+      "default": "pill",
+      "description": "Visual variant - pill for filled background, line for underline style"
+    },
+    "layout": {
+      "type": "enum",
+      "values": ["default", "bottom-tabs"],
+      "default": "bottom-tabs",
+      "description": "Layout pattern - bottom-tabs for fixed bottom navigation, default for top tabs"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "TabsList and TabsContent subcomponents"
+    }
+  },
+  "variants": {
+    "pill": {
+      "description": "Filled background on active tab with rounded borders"
+    },
+    "line": {
+      "description": "Connected line style with seamless content integration"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic tabs (pill variant)",
+      "code": "<Tabs defaultValue=\"tab1\">\n  <TabsList>\n    <TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n    <TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"tab1\">Content for tab 1</TabsContent>\n  <TabsContent value=\"tab2\">Content for tab 2</TabsContent>\n</Tabs>"
+    },
+    {
+      "name": "Tabs with icons",
+      "code": "<Tabs defaultValue=\"home\" variant=\"pill\">\n  <TabsList>\n    <TabsTrigger value=\"home\" icon={<HomeIcon />}>Home</TabsTrigger>\n    <TabsTrigger value=\"settings\" icon={<SettingsIcon />}>Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"home\">Home content</TabsContent>\n  <TabsContent value=\"settings\">Settings content</TabsContent>\n</Tabs>"
+    },
+    {
+      "name": "Line variant tabs",
+      "code": "<Tabs defaultValue=\"overview\" variant=\"line\">\n  <TabsList>\n    <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n    <TabsTrigger value=\"details\">Details</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"overview\">Overview content</TabsContent>\n  <TabsContent value=\"details\">Details content</TabsContent>\n</Tabs>"
+    },
+    {
+      "name": "Controlled tabs",
+      "code": "<Tabs value={activeTab} onValueChange={setActiveTab}>\n  <TabsList>\n    <TabsTrigger value=\"first\">First</TabsTrigger>\n    <TabsTrigger value=\"second\">Second</TabsTrigger>\n  </TabsList>\n  <TabsContent value=\"first\">First tab content</TabsContent>\n  <TabsContent value=\"second\">Second tab content</TabsContent>\n</Tabs>"
+    }
+  ]
+}