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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@health-samurai/react-components",
-  "version": "0.0.0-alpha.16",
+  "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>
 	);
 }