feat(ui): add palette Select and radio card particles

apps/ui/public/r/p-radio-group-10.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-radio-group-10",
+  "description": "Color palette radio cards in a four-column grid",
+  "registryDependencies": [
+    "@coss/radio-group",
+    "@coss/tooltip"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-radio-group-10.tsx",
+      "content": "\"use client\";\n\nimport { RadioGroup, RadioPrimitive } from \"@/registry/default/ui/radio-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nconst palettes = [\n  { label: \"Mono\", value: \"mono\", colors: [\"#18181B\", \"#A1A1AA\", \"#FAFAFA\"] },\n  {\n    label: \"Porcelain\",\n    value: \"porcelain\",\n    colors: [\"#AA8F73\", \"#C8B79A\", \"#889FA3\"],\n  },\n  { label: \"Ember\", value: \"ember\", colors: [\"#B94724\", \"#DB8649\", \"#EDD0A0\"] },\n  { label: \"Terra\", value: \"terra\", colors: [\"#A64F3C\", \"#C78F70\", \"#896577\"] },\n  { label: \"Rosé\", value: \"rose\", colors: [\"#9B3F60\", \"#C98693\", \"#E9B9A5\"] },\n  { label: \"Dusk\", value: \"dusk\", colors: [\"#BE835B\", \"#8E7C9F\", \"#6E97AE\"] },\n  {\n    label: \"Orchard\",\n    value: \"orchard\",\n    colors: [\"#63794B\", \"#ADA66B\", \"#83A18A\"],\n  },\n  {\n    label: \"Petrol\",\n    value: \"petrol\",\n    colors: [\"#326A76\", \"#C97868\", \"#C9AD81\"],\n  },\n  {\n    label: \"Lagoon\",\n    value: \"lagoon\",\n    colors: [\"#247E92\", \"#4CAFA3\", \"#B6D8C7\"],\n  },\n  {\n    label: \"Borealis\",\n    value: \"borealis\",\n    colors: [\"#267F69\", \"#527FB8\", \"#9A83BF\"],\n  },\n  {\n    label: \"Cobalt\",\n    value: \"cobalt\",\n    colors: [\"#244E9A\", \"#607DA9\", \"#B5C9DD\"],\n  },\n  { label: \"Iris\", value: \"iris\", colors: [\"#7361A3\", \"#AC87A5\", \"#DBC3CA\"] },\n];\n\nexport default function Particle() {\n  return (\n    <fieldset className=\"w-full space-y-3\">\n      <legend className=\"font-medium text-sm\">Color palette</legend>\n      <TooltipProvider>\n        <RadioGroup\n          aria-label=\"Color palette\"\n          className=\"grid grid-cols-4 gap-2\"\n          defaultValue=\"dusk\"\n        >\n          {palettes.map((palette) => (\n            <Tooltip key={palette.value} disableHoverablePopup>\n              <TooltipTrigger\n                render={\n                  <RadioPrimitive.Root\n                    aria-label={palette.label}\n                    value={palette.value}\n                    className=\"flex items-center justify-center rounded-lg border p-2.5 outline-none hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:border-primary/48 data-checked:bg-accent/50\"\n                  />\n                }\n              >\n                <span aria-hidden=\"true\" className=\"flex shrink-0 -space-x-1\">\n                  {palette.colors.map((color) => (\n                    <span\n                      key={color}\n                      className=\"size-4 rounded-full ring-1 ring-background\"\n                      style={{ backgroundColor: color }}\n                    />\n                  ))}\n                </span>\n              </TooltipTrigger>\n              <TooltipPopup>{palette.label}</TooltipPopup>\n            </Tooltip>\n          ))}\n        </RadioGroup>\n      </TooltipProvider>\n    </fieldset>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-96"
+  },
+  "categories": [
+    "radio group",
+    "tooltip"
+  ],
+  "type": "registry:block"
+}

apps/ui/public/r/p-select-24.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-select-24",
+  "description": "Color palette select with three-color swatches",
+  "registryDependencies": [
+    "@coss/select"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-select-24.tsx",
+      "content": "\"use client\";\n\nimport {\n  Select,\n  SelectItem,\n  SelectLabel,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\";\n\nconst palettes = [\n  { label: \"Mono\", value: \"mono\", colors: [\"#18181B\", \"#A1A1AA\", \"#FAFAFA\"] },\n  {\n    label: \"Porcelain\",\n    value: \"porcelain\",\n    colors: [\"#AA8F73\", \"#C8B79A\", \"#889FA3\"],\n  },\n  { label: \"Ember\", value: \"ember\", colors: [\"#B94724\", \"#DB8649\", \"#EDD0A0\"] },\n  { label: \"Terra\", value: \"terra\", colors: [\"#A64F3C\", \"#C78F70\", \"#896577\"] },\n  { label: \"Rosé\", value: \"rose\", colors: [\"#9B3F60\", \"#C98693\", \"#E9B9A5\"] },\n  { label: \"Dusk\", value: \"dusk\", colors: [\"#BE835B\", \"#8E7C9F\", \"#6E97AE\"] },\n  {\n    label: \"Orchard\",\n    value: \"orchard\",\n    colors: [\"#63794B\", \"#ADA66B\", \"#83A18A\"],\n  },\n  {\n    label: \"Petrol\",\n    value: \"petrol\",\n    colors: [\"#326A76\", \"#C97868\", \"#C9AD81\"],\n  },\n  {\n    label: \"Lagoon\",\n    value: \"lagoon\",\n    colors: [\"#247E92\", \"#4CAFA3\", \"#B6D8C7\"],\n  },\n  {\n    label: \"Borealis\",\n    value: \"borealis\",\n    colors: [\"#267F69\", \"#527FB8\", \"#9A83BF\"],\n  },\n  {\n    label: \"Cobalt\",\n    value: \"cobalt\",\n    colors: [\"#244E9A\", \"#607DA9\", \"#B5C9DD\"],\n  },\n  { label: \"Iris\", value: \"iris\", colors: [\"#7361A3\", \"#AC87A5\", \"#DBC3CA\"] },\n];\n\nexport default function Particle() {\n  return (\n    <Select\n      defaultValue={palettes[5]}\n      items={palettes}\n      itemToStringValue={(palette) => palette.value}\n    >\n      <SelectLabel>Color palette</SelectLabel>\n      <SelectTrigger>\n        <SelectValue>\n          {(palette: (typeof palettes)[number]) => (\n            <span className=\"flex items-center gap-2\">\n              <span aria-hidden=\"true\" className=\"flex shrink-0 -space-x-1\">\n                {palette.colors.map((color) => (\n                  <span\n                    key={color}\n                    className=\"size-4 rounded-full ring-1 ring-background\"\n                    style={{ backgroundColor: color }}\n                  />\n                ))}\n              </span>\n              <span className=\"truncate\">{palette.label}</span>\n            </span>\n          )}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectPopup>\n        {palettes.map((palette) => (\n          <SelectItem key={palette.value} value={palette}>\n            <span className=\"flex items-center gap-2\">\n              <span aria-hidden=\"true\" className=\"flex shrink-0 -space-x-1\">\n                {palette.colors.map((color) => (\n                  <span\n                    key={color}\n                    className=\"size-4 rounded-full ring-1 ring-background\"\n                    style={{ backgroundColor: color }}\n                  />\n                ))}\n              </span>\n              {palette.label}\n            </span>\n          </SelectItem>\n        ))}\n      </SelectPopup>\n    </Select>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "meta": {
+    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+  },
+  "categories": [
+    "select"
+  ],
+  "type": "registry:block"
+}

apps/ui/public/r/registry.json

@@ -8824,6 +8824,28 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "radio group",
+        "tooltip"
+      ],
+      "description": "Color palette radio cards in a four-column grid",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-10.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-96"
+      },
+      "name": "p-radio-group-10",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "scroll area"
@@ -9365,6 +9387,26 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "select"
+      ],
+      "description": "Color palette select with three-color swatches",
+      "files": [
+        {
+          "path": "registry/default/particles/p-select-24.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+      },
+      "name": "p-select-24",
+      "registryDependencies": [
+        "@coss/select"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "select"

apps/ui/registry.json

@@ -8824,6 +8824,28 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "radio group",
+        "tooltip"
+      ],
+      "description": "Color palette radio cards in a four-column grid",
+      "files": [
+        {
+          "path": "registry/default/particles/p-radio-group-10.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-96"
+      },
+      "name": "p-radio-group-10",
+      "registryDependencies": [
+        "@coss/radio-group",
+        "@coss/tooltip"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "scroll area"
@@ -9365,6 +9387,26 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "select"
+      ],
+      "description": "Color palette select with three-color swatches",
+      "files": [
+        {
+          "path": "registry/default/particles/p-select-24.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
+      },
+      "name": "p-select-24",
+      "registryDependencies": [
+        "@coss/select"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "select"

apps/ui/registry/__index__.tsx

@@ -7603,6 +7603,24 @@ export const Index: Record<string, any> = {
     categories: ["radio group","segmented control"],
     meta: undefined,
   },
+  "p-radio-group-10": {
+    name: "p-radio-group-10",
+    description: "Color palette radio cards in a four-column grid",
+    type: "registry:block",
+    registryDependencies: ["@coss/radio-group","@coss/tooltip"],
+    files: [{
+      path: "registry/default/particles/p-radio-group-10.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-radio-group-10.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["radio group","tooltip"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-96"},
+  },
   "p-scroll-area-1": {
     name: "p-scroll-area-1",
     description: "Basic scroll area",
@@ -8089,6 +8107,24 @@ export const Index: Record<string, any> = {
     categories: ["select"],
     meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
   },
+  "p-select-24": {
+    name: "p-select-24",
+    description: "Color palette select with three-color swatches",
+    type: "registry:block",
+    registryDependencies: ["@coss/select"],
+    files: [{
+      path: "registry/default/particles/p-select-24.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-select-24.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["select"],
+    meta: {"className":"**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"},
+  },
   "p-select-11": {
     name: "p-select-11",
     description: "Select in form",

apps/ui/registry/default/particles/p-radio-group-10.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { RadioGroup, RadioPrimitive } from "@/registry/default/ui/radio-group";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip";
+
+const palettes = [
+  { label: "Mono", value: "mono", colors: ["#18181B", "#A1A1AA", "#FAFAFA"] },
+  {
+    label: "Porcelain",
+    value: "porcelain",
+    colors: ["#AA8F73", "#C8B79A", "#889FA3"],
+  },
+  { label: "Ember", value: "ember", colors: ["#B94724", "#DB8649", "#EDD0A0"] },
+  { label: "Terra", value: "terra", colors: ["#A64F3C", "#C78F70", "#896577"] },
+  { label: "Rosé", value: "rose", colors: ["#9B3F60", "#C98693", "#E9B9A5"] },
+  { label: "Dusk", value: "dusk", colors: ["#BE835B", "#8E7C9F", "#6E97AE"] },
+  {
+    label: "Orchard",
+    value: "orchard",
+    colors: ["#63794B", "#ADA66B", "#83A18A"],
+  },
+  {
+    label: "Petrol",
+    value: "petrol",
+    colors: ["#326A76", "#C97868", "#C9AD81"],
+  },
+  {
+    label: "Lagoon",
+    value: "lagoon",
+    colors: ["#247E92", "#4CAFA3", "#B6D8C7"],
+  },
+  {
+    label: "Borealis",
+    value: "borealis",
+    colors: ["#267F69", "#527FB8", "#9A83BF"],
+  },
+  {
+    label: "Cobalt",
+    value: "cobalt",
+    colors: ["#244E9A", "#607DA9", "#B5C9DD"],
+  },
+  { label: "Iris", value: "iris", colors: ["#7361A3", "#AC87A5", "#DBC3CA"] },
+];
+
+export default function Particle() {
+  return (
+    <fieldset className="w-full space-y-3">
+      <legend className="font-medium text-sm">Color palette</legend>
+      <TooltipProvider>
+        <RadioGroup
+          aria-label="Color palette"
+          className="grid grid-cols-4 gap-2"
+          defaultValue="dusk"
+        >
+          {palettes.map((palette) => (
+            <Tooltip key={palette.value} disableHoverablePopup>
+              <TooltipTrigger
+                render={
+                  <RadioPrimitive.Root
+                    aria-label={palette.label}
+                    value={palette.value}
+                    className="flex items-center justify-center rounded-lg border p-2.5 outline-none hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:border-primary/48 data-checked:bg-accent/50"
+                  />
+                }
+              >
+                <span aria-hidden="true" className="flex shrink-0 -space-x-1">
+                  {palette.colors.map((color) => (
+                    <span
+                      key={color}
+                      className="size-4 rounded-full ring-1 ring-background"
+                      style={{ backgroundColor: color }}
+                    />
+                  ))}
+                </span>
+              </TooltipTrigger>
+              <TooltipPopup>{palette.label}</TooltipPopup>
+            </Tooltip>
+          ))}
+        </RadioGroup>
+      </TooltipProvider>
+    </fieldset>
+  );
+}

apps/ui/registry/default/particles/p-select-24.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import {
+  Select,
+  SelectItem,
+  SelectLabel,
+  SelectPopup,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select";
+
+const palettes = [
+  { label: "Mono", value: "mono", colors: ["#18181B", "#A1A1AA", "#FAFAFA"] },
+  {
+    label: "Porcelain",
+    value: "porcelain",
+    colors: ["#AA8F73", "#C8B79A", "#889FA3"],
+  },
+  { label: "Ember", value: "ember", colors: ["#B94724", "#DB8649", "#EDD0A0"] },
+  { label: "Terra", value: "terra", colors: ["#A64F3C", "#C78F70", "#896577"] },
+  { label: "Rosé", value: "rose", colors: ["#9B3F60", "#C98693", "#E9B9A5"] },
+  { label: "Dusk", value: "dusk", colors: ["#BE835B", "#8E7C9F", "#6E97AE"] },
+  {
+    label: "Orchard",
+    value: "orchard",
+    colors: ["#63794B", "#ADA66B", "#83A18A"],
+  },
+  {
+    label: "Petrol",
+    value: "petrol",
+    colors: ["#326A76", "#C97868", "#C9AD81"],
+  },
+  {
+    label: "Lagoon",
+    value: "lagoon",
+    colors: ["#247E92", "#4CAFA3", "#B6D8C7"],
+  },
+  {
+    label: "Borealis",
+    value: "borealis",
+    colors: ["#267F69", "#527FB8", "#9A83BF"],
+  },
+  {
+    label: "Cobalt",
+    value: "cobalt",
+    colors: ["#244E9A", "#607DA9", "#B5C9DD"],
+  },
+  { label: "Iris", value: "iris", colors: ["#7361A3", "#AC87A5", "#DBC3CA"] },
+];
+
+export default function Particle() {
+  return (
+    <Select
+      defaultValue={palettes[5]}
+      items={palettes}
+      itemToStringValue={(palette) => palette.value}
+    >
+      <SelectLabel>Color palette</SelectLabel>
+      <SelectTrigger>
+        <SelectValue>
+          {(palette: (typeof palettes)[number]) => (
+            <span className="flex items-center gap-2">
+              <span aria-hidden="true" className="flex shrink-0 -space-x-1">
+                {palette.colors.map((color) => (
+                  <span
+                    key={color}
+                    className="size-4 rounded-full ring-1 ring-background"
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </span>
+              <span className="truncate">{palette.label}</span>
+            </span>
+          )}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectPopup>
+        {palettes.map((palette) => (
+          <SelectItem key={palette.value} value={palette}>
+            <span className="flex items-center gap-2">
+              <span aria-hidden="true" className="flex shrink-0 -space-x-1">
+                {palette.colors.map((color) => (
+                  <span
+                    key={color}
+                    className="size-4 rounded-full ring-1 ring-background"
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </span>
+              {palette.label}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectPopup>
+    </Select>
+  );
+}