@pihanga2/shadcn 0.2.4 → 0.2.6

package/cards/scrollbarWithAnnotations/scrollbarWithAnnotations.types.d.ts

@@ -0,0 +1,123 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const SCROLLBAR_WITH_ANNOTATIONS_CARD = "pi/scrollbar-with-annotations";
+export declare const ScrollbarWithAnnotations: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ScrollbarWithAnnotationsProps, S, ScrollbarWithAnnotationsEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const SCROLLBAR_WITH_ANNOTATIONS_ACTION: {
+    ANNOTATION_CLICKED: string;
+    ANNOTATION_HOVERED: string;
+};
+export declare const onScrollbarAnnotationClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & AnnotationClickedEvent>) => void;
+export declare const onScrollbarAnnotationHovered: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & AnnotationHoveredEvent>) => void;
+/**
+ * The visual category of an annotation, which determines its colour on the
+ * scrollbar minimap.
+ */
+export type AnnotationType = "error" | "warning" | "todo" | "comment" | "review" | "fixme";
+/**
+ * Shape of the marker drawn on the scrollbar track.
+ *
+ * - `"point"` – a small circular dot (default).
+ * - `"bar"`   – a short vertical rectangle with a fixed CSS height; useful for
+ *               discrete events that have a known position but no meaningful
+ *               extent.
+ * - `"range"` – a vertical rectangle whose height is proportional to `extent`
+ *               in the content's scroll space, with a CSS-enforced minimum
+ *               height so tiny ranges remain clickable.  Requires `extent`.
+ */
+export type MarkerType = "point" | "bar" | "range";
+/**
+ * A single annotation marker placed on the scrollbar minimap.
+ *
+ * All positions are **pixel offsets from the top of the scrollable content**
+ * (i.e. relative to `scrollHeight`).
+ *
+ * | markerType | required fields          |
+ * |------------|--------------------------|
+ * | `"point"`  | `position`               |
+ * | `"bar"`    | `position`               |
+ * | `"range"`  | `position` + `extent`    |
+ */
+export type ScrollbarAnnotation = {
+    /** Unique identifier for this annotation. */
+    id: string;
+    /**
+     * Pixel offset from the top of the scrollable content.
+     * Acts as the start position for range markers.
+     */
+    position: number;
+    /**
+     * Length of the annotation in content pixels.
+     *
+     * Required when `markerType === "range"`.  The marker will span
+     * `[position, position + extent]` in content space.
+     */
+    extent?: number;
+    /**
+     * Shape of the minimap marker.  Defaults to `"point"`.
+     */
+    markerType?: MarkerType;
+    /** Visual category – controls colour. */
+    type: AnnotationType;
+    /** Short human-readable label shown in detail views. */
+    title: string;
+    /** Full description shown when the annotation is selected/inspected. */
+    description: string;
+    /**
+     * Optional extra CSS class(es) applied to this marker's DOM element.
+     *
+     * Use this to style individual annotations differently from the default
+     * type-based colour, e.g. to highlight a "selected" annotation:
+     *
+     *   className: "swa-selected"
+     */
+    className?: string;
+};
+export type ScrollbarWithAnnotationsProps = {
+    /**
+     * Pihanga card reference for the scrollable main content.
+     *
+     * The card is rendered inside the scroll container, so it can be any
+     * Pihanga card (plain text, a Plate editor, a list, etc.).
+     */
+    contentCard: PiCardRef;
+    /**
+     * Annotations to display as coloured markers on the scrollbar track.
+     */
+    annotations: ScrollbarAnnotation[];
+    /** Optional additional CSS class applied to the root element. */
+    className?: string;
+    /**
+     * When `true`, `onAnnotationHovered` events are emitted even while the
+     * content container is being scrolled.
+     *
+     * Defaults to `false` (suppression is the default) to avoid flooding Redux
+     * with hover actions as markers pass under the cursor during scroll.
+     */
+    reportEventsOnScroll?: boolean;
+};
+/** Emitted when the user clicks an annotation marker. */
+export type AnnotationClickedEvent = {
+    /** ID of the clicked annotation. */
+    annotationId: string;
+    /** Full annotation object for convenience. */
+    annotation: ScrollbarAnnotation;
+};
+/**
+ * Emitted when the user hovers over (or away from) an annotation marker.
+ *
+ * `annotationId` / `annotation` are `null` when the pointer leaves a marker.
+ *
+ * ⚠️  This event fires frequently during normal cursor movement.  Handlers
+ * should be kept lightweight (e.g. update a single piece of local state).
+ */
+export type AnnotationHoveredEvent = {
+    annotationId: string | null;
+    annotation: ScrollbarAnnotation | null;
+};
+export type ScrollbarWithAnnotationsEvents = {
+    onAnnotationClicked: AnnotationClickedEvent;
+    onAnnotationHovered: AnnotationHoveredEvent;
+};

package/cards/scrollbarWithAnnotations/scrollbarWithAnnotations.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/scrollbarWithAnnotations/scrollbarWithAnnotations.types.ts
+var r = "pi/scrollbar-with-annotations", i = e(r), a = n(r, ["annotation_clicked", "annotation_hovered"]), o = t(a.ANNOTATION_CLICKED), s = t(a.ANNOTATION_HOVERED);
+//#endregion
+export { a as SCROLLBAR_WITH_ANNOTATIONS_ACTION, r as SCROLLBAR_WITH_ANNOTATIONS_CARD, i as ScrollbarWithAnnotations, o as onScrollbarAnnotationClicked, s as onScrollbarAnnotationHovered };
+
+//# sourceMappingURL=scrollbarWithAnnotations.types.js.map

package/cards/scrollbarWithAnnotations/scrollbarWithAnnotations.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbarWithAnnotations.types.js","names":[],"sources":["../../../src/cards/scrollbarWithAnnotations/scrollbarWithAnnotations.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const SCROLLBAR_WITH_ANNOTATIONS_CARD = \"pi/scrollbar-with-annotations\";\n\nexport const ScrollbarWithAnnotations = createCardDeclaration<\n  ScrollbarWithAnnotationsProps,\n  ScrollbarWithAnnotationsEvents\n>(SCROLLBAR_WITH_ANNOTATIONS_CARD);\n\nexport const SCROLLBAR_WITH_ANNOTATIONS_ACTION = registerActions(\n  SCROLLBAR_WITH_ANNOTATIONS_CARD,\n  [\"annotation_clicked\", \"annotation_hovered\"],\n);\n\nexport const onScrollbarAnnotationClicked =\n  createOnAction<AnnotationClickedEvent>(\n    SCROLLBAR_WITH_ANNOTATIONS_ACTION.ANNOTATION_CLICKED,\n  );\n\nexport const onScrollbarAnnotationHovered =\n  createOnAction<AnnotationHoveredEvent>(\n    SCROLLBAR_WITH_ANNOTATIONS_ACTION.ANNOTATION_HOVERED,\n  );\n\n/**\n * The visual category of an annotation, which determines its colour on the\n * scrollbar minimap.\n */\nexport type AnnotationType =\n  | \"error\"\n  | \"warning\"\n  | \"todo\"\n  | \"comment\"\n  | \"review\"\n  | \"fixme\";\n\n/**\n * Shape of the marker drawn on the scrollbar track.\n *\n * - `\"point\"` – a small circular dot (default).\n * - `\"bar\"`   – a short vertical rectangle with a fixed CSS height; useful for\n *               discrete events that have a known position but no meaningful\n *               extent.\n * - `\"range\"` – a vertical rectangle whose height is proportional to `extent`\n *               in the content's scroll space, with a CSS-enforced minimum\n *               height so tiny ranges remain clickable.  Requires `extent`.\n */\nexport type MarkerType = \"point\" | \"bar\" | \"range\";\n\n/**\n * A single annotation marker placed on the scrollbar minimap.\n *\n * All positions are **pixel offsets from the top of the scrollable content**\n * (i.e. relative to `scrollHeight`).\n *\n * | markerType | required fields          |\n * |------------|--------------------------|\n * | `\"point\"`  | `position`               |\n * | `\"bar\"`    | `position`               |\n * | `\"range\"`  | `position` + `extent`    |\n */\nexport type ScrollbarAnnotation = {\n  /** Unique identifier for this annotation. */\n  id: string;\n\n  /**\n   * Pixel offset from the top of the scrollable content.\n   * Acts as the start position for range markers.\n   */\n  position: number;\n\n  /**\n   * Length of the annotation in content pixels.\n   *\n   * Required when `markerType === \"range\"`.  The marker will span\n   * `[position, position + extent]` in content space.\n   */\n  extent?: number;\n\n  /**\n   * Shape of the minimap marker.  Defaults to `\"point\"`.\n   */\n  markerType?: MarkerType;\n\n  /** Visual category – controls colour. */\n  type: AnnotationType;\n\n  /** Short human-readable label shown in detail views. */\n  title: string;\n\n  /** Full description shown when the annotation is selected/inspected. */\n  description: string;\n\n  /**\n   * Optional extra CSS class(es) applied to this marker's DOM element.\n   *\n   * Use this to style individual annotations differently from the default\n   * type-based colour, e.g. to highlight a \"selected\" annotation:\n   *\n   *   className: \"swa-selected\"\n   */\n  className?: string;\n};\n\nexport type ScrollbarWithAnnotationsProps = {\n  /**\n   * Pihanga card reference for the scrollable main content.\n   *\n   * The card is rendered inside the scroll container, so it can be any\n   * Pihanga card (plain text, a Plate editor, a list, etc.).\n   */\n  contentCard: PiCardRef;\n\n  /**\n   * Annotations to display as coloured markers on the scrollbar track.\n   */\n  annotations: ScrollbarAnnotation[];\n\n  /** Optional additional CSS class applied to the root element. */\n  className?: string;\n\n  /**\n   * When `true`, `onAnnotationHovered` events are emitted even while the\n   * content container is being scrolled.\n   *\n   * Defaults to `false` (suppression is the default) to avoid flooding Redux\n   * with hover actions as markers pass under the cursor during scroll.\n   */\n  reportEventsOnScroll?: boolean;\n};\n\n/** Emitted when the user clicks an annotation marker. */\nexport type AnnotationClickedEvent = {\n  /** ID of the clicked annotation. */\n  annotationId: string;\n  /** Full annotation object for convenience. */\n  annotation: ScrollbarAnnotation;\n};\n\n/**\n * Emitted when the user hovers over (or away from) an annotation marker.\n *\n * `annotationId` / `annotation` are `null` when the pointer leaves a marker.\n *\n * ⚠️  This event fires frequently during normal cursor movement.  Handlers\n * should be kept lightweight (e.g. update a single piece of local state).\n */\nexport type AnnotationHoveredEvent = {\n  annotationId: string | null;\n  annotation: ScrollbarAnnotation | null;\n};\n\nexport type ScrollbarWithAnnotationsEvents = {\n  onAnnotationClicked: AnnotationClickedEvent;\n  onAnnotationHovered: AnnotationHoveredEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAkC,iCAElC,IAA2B,EAGtC,CAA+B,GAEpB,IAAoC,EAC/C,GACA,CAAC,sBAAsB,oBAAoB,CAC7C,GAEa,IACX,EACE,EAAkC,kBACpC,GAEW,IACX,EACE,EAAkC,kBACpC"}

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/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/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"}