@rdna/radiants 0.1.0 → 0.1.2

package/components/core/Toast/Toast.dna.json

@@ -0,0 +1,31 @@
+{
+  "component": "Toast",
+  "tokenBindings": {
+    "default": {
+      "background": "surface-primary",
+      "text": "content-primary",
+      "border": "edge-primary",
+      "shadow": "shadow-card"
+    },
+    "success": {
+      "background": "status-success",
+      "text": "content-primary",
+      "border": "status-success"
+    },
+    "warning": {
+      "background": "status-warning",
+      "text": "content-primary",
+      "border": "surface-tertiary"
+    },
+    "error": {
+      "background": "status-error",
+      "text": "content-primary",
+      "border": "status-error"
+    },
+    "info": {
+      "background": "status-info",
+      "text": "content-primary",
+      "border": "status-info"
+    }
+  }
+}

package/components/core/Toast/Toast.schema.json

@@ -0,0 +1,57 @@
+{
+  "name": "Toast",
+  "description": "Toast notification system with provider pattern. Displays temporary feedback messages with variant-based styling.",
+  "props": {
+    "variant": {
+      "type": "enum",
+      "values": ["default", "success", "warning", "error", "info"],
+      "default": "default",
+      "description": "Visual variant controlling background and border colors"
+    },
+    "title": {
+      "type": "string",
+      "required": true,
+      "description": "Toast title text displayed in uppercase"
+    },
+    "description": {
+      "type": "string",
+      "description": "Optional description text below the title"
+    },
+    "duration": {
+      "type": "number",
+      "default": 5000,
+      "description": "Auto-dismiss duration in milliseconds. Set to 0 for persistent toasts"
+    },
+    "icon": {
+      "type": "ReactNode",
+      "description": "Custom icon element - overrides variant default"
+    }
+  },
+  "slots": {
+    "icon": {
+      "description": "Icon slot for custom icons per variant or toast"
+    },
+    "closeIcon": {
+      "description": "Custom close button icon"
+    }
+  },
+  "subcomponents": ["ToastProvider", "useToast"],
+  "examples": [
+    {
+      "name": "Basic toast via hook",
+      "code": "const { addToast } = useToast();\naddToast({ title: 'Saved!', description: 'Your changes have been saved.' });"
+    },
+    {
+      "name": "Success toast",
+      "code": "addToast({ title: 'Success', description: 'Operation completed.', variant: 'success' });"
+    },
+    {
+      "name": "Error toast",
+      "code": "addToast({ title: 'Error', description: 'Something went wrong.', variant: 'error' });"
+    },
+    {
+      "name": "Provider setup",
+      "code": "<ToastProvider defaultDuration={5000}>\n  <App />\n</ToastProvider>"
+    }
+  ]
+}

package/components/core/Tooltip/Tooltip.dna.json

@@ -0,0 +1,46 @@
+{
+  "component": "Tooltip",
+  "description": "Token bindings for Tooltip component",
+  "tokenBindings": {
+    "base": {
+      "background": "surface-secondary",
+      "text": "content-inverted",
+      "font": "heading",
+      "borderRadius": "sm",
+      "paddingX": "spacing-sm",
+      "paddingY": "spacing-xs"
+    },
+    "arrow": {
+      "border": "surface-secondary"
+    }
+  },
+  "sizes": {
+    "sm": {
+      "fontSize": "xs"
+    },
+    "md": {
+      "fontSize": "xs"
+    },
+    "lg": {
+      "fontSize": "sm"
+    }
+  },
+  "positions": {
+    "top": {
+      "offset": "mb-2",
+      "arrowPosition": "top-full"
+    },
+    "bottom": {
+      "offset": "mt-2",
+      "arrowPosition": "bottom-full"
+    },
+    "left": {
+      "offset": "mr-2",
+      "arrowPosition": "left-full"
+    },
+    "right": {
+      "offset": "ml-2",
+      "arrowPosition": "right-full"
+    }
+  }
+}

package/components/core/Tooltip/Tooltip.schema.json

@@ -0,0 +1,58 @@
+{
+  "name": "Tooltip",
+  "description": "Contextual hover/focus information overlay positioned relative to a trigger element. Supports multiple positions and delayed display.",
+  "props": {
+    "content": {
+      "type": "ReactNode",
+      "required": true,
+      "description": "Tooltip content to display"
+    },
+    "position": {
+      "type": "enum",
+      "values": ["top", "bottom", "left", "right"],
+      "default": "top",
+      "description": "Position relative to trigger element"
+    },
+    "delay": {
+      "type": "number",
+      "default": 0,
+      "description": "Delay before showing tooltip (ms). Set to 0 for instant display."
+    },
+    "size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "description": "Size preset controlling text size (sm=12px, md=12px, lg=14px)"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes for the wrapper element"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Trigger element that activates the tooltip on hover/focus"
+    },
+    "content": {
+      "description": "Tooltip content (passed via content prop)"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic tooltip",
+      "code": "<Tooltip content=\"Click to submit\"><Button>Submit</Button></Tooltip>"
+    },
+    {
+      "name": "Bottom position",
+      "code": "<Tooltip content=\"More options\" position=\"bottom\"><IconButton icon={<MenuIcon />} /></Tooltip>"
+    },
+    {
+      "name": "With delay",
+      "code": "<Tooltip content=\"Detailed info\" delay={500}><HelpIcon /></Tooltip>"
+    },
+    {
+      "name": "Large size",
+      "code": "<Tooltip content=\"Important action\" size=\"lg\"><Button>Action</Button></Tooltip>"
+    }
+  ]
+}

package/components/core/Web3ActionBar/Web3ActionBar.dna.json

@@ -0,0 +1,23 @@
+{
+  "component": "Web3ActionBar",
+  "description": "Token bindings for Web3ActionBar component",
+  "tokenBindings": {
+    "base": {
+      "background": "surface-primary",
+      "borderTop": "edge-primary",
+      "paddingX": "spacing-sm",
+      "paddingY": "spacing-sm",
+      "gap": "spacing-md"
+    }
+  },
+  "elements": {
+    "walletAddress": {
+      "text": "content-primary",
+      "font": "mono",
+      "fontSize": "xs"
+    },
+    "actionGroup": {
+      "gap": "spacing-sm"
+    }
+  }
+}

package/components/core/Web3ActionBar/Web3ActionBar.schema.json

@@ -0,0 +1,50 @@
+{
+  "name": "Web3ActionBar",
+  "description": "Universal bottom bar for Web3 apps providing wallet connection and blockchain action buttons. Pairs with TabList for hybrid web2/web3 app navigation.",
+  "props": {
+    "isConnected": {
+      "type": "boolean",
+      "required": true,
+      "description": "Whether a wallet is currently connected"
+    },
+    "walletAddress": {
+      "type": "string",
+      "description": "Connected wallet address to display (truncated automatically)"
+    },
+    "onConnect": {
+      "type": "function",
+      "required": true,
+      "description": "Callback when connect button is clicked"
+    },
+    "onDisconnect": {
+      "type": "function",
+      "description": "Callback when disconnect button is clicked"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes for the container"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "App-specific action buttons (My Vault, Place Offering, Stake, etc.) shown when connected"
+    },
+    "disconnectIcon": {
+      "description": "Icon component for the disconnect button"
+    }
+  },
+  "examples": [
+    {
+      "name": "Disconnected state",
+      "code": "<Web3ActionBar isConnected={false} onConnect={handleConnect} />"
+    },
+    {
+      "name": "Connected with actions",
+      "code": "<Web3ActionBar\n  isConnected={true}\n  walletAddress=\"0x1234...5678\"\n  onConnect={handleConnect}\n  onDisconnect={handleDisconnect}\n  disconnectIcon={<CloseIcon />}\n>\n  <Button variant=\"outline\">My Vault</Button>\n  <Button>Place Offering</Button>\n</Web3ActionBar>"
+    },
+    {
+      "name": "Connected minimal",
+      "code": "<Web3ActionBar\n  isConnected={true}\n  walletAddress={walletAddress}\n  onConnect={handleConnect}\n  onDisconnect={handleDisconnect}\n  disconnectIcon={<XIcon />}\n/>"
+    }
+  ]
+}