@rdna/radiants 0.1.0 → 0.1.2

package/components/core/ContextMenu/ContextMenu.schema.json

@@ -0,0 +1,30 @@
+{
+  "name": "ContextMenu",
+  "description": "Right-click context menu with customizable items. Provides a native-feeling context menu experience with support for icons, separators, and destructive actions.",
+  "subcomponents": ["ContextMenuContent", "ContextMenuItem", "ContextMenuSeparator"],
+  "props": {
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes for the trigger container"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Content that triggers context menu on right-click, plus ContextMenuContent with menu items"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic context menu",
+      "code": "<ContextMenu>\n  <div>Right-click me</div>\n  <ContextMenuContent>\n    <ContextMenuItem onClick={() => console.log('Edit')}>Edit</ContextMenuItem>\n    <ContextMenuItem onClick={() => console.log('Copy')}>Copy</ContextMenuItem>\n    <ContextMenuSeparator />\n    <ContextMenuItem onClick={() => console.log('Delete')} destructive>Delete</ContextMenuItem>\n  </ContextMenuContent>\n</ContextMenu>"
+    },
+    {
+      "name": "With icons",
+      "code": "<ContextMenu>\n  <div>Right-click me</div>\n  <ContextMenuContent>\n    <ContextMenuItem icon={<EditIcon />}>Edit</ContextMenuItem>\n    <ContextMenuItem icon={<CopyIcon />}>Copy</ContextMenuItem>\n    <ContextMenuItem icon={<TrashIcon />} destructive>Delete</ContextMenuItem>\n  </ContextMenuContent>\n</ContextMenu>"
+    },
+    {
+      "name": "With disabled items",
+      "code": "<ContextMenu>\n  <div>Right-click me</div>\n  <ContextMenuContent>\n    <ContextMenuItem>Enabled action</ContextMenuItem>\n    <ContextMenuItem disabled>Disabled action</ContextMenuItem>\n  </ContextMenuContent>\n</ContextMenu>"
+    }
+  ]
+}

package/components/core/CountdownTimer/CountdownTimer.dna.json

@@ -0,0 +1,79 @@
+{
+  "component": "CountdownTimer",
+  "description": "Token bindings for CountdownTimer component variants",
+  "tokenBindings": {
+    "base": {
+      "textAlign": "center",
+      "font": "mono"
+    },
+    "default": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "padding": "spacing-md",
+      "borderRadius": "md"
+    },
+    "compact": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "paddingX": "spacing-sm",
+      "paddingY": "spacing-xs",
+      "borderRadius": "sm"
+    },
+    "large": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "padding": "spacing-lg",
+      "borderRadius": "md",
+      "shadow": "card"
+    }
+  },
+  "elements": {
+    "label": {
+      "font": "mono",
+      "textOpacity": "60%"
+    },
+    "timer": {
+      "display": "flex",
+      "alignItems": "center",
+      "justifyContent": "center"
+    },
+    "segment": {
+      "display": "flex",
+      "flexDirection": "column",
+      "alignItems": "center"
+    },
+    "segmentLarge": {
+      "background": "surface-muted",
+      "border": "edge-primary",
+      "borderRadius": "sm",
+      "paddingX": "spacing-sm",
+      "paddingY": "spacing-xs"
+    },
+    "value": {
+      "font": "heading",
+      "text": "content-primary",
+      "fontVariantNumeric": "tabular-nums"
+    },
+    "unit": {
+      "font": "mono",
+      "textTransform": "uppercase",
+      "textOpacity": "50%"
+    },
+    "separator": {
+      "font": "heading",
+      "textOpacity": "40%"
+    },
+    "endedMessage": {
+      "font": "heading",
+      "textOpacity": "60%"
+    }
+  },
+  "states": {
+    "ended": {
+      "textOpacity": "60%"
+    },
+    "upcoming": {
+      "labelText": "Starts in"
+    }
+  }
+}

package/components/core/CountdownTimer/CountdownTimer.schema.json

@@ -0,0 +1,71 @@
+{
+  "name": "CountdownTimer",
+  "description": "Live countdown timer for auction and event countdowns. Supports multiple size variants with automatic status detection (active, ended, upcoming).",
+  "props": {
+    "endTime": {
+      "type": "number | Date",
+      "required": true,
+      "description": "Target timestamp (Unix ms or Date object) when the countdown ends"
+    },
+    "startTime": {
+      "type": "number | Date",
+      "description": "Optional start time for detecting 'upcoming' status before countdown begins"
+    },
+    "variant": {
+      "type": "enum",
+      "values": ["default", "compact", "large"],
+      "default": "default",
+      "description": "Size variant controlling container, text sizes, and spacing"
+    },
+    "label": {
+      "type": "string",
+      "description": "Label text shown above the timer display"
+    },
+    "onComplete": {
+      "type": "function",
+      "description": "Callback fired when countdown reaches zero"
+    },
+    "endedMessage": {
+      "type": "string",
+      "default": "Ended",
+      "description": "Custom message displayed when countdown has ended"
+    },
+    "upcomingMessage": {
+      "type": "string",
+      "default": "Starting soon",
+      "description": "Custom message displayed when countdown has not yet started"
+    },
+    "showDays": {
+      "type": "boolean",
+      "default": true,
+      "description": "Show days segment when remaining time exceeds 24 hours"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Default countdown",
+      "code": "<CountdownTimer endTime={Date.now() + 3600000} />"
+    },
+    {
+      "name": "Countdown with label",
+      "code": "<CountdownTimer endTime={auctionEndTime} label=\"Auction ends in\" />"
+    },
+    {
+      "name": "Compact variant",
+      "code": "<CountdownTimer variant=\"compact\" endTime={deadline} />"
+    },
+    {
+      "name": "Large variant with callback",
+      "code": "<CountdownTimer variant=\"large\" endTime={eventTime} onComplete={() => alert('Time is up!')} />"
+    },
+    {
+      "name": "Upcoming countdown",
+      "code": "<CountdownTimer startTime={futureStart} endTime={futureEnd} />"
+    },
+    {
+      "name": "Custom ended message",
+      "code": "<CountdownTimer endTime={pastTime} endedMessage=\"Auction closed\" />"
+    }
+  ]
+}

package/components/core/Dialog/Dialog.dna.json

@@ -0,0 +1,28 @@
+{
+  "component": "Dialog",
+  "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/Dialog/Dialog.schema.json

@@ -0,0 +1,40 @@
+{
+  "name": "Dialog",
+  "description": "Modal dialog with overlay for focused user interactions. Supports controlled and uncontrolled states with keyboard accessibility.",
+  "subcomponents": ["DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "DialogDescription", "DialogBody", "DialogFooter", "DialogClose"],
+  "props": {
+    "open": {
+      "type": "boolean",
+      "description": "Controlled open state for the dialog"
+    },
+    "defaultOpen": {
+      "type": "boolean",
+      "default": false,
+      "description": "Default open state for uncontrolled usage"
+    },
+    "onOpenChange": {
+      "type": "function",
+      "description": "Callback when open state changes"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Dialog subcomponents (DialogTrigger, DialogContent, etc.)"
+    }
+  },
+  "variants": {},
+  "examples": [
+    {
+      "name": "Basic dialog",
+      "code": "<Dialog>\n  <DialogTrigger asChild>\n    <Button>Open Dialog</Button>\n  </DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Dialog Title</DialogTitle>\n      <DialogDescription>This is a description of the dialog.</DialogDescription>\n    </DialogHeader>\n    <DialogBody>\n      <p>Dialog content goes here.</p>\n    </DialogBody>\n    <DialogFooter>\n      <DialogClose asChild>\n        <Button variant=\"outline\">Cancel</Button>\n      </DialogClose>\n      <Button>Confirm</Button>\n    </DialogFooter>\n  </DialogContent>\n</Dialog>"
+    },
+    {
+      "name": "Controlled dialog",
+      "code": "<Dialog open={isOpen} onOpenChange={setIsOpen}>\n  <DialogTrigger asChild>\n    <Button>Settings</Button>\n  </DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Settings</DialogTitle>\n    </DialogHeader>\n    <DialogBody>\n      <p>Configure your preferences.</p>\n    </DialogBody>\n    <DialogFooter>\n      <Button onClick={() => setIsOpen(false)}>Save</Button>\n    </DialogFooter>\n  </DialogContent>\n</Dialog>"
+    },
+    {
+      "name": "Simple confirmation dialog",
+      "code": "<Dialog>\n  <DialogTrigger asChild>\n    <Button variant=\"outline\">Delete</Button>\n  </DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Confirm Deletion</DialogTitle>\n      <DialogDescription>Are you sure you want to delete this item?</DialogDescription>\n    </DialogHeader>\n    <DialogFooter>\n      <DialogClose asChild>\n        <Button variant=\"outline\">Cancel</Button>\n      </DialogClose>\n      <Button>Delete</Button>\n    </DialogFooter>\n  </DialogContent>\n</Dialog>"
+    }
+  ]
+}

package/components/core/Divider/Divider.dna.json

@@ -0,0 +1,16 @@
+{
+  "component": "Divider",
+  "description": "Token bindings for Divider component variants",
+  "tokenBindings": {
+    "base": {
+      "border": "edge-primary/20",
+      "lineHeight": "2px"
+    },
+    "decorated": {
+      "lineColor": "edge-primary/20",
+      "ornamentBackground": "action-primary",
+      "ornamentBorder": "edge-primary"
+    }
+  },
+  "states": {}
+}

package/components/core/Divider/Divider.schema.json

@@ -0,0 +1,41 @@
+{
+  "name": "Divider",
+  "description": "Visual separator for content sections. Supports horizontal and vertical orientations with solid, dashed, or decorated styling.",
+  "props": {
+    "orientation": {
+      "type": "enum",
+      "values": ["horizontal", "vertical"],
+      "default": "horizontal",
+      "description": "Direction of the divider line"
+    },
+    "variant": {
+      "type": "enum",
+      "values": ["solid", "dashed", "decorated"],
+      "default": "solid",
+      "description": "Visual style of the divider. Decorated adds a centered diamond ornament."
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes for customization"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Horizontal solid",
+      "code": "<Divider />"
+    },
+    {
+      "name": "Horizontal dashed",
+      "code": "<Divider variant=\"dashed\" />"
+    },
+    {
+      "name": "Decorated with diamond",
+      "code": "<Divider variant=\"decorated\" />"
+    },
+    {
+      "name": "Vertical divider",
+      "code": "<Divider orientation=\"vertical\" />"
+    }
+  ]
+}

package/components/core/DropdownMenu/DropdownMenu.dna.json

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

package/components/core/DropdownMenu/DropdownMenu.schema.json

@@ -0,0 +1,55 @@
+{
+  "name": "DropdownMenu",
+  "description": "Dropdown menu triggered by a button or custom element. Provides accessible menu navigation with support for icons, separators, labels, and destructive actions.",
+  "subcomponents": [
+    "DropdownMenuTrigger",
+    "DropdownMenuContent",
+    "DropdownMenuItem",
+    "DropdownMenuSeparator",
+    "DropdownMenuLabel"
+  ],
+  "props": {
+    "open": {
+      "type": "boolean",
+      "description": "Controlled open state"
+    },
+    "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": ["bottom-start", "bottom-end", "top-start", "top-end"],
+      "default": "bottom-start",
+      "description": "Position of the dropdown relative to the trigger"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "DropdownMenuTrigger and DropdownMenuContent components"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic dropdown menu",
+      "code": "<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button>Open Menu</Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuItem onClick={() => console.log('Edit')}>Edit</DropdownMenuItem>\n    <DropdownMenuItem onClick={() => console.log('Copy')}>Copy</DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem onClick={() => console.log('Delete')} destructive>Delete</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+    },
+    {
+      "name": "With labels",
+      "code": "<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button>Options</Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuLabel>Actions</DropdownMenuLabel>\n    <DropdownMenuItem>Edit</DropdownMenuItem>\n    <DropdownMenuItem>Duplicate</DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuLabel>Danger Zone</DropdownMenuLabel>\n    <DropdownMenuItem destructive>Delete</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+    },
+    {
+      "name": "Positioned menu",
+      "code": "<DropdownMenu position=\"bottom-end\">\n  <DropdownMenuTrigger asChild>\n    <Button iconOnly><MoreIcon /></Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuItem>Settings</DropdownMenuItem>\n    <DropdownMenuItem>Help</DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>Log out</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+    },
+    {
+      "name": "With disabled items",
+      "code": "<DropdownMenu>\n  <DropdownMenuTrigger asChild>\n    <Button>Actions</Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuItem>Available action</DropdownMenuItem>\n    <DropdownMenuItem disabled>Unavailable action</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>"
+    }
+  ]
+}

package/components/core/HelpPanel/HelpPanel.dna.json

@@ -0,0 +1,24 @@
+{
+  "component": "HelpPanel",
+  "tokenBindings": {
+    "overlay": {
+      "background": "surface-secondary/20"
+    },
+    "panel": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "shadow": "card-lg"
+    },
+    "header": {
+      "border": "edge-primary",
+      "text": "content-primary"
+    },
+    "closeButton": {
+      "text": "content-primary/50",
+      "hoverText": "content-primary"
+    },
+    "content": {
+      "text": "content-primary"
+    }
+  }
+}

package/components/core/HelpPanel/HelpPanel.schema.json

@@ -0,0 +1,47 @@
+{
+  "name": "HelpPanel",
+  "description": "Slide-in help panel that appears from the right side of the window. Used to display contextual help content within app windows.",
+  "props": {
+    "isOpen": {
+      "type": "boolean",
+      "required": true,
+      "description": "Whether the panel is open"
+    },
+    "onClose": {
+      "type": "function",
+      "required": true,
+      "description": "Callback when panel should close"
+    },
+    "title": {
+      "type": "string",
+      "default": "Help",
+      "description": "Optional title for the help panel"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes to apply"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "Help content to display"
+    },
+    "closeButton": {
+      "description": "Custom close button/icon slot - renders your own close button component"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic help panel",
+      "code": "<HelpPanel isOpen={showHelp} onClose={() => setShowHelp(false)}>\n  <p>This is some helpful content.</p>\n</HelpPanel>"
+    },
+    {
+      "name": "Custom title",
+      "code": "<HelpPanel isOpen={showHelp} onClose={() => setShowHelp(false)} title=\"Getting Started\">\n  <p>Welcome to the app!</p>\n</HelpPanel>"
+    },
+    {
+      "name": "Custom close button",
+      "code": "<HelpPanel isOpen={showHelp} onClose={() => setShowHelp(false)} closeButton={<XIcon />}>\n  <p>Content with custom close icon.</p>\n</HelpPanel>"
+    }
+  ]
+}

package/components/core/Input/Input.dna.json

@@ -0,0 +1,33 @@
+{
+  "component": "Input",
+  "tokenBindings": {
+    "default": {
+      "background": "surface-primary",
+      "text": "content-primary",
+      "border": "edge-primary",
+      "placeholder": "content-muted",
+      "focusRing": "edge-focus"
+    },
+    "error": {
+      "border": "status-error",
+      "focusRing": "status-error"
+    }
+  },
+  "sizes": {
+    "sm": {
+      "height": "2rem",
+      "padding": "0.5rem",
+      "fontSize": "0.875rem"
+    },
+    "md": {
+      "height": "2.5rem",
+      "padding": "0.75rem",
+      "fontSize": "1rem"
+    },
+    "lg": {
+      "height": "3rem",
+      "padding": "1rem",
+      "fontSize": "1rem"
+    }
+  }
+}

package/components/core/Input/Input.schema.json

@@ -0,0 +1,33 @@
+{
+  "name": "Input",
+  "description": "Text input field with optional icon and error state",
+  "props": {
+    "size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "description": "Size preset for input height and padding"
+    },
+    "error": {
+      "type": "boolean",
+      "default": false,
+      "description": "Shows error state styling"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "default": false,
+      "description": "Makes input take full container width"
+    },
+    "iconName": {
+      "type": "string",
+      "description": "Icon name for leading icon slot"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disables the input"
+    }
+  },
+  "slots": ["icon"],
+  "relatedComponents": ["TextArea", "Label"]
+}

package/components/core/MockStatesPopover/MockStatesPopover.dna.json

@@ -0,0 +1,33 @@
+{
+  "component": "MockStatesPopover",
+  "tokenBindings": {
+    "popover": {
+      "background": "surface-primary",
+      "border": "edge-primary"
+    },
+    "header": {
+      "text": "content-primary",
+      "border": "edge-primary/20"
+    },
+    "content": {
+      "text": "content-primary"
+    },
+    "categoryLabel": {
+      "text": "content-secondary"
+    },
+    "stateButton": {
+      "text": "content-primary",
+      "description": "content-secondary",
+      "hoverBackground": "content-primary/5"
+    },
+    "stateButtonActive": {
+      "background": "action-primary",
+      "text": "content-primary"
+    },
+    "footer": {
+      "text": "content-secondary",
+      "background": "content-primary/5",
+      "border": "edge-primary/20"
+    }
+  }
+}

package/components/core/MockStatesPopover/MockStatesPopover.schema.json

@@ -0,0 +1,80 @@
+{
+  "name": "MockStatesPopover",
+  "description": "Development-only popover for toggling between mock states. Displays categorized mock state presets that can be applied to test different UI scenarios.",
+  "subcomponents": ["MockStatesPopoverTrigger", "MockStatesPopoverContent"],
+  "props": {
+    "isOpen": {
+      "type": "boolean",
+      "required": true,
+      "description": "Whether the popover is open"
+    },
+    "onClose": {
+      "type": "function",
+      "required": true,
+      "description": "Callback when the popover should close"
+    },
+    "mockStates": {
+      "type": "array",
+      "required": true,
+      "description": "Array of mock state definitions with id, name, description, category, and optional icon"
+    },
+    "activeMockState": {
+      "type": "string",
+      "description": "Currently active mock state ID"
+    },
+    "onSelectState": {
+      "type": "function",
+      "required": true,
+      "description": "Callback when a mock state is selected, receives the state ID"
+    },
+    "categories": {
+      "type": "array",
+      "description": "Categories to display (in order). States are grouped by category. Auto-derived from mockStates if not provided."
+    },
+    "title": {
+      "type": "string",
+      "default": "Mock States",
+      "description": "Title shown in the header"
+    },
+    "footerText": {
+      "type": "string",
+      "default": "Dev mode only",
+      "description": "Footer text displayed at the bottom"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes for the popover container"
+    }
+  },
+  "variants": {
+    "state": {
+      "values": ["open", "closed"],
+      "description": "Visibility state of the popover"
+    }
+  },
+  "slots": {
+    "header": {
+      "description": "Header area with title and close button"
+    },
+    "content": {
+      "description": "Scrollable content area with categorized state buttons"
+    },
+    "footer": {
+      "description": "Footer area with optional text"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic usage",
+      "code": "<MockStatesPopover\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  mockStates={[\n    { id: 'wallet-connected', name: 'Connected', description: 'Wallet is connected', category: 'wallet' },\n    { id: 'wallet-disconnected', name: 'Disconnected', description: 'No wallet', category: 'wallet' }\n  ]}\n  activeMockState={activeState}\n  onSelectState={setActiveState}\n/>"
+    },
+    {
+      "name": "With custom categories",
+      "code": "<MockStatesPopover\n  isOpen={isOpen}\n  onClose={handleClose}\n  mockStates={mockStates}\n  activeMockState={activeState}\n  onSelectState={handleSelect}\n  categories={[\n    { id: 'wallet', label: 'Wallet States' },\n    { id: 'auction', label: 'Auction States' }\n  ]}\n/>"
+    },
+    {
+      "name": "With icons",
+      "code": "<MockStatesPopover\n  isOpen={isOpen}\n  onClose={handleClose}\n  mockStates={[\n    { id: 'success', name: 'Success', description: 'Operation succeeded', category: 'status', icon: '\\u2713' },\n    { id: 'error', name: 'Error', description: 'Operation failed', category: 'status', icon: '\\u2717' }\n  ]}\n  onSelectState={handleSelect}\n/>"
+    }
+  ]
+}

package/components/core/Popover/Popover.dna.json

@@ -0,0 +1,10 @@
+{
+  "component": "Popover",
+  "tokenBindings": {
+    "content": {
+      "background": "surface-primary",
+      "border": "edge-primary",
+      "shadow": "shadow-card"
+    }
+  }
+}