✅ registry update

Author: ariflogs

public/r/checkbox.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "components/retroui/Checkbox.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\n\nconst checkboxVariants = cva(\"border-2\", {\n  variants: {\n    variant: {\n      default: \"data-[state=checked]:bg-primary\",\n      outline: \"\",\n      solid:\n        \"data-[state=checked]:bg-foreground data-[state=checked]:text-background\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nexport const Checkbox = ({\n  className,\n  size,\n  variant,\n  ...props\n}: CheckboxProps) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      checkboxVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"h-full w-full\">\n      <Check className=\"h-full w-full\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n);\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\n\nconst checkboxVariants = cva(\"border-2\", {\n  variants: {\n    variant: {\n      default: \"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground \",\n      outline: \"\",\n      solid:\n        \"data-[state=checked]:bg-foreground data-[state=checked]:text-background\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nexport const Checkbox = ({\n  className,\n  size,\n  variant,\n  ...props\n}: CheckboxProps) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      checkboxVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"h-full w-full\">\n      <Check className=\"h-full w-full\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n);\n",
       "type": "registry:component",
       "target": "components/retroui/Checkbox.tsx"
     }

public/r/radio.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/retroui/Radio.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport * as RadioPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst radioVariants = cva(\"border-black border-2\", {\n  variants: {\n    variant: {\n      default: \"\",\n      outline: \"\",\n      solid: \"\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst radioIndicatorVariants = cva(\"flex \", {\n  variants: {\n    variant: {\n      default: \"bg-primary border-2 border-black\",\n      outline: \"border-2 border-black\",\n      solid: \"bg-black\",\n    },\n    size: {\n      sm: \"h-2 w-2\",\n      md: \"h-2.5 w-2.5\",\n      lg: \"h-3.5 w-3.5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface RadioGroupProps\n  extends React.ComponentProps<typeof RadioPrimitive.Root> {}\n\nexport const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (\n  <RadioPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} />\n);\n\ninterface RadioProps\n  extends React.ComponentProps<typeof RadioPrimitive.Item>,\n    VariantProps<typeof radioVariants> {}\n\nexport const RadioItem = ({\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: RadioProps) => (\n  <RadioPrimitive.Item\n    {...props}\n    className={cn(\n      radioVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n  >\n    <RadioPrimitive.Indicator className=\"flex justify-center items-center\">\n      <span className={radioIndicatorVariants({ size, variant })}></span>\n    </RadioPrimitive.Indicator>\n    {children}\n  </RadioPrimitive.Item>\n);\n\nconst RadioComponent = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport { RadioComponent as RadioGroup };\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport * as RadioPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst radioVariants = cva(\"border-border border-2\", {\n  variants: {\n    variant: {\n      default: \"\",\n      outline: \"\",\n      solid: \"\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst radioIndicatorVariants = cva(\"flex \", {\n  variants: {\n    variant: {\n      default: \"bg-primary border-2 border-border\",\n      outline: \"border-2 border-border\",\n      solid: \"bg-border\",\n    },\n    size: {\n      sm: \"h-2 w-2\",\n      md: \"h-2.5 w-2.5\",\n      lg: \"h-3.5 w-3.5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface RadioGroupProps\n  extends React.ComponentProps<typeof RadioPrimitive.Root> {}\n\nexport const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (\n  <RadioPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} />\n);\n\ninterface RadioProps\n  extends React.ComponentProps<typeof RadioPrimitive.Item>,\n    VariantProps<typeof radioVariants> {}\n\nexport const RadioItem = ({\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: RadioProps) => (\n  <RadioPrimitive.Item\n    {...props}\n    className={cn(\n      radioVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n  >\n    <RadioPrimitive.Indicator className=\"flex justify-center items-center\">\n      <span className={radioIndicatorVariants({ size, variant })}></span>\n    </RadioPrimitive.Indicator>\n    {children}\n  </RadioPrimitive.Item>\n);\n\nconst RadioComponent = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport { RadioComponent as RadioGroup };\n",
       "type": "registry:component",
       "target": "components/retroui/Radio.tsx"
     }

public/r/select.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/retroui/Select.tsx",
-      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-black bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"ml-2 h-4 w-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: SelectPrimitive.SelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"relative z-50 min-w-[8rem] overflow-hidden border border-black bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.Viewport\n          className={cn(\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectItemProps) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4 text-foreground\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n  </SelectPrimitive.Item>\n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Content: SelectContent,\n  Group: SelectGroup,\n  Item: SelectItem,\n  Label: SelectLabel,\n  Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n",
+      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-border bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"ml-2 h-4 w-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: SelectPrimitive.SelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"relative z-50 min-w-[8rem] overflow-hidden border border-border bg-background text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.Viewport\n          className={cn(\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectItemProps) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary hover:text-primary-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4 text-foreground\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n  </SelectPrimitive.Item>\n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Content: SelectContent,\n  Group: SelectGroup,\n  Item: SelectItem,\n  Label: SelectLabel,\n  Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n",
       "type": "registry:component",
       "target": "components/retroui/Select.tsx"
     }

public/r/tab-style-default.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "preview/components/tab-style-default.tsx",
-      "content": "import { Tab, TabGroup, TabList, TabPanel, TabPanels } from \"@headlessui/react\";\n\nexport default function TabStyleDefault() {\n  return (\n    <TabGroup>\n      <TabList>\n        <Tab className=\"px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden\">\n          Home\n        </Tab>\n        <Tab className=\"px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden\">\n          About\n        </Tab>\n        <Tab className=\"px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden\">\n          Contact\n        </Tab>\n      </TabList>\n      <TabPanels className=\"border-2 border-black mt-2 p-4\">\n        <TabPanel>\n          Welcome to RetroUI, a retro styled UI library built with React,\n          Tailwind CSS & Headless UI.\n        </TabPanel>\n        <TabPanel>This is the about section!</TabPanel>\n        <TabPanel>And, this is the contact section!</TabPanel>\n      </TabPanels>\n    </TabGroup>\n  );\n}\n",
+      "content": "import { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList } from \"@/components/retroui/Tab\";\n\nexport default function TabStyleDefault() {\n  return (\n    <Tabs>\n      <TabsTriggerList>\n        <TabsTrigger>Home</TabsTrigger>\n        <TabsTrigger>About</TabsTrigger>\n        <TabsTrigger>Contact</TabsTrigger>\n      </TabsTriggerList>\n      <TabsPanels>\n        <TabsContent>\n          Welcome to RetroUI, a retro styled UI library built with React,\n          Tailwind CSS & Headless UI.\n        </TabsContent>\n        <TabsContent>This is the about section!</TabsContent>\n        <TabsContent>And, this is the contact section!</TabsContent>\n      </TabsPanels>\n    </Tabs>\n  );\n}\n",
       "type": "registry:block",
       "target": "components/retroui/preview/tab-style-default.tsx"
     }

public/r/tab.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/retroui/Tab.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  Tab,\n  TabGroup,\n  TabList,\n  TabListProps,\n  TabPanel,\n  TabPanelProps,\n  TabPanels,\n  TabProps,\n} from \"@headlessui/react\";\n\nconst Tabs = TabGroup;\nconst TabsPanels = TabPanels;\n\ninterface ITabsTriggerList extends TabListProps {\n  className?: string;\n}\nconst TabsTriggerList = ({\n  children,\n  className,\n  ...props\n}: ITabsTriggerList) => {\n  return (\n    <TabList className={cn(\"flex flex-row space-x-2\", className)} {...props}>\n      {children}\n    </TabList>\n  );\n};\n\ninterface ITabsTrigger extends TabProps {\n  className?: string;\n}\nconst TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {\n  return (\n    <Tab\n      className={cn(\n        \"px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Tab>\n  );\n};\n\ninterface ITabsContent extends TabPanelProps {\n  className?: string;\n}\nconst TabsContent = ({ children, className, ...props }: ITabsContent) => {\n  return (\n    <TabPanel\n      className={cn(\"border-2 border-black mt-2 p-4\", className)}\n      {...props}\n    >\n      {children}\n    </TabPanel>\n  );\n};\n\nexport { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList };\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport {\n  Tab,\n  TabGroup,\n  TabList,\n  TabListProps,\n  TabPanel,\n  TabPanelProps,\n  TabPanels,\n  TabProps,\n} from \"@headlessui/react\";\n\nconst Tabs = TabGroup;\nconst TabsPanels = TabPanels;\n\ninterface ITabsTriggerList extends TabListProps {\n  className?: string;\n}\nconst TabsTriggerList = ({\n  children,\n  className,\n  ...props\n}: ITabsTriggerList) => {\n  return (\n    <TabList className={cn(\"flex flex-row space-x-2\", className)} {...props}>\n      {children}\n    </TabList>\n  );\n};\n\ninterface ITabsTrigger extends TabProps {\n  className?: string;\n}\nconst TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {\n  return (\n    <Tab\n      className={cn(\n        \"px-4 py-1 border-2 border-transparent data-selected:border-border data-selected:bg-primary data-selected:text-primary-foreground data-selected:font-semibold focus:outline-hidden\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Tab>\n  );\n};\n\ninterface ITabsContent extends TabPanelProps {\n  className?: string;\n}\nconst TabsContent = ({ children, className, ...props }: ITabsContent) => {\n  return (\n    <TabPanel\n      className={cn(\"border-2 border-border mt-2 p-4\", className)}\n      {...props}\n    >\n      {children}\n    </TabPanel>\n  );\n};\n\nexport { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList };\n",
       "type": "registry:component",
       "target": "components/retroui/Tab.tsx"
     }

public/r/textarea-style-default.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "preview/components/textarea-style-default.tsx",
-      "content": "export default function TextareaStyleDefault() {\n  return (\n    <textarea\n      rows={4}\n      placeholder=\"type something...\"\n      className=\"px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs\"\n    />\n  );\n}\n",
+      "content": "import { Textarea } from \"@/components/retroui/Textarea\";\n\nexport default function TextareaStyleDefault() {\n  return (\n    <Textarea\n      rows={4}\n      placeholder=\"type something...\"\n      className=\"px-4 py-2 w-full border-2 shadow-md transition focus:outline-hidden focus:shadow-xs\"\n    />\n  );\n}\n",
       "type": "registry:block",
       "target": "components/retroui/preview/textarea-style-default.tsx"
     }