@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/dist/src/components/request-line-editor.js

@@ -1,82 +1,105 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { toast } from "sonner";
 import { Input } from "../shadcn/components/ui/input.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../shadcn/components/ui/select.js";
 import { cn } from "../shadcn/lib/utils.js";
 import { CopyIcon } from "./copy-icon.js";
-const METHOD_COLORS = {
-    GET: {
-        text: "text-[#6D9F0F] [&_svg]:text-[#6D9F0F]!",
-        background: "bg-green-200",
-        border: "border-fg-success-secondary! hover:border-fg-success-secondary ring-green-200!"
-    },
-    POST: {
-        text: "text-yellow-600 [&_svg]:text-yellow-600!",
-        background: "bg-yellow-200",
-        border: "border-[#F4CB00]! hover:border-[#F4CB00] ring-yellow-200!"
-    },
-    PUT: {
-        text: "text-blue-500 [&_svg]:text-blue-500!",
-        background: "bg-blue-200",
-        border: "border-blue-400! hover:border-blue-400 ring-blue-200!"
-    },
-    PATCH: {
-        text: "text-violet-600 [&_svg]:text-violet-600",
-        background: "bg-violet-200",
-        border: "border-violet-400! hover:border-violet-400 ring-violet-200!"
-    },
-    DELETE: {
-        text: "text-red-600 [&_svg]:text-red-600!",
-        background: "bg-red-200",
-        border: "border-red-300! hover:border-red-300 ring-red-200!"
+const METHODS = [
+    "GET",
+    "POST",
+    "PUT",
+    "PATCH",
+    "DELETE"
+];
+const requestMethodVariants = cva(cn("border-r-0", "rounded-r-none", "shadow-none", "typo-label", "text-left", "items-center", "w-26"), {
+    variants: {
+        method: {
+            GET: "text-utility-green [&_svg]:text-utility-green",
+            POST: "text-utility-yellow [&_svg]:text-utility-yellow",
+            PUT: "text-utility-blue [&_svg]:text-utility-blue ",
+            PATCH: "text-utility-violet [&_svg]:text-utility-violet",
+            DELETE: "text-utility-red [&_svg]:text-utility-red"
+        }
     }
-};
-function RequestMethodSelector({ selectedMethod, setMethod, methods }) {
+});
+function isKnownMethod(candidate) {
+    const methods = METHODS;
+    return methods.includes(candidate);
+}
+function RequestMethodSelector({ value, onValueChange }) {
     return /*#__PURE__*/ _jsxs(Select, {
-        value: selectedMethod,
-        onValueChange: setMethod,
+        value: value,
+        ...onValueChange ? {
+            onValueChange: onValueChange
+        } : {},
         children: [
             /*#__PURE__*/ _jsx(SelectTrigger, {
-                className: `min-w-26 border-r-0 rounded-r-none shadow-none ${METHOD_COLORS[selectedMethod].text} ${METHOD_COLORS[selectedMethod].background} ${METHOD_COLORS[selectedMethod].border}`,
-                children: /*#__PURE__*/ _jsx(SelectValue, {})
+                className: requestMethodVariants(isKnownMethod(value) ? {
+                    method: value
+                } : undefined),
+                children: /*#__PURE__*/ _jsx(SelectValue, {
+                    children: value
+                })
             }),
             /*#__PURE__*/ _jsx(SelectContent, {
-                children: methods.map((method)=>/*#__PURE__*/ _jsx(SelectItem, {
+                children: METHODS.map((method)=>/*#__PURE__*/ _jsx(SelectItem, {
                         value: method,
-                        children: /*#__PURE__*/ _jsxs("span", {
-                            className: `${METHOD_COLORS[method].text}`,
-                            children: [
-                                " ",
-                                method,
-                                " "
-                            ]
+                        children: /*#__PURE__*/ _jsx("span", {
+                            className: requestMethodVariants({
+                                method: method
+                            }),
+                            children: method
                         })
                     }, method))
             })
         ]
     });
 }
-function RequestLineEditor({ className, selectedMethod, setMethod, methods, inputValue, onInputChange }) {
+function RequestLineEditor({ className, method, onMethodChange, path, placeholder, autoFocus, onPathChange }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: cn("flex", className),
         children: [
             /*#__PURE__*/ _jsx(RequestMethodSelector, {
-                selectedMethod: selectedMethod,
-                setMethod: setMethod,
-                methods: methods
+                value: method,
+                onValueChange: onMethodChange
             }),
             /*#__PURE__*/ _jsx(Input, {
-                className: `rounded-l-none ${METHOD_COLORS[selectedMethod].border}`,
-                value: inputValue,
+                className: "rounded-l-none",
+                value: path,
+                autoFocus: autoFocus,
+                placeholder: placeholder,
                 rightSlot: /*#__PURE__*/ _jsx(CopyIcon, {
-                    text: `${selectedMethod} ${inputValue}`
+                    text: `${method} ${path}`,
+                    tooltipText: "Copy request line",
+                    showToast: false,
+                    onCopy: (text)=>{
+                        // Custom toast for request line
+                        const truncatedText = text.length > 30 ? `${text.slice(0, 30)}...` : text;
+                        toast(/*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-1",
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "typo-body",
+                                    children: "Request line copied"
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "typo-code text-text-secondary",
+                                    children: truncatedText
+                                })
+                            ]
+                        }), {
+                            duration: 2000
+                        });
+                    }
                 }),
-                ...onInputChange !== undefined ? {
-                    onChange: onInputChange
+                ...onPathChange !== undefined ? {
+                    onChange: onPathChange
                 } : {}
             })
         ]
     });
 }
-export { RequestLineEditor, METHOD_COLORS };
+export { RequestLineEditor, requestMethodVariants };
 
 //# sourceMappingURL=request-line-editor.js.map

package/dist/src/components/request-line-editor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/request-line-editor.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { Input } from \"#shadcn/components/ui/input\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"#shadcn/components/ui/select\";\nimport { cn } from \"#shadcn/lib/utils\";\nimport { CopyIcon } from \"./copy-icon\";\n\ninterface RequestLineEditorProps extends React.ComponentProps<\"div\"> {\n\tselectedMethod: string;\n\tsetMethod: (value: string) => void;\n\tmethods: string[];\n\tinputValue?: string | undefined;\n\tonInputChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nconst METHOD_COLORS = {\n\tGET: {\n\t\ttext: \"text-[#6D9F0F] [&_svg]:text-[#6D9F0F]!\",\n\t\tbackground: \"bg-green-200\",\n\t\tborder:\n\t\t\t\"border-fg-success-secondary! hover:border-fg-success-secondary ring-green-200!\",\n\t},\n\tPOST: {\n\t\ttext: \"text-yellow-600 [&_svg]:text-yellow-600!\",\n\t\tbackground: \"bg-yellow-200\",\n\t\tborder: \"border-[#F4CB00]! hover:border-[#F4CB00] ring-yellow-200!\",\n\t},\n\tPUT: {\n\t\ttext: \"text-blue-500 [&_svg]:text-blue-500!\",\n\t\tbackground: \"bg-blue-200\",\n\t\tborder: \"border-blue-400! hover:border-blue-400 ring-blue-200!\",\n\t},\n\tPATCH: {\n\t\ttext: \"text-violet-600 [&_svg]:text-violet-600\",\n\t\tbackground: \"bg-violet-200\",\n\t\tborder: \"border-violet-400! hover:border-violet-400 ring-violet-200!\",\n\t},\n\tDELETE: {\n\t\ttext: \"text-red-600 [&_svg]:text-red-600!\",\n\t\tbackground: \"bg-red-200\",\n\t\tborder: \"border-red-300! hover:border-red-300 ring-red-200!\",\n\t},\n};\n\nfunction RequestMethodSelector({\n\tselectedMethod,\n\tsetMethod,\n\tmethods,\n}: RequestLineEditorProps) {\n\treturn (\n\t\t<Select value={selectedMethod} onValueChange={setMethod}>\n\t\t\t<SelectTrigger\n\t\t\t\tclassName={`min-w-26 border-r-0 rounded-r-none shadow-none ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].text} ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].background} ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].border}`}\n\t\t\t>\n\t\t\t\t<SelectValue />\n\t\t\t</SelectTrigger>\n\t\t\t<SelectContent>\n\t\t\t\t{methods.map((method) => (\n\t\t\t\t\t<SelectItem key={method} value={method}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={`${METHOD_COLORS[method as keyof typeof METHOD_COLORS].text}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{\" \"}\n\t\t\t\t\t\t\t{method}{\" \"}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</SelectItem>\n\t\t\t\t))}\n\t\t\t</SelectContent>\n\t\t</Select>\n\t);\n}\n\nfunction RequestLineEditor({\n\tclassName,\n\tselectedMethod,\n\tsetMethod,\n\tmethods,\n\tinputValue,\n\tonInputChange,\n}: RequestLineEditorProps) {\n\treturn (\n\t\t<div className={cn(\"flex\", className)}>\n\t\t\t<RequestMethodSelector\n\t\t\t\tselectedMethod={selectedMethod}\n\t\t\t\tsetMethod={setMethod}\n\t\t\t\tmethods={methods}\n\t\t\t/>\n\t\t\t<Input\n\t\t\t\tclassName={`rounded-l-none ${METHOD_COLORS[selectedMethod as keyof typeof METHOD_COLORS].border}`}\n\t\t\t\tvalue={inputValue}\n\t\t\t\trightSlot={<CopyIcon text={`${selectedMethod} ${inputValue}`} />}\n\t\t\t\t{...(onInputChange !== undefined ? { onChange: onInputChange } : {})}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport { RequestLineEditor, type RequestLineEditorProps, METHOD_COLORS };\n"],"names":["Input","Select","SelectContent","SelectItem","SelectTrigger","SelectValue","cn","CopyIcon","METHOD_COLORS","GET","text","background","border","POST","PUT","PATCH","DELETE","RequestMethodSelector","selectedMethod","setMethod","methods","value","onValueChange","className","map","method","span","RequestLineEditor","inputValue","onInputChange","div","rightSlot","undefined","onChange"],"mappings":";AACA,SAASA,KAAK,QAAQ,mCAA8B;AACpD,SACCC,MAAM,EACNC,aAAa,EACbC,UAAU,EACVC,aAAa,EACbC,WAAW,QACL,oCAA+B;AACtC,SAASC,EAAE,QAAQ,yBAAoB;AACvC,SAASC,QAAQ,QAAQ,iBAAc;AAUvC,MAAMC,gBAAgB;IACrBC,KAAK;QACJC,MAAM;QACNC,YAAY;QACZC,QACC;IACF;IACAC,MAAM;QACLH,MAAM;QACNC,YAAY;QACZC,QAAQ;IACT;IACAE,KAAK;QACJJ,MAAM;QACNC,YAAY;QACZC,QAAQ;IACT;IACAG,OAAO;QACNL,MAAM;QACNC,YAAY;QACZC,QAAQ;IACT;IACAI,QAAQ;QACPN,MAAM;QACNC,YAAY;QACZC,QAAQ;IACT;AACD;AAEA,SAASK,sBAAsB,EAC9BC,cAAc,EACdC,SAAS,EACTC,OAAO,EACiB;IACxB,qBACC,MAACnB;QAAOoB,OAAOH;QAAgBI,eAAeH;;0BAC7C,KAACf;gBACAmB,WAAW,CAAC,+CAA+C,EAAEf,aAAa,CAACU,eAA6C,CAACR,IAAI,CAAC,CAAC,EAAEF,aAAa,CAACU,eAA6C,CAACP,UAAU,CAAC,CAAC,EAAEH,aAAa,CAACU,eAA6C,CAACN,MAAM,EAAE;0BAE/Q,cAAA,KAACP;;0BAEF,KAACH;0BACCkB,QAAQI,GAAG,CAAC,CAACC,uBACb,KAACtB;wBAAwBkB,OAAOI;kCAC/B,cAAA,MAACC;4BACAH,WAAW,GAAGf,aAAa,CAACiB,OAAqC,CAACf,IAAI,EAAE;;gCAEvE;gCACAe;gCAAQ;;;uBALMA;;;;AAYtB;AAEA,SAASE,kBAAkB,EAC1BJ,SAAS,EACTL,cAAc,EACdC,SAAS,EACTC,OAAO,EACPQ,UAAU,EACVC,aAAa,EACW;IACxB,qBACC,MAACC;QAAIP,WAAWjB,GAAG,QAAQiB;;0BAC1B,KAACN;gBACAC,gBAAgBA;gBAChBC,WAAWA;gBACXC,SAASA;;0BAEV,KAACpB;gBACAuB,WAAW,CAAC,eAAe,EAAEf,aAAa,CAACU,eAA6C,CAACN,MAAM,EAAE;gBACjGS,OAAOO;gBACPG,yBAAW,KAACxB;oBAASG,MAAM,GAAGQ,eAAe,CAAC,EAAEU,YAAY;;gBAC3D,GAAIC,kBAAkBG,YAAY;oBAAEC,UAAUJ;gBAAc,IAAI,CAAC,CAAC;;;;AAIvE;AAEA,SAASF,iBAAiB,EAA+BnB,aAAa,GAAG"}
+{"version":3,"sources":["../../../src/components/request-line-editor.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { toast } from \"sonner\";\nimport { Input } from \"#shadcn/components/ui/input\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"#shadcn/components/ui/select\";\nimport { cn } from \"#shadcn/lib/utils\";\nimport { CopyIcon } from \"./copy-icon\";\n\nconst METHODS = [\"GET\", \"POST\", \"PUT\", \"PATCH\", \"DELETE\"] as const;\ntype RequestMethod = (typeof METHODS)[number];\n\nconst requestMethodVariants = cva<{ method: { [K in RequestMethod]: string } }>(\n\tcn(\n\t\t\"border-r-0\",\n\t\t\"rounded-r-none\",\n\t\t\"shadow-none\",\n\t\t\"typo-label\",\n\t\t\"text-left\",\n\t\t\"items-center\",\n\t\t\"w-26\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\tmethod: {\n\t\t\t\tGET: \"text-utility-green [&_svg]:text-utility-green\",\n\t\t\t\tPOST: \"text-utility-yellow [&_svg]:text-utility-yellow\",\n\t\t\t\tPUT: \"text-utility-blue [&_svg]:text-utility-blue \",\n\t\t\t\tPATCH: \"text-utility-violet [&_svg]:text-utility-violet\",\n\t\t\t\tDELETE: \"text-utility-red [&_svg]:text-utility-red\",\n\t\t\t},\n\t\t},\n\t},\n);\n\ntype RequestMethodSelectorProps = {\n\tvalue: string;\n\tonValueChange?: (newMethod: string) => void;\n};\n\nfunction isKnownMethod(candidate: string): candidate is RequestMethod {\n\tconst methods: readonly string[] = METHODS;\n\treturn methods.includes(candidate);\n}\n\nfunction RequestMethodSelector({\n\tvalue,\n\tonValueChange,\n}: RequestMethodSelectorProps) {\n\treturn (\n\t\t<Select\n\t\t\tvalue={value}\n\t\t\t{...(onValueChange ? { onValueChange: onValueChange } : {})}\n\t\t>\n\t\t\t<SelectTrigger\n\t\t\t\tclassName={requestMethodVariants(\n\t\t\t\t\tisKnownMethod(value) ? { method: value } : undefined,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<SelectValue>{value}</SelectValue>\n\t\t\t</SelectTrigger>\n\t\t\t<SelectContent>\n\t\t\t\t{METHODS.map((method) => (\n\t\t\t\t\t<SelectItem key={method} value={method}>\n\t\t\t\t\t\t<span className={requestMethodVariants({ method: method })}>\n\t\t\t\t\t\t\t{method}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</SelectItem>\n\t\t\t\t))}\n\t\t\t</SelectContent>\n\t\t</Select>\n\t);\n}\n\ntype RequestLineEditorProps = {\n\tmethod: string;\n\tplaceholder?: string;\n\tautoFocus?: boolean;\n\tonMethodChange: (newMethod: string) => void;\n\tpath?: string | undefined;\n\tonPathChange?: React.ChangeEventHandler<HTMLInputElement>;\n\tclassName?: string;\n};\n\nfunction RequestLineEditor({\n\tclassName,\n\tmethod,\n\tonMethodChange,\n\tpath,\n\tplaceholder,\n\tautoFocus,\n\tonPathChange,\n}: RequestLineEditorProps) {\n\treturn (\n\t\t<div className={cn(\"flex\", className)}>\n\t\t\t<RequestMethodSelector value={method} onValueChange={onMethodChange} />\n\t\t\t<Input\n\t\t\t\tclassName=\"rounded-l-none\"\n\t\t\t\tvalue={path}\n\t\t\t\tautoFocus={autoFocus}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\trightSlot={\n\t\t\t\t\t<CopyIcon\n\t\t\t\t\t\ttext={`${method} ${path}`}\n\t\t\t\t\t\ttooltipText=\"Copy request line\"\n\t\t\t\t\t\tshowToast={false}\n\t\t\t\t\t\tonCopy={(text) => {\n\t\t\t\t\t\t\t// Custom toast for request line\n\t\t\t\t\t\t\tconst truncatedText =\n\t\t\t\t\t\t\t\ttext.length > 30 ? `${text.slice(0, 30)}...` : text;\n\t\t\t\t\t\t\ttoast(\n\t\t\t\t\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t\t\t<span className=\"typo-body\">Request line copied</span>\n\t\t\t\t\t\t\t\t\t<span className=\"typo-code text-text-secondary\">\n\t\t\t\t\t\t\t\t\t\t{truncatedText}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tduration: 2000,\n\t\t\t\t\t\t\t\t},\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}\n\t\t\t\t{...(onPathChange !== undefined ? { onChange: onPathChange } : {})}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport {\n\tRequestLineEditor,\n\ttype RequestLineEditorProps,\n\trequestMethodVariants,\n};\n"],"names":["cva","toast","Input","Select","SelectContent","SelectItem","SelectTrigger","SelectValue","cn","CopyIcon","METHODS","requestMethodVariants","variants","method","GET","POST","PUT","PATCH","DELETE","isKnownMethod","candidate","methods","includes","RequestMethodSelector","value","onValueChange","className","undefined","map","span","RequestLineEditor","onMethodChange","path","placeholder","autoFocus","onPathChange","div","rightSlot","text","tooltipText","showToast","onCopy","truncatedText","length","slice","duration","onChange"],"mappings":";AAAA,SAASA,GAAG,QAAQ,2BAA2B;AAE/C,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,KAAK,QAAQ,mCAA8B;AACpD,SACCC,MAAM,EACNC,aAAa,EACbC,UAAU,EACVC,aAAa,EACbC,WAAW,QACL,oCAA+B;AACtC,SAASC,EAAE,QAAQ,yBAAoB;AACvC,SAASC,QAAQ,QAAQ,iBAAc;AAEvC,MAAMC,UAAU;IAAC;IAAO;IAAQ;IAAO;IAAS;CAAS;AAGzD,MAAMC,wBAAwBX,IAC7BQ,GACC,cACA,kBACA,eACA,cACA,aACA,gBACA,SAED;IACCI,UAAU;QACTC,QAAQ;YACPC,KAAK;YACLC,MAAM;YACNC,KAAK;YACLC,OAAO;YACPC,QAAQ;QACT;IACD;AACD;AAQD,SAASC,cAAcC,SAAiB;IACvC,MAAMC,UAA6BX;IACnC,OAAOW,QAAQC,QAAQ,CAACF;AACzB;AAEA,SAASG,sBAAsB,EAC9BC,KAAK,EACLC,aAAa,EACe;IAC5B,qBACC,MAACtB;QACAqB,OAAOA;QACN,GAAIC,gBAAgB;YAAEA,eAAeA;QAAc,IAAI,CAAC,CAAC;;0BAE1D,KAACnB;gBACAoB,WAAWf,sBACVQ,cAAcK,SAAS;oBAAEX,QAAQW;gBAAM,IAAIG;0BAG5C,cAAA,KAACpB;8BAAaiB;;;0BAEf,KAACpB;0BACCM,QAAQkB,GAAG,CAAC,CAACf,uBACb,KAACR;wBAAwBmB,OAAOX;kCAC/B,cAAA,KAACgB;4BAAKH,WAAWf,sBAAsB;gCAAEE,QAAQA;4BAAO;sCACtDA;;uBAFcA;;;;AAStB;AAYA,SAASiB,kBAAkB,EAC1BJ,SAAS,EACTb,MAAM,EACNkB,cAAc,EACdC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,YAAY,EACY;IACxB,qBACC,MAACC;QAAIV,WAAWlB,GAAG,QAAQkB;;0BAC1B,KAACH;gBAAsBC,OAAOX;gBAAQY,eAAeM;;0BACrD,KAAC7B;gBACAwB,WAAU;gBACVF,OAAOQ;gBACPE,WAAWA;gBACXD,aAAaA;gBACbI,yBACC,KAAC5B;oBACA6B,MAAM,GAAGzB,OAAO,CAAC,EAAEmB,MAAM;oBACzBO,aAAY;oBACZC,WAAW;oBACXC,QAAQ,CAACH;wBACR,gCAAgC;wBAChC,MAAMI,gBACLJ,KAAKK,MAAM,GAAG,KAAK,GAAGL,KAAKM,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,GAAGN;wBAChDrC,oBACC,MAACmC;4BAAIV,WAAU;;8CACd,KAACG;oCAAKH,WAAU;8CAAY;;8CAC5B,KAACG;oCAAKH,WAAU;8CACdgB;;;4BAGH;4BACCG,UAAU;wBACX;oBAEF;;gBAGD,GAAIV,iBAAiBR,YAAY;oBAAEmB,UAAUX;gBAAa,IAAI,CAAC,CAAC;;;;AAIrE;AAEA,SACCL,iBAAiB,EAEjBnB,qBAAqB,GACpB"}

package/dist/src/components/request-line-editor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"request-line-editor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/request-line-editor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EACN,iBAAiB,EAEjB,MAAM,uBAAuB,CAAC;AAE/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAOxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AA4BhD,eAAO,MAAM,GAAG,EAAE,KAOjB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAOjB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC"}
+{"version":3,"file":"request-line-editor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/request-line-editor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EACN,iBAAiB,EAEjB,MAAM,uBAAuB,CAAC;AAE/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAOxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAuBhD,eAAO,MAAM,GAAG,EAAE,KAMjB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAMjB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC"}

package/dist/src/components/request-line-editor.stories.js

@@ -13,9 +13,9 @@ const meta = {
     ]
 };
 export default meta;
-function RequestLineEditorWrapper({ selectedMethod, methods, inputValue }) {
-    const [currentSelectedMethod, setMethod] = React.useState(selectedMethod);
-    const [currentInputValue, setInputValue] = React.useState(inputValue);
+function RequestLineEditorWrapper({ method, path }) {
+    const [currentSelectedMethod, setMethod] = React.useState(method);
+    const [currentInputValue, setInputValue] = React.useState(path);
     const actionSetMethod = (method)=>{
         action("setMethod")(method);
         setMethod(method);
@@ -25,24 +25,16 @@ function RequestLineEditorWrapper({ selectedMethod, methods, inputValue }) {
         setInputValue(event.target.value);
     };
     return /*#__PURE__*/ _jsx(RequestLineEditor, {
-        methods: methods,
-        selectedMethod: currentSelectedMethod,
-        setMethod: actionSetMethod,
-        inputValue: currentInputValue,
-        onInputChange: actionSetInputValue
+        method: currentSelectedMethod,
+        onMethodChange: actionSetMethod,
+        path: currentInputValue,
+        onPathChange: actionSetInputValue
     });
 }
 export const GET = {
     args: {
-        selectedMethod: "GET",
-        methods: [
-            "GET",
-            "POST",
-            "PUT",
-            "PATCH",
-            "DELETE"
-        ],
-        inputValue: "/fhir/Patient"
+        method: "GET",
+        path: "/fhir/Patient"
     },
     render: (args)=>/*#__PURE__*/ _jsx(RequestLineEditorWrapper, {
             ...args
@@ -50,15 +42,8 @@ export const GET = {
 };
 export const POST = {
     args: {
-        selectedMethod: "POST",
-        methods: [
-            "GET",
-            "POST",
-            "PUT",
-            "PATCH",
-            "DELETE"
-        ],
-        inputValue: "/fhir/Patient"
+        method: "POST",
+        path: "/fhir/Patient"
     },
     render: (args)=>/*#__PURE__*/ _jsx(RequestLineEditorWrapper, {
             ...args
@@ -66,15 +51,8 @@ export const POST = {
 };
 export const PUT = {
     args: {
-        selectedMethod: "PUT",
-        methods: [
-            "GET",
-            "POST",
-            "PUT",
-            "PATCH",
-            "DELETE"
-        ],
-        inputValue: "/fhir/Patient"
+        method: "PUT",
+        path: "/fhir/Patient"
     },
     render: (args)=>/*#__PURE__*/ _jsx(RequestLineEditorWrapper, {
             ...args
@@ -82,15 +60,8 @@ export const PUT = {
 };
 export const PATCH = {
     args: {
-        selectedMethod: "PATCH",
-        methods: [
-            "GET",
-            "POST",
-            "PUT",
-            "PATCH",
-            "DELETE"
-        ],
-        inputValue: "/fhir/Patient"
+        method: "PATCH",
+        path: "/fhir/Patient"
     },
     render: (args)=>/*#__PURE__*/ _jsx(RequestLineEditorWrapper, {
             ...args
@@ -98,15 +69,8 @@ export const PATCH = {
 };
 export const DELETE = {
     args: {
-        selectedMethod: "DELETE",
-        methods: [
-            "GET",
-            "POST",
-            "PUT",
-            "PATCH",
-            "DELETE"
-        ],
-        inputValue: "/fhir/Patient"
+        method: "DELETE",
+        path: "/fhir/Patient"
     },
     render: (args)=>/*#__PURE__*/ _jsx(RequestLineEditorWrapper, {
             ...args

package/dist/src/components/request-line-editor.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/request-line-editor.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport * as React from \"react\";\nimport { action } from \"storybook/actions\";\nimport {\n\tRequestLineEditor,\n\ttype RequestLineEditorProps,\n} from \"./request-line-editor\";\n\nconst meta: Meta<typeof RequestLineEditor> = {\n\ttitle: \"Component/Request line editor\",\n\tcomponent: RequestLineEditor,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RequestLineEditor>;\n\nfunction RequestLineEditorWrapper({\n\tselectedMethod,\n\tmethods,\n\tinputValue,\n}: RequestLineEditorProps) {\n\tconst [currentSelectedMethod, setMethod] = React.useState(selectedMethod);\n\tconst [currentInputValue, setInputValue] = React.useState(inputValue);\n\tconst actionSetMethod = (method: string) => {\n\t\taction(\"setMethod\")(method);\n\t\tsetMethod(method);\n\t};\n\tconst actionSetInputValue = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\taction(\"setMethod\")(event);\n\t\tsetInputValue(event.target.value);\n\t};\n\treturn (\n\t\t<RequestLineEditor\n\t\t\tmethods={methods}\n\t\t\tselectedMethod={currentSelectedMethod}\n\t\t\tsetMethod={actionSetMethod}\n\t\t\tinputValue={currentInputValue}\n\t\t\tonInputChange={actionSetInputValue}\n\t\t/>\n\t);\n}\n\nexport const GET: Story = {\n\targs: {\n\t\tselectedMethod: \"GET\",\n\t\tmethods: [\"GET\", \"POST\", \"PUT\", \"PATCH\", \"DELETE\"],\n\t\tinputValue: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n\nexport const POST: Story = {\n\targs: {\n\t\tselectedMethod: \"POST\",\n\t\tmethods: [\"GET\", \"POST\", \"PUT\", \"PATCH\", \"DELETE\"],\n\t\tinputValue: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n\nexport const PUT: Story = {\n\targs: {\n\t\tselectedMethod: \"PUT\",\n\t\tmethods: [\"GET\", \"POST\", \"PUT\", \"PATCH\", \"DELETE\"],\n\t\tinputValue: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n\nexport const PATCH: Story = {\n\targs: {\n\t\tselectedMethod: \"PATCH\",\n\t\tmethods: [\"GET\", \"POST\", \"PUT\", \"PATCH\", \"DELETE\"],\n\t\tinputValue: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n\nexport const DELETE: Story = {\n\targs: {\n\t\tselectedMethod: \"DELETE\",\n\t\tmethods: [\"GET\", \"POST\", \"PUT\", \"PATCH\", \"DELETE\"],\n\t\tinputValue: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n"],"names":["React","action","RequestLineEditor","meta","title","component","parameters","layout","tags","RequestLineEditorWrapper","selectedMethod","methods","inputValue","currentSelectedMethod","setMethod","useState","currentInputValue","setInputValue","actionSetMethod","method","actionSetInputValue","event","target","value","onInputChange","GET","args","render","POST","PUT","PATCH","DELETE"],"mappings":";AACA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SACCC,iBAAiB,QAEX,2BAAwB;AAE/B,MAAMC,OAAuC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;AACnB;AAEA,eAAeL,KAAK;AAGpB,SAASM,yBAAyB,EACjCC,cAAc,EACdC,OAAO,EACPC,UAAU,EACc;IACxB,MAAM,CAACC,uBAAuBC,UAAU,GAAGd,MAAMe,QAAQ,CAACL;IAC1D,MAAM,CAACM,mBAAmBC,cAAc,GAAGjB,MAAMe,QAAQ,CAACH;IAC1D,MAAMM,kBAAkB,CAACC;QACxBlB,OAAO,aAAakB;QACpBL,UAAUK;IACX;IACA,MAAMC,sBAAsB,CAACC;QAC5BpB,OAAO,aAAaoB;QACpBJ,cAAcI,MAAMC,MAAM,CAACC,KAAK;IACjC;IACA,qBACC,KAACrB;QACAS,SAASA;QACTD,gBAAgBG;QAChBC,WAAWI;QACXN,YAAYI;QACZQ,eAAeJ;;AAGlB;AAEA,OAAO,MAAMK,MAAa;IACzBC,MAAM;QACLhB,gBAAgB;QAChBC,SAAS;YAAC;YAAO;YAAQ;YAAO;YAAS;SAAS;QAClDC,YAAY;IACb;IACAe,QAAQ,CAACD,qBAAS,KAACjB;YAA0B,GAAGiB,IAAI;;AACrD,EAAE;AAEF,OAAO,MAAME,OAAc;IAC1BF,MAAM;QACLhB,gBAAgB;QAChBC,SAAS;YAAC;YAAO;YAAQ;YAAO;YAAS;SAAS;QAClDC,YAAY;IACb;IACAe,QAAQ,CAACD,qBAAS,KAACjB;YAA0B,GAAGiB,IAAI;;AACrD,EAAE;AAEF,OAAO,MAAMG,MAAa;IACzBH,MAAM;QACLhB,gBAAgB;QAChBC,SAAS;YAAC;YAAO;YAAQ;YAAO;YAAS;SAAS;QAClDC,YAAY;IACb;IACAe,QAAQ,CAACD,qBAAS,KAACjB;YAA0B,GAAGiB,IAAI;;AACrD,EAAE;AAEF,OAAO,MAAMI,QAAe;IAC3BJ,MAAM;QACLhB,gBAAgB;QAChBC,SAAS;YAAC;YAAO;YAAQ;YAAO;YAAS;SAAS;QAClDC,YAAY;IACb;IACAe,QAAQ,CAACD,qBAAS,KAACjB;YAA0B,GAAGiB,IAAI;;AACrD,EAAE;AAEF,OAAO,MAAMK,SAAgB;IAC5BL,MAAM;QACLhB,gBAAgB;QAChBC,SAAS;YAAC;YAAO;YAAQ;YAAO;YAAS;SAAS;QAClDC,YAAY;IACb;IACAe,QAAQ,CAACD,qBAAS,KAACjB;YAA0B,GAAGiB,IAAI;;AACrD,EAAE"}
+{"version":3,"sources":["../../../src/components/request-line-editor.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport * as React from \"react\";\nimport { action } from \"storybook/actions\";\nimport {\n\tRequestLineEditor,\n\ttype RequestLineEditorProps,\n} from \"./request-line-editor\";\n\nconst meta: Meta<typeof RequestLineEditor> = {\n\ttitle: \"Component/Request line editor\",\n\tcomponent: RequestLineEditor,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof RequestLineEditor>;\n\nfunction RequestLineEditorWrapper({ method, path }: RequestLineEditorProps) {\n\tconst [currentSelectedMethod, setMethod] = React.useState(method);\n\tconst [currentInputValue, setInputValue] = React.useState(path);\n\tconst actionSetMethod = (method: string) => {\n\t\taction(\"setMethod\")(method);\n\t\tsetMethod(method);\n\t};\n\tconst actionSetInputValue = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\taction(\"setMethod\")(event);\n\t\tsetInputValue(event.target.value);\n\t};\n\treturn (\n\t\t<RequestLineEditor\n\t\t\tmethod={currentSelectedMethod}\n\t\t\tonMethodChange={actionSetMethod}\n\t\t\tpath={currentInputValue}\n\t\t\tonPathChange={actionSetInputValue}\n\t\t/>\n\t);\n}\n\nexport const GET: Story = {\n\targs: {\n\t\tmethod: \"GET\",\n\t\tpath: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n\nexport const POST: Story = {\n\targs: {\n\t\tmethod: \"POST\",\n\t\tpath: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n\nexport const PUT: Story = {\n\targs: {\n\t\tmethod: \"PUT\",\n\t\tpath: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n\nexport const PATCH: Story = {\n\targs: {\n\t\tmethod: \"PATCH\",\n\t\tpath: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n\nexport const DELETE: Story = {\n\targs: {\n\t\tmethod: \"DELETE\",\n\t\tpath: \"/fhir/Patient\",\n\t},\n\trender: (args) => <RequestLineEditorWrapper {...args} />,\n};\n"],"names":["React","action","RequestLineEditor","meta","title","component","parameters","layout","tags","RequestLineEditorWrapper","method","path","currentSelectedMethod","setMethod","useState","currentInputValue","setInputValue","actionSetMethod","actionSetInputValue","event","target","value","onMethodChange","onPathChange","GET","args","render","POST","PUT","PATCH","DELETE"],"mappings":";AACA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SACCC,iBAAiB,QAEX,2BAAwB;AAE/B,MAAMC,OAAuC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;AACnB;AAEA,eAAeL,KAAK;AAGpB,SAASM,yBAAyB,EAAEC,MAAM,EAAEC,IAAI,EAA0B;IACzE,MAAM,CAACC,uBAAuBC,UAAU,GAAGb,MAAMc,QAAQ,CAACJ;IAC1D,MAAM,CAACK,mBAAmBC,cAAc,GAAGhB,MAAMc,QAAQ,CAACH;IAC1D,MAAMM,kBAAkB,CAACP;QACxBT,OAAO,aAAaS;QACpBG,UAAUH;IACX;IACA,MAAMQ,sBAAsB,CAACC;QAC5BlB,OAAO,aAAakB;QACpBH,cAAcG,MAAMC,MAAM,CAACC,KAAK;IACjC;IACA,qBACC,KAACnB;QACAQ,QAAQE;QACRU,gBAAgBL;QAChBN,MAAMI;QACNQ,cAAcL;;AAGjB;AAEA,OAAO,MAAMM,MAAa;IACzBC,MAAM;QACLf,QAAQ;QACRC,MAAM;IACP;IACAe,QAAQ,CAACD,qBAAS,KAAChB;YAA0B,GAAGgB,IAAI;;AACrD,EAAE;AAEF,OAAO,MAAME,OAAc;IAC1BF,MAAM;QACLf,QAAQ;QACRC,MAAM;IACP;IACAe,QAAQ,CAACD,qBAAS,KAAChB;YAA0B,GAAGgB,IAAI;;AACrD,EAAE;AAEF,OAAO,MAAMG,MAAa;IACzBH,MAAM;QACLf,QAAQ;QACRC,MAAM;IACP;IACAe,QAAQ,CAACD,qBAAS,KAAChB;YAA0B,GAAGgB,IAAI;;AACrD,EAAE;AAEF,OAAO,MAAMI,QAAe;IAC3BJ,MAAM;QACLf,QAAQ;QACRC,MAAM;IACP;IACAe,QAAQ,CAACD,qBAAS,KAAChB;YAA0B,GAAGgB,IAAI;;AACrD,EAAE;AAEF,OAAO,MAAMK,SAAgB;IAC5BL,MAAM;QACLf,QAAQ;QACRC,MAAM;IACP;IACAe,QAAQ,CAACD,qBAAS,KAAChB;YAA0B,GAAGgB,IAAI;;AACrD,EAAE"}

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export interface SegmentControlProps {
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+}
+interface SegmentControlItemProps {
+    children: ReactNode;
+    value: string;
+}
+declare const SegmentControlItem: ({ children, value }: SegmentControlItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const SegmentControl: ({ children, defaultValue, onValueChange, name, }: SegmentControlProps & {
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export { SegmentControl, SegmentControlItem };
+//# sourceMappingURL=segment-control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segment-control.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAWlE,MAAM,WAAW,mBAAmB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,uBAAuB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACd;AAeD,QAAA,MAAM,kBAAkB,GAAI,qBAAqB,uBAAuB,4CAqBvE,CAAC;AAEF,QAAA,MAAM,cAAc,GAAI,kDAKrB,mBAAmB,GAAG;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,4CAchD,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { cn } from "../shadcn/lib/utils.js";
+const SegmentControlContext = /*#__PURE__*/ createContext({});
+const segmentControlItemClass = cn("flex", "items-center", "justify-center", "px-2", "py-0.5", "text-sm", "cursor-pointer", "rounded-2xl", "text-white/80", "peer-checked:bg-bg-primary", "peer-checked:text-text-secondary");
+const SegmentControlItem = ({ children, value })=>{
+    const { defaultValue, onValueChange, name } = useContext(SegmentControlContext);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "relative",
+        children: [
+            /*#__PURE__*/ _jsx("input", {
+                type: "radio",
+                id: `${name}-${value}`,
+                name: name,
+                value: value,
+                defaultChecked: value === defaultValue,
+                onChange: (e)=>onValueChange?.(e.target.value),
+                className: "sr-only peer"
+            }),
+            /*#__PURE__*/ _jsx("label", {
+                htmlFor: `${name}-${value}`,
+                className: segmentControlItemClass,
+                children: children
+            })
+        ]
+    });
+};
+const SegmentControl = ({ children, defaultValue, onValueChange, name })=>{
+    const contextValue = {
+        ...defaultValue !== undefined && {
+            defaultValue
+        },
+        ...onValueChange !== undefined && {
+            onValueChange
+        },
+        name: name || "react-components-segment-control"
+    };
+    return /*#__PURE__*/ _jsx(SegmentControlContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "inline-flex bg-gray-500 p-0.5 gap-0 rounded-full",
+            children: children
+        })
+    });
+};
+export { SegmentControl, SegmentControlItem };
+
+//# sourceMappingURL=segment-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/segment-control.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\ninterface SegmentControlContextType {\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tname?: string;\n}\n\nconst SegmentControlContext = createContext<SegmentControlContextType>({});\n\nexport interface SegmentControlProps {\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\tname?: string;\n}\n\ninterface SegmentControlItemProps {\n\tchildren: ReactNode;\n\tvalue: string;\n}\nconst segmentControlItemClass = cn(\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"px-2\",\n\t\"py-0.5\",\n\t\"text-sm\",\n\t\"cursor-pointer\",\n\t\"rounded-2xl\",\n\t\"text-white/80\",\n\t\"peer-checked:bg-bg-primary\",\n\t\"peer-checked:text-text-secondary\",\n);\n\nconst SegmentControlItem = ({ children, value }: SegmentControlItemProps) => {\n\tconst { defaultValue, onValueChange, name } = useContext(\n\t\tSegmentControlContext,\n\t);\n\n\treturn (\n\t\t<div className=\"relative\">\n\t\t\t<input\n\t\t\t\ttype=\"radio\"\n\t\t\t\tid={`${name}-${value}`}\n\t\t\t\tname={name}\n\t\t\t\tvalue={value}\n\t\t\t\tdefaultChecked={value === defaultValue}\n\t\t\t\tonChange={(e) => onValueChange?.(e.target.value)}\n\t\t\t\tclassName=\"sr-only peer\"\n\t\t\t/>\n\t\t\t<label htmlFor={`${name}-${value}`} className={segmentControlItemClass}>\n\t\t\t\t{children}\n\t\t\t</label>\n\t\t</div>\n\t);\n};\n\nconst SegmentControl = ({\n\tchildren,\n\tdefaultValue,\n\tonValueChange,\n\tname,\n}: SegmentControlProps & { children?: ReactNode }) => {\n\tconst contextValue: SegmentControlContextType = {\n\t\t...(defaultValue !== undefined && { defaultValue }),\n\t\t...(onValueChange !== undefined && { onValueChange }),\n\t\tname: name || \"react-components-segment-control\",\n\t};\n\n\treturn (\n\t\t<SegmentControlContext.Provider value={contextValue}>\n\t\t\t<div className=\"inline-flex bg-gray-500 p-0.5 gap-0 rounded-full\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</SegmentControlContext.Provider>\n\t);\n};\n\nexport { SegmentControl, SegmentControlItem };\n"],"names":["createContext","useContext","cn","SegmentControlContext","segmentControlItemClass","SegmentControlItem","children","value","defaultValue","onValueChange","name","div","className","input","type","id","defaultChecked","onChange","e","target","label","htmlFor","SegmentControl","contextValue","undefined","Provider"],"mappings":";AAAA,SAASA,aAAa,EAAkBC,UAAU,QAAQ,QAAQ;AAClE,SAASC,EAAE,QAAQ,yBAAuB;AAQ1C,MAAMC,sCAAwBH,cAAyC,CAAC;AAYxE,MAAMI,0BAA0BF,GAC/B,QACA,gBACA,kBACA,QACA,UACA,WACA,kBACA,eACA,iBACA,8BACA;AAGD,MAAMG,qBAAqB,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAA2B;IACvE,MAAM,EAAEC,YAAY,EAAEC,aAAa,EAAEC,IAAI,EAAE,GAAGT,WAC7CE;IAGD,qBACC,MAACQ;QAAIC,WAAU;;0BACd,KAACC;gBACAC,MAAK;gBACLC,IAAI,GAAGL,KAAK,CAAC,EAAEH,OAAO;gBACtBG,MAAMA;gBACNH,OAAOA;gBACPS,gBAAgBT,UAAUC;gBAC1BS,UAAU,CAACC,IAAMT,gBAAgBS,EAAEC,MAAM,CAACZ,KAAK;gBAC/CK,WAAU;;0BAEX,KAACQ;gBAAMC,SAAS,GAAGX,KAAK,CAAC,EAAEH,OAAO;gBAAEK,WAAWR;0BAC7CE;;;;AAIL;AAEA,MAAMgB,iBAAiB,CAAC,EACvBhB,QAAQ,EACRE,YAAY,EACZC,aAAa,EACbC,IAAI,EAC4C;IAChD,MAAMa,eAA0C;QAC/C,GAAIf,iBAAiBgB,aAAa;YAAEhB;QAAa,CAAC;QAClD,GAAIC,kBAAkBe,aAAa;YAAEf;QAAc,CAAC;QACpDC,MAAMA,QAAQ;IACf;IAEA,qBACC,KAACP,sBAAsBsB,QAAQ;QAAClB,OAAOgB;kBACtC,cAAA,KAACZ;YAAIC,WAAU;sBACbN;;;AAIL;AAEA,SAASgB,cAAc,EAAEjB,kBAAkB,GAAG"}

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: ({ children, defaultValue, onValueChange, name, }: import("./segment-control").SegmentControlProps & {
+        children?: import("react").ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=segment-control.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segment-control.stories.d.ts","sourceRoot":"","sources":["../../../src/components/segment-control.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,QAAA,MAAM,IAAI;;;gBAyBorB,CAAC;;;;;;CAlBxpB,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SegmentControl, SegmentControlItem } from "./segment-control.js";
+const meta = {
+    title: "Component/SegmentControl",
+    component: SegmentControl,
+    parameters: {
+        layout: "centered"
+    },
+    tags: [
+        "autodocs"
+    ]
+};
+export default meta;
+export const Default = {
+    render: ()=>{
+        return /*#__PURE__*/ _jsxs(SegmentControl, {
+            defaultValue: "yaml",
+            onValueChange: (value)=>console.log("Selected:", value),
+            children: [
+                /*#__PURE__*/ _jsx(SegmentControlItem, {
+                    value: "yaml",
+                    children: "YAML"
+                }),
+                /*#__PURE__*/ _jsx(SegmentControlItem, {
+                    value: "json",
+                    children: "JSON"
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=segment-control.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/segment-control.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\n\nimport { SegmentControl, SegmentControlItem } 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\trender: () => {\n\t\treturn (\n\t\t\t<SegmentControl\n\t\t\t\tdefaultValue=\"yaml\"\n\t\t\t\tonValueChange={(value) => console.log(\"Selected:\", value)}\n\t\t\t>\n\t\t\t\t<SegmentControlItem value=\"yaml\">YAML</SegmentControlItem>\n\t\t\t\t<SegmentControlItem value=\"json\">JSON</SegmentControlItem>\n\t\t\t</SegmentControl>\n\t\t);\n\t},\n};\n"],"names":["SegmentControl","SegmentControlItem","meta","title","component","parameters","layout","tags","Default","render","defaultValue","onValueChange","value","console","log"],"mappings":";AAEA,SAASA,cAAc,EAAEC,kBAAkB,QAAQ,uBAAoB;AAEvE,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWJ;IACXK,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;AACnB;AAEA,eAAeL,KAAK;AAGpB,OAAO,MAAMM,UAAiB;IAC7BC,QAAQ;QACP,qBACC,MAACT;YACAU,cAAa;YACbC,eAAe,CAACC,QAAUC,QAAQC,GAAG,CAAC,aAAaF;;8BAEnD,KAACX;oBAAmBW,OAAM;8BAAO;;8BACjC,KAACX;oBAAmBW,OAAM;8BAAO;;;;IAGpC;AACD,EAAE"}

package/dist/src/components/split-button.d.ts

@@ -0,0 +1,5 @@
+declare const SplitButton: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export { SplitButton };
+//# sourceMappingURL=split-button.d.ts.map

package/dist/src/components/split-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../src/components/split-button.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,WAAW,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAE/D,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/components/split-button.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../shadcn/lib/utils.js";
+const splitButtonStyles = cn("flex", "*:data-[slot=button]:rounded-r-none", "*:data-[slot=dropdown-menu-trigger]:px-1", "*:data-[slot=dropdown-menu-trigger]:py-2", "*:data-[slot=dropdown-menu-trigger]:rounded-l-none", "*:data-[slot=dropdown-menu-trigger]:border-l-0", "*:data-[slot=dropdown-menu-trigger]:border-l-0");
+const SplitButton = ({ children })=>{
+    return /*#__PURE__*/ _jsx("div", {
+        className: splitButtonStyles,
+        children: children
+    });
+};
+export { SplitButton };
+
+//# sourceMappingURL=split-button.js.map

package/dist/src/components/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/split-button.tsx"],"sourcesContent":["import { cn } from \"#shadcn/lib/utils\";\n\nconst splitButtonStyles = cn(\n\t\"flex\",\n\t\"*:data-[slot=button]:rounded-r-none\",\n\t\"*:data-[slot=dropdown-menu-trigger]:px-1\",\n\t\"*:data-[slot=dropdown-menu-trigger]:py-2\",\n\t\"*:data-[slot=dropdown-menu-trigger]:rounded-l-none\",\n\t\"*:data-[slot=dropdown-menu-trigger]:border-l-0\",\n\t\"*:data-[slot=dropdown-menu-trigger]:border-l-0\",\n);\n\nconst SplitButton = ({ children }: { children: React.ReactNode }) => {\n\treturn <div className={splitButtonStyles}>{children}</div>;\n};\n\nexport { SplitButton };\n"],"names":["cn","splitButtonStyles","SplitButton","children","div","className"],"mappings":";AAAA,SAASA,EAAE,QAAQ,yBAAoB;AAEvC,MAAMC,oBAAoBD,GACzB,QACA,uCACA,4CACA,4CACA,sDACA,kDACA;AAGD,MAAME,cAAc,CAAC,EAAEC,QAAQ,EAAiC;IAC/D,qBAAO,KAACC;QAAIC,WAAWJ;kBAAoBE;;AAC5C;AAEA,SAASD,WAAW,GAAG"}

package/dist/src/components/split-button.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { SplitButton } from "./split-button";
+declare const meta: Meta<typeof SplitButton>;
+export default meta;
+type Story = StoryObj<typeof SplitButton>;
+export declare const Default: Story;
+//# sourceMappingURL=split-button.stories.d.ts.map

package/dist/src/components/split-button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/split-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAW5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC"}

package/dist/src/components/split-button.stories.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, Plus, Save } from "lucide-react";
+import { Button } from "../shadcn/components/ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../shadcn/components/ui/dropdown-menu.js";
+import { SplitButton } from "./split-button.js";
+const meta = {
+    title: "Component/SplitButton",
+    component: SplitButton
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsxs(SplitButton, {
+            children: [
+                /*#__PURE__*/ _jsxs(Button, {
+                    variant: "secondary",
+                    children: [
+                        /*#__PURE__*/ _jsx(Save, {}),
+                        "Save"
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(DropdownMenu, {
+                    children: [
+                        /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                children: /*#__PURE__*/ _jsx(ChevronDown, {})
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                                    children: "Save to collection:"
+                                }),
+                                /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                                /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                    disabled: true,
+                                    children: "No collections"
+                                }),
+                                /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                                /*#__PURE__*/ _jsxs(DropdownMenuItem, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Plus, {
+                                            className: "text-fg-link"
+                                        }),
+                                        "New collection"
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=split-button.stories.js.map

package/dist/src/components/split-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/split-button.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { ChevronDown, Plus, Save } from \"lucide-react\";\nimport { Button } from \"#shadcn/components/ui/button.js\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuTrigger,\n} from \"#shadcn/components/ui/dropdown-menu.js\";\nimport { SplitButton } from \"./split-button\";\n\nconst meta: Meta<typeof SplitButton> = {\n\ttitle: \"Component/SplitButton\",\n\tcomponent: SplitButton,\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof SplitButton>;\n\nexport const Default: Story = {\n\trender: () => (\n\t\t<SplitButton>\n\t\t\t<Button variant=\"secondary\">\n\t\t\t\t<Save />\n\t\t\t\tSave\n\t\t\t</Button>\n\t\t\t<DropdownMenu>\n\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t<Button variant=\"secondary\">\n\t\t\t\t\t\t<ChevronDown />\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t<DropdownMenuContent>\n\t\t\t\t\t<DropdownMenuLabel>Save to collection:</DropdownMenuLabel>\n\t\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t\t<DropdownMenuItem disabled>No collections</DropdownMenuItem>\n\t\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t\t<Plus className=\"text-fg-link\" />\n\t\t\t\t\t\tNew collection\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\t\t</SplitButton>\n\t),\n};\n"],"names":["ChevronDown","Plus","Save","Button","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuTrigger","SplitButton","meta","title","component","Default","render","variant","asChild","disabled","className"],"mappings":";AACA,SAASA,WAAW,EAAEC,IAAI,EAAEC,IAAI,QAAQ,eAAe;AACvD,SAASC,MAAM,QAAQ,oCAAkC;AACzD,SACCC,YAAY,EACZC,mBAAmB,EACnBC,gBAAgB,EAChBC,iBAAiB,EACjBC,qBAAqB,EACrBC,mBAAmB,QACb,2CAAyC;AAChD,SAASC,WAAW,QAAQ,oBAAiB;AAE7C,MAAMC,OAAiC;IACtCC,OAAO;IACPC,WAAWH;AACZ;AAEA,eAAeC,KAAK;AAIpB,OAAO,MAAMG,UAAiB;IAC7BC,QAAQ,kBACP,MAACL;;8BACA,MAACP;oBAAOa,SAAQ;;sCACf,KAACd;wBAAO;;;8BAGT,MAACE;;sCACA,KAACK;4BAAoBQ,OAAO;sCAC3B,cAAA,KAACd;gCAAOa,SAAQ;0CACf,cAAA,KAAChB;;;sCAGH,MAACK;;8CACA,KAACE;8CAAkB;;8CACnB,KAACC;8CACD,KAACF;oCAAiBY,QAAQ;8CAAC;;8CAC3B,KAACV;8CACD,MAACF;;sDACA,KAACL;4CAAKkB,WAAU;;wCAAiB;;;;;;;;;AAOvC,EAAE"}

package/dist/src/components/tree-view.d.ts

@@ -0,0 +1,22 @@
+import type { ItemInstance, TreeInstance } from "@headless-tree/core";
+import React from "react";
+interface TreeViewItem<T> {
+    name: string;
+    children?: string[];
+    meta?: T;
+}
+declare function TreeView<T>({ rootItemId, items, selectedItemId, expandedItemIds, onSelectItem, customItemView, onRename, disableHover, zebra, horizontalLines, hideChevron, }: {
+    rootItemId: string;
+    selectedItemId?: string;
+    expandedItemIds?: string[];
+    onSelectItem?: (item: ItemInstance<TreeViewItem<T>>) => void;
+    items: Record<string, TreeViewItem<T>>;
+    customItemView?: (item: ItemInstance<TreeViewItem<T>>, tree: TreeInstance<TreeViewItem<T>>) => React.ReactNode;
+    onRename?: ((item: ItemInstance<TreeViewItem<T>>, value: string) => void) | undefined;
+    disableHover?: boolean;
+    zebra?: boolean;
+    horizontalLines?: boolean;
+    hideChevron?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { TreeView, type TreeViewItem, type TreeInstance };
+//# sourceMappingURL=tree-view.d.ts.map