@rdna/radiants 0.1.1 → 0.1.3

package/generated/figma/contracts/toggle-group.contract.json

@@ -0,0 +1,108 @@
+{
+  "id": "toggle-group",
+  "name": "ToggleGroup",
+  "description": "Group of related toggle buttons for single or multiple selection. Items render as RDNA Toggles, inheriting the full Button visual system.",
+  "sourcePath": "packages/radiants/components/core/ToggleGroup/ToggleGroup.tsx",
+  "schemaPath": "packages/radiants/components/core/ToggleGroup/ToggleGroup.schema.json",
+  "importPath": "@rdna/radiants/components/core",
+  "platforms": [
+    "web"
+  ],
+  "category": "action",
+  "renderMode": "custom",
+  "tags": [
+    "toggle-group",
+    "segmented",
+    "multi-select"
+  ],
+  "props": {
+    "multiple": {
+      "type": "boolean",
+      "default": false,
+      "description": "Allow multiple items to be selected simultaneously"
+    },
+    "value": {
+      "type": "string",
+      "description": "Controlled selected value(s)"
+    },
+    "defaultValue": {
+      "type": "string",
+      "description": "Default selected value(s)"
+    },
+    "onValueChange": {
+      "type": "string",
+      "description": "Callback when selection changes"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable all toggle interactions"
+    },
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "description": "Layout direction: horizontal or vertical"
+    },
+    "mode": {
+      "type": "string",
+      "default": "solid",
+      "description": "Visual mode: solid, flat, pattern"
+    },
+    "tone": {
+      "type": "string",
+      "default": "accent",
+      "description": "Color tone: accent, danger, success, neutral, cream, white, info, tinted"
+    },
+    "size": {
+      "type": "string",
+      "default": "md",
+      "description": "Size applied to all toggle items: sm, md, lg"
+    },
+    "rounded": {
+      "type": "string",
+      "default": "none",
+      "description": "Pixel-corner roundness for items: xs, sm, md, lg, xl, none"
+    },
+    "quiet": {
+      "type": "boolean",
+      "default": true,
+      "description": "Transparent at rest — fills on hover/selected"
+    },
+    "compact": {
+      "type": "boolean",
+      "default": false,
+      "description": "Compact badge-like styling — uses mono font"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "ToggleGroup.Item elements"
+    }
+  },
+  "subcomponents": [
+    "ToggleGroup.Item"
+  ],
+  "states": [],
+  "variants": [],
+  "exampleProps": {},
+  "controlledProps": [],
+  "examples": [
+    {
+      "name": "Single selection",
+      "code": "<ToggleGroup defaultValue=\"center\">\n  <ToggleGroup.Item value=\"left\">Left</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"center\">Center</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"right\">Right</ToggleGroup.Item>\n</ToggleGroup>"
+    },
+    {
+      "name": "Multiple selection",
+      "code": "<ToggleGroup multiple>\n  <ToggleGroup.Item value=\"bold\">B</ToggleGroup.Item>\n  <ToggleGroup.Item value=\"italic\">I</ToggleGroup.Item>\n</ToggleGroup>"
+    }
+  ],
+  "tokens": {},
+  "tokenBindings": {},
+  "replaces": [],
+  "pixelCorners": false,
+  "shadowSystem": null,
+  "styleOwnership": [],
+  "structuralRules": [],
+  "wraps": null,
+  "a11y": null
+}

package/generated/figma/contracts/toggle.contract.json

@@ -0,0 +1,154 @@
+{
+  "id": "toggle",
+  "name": "Toggle",
+  "description": "Pressable toggle button that holds a pressed/unpressed state. Used as standalone or inside ToggleGroup.",
+  "sourcePath": "packages/radiants/components/core/Toggle/Toggle.tsx",
+  "schemaPath": "packages/radiants/components/core/Toggle/Toggle.schema.json",
+  "importPath": "@rdna/radiants/components/core",
+  "platforms": [
+    "web"
+  ],
+  "category": "action",
+  "renderMode": "inline",
+  "tags": [
+    "toggle",
+    "press",
+    "on-off"
+  ],
+  "props": {
+    "pressed": {
+      "type": "boolean",
+      "description": "Controlled pressed state"
+    },
+    "defaultPressed": {
+      "type": "boolean",
+      "description": "Initial pressed state for uncontrolled usage"
+    },
+    "onPressedChange": {
+      "type": "string",
+      "description": "Callback when pressed state changes"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable toggle interactions"
+    },
+    "mode": {
+      "type": "enum",
+      "options": [
+        "solid",
+        "flat",
+        "pattern"
+      ],
+      "default": "solid",
+      "description": "Visual mode — controls fill treatment"
+    },
+    "tone": {
+      "type": "enum",
+      "options": [
+        "accent",
+        "danger",
+        "success",
+        "neutral",
+        "cream",
+        "white",
+        "info",
+        "tinted"
+      ],
+      "default": "accent",
+      "description": "Color tone"
+    },
+    "size": {
+      "type": "enum",
+      "options": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md",
+      "description": "Size preset"
+    },
+    "rounded": {
+      "type": "enum",
+      "options": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl",
+        "none"
+      ],
+      "default": "xs",
+      "description": "Pixel-corner roundness"
+    },
+    "value": {
+      "type": "string",
+      "description": "Value when used inside ToggleGroup"
+    },
+    "children": {
+      "type": "string",
+      "description": "Toggle content"
+    }
+  },
+  "slots": {},
+  "subcomponents": [],
+  "states": [
+    {
+      "name": "hover",
+      "driver": "wrapper"
+    },
+    {
+      "name": "pressed",
+      "driver": "prop",
+      "prop": "pressed",
+      "value": true
+    },
+    {
+      "name": "focus",
+      "driver": "wrapper"
+    },
+    {
+      "name": "disabled",
+      "driver": "prop",
+      "prop": "disabled",
+      "value": true
+    }
+  ],
+  "variants": [],
+  "exampleProps": {
+    "children": "Toggle"
+  },
+  "controlledProps": [],
+  "examples": [
+    {
+      "name": "Basic toggle",
+      "code": "<Toggle>Bold</Toggle>"
+    },
+    {
+      "name": "Pressed state",
+      "code": "<Toggle defaultPressed>Italic</Toggle>"
+    },
+    {
+      "name": "Disabled",
+      "code": "<Toggle disabled>Underline</Toggle>"
+    }
+  ],
+  "tokens": {},
+  "tokenBindings": {},
+  "replaces": [],
+  "pixelCorners": false,
+  "shadowSystem": null,
+  "styleOwnership": [],
+  "structuralRules": [],
+  "wraps": "@base-ui/react/toggle",
+  "a11y": {
+    "role": "button",
+    "requiredAttributes": [
+      "aria-pressed"
+    ],
+    "keyboardInteractions": [
+      "Enter",
+      "Space"
+    ]
+  }
+}

package/generated/figma/contracts/toolbar.contract.json

@@ -0,0 +1,61 @@
+{
+  "id": "toolbar",
+  "name": "Toolbar",
+  "description": "Accessible toolbar container with keyboard navigation between interactive elements.",
+  "sourcePath": "packages/radiants/components/core/Toolbar/Toolbar.tsx",
+  "schemaPath": "packages/radiants/components/core/Toolbar/Toolbar.schema.json",
+  "importPath": "@rdna/radiants/components/core",
+  "platforms": [
+    "web"
+  ],
+  "category": "action",
+  "renderMode": "custom",
+  "tags": [
+    "toolbar",
+    "actions",
+    "controls"
+  ],
+  "props": {
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "description": "Layout direction of toolbar"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable all toolbar interactions"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Toolbar.Button, Toolbar.Separator, and Toolbar.Link elements"
+    }
+  },
+  "subcomponents": [
+    "Toolbar.Root",
+    "Toolbar.Button",
+    "Toolbar.Separator",
+    "Toolbar.Link",
+    "Toolbar.Group"
+  ],
+  "states": [],
+  "variants": [],
+  "exampleProps": {},
+  "controlledProps": [],
+  "examples": [
+    {
+      "name": "Basic toolbar",
+      "code": "<Toolbar.Root>\n  <Toolbar.Button>Cut</Toolbar.Button>\n  <Toolbar.Button>Copy</Toolbar.Button>\n  <Toolbar.Button>Paste</Toolbar.Button>\n  <Toolbar.Separator />\n  <Toolbar.Button>Format</Toolbar.Button>\n</Toolbar.Root>"
+    }
+  ],
+  "tokens": {},
+  "tokenBindings": {},
+  "replaces": [],
+  "pixelCorners": false,
+  "shadowSystem": null,
+  "styleOwnership": [],
+  "structuralRules": [],
+  "wraps": null,
+  "a11y": null
+}

package/generated/figma/contracts/tooltip.contract.json

@@ -0,0 +1,121 @@
+{
+  "id": "tooltip",
+  "name": "Tooltip",
+  "description": "A floating label that appears on hover or focus of a trigger element. Supports four placement directions, configurable show delay, and three size variants.",
+  "sourcePath": "packages/radiants/components/core/Tooltip/Tooltip.tsx",
+  "schemaPath": "packages/radiants/components/core/Tooltip/Tooltip.schema.json",
+  "importPath": "@rdna/radiants/components/core",
+  "platforms": [
+    "web"
+  ],
+  "category": "feedback",
+  "renderMode": "custom",
+  "tags": [
+    "hint",
+    "info",
+    "hover"
+  ],
+  "props": {
+    "content": {
+      "type": "node",
+      "required": true,
+      "description": "Text or element displayed inside the tooltip bubble"
+    },
+    "position": {
+      "type": "enum",
+      "values": [
+        "top",
+        "bottom",
+        "left",
+        "right"
+      ],
+      "default": "top",
+      "description": "Which side of the trigger the tooltip appears on"
+    },
+    "delay": {
+      "type": "number",
+      "default": 0,
+      "description": "Milliseconds to wait before showing the tooltip"
+    },
+    "size": {
+      "type": "enum",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ],
+      "default": "md",
+      "description": "Controls padding and font size of the tooltip bubble"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes applied to the trigger wrapper"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Trigger element — the tooltip appears relative to this node"
+    },
+    "content": {
+      "description": "Tooltip bubble content, passed via the content prop"
+    }
+  },
+  "subcomponents": [],
+  "states": [],
+  "variants": [],
+  "exampleProps": {},
+  "controlledProps": [],
+  "examples": [
+    {
+      "name": "Basic tooltip",
+      "code": "<Tooltip content=\"Tooltip text\"><button>Hover me</button></Tooltip>"
+    },
+    {
+      "name": "Bottom position",
+      "code": "<Tooltip content=\"Below\" position=\"bottom\"><button>Hover me</button></Tooltip>"
+    },
+    {
+      "name": "With delay",
+      "code": "<Tooltip content=\"Delayed\" delay={500}><button>Hover me</button></Tooltip>"
+    },
+    {
+      "name": "Large size",
+      "code": "<Tooltip content=\"Large tooltip\" size=\"lg\"><button>Hover me</button></Tooltip>"
+    }
+  ],
+  "tokens": {
+    "color": {
+      "base.background": "inv",
+      "base.text": "flip",
+      "base.borderRadius": "sm",
+      "arrow.border": "inv"
+    },
+    "spacing": {
+      "base.paddingX": "spacing-sm",
+      "base.paddingY": "spacing-xs"
+    },
+    "typography": {
+      "base.font": "heading"
+    }
+  },
+  "tokenBindings": {
+    "base": {
+      "background": "inv",
+      "text": "flip",
+      "font": "heading",
+      "borderRadius": "sm",
+      "paddingX": "spacing-sm",
+      "paddingY": "spacing-xs"
+    },
+    "arrow": {
+      "border": "inv"
+    }
+  },
+  "replaces": [],
+  "pixelCorners": false,
+  "shadowSystem": null,
+  "styleOwnership": [],
+  "structuralRules": [],
+  "wraps": null,
+  "a11y": null
+}

package/generated/figma/primitive/color.tokens.json

@@ -0,0 +1,122 @@
+{
+  "$description": "Primitive RDNA Radiants color tokens generated from packages/radiants/tokens.css.",
+  "color": {
+    "cream": {
+      "$type": "color",
+      "$value": "oklch(0.9780 0.0295 94.34)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#fef8e2"
+        }
+      }
+    },
+    "ink": {
+      "$type": "color",
+      "$value": "oklch(0.1641 0.0044 84.59)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#0f0e0c"
+        }
+      }
+    },
+    "pure-black": {
+      "$type": "color",
+      "$value": "oklch(0.0000 0.0000 0)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#000000"
+        }
+      }
+    },
+    "sun-yellow": {
+      "$type": "color",
+      "$value": "oklch(0.9126 0.1170 93.68)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#fce184"
+        }
+      }
+    },
+    "sky-blue": {
+      "$type": "color",
+      "$value": "oklch(0.7701 0.0527 236.81)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#95bad2"
+        }
+      }
+    },
+    "sunset-fuzz": {
+      "$type": "color",
+      "$value": "oklch(0.8546 0.1039 68.93)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#fcc383"
+        }
+      }
+    },
+    "sun-red": {
+      "$type": "color",
+      "$value": "oklch(0.7429 0.1568 21.43)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#ff7f7f"
+        }
+      }
+    },
+    "mint": {
+      "$type": "color",
+      "$value": "oklch(0.9312 0.0702 142.51)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#cef5ca"
+        }
+      }
+    },
+    "pure-white": {
+      "$type": "color",
+      "$value": "oklch(1.0000 0.0000 0)",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#ffffff"
+        }
+      }
+    },
+    "success-mint": {
+      "$type": "color",
+      "$value": "{color.mint}",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#cef5ca"
+        }
+      }
+    },
+    "warning-yellow": {
+      "$type": "color",
+      "$value": "{color.sun-yellow}",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#fce184"
+        }
+      }
+    },
+    "error-red": {
+      "$type": "color",
+      "$value": "{color.sun-red}",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#ff7f7f"
+        }
+      }
+    },
+    "focus-state": {
+      "$type": "color",
+      "$value": "{color.sky-blue}",
+      "$extensions": {
+        "rdna": {
+          "srgb": "#95bad2"
+        }
+      }
+    }
+  }
+}

package/generated/figma/primitive/motion.tokens.json

@@ -0,0 +1,49 @@
+{
+  "$description": "Primitive RDNA Radiants motion tokens generated from packages/radiants/tokens.css.",
+  "duration": {
+    "instant": {
+      "$type": "duration",
+      "$value": "0ms"
+    },
+    "fast": {
+      "$type": "duration",
+      "$value": "100ms"
+    },
+    "base": {
+      "$type": "duration",
+      "$value": "150ms"
+    },
+    "moderate": {
+      "$type": "duration",
+      "$value": "200ms"
+    },
+    "slow": {
+      "$type": "duration",
+      "$value": "300ms"
+    }
+  },
+  "easing": {
+    "default": {
+      "$type": "cubicBezier",
+      "$value": "cubic-bezier(0, 0, 0.2, 1)"
+    },
+    "out": {
+      "$type": "cubicBezier",
+      "$value": "cubic-bezier(0, 0, 0.2, 1)"
+    },
+    "in": {
+      "$type": "cubicBezier",
+      "$value": "cubic-bezier(0.4, 0, 1, 1)"
+    },
+    "spring": {
+      "$type": "cubicBezier",
+      "$value": "cubic-bezier(0.22, 1, 0.36, 1)"
+    }
+  },
+  "scalar": {
+    "normal": {
+      "$type": "number",
+      "$value": "1"
+    }
+  }
+}