@health-samurai/react-components 0.0.0-alpha.15 → 0.0.0-alpha.17

package/dist/bundle.css

@@ -2026,6 +2026,9 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .text-neutral-600 {
+    color: var(--color-neutral-600);
+  }
   .text-popover-foreground {
     color: var(--popover-foreground);
   }

package/dist/src/components/segment-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segment-control.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCvC,UAAU,mBAAmB,CAAC,CAAC,SAAS,MAAM;IAC7C,KAAK,EAAE,CAAC,CAAC;IACT,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;CACxC;AAED,iBAAS,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,KAAK,EACL,aAAa,EACb,KAAK,GACL,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAkBxB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"segment-control.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCvC,UAAU,mBAAmB,CAAC,CAAC,SAAS,MAAM;IAC7C,KAAK,EAAE,CAAC,CAAC;IACT,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;CACxC;AAED,iBAAS,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,EACzC,KAAK,EACL,aAAa,EACb,KAAK,GACL,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAgCxB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/src/components/segment-control.js

@@ -7,14 +7,25 @@ const itemBaseClass = cn("flex", "items-center", "justify-center", "px-2", "py-0
 const itemInactiveClass = "text-text-quternary_on-brand";
 const itemActiveClass = "bg-bg-primary text-text-primary";
 function SegmentControl({ value, onValueChange, items }) {
+    const isToggle = items.length === 2;
     return /*#__PURE__*/ _jsx("div", {
         className: containerClass,
-        children: items.map((item)=>/*#__PURE__*/ _jsx("button", {
+        children: items.map((item)=>{
+            const isActive = item.value === value;
+            return /*#__PURE__*/ _jsx("button", {
                 type: "button",
-                className: cn(itemBaseClass, item.value === value ? itemActiveClass : itemInactiveClass),
-                onClick: ()=>onValueChange(item.value),
+                className: cn(itemBaseClass, isActive ? itemActiveClass : itemInactiveClass),
+                onClick: ()=>{
+                    if (isToggle) {
+                        const other = items.find((i)=>i.value !== item.value);
+                        onValueChange(isActive ? other?.value ?? item.value : item.value);
+                    } else if (!isActive) {
+                        onValueChange(item.value);
+                    }
+                },
                 children: item.label
-            }, item.value))
+            }, item.value);
+        })
     });
 }
 export { SegmentControl };

package/dist/src/components/segment-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/segment-control.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\n// Container: h-24px, p-2px, rounded-full, bg-secondary_inverse\nconst containerClass = cn(\n\t\"inline-flex\",\n\t\"h-6\",\n\t\"p-0.5\",\n\t\"bg-bg-secondary_inverse\",\n\t\"rounded-full\",\n\t\"border\",\n\t\"border-transparent\",\n\t\"outline-none\",\n\t\"transition-all\",\n\t\"focus-visible:border-border-link\",\n\t\"focus-visible:ring-4\",\n\t\"focus-visible:ring-ring-blue\",\n);\n\n// Item: px-8px py-2px, rounded-full (16px), typo-body\nconst itemBaseClass = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"px-2\",\n\t\"py-0.5\",\n\t\"typo-body\",\n\t\"leading-4\",\n\t\"cursor-pointer\",\n\t\"rounded-full\",\n\t\"select-none\",\n\t\"transition-colors\",\n);\n\nconst itemInactiveClass = \"text-text-quternary_on-brand\";\nconst itemActiveClass = \"bg-bg-primary text-text-primary\";\n\ninterface SegmentControlProps<T extends string> {\n\tvalue: T;\n\tonValueChange: (value: T) => void;\n\titems: { value: T; label: ReactNode }[];\n}\n\nfunction SegmentControl<T extends string>({\n\tvalue,\n\tonValueChange,\n\titems,\n}: SegmentControlProps<T>) {\n\treturn (\n\t\t<div className={containerClass}>\n\t\t\t{items.map((item) => (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tkey={item.value}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\titemBaseClass,\n\t\t\t\t\t\titem.value === value ? itemActiveClass : itemInactiveClass,\n\t\t\t\t\t)}\n\t\t\t\t\tonClick={() => onValueChange(item.value)}\n\t\t\t\t>\n\t\t\t\t\t{item.label}\n\t\t\t\t</button>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\nexport { SegmentControl };\nexport type { SegmentControlProps };\n"],"names":["cn","containerClass","itemBaseClass","itemInactiveClass","itemActiveClass","SegmentControl","value","onValueChange","items","div","className","map","item","button","type","onClick","label"],"mappings":";AACA,SAASA,EAAE,QAAQ,yBAAuB;AAE1C,+DAA+D;AAC/D,MAAMC,iBAAiBD,GACtB,eACA,OACA,SACA,2BACA,gBACA,UACA,sBACA,gBACA,kBACA,oCACA,wBACA;AAGD,sDAAsD;AACtD,MAAME,gBAAgBF,GACrB,QACA,gBACA,kBACA,QACA,UACA,aACA,aACA,kBACA,gBACA,eACA;AAGD,MAAMG,oBAAoB;AAC1B,MAAMC,kBAAkB;AAQxB,SAASC,eAAiC,EACzCC,KAAK,EACLC,aAAa,EACbC,KAAK,EACmB;IACxB,qBACC,KAACC;QAAIC,WAAWT;kBACdO,MAAMG,GAAG,CAAC,CAACC,qBACX,KAACC;gBACAC,MAAK;gBAELJ,WAAWV,GACVE,eACAU,KAAKN,KAAK,KAAKA,QAAQF,kBAAkBD;gBAE1CY,SAAS,IAAMR,cAAcK,KAAKN,KAAK;0BAEtCM,KAAKI,KAAK;eAPNJ,KAAKN,KAAK;;AAYpB;AAEA,SAASD,cAAc,GAAG"}
+{"version":3,"sources":["../../../src/components/segment-control.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\n// Container: h-24px, p-2px, rounded-full, bg-secondary_inverse\nconst containerClass = cn(\n\t\"inline-flex\",\n\t\"h-6\",\n\t\"p-0.5\",\n\t\"bg-bg-secondary_inverse\",\n\t\"rounded-full\",\n\t\"border\",\n\t\"border-transparent\",\n\t\"outline-none\",\n\t\"transition-all\",\n\t\"focus-visible:border-border-link\",\n\t\"focus-visible:ring-4\",\n\t\"focus-visible:ring-ring-blue\",\n);\n\n// Item: px-8px py-2px, rounded-full (16px), typo-body\nconst itemBaseClass = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"px-2\",\n\t\"py-0.5\",\n\t\"typo-body\",\n\t\"leading-4\",\n\t\"cursor-pointer\",\n\t\"rounded-full\",\n\t\"select-none\",\n\t\"transition-colors\",\n);\n\nconst itemInactiveClass = \"text-text-quternary_on-brand\";\nconst itemActiveClass = \"bg-bg-primary text-text-primary\";\n\ninterface SegmentControlProps<T extends string> {\n\tvalue: T;\n\tonValueChange: (value: T) => void;\n\titems: { value: T; label: ReactNode }[];\n}\n\nfunction SegmentControl<T extends string>({\n\tvalue,\n\tonValueChange,\n\titems,\n}: SegmentControlProps<T>) {\n\tconst isToggle = items.length === 2;\n\n\treturn (\n\t\t<div className={containerClass}>\n\t\t\t{items.map((item) => {\n\t\t\t\tconst isActive = item.value === value;\n\t\t\t\treturn (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\titemBaseClass,\n\t\t\t\t\t\t\tisActive ? itemActiveClass : itemInactiveClass,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isToggle) {\n\t\t\t\t\t\t\t\tconst other = items.find((i) => i.value !== item.value);\n\t\t\t\t\t\t\t\tonValueChange(\n\t\t\t\t\t\t\t\t\tisActive ? (other?.value ?? item.value) : item.value,\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} else if (!isActive) {\n\t\t\t\t\t\t\t\tonValueChange(item.value);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</button>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n\nexport { SegmentControl };\nexport type { SegmentControlProps };\n"],"names":["cn","containerClass","itemBaseClass","itemInactiveClass","itemActiveClass","SegmentControl","value","onValueChange","items","isToggle","length","div","className","map","item","isActive","button","type","onClick","other","find","i","label"],"mappings":";AACA,SAASA,EAAE,QAAQ,yBAAuB;AAE1C,+DAA+D;AAC/D,MAAMC,iBAAiBD,GACtB,eACA,OACA,SACA,2BACA,gBACA,UACA,sBACA,gBACA,kBACA,oCACA,wBACA;AAGD,sDAAsD;AACtD,MAAME,gBAAgBF,GACrB,QACA,gBACA,kBACA,QACA,UACA,aACA,aACA,kBACA,gBACA,eACA;AAGD,MAAMG,oBAAoB;AAC1B,MAAMC,kBAAkB;AAQxB,SAASC,eAAiC,EACzCC,KAAK,EACLC,aAAa,EACbC,KAAK,EACmB;IACxB,MAAMC,WAAWD,MAAME,MAAM,KAAK;IAElC,qBACC,KAACC;QAAIC,WAAWX;kBACdO,MAAMK,GAAG,CAAC,CAACC;YACX,MAAMC,WAAWD,KAAKR,KAAK,KAAKA;YAChC,qBACC,KAACU;gBAEAC,MAAK;gBACLL,WAAWZ,GACVE,eACAa,WAAWX,kBAAkBD;gBAE9Be,SAAS;oBACR,IAAIT,UAAU;wBACb,MAAMU,QAAQX,MAAMY,IAAI,CAAC,CAACC,IAAMA,EAAEf,KAAK,KAAKQ,KAAKR,KAAK;wBACtDC,cACCQ,WAAYI,OAAOb,SAASQ,KAAKR,KAAK,GAAIQ,KAAKR,KAAK;oBAEtD,OAAO,IAAI,CAACS,UAAU;wBACrBR,cAAcO,KAAKR,KAAK;oBACzB;gBACD;0BAECQ,KAAKQ,KAAK;eAjBNR,KAAKR,KAAK;QAoBlB;;AAGH;AAEA,SAASD,cAAc,GAAG"}

package/dist/src/components/segment-control.stories.js

@@ -36,5 +36,33 @@ export const Default = {
         });
     }
 };
+export const MoreThanTwo = {
+    args: {
+        value: "yaml",
+        onValueChange: ()=>{},
+        items: [
+            {
+                value: "yaml",
+                label: "YAML"
+            },
+            {
+                value: "json",
+                label: "JSON"
+            },
+            {
+                value: "toml",
+                label: "TOML"
+            }
+        ]
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ _jsx(SegmentControl, {
+            value: value,
+            onValueChange: setValue,
+            items: args.items
+        });
+    }
+};
 
 //# sourceMappingURL=segment-control.stories.js.map

package/dist/src/components/segment-control.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/segment-control.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { useState } from \"react\";\n\nimport { SegmentControl } from \"./segment-control\";\n\nconst meta = {\n\ttitle: \"Component/SegmentControl\",\n\tcomponent: SegmentControl,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n} satisfies Meta<typeof SegmentControl>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n\targs: {\n\t\tvalue: \"yaml\",\n\t\tonValueChange: () => {},\n\t\titems: [\n\t\t\t{ value: \"yaml\", label: \"YAML\" },\n\t\t\t{ value: \"json\", label: \"JSON\" },\n\t\t],\n\t},\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(args.value);\n\n\t\treturn (\n\t\t\t<SegmentControl\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={setValue}\n\t\t\t\titems={args.items}\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"names":["useState","SegmentControl","meta","title","component","parameters","layout","tags","Default","args","value","onValueChange","items","label","render","setValue"],"mappings":";AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,cAAc,QAAQ,uBAAoB;AAEnD,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;AACnB;AAEA,eAAeL,KAAK;AAGpB,OAAO,MAAMM,UAAiB;IAC7BC,MAAM;QACLC,OAAO;QACPC,eAAe,KAAO;QACtBC,OAAO;YACN;gBAAEF,OAAO;gBAAQG,OAAO;YAAO;YAC/B;gBAAEH,OAAO;gBAAQG,OAAO;YAAO;SAC/B;IACF;IACAC,QAAQ,CAACL;QACR,MAAM,CAACC,OAAOK,SAAS,GAAGf,SAASS,KAAKC,KAAK;QAE7C,qBACC,KAACT;YACAS,OAAOA;YACPC,eAAeI;YACfH,OAAOH,KAAKG,KAAK;;IAGpB;AACD,EAAE"}
+{"version":3,"sources":["../../../src/components/segment-control.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { useState } from \"react\";\n\nimport { SegmentControl } from \"./segment-control\";\n\nconst meta = {\n\ttitle: \"Component/SegmentControl\",\n\tcomponent: SegmentControl,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n} satisfies Meta<typeof SegmentControl>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n\targs: {\n\t\tvalue: \"yaml\",\n\t\tonValueChange: () => {},\n\t\titems: [\n\t\t\t{ value: \"yaml\", label: \"YAML\" },\n\t\t\t{ value: \"json\", label: \"JSON\" },\n\t\t],\n\t},\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(args.value);\n\n\t\treturn (\n\t\t\t<SegmentControl\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={setValue}\n\t\t\t\titems={args.items}\n\t\t\t/>\n\t\t);\n\t},\n};\n\nexport const MoreThanTwo: Story = {\n\targs: {\n\t\tvalue: \"yaml\",\n\t\tonValueChange: () => {},\n\t\titems: [\n\t\t\t{ value: \"yaml\", label: \"YAML\" },\n\t\t\t{ value: \"json\", label: \"JSON\" },\n\t\t\t{ value: \"toml\", label: \"TOML\" },\n\t\t],\n\t},\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(args.value);\n\n\t\treturn (\n\t\t\t<SegmentControl\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={setValue}\n\t\t\t\titems={args.items}\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"names":["useState","SegmentControl","meta","title","component","parameters","layout","tags","Default","args","value","onValueChange","items","label","render","setValue","MoreThanTwo"],"mappings":";AACA,SAASA,QAAQ,QAAQ,QAAQ;AAEjC,SAASC,cAAc,QAAQ,uBAAoB;AAEnD,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;AACnB;AAEA,eAAeL,KAAK;AAGpB,OAAO,MAAMM,UAAiB;IAC7BC,MAAM;QACLC,OAAO;QACPC,eAAe,KAAO;QACtBC,OAAO;YACN;gBAAEF,OAAO;gBAAQG,OAAO;YAAO;YAC/B;gBAAEH,OAAO;gBAAQG,OAAO;YAAO;SAC/B;IACF;IACAC,QAAQ,CAACL;QACR,MAAM,CAACC,OAAOK,SAAS,GAAGf,SAASS,KAAKC,KAAK;QAE7C,qBACC,KAACT;YACAS,OAAOA;YACPC,eAAeI;YACfH,OAAOH,KAAKG,KAAK;;IAGpB;AACD,EAAE;AAEF,OAAO,MAAMI,cAAqB;IACjCP,MAAM;QACLC,OAAO;QACPC,eAAe,KAAO;QACtBC,OAAO;YACN;gBAAEF,OAAO;gBAAQG,OAAO;YAAO;YAC/B;gBAAEH,OAAO;gBAAQG,OAAO;YAAO;YAC/B;gBAAEH,OAAO;gBAAQG,OAAO;YAAO;SAC/B;IACF;IACAC,QAAQ,CAACL;QACR,MAAM,CAACC,OAAOK,SAAS,GAAGf,SAASS,KAAKC,KAAK;QAE7C,qBACC,KAACT;YACAS,OAAOA;YACPC,eAAeI;YACfH,OAAOH,KAAKG,KAAK;;IAGpB;AACD,EAAE"}

package/dist/src/shadcn/components/ui/switch.d.ts

@@ -4,6 +4,8 @@ import type * as React from "react";
 declare const switchRootVariants: (props?: ({
     size?: "small" | "regular" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Switch({ className, size, disabled, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof switchRootVariants>): import("react/jsx-runtime").JSX.Element;
+declare function Switch({ className, size, disabled, locked, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & VariantProps<typeof switchRootVariants> & {
+    locked?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

package/dist/src/shadcn/components/ui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAiCpC,QAAA,MAAM,kBAAkB;;8EAUtB,CAAC;AA6BH,iBAAS,MAAM,CAAC,EACf,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GACnD,YAAY,CAAC,OAAO,kBAAkB,CAAC,2CAcvC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAiCpC,QAAA,MAAM,kBAAkB;;8EAUtB,CAAC;AA6BH,iBAAS,MAAM,CAAC,EACf,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GACnD,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,2CA0BD;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/src/shadcn/components/ui/switch.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cva } from "class-variance-authority";
+import { Lock } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 // Switch root base styles
 const baseSwitchRootStyles = cn(// Layout
@@ -39,7 +40,7 @@ const switchThumbVariants = cva(baseSwitchThumbStyles, {
         size: "regular"
     }
 });
-function Switch({ className, size, disabled, ...props }) {
+function Switch({ className, size, disabled, locked, ...props }) {
     return /*#__PURE__*/ _jsx(SwitchPrimitive.Root, {
         "data-slot": "switch",
         className: cn(switchRootVariants({
@@ -49,8 +50,16 @@ function Switch({ className, size, disabled, ...props }) {
         ...props,
         children: /*#__PURE__*/ _jsx(SwitchPrimitive.Thumb, {
             "data-slot": "switch-thumb",
-            className: switchThumbVariants({
+            className: cn(switchThumbVariants({
                 size
+            }), locked && "flex items-center justify-center"),
+            children: locked && /*#__PURE__*/ _jsx(Lock, {
+                size: size === "small" ? 8 : 10,
+                strokeWidth: 2.5,
+                style: {
+                    strokeWidth: 2.5
+                },
+                className: "text-neutral-600"
             })
         })
     });

package/dist/src/shadcn/components/ui/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/switch.tsx"],"sourcesContent":["\"use client\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Switch root base styles\nconst baseSwitchRootStyles = cn(\n\t// Layout\n\t\"peer\",\n\t\"inline-flex\",\n\t\"items-center\",\n\t\"shrink-0\",\n\t// Shape\n\t\"rounded-full\",\n\t// Interaction\n\t\"transition-all\",\n\t\"outline-none\",\n\t\"cursor-pointer\",\n\t// States\n\t\"data-[state=unchecked]:bg-bg-secondary_inverse\",\n\t\"data-[state=checked]:bg-bg-link\",\n\t\"hover:data-[state=unchecked]:bg-bg-secondary_inverse_hover\",\n\t\"hover:data-[state=checked]:bg-bg-link_hover\",\n\t// Focus\n\t\"focus-visible:ring-4\",\n\t\"focus-visible:ring-ring-blue\",\n\t// Disabled\n\t\"disabled:cursor-not-allowed\",\n\t\"disabled:hover:data-[state=unchecked]:bg-bg-disabled\",\n\t\"disabled:hover:data-[state=checked]:bg-bg-link_disabled\",\n\t\"disabled:data-[state=checked]:bg-bg-link_disabled\",\n\t\"disabled:data-[state=unchecked]:bg-bg-disabled\",\n);\n\nconst switchRootVariants = cva(baseSwitchRootStyles, {\n\tvariants: {\n\t\tsize: {\n\t\t\tregular: cn(\"h-6\", \"w-10\"),\n\t\t\tsmall: cn(\"h-4\", \"w-7\"),\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"regular\",\n\t},\n});\n\n// Switch thumb base styles\nconst baseSwitchThumbStyles = cn(\n\t// Layout\n\t\"pointer-events-none\",\n\t\"block\",\n\t// Shape\n\t\"rounded-full\",\n\t\"ring-0\",\n\t// Color\n\t\"bg-bg-primary\",\n\t// Animation\n\t\"transition-transform\",\n\t\"data-[state=unchecked]:translate-x-0.5\",\n);\n\nconst switchThumbVariants = cva(baseSwitchThumbStyles, {\n\tvariants: {\n\t\tsize: {\n\t\t\tregular: cn(\"size-5\", \"data-[state=checked]:translate-x-[1.125rem]\"),\n\t\t\tsmall: cn(\"size-3\", \"data-[state=checked]:translate-x-[0.875rem]\"),\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"regular\",\n\t},\n});\n\nfunction Switch({\n\tclassName,\n\tsize,\n\tdisabled,\n\t...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> &\n\tVariantProps<typeof switchRootVariants>) {\n\treturn (\n\t\t<SwitchPrimitive.Root\n\t\t\tdata-slot=\"switch\"\n\t\t\tclassName={cn(switchRootVariants({ size }), className)}\n\t\t\tdisabled={disabled}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SwitchPrimitive.Thumb\n\t\t\t\tdata-slot=\"switch-thumb\"\n\t\t\t\tclassName={switchThumbVariants({ size })}\n\t\t\t/>\n\t\t</SwitchPrimitive.Root>\n\t);\n}\n\nexport { Switch };\n"],"names":["SwitchPrimitive","cva","cn","baseSwitchRootStyles","switchRootVariants","variants","size","regular","small","defaultVariants","baseSwitchThumbStyles","switchThumbVariants","Switch","className","disabled","props","Root","data-slot","Thumb"],"mappings":"AAAA;;AACA,YAAYA,qBAAqB,yBAAyB;AAC1D,SAASC,GAAG,QAA2B,2BAA2B;AAGlE,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,0BAA0B;AAC1B,MAAMC,uBAAuBD,GAC5B,SAAS;AACT,QACA,eACA,gBACA,YACA,QAAQ;AACR,gBACA,cAAc;AACd,kBACA,gBACA,kBACA,SAAS;AACT,kDACA,mCACA,8DACA,+CACA,QAAQ;AACR,wBACA,gCACA,WAAW;AACX,+BACA,wDACA,2DACA,qDACA;AAGD,MAAME,qBAAqBH,IAAIE,sBAAsB;IACpDE,UAAU;QACTC,MAAM;YACLC,SAASL,GAAG,OAAO;YACnBM,OAAON,GAAG,OAAO;QAClB;IACD;IACAO,iBAAiB;QAChBH,MAAM;IACP;AACD;AAEA,2BAA2B;AAC3B,MAAMI,wBAAwBR,GAC7B,SAAS;AACT,uBACA,SACA,QAAQ;AACR,gBACA,UACA,QAAQ;AACR,iBACA,YAAY;AACZ,wBACA;AAGD,MAAMS,sBAAsBV,IAAIS,uBAAuB;IACtDL,UAAU;QACTC,MAAM;YACLC,SAASL,GAAG,UAAU;YACtBM,OAAON,GAAG,UAAU;QACrB;IACD;IACAO,iBAAiB;QAChBH,MAAM;IACP;AACD;AAEA,SAASM,OAAO,EACfC,SAAS,EACTP,IAAI,EACJQ,QAAQ,EACR,GAAGC,OAEoC;IACvC,qBACC,KAACf,gBAAgBgB,IAAI;QACpBC,aAAU;QACVJ,WAAWX,GAAGE,mBAAmB;YAAEE;QAAK,IAAIO;QAC5CC,UAAUA;QACT,GAAGC,KAAK;kBAET,cAAA,KAACf,gBAAgBkB,KAAK;YACrBD,aAAU;YACVJ,WAAWF,oBAAoB;gBAAEL;YAAK;;;AAI1C;AAEA,SAASM,MAAM,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/switch.tsx"],"sourcesContent":["\"use client\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Lock } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Switch root base styles\nconst baseSwitchRootStyles = cn(\n\t// Layout\n\t\"peer\",\n\t\"inline-flex\",\n\t\"items-center\",\n\t\"shrink-0\",\n\t// Shape\n\t\"rounded-full\",\n\t// Interaction\n\t\"transition-all\",\n\t\"outline-none\",\n\t\"cursor-pointer\",\n\t// States\n\t\"data-[state=unchecked]:bg-bg-secondary_inverse\",\n\t\"data-[state=checked]:bg-bg-link\",\n\t\"hover:data-[state=unchecked]:bg-bg-secondary_inverse_hover\",\n\t\"hover:data-[state=checked]:bg-bg-link_hover\",\n\t// Focus\n\t\"focus-visible:ring-4\",\n\t\"focus-visible:ring-ring-blue\",\n\t// Disabled\n\t\"disabled:cursor-not-allowed\",\n\t\"disabled:hover:data-[state=unchecked]:bg-bg-disabled\",\n\t\"disabled:hover:data-[state=checked]:bg-bg-link_disabled\",\n\t\"disabled:data-[state=checked]:bg-bg-link_disabled\",\n\t\"disabled:data-[state=unchecked]:bg-bg-disabled\",\n);\n\nconst switchRootVariants = cva(baseSwitchRootStyles, {\n\tvariants: {\n\t\tsize: {\n\t\t\tregular: cn(\"h-6\", \"w-10\"),\n\t\t\tsmall: cn(\"h-4\", \"w-7\"),\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"regular\",\n\t},\n});\n\n// Switch thumb base styles\nconst baseSwitchThumbStyles = cn(\n\t// Layout\n\t\"pointer-events-none\",\n\t\"block\",\n\t// Shape\n\t\"rounded-full\",\n\t\"ring-0\",\n\t// Color\n\t\"bg-bg-primary\",\n\t// Animation\n\t\"transition-transform\",\n\t\"data-[state=unchecked]:translate-x-0.5\",\n);\n\nconst switchThumbVariants = cva(baseSwitchThumbStyles, {\n\tvariants: {\n\t\tsize: {\n\t\t\tregular: cn(\"size-5\", \"data-[state=checked]:translate-x-[1.125rem]\"),\n\t\t\tsmall: cn(\"size-3\", \"data-[state=checked]:translate-x-[0.875rem]\"),\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"regular\",\n\t},\n});\n\nfunction Switch({\n\tclassName,\n\tsize,\n\tdisabled,\n\tlocked,\n\t...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> &\n\tVariantProps<typeof switchRootVariants> & {\n\t\tlocked?: boolean;\n\t}) {\n\treturn (\n\t\t<SwitchPrimitive.Root\n\t\t\tdata-slot=\"switch\"\n\t\t\tclassName={cn(switchRootVariants({ size }), className)}\n\t\t\tdisabled={disabled}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SwitchPrimitive.Thumb\n\t\t\t\tdata-slot=\"switch-thumb\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\tswitchThumbVariants({ size }),\n\t\t\t\t\tlocked && \"flex items-center justify-center\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{locked && (\n\t\t\t\t\t<Lock\n\t\t\t\t\t\tsize={size === \"small\" ? 8 : 10}\n\t\t\t\t\t\tstrokeWidth={2.5}\n\t\t\t\t\t\tstyle={{ strokeWidth: 2.5 }}\n\t\t\t\t\t\tclassName=\"text-neutral-600\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</SwitchPrimitive.Thumb>\n\t\t</SwitchPrimitive.Root>\n\t);\n}\n\nexport { Switch };\n"],"names":["SwitchPrimitive","cva","Lock","cn","baseSwitchRootStyles","switchRootVariants","variants","size","regular","small","defaultVariants","baseSwitchThumbStyles","switchThumbVariants","Switch","className","disabled","locked","props","Root","data-slot","Thumb","strokeWidth","style"],"mappings":"AAAA;;AACA,YAAYA,qBAAqB,yBAAyB;AAC1D,SAASC,GAAG,QAA2B,2BAA2B;AAClE,SAASC,IAAI,QAAQ,eAAe;AAGpC,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,0BAA0B;AAC1B,MAAMC,uBAAuBD,GAC5B,SAAS;AACT,QACA,eACA,gBACA,YACA,QAAQ;AACR,gBACA,cAAc;AACd,kBACA,gBACA,kBACA,SAAS;AACT,kDACA,mCACA,8DACA,+CACA,QAAQ;AACR,wBACA,gCACA,WAAW;AACX,+BACA,wDACA,2DACA,qDACA;AAGD,MAAME,qBAAqBJ,IAAIG,sBAAsB;IACpDE,UAAU;QACTC,MAAM;YACLC,SAASL,GAAG,OAAO;YACnBM,OAAON,GAAG,OAAO;QAClB;IACD;IACAO,iBAAiB;QAChBH,MAAM;IACP;AACD;AAEA,2BAA2B;AAC3B,MAAMI,wBAAwBR,GAC7B,SAAS;AACT,uBACA,SACA,QAAQ;AACR,gBACA,UACA,QAAQ;AACR,iBACA,YAAY;AACZ,wBACA;AAGD,MAAMS,sBAAsBX,IAAIU,uBAAuB;IACtDL,UAAU;QACTC,MAAM;YACLC,SAASL,GAAG,UAAU;YACtBM,OAAON,GAAG,UAAU;QACrB;IACD;IACAO,iBAAiB;QAChBH,MAAM;IACP;AACD;AAEA,SAASM,OAAO,EACfC,SAAS,EACTP,IAAI,EACJQ,QAAQ,EACRC,MAAM,EACN,GAAGC,OAIF;IACD,qBACC,KAACjB,gBAAgBkB,IAAI;QACpBC,aAAU;QACVL,WAAWX,GAAGE,mBAAmB;YAAEE;QAAK,IAAIO;QAC5CC,UAAUA;QACT,GAAGE,KAAK;kBAET,cAAA,KAACjB,gBAAgBoB,KAAK;YACrBD,aAAU;YACVL,WAAWX,GACVS,oBAAoB;gBAAEL;YAAK,IAC3BS,UAAU;sBAGVA,wBACA,KAACd;gBACAK,MAAMA,SAAS,UAAU,IAAI;gBAC7Bc,aAAa;gBACbC,OAAO;oBAAED,aAAa;gBAAI;gBAC1BP,WAAU;;;;AAMhB;AAEA,SAASD,MAAM,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@health-samurai/react-components",
-  "version": "0.0.0-alpha.15",
+  "version": "0.0.0-alpha.17",
   "type": "module",
   "files": [
     "dist",

package/src/components/segment-control.stories.tsx

@@ -36,3 +36,26 @@ export const Default: Story = {
 		);
 	},
 };
+
+export const MoreThanTwo: Story = {
+	args: {
+		value: "yaml",
+		onValueChange: () => {},
+		items: [
+			{ value: "yaml", label: "YAML" },
+			{ value: "json", label: "JSON" },
+			{ value: "toml", label: "TOML" },
+		],
+	},
+	render: (args) => {
+		const [value, setValue] = useState(args.value);
+
+		return (
+			<SegmentControl
+				value={value}
+				onValueChange={setValue}
+				items={args.items}
+			/>
+		);
+	},
+};

package/src/components/segment-control.tsx

@@ -46,21 +46,35 @@ function SegmentControl<T extends string>({
 	onValueChange,
 	items,
 }: SegmentControlProps<T>) {
+	const isToggle = items.length === 2;
+
 	return (
 		<div className={containerClass}>
-			{items.map((item) => (
-				<button
-					type="button"
-					key={item.value}
-					className={cn(
-						itemBaseClass,
-						item.value === value ? itemActiveClass : itemInactiveClass,
-					)}
-					onClick={() => onValueChange(item.value)}
-				>
-					{item.label}
-				</button>
-			))}
+			{items.map((item) => {
+				const isActive = item.value === value;
+				return (
+					<button
+						key={item.value}
+						type="button"
+						className={cn(
+							itemBaseClass,
+							isActive ? itemActiveClass : itemInactiveClass,
+						)}
+						onClick={() => {
+							if (isToggle) {
+								const other = items.find((i) => i.value !== item.value);
+								onValueChange(
+									isActive ? (other?.value ?? item.value) : item.value,
+								);
+							} else if (!isActive) {
+								onValueChange(item.value);
+							}
+						}}
+					>
+						{item.label}
+					</button>
+				);
+			})}
 		</div>
 	);
 }

package/src/shadcn/components/ui/switch.tsx

@@ -1,6 +1,7 @@
 "use client";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Lock } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
@@ -77,9 +78,12 @@ function Switch({
 	className,
 	size,
 	disabled,
+	locked,
 	...props
 }: React.ComponentProps<typeof SwitchPrimitive.Root> &
-	VariantProps<typeof switchRootVariants>) {
+	VariantProps<typeof switchRootVariants> & {
+		locked?: boolean;
+	}) {
 	return (
 		<SwitchPrimitive.Root
 			data-slot="switch"
@@ -89,8 +93,20 @@ function Switch({
 		>
 			<SwitchPrimitive.Thumb
 				data-slot="switch-thumb"
-				className={switchThumbVariants({ size })}
-			/>
+				className={cn(
+					switchThumbVariants({ size }),
+					locked && "flex items-center justify-center",
+				)}
+			>
+				{locked && (
+					<Lock
+						size={size === "small" ? 8 : 10}
+						strokeWidth={2.5}
+						style={{ strokeWidth: 2.5 }}
+						className="text-neutral-600"
+					/>
+				)}
+			</SwitchPrimitive.Thumb>
 		</SwitchPrimitive.Root>
 	);
 }