@diwauhris/ui 1.0.0

package/lib/index27.mjs

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { File, UploadCloud, X } from "lucide-react";
+//#region src/ui-library/gallery/file-upload/FileUpload.tsx
+/**
+* FileUpload — Design System Component
+*
+* A styled file-selection trigger. Wraps a native <input type="file"> with a
+* drag-and-drop zone. Presentation-only — no HTTP upload logic.
+*
+* States: idle, drag-active, selected, disabled
+*
+* Accessibility:
+*   - The visible zone is a <label> wrapping a visually-hidden <input>.
+*   - <input> has aria-label describing the expected file.
+*   - Keyboard: Tab to focus the input; Enter/Space to open the picker.
+*   - Disabled: input has disabled attr; zone has aria-disabled="true".
+*/
+function FileUpload({ onFiles, accept, multiple = false, disabled = false, "aria-label": ariaLabel = "Upload file", className = "" }) {
+	const inputRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const [selected, setSelected] = useState([]);
+	const handleFiles = (files) => {
+		if (!files || files.length === 0) return;
+		const arr = Array.from(files);
+		setSelected(multiple ? arr : [arr[0]]);
+		onFiles?.(multiple ? arr : [arr[0]]);
+	};
+	const handleChange = (e) => {
+		handleFiles(e.target.files);
+		e.target.value = "";
+	};
+	const handleDrop = (e) => {
+		e.preventDefault();
+		setDragging(false);
+		if (disabled) return;
+		handleFiles(e.dataTransfer.files);
+	};
+	const handleDragOver = (e) => {
+		e.preventDefault();
+		if (!disabled) setDragging(true);
+	};
+	const handleDragLeave = () => setDragging(false);
+	const removeFile = (i) => {
+		setSelected((prev) => prev.filter((_, idx) => idx !== i));
+	};
+	const zoneClass = [
+		"flex flex-col items-center justify-center gap-3",
+		"rounded-2xl border-2 border-dashed p-8 text-center cursor-pointer",
+		"transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-blue/20",
+		dragging ? "border-brand-blue/60 bg-blue-50" : disabled ? "border-slate-100 bg-slate-50/40 cursor-not-allowed" : "border-slate-200 bg-white hover:border-brand-sky/50 hover:bg-[#eef2f8]",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: zoneClass,
+			onDrop: handleDrop,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			"aria-disabled": disabled,
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					type: "file",
+					accept,
+					multiple,
+					disabled,
+					onChange: handleChange,
+					"aria-label": ariaLabel,
+					className: "sr-only"
+				}),
+				/* @__PURE__ */ jsx(UploadCloud, {
+					size: 32,
+					className: dragging ? "text-brand-blue" : disabled ? "text-slate-300" : "text-slate-400",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: `text-sm font-semibold ${disabled ? "text-slate-400" : "text-slate-700"}`,
+					children: dragging ? "Drop to upload" : "Click or drag files here"
+				}), accept && /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-xs font-medium text-slate-400",
+					children: accept
+				})] })
+			]
+		}), selected.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "space-y-1.5",
+			"aria-label": "Selected files",
+			children: selected.map((file, i) => /* @__PURE__ */ jsxs("li", {
+				className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2.5",
+				children: [
+					/* @__PURE__ */ jsx(File, {
+						size: 14,
+						className: "shrink-0 text-brand-sky",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-xs font-semibold text-slate-700",
+						children: file.name
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 text-[10px] font-medium text-slate-400",
+						children: [(file.size / 1024).toFixed(0), " KB"]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => removeFile(i),
+						"aria-label": `Remove ${file.name}`,
+						className: "ml-1 shrink-0 rounded p-0.5 text-slate-400 hover:bg-rose-50 hover:text-rose-500 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200",
+						children: /* @__PURE__ */ jsx(X, { size: 12 })
+					})
+				]
+			}, `${file.name}-${i}`))
+		})]
+	});
+}
+//#endregion
+export { FileUpload };
+
+//# sourceMappingURL=index27.mjs.map

package/lib/index27.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index27.mjs","names":[],"sources":["../src/ui-library/gallery/file-upload/FileUpload.tsx"],"sourcesContent":["/**\n * FileUpload — Design System Component\n *\n * A styled file-selection trigger. Wraps a native <input type=\"file\"> with a\n * drag-and-drop zone. Presentation-only — no HTTP upload logic.\n *\n * States: idle, drag-active, selected, disabled\n *\n * Accessibility:\n *   - The visible zone is a <label> wrapping a visually-hidden <input>.\n *   - <input> has aria-label describing the expected file.\n *   - Keyboard: Tab to focus the input; Enter/Space to open the picker.\n *   - Disabled: input has disabled attr; zone has aria-disabled=\"true\".\n */\n\nimport { useRef, useState, type ChangeEvent, type DragEvent } from 'react';\nimport { UploadCloud, X, File } from 'lucide-react';\n\nexport interface FileUploadProps {\n  /** Called when files are selected via picker or drop. */\n  onFiles?: (files: File[]) => void;\n  /** Accepted MIME types / extensions, forwarded to <input accept>. */\n  accept?: string;\n  /** Allow selecting multiple files. Default: false */\n  multiple?: boolean;\n  /** Disable the upload zone. */\n  disabled?: boolean;\n  /** Accessible label describing the expected file type. */\n  'aria-label'?: string;\n  /** Additional class on the root element. */\n  className?: string;\n}\n\nexport function FileUpload({\n  onFiles,\n  accept,\n  multiple = false,\n  disabled = false,\n  'aria-label': ariaLabel = 'Upload file',\n  className = '',\n}: FileUploadProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = useState(false);\n  const [selected, setSelected] = useState<File[]>([]);\n\n  const handleFiles = (files: FileList | null) => {\n    if (!files || files.length === 0) return;\n    const arr = Array.from(files);\n    setSelected(multiple ? arr : [arr[0]!]);\n    onFiles?.(multiple ? arr : [arr[0]!]);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    handleFiles(e.target.files);\n    // Reset so same file can be re-selected\n    e.target.value = '';\n  };\n\n  const handleDrop = (e: DragEvent<HTMLLabelElement>) => {\n    e.preventDefault();\n    setDragging(false);\n    if (disabled) return;\n    handleFiles(e.dataTransfer.files);\n  };\n\n  const handleDragOver = (e: DragEvent<HTMLLabelElement>) => {\n    e.preventDefault();\n    if (!disabled) setDragging(true);\n  };\n\n  const handleDragLeave = () => setDragging(false);\n\n  const removeFile = (i: number) => {\n    setSelected((prev) => prev.filter((_, idx) => idx !== i));\n  };\n\n  const zoneClass = [\n    'flex flex-col items-center justify-center gap-3',\n    'rounded-2xl border-2 border-dashed p-8 text-center cursor-pointer',\n    'transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-brand-blue/20',\n    dragging\n      ? 'border-brand-blue/60 bg-blue-50'\n      : disabled\n      ? 'border-slate-100 bg-slate-50/40 cursor-not-allowed'\n      : 'border-slate-200 bg-white hover:border-brand-sky/50 hover:bg-[#eef2f8]',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className=\"space-y-3\">\n      <label\n        className={zoneClass}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        aria-disabled={disabled}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleChange}\n          aria-label={ariaLabel}\n          className=\"sr-only\"\n        />\n        <UploadCloud\n          size={32}\n          className={dragging ? 'text-brand-blue' : disabled ? 'text-slate-300' : 'text-slate-400'}\n          aria-hidden=\"true\"\n        />\n        <div>\n          <p className={`text-sm font-semibold ${disabled ? 'text-slate-400' : 'text-slate-700'}`}>\n            {dragging ? 'Drop to upload' : 'Click or drag files here'}\n          </p>\n          {accept && (\n            <p className=\"mt-0.5 text-xs font-medium text-slate-400\">{accept}</p>\n          )}\n        </div>\n      </label>\n\n      {selected.length > 0 && (\n        <ul className=\"space-y-1.5\" aria-label=\"Selected files\">\n          {selected.map((file, i) => (\n            <li\n              key={`${file.name}-${i}`}\n              className=\"flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2.5\"\n            >\n              <File size={14} className=\"shrink-0 text-brand-sky\" aria-hidden=\"true\" />\n              <span className=\"min-w-0 flex-1 truncate text-xs font-semibold text-slate-700\">\n                {file.name}\n              </span>\n              <span className=\"shrink-0 text-[10px] font-medium text-slate-400\">\n                {(file.size / 1024).toFixed(0)} KB\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => removeFile(i)}\n                aria-label={`Remove ${file.name}`}\n                className=\"ml-1 shrink-0 rounded p-0.5 text-slate-400 hover:bg-rose-50 hover:text-rose-500 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-200\"\n              >\n                <X size={12} />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiCA,SAAgB,WAAW,EACzB,SACA,QACA,WAAW,OACX,WAAW,OACX,cAAc,YAAY,eAC1B,YAAY,MACM;CAClB,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,UAAU,eAAe,SAAiB,CAAC,CAAC;CAEnD,MAAM,eAAe,UAA2B;EAC9C,IAAI,CAAC,SAAS,MAAM,WAAW,GAAG;EAClC,MAAM,MAAM,MAAM,KAAK,KAAK;EAC5B,YAAY,WAAW,MAAM,CAAC,IAAI,EAAG,CAAC;EACtC,UAAU,WAAW,MAAM,CAAC,IAAI,EAAG,CAAC;CACtC;CAEA,MAAM,gBAAgB,MAAqC;EACzD,YAAY,EAAE,OAAO,KAAK;EAE1B,EAAE,OAAO,QAAQ;CACnB;CAEA,MAAM,cAAc,MAAmC;EACrD,EAAE,eAAe;EACjB,YAAY,KAAK;EACjB,IAAI,UAAU;EACd,YAAY,EAAE,aAAa,KAAK;CAClC;CAEA,MAAM,kBAAkB,MAAmC;EACzD,EAAE,eAAe;EACjB,IAAI,CAAC,UAAU,YAAY,IAAI;CACjC;CAEA,MAAM,wBAAwB,YAAY,KAAK;CAE/C,MAAM,cAAc,MAAc;EAChC,aAAa,SAAS,KAAK,QAAQ,GAAG,QAAQ,QAAQ,CAAC,CAAC;CAC1D;CAEA,MAAM,YAAY;EAChB;EACA;EACA;EACA,WACI,oCACA,WACA,uDACA;EACJ;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,SAAD;GACE,WAAW;GACX,QAAQ;GACR,YAAY;GACZ,aAAa;GACb,iBAAe;GALjB,UAAA;IAOE,oBAAC,SAAD;KACE,KAAK;KACL,MAAK;KACG;KACE;KACA;KACV,UAAU;KACV,cAAY;KACZ,WAAU;IACX,CAAA;IACD,oBAAC,aAAD;KACE,MAAM;KACN,WAAW,WAAW,oBAAoB,WAAW,mBAAmB;KACxE,eAAY;IACb,CAAA;IACD,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,KAAD;KAAG,WAAW,yBAAyB,WAAW,mBAAmB;KAClE,UAAA,WAAW,mBAAmB;IAC9B,CAAA,GACF,UACC,oBAAC,KAAD;KAAG,WAAU;KAA6C,UAAA;IAAU,CAAA,CAEnE,EAAA,CAAA;GACA;EAEN,CAAA,GAAA,SAAS,SAAS,KACjB,oBAAC,MAAD;GAAI,WAAU;GAAc,cAAW;GACpC,UAAA,SAAS,KAAK,MAAM,MACnB,qBAAC,MAAD;IAEE,WAAU;IAFZ,UAAA;KAIE,oBAAC,MAAD;MAAM,MAAM;MAAI,WAAU;MAA0B,eAAY;KAAQ,CAAA;KACxE,oBAAC,QAAD;MAAM,WAAU;MACb,UAAA,KAAK;KACF,CAAA;KACN,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,EACI,KAAK,OAAO,KAAA,CAAM,QAAQ,CAAC,GAAE,KAC3B;;KACN,oBAAC,UAAD;MACE,MAAK;MACL,eAAe,WAAW,CAAC;MAC3B,cAAY,UAAU,KAAK;MAC3B,WAAU;MAEV,UAAA,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;KACR,CAAA;IACN;GAlBG,GAAA,GAAG,KAAK,KAAK,GAAG,GAkBnB,CACL;EACC,CAAA,CAEH;;AAET"}

package/lib/index28.cjs

@@ -0,0 +1,54 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+//#region src/ui-library/gallery/filter-chip/FilterChip.tsx
+/**
+* FilterChip — Design System Component
+*
+* A removable tag/chip for displaying active filters.
+* Purely presentational — no filter state, no URL state, no search logic.
+*
+* Accessibility:
+*   - The remove button has an aria-label describing what will be removed.
+*   - Disabled chips prevent removal.
+*   - The chip itself is not interactive — only the remove button is.
+*
+* Usage:
+*   <FilterChip label="Department: HR" onRemove={() => removeFilter('department')} />
+*   <FilterChip label="Status: Active" onRemove={handleRemove} />
+*   <FilterChip label="Read only" />       // no remove button
+*   <FilterChip label="Locked" disabled /> // disabled state
+*/
+function FilterChip({ label, onRemove, disabled = false, removeLabel = "Remove filter", className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: [
+			"inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border",
+			"py-1 pl-3 text-xs font-semibold",
+			onRemove ? "pr-1.5" : "pr-3",
+			disabled ? "border-slate-200 bg-slate-50 text-slate-400" : "border-brand-blue/30 bg-blue-50 text-brand-blue",
+			className
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			children: label
+		}), onRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: !disabled ? onRemove : void 0,
+			disabled,
+			"aria-label": removeLabel,
+			className: [
+				"flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				disabled ? "cursor-not-allowed text-slate-300" : "text-brand-blue hover:bg-blue-100 hover:text-brand-navy"
+			].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+				size: 10,
+				"aria-hidden": "true",
+				strokeWidth: 3
+			})
+		})]
+	});
+}
+//#endregion
+exports.FilterChip = FilterChip;
+
+//# sourceMappingURL=index28.cjs.map

package/lib/index28.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index28.cjs","names":[],"sources":["../src/ui-library/gallery/filter-chip/FilterChip.tsx"],"sourcesContent":["/**\n * FilterChip — Design System Component\n *\n * A removable tag/chip for displaying active filters.\n * Purely presentational — no filter state, no URL state, no search logic.\n *\n * Accessibility:\n *   - The remove button has an aria-label describing what will be removed.\n *   - Disabled chips prevent removal.\n *   - The chip itself is not interactive — only the remove button is.\n *\n * Usage:\n *   <FilterChip label=\"Department: HR\" onRemove={() => removeFilter('department')} />\n *   <FilterChip label=\"Status: Active\" onRemove={handleRemove} />\n *   <FilterChip label=\"Read only\" />       // no remove button\n *   <FilterChip label=\"Locked\" disabled /> // disabled state\n */\n\nimport { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nexport interface FilterChipProps {\n  /** Label content — string or ReactNode */\n  label: ReactNode;\n  /** When provided, renders a remove (×) button */\n  onRemove?: () => void;\n  /** Disables the remove button */\n  disabled?: boolean;\n  /** Optional accessible label for the remove button (defaults to \"Remove filter\") */\n  removeLabel?: string;\n  className?: string;\n}\n\nexport function FilterChip({\n  label,\n  onRemove,\n  disabled = false,\n  removeLabel = 'Remove filter',\n  className = '',\n}: FilterChipProps) {\n  return (\n    <span\n      className={[\n        'inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border',\n        'py-1 pl-3 text-xs font-semibold',\n        onRemove ? 'pr-1.5' : 'pr-3',\n        disabled\n          ? 'border-slate-200 bg-slate-50 text-slate-400'\n          : 'border-brand-blue/30 bg-blue-50 text-brand-blue',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Label — truncate long text */}\n      <span className=\"truncate\">{label}</span>\n\n      {/* Remove button */}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={!disabled ? onRemove : undefined}\n          disabled={disabled}\n          aria-label={removeLabel}\n          className={[\n            'flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n            disabled\n              ? 'cursor-not-allowed text-slate-300'\n              : 'text-brand-blue hover:bg-blue-100 hover:text-brand-navy',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <X size={10} aria-hidden=\"true\" strokeWidth={3} />\n        </button>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,WAAW,EACzB,OACA,UACA,WAAW,OACX,cAAc,iBACd,YAAY,MACM;CAClB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EACE,WAAW;GACT;GACA;GACA,WAAW,WAAW;GACtB,WACI,gDACA;GACJ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAXb,UAAA,CAcE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAY,UAAA;EAAY,CAAA,GAGvC,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GACE,MAAK;GACL,SAAS,CAAC,WAAW,WAAW,KAAA;GACtB;GACV,cAAY;GACZ,WAAW;IACT;IACA;IACA,WACI,sCACA;GACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,GAAD;IAAG,MAAM;IAAI,eAAY;IAAO,aAAa;GAAI,CAAA;EAC3C,CAAA,CAEN;;AAEV"}

package/lib/index28.mjs

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/ui-library/gallery/filter-chip/FilterChip.tsx
+/**
+* FilterChip — Design System Component
+*
+* A removable tag/chip for displaying active filters.
+* Purely presentational — no filter state, no URL state, no search logic.
+*
+* Accessibility:
+*   - The remove button has an aria-label describing what will be removed.
+*   - Disabled chips prevent removal.
+*   - The chip itself is not interactive — only the remove button is.
+*
+* Usage:
+*   <FilterChip label="Department: HR" onRemove={() => removeFilter('department')} />
+*   <FilterChip label="Status: Active" onRemove={handleRemove} />
+*   <FilterChip label="Read only" />       // no remove button
+*   <FilterChip label="Locked" disabled /> // disabled state
+*/
+function FilterChip({ label, onRemove, disabled = false, removeLabel = "Remove filter", className = "" }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: [
+			"inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border",
+			"py-1 pl-3 text-xs font-semibold",
+			onRemove ? "pr-1.5" : "pr-3",
+			disabled ? "border-slate-200 bg-slate-50 text-slate-400" : "border-brand-blue/30 bg-blue-50 text-brand-blue",
+			className
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: label
+		}), onRemove && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: !disabled ? onRemove : void 0,
+			disabled,
+			"aria-label": removeLabel,
+			className: [
+				"flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				disabled ? "cursor-not-allowed text-slate-300" : "text-brand-blue hover:bg-blue-100 hover:text-brand-navy"
+			].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ jsx(X, {
+				size: 10,
+				"aria-hidden": "true",
+				strokeWidth: 3
+			})
+		})]
+	});
+}
+//#endregion
+export { FilterChip };
+
+//# sourceMappingURL=index28.mjs.map

package/lib/index28.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index28.mjs","names":[],"sources":["../src/ui-library/gallery/filter-chip/FilterChip.tsx"],"sourcesContent":["/**\n * FilterChip — Design System Component\n *\n * A removable tag/chip for displaying active filters.\n * Purely presentational — no filter state, no URL state, no search logic.\n *\n * Accessibility:\n *   - The remove button has an aria-label describing what will be removed.\n *   - Disabled chips prevent removal.\n *   - The chip itself is not interactive — only the remove button is.\n *\n * Usage:\n *   <FilterChip label=\"Department: HR\" onRemove={() => removeFilter('department')} />\n *   <FilterChip label=\"Status: Active\" onRemove={handleRemove} />\n *   <FilterChip label=\"Read only\" />       // no remove button\n *   <FilterChip label=\"Locked\" disabled /> // disabled state\n */\n\nimport { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nexport interface FilterChipProps {\n  /** Label content — string or ReactNode */\n  label: ReactNode;\n  /** When provided, renders a remove (×) button */\n  onRemove?: () => void;\n  /** Disables the remove button */\n  disabled?: boolean;\n  /** Optional accessible label for the remove button (defaults to \"Remove filter\") */\n  removeLabel?: string;\n  className?: string;\n}\n\nexport function FilterChip({\n  label,\n  onRemove,\n  disabled = false,\n  removeLabel = 'Remove filter',\n  className = '',\n}: FilterChipProps) {\n  return (\n    <span\n      className={[\n        'inline-flex max-w-[20rem] items-center gap-1.5 rounded-full border',\n        'py-1 pl-3 text-xs font-semibold',\n        onRemove ? 'pr-1.5' : 'pr-3',\n        disabled\n          ? 'border-slate-200 bg-slate-50 text-slate-400'\n          : 'border-brand-blue/30 bg-blue-50 text-brand-blue',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Label — truncate long text */}\n      <span className=\"truncate\">{label}</span>\n\n      {/* Remove button */}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={!disabled ? onRemove : undefined}\n          disabled={disabled}\n          aria-label={removeLabel}\n          className={[\n            'flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30',\n            disabled\n              ? 'cursor-not-allowed text-slate-300'\n              : 'text-brand-blue hover:bg-blue-100 hover:text-brand-navy',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <X size={10} aria-hidden=\"true\" strokeWidth={3} />\n        </button>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,WAAW,EACzB,OACA,UACA,WAAW,OACX,cAAc,iBACd,YAAY,MACM;CAClB,OACE,qBAAC,QAAD;EACE,WAAW;GACT;GACA;GACA,WAAW,WAAW;GACtB,WACI,gDACA;GACJ;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAXb,UAAA,CAcE,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA;EAAY,CAAA,GAGvC,YACC,oBAAC,UAAD;GACE,MAAK;GACL,SAAS,CAAC,WAAW,WAAW,KAAA;GACtB;GACV,cAAY;GACZ,WAAW;IACT;IACA;IACA,WACI,sCACA;GACN,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GAEX,UAAA,oBAAC,GAAD;IAAG,MAAM;IAAI,eAAY;IAAO,aAAa;GAAI,CAAA;EAC3C,CAAA,CAEN;;AAEV"}

package/lib/index29.cjs

@@ -0,0 +1,100 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/segmented-control/SegmentedControl.tsx
+/**
+* SegmentedControl — Design System Component
+*
+* An inline pill-shaped control for switching between mutually exclusive
+* options. Semantically equivalent to a group of radio buttons but styled
+* as a connected pill strip.
+*
+* ARIA: uses role="radiogroup" on the container and role="radio" on each
+* option, matching the WAI-ARIA authoring guide for mutually exclusive
+* single-selection controls that are not tab panels.
+*
+* Keyboard: Arrow keys move selection within the group (roving tabIndex).
+* This matches the native radio group keyboard pattern.
+*
+* API:
+*   <SegmentedControl
+*     options={[{ value: 'a', label: 'Option A' }, ...]}
+*     defaultValue="a"         // uncontrolled
+*     value={value}            // controlled
+*     onValueChange={setValue} // controlled callback
+*     aria-label="View mode"
+*   />
+*/
+function SegmentedControl({ options, defaultValue, value: controlledValue, onValueChange, disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className = "" }) {
+	const isControlled = controlledValue !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(defaultValue ?? options.find((o) => !o.disabled)?.value ?? "");
+	const groupId = (0, react.useId)();
+	const activeValue = isControlled ? controlledValue : uncontrolledValue;
+	const select = (val) => {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledValue(val);
+		onValueChange?.(val);
+	};
+	const enabledOptions = options.filter((o) => !o.disabled);
+	const handleKeyDown = (e) => {
+		if (disabled) return;
+		const currentIdx = enabledOptions.findIndex((o) => o.value === activeValue);
+		let nextIdx = null;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault();
+			nextIdx = (currentIdx + 1) % enabledOptions.length;
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault();
+			nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			nextIdx = 0;
+		} else if (e.key === "End") {
+			e.preventDefault();
+			nextIdx = enabledOptions.length - 1;
+		}
+		if (nextIdx !== null) {
+			const nextValue = enabledOptions[nextIdx]?.value;
+			if (nextValue !== void 0) {
+				select(nextValue);
+				const id = `${groupId}-${nextValue}`;
+				document.getElementById(id)?.focus();
+			}
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		"aria-disabled": disabled || void 0,
+		onKeyDown: handleKeyDown,
+		className: [
+			"inline-flex rounded-xl bg-slate-100 p-1",
+			disabled ? "opacity-50 pointer-events-none" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: options.map((opt) => {
+			const isSelected = opt.value === activeValue;
+			const isDisabled = disabled || opt.disabled;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				id: `${groupId}-${opt.value}`,
+				type: "button",
+				role: "radio",
+				"aria-checked": isSelected,
+				"aria-disabled": isDisabled || void 0,
+				disabled: isDisabled,
+				tabIndex: isSelected ? 0 : -1,
+				onClick: () => !isDisabled && select(opt.value),
+				className: [
+					"rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-150",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1",
+					isSelected ? "bg-white text-slate-900 shadow-sm" : isDisabled ? "text-slate-300 cursor-not-allowed" : "text-slate-500 hover:text-slate-700"
+				].filter(Boolean).join(" "),
+				children: opt.label
+			}, opt.value);
+		})
+	});
+}
+//#endregion
+exports.SegmentedControl = SegmentedControl;
+
+//# sourceMappingURL=index29.cjs.map

package/lib/index29.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index29.cjs","names":[],"sources":["../src/ui-library/gallery/segmented-control/SegmentedControl.tsx"],"sourcesContent":["/**\n * SegmentedControl — Design System Component\n *\n * An inline pill-shaped control for switching between mutually exclusive\n * options. Semantically equivalent to a group of radio buttons but styled\n * as a connected pill strip.\n *\n * ARIA: uses role=\"radiogroup\" on the container and role=\"radio\" on each\n * option, matching the WAI-ARIA authoring guide for mutually exclusive\n * single-selection controls that are not tab panels.\n *\n * Keyboard: Arrow keys move selection within the group (roving tabIndex).\n * This matches the native radio group keyboard pattern.\n *\n * API:\n *   <SegmentedControl\n *     options={[{ value: 'a', label: 'Option A' }, ...]}\n *     defaultValue=\"a\"         // uncontrolled\n *     value={value}            // controlled\n *     onValueChange={setValue} // controlled callback\n *     aria-label=\"View mode\"\n *   />\n */\n\nimport { useId, useState, type KeyboardEvent } from 'react';\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n  options: SegmentedControlOption[];\n  /** Uncontrolled: initial selected value */\n  defaultValue?: string;\n  /** Controlled: current selected value */\n  value?: string;\n  /** Controlled: called on value change */\n  onValueChange?: (value: string) => void;\n  /** Disables the entire control */\n  disabled?: boolean;\n  /** Accessible label for the group */\n  'aria-label'?: string;\n  /** Associate with an external label element */\n  'aria-labelledby'?: string;\n  className?: string;\n}\n\nexport function SegmentedControl({\n  options,\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  className = '',\n}: SegmentedControlProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? options.find((o) => !o.disabled)?.value ?? '',\n  );\n  const groupId = useId();\n\n  const activeValue = isControlled ? controlledValue : uncontrolledValue;\n\n  const select = (val: string) => {\n    if (disabled) return;\n    if (!isControlled) setUncontrolledValue(val);\n    onValueChange?.(val);\n  };\n\n  const enabledOptions = options.filter((o) => !o.disabled);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const currentIdx = enabledOptions.findIndex((o) => o.value === activeValue);\n\n    let nextIdx: number | null = null;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      nextIdx = (currentIdx + 1) % enabledOptions.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      nextIdx = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      nextIdx = enabledOptions.length - 1;\n    }\n\n    if (nextIdx !== null) {\n      const nextValue = enabledOptions[nextIdx]?.value;\n      if (nextValue !== undefined) {\n        select(nextValue);\n        // Move DOM focus to the newly-selected button\n        const id = `${groupId}-${nextValue}`;\n        document.getElementById(id)?.focus();\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-disabled={disabled || undefined}\n      onKeyDown={handleKeyDown}\n      className={[\n        'inline-flex rounded-xl bg-slate-100 p-1',\n        disabled ? 'opacity-50 pointer-events-none' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {options.map((opt) => {\n        const isSelected = opt.value === activeValue;\n        const isDisabled = disabled || opt.disabled;\n\n        return (\n          <button\n            key={opt.value}\n            id={`${groupId}-${opt.value}`}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            aria-disabled={isDisabled || undefined}\n            disabled={isDisabled}\n            tabIndex={isSelected ? 0 : -1}\n            onClick={() => !isDisabled && select(opt.value)}\n            className={[\n              'rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-150',\n              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1',\n              isSelected\n                ? 'bg-white text-slate-900 shadow-sm'\n                : isDisabled\n                  ? 'text-slate-300 cursor-not-allowed'\n                  : 'text-slate-500 hover:text-slate-700',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,iBAAiB,EAC/B,SACA,cACA,OAAO,iBACP,eACA,WAAW,OACX,cAAc,WACd,mBAAmB,gBACnB,YAAY,MACY;CACxB,MAAM,eAAe,oBAAoB,KAAA;CACzC,MAAM,CAAC,mBAAmB,yBAAA,GAAwB,MAAA,SAAA,CAChD,gBAAgB,QAAQ,MAAM,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,EAC7D;CACA,MAAM,WAAA,GAAU,MAAA,MAAA,CAAM;CAEtB,MAAM,cAAc,eAAe,kBAAkB;CAErD,MAAM,UAAU,QAAgB;EAC9B,IAAI,UAAU;EACd,IAAI,CAAC,cAAc,qBAAqB,GAAG;EAC3C,gBAAgB,GAAG;CACrB;CAEA,MAAM,iBAAiB,QAAQ,QAAQ,MAAM,CAAC,EAAE,QAAQ;CAExD,MAAM,iBAAiB,MAAqC;EAC1D,IAAI,UAAU;EACd,MAAM,aAAa,eAAe,WAAW,MAAM,EAAE,UAAU,WAAW;EAE1E,IAAI,UAAyB;EAC7B,IAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;GACnD,EAAE,eAAe;GACjB,WAAW,aAAa,KAAK,eAAe;EAC9C,OAAO,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;GACvD,EAAE,eAAe;GACjB,WAAW,aAAa,IAAI,eAAe,UAAU,eAAe;EACtE,OAAO,IAAI,EAAE,QAAQ,QAAQ;GAC3B,EAAE,eAAe;GACjB,UAAU;EACZ,OAAO,IAAI,EAAE,QAAQ,OAAO;GAC1B,EAAE,eAAe;GACjB,UAAU,eAAe,SAAS;EACpC;EAEA,IAAI,YAAY,MAAM;GACpB,MAAM,YAAY,eAAe,QAAQ,EAAE;GAC3C,IAAI,cAAc,KAAA,GAAW;IAC3B,OAAO,SAAS;IAEhB,MAAM,KAAK,GAAG,QAAQ,GAAG;IACzB,SAAS,eAAe,EAAE,CAAC,EAAE,MAAM;GACrC;EACF;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,iBAAe,YAAY,KAAA;EAC3B,WAAW;EACX,WAAW;GACT;GACA,WAAW,mCAAmC;GAC9C;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV,UAAA,QAAQ,KAAK,QAAQ;GACpB,MAAM,aAAa,IAAI,UAAU;GACjC,MAAM,aAAa,YAAY,IAAI;GAEnC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAEE,IAAI,GAAG,QAAQ,GAAG,IAAI;IACtB,MAAK;IACL,MAAK;IACL,gBAAc;IACd,iBAAe,cAAc,KAAA;IAC7B,UAAU;IACV,UAAU,aAAa,IAAI;IAC3B,eAAe,CAAC,cAAc,OAAO,IAAI,KAAK;IAC9C,WAAW;KACT;KACA;KACA,aACI,sCACA,aACE,sCACA;IACR,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IAEV,UAAA,IAAI;GACC,GAtBD,IAAI,KAsBH;EAEZ,CAAC;CACE,CAAA;AAET"}

package/lib/index29.mjs

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import { useId, useState } from "react";
+//#region src/ui-library/gallery/segmented-control/SegmentedControl.tsx
+/**
+* SegmentedControl — Design System Component
+*
+* An inline pill-shaped control for switching between mutually exclusive
+* options. Semantically equivalent to a group of radio buttons but styled
+* as a connected pill strip.
+*
+* ARIA: uses role="radiogroup" on the container and role="radio" on each
+* option, matching the WAI-ARIA authoring guide for mutually exclusive
+* single-selection controls that are not tab panels.
+*
+* Keyboard: Arrow keys move selection within the group (roving tabIndex).
+* This matches the native radio group keyboard pattern.
+*
+* API:
+*   <SegmentedControl
+*     options={[{ value: 'a', label: 'Option A' }, ...]}
+*     defaultValue="a"         // uncontrolled
+*     value={value}            // controlled
+*     onValueChange={setValue} // controlled callback
+*     aria-label="View mode"
+*   />
+*/
+function SegmentedControl({ options, defaultValue, value: controlledValue, onValueChange, disabled = false, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className = "" }) {
+	const isControlled = controlledValue !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? options.find((o) => !o.disabled)?.value ?? "");
+	const groupId = useId();
+	const activeValue = isControlled ? controlledValue : uncontrolledValue;
+	const select = (val) => {
+		if (disabled) return;
+		if (!isControlled) setUncontrolledValue(val);
+		onValueChange?.(val);
+	};
+	const enabledOptions = options.filter((o) => !o.disabled);
+	const handleKeyDown = (e) => {
+		if (disabled) return;
+		const currentIdx = enabledOptions.findIndex((o) => o.value === activeValue);
+		let nextIdx = null;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+			e.preventDefault();
+			nextIdx = (currentIdx + 1) % enabledOptions.length;
+		} else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+			e.preventDefault();
+			nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			nextIdx = 0;
+		} else if (e.key === "End") {
+			e.preventDefault();
+			nextIdx = enabledOptions.length - 1;
+		}
+		if (nextIdx !== null) {
+			const nextValue = enabledOptions[nextIdx]?.value;
+			if (nextValue !== void 0) {
+				select(nextValue);
+				const id = `${groupId}-${nextValue}`;
+				document.getElementById(id)?.focus();
+			}
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		"aria-disabled": disabled || void 0,
+		onKeyDown: handleKeyDown,
+		className: [
+			"inline-flex rounded-xl bg-slate-100 p-1",
+			disabled ? "opacity-50 pointer-events-none" : "",
+			className
+		].filter(Boolean).join(" "),
+		children: options.map((opt) => {
+			const isSelected = opt.value === activeValue;
+			const isDisabled = disabled || opt.disabled;
+			return /* @__PURE__ */ jsx("button", {
+				id: `${groupId}-${opt.value}`,
+				type: "button",
+				role: "radio",
+				"aria-checked": isSelected,
+				"aria-disabled": isDisabled || void 0,
+				disabled: isDisabled,
+				tabIndex: isSelected ? 0 : -1,
+				onClick: () => !isDisabled && select(opt.value),
+				className: [
+					"rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-150",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1",
+					isSelected ? "bg-white text-slate-900 shadow-sm" : isDisabled ? "text-slate-300 cursor-not-allowed" : "text-slate-500 hover:text-slate-700"
+				].filter(Boolean).join(" "),
+				children: opt.label
+			}, opt.value);
+		})
+	});
+}
+//#endregion
+export { SegmentedControl };
+
+//# sourceMappingURL=index29.mjs.map

package/lib/index29.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index29.mjs","names":[],"sources":["../src/ui-library/gallery/segmented-control/SegmentedControl.tsx"],"sourcesContent":["/**\n * SegmentedControl — Design System Component\n *\n * An inline pill-shaped control for switching between mutually exclusive\n * options. Semantically equivalent to a group of radio buttons but styled\n * as a connected pill strip.\n *\n * ARIA: uses role=\"radiogroup\" on the container and role=\"radio\" on each\n * option, matching the WAI-ARIA authoring guide for mutually exclusive\n * single-selection controls that are not tab panels.\n *\n * Keyboard: Arrow keys move selection within the group (roving tabIndex).\n * This matches the native radio group keyboard pattern.\n *\n * API:\n *   <SegmentedControl\n *     options={[{ value: 'a', label: 'Option A' }, ...]}\n *     defaultValue=\"a\"         // uncontrolled\n *     value={value}            // controlled\n *     onValueChange={setValue} // controlled callback\n *     aria-label=\"View mode\"\n *   />\n */\n\nimport { useId, useState, type KeyboardEvent } from 'react';\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n  options: SegmentedControlOption[];\n  /** Uncontrolled: initial selected value */\n  defaultValue?: string;\n  /** Controlled: current selected value */\n  value?: string;\n  /** Controlled: called on value change */\n  onValueChange?: (value: string) => void;\n  /** Disables the entire control */\n  disabled?: boolean;\n  /** Accessible label for the group */\n  'aria-label'?: string;\n  /** Associate with an external label element */\n  'aria-labelledby'?: string;\n  className?: string;\n}\n\nexport function SegmentedControl({\n  options,\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  className = '',\n}: SegmentedControlProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    defaultValue ?? options.find((o) => !o.disabled)?.value ?? '',\n  );\n  const groupId = useId();\n\n  const activeValue = isControlled ? controlledValue : uncontrolledValue;\n\n  const select = (val: string) => {\n    if (disabled) return;\n    if (!isControlled) setUncontrolledValue(val);\n    onValueChange?.(val);\n  };\n\n  const enabledOptions = options.filter((o) => !o.disabled);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const currentIdx = enabledOptions.findIndex((o) => o.value === activeValue);\n\n    let nextIdx: number | null = null;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      nextIdx = (currentIdx + 1) % enabledOptions.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      nextIdx = (currentIdx - 1 + enabledOptions.length) % enabledOptions.length;\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      nextIdx = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      nextIdx = enabledOptions.length - 1;\n    }\n\n    if (nextIdx !== null) {\n      const nextValue = enabledOptions[nextIdx]?.value;\n      if (nextValue !== undefined) {\n        select(nextValue);\n        // Move DOM focus to the newly-selected button\n        const id = `${groupId}-${nextValue}`;\n        document.getElementById(id)?.focus();\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-disabled={disabled || undefined}\n      onKeyDown={handleKeyDown}\n      className={[\n        'inline-flex rounded-xl bg-slate-100 p-1',\n        disabled ? 'opacity-50 pointer-events-none' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {options.map((opt) => {\n        const isSelected = opt.value === activeValue;\n        const isDisabled = disabled || opt.disabled;\n\n        return (\n          <button\n            key={opt.value}\n            id={`${groupId}-${opt.value}`}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            aria-disabled={isDisabled || undefined}\n            disabled={isDisabled}\n            tabIndex={isSelected ? 0 : -1}\n            onClick={() => !isDisabled && select(opt.value)}\n            className={[\n              'rounded-lg px-3 py-1.5 text-xs font-bold transition-all duration-150',\n              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 focus-visible:ring-offset-1',\n              isSelected\n                ? 'bg-white text-slate-900 shadow-sm'\n                : isDisabled\n                  ? 'text-slate-300 cursor-not-allowed'\n                  : 'text-slate-500 hover:text-slate-700',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,iBAAiB,EAC/B,SACA,cACA,OAAO,iBACP,eACA,WAAW,OACX,cAAc,WACd,mBAAmB,gBACnB,YAAY,MACY;CACxB,MAAM,eAAe,oBAAoB,KAAA;CACzC,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,gBAAgB,QAAQ,MAAM,MAAM,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,EAC7D;CACA,MAAM,UAAU,MAAM;CAEtB,MAAM,cAAc,eAAe,kBAAkB;CAErD,MAAM,UAAU,QAAgB;EAC9B,IAAI,UAAU;EACd,IAAI,CAAC,cAAc,qBAAqB,GAAG;EAC3C,gBAAgB,GAAG;CACrB;CAEA,MAAM,iBAAiB,QAAQ,QAAQ,MAAM,CAAC,EAAE,QAAQ;CAExD,MAAM,iBAAiB,MAAqC;EAC1D,IAAI,UAAU;EACd,MAAM,aAAa,eAAe,WAAW,MAAM,EAAE,UAAU,WAAW;EAE1E,IAAI,UAAyB;EAC7B,IAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aAAa;GACnD,EAAE,eAAe;GACjB,WAAW,aAAa,KAAK,eAAe;EAC9C,OAAO,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;GACvD,EAAE,eAAe;GACjB,WAAW,aAAa,IAAI,eAAe,UAAU,eAAe;EACtE,OAAO,IAAI,EAAE,QAAQ,QAAQ;GAC3B,EAAE,eAAe;GACjB,UAAU;EACZ,OAAO,IAAI,EAAE,QAAQ,OAAO;GAC1B,EAAE,eAAe;GACjB,UAAU,eAAe,SAAS;EACpC;EAEA,IAAI,YAAY,MAAM;GACpB,MAAM,YAAY,eAAe,QAAQ,EAAE;GAC3C,IAAI,cAAc,KAAA,GAAW;IAC3B,OAAO,SAAS;IAEhB,MAAM,KAAK,GAAG,QAAQ,GAAG;IACzB,SAAS,eAAe,EAAE,CAAC,EAAE,MAAM;GACrC;EACF;CACF;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,iBAAe,YAAY,KAAA;EAC3B,WAAW;EACX,WAAW;GACT;GACA,WAAW,mCAAmC;GAC9C;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEV,UAAA,QAAQ,KAAK,QAAQ;GACpB,MAAM,aAAa,IAAI,UAAU;GACjC,MAAM,aAAa,YAAY,IAAI;GAEnC,OACE,oBAAC,UAAD;IAEE,IAAI,GAAG,QAAQ,GAAG,IAAI;IACtB,MAAK;IACL,MAAK;IACL,gBAAc;IACd,iBAAe,cAAc,KAAA;IAC7B,UAAU;IACV,UAAU,aAAa,IAAI;IAC3B,eAAe,CAAC,cAAc,OAAO,IAAI,KAAK;IAC9C,WAAW;KACT;KACA;KACA,aACI,sCACA,aACE,sCACA;IACR,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;IAEV,UAAA,IAAI;GACC,GAtBD,IAAI,KAsBH;EAEZ,CAAC;CACE,CAAA;AAET"}

package/lib/index3.cjs

@@ -0,0 +1,38 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/button/Button.tsx
+var VARIANT_STYLES = {
+	primary: "font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 active:bg-brand-navy focus-visible:ring-brand-blue/30 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none",
+	dark: "font-semibold bg-slate-900 text-white shadow-lg shadow-slate-200 hover:bg-slate-800 active:bg-slate-950 focus-visible:ring-slate-300 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none",
+	outline: "font-semibold border border-slate-300 bg-white text-slate-700 shadow-sm hover:border-brand-blue/40 hover:bg-blue-50/40 hover:text-brand-blue active:bg-slate-100 focus-visible:ring-brand-blue/20 disabled:border-slate-200 disabled:bg-white disabled:text-slate-300 disabled:shadow-none",
+	ghost: "font-semibold bg-transparent text-slate-700 hover:bg-slate-100 active:bg-slate-200 focus-visible:ring-slate-200 disabled:text-slate-300",
+	danger: "font-bold bg-rose-600 text-white shadow-lg shadow-rose-100 hover:bg-rose-700 active:bg-rose-800 focus-visible:ring-rose-300 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none"
+};
+var SIZE_STYLES = {
+	sm: "h-9 gap-1.5 rounded-md px-3 text-xs",
+	md: "h-10 gap-2 rounded-md px-4 text-sm",
+	lg: "h-11 gap-2.5 rounded-md px-6 text-base"
+};
+var BASE = "inline-flex items-center justify-center transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:active:scale-100 select-none";
+function Button({ variant = "primary", size = "md", loading = false, leftIcon, rightIcon, fullWidth = false, children, className = "", disabled, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		disabled: disabled || loading,
+		className: [
+			BASE,
+			VARIANT_STYLES[variant],
+			SIZE_STYLES[size],
+			fullWidth ? "w-full" : "",
+			className
+		].filter(Boolean).join(" "),
+		...props,
+		children: [
+			leftIcon && !loading && leftIcon,
+			children,
+			rightIcon && !loading && rightIcon
+		]
+	});
+}
+//#endregion
+exports.Button = Button;
+
+//# sourceMappingURL=index3.cjs.map

package/lib/index3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index3.cjs","names":[],"sources":["../src/ui-library/gallery/button/Button.tsx"],"sourcesContent":["/**\n * Button — Design System Component\n *\n * A reusable button component designed from first principles for the\n * organization's design system. Independent of the HRIS btnPrimary token.\n *\n * Variants:  primary | dark | outline | ghost | danger\n * Sizes:     sm | md | lg\n *\n * ── Loading Convention ────────────────────────────────────────────────────────\n *\n * The `loading` prop signals that an async operation is in progress.\n *\n * What `loading` does:\n *   - Sets the HTML `disabled` attribute (prevents interaction, keyboard, click)\n *   - Suppresses leftIcon and rightIcon slots (icons are hidden during loading)\n *   - Does NOT inject a spinner or change the label automatically\n *\n * The caller owns the loading representation inside `children`:\n *\n *   <Button loading={saving}>\n *     {saving\n *       ? <><Loader2 size={15} className=\"animate-spin\" aria-hidden=\"true\" /> Saving…</>\n *       : <><Save size={15} aria-hidden=\"true\" /> Save Changes</>}\n *   </Button>\n *\n * Rationale: The label and icon during loading are context-dependent (\"Saving...\",\n * \"Submitting...\", \"Uploading...\"). Hardcoding them in the component would require\n * a `loadingLabel` prop and make the component harder to compose.\n *\n * Accessibility:\n *   - The `disabled` attribute is sufficient. Screen readers announce the disabled\n *     state. No `aria-busy` is added because the button itself is not busy — the\n *     surrounding operation is. If the page has a loading region, apply aria-busy\n *     to that region instead.\n *   - The Loader2 icon inside children should always have aria-hidden=\"true\" so\n *     the spinner does not duplicate the label in screen reader output.\n *\n * Dimension stability:\n *   - Because children is caller-controlled, the button may resize between default\n *     and loading states if the label length changes (\"Save\" → \"Saving...\").\n *     Use `min-w` on the button when stable width is required in a layout.\n *\n * loading + disabled interaction:\n *   - Both `loading` and `disabled` independently disable the button.\n *   - Passing both is valid but redundant. The visual result is identical.\n *   - Prefer `loading` when the state is transient; `disabled` when it is permanent.\n *\n * How future design-system components should document loading:\n *   - Follow this same pattern: caller provides children, component provides the\n *     disabled/suppression behavior.\n *   - Document the convention in the component's JSDoc, not in a separate file.\n *   - Show a loading example in the component's playground and code examples section.\n * ─────────────────────────────────────────────────────────────────────────────\n */\n\nimport type { ReactNode } from 'react';\n\nexport type ButtonVariant = 'primary' | 'dark' | 'outline' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends React.ComponentProps<'button'> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  fullWidth?: boolean;\n  children?: ReactNode;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\nconst VARIANT_STYLES: Record<ButtonVariant, string> = {\n  primary:\n    'font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 active:bg-brand-navy focus-visible:ring-brand-blue/30 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none',\n  dark:\n    'font-semibold bg-slate-900 text-white shadow-lg shadow-slate-200 hover:bg-slate-800 active:bg-slate-950 focus-visible:ring-slate-300 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none',\n  outline:\n    'font-semibold border border-slate-300 bg-white text-slate-700 shadow-sm hover:border-brand-blue/40 hover:bg-blue-50/40 hover:text-brand-blue active:bg-slate-100 focus-visible:ring-brand-blue/20 disabled:border-slate-200 disabled:bg-white disabled:text-slate-300 disabled:shadow-none',\n  ghost:\n    'font-semibold bg-transparent text-slate-700 hover:bg-slate-100 active:bg-slate-200 focus-visible:ring-slate-200 disabled:text-slate-300',\n  danger:\n    'font-bold bg-rose-600 text-white shadow-lg shadow-rose-100 hover:bg-rose-700 active:bg-rose-800 focus-visible:ring-rose-300 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none',\n};\n\nconst SIZE_STYLES: Record<ButtonSize, string> = {\n  sm: 'h-9 gap-1.5 rounded-md px-3 text-xs',\n  md: 'h-10 gap-2 rounded-md px-4 text-sm',\n  lg: 'h-11 gap-2.5 rounded-md px-6 text-base',\n};\n\nconst BASE =\n  'inline-flex items-center justify-center transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:active:scale-100 select-none';\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Button({\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  leftIcon,\n  rightIcon,\n  fullWidth = false,\n  children,\n  className = '',\n  disabled,\n  ...props\n}: ButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled || loading}\n      className={[\n        BASE,\n        VARIANT_STYLES[variant],\n        SIZE_STYLES[size],\n        fullWidth ? 'w-full' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leftIcon && !loading && leftIcon}\n      {children}\n      {rightIcon && !loading && rightIcon}\n    </button>\n  );\n}\n"],"mappings":";;AAyEA,IAAM,iBAAgD;CACpD,SACE;CACF,MACE;CACF,SACE;CACF,OACE;CACF,QACE;AACJ;AAEA,IAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,OACJ;AAIF,SAAgB,OAAO,EACrB,UAAU,WACV,OAAO,MACP,UAAU,OACV,UACA,WACA,YAAY,OACZ,UACA,YAAY,IACZ,UACA,GAAG,SACW;CACd,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;EACE,MAAK;EACL,UAAU,YAAY;EACtB,WAAW;GACT;GACA,eAAe;GACf,YAAY;GACZ,YAAY,WAAW;GACvB;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,GAAI;EAZN,UAAA;GAcG,YAAY,CAAC,WAAW;GACxB;GACA,aAAa,CAAC,WAAW;EACpB;;AAEZ"}

package/lib/index3.mjs

@@ -0,0 +1,38 @@
+import { jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/button/Button.tsx
+var VARIANT_STYLES = {
+	primary: "font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 active:bg-brand-navy focus-visible:ring-brand-blue/30 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none",
+	dark: "font-semibold bg-slate-900 text-white shadow-lg shadow-slate-200 hover:bg-slate-800 active:bg-slate-950 focus-visible:ring-slate-300 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none",
+	outline: "font-semibold border border-slate-300 bg-white text-slate-700 shadow-sm hover:border-brand-blue/40 hover:bg-blue-50/40 hover:text-brand-blue active:bg-slate-100 focus-visible:ring-brand-blue/20 disabled:border-slate-200 disabled:bg-white disabled:text-slate-300 disabled:shadow-none",
+	ghost: "font-semibold bg-transparent text-slate-700 hover:bg-slate-100 active:bg-slate-200 focus-visible:ring-slate-200 disabled:text-slate-300",
+	danger: "font-bold bg-rose-600 text-white shadow-lg shadow-rose-100 hover:bg-rose-700 active:bg-rose-800 focus-visible:ring-rose-300 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none"
+};
+var SIZE_STYLES = {
+	sm: "h-9 gap-1.5 rounded-md px-3 text-xs",
+	md: "h-10 gap-2 rounded-md px-4 text-sm",
+	lg: "h-11 gap-2.5 rounded-md px-6 text-base"
+};
+var BASE = "inline-flex items-center justify-center transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:active:scale-100 select-none";
+function Button({ variant = "primary", size = "md", loading = false, leftIcon, rightIcon, fullWidth = false, children, className = "", disabled, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		disabled: disabled || loading,
+		className: [
+			BASE,
+			VARIANT_STYLES[variant],
+			SIZE_STYLES[size],
+			fullWidth ? "w-full" : "",
+			className
+		].filter(Boolean).join(" "),
+		...props,
+		children: [
+			leftIcon && !loading && leftIcon,
+			children,
+			rightIcon && !loading && rightIcon
+		]
+	});
+}
+//#endregion
+export { Button };
+
+//# sourceMappingURL=index3.mjs.map

package/lib/index3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index3.mjs","names":[],"sources":["../src/ui-library/gallery/button/Button.tsx"],"sourcesContent":["/**\n * Button — Design System Component\n *\n * A reusable button component designed from first principles for the\n * organization's design system. Independent of the HRIS btnPrimary token.\n *\n * Variants:  primary | dark | outline | ghost | danger\n * Sizes:     sm | md | lg\n *\n * ── Loading Convention ────────────────────────────────────────────────────────\n *\n * The `loading` prop signals that an async operation is in progress.\n *\n * What `loading` does:\n *   - Sets the HTML `disabled` attribute (prevents interaction, keyboard, click)\n *   - Suppresses leftIcon and rightIcon slots (icons are hidden during loading)\n *   - Does NOT inject a spinner or change the label automatically\n *\n * The caller owns the loading representation inside `children`:\n *\n *   <Button loading={saving}>\n *     {saving\n *       ? <><Loader2 size={15} className=\"animate-spin\" aria-hidden=\"true\" /> Saving…</>\n *       : <><Save size={15} aria-hidden=\"true\" /> Save Changes</>}\n *   </Button>\n *\n * Rationale: The label and icon during loading are context-dependent (\"Saving...\",\n * \"Submitting...\", \"Uploading...\"). Hardcoding them in the component would require\n * a `loadingLabel` prop and make the component harder to compose.\n *\n * Accessibility:\n *   - The `disabled` attribute is sufficient. Screen readers announce the disabled\n *     state. No `aria-busy` is added because the button itself is not busy — the\n *     surrounding operation is. If the page has a loading region, apply aria-busy\n *     to that region instead.\n *   - The Loader2 icon inside children should always have aria-hidden=\"true\" so\n *     the spinner does not duplicate the label in screen reader output.\n *\n * Dimension stability:\n *   - Because children is caller-controlled, the button may resize between default\n *     and loading states if the label length changes (\"Save\" → \"Saving...\").\n *     Use `min-w` on the button when stable width is required in a layout.\n *\n * loading + disabled interaction:\n *   - Both `loading` and `disabled` independently disable the button.\n *   - Passing both is valid but redundant. The visual result is identical.\n *   - Prefer `loading` when the state is transient; `disabled` when it is permanent.\n *\n * How future design-system components should document loading:\n *   - Follow this same pattern: caller provides children, component provides the\n *     disabled/suppression behavior.\n *   - Document the convention in the component's JSDoc, not in a separate file.\n *   - Show a loading example in the component's playground and code examples section.\n * ─────────────────────────────────────────────────────────────────────────────\n */\n\nimport type { ReactNode } from 'react';\n\nexport type ButtonVariant = 'primary' | 'dark' | 'outline' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends React.ComponentProps<'button'> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  fullWidth?: boolean;\n  children?: ReactNode;\n}\n\n// ── Style maps ────────────────────────────────────────────────────────────────\n\nconst VARIANT_STYLES: Record<ButtonVariant, string> = {\n  primary:\n    'font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 active:bg-brand-navy focus-visible:ring-brand-blue/30 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none',\n  dark:\n    'font-semibold bg-slate-900 text-white shadow-lg shadow-slate-200 hover:bg-slate-800 active:bg-slate-950 focus-visible:ring-slate-300 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none',\n  outline:\n    'font-semibold border border-slate-300 bg-white text-slate-700 shadow-sm hover:border-brand-blue/40 hover:bg-blue-50/40 hover:text-brand-blue active:bg-slate-100 focus-visible:ring-brand-blue/20 disabled:border-slate-200 disabled:bg-white disabled:text-slate-300 disabled:shadow-none',\n  ghost:\n    'font-semibold bg-transparent text-slate-700 hover:bg-slate-100 active:bg-slate-200 focus-visible:ring-slate-200 disabled:text-slate-300',\n  danger:\n    'font-bold bg-rose-600 text-white shadow-lg shadow-rose-100 hover:bg-rose-700 active:bg-rose-800 focus-visible:ring-rose-300 disabled:bg-slate-200 disabled:text-slate-400 disabled:shadow-none',\n};\n\nconst SIZE_STYLES: Record<ButtonSize, string> = {\n  sm: 'h-9 gap-1.5 rounded-md px-3 text-xs',\n  md: 'h-10 gap-2 rounded-md px-4 text-sm',\n  lg: 'h-11 gap-2.5 rounded-md px-6 text-base',\n};\n\nconst BASE =\n  'inline-flex items-center justify-center transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:active:scale-100 select-none';\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport function Button({\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  leftIcon,\n  rightIcon,\n  fullWidth = false,\n  children,\n  className = '',\n  disabled,\n  ...props\n}: ButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled || loading}\n      className={[\n        BASE,\n        VARIANT_STYLES[variant],\n        SIZE_STYLES[size],\n        fullWidth ? 'w-full' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leftIcon && !loading && leftIcon}\n      {children}\n      {rightIcon && !loading && rightIcon}\n    </button>\n  );\n}\n"],"mappings":";;AAyEA,IAAM,iBAAgD;CACpD,SACE;CACF,MACE;CACF,SACE;CACF,OACE;CACF,QACE;AACJ;AAEA,IAAM,cAA0C;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,OACJ;AAIF,SAAgB,OAAO,EACrB,UAAU,WACV,OAAO,MACP,UAAU,OACV,UACA,WACA,YAAY,OACZ,UACA,YAAY,IACZ,UACA,GAAG,SACW;CACd,OACE,qBAAC,UAAD;EACE,MAAK;EACL,UAAU,YAAY;EACtB,WAAW;GACT;GACA,eAAe;GACf,YAAY;GACZ,YAAY,WAAW;GACvB;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,GAAI;EAZN,UAAA;GAcG,YAAY,CAAC,WAAW;GACxB;GACA,aAAa,CAAC,WAAW;EACpB;;AAEZ"}