@pihanga2/shadcn 0.2.5 → 0.2.7

package/cards/slider/slider.component.js

@@ -1,64 +1,83 @@
-import { useFormContext as e } from "../form/form.context.js";
-import { Slider as t } from "../../components/ui/slider.js";
-import { useEffect as n, useRef as r, useState as i } from "react";
+import { cn as e } from "../../lib/utils.js";
+import { useFormContext as t } from "../form/form.context.js";
+import { Slider as n } from "../../components/ui/slider.js";
+import { useEffect as r, useRef as i, useState as a } from "react";
 import "@pihanga2/core";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/cards/slider/slider.component.tsx
-var s = (s) => {
-	let { name: c, value: l, defaultValue: u, selfManaged: d = !1, min: f = 0, max: p = 100, step: m = 1, disabled: h, debounceMs: g = 0, suppressChangedEvents: _ = !1, label: v, className: y, cardName: b, onChanged: x, onCommitted: S } = s, C = e(), w = C.isInForm && !!c, [T, E] = i(u ?? l ?? f), D = w ? C.formData[c] ?? f : d ? T : l ?? f, O = r(D);
-	O.current = D;
-	let k = r(!1), [A, j] = i(D), M = k.current ? A : D, N = r(null), P = r(D);
-	n(() => () => {
-		N.current != null && clearTimeout(N.current);
+var c = (c) => {
+	let { name: l, value: u, defaultValue: d, selfManaged: f = !1, min: p = 0, max: m = 100, step: h = 1, disabled: g, debounceMs: _ = 0, suppressChangedEvents: v = !1, label: y, showTicks: b = !1, tickStep: x, majorTickStep: S, suppressTickLabels: C = !1, tickLabels: w, className: T, cardName: E, onChanged: D, onCommitted: O } = c, k = t(), A = k.isInForm && !!l, [j, M] = a(d ?? u ?? p), N = A ? k.formData[l] ?? p : f ? j : u ?? p, P = i(N);
+	P.current = N;
+	let F = i(!1), [I, L] = a(N), R = F.current ? I : N, z = i(null), B = i(N);
+	r(() => () => {
+		z.current != null && clearTimeout(z.current);
 	}, []);
-	function F(e) {
-		_ || (w ? C.handleChange(c, e) : x({
-			name: c,
+	function V(e) {
+		v || (A ? k.handleChange(l, e) : D({
+			name: l,
 			value: e
 		}));
 	}
-	function I() {
-		k.current = !0, j(O.current);
+	function H() {
+		F.current = !0, L(P.current);
 	}
-	function L(e) {
-		let t = e[0] ?? f;
-		k.current && (j(t), d && !w && E(t), g > 0 ? (P.current = t, N.current != null && clearTimeout(N.current), N.current = setTimeout(() => {
-			N.current = null, F(P.current);
-		}, g)) : F(t));
+	function U(e) {
+		let t = e[0] ?? p;
+		F.current && (L(t), f && !A && M(t), _ > 0 ? (B.current = t, z.current != null && clearTimeout(z.current), z.current = setTimeout(() => {
+			z.current = null, V(B.current);
+		}, _)) : V(t));
 	}
-	function R(e) {
-		let t = e[0] ?? f;
-		k.current = !1, j(O.current), N.current != null && (clearTimeout(N.current), N.current = null), g > 0 && !_ && F(t), S({
-			name: c,
+	function W(e) {
+		let t = e[0] ?? p;
+		F.current = !1, L(P.current), z.current != null && (clearTimeout(z.current), z.current = null), _ > 0 && !v && V(t), O({
+			name: l,
 			value: t
 		});
 	}
-	return /* @__PURE__ */ o("div", {
-		"data-pihanga": b,
-		className: `flex flex-col gap-2 ${y ?? ""}`,
-		children: [v && /* @__PURE__ */ o("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ a("span", {
-				className: "text-sm font-medium leading-none",
-				children: v
-			}), /* @__PURE__ */ a("span", {
-				className: "text-sm text-muted-foreground tabular-nums",
-				children: M
-			})]
-		}), /* @__PURE__ */ a(t, {
-			value: [M],
-			min: f,
-			max: p,
-			step: m,
-			disabled: h,
-			onPointerDown: I,
-			onValueChange: L,
-			onValueCommit: R,
-			className: "w-full"
-		})]
+	let G = x === void 0 ? h : x, K = G > 0, q = K ? G : h, J = q > 0 ? Math.max(q, Math.round((m - p) / 5 / q) * q) : 0, Y = S === void 0 ? J : S, X = Y > 0, Z = b && (K || X), Q = K ? G : Y, $ = Z ? Array.from({ length: Math.round((m - p) / Q) + 1 }, (e, t) => p + t * Q) : [];
+	return /* @__PURE__ */ s("div", {
+		"data-pihanga": E,
+		className: e("flex flex-col gap-2", T),
+		children: [
+			y && /* @__PURE__ */ s("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ o("span", {
+					className: "text-sm font-medium leading-none",
+					children: y
+				}), /* @__PURE__ */ o("span", {
+					className: "text-sm text-muted-foreground tabular-nums",
+					children: R
+				})]
+			}),
+			/* @__PURE__ */ o(n, {
+				value: [R],
+				min: p,
+				max: m,
+				step: h,
+				disabled: g,
+				onPointerDown: H,
+				onValueChange: U,
+				onValueCommit: W,
+				className: "w-full"
+			}),
+			Z && /* @__PURE__ */ o("div", {
+				"aria-hidden": "true",
+				className: "flex w-full items-baseline justify-between px-0.5",
+				children: $.map((t) => {
+					let n = X && (t - p) % Y === 0, r = t <= R, i = !C && (n || !X), a = i ? w && t in w ? w[t] : String(t) : "";
+					return /* @__PURE__ */ s("div", {
+						className: "flex flex-col items-center gap-1",
+						children: [/* @__PURE__ */ o("div", { className: e("w-0.5 rounded-full transition-all duration-300", r ? "bg-primary" : "bg-primary/20", n ? "h-3" : "h-1.5") }), /* @__PURE__ */ o("span", {
+							className: e("text-xs font-medium transition-colors", i ? "text-muted-foreground opacity-100" : "opacity-0"),
+							children: a
+						})]
+					}, t);
+				})
+			})
+		]
 	});
 };
 //#endregion
-export { s as SliderComponent };
+export { c as SliderComponent };
 
 //# sourceMappingURL=slider.component.js.map

package/cards/slider/slider.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.component.js","names":[],"sources":["../../../src/cards/slider/slider.component.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Slider as SliderUI} from \"@/components/ui/slider\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiSliderEvents, PiSliderProps} from \"./slider.types\";\n\nexport const SliderComponent = (\n  props: PiCardProps<PiSliderProps, PiSliderEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue,\n    defaultValue,\n    selfManaged = false,\n    min = 0,\n    max = 100,\n    step = 1,\n    disabled,\n    debounceMs = 0,\n    suppressChangedEvents = false,\n    label,\n    className,\n    cardName,\n    onChanged,\n    onCommitted,\n  } = props;\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Internal state used only when selfManaged=true and not bound to a form.\n  const [managedValue, setManagedValue] = useState<number>(\n    defaultValue ?? propValue ?? min,\n  );\n\n  // The \"canonical\" value from props / form / self-managed state.\n  const canonicalValue = useFormData\n    ? ((form.formData[name!] as number | undefined) ?? min)\n    : selfManaged\n      ? managedValue\n      : (propValue ?? min);\n\n  // Keep a ref to the latest canonical value so event handlers always see\n  // the most up-to-date external value even if it changed during a drag.\n  const canonicalValueRef = useRef(canonicalValue);\n  canonicalValueRef.current = canonicalValue;\n\n  // \"Interactive\" drag state — tracks knob position independently while the\n  // user is actively dragging so we don't need an external value round-trip.\n  const isDragging = useRef(false);\n  const [interactiveValue, setInteractiveValue] =\n    useState<number>(canonicalValue);\n\n  // While dragging the knob follows pointer; otherwise it reflects the canonical value.\n  const displayValue = isDragging.current ? interactiveValue : canonicalValue;\n\n  // Refs for debounce: timer handle + latest pending value.\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pendingValue = useRef<number>(canonicalValue);\n\n  // Clean up any pending debounce timer on unmount.\n  useEffect(() => {\n    return () => {\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n    };\n  }, []);\n\n  function dispatchChanged(newValue: number) {\n    // Silently skip if the caller has opted out of continuous change events.\n    if (suppressChangedEvents) return;\n\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Called on pointer/touch down — enter interactive mode so the knob can\n  // move freely without waiting for an external state update.\n  function handlePointerDown() {\n    isDragging.current = true;\n    setInteractiveValue(canonicalValueRef.current);\n  }\n\n  function handleValueChange(newValues: number[]) {\n    const newValue = newValues[0] ?? min;\n\n    // Guard: only update interactive display when actively dragging.\n    if (!isDragging.current) return;\n\n    setInteractiveValue(newValue);\n\n    // Update internal state immediately so the thumb moves without lag.\n    if (selfManaged && !useFormData) {\n      setManagedValue(newValue);\n    }\n\n    if (debounceMs > 0) {\n      // Record the latest value and (re)start the quiet-window timer.\n      pendingValue.current = newValue;\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n      debounceTimer.current = setTimeout(() => {\n        debounceTimer.current = null;\n        dispatchChanged(pendingValue.current);\n      }, debounceMs);\n    } else {\n      dispatchChanged(newValue);\n    }\n  }\n\n  function handleValueCommit(newValues: number[]) {\n    const newValue = newValues[0] ?? min;\n\n    // Leave interactive mode — on next render displayValue reverts to canonicalValue,\n    // snapping the knob back to whatever the external state currently says.\n    isDragging.current = false;\n    setInteractiveValue(canonicalValueRef.current);\n\n    // Cancel any pending debounced onChanged — the committed event supersedes it.\n    if (debounceTimer.current != null) {\n      clearTimeout(debounceTimer.current);\n      debounceTimer.current = null;\n    }\n\n    // When debounce is active (and not suppressed), flush the final value via\n    // onChanged before the committed event so listeners always see both.\n    if (debounceMs > 0 && !suppressChangedEvents) {\n      dispatchChanged(newValue);\n    }\n\n    onCommitted({name, value: newValue});\n  }\n\n  return (\n    <div\n      data-pihanga={cardName}\n      className={`flex flex-col gap-2 ${className ?? \"\"}`}\n    >\n      {label && (\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-sm font-medium leading-none\">{label}</span>\n          <span className=\"text-sm text-muted-foreground tabular-nums\">\n            {displayValue}\n          </span>\n        </div>\n      )}\n      <SliderUI\n        value={[displayValue]}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        onPointerDown={handlePointerDown}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n        className=\"w-full\"\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,GACP,iBACA,iBAAc,IACd,SAAM,GACN,SAAM,KACN,UAAO,GACP,aACA,gBAAa,GACb,2BAAwB,IACxB,UACA,cACA,aACA,cACA,mBACE,GAGE,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAGvC,CAAC,GAAc,KAAmB,EACtC,KAAgB,KAAa,CAC/B,GAGM,IAAiB,IACjB,EAAK,SAAS,MAAiC,IACjD,IACE,IACC,KAAa,GAId,IAAoB,EAAO,CAAc;CAC/C,EAAkB,UAAU;CAI5B,IAAM,IAAa,EAAO,EAAK,GACzB,CAAC,GAAkB,KACvB,EAAiB,CAAc,GAG3B,IAAe,EAAW,UAAU,IAAmB,GAGvD,IAAgB,EAA6C,IAAI,GACjE,IAAe,EAAe,CAAc;CAGlD,cACe;EACX,AAAI,EAAc,WAAW,QAAM,aAAa,EAAc,OAAO;CACvE,GACC,CAAC,CAAC;CAEL,SAAS,EAAgB,GAAkB;EAErC,MAEA,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAIA,SAAS,IAAoB;EAE3B,AADA,EAAW,UAAU,IACrB,EAAoB,EAAkB,OAAO;CAC/C;CAEA,SAAS,EAAkB,GAAqB;EAC9C,IAAM,IAAW,EAAU,MAAM;EAG5B,EAAW,YAEhB,EAAoB,CAAQ,GAGxB,KAAe,CAAC,KAClB,EAAgB,CAAQ,GAGtB,IAAa,KAEf,EAAa,UAAU,GACnB,EAAc,WAAW,QAAM,aAAa,EAAc,OAAO,GACrE,EAAc,UAAU,iBAAiB;GAEvC,AADA,EAAc,UAAU,MACxB,EAAgB,EAAa,OAAO;EACtC,GAAG,CAAU,KAEb,EAAgB,CAAQ;CAE5B;CAEA,SAAS,EAAkB,GAAqB;EAC9C,IAAM,IAAW,EAAU,MAAM;EAmBjC,AAfA,EAAW,UAAU,IACrB,EAAoB,EAAkB,OAAO,GAGzC,EAAc,WAAW,SAC3B,aAAa,EAAc,OAAO,GAClC,EAAc,UAAU,OAKtB,IAAa,KAAK,CAAC,KACrB,EAAgB,CAAQ,GAG1B,EAAY;GAAC;GAAM,OAAO;EAAQ,CAAC;CACrC;CAEA,OACE,kBAAC,OAAD;EACE,gBAAc;EACd,WAAW,uBAAuB,KAAa;YAFjD,CAIG,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAAoC;GAAY,CAAA,GAChE,kBAAC,QAAD;IAAM,WAAU;cACb;GACG,CAAA,CACH;MAEP,kBAAC,GAAD;GACE,OAAO,CAAC,CAAY;GACf;GACA;GACC;GACI;GACV,eAAe;GACf,eAAe;GACf,eAAe;GACf,WAAU;EACX,CAAA,CACE;;AAET"}
+{"version":3,"file":"slider.component.js","names":[],"sources":["../../../src/cards/slider/slider.component.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Slider as SliderUI} from \"@/components/ui/slider\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport {cn} from \"@/lib/utils\";\nimport type {PiSliderEvents, PiSliderProps} from \"./slider.types\";\n\nexport const SliderComponent = (\n  props: PiCardProps<PiSliderProps, PiSliderEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue,\n    defaultValue,\n    selfManaged = false,\n    min = 0,\n    max = 100,\n    step = 1,\n    disabled,\n    debounceMs = 0,\n    suppressChangedEvents = false,\n    label,\n    showTicks = false,\n    tickStep,\n    majorTickStep,\n    suppressTickLabels = false,\n    tickLabels,\n    className,\n    cardName,\n    onChanged,\n    onCommitted,\n  } = props;\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Internal state used only when selfManaged=true and not bound to a form.\n  const [managedValue, setManagedValue] = useState<number>(\n    defaultValue ?? propValue ?? min,\n  );\n\n  // The \"canonical\" value from props / form / self-managed state.\n  const canonicalValue = useFormData\n    ? ((form.formData[name!] as number | undefined) ?? min)\n    : selfManaged\n      ? managedValue\n      : (propValue ?? min);\n\n  // Keep a ref to the latest canonical value so event handlers always see\n  // the most up-to-date external value even if it changed during a drag.\n  const canonicalValueRef = useRef(canonicalValue);\n  canonicalValueRef.current = canonicalValue;\n\n  // \"Interactive\" drag state — tracks knob position independently while the\n  // user is actively dragging so we don't need an external value round-trip.\n  const isDragging = useRef(false);\n  const [interactiveValue, setInteractiveValue] =\n    useState<number>(canonicalValue);\n\n  // While dragging the knob follows pointer; otherwise it reflects the canonical value.\n  const displayValue = isDragging.current ? interactiveValue : canonicalValue;\n\n  // Refs for debounce: timer handle + latest pending value.\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pendingValue = useRef<number>(canonicalValue);\n\n  // Clean up any pending debounce timer on unmount.\n  useEffect(() => {\n    return () => {\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n    };\n  }, []);\n\n  function dispatchChanged(newValue: number) {\n    // Silently skip if the caller has opted out of continuous change events.\n    if (suppressChangedEvents) return;\n\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Called on pointer/touch down — enter interactive mode so the knob can\n  // move freely without waiting for an external state update.\n  function handlePointerDown() {\n    isDragging.current = true;\n    setInteractiveValue(canonicalValueRef.current);\n  }\n\n  function handleValueChange(newValues: number[]) {\n    const newValue = newValues[0] ?? min;\n\n    // Guard: only update interactive display when actively dragging.\n    if (!isDragging.current) return;\n\n    setInteractiveValue(newValue);\n\n    // Update internal state immediately so the thumb moves without lag.\n    if (selfManaged && !useFormData) {\n      setManagedValue(newValue);\n    }\n\n    if (debounceMs > 0) {\n      // Record the latest value and (re)start the quiet-window timer.\n      pendingValue.current = newValue;\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n      debounceTimer.current = setTimeout(() => {\n        debounceTimer.current = null;\n        dispatchChanged(pendingValue.current);\n      }, debounceMs);\n    } else {\n      dispatchChanged(newValue);\n    }\n  }\n\n  function handleValueCommit(newValues: number[]) {\n    const newValue = newValues[0] ?? min;\n\n    // Leave interactive mode — on next render displayValue reverts to canonicalValue,\n    // snapping the knob back to whatever the external state currently says.\n    isDragging.current = false;\n    setInteractiveValue(canonicalValueRef.current);\n\n    // Cancel any pending debounced onChanged — the committed event supersedes it.\n    if (debounceTimer.current != null) {\n      clearTimeout(debounceTimer.current);\n      debounceTimer.current = null;\n    }\n\n    // When debounce is active (and not suppressed), flush the final value via\n    // onChanged before the committed event so listeners always see both.\n    if (debounceMs > 0 && !suppressChangedEvents) {\n      dispatchChanged(newValue);\n    }\n\n    onCommitted({name, value: newValue});\n  }\n\n  // --- Tick calculations ---\n  // tickStep=0  → hide minor ticks only  (major still shown if majorTickStep > 0)\n  // majorTickStep=0 → hide major ticks only (minor still shown if tickStep > 0)\n  // Both 0 → nothing shown\n  const effectiveMinorStep = tickStep !== undefined ? tickStep : step;\n  const showMinorTicks = effectiveMinorStep > 0;\n\n  // Auto major step: use minor step as base when minor ticks are on;\n  // fall back to `step` when minor ticks are off (tickStep=0) so that\n  // major ticks can still be auto-calculated from the slider's step.\n  const autoMajorBase = showMinorTicks ? effectiveMinorStep : step;\n  const autoMajorStep =\n    autoMajorBase > 0\n      ? Math.max(\n          autoMajorBase,\n          Math.round((max - min) / 5 / autoMajorBase) * autoMajorBase,\n        )\n      : 0;\n  // majorTickStep undefined → auto; 0 → no major ticks; >0 → explicit value\n  const resolvedMajorStep =\n    majorTickStep !== undefined ? majorTickStep : autoMajorStep;\n  const showMajorTicks = resolvedMajorStep > 0;\n\n  const renderTicks = showTicks && (showMinorTicks || showMajorTicks);\n\n  // Use minor spacing as base when available; fall back to major spacing.\n  const baseStep = showMinorTicks ? effectiveMinorStep : resolvedMajorStep;\n  const ticks = renderTicks\n    ? Array.from(\n        {length: Math.round((max - min) / baseStep) + 1},\n        (_, i) => min + i * baseStep,\n      )\n    : [];\n\n  return (\n    <div\n      data-pihanga={cardName}\n      className={cn(\"flex flex-col gap-2\", className)}\n    >\n      {label && (\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-sm font-medium leading-none\">{label}</span>\n          <span className=\"text-sm text-muted-foreground tabular-nums\">\n            {displayValue}\n          </span>\n        </div>\n      )}\n      <SliderUI\n        value={[displayValue]}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        onPointerDown={handlePointerDown}\n        onValueChange={handleValueChange}\n        onValueCommit={handleValueCommit}\n        className=\"w-full\"\n      />\n      {renderTicks && (\n        <div\n          aria-hidden=\"true\"\n          className=\"flex w-full items-baseline justify-between px-0.5\"\n        >\n          {ticks.map((tick) => {\n            const isMajor =\n              showMajorTicks && (tick - min) % resolvedMajorStep === 0;\n            const isActive = tick <= displayValue;\n            // Show label when:\n            //  • suppressTickLabels is false, AND\n            //  • tick is major  OR  there are no major ticks (label every minor tick)\n            const showLabel =\n              !suppressTickLabels && (isMajor || !showMajorTicks);\n            const labelText = showLabel\n              ? tickLabels && tick in tickLabels\n                ? tickLabels[tick]\n                : String(tick)\n              : \"\";\n\n            return (\n              <div key={tick} className=\"flex flex-col items-center gap-1\">\n                <div\n                  className={cn(\n                    \"w-0.5 rounded-full transition-all duration-300\",\n                    isActive ? \"bg-primary\" : \"bg-primary/20\",\n                    isMajor ? \"h-3\" : \"h-1.5\",\n                  )}\n                />\n                <span\n                  className={cn(\n                    \"text-xs font-medium transition-colors\",\n                    showLabel\n                      ? \"text-muted-foreground opacity-100\"\n                      : \"opacity-0\",\n                  )}\n                >\n                  {labelText}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,GACP,iBACA,iBAAc,IACd,SAAM,GACN,SAAM,KACN,UAAO,GACP,aACA,gBAAa,GACb,2BAAwB,IACxB,UACA,eAAY,IACZ,aACA,kBACA,wBAAqB,IACrB,eACA,cACA,aACA,cACA,mBACE,GAGE,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAGvC,CAAC,GAAc,KAAmB,EACtC,KAAgB,KAAa,CAC/B,GAGM,IAAiB,IACjB,EAAK,SAAS,MAAiC,IACjD,IACE,IACC,KAAa,GAId,IAAoB,EAAO,CAAc;CAC/C,EAAkB,UAAU;CAI5B,IAAM,IAAa,EAAO,EAAK,GACzB,CAAC,GAAkB,KACvB,EAAiB,CAAc,GAG3B,IAAe,EAAW,UAAU,IAAmB,GAGvD,IAAgB,EAA6C,IAAI,GACjE,IAAe,EAAe,CAAc;CAGlD,cACe;EACX,AAAI,EAAc,WAAW,QAAM,aAAa,EAAc,OAAO;CACvE,GACC,CAAC,CAAC;CAEL,SAAS,EAAgB,GAAkB;EAErC,MAEA,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAIA,SAAS,IAAoB;EAE3B,AADA,EAAW,UAAU,IACrB,EAAoB,EAAkB,OAAO;CAC/C;CAEA,SAAS,EAAkB,GAAqB;EAC9C,IAAM,IAAW,EAAU,MAAM;EAG5B,EAAW,YAEhB,EAAoB,CAAQ,GAGxB,KAAe,CAAC,KAClB,EAAgB,CAAQ,GAGtB,IAAa,KAEf,EAAa,UAAU,GACnB,EAAc,WAAW,QAAM,aAAa,EAAc,OAAO,GACrE,EAAc,UAAU,iBAAiB;GAEvC,AADA,EAAc,UAAU,MACxB,EAAgB,EAAa,OAAO;EACtC,GAAG,CAAU,KAEb,EAAgB,CAAQ;CAE5B;CAEA,SAAS,EAAkB,GAAqB;EAC9C,IAAM,IAAW,EAAU,MAAM;EAmBjC,AAfA,EAAW,UAAU,IACrB,EAAoB,EAAkB,OAAO,GAGzC,EAAc,WAAW,SAC3B,aAAa,EAAc,OAAO,GAClC,EAAc,UAAU,OAKtB,IAAa,KAAK,CAAC,KACrB,EAAgB,CAAQ,GAG1B,EAAY;GAAC;GAAM,OAAO;EAAQ,CAAC;CACrC;CAMA,IAAM,IAAqB,MAAa,KAAA,IAAuB,IAAX,GAC9C,IAAiB,IAAqB,GAKtC,IAAgB,IAAiB,IAAqB,GACtD,IACJ,IAAgB,IACZ,KAAK,IACH,GACA,KAAK,OAAO,IAAM,KAAO,IAAI,CAAa,IAAI,CAChD,IACA,GAEA,IACJ,MAAkB,KAAA,IAA4B,IAAhB,GAC1B,IAAiB,IAAoB,GAErC,IAAc,MAAc,KAAkB,IAG9C,IAAW,IAAiB,IAAqB,GACjD,IAAQ,IACV,MAAM,KACJ,EAAC,QAAQ,KAAK,OAAO,IAAM,KAAO,CAAQ,IAAI,EAAC,IAC9C,GAAG,MAAM,IAAM,IAAI,CACtB,IACA,CAAC;CAEL,OACE,kBAAC,OAAD;EACE,gBAAc;EACd,WAAW,EAAG,uBAAuB,CAAS;YAFhD;GAIG,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAoC;IAAY,CAAA,GAChE,kBAAC,QAAD;KAAM,WAAU;eACb;IACG,CAAA,CACH;;GAEP,kBAAC,GAAD;IACE,OAAO,CAAC,CAAY;IACf;IACA;IACC;IACI;IACV,eAAe;IACf,eAAe;IACf,eAAe;IACf,WAAU;GACX,CAAA;GACA,KACC,kBAAC,OAAD;IACE,eAAY;IACZ,WAAU;cAET,EAAM,KAAK,MAAS;KACnB,IAAM,IACJ,MAAmB,IAAO,KAAO,MAAsB,GACnD,IAAW,KAAQ,GAInB,IACJ,CAAC,MAAuB,KAAW,CAAC,IAChC,IAAY,IACd,KAAc,KAAQ,IACpB,EAAW,KACX,OAAO,CAAI,IACb;KAEJ,OACE,kBAAC,OAAD;MAAgB,WAAU;gBAA1B,CACE,kBAAC,OAAD,EACE,WAAW,EACT,kDACA,IAAW,eAAe,iBAC1B,IAAU,QAAQ,OACpB,EACD,CAAA,GACD,kBAAC,QAAD;OACE,WAAW,EACT,yCACA,IACI,sCACA,WACN;iBAEC;MACG,CAAA,CACH;QAlBK,CAkBL;IAET,CAAC;GACE,CAAA;EAEJ;;AAET"}

package/cards/slider/slider.types.d.ts

@@ -89,6 +89,37 @@ export type PiSliderProps = {
      * When provided, the current numeric value is shown to the right of the label.
      */
     label?: string;
+    /**
+     * When true, tick marks are rendered below the slider track.
+     */
+    showTicks?: boolean;
+    /**
+     * Spacing between consecutive **minor** tick marks in value units.
+     * Defaults to `step`.
+     * Set to `0` to hide minor ticks only — major ticks are still shown
+     * if `majorTickStep` is non-zero.
+     */
+    tickStep?: number;
+    /**
+     * Interval (in value units) between **major** (tall, labelled) ticks.
+     * Defaults to `(max - min) / 5` rounded to the nearest `tickStep`.
+     * Set to `0` to hide major ticks only — minor ticks are still shown
+     * if `tickStep` is non-zero.
+     */
+    majorTickStep?: number;
+    /**
+     * When true, no tick labels are rendered at all (only the tick marks).
+     * Overrides `tickLabels` and the default numeric labels.
+     */
+    suppressTickLabels?: boolean;
+    /**
+     * Custom labels keyed by value.  When provided for a value, the custom
+     * string is shown instead of the numeric value.  Pass `""` to suppress the
+     * label for a specific tick.
+     *
+     * @example { 0: "Min", 50: "Mid", 100: "Max" }
+     */
+    tickLabels?: Record<number, string>;
     /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */
     className?: string;
 };

package/cards/slider/slider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.types.js","names":[],"sources":["../../../src/cards/slider/slider.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SLIDER_CARD = \"shad/slider\";\n\nexport const Slider = createCardDeclaration<PiSliderProps, PiSliderEvents>(\n  PI_SLIDER_CARD,\n);\n\nexport const PI_SLIDER_ACTION = registerActions(PI_SLIDER_CARD, [\n  \"changed\",\n  \"committed\",\n]);\n\nexport const onSliderChanged = createOnAction<PiSliderChangedEvent>(\n  PI_SLIDER_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onSliderChanged` instead. */\nexport const onPiSliderChanged = onSliderChanged;\n\n/**\n * Fired once when the user **finishes** dragging (mouse-up / touch-end).\n *\n * Use this instead of `onSliderChanged` when you only care about the final\n * settled value and do not want to process every intermediate drag position.\n */\nexport const onSliderCommitted = createOnAction<PiSliderCommittedEvent>(\n  PI_SLIDER_ACTION.COMMITTED,\n);\n\n/** @deprecated Use `onSliderCommitted` instead. */\nexport const onPiSliderCommitted = onSliderCommitted;\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiSliderProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form data and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled numeric value (single thumb).\n   * Ignored when `name` is set and the component is inside a pi/form,\n   * and also ignored when `selfManaged` is true (use `defaultValue` instead).\n   */\n  value?: number;\n\n  /**\n   * Initial value used when `selfManaged` is true.\n   * Falls back to `value` → `min` → 0 if not provided.\n   */\n  defaultValue?: number;\n\n  /**\n   * When true the slider keeps its own internal value state.\n   * Dragging updates the displayed value immediately without needing an\n   * external state update.  `onChanged` is still fired on every change so\n   * the app can react (or log) without being responsible for feeding the\n   * value back as a prop.\n   *\n   * Ignored when inside a pi/form (form state takes precedence).\n   */\n  selfManaged?: boolean;\n\n  /** Minimum value of the slider range. Defaults to 0. */\n  min?: number;\n\n  /** Maximum value of the slider range. Defaults to 100. */\n  max?: number;\n\n  /** Stepping interval between selectable values. Defaults to 1. */\n  step?: number;\n\n  /** When true, the slider is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Debounce delay in milliseconds applied to `onChanged` during continuous\n   * drag.  Only the last value within each quiet window is dispatched.\n   *\n   * Useful when the `onChanged` handler is expensive (e.g. triggers an API\n   * call) — set e.g. `debounceMs: 200` to cap the event rate.\n   *\n   * Has no effect on `onCommitted`, which always fires exactly once at\n   * drag-end regardless of this setting.\n   *\n   * Omit (or set to 0) to dispatch on every drag position (default behaviour).\n   */\n  debounceMs?: number;\n\n  /**\n   * When true, `onSliderChanged` is **never** dispatched during drag.\n   *\n   * Use this together with `onSliderCommitted` when you only care about\n   * the final settled value and want to eliminate all intermediate Redux\n   * actions entirely (stricter than `debounceMs`).\n   *\n   * `onSliderCommitted` is unaffected and always fires on release.\n   * `selfManaged` visual updates are also unaffected.\n   */\n  suppressChangedEvents?: boolean;\n\n  /**\n   * Optional label text rendered above the slider.\n   * When provided, the current numeric value is shown to the right of the label.\n   */\n  label?: string;\n\n  /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */\n  className?: string;\n};\n\nexport type PiSliderChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New numeric value after the change. */\n  value: number;\n};\n\nexport type PiSliderCommittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** Final settled value when the user released the thumb. */\n  value: number;\n};\n\nexport type PiSliderEvents = {\n  onChanged: PiSliderChangedEvent;\n  onCommitted: PiSliderCommittedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,eAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAC9D,WACA,WACF,CAAC,GAEY,IAAkB,EAC7B,EAAiB,OACnB,GAGa,IAAoB,GAQpB,IAAoB,EAC/B,EAAiB,SACnB,GAGa,IAAsB"}
+{"version":3,"file":"slider.types.js","names":[],"sources":["../../../src/cards/slider/slider.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SLIDER_CARD = \"shad/slider\";\n\nexport const Slider = createCardDeclaration<PiSliderProps, PiSliderEvents>(\n  PI_SLIDER_CARD,\n);\n\nexport const PI_SLIDER_ACTION = registerActions(PI_SLIDER_CARD, [\n  \"changed\",\n  \"committed\",\n]);\n\nexport const onSliderChanged = createOnAction<PiSliderChangedEvent>(\n  PI_SLIDER_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onSliderChanged` instead. */\nexport const onPiSliderChanged = onSliderChanged;\n\n/**\n * Fired once when the user **finishes** dragging (mouse-up / touch-end).\n *\n * Use this instead of `onSliderChanged` when you only care about the final\n * settled value and do not want to process every intermediate drag position.\n */\nexport const onSliderCommitted = createOnAction<PiSliderCommittedEvent>(\n  PI_SLIDER_ACTION.COMMITTED,\n);\n\n/** @deprecated Use `onSliderCommitted` instead. */\nexport const onPiSliderCommitted = onSliderCommitted;\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiSliderProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form data and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled numeric value (single thumb).\n   * Ignored when `name` is set and the component is inside a pi/form,\n   * and also ignored when `selfManaged` is true (use `defaultValue` instead).\n   */\n  value?: number;\n\n  /**\n   * Initial value used when `selfManaged` is true.\n   * Falls back to `value` → `min` → 0 if not provided.\n   */\n  defaultValue?: number;\n\n  /**\n   * When true the slider keeps its own internal value state.\n   * Dragging updates the displayed value immediately without needing an\n   * external state update.  `onChanged` is still fired on every change so\n   * the app can react (or log) without being responsible for feeding the\n   * value back as a prop.\n   *\n   * Ignored when inside a pi/form (form state takes precedence).\n   */\n  selfManaged?: boolean;\n\n  /** Minimum value of the slider range. Defaults to 0. */\n  min?: number;\n\n  /** Maximum value of the slider range. Defaults to 100. */\n  max?: number;\n\n  /** Stepping interval between selectable values. Defaults to 1. */\n  step?: number;\n\n  /** When true, the slider is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Debounce delay in milliseconds applied to `onChanged` during continuous\n   * drag.  Only the last value within each quiet window is dispatched.\n   *\n   * Useful when the `onChanged` handler is expensive (e.g. triggers an API\n   * call) — set e.g. `debounceMs: 200` to cap the event rate.\n   *\n   * Has no effect on `onCommitted`, which always fires exactly once at\n   * drag-end regardless of this setting.\n   *\n   * Omit (or set to 0) to dispatch on every drag position (default behaviour).\n   */\n  debounceMs?: number;\n\n  /**\n   * When true, `onSliderChanged` is **never** dispatched during drag.\n   *\n   * Use this together with `onSliderCommitted` when you only care about\n   * the final settled value and want to eliminate all intermediate Redux\n   * actions entirely (stricter than `debounceMs`).\n   *\n   * `onSliderCommitted` is unaffected and always fires on release.\n   * `selfManaged` visual updates are also unaffected.\n   */\n  suppressChangedEvents?: boolean;\n\n  /**\n   * Optional label text rendered above the slider.\n   * When provided, the current numeric value is shown to the right of the label.\n   */\n  label?: string;\n\n  /**\n   * When true, tick marks are rendered below the slider track.\n   */\n  showTicks?: boolean;\n\n  /**\n   * Spacing between consecutive **minor** tick marks in value units.\n   * Defaults to `step`.\n   * Set to `0` to hide minor ticks only — major ticks are still shown\n   * if `majorTickStep` is non-zero.\n   */\n  tickStep?: number;\n\n  /**\n   * Interval (in value units) between **major** (tall, labelled) ticks.\n   * Defaults to `(max - min) / 5` rounded to the nearest `tickStep`.\n   * Set to `0` to hide major ticks only — minor ticks are still shown\n   * if `tickStep` is non-zero.\n   */\n  majorTickStep?: number;\n\n  /**\n   * When true, no tick labels are rendered at all (only the tick marks).\n   * Overrides `tickLabels` and the default numeric labels.\n   */\n  suppressTickLabels?: boolean;\n\n  /**\n   * Custom labels keyed by value.  When provided for a value, the custom\n   * string is shown instead of the numeric value.  Pass `\"\"` to suppress the\n   * label for a specific tick.\n   *\n   * @example { 0: \"Min\", 50: \"Mid\", 100: \"Max\" }\n   */\n  tickLabels?: Record<number, string>;\n\n  /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */\n  className?: string;\n};\n\nexport type PiSliderChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New numeric value after the change. */\n  value: number;\n};\n\nexport type PiSliderCommittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** Final settled value when the user released the thumb. */\n  value: number;\n};\n\nexport type PiSliderEvents = {\n  onChanged: PiSliderChangedEvent;\n  onCommitted: PiSliderCommittedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,eAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAC9D,WACA,WACF,CAAC,GAEY,IAAkB,EAC7B,EAAiB,OACnB,GAGa,IAAoB,GAQpB,IAAoB,EAC/B,EAAiB,SACnB,GAGa,IAAsB"}

package/cards/stepper/stepper.component.js

@@ -1,5 +1,5 @@
 import { StepperUI as e } from "../../components/ui/stepper.js";
-/* empty css        */
+import './stepper.css';/* empty css        */
 import { useState as t } from "react";
 import { Card as n } from "@pihanga2/core";
 import { jsx as r } from "react/jsx-runtime";

package/cards/stepper/stepper.css

@@ -0,0 +1 @@
+.pi-stepper{--pi-stepper-indicator-size-sm:1.5rem;--pi-stepper-indicator-size-md:2rem;--pi-stepper-indicator-size-lg:2.5rem;--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-md);--pi-stepper-connector-thickness:2px;--pi-stepper-connector-min-height:1.5rem;--pi-stepper-label-max-width:6rem}.pi-stepper--sm{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-sm)}.pi-stepper--md{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-md)}.pi-stepper--lg{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-lg)}.pi-stepper__indicator{transition:background-color .2s,border-color .2s,color .2s,outline-color .2s}.pi-stepper__indicator--clickable{cursor:pointer}.pi-stepper__indicator--clickable:hover{opacity:.8}.pi-stepper__indicator--static{cursor:default}.pi-stepper__connector{transition:background-color .3s}.pi-stepper__connector--vertical{min-height:var(--pi-stepper-connector-min-height)}.pi-stepper__label-title{transition:color .2s}

package/cards/toggleGroup/toggleGroup.component.js

@@ -5,7 +5,7 @@ import "@pihanga2/core";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/cards/toggleGroup/toggleGroup.component.tsx
 var a = (a) => {
-	let { name: o, items: s, type: c = "single", value: l, selfManaged: u = !1, variant: d = "default", size: f = "default", spacing: p = 0, disabled: m, className: h, cardName: g, onChanged: _ } = a, v = e(), y = v.isInForm && !!o, b = c === "multiple" ? Array.isArray(l) ? l : l == null ? [] : [String(l)] : typeof l == "string" ? l : "", [x, S] = r.useState(b), C = y ? v.formData[o] : void 0, w = y ? c === "multiple" ? Array.isArray(C) ? C : C == null ? [] : [String(C)] : C == null ? "" : String(C) : u ? x : l ?? (c === "multiple" ? [] : "");
+	let { name: o, items: s = [], type: c = "single", value: l, selfManaged: u = !1, variant: d = "default", size: f = "default", spacing: p = 0, disabled: m, className: h, cardName: g, onChanged: _ } = a, v = e(), y = v.isInForm && !!o, b = c === "multiple" ? Array.isArray(l) ? l : l == null ? [] : [String(l)] : typeof l == "string" ? l : "", [x, S] = r.useState(b), C = y ? v.formData[o] : void 0, w = y ? c === "multiple" ? Array.isArray(C) ? C : C == null ? [] : [String(C)] : C == null ? "" : String(C) : u ? x : l ?? (c === "multiple" ? [] : "");
 	function T(e) {
 		y ? v.handleChange(o, e) : (u && S(e), _({
 			name: o ?? g,

package/cards/toggleGroup/toggleGroup.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleGroup.component.js","names":[],"sources":["../../../src/cards/toggleGroup/toggleGroup.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {\n  ToggleGroup as ToggleGroupUI,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {\n  PiToggleGroupEvents,\n  PiToggleGroupProps,\n} from \"./toggleGroup.types\";\n\nexport const ToggleGroupComponent = (\n  props: PiCardProps<PiToggleGroupProps, PiToggleGroupEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    items,\n    type = \"single\",\n    value: propValue,\n    selfManaged = false,\n    variant = \"default\",\n    size = \"default\",\n    spacing = 0,\n    disabled,\n    className,\n    cardName,\n    onChanged,\n  } = props;\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // ---------------------------------------------------------------------------\n  // Self-managed (internal) state — only active when selfManaged=true and we\n  // are NOT inside a pi/form card.\n  // ---------------------------------------------------------------------------\n  const initialSelfValue: string | string[] =\n    type === \"multiple\"\n      ? Array.isArray(propValue)\n        ? propValue\n        : propValue != null\n          ? [String(propValue)]\n          : []\n      : typeof propValue === \"string\"\n        ? propValue\n        : \"\";\n\n  const [internalValue, setInternalValue] = React.useState<string | string[]>(\n    initialSelfValue,\n  );\n\n  // ---------------------------------------------------------------------------\n  // Derive the effective value from the appropriate source.\n  //   1. Form context (highest priority)\n  //   2. Self-managed internal state\n  //   3. Externally controlled prop value\n  // ---------------------------------------------------------------------------\n  const formRawValue = useFormData ? form.formData[name!] : undefined;\n  const value: string | string[] = useFormData\n    ? type === \"multiple\"\n      ? Array.isArray(formRawValue)\n        ? (formRawValue as string[])\n        : formRawValue != null\n          ? [String(formRawValue)]\n          : []\n      : formRawValue != null\n        ? String(formRawValue)\n        : \"\"\n    : selfManaged\n      ? internalValue\n      : (propValue ?? (type === \"multiple\" ? [] : \"\"));\n\n  function handleSingleChange(newValue: string) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setInternalValue(newValue);\n      }\n      onChanged({name: name ?? cardName, value: newValue});\n    }\n  }\n\n  function handleMultipleChange(newValue: string[]) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setInternalValue(newValue);\n      }\n      onChanged({name: name ?? cardName, value: newValue});\n    }\n  }\n\n  // Render single-selection group\n  if (type === \"single\") {\n    return (\n      <ToggleGroupUI\n        data-pihanga={cardName}\n        type=\"single\"\n        value={typeof value === \"string\" ? value : \"\"}\n        onValueChange={handleSingleChange}\n        variant={variant}\n        size={size}\n        spacing={spacing}\n        disabled={disabled}\n        className={className}\n      >\n        {items.map((item) => (\n          <ToggleGroupItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n          >\n            {item.label}\n          </ToggleGroupItem>\n        ))}\n      </ToggleGroupUI>\n    );\n  }\n\n  // Render multiple-selection group\n  return (\n    <ToggleGroupUI\n      data-pihanga={cardName}\n      type=\"multiple\"\n      value={Array.isArray(value) ? value : value ? [value] : []}\n      onValueChange={handleMultipleChange}\n      variant={variant}\n      size={size}\n      spacing={spacing}\n      disabled={disabled}\n      className={className}\n    >\n      {items.map((item) => (\n        <ToggleGroupItem\n          key={item.value}\n          value={item.value}\n          disabled={item.disabled}\n        >\n          {item.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroupUI>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,UACA,UAAO,UACP,OAAO,GACP,iBAAc,IACd,aAAU,WACV,UAAO,WACP,aAAU,GACV,aACA,cACA,aACA,iBACE,GAGE,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAMvC,IACJ,MAAS,aACL,MAAM,QAAQ,CAAS,IACrB,IACA,KAAa,OAEX,CAAC,IADD,CAAC,OAAO,CAAS,CAAC,IAEtB,OAAO,KAAc,WACnB,IACA,IAEF,CAAC,GAAe,KAAoB,EAAM,SAC9C,CACF,GAQM,IAAe,IAAc,EAAK,SAAS,KAAS,KAAA,GACpD,IAA2B,IAC7B,MAAS,aACP,MAAM,QAAQ,CAAY,IACvB,IACD,KAAgB,OAEd,CAAC,IADD,CAAC,OAAO,CAAY,CAAC,IAEzB,KAAgB,OAEd,KADA,OAAO,CAAY,IAEvB,IACE,IACC,MAAc,MAAS,aAAa,CAAC,IAAI;CAEhD,SAAS,EAAmB,GAAkB;EAC5C,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAiB,CAAQ,GAE3B,EAAU;GAAC,MAAM,KAAQ;GAAU,OAAO;EAAQ,CAAC;CAEvD;CAEA,SAAS,EAAqB,GAAoB;EAChD,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAiB,CAAQ,GAE3B,EAAU;GAAC,MAAM,KAAQ;GAAU,OAAO;EAAQ,CAAC;CAEvD;CA8BA,OA3BI,MAAS,WAET,kBAAC,GAAD;EACE,gBAAc;EACd,MAAK;EACL,OAAO,OAAO,KAAU,WAAW,IAAQ;EAC3C,eAAe;EACN;EACH;EACG;EACC;EACC;YAEV,EAAM,KAAK,MACV,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,UAAU,EAAK;aAEd,EAAK;EACS,GALV,EAAK,KAKK,CAClB;CACY,CAAA,IAMjB,kBAAC,GAAD;EACE,gBAAc;EACd,MAAK;EACL,OAAO,MAAM,QAAQ,CAAK,IAAI,IAAQ,IAAQ,CAAC,CAAK,IAAI,CAAC;EACzD,eAAe;EACN;EACH;EACG;EACC;EACC;YAEV,EAAM,KAAK,MACV,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,UAAU,EAAK;aAEd,EAAK;EACS,GALV,EAAK,KAKK,CAClB;CACY,CAAA;AAEnB"}
+{"version":3,"file":"toggleGroup.component.js","names":[],"sources":["../../../src/cards/toggleGroup/toggleGroup.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {\n  ToggleGroup as ToggleGroupUI,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {\n  PiToggleGroupEvents,\n  PiToggleGroupProps,\n} from \"./toggleGroup.types\";\n\nexport const ToggleGroupComponent = (\n  props: PiCardProps<PiToggleGroupProps, PiToggleGroupEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    items = [],\n    type = \"single\",\n    value: propValue,\n    selfManaged = false,\n    variant = \"default\",\n    size = \"default\",\n    spacing = 0,\n    disabled,\n    className,\n    cardName,\n    onChanged,\n  } = props;\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // ---------------------------------------------------------------------------\n  // Self-managed (internal) state — only active when selfManaged=true and we\n  // are NOT inside a pi/form card.\n  // ---------------------------------------------------------------------------\n  const initialSelfValue: string | string[] =\n    type === \"multiple\"\n      ? Array.isArray(propValue)\n        ? propValue\n        : propValue != null\n          ? [String(propValue)]\n          : []\n      : typeof propValue === \"string\"\n        ? propValue\n        : \"\";\n\n  const [internalValue, setInternalValue] = React.useState<string | string[]>(\n    initialSelfValue,\n  );\n\n  // ---------------------------------------------------------------------------\n  // Derive the effective value from the appropriate source.\n  //   1. Form context (highest priority)\n  //   2. Self-managed internal state\n  //   3. Externally controlled prop value\n  // ---------------------------------------------------------------------------\n  const formRawValue = useFormData ? form.formData[name!] : undefined;\n  const value: string | string[] = useFormData\n    ? type === \"multiple\"\n      ? Array.isArray(formRawValue)\n        ? (formRawValue as string[])\n        : formRawValue != null\n          ? [String(formRawValue)]\n          : []\n      : formRawValue != null\n        ? String(formRawValue)\n        : \"\"\n    : selfManaged\n      ? internalValue\n      : (propValue ?? (type === \"multiple\" ? [] : \"\"));\n\n  function handleSingleChange(newValue: string) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setInternalValue(newValue);\n      }\n      onChanged({name: name ?? cardName, value: newValue});\n    }\n  }\n\n  function handleMultipleChange(newValue: string[]) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setInternalValue(newValue);\n      }\n      onChanged({name: name ?? cardName, value: newValue});\n    }\n  }\n\n  // Render single-selection group\n  if (type === \"single\") {\n    return (\n      <ToggleGroupUI\n        data-pihanga={cardName}\n        type=\"single\"\n        value={typeof value === \"string\" ? value : \"\"}\n        onValueChange={handleSingleChange}\n        variant={variant}\n        size={size}\n        spacing={spacing}\n        disabled={disabled}\n        className={className}\n      >\n        {items.map((item) => (\n          <ToggleGroupItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n          >\n            {item.label}\n          </ToggleGroupItem>\n        ))}\n      </ToggleGroupUI>\n    );\n  }\n\n  // Render multiple-selection group\n  return (\n    <ToggleGroupUI\n      data-pihanga={cardName}\n      type=\"multiple\"\n      value={Array.isArray(value) ? value : value ? [value] : []}\n      onValueChange={handleMultipleChange}\n      variant={variant}\n      size={size}\n      spacing={spacing}\n      disabled={disabled}\n      className={className}\n    >\n      {items.map((item) => (\n        <ToggleGroupItem\n          key={item.value}\n          value={item.value}\n          disabled={item.disabled}\n        >\n          {item.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroupUI>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,WAAQ,CAAC,GACT,UAAO,UACP,OAAO,GACP,iBAAc,IACd,aAAU,WACV,UAAO,WACP,aAAU,GACV,aACA,cACA,aACA,iBACE,GAGE,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAMvC,IACJ,MAAS,aACL,MAAM,QAAQ,CAAS,IACrB,IACA,KAAa,OAEX,CAAC,IADD,CAAC,OAAO,CAAS,CAAC,IAEtB,OAAO,KAAc,WACnB,IACA,IAEF,CAAC,GAAe,KAAoB,EAAM,SAC9C,CACF,GAQM,IAAe,IAAc,EAAK,SAAS,KAAS,KAAA,GACpD,IAA2B,IAC7B,MAAS,aACP,MAAM,QAAQ,CAAY,IACvB,IACD,KAAgB,OAEd,CAAC,IADD,CAAC,OAAO,CAAY,CAAC,IAEzB,KAAgB,OAEd,KADA,OAAO,CAAY,IAEvB,IACE,IACC,MAAc,MAAS,aAAa,CAAC,IAAI;CAEhD,SAAS,EAAmB,GAAkB;EAC5C,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAiB,CAAQ,GAE3B,EAAU;GAAC,MAAM,KAAQ;GAAU,OAAO;EAAQ,CAAC;CAEvD;CAEA,SAAS,EAAqB,GAAoB;EAChD,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAiB,CAAQ,GAE3B,EAAU;GAAC,MAAM,KAAQ;GAAU,OAAO;EAAQ,CAAC;CAEvD;CA8BA,OA3BI,MAAS,WAET,kBAAC,GAAD;EACE,gBAAc;EACd,MAAK;EACL,OAAO,OAAO,KAAU,WAAW,IAAQ;EAC3C,eAAe;EACN;EACH;EACG;EACC;EACC;YAEV,EAAM,KAAK,MACV,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,UAAU,EAAK;aAEd,EAAK;EACS,GALV,EAAK,KAKK,CAClB;CACY,CAAA,IAMjB,kBAAC,GAAD;EACE,gBAAc;EACd,MAAK;EACL,OAAO,MAAM,QAAQ,CAAK,IAAI,IAAQ,IAAQ,CAAC,CAAK,IAAI,CAAC;EACzD,eAAe;EACN;EACH;EACG;EACC;EACC;YAEV,EAAM,KAAK,MACV,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,UAAU,EAAK;aAEd,EAAK;EACS,GALV,EAAK,KAKK,CAClB;CACY,CAAA;AAEnB"}

package/components/ui/avatar.js

@@ -1,24 +1,24 @@
 import { cn as e } from "../../lib/utils.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Avatar as n } from "radix-ui";
+import { Avatar as t } from "radix-ui";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/components/ui/avatar.tsx
 function r({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.Root, {
+	return /* @__PURE__ */ n(t.Root, {
 		"data-slot": "avatar",
 		className: e("relative flex size-8 shrink-0 overflow-hidden rounded-full", r),
 		...i
 	});
 }
 function i({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.Image, {
+	return /* @__PURE__ */ n(t.Image, {
 		"data-slot": "avatar-image",
 		className: e("aspect-square size-full", r),
 		...i
 	});
 }
 function a({ className: r, ...i }) {
-	return /* @__PURE__ */ t(n.Fallback, {
+	return /* @__PURE__ */ n(t.Fallback, {
 		"data-slot": "avatar-fallback",
 		className: e("bg-muted flex size-full items-center justify-center rounded-full text-xs", r),
 		...i

package/components/ui/badge.js

@@ -1,10 +1,10 @@
 import { cn as e } from "../lib/utils.js";
 import "react";
-import { Slot as t } from "@radix-ui/react-slot";
-import { cva as n } from "class-variance-authority";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
+import { Slot as n } from "@radix-ui/react-slot";
+import { cva as r } from "class-variance-authority";
 //#region src/components/ui/badge.tsx
-var i = n("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+var i = r("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
 	variants: { variant: {
 		default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
 		secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
@@ -13,10 +13,10 @@ var i = n("inline-flex items-center justify-center rounded-full border px-2 py-0
 	} },
 	defaultVariants: { variant: "default" }
 });
-function a({ className: n, variant: a, asChild: o = !1, ...s }) {
-	return /* @__PURE__ */ r(o ? t : "span", {
+function a({ className: r, variant: a, asChild: o = !1, ...s }) {
+	return /* @__PURE__ */ t(o ? n : "span", {
 		"data-slot": "badge",
-		className: e(i({ variant: a }), n),
+		className: e(i({ variant: a }), r),
 		...s
 	});
 }

package/components/ui/button.js

@@ -1,10 +1,10 @@
 import { cn as e } from "../../lib/utils.js";
 import "react";
-import { cva as t } from "class-variance-authority";
+import { Slot as t } from "radix-ui";
 import { jsx as n } from "react/jsx-runtime";
-import { Slot as r } from "radix-ui";
+import { cva as r } from "class-variance-authority";
 //#region src/components/ui/button.tsx
-var i = t("inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+var i = r("inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -48,8 +48,8 @@ var i = t("inline-flex shrink-0 items-center justify-center gap-2 rounded-md tex
 		size: "default"
 	}
 });
-function a({ className: t, variant: a = "default", size: o = "default", asChild: s = !1, label: c, active: l, focused: u, isMenu: d, truncate: f, loading: p, isPending: m, loadingClassName: h, ...g }) {
-	return /* @__PURE__ */ n(s ? r.Root : "button", {
+function a({ className: r, variant: a = "default", size: o = "default", asChild: s = !1, label: c, active: l, focused: u, isMenu: d, truncate: f, loading: p, isPending: m, loadingClassName: h, ...g }) {
+	return /* @__PURE__ */ n(s ? t.Root : "button", {
 		"data-slot": "button",
 		"data-variant": a,
 		"data-size": o,
@@ -62,7 +62,7 @@ function a({ className: t, variant: a = "default", size: o = "default", asChild:
 		className: e(i({
 			variant: a,
 			size: o,
-			className: t
+			className: r
 		}), f && "truncate"),
 		...g
 	});

package/components/ui/card.js

@@ -0,0 +1,50 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/ui/card.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card",
+		className: e("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", n),
+		...r
+	});
+}
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-title",
+		className: e("leading-none font-semibold", n),
+		...r
+	});
+}
+function i({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-description",
+		className: e("text-sm text-muted-foreground", n),
+		...r
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-action",
+		className: e("col-start-2 row-span-2 row-start-1 self-start justify-self-end", n),
+		...r
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-content",
+		className: e("px-6", n),
+		...r
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-footer",
+		className: e("flex items-center px-6 [.border-t]:pt-6", n),
+		...r
+	});
+}
+//#endregion
+export { n as Card, a as CardAction, o as CardContent, i as CardDescription, s as CardFooter, r as CardTitle };
+
+//# sourceMappingURL=card.js.map

package/components/ui/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"],"mappings":";;;;AAIA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAsC;CAClE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,qFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAeA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAsC;CACvE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,8BAA8B,CAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAsC;CAC7E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,iCAAiC,CAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,kEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,QAAQ,CAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,2CAA2C,CAAS;EAClE,GAAI;CACL,CAAA;AAEL"}

package/components/ui/drawer.js

@@ -0,0 +1,79 @@
+import { cn as e } from "../../lib/utils.js";
+import { Drawer as t } from "../../node_modules/vaul/dist/index.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/ui/drawer.tsx
+function i({ ...e }) {
+	return /* @__PURE__ */ n(t.Root, {
+		"data-slot": "drawer",
+		...e
+	});
+}
+function a({ ...e }) {
+	return /* @__PURE__ */ n(t.Trigger, {
+		"data-slot": "drawer-trigger",
+		...e
+	});
+}
+function o({ ...e }) {
+	return /* @__PURE__ */ n(t.Portal, {
+		"data-slot": "drawer-portal",
+		...e
+	});
+}
+function s({ ...e }) {
+	return /* @__PURE__ */ n(t.Close, {
+		"data-slot": "drawer-close",
+		...e
+	});
+}
+function c({ className: r, ...i }) {
+	return /* @__PURE__ */ n(t.Overlay, {
+		"data-slot": "drawer-overlay",
+		className: e("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", r),
+		...i
+	});
+}
+function l({ className: i, children: a, ...s }) {
+	return /* @__PURE__ */ r(o, {
+		"data-slot": "drawer-portal",
+		children: [/* @__PURE__ */ n(c, {}), /* @__PURE__ */ r(t.Content, {
+			"data-slot": "drawer-content",
+			className: e("group/drawer-content fixed z-50 flex h-auto flex-col bg-background", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", i),
+			...s,
+			children: [/* @__PURE__ */ n("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), a]
+		})]
+	});
+}
+function u({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "drawer-header",
+		className: e("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", t),
+		...r
+	});
+}
+function d({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "drawer-footer",
+		className: e("mt-auto flex flex-col gap-2 p-4", t),
+		...r
+	});
+}
+function f({ className: r, ...i }) {
+	return /* @__PURE__ */ n(t.Title, {
+		"data-slot": "drawer-title",
+		className: e("font-semibold text-foreground", r),
+		...i
+	});
+}
+function p({ className: r, ...i }) {
+	return /* @__PURE__ */ n(t.Description, {
+		"data-slot": "drawer-description",
+		className: e("text-sm text-muted-foreground", r),
+		...i
+	});
+}
+//#endregion
+export { i as Drawer, s as DrawerClose, l as DrawerContent, p as DrawerDescription, d as DrawerFooter, u as DrawerHeader, f as DrawerTitle, a as DrawerTrigger };
+
+//# sourceMappingURL=drawer.js.map

package/components/ui/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":[],"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"font-semibold text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n"],"mappings":";;;;;AAKA,SAAS,EAAO,EACd,GAAG,KACiD;CACpD,OAAO,kBAAC,EAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,EAAc,EACrB,GAAG,KACoD;CACvD,OAAO,kBAAC,EAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,EAAa,EACpB,GAAG,KACmD;CACtD,OAAO,kBAAC,EAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,EAAY,EACnB,GAAG,KACkD;CACrD,OAAO,kBAAC,EAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,EAAc,EACrB,cACA,GAAG,KACoD;CACvD,OACE,kBAAC,EAAgB,SAAjB;EACE,aAAU;EACV,WAAW,EACT,0JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAc,EACrB,cACA,aACA,GAAG,KACoD;CACvD,OACE,kBAAC,GAAD;EAAc,aAAU;YAAxB,CACE,kBAAC,GAAD,CAAgB,CAAA,GAChB,kBAAC,EAAgB,SAAjB;GACE,aAAU;GACV,WAAW,EACT,sEACA,kQACA,uRACA,+NACA,yNACA,CACF;GACA,GAAI;aAVN,CAYE,kBAAC,OAAD,EAAK,WAAU,kIAAmI,CAAA,GACjJ,CACsB;IACb;;AAElB;AAEA,SAAS,EAAa,EAAE,cAAW,GAAG,KAAsC;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,4LACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAa,EAAE,cAAW,GAAG,KAAsC;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,mCAAmC,CAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,cACA,GAAG,KACkD;CACrD,OACE,kBAAC,EAAgB,OAAjB;EACE,aAAU;EACV,WAAW,EAAG,iCAAiC,CAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAkB,EACzB,cACA,GAAG,KACwD;CAC3D,OACE,kBAAC,EAAgB,aAAjB;EACE,aAAU;EACV,WAAW,EAAG,iCAAiC,CAAS;EACxD,GAAI;CACL,CAAA;AAEL"}