@pihanga2/shadcn 0.1.0

package/cards/toast/toast.types.js

@@ -0,0 +1,12 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/toast/toast.types.ts
+var r = "pi/toast", i = e(r), a = n("toast/op", ["show"]), o = (e, t) => {
+	e({
+		...t,
+		type: a.SHOW
+	});
+}, s = t(a.SHOW), c = n(r, ["closed"]), l = t(c.CLOSED);
+//#endregion
+export { c as PI_TOAST_ACTION, r as PI_TOAST_CARD, a as TOAST_OP_ACTION, i as Toast, o as dispatchShowToast, l as onPiToastClosed, s as onShowToast };
+
+//# sourceMappingURL=toast.types.js.map

package/cards/toast/toast.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.types.js","names":[],"sources":["../../../src/cards/toast/toast.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  PiCardRef,\n  registerActions,\n  type DispatchF,\n} from \"@pihanga2/core\";\n\nexport const PI_TOAST_CARD = \"pi/toast\";\n\nexport const Toast = createCardDeclaration<PiToastProps, PiToastEvents>(\n  PI_TOAST_CARD,\n);\n\nexport const TOAST_OP_ACTION = registerActions(\"toast/op\", [\"show\"]);\n\n/**\n * Dispatch helper to show a toast\n *\n * @param d - Dispatch function from Pihanga\n * @param ev - Toast event data\n *\n * @example\n * ```typescript\n * import {dispatchShowToast} from \"@/cards/toast\";\n *\n * dispatchShowToast(_dispatch, {\n *   message: \"Success!\",\n *   description: \"Your changes were saved.\",\n *   variant: \"success\",\n *   duration: 3000,\n * });\n * ```\n */\nexport const dispatchShowToast = (d: DispatchF, ev: ShowToastEvent) => {\n  d({...ev, type: TOAST_OP_ACTION.SHOW});\n};\n\n/**\n * Action handler for when a toast is shown\n *\n * Use this in your reducers or effects to handle toast display events:\n *\n * @example\n * ```typescript\n * import {onShowToast} from \"@/cards/toast\";\n *\n * export const handleShowToast = onShowToast((state, action) => {\n *   console.log(\"Toast shown:\", action.payload.message);\n *   return state;\n * });\n * ```\n */\nexport const onShowToast = createOnAction<ShowToastEvent>(TOAST_OP_ACTION.SHOW);\n\nexport const PI_TOAST_ACTION = registerActions(PI_TOAST_CARD, [\"closed\"]);\n\nexport const onPiToastClosed = createOnAction<PiToastClosedEvent>(\n  PI_TOAST_ACTION.CLOSED,\n);\n\n/**\n * Toast notification type/variant.\n */\nexport type ToastType = \"default\" | \"success\" | \"error\" | \"info\" | \"warning\";\n\n/**\n * Position of the toast on the screen.\n */\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport type PiToastProps = {\n  /**\n   * Default variant for toasts shown by this card instance.\n   * Can be overridden per individual toast via ShowToastEvent.variant.\n   * @default 'default'\n   */\n  variant?: ToastType;\n\n  /**\n   * Default duration in milliseconds before the toast auto-closes.\n   * Can be overridden per individual toast via ShowToastEvent.duration.\n   * Set to `Infinity` to disable auto-close.\n   * @default 4000\n   */\n  duration?: number;\n\n  /**\n   * Whether toasts from this card are dismissible by the user.\n   * This is a card-level setting only; it cannot be overridden per individual toast.\n   * @default true\n   */\n  dismissible?: boolean;\n\n  /**\n   * Custom CSS class to apply to all toasts from this card.\n   */\n  className?: string;\n};\n\nexport type PiToastClosedEvent = {\n  id?: string;\n};\n\nexport type PiToastEvents = {\n  onClosed: PiToastClosedEvent;\n};\n\n/**\n * Event payload for showing a toast\n */\nexport type ShowToastEvent = {\n  cardName?: string;\n  message: string;\n  description?: string;\n  contentCard?: PiCardRef; // Alternative: custom card for richer content\n  variant?: ToastType;\n  position?: ToastPosition; // Toast position on screen\n  duration?: number;\n};\n"],"mappings":";;AAQA,IAAa,IAAgB,YAEhB,IAAQ,EACnB,CACF,GAEa,IAAkB,EAAgB,YAAY,CAAC,MAAM,CAAC,GAoBtD,KAAqB,GAAc,MAAuB;CACrE,EAAE;EAAC,GAAG;EAAI,MAAM,EAAgB;CAAI,CAAC;AACvC,GAiBa,IAAc,EAA+B,EAAgB,IAAI,GAEjE,IAAkB,EAAgB,GAAe,CAAC,QAAQ,CAAC,GAE3D,IAAkB,EAC7B,EAAgB,MAClB"}

package/cards/toggleGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './toggleGroup.types';

package/cards/toggleGroup/index.js

@@ -0,0 +1,13 @@
+import { ToggleGroupComponent as e } from "./toggleGroup.component.js";
+import { PI_TOGGLE_GROUP_ACTION as t, PI_TOGGLE_GROUP_CARD as n, ToggleGroup as r, onPiToggleGroupChanged as i } from "./toggleGroup.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/toggleGroup/index.ts
+o({
+	name: n,
+	component: e,
+	events: a(t)
+});
+//#endregion
+export { t as PI_TOGGLE_GROUP_ACTION, n as PI_TOGGLE_GROUP_CARD, r as ToggleGroup, i as onPiToggleGroupChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/toggleGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/toggleGroup/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {ToggleGroupComponent} from \"./toggleGroup.component\";\nimport {\n  PI_TOGGLE_GROUP_ACTION,\n  PI_TOGGLE_GROUP_CARD,\n} from \"./toggleGroup.types\";\n\nexport * from \"./toggleGroup.types\";\n\nregisterCardComponent({\n  name: PI_TOGGLE_GROUP_CARD,\n  component: ToggleGroupComponent,\n  events: actionTypesToEvents(PI_TOGGLE_GROUP_ACTION),\n});\n"],"mappings":";;;;AAUA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAsB;AACpD,CAAC"}

package/cards/toggleGroup/toggleGroup.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { PiToggleGroupEvents, PiToggleGroupProps } from './toggleGroup.types';
+export declare const ToggleGroupComponent: (props: PiCardProps<PiToggleGroupProps, PiToggleGroupEvents>) => React.ReactNode;

package/cards/toggleGroup/toggleGroup.component.js

@@ -0,0 +1,55 @@
+import { useFormContext as e } from "../form/form.context.js";
+import { ToggleGroup as t, ToggleGroupItem as n } from "../../components/ui/toggle-group.js";
+import r from "react";
+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" ? [] : "");
+	function T(e) {
+		y ? v.handleChange(o, e) : (u && S(e), _({
+			name: o ?? g,
+			value: e
+		}));
+	}
+	function E(e) {
+		y ? v.handleChange(o, e) : (u && S(e), _({
+			name: o ?? g,
+			value: e
+		}));
+	}
+	return c === "single" ? /* @__PURE__ */ i(t, {
+		"data-pihanga": g,
+		type: "single",
+		value: typeof w == "string" ? w : "",
+		onValueChange: T,
+		variant: d,
+		size: f,
+		spacing: p,
+		disabled: m,
+		className: h,
+		children: s.map((e) => /* @__PURE__ */ i(n, {
+			value: e.value,
+			disabled: e.disabled,
+			children: e.label
+		}, e.value))
+	}) : /* @__PURE__ */ i(t, {
+		"data-pihanga": g,
+		type: "multiple",
+		value: Array.isArray(w) ? w : w ? [w] : [],
+		onValueChange: E,
+		variant: d,
+		size: f,
+		spacing: p,
+		disabled: m,
+		className: h,
+		children: s.map((e) => /* @__PURE__ */ i(n, {
+			value: e.value,
+			disabled: e.disabled,
+			children: e.label
+		}, e.value))
+	});
+};
+//#endregion
+export { a as ToggleGroupComponent };
+
+//# sourceMappingURL=toggleGroup.component.js.map

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

@@ -0,0 +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"}

package/cards/toggleGroup/toggleGroup.types.d.ts

@@ -0,0 +1,96 @@
+export declare const PI_TOGGLE_GROUP_CARD = "pi/toggle-group";
+export declare const ToggleGroup: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiToggleGroupProps, S, PiToggleGroupEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_TOGGLE_GROUP_ACTION: {
+    CHANGED: string;
+};
+export declare const onPiToggleGroupChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiToggleGroupChangedEvent>) => void;
+export type PiToggleGroupItem = {
+    /** The value associated with this toggle item. */
+    value: string;
+    /** Human-readable label rendered inside the toggle button. */
+    label: string;
+    /** When true, this individual item is disabled. */
+    disabled?: boolean;
+};
+export type PiToggleGroupProps = {
+    /**
+     * Field name used to bind to FormContext when inside a pi/form card.
+     * When provided the component reads its selected value from form data and
+     * writes back via form.handleChange.
+     */
+    name?: string;
+    /**
+     * The list of toggle items to display.
+     */
+    items: PiToggleGroupItem[];
+    /**
+     * Selection mode.
+     * - `"single"` — at most one item can be active at a time.
+     * - `"multiple"` — any number of items can be active simultaneously.
+     *
+     * @default "single"
+     */
+    type?: "single" | "multiple";
+    /**
+     * Controlled selected value(s).
+     * - In `"single"` mode: a `string` (or `undefined` for nothing selected).
+     * - In `"multiple"` mode: an array of `string`.
+     *
+     * Ignored when `name` is set and the component is inside a pi/form.
+     * Also ignored when `selfManaged` is `true`.
+     */
+    value?: string | string[];
+    /**
+     * When `true`, the component manages its own selection state internally
+     * using `React.useState`.  The `value` prop is used only as the initial
+     * value (i.e. `defaultValue`) and subsequent changes do not require an
+     * external state update.  `onChanged` is still fired so callers can
+     * observe changes without owning the state.
+     *
+     * Has no effect when inside a pi/form (form context always takes
+     * precedence).
+     *
+     * @default false
+     */
+    selfManaged?: boolean;
+    /**
+     * Visual style variant of the toggle buttons.
+     * - `"default"` — transparent background, highlights on active.
+     * - `"outline"` — bordered buttons, grouped or spaced.
+     *
+     * @default "default"
+     */
+    variant?: "default" | "outline";
+    /**
+     * Size of each toggle button.
+     * @default "default"
+     */
+    size?: "default" | "sm" | "lg";
+    /**
+     * Gap between toggle buttons (in Tailwind spacing units).
+     * `0` = buttons are joined (no gap, rounded ends only).
+     * Positive values add space between each button.
+     *
+     * @default 0
+     */
+    spacing?: number;
+    /** When true, the entire group is disabled and non-interactive. */
+    disabled?: boolean;
+    /** Extra Tailwind / CSS classes forwarded to the root element. */
+    className?: string;
+};
+export type PiToggleGroupChangedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /**
+     * New selected value(s).
+     * - In `"single"` mode: a `string` (empty string when nothing selected).
+     * - In `"multiple"` mode: an array of `string`.
+     */
+    value: string | string[];
+};
+export type PiToggleGroupEvents = {
+    onChanged: PiToggleGroupChangedEvent;
+};

package/cards/toggleGroup/toggleGroup.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/toggleGroup/toggleGroup.types.ts
+var r = "pi/toggle-group", i = e(r), a = n(r, ["changed"]), o = t(a.CHANGED);
+//#endregion
+export { a as PI_TOGGLE_GROUP_ACTION, r as PI_TOGGLE_GROUP_CARD, i as ToggleGroup, o as onPiToggleGroupChanged };
+
+//# sourceMappingURL=toggleGroup.types.js.map

package/cards/toggleGroup/toggleGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleGroup.types.js","names":[],"sources":["../../../src/cards/toggleGroup/toggleGroup.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_TOGGLE_GROUP_CARD = \"pi/toggle-group\";\n\nexport const ToggleGroup = createCardDeclaration<\n  PiToggleGroupProps,\n  PiToggleGroupEvents\n>(PI_TOGGLE_GROUP_CARD);\n\nexport const PI_TOGGLE_GROUP_ACTION = registerActions(PI_TOGGLE_GROUP_CARD, [\n  \"changed\",\n]);\n\nexport const onPiToggleGroupChanged = createOnAction<PiToggleGroupChangedEvent>(\n  PI_TOGGLE_GROUP_ACTION.CHANGED,\n);\n\n// ---------------------------------------------------------------------------\n// Item type\n// ---------------------------------------------------------------------------\n\nexport type PiToggleGroupItem = {\n  /** The value associated with this toggle item. */\n  value: string;\n  /** Human-readable label rendered inside the toggle button. */\n  label: string;\n  /** When true, this individual item is disabled. */\n  disabled?: boolean;\n};\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiToggleGroupProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its selected value from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * The list of toggle items to display.\n   */\n  items: PiToggleGroupItem[];\n\n  /**\n   * Selection mode.\n   * - `\"single\"` — at most one item can be active at a time.\n   * - `\"multiple\"` — any number of items can be active simultaneously.\n   *\n   * @default \"single\"\n   */\n  type?: \"single\" | \"multiple\";\n\n  /**\n   * Controlled selected value(s).\n   * - In `\"single\"` mode: a `string` (or `undefined` for nothing selected).\n   * - In `\"multiple\"` mode: an array of `string`.\n   *\n   * Ignored when `name` is set and the component is inside a pi/form.\n   * Also ignored when `selfManaged` is `true`.\n   */\n  value?: string | string[];\n\n  /**\n   * When `true`, the component manages its own selection state internally\n   * using `React.useState`.  The `value` prop is used only as the initial\n   * value (i.e. `defaultValue`) and subsequent changes do not require an\n   * external state update.  `onChanged` is still fired so callers can\n   * observe changes without owning the state.\n   *\n   * Has no effect when inside a pi/form (form context always takes\n   * precedence).\n   *\n   * @default false\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Visual style variant of the toggle buttons.\n   * - `\"default\"` — transparent background, highlights on active.\n   * - `\"outline\"` — bordered buttons, grouped or spaced.\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"outline\";\n\n  /**\n   * Size of each toggle button.\n   * @default \"default\"\n   */\n  size?: \"default\" | \"sm\" | \"lg\";\n\n  /**\n   * Gap between toggle buttons (in Tailwind spacing units).\n   * `0` = buttons are joined (no gap, rounded ends only).\n   * Positive values add space between each button.\n   *\n   * @default 0\n   */\n  spacing?: number;\n\n  /** When true, the entire group is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /** Extra Tailwind / CSS classes forwarded to the root element. */\n  className?: string;\n};\n\nexport type PiToggleGroupChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /**\n   * New selected value(s).\n   * - In `\"single\"` mode: a `string` (empty string when nothing selected).\n   * - In `\"multiple\"` mode: an array of `string`.\n   */\n  value: string | string[];\n};\n\nexport type PiToggleGroupEvents = {\n  onChanged: PiToggleGroupChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAuB,mBAEvB,IAAc,EAGzB,CAAoB,GAET,IAAyB,EAAgB,GAAsB,CAC1E,SACF,CAAC,GAEY,IAAyB,EACpC,EAAuB,OACzB"}

package/cards/types.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Screen size breakpoints matching Tailwind CSS defaults.
+ *
+ * Used with {@link SizeMap} to render different cards (or none at all)
+ * depending on the viewport width.
+ */
+export declare enum ScreenSize {
+    XS = "xs",// default / < 640px
+    SM = "sm",// ≥ 640px
+    MD = "md",// ≥ 768px
+    LG = "lg",// ≥ 1024px
+    XL = "xl",// ≥ 1280px
+    XXL = "2xl"
+}
+/**
+ * Ascending order of breakpoints — used for cascade resolution.
+ * @internal
+ */
+export declare const SCREEN_SIZE_ORDER: ScreenSize[];
+/**
+ * Minimum viewport widths (px) for each breakpoint.
+ * @internal
+ */
+export declare const SCREEN_SIZE_WIDTHS: Record<ScreenSize, number>;
+/**
+ * Map a value {@link T} to specific screen-size breakpoints.
+ *
+ * Resolution follows a **mobile-first cascade**: the entry with the
+ * largest breakpoint that is ≤ the current viewport size wins.
+ *
+ * ```ts
+ * // Show "desktopCard" on md and above, nothing on xs/sm:
+ * { [ScreenSize.MD]: "desktopCard" }
+ *
+ * // Show a different card per breakpoint:
+ * { [ScreenSize.XS]: "mobileCard", [ScreenSize.MD]: "desktopCard" }
+ *
+ * // Explicitly hide on md and above:
+ * { [ScreenSize.XS]: "card", [ScreenSize.MD]: null }
+ * ```
+ *
+ * Set `default` as a final fallback when no breakpoint entry matches.
+ */
+export type SizeMap<T> = Partial<Record<ScreenSize, T | null>> & {
+    default?: T | null;
+};
+/**
+ * Shadcn button / badge visual variant.
+ *
+ * Maps directly to the `variant` prop accepted by `@/components/ui/button`
+ * and `@/components/ui/badge`.
+ */
+export type VariantT = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+/**
+ * Shadcn component size token.
+ *
+ * Maps directly to the `size` prop accepted by `@/components/ui/button`.
+ */
+export type SizeT = "default" | "sm" | "lg" | "icon";
+/**
+ * Tailwind colour token (e.g. `"red"`, `"emerald"`, `"sky"`) or an arbitrary
+ * CSS colour string.  Kept as `string` so consumers can pass any Tailwind
+ * palette key without being locked to a finite union.
+ */
+export type ColorT = string;
+/**
+ * A decorator displayed before or after a button / menu-item label.
+ *
+ * Expressed as a registered icon name (resolved at render time via the icon
+ * registry) or an arbitrary Tailwind-class string for inline SVG icons.
+ */
+export type DecoratorT = string;

package/cards/types.js

@@ -0,0 +1,22 @@
+//#region src/cards/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.XS = "xs", e.SM = "sm", e.MD = "md", e.LG = "lg", e.XL = "xl", e.XXL = "2xl", e;
+}({}), t = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+], n = {
+	xs: 0,
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280,
+	"2xl": 1536
+};
+//#endregion
+export { t as SCREEN_SIZE_ORDER, n as SCREEN_SIZE_WIDTHS, e as ScreenSize };
+
+//# sourceMappingURL=types.js.map

package/cards/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../src/cards/types.ts"],"sourcesContent":["/**\n * Screen size breakpoints matching Tailwind CSS defaults.\n *\n * Used with {@link SizeMap} to render different cards (or none at all)\n * depending on the viewport width.\n */\nexport enum ScreenSize {\n  XS = \"xs\", // default / < 640px\n  SM = \"sm\", // ≥ 640px\n  MD = \"md\", // ≥ 768px\n  LG = \"lg\", // ≥ 1024px\n  XL = \"xl\", // ≥ 1280px\n  XXL = \"2xl\", // ≥ 1536px\n}\n\n/**\n * Ascending order of breakpoints — used for cascade resolution.\n * @internal\n */\nexport const SCREEN_SIZE_ORDER: ScreenSize[] = [\n  ScreenSize.XS,\n  ScreenSize.SM,\n  ScreenSize.MD,\n  ScreenSize.LG,\n  ScreenSize.XL,\n  ScreenSize.XXL,\n];\n\n/**\n * Minimum viewport widths (px) for each breakpoint.\n * @internal\n */\nexport const SCREEN_SIZE_WIDTHS: Record<ScreenSize, number> = {\n  [ScreenSize.XS]: 0,\n  [ScreenSize.SM]: 640,\n  [ScreenSize.MD]: 768,\n  [ScreenSize.LG]: 1024,\n  [ScreenSize.XL]: 1280,\n  [ScreenSize.XXL]: 1536,\n};\n\n/**\n * Map a value {@link T} to specific screen-size breakpoints.\n *\n * Resolution follows a **mobile-first cascade**: the entry with the\n * largest breakpoint that is ≤ the current viewport size wins.\n *\n * ```ts\n * // Show \"desktopCard\" on md and above, nothing on xs/sm:\n * { [ScreenSize.MD]: \"desktopCard\" }\n *\n * // Show a different card per breakpoint:\n * { [ScreenSize.XS]: \"mobileCard\", [ScreenSize.MD]: \"desktopCard\" }\n *\n * // Explicitly hide on md and above:\n * { [ScreenSize.XS]: \"card\", [ScreenSize.MD]: null }\n * ```\n *\n * Set `default` as a final fallback when no breakpoint entry matches.\n */\nexport type SizeMap<T> = Partial<Record<ScreenSize, T | null>> & {\n  default?: T | null;\n};\n\n// ---------------------------------------------------------------------------\n// Shadcn / Tailwind-native shared primitive types\n//\n// These types replace what was previously imported from `@pihanga2/cards` and\n// are expressed in terms of Shadcn's design system and Tailwind utility tokens.\n// ---------------------------------------------------------------------------\n\n/**\n * Shadcn button / badge visual variant.\n *\n * Maps directly to the `variant` prop accepted by `@/components/ui/button`\n * and `@/components/ui/badge`.\n */\nexport type VariantT =\n  | \"default\"\n  | \"destructive\"\n  | \"outline\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"link\";\n\n/**\n * Shadcn component size token.\n *\n * Maps directly to the `size` prop accepted by `@/components/ui/button`.\n */\nexport type SizeT = \"default\" | \"sm\" | \"lg\" | \"icon\";\n\n/**\n * Tailwind colour token (e.g. `\"red\"`, `\"emerald\"`, `\"sky\"`) or an arbitrary\n * CSS colour string.  Kept as `string` so consumers can pass any Tailwind\n * palette key without being locked to a finite union.\n */\nexport type ColorT = string;\n\n/**\n * A decorator displayed before or after a button / menu-item label.\n *\n * Expressed as a registered icon name (resolved at render time via the icon\n * registry) or an arbitrary Tailwind-class string for inline SVG icons.\n */\nexport type DecoratorT = string;\n"],"mappings":";AAMA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,KAAA,MACA,EAAA,KAAA,MACA,EAAA,KAAA,MACA,EAAA,KAAA,MACA,EAAA,KAAA,MACA,EAAA,MAAA;AACF,EAAA,CAAA,CAAA,GAMa,IAAkC;;;;;;;AAO/C,GAMa,IAAiD;KAC3C;KACA;KACA;KACA;KACA;QACC;AACpB"}

package/cards/typography/index.d.ts

@@ -0,0 +1 @@
+export * from './typography.types';

package/cards/typography/index.js

@@ -0,0 +1,12 @@
+import { TypographyComponent as e } from "./typography.component.js";
+import { TYPOGRAPHY_CARD as t, Typography as n } from "./typography.types.js";
+import { registerCardComponent as r } from "@pihanga2/core";
+//#region src/cards/typography/index.ts
+r({
+	name: t,
+	component: e
+});
+//#endregion
+export { t as TYPOGRAPHY_CARD, n as Typography };
+
+//# sourceMappingURL=index.js.map

package/cards/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/typography/index.ts"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\n\nimport {TypographyComponent} from \"./typography.component\";\nimport {TYPOGRAPHY_CARD} from \"./typography.types\";\n\nexport * from \"./typography.types\";\n\nregisterCardComponent({\n  name: TYPOGRAPHY_CARD,\n  component: TypographyComponent,\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

package/cards/typography/typography.component.d.ts

@@ -0,0 +1,4 @@
+import { PiCardProps } from '@pihanga2/core';
+import { TypographyProps } from './typography.types';
+import * as React from "react";
+export declare const TypographyComponent: (props: PiCardProps<TypographyProps>) => React.ReactNode;

package/cards/typography/typography.component.js

@@ -0,0 +1,44 @@
+import { cn as e } from "../../lib/utils.js";
+import { Card as t } from "@pihanga2/core";
+import * as n from "react";
+import { Fragment as r, jsx as i } from "react/jsx-runtime";
+//#region src/cards/typography/typography.component.tsx
+var a = {
+	h1: ["h1", "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"],
+	h2: ["h2", "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0"],
+	h3: ["h3", "scroll-m-20 text-2xl font-semibold tracking-tight"],
+	h4: ["h4", "scroll-m-20 text-xl font-semibold tracking-tight"],
+	p: ["p", "leading-7 [&:not(:first-child)]:mt-6"],
+	blockquote: ["blockquote", "mt-6 border-l-2 pl-6 italic"],
+	code: ["code", "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"],
+	lead: ["p", "text-xl text-muted-foreground"],
+	large: ["div", "text-lg font-semibold"],
+	small: ["small", "text-sm font-medium leading-none"],
+	muted: ["p", "text-sm text-muted-foreground"]
+}, o = (s) => {
+	let { text: c, childCard: l, paragraph: u, level: d, className: f, style: p, cardName: m, _dispatch: h, _cls: g } = s, [_, v] = d ? a[d] : ["div", ""];
+	function y() {
+		return l ? /* @__PURE__ */ i(t, {
+			cardName: l,
+			parentCard: m
+		}) : u ? /* @__PURE__ */ i(r, { children: u.map((e, t) => b(e, t)) }) : c;
+	}
+	function b(e, t) {
+		return typeof e == "string" ? e : e && typeof e == "object" ? o({
+			...e,
+			_dispatch: h,
+			_cls: g,
+			cardName: m,
+			key: t
+		}) : null;
+	}
+	return n.createElement(_, {
+		className: e(v, f),
+		style: p,
+		"data-pihanga": m
+	}, y());
+};
+//#endregion
+export { o as TypographyComponent };
+
+//# sourceMappingURL=typography.component.js.map

package/cards/typography/typography.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.component.js","names":[],"sources":["../../../src/cards/typography/typography.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport type {TypographyLevel, TypographyProps} from \"./typography.types\";\n\n/** Maps each level to [html element, tailwind classes] */\nconst LEVEL_CONFIG: Record<\n  TypographyLevel,\n  [keyof React.JSX.IntrinsicElements, string]\n> = {\n  h1: [\"h1\", \"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\"],\n  h2: [\n    \"h2\",\n    \"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\",\n  ],\n  h3: [\"h3\", \"scroll-m-20 text-2xl font-semibold tracking-tight\"],\n  h4: [\"h4\", \"scroll-m-20 text-xl font-semibold tracking-tight\"],\n  p: [\"p\", \"leading-7 [&:not(:first-child)]:mt-6\"],\n  blockquote: [\"blockquote\", \"mt-6 border-l-2 pl-6 italic\"],\n  code: [\n    \"code\",\n    \"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\",\n  ],\n  lead: [\"p\", \"text-xl text-muted-foreground\"],\n  large: [\"div\", \"text-lg font-semibold\"],\n  small: [\"small\", \"text-sm font-medium leading-none\"],\n  muted: [\"p\", \"text-sm text-muted-foreground\"],\n};\n\nexport const TypographyComponent = (\n  props: PiCardProps<TypographyProps>,\n): React.ReactNode => {\n  const {\n    text,\n    childCard,\n    paragraph,\n    level,\n    className,\n    style,\n    cardName,\n    _dispatch,\n    _cls,\n  } = props;\n\n  const [el, levelClass] = level ? LEVEL_CONFIG[level] : [\"div\", \"\"];\n\n  function renderChildren(): React.ReactNode {\n    if (childCard) {\n      return <Card cardName={childCard} parentCard={cardName} />;\n    }\n    if (paragraph) {\n      return <>{paragraph.map((item, i) => renderParaItem(item, i))}</>;\n    }\n    return text;\n  }\n\n  function renderParaItem(\n    item: string | TypographyProps,\n    key: number,\n  ): React.ReactNode {\n    if (typeof item === \"string\") {\n      return item;\n    }\n    if (item && typeof item === \"object\") {\n      return TypographyComponent({\n        ...item,\n        _dispatch,\n        _cls,\n        cardName,\n        key,\n      } as PiCardProps<TypographyProps> & {key: number});\n    }\n    return null;\n  }\n\n  return React.createElement(\n    el,\n    {\n      className: cn(levelClass, className),\n      style,\n      \"data-pihanga\": cardName,\n    },\n    renderChildren(),\n  );\n};\n"],"mappings":";;;;;AAMA,IAAM,IAGF;CACF,IAAI,CAAC,MAAM,gEAAgE;CAC3E,IAAI,CACF,MACA,4EACF;CACA,IAAI,CAAC,MAAM,mDAAmD;CAC9D,IAAI,CAAC,MAAM,kDAAkD;CAC7D,GAAG,CAAC,KAAK,sCAAsC;CAC/C,YAAY,CAAC,cAAc,6BAA6B;CACxD,MAAM,CACJ,QACA,mFACF;CACA,MAAM,CAAC,KAAK,+BAA+B;CAC3C,OAAO,CAAC,OAAO,uBAAuB;CACtC,OAAO,CAAC,SAAS,kCAAkC;CACnD,OAAO,CAAC,KAAK,+BAA+B;AAC9C,GAEa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,cACA,cACA,UACA,cACA,UACA,aACA,cACA,YACE,GAEE,CAAC,GAAI,KAAc,IAAQ,EAAa,KAAS,CAAC,OAAO,EAAE;CAEjE,SAAS,IAAkC;EAOzC,OANI,IACK,kBAAC,GAAD;GAAM,UAAU;GAAW,YAAY;EAAW,CAAA,IAEvD,IACK,kBAAA,GAAA,EAAA,UAAG,EAAU,KAAK,GAAM,MAAM,EAAe,GAAM,CAAC,CAAC,EAAI,CAAA,IAE3D;CACT;CAEA,SAAS,EACP,GACA,GACiB;EAajB,OAZI,OAAO,KAAS,WACX,IAEL,KAAQ,OAAO,KAAS,WACnB,EAAoB;GACzB,GAAG;GACH;GACA;GACA;GACA;EACF,CAAiD,IAE5C;CACT;CAEA,OAAO,EAAM,cACX,GACA;EACE,WAAW,EAAG,GAAY,CAAS;EACnC;EACA,gBAAgB;CAClB,GACA,EAAe,CACjB;AACF"}

package/cards/typography/typography.types.d.ts

@@ -0,0 +1,23 @@
+import { PiCardRef } from '@pihanga2/core';
+import * as React from "react";
+export declare const TYPOGRAPHY_CARD = "shad/typography";
+export declare const Typography: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<TypographyProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+/**
+ * Semantic level controls both the rendered HTML element and default
+ * Tailwind prose styling (following shadcn/ui typography conventions).
+ */
+export type TypographyLevel = "h1" | "h2" | "h3" | "h4" | "p" | "blockquote" | "code" | "lead" | "large" | "small" | "muted";
+export type TypographyProps = {
+    /** Plain text content. */
+    text?: string;
+    /** A child card rendered as content. */
+    childCard?: PiCardRef;
+    /** Inline paragraph: mix of literal strings and nested TypographyProps. */
+    paragraph?: (string | TypographyProps)[];
+    /** Semantic level — controls the HTML element and default prose styling. */
+    level?: TypographyLevel;
+    /** Additional CSS classes applied directly to the element. */
+    className?: string;
+    /** Inline styles applied directly to the element. */
+    style?: React.CSSProperties;
+};

package/cards/typography/typography.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/typography/typography.types.ts
+var t = "shad/typography", n = e(t);
+//#endregion
+export { t as TYPOGRAPHY_CARD, n as Typography };
+
+//# sourceMappingURL=typography.types.js.map

package/cards/typography/typography.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.types.js","names":[],"sources":["../../../src/cards/typography/typography.types.ts"],"sourcesContent":["import * as React from \"react\";\nimport {PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const TYPOGRAPHY_CARD = \"shad/typography\";\n\nexport const Typography =\n  createCardDeclaration<TypographyProps>(TYPOGRAPHY_CARD);\n\n/**\n * Semantic level controls both the rendered HTML element and default\n * Tailwind prose styling (following shadcn/ui typography conventions).\n */\nexport type TypographyLevel =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"blockquote\"\n  | \"code\"\n  | \"lead\" // large muted intro paragraph\n  | \"large\" // large text, semibold\n  | \"small\" // small, medium-weight\n  | \"muted\"; // small, muted-foreground\n\nexport type TypographyProps = {\n  /** Plain text content. */\n  text?: string;\n  /** A child card rendered as content. */\n  childCard?: PiCardRef;\n  /** Inline paragraph: mix of literal strings and nested TypographyProps. */\n  paragraph?: (string | TypographyProps)[];\n\n  /** Semantic level — controls the HTML element and default prose styling. */\n  level?: TypographyLevel;\n\n  /** Additional CSS classes applied directly to the element. */\n  className?: string;\n  /** Inline styles applied directly to the element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;AAGA,IAAa,IAAkB,mBAElB,IACX,EAAuC,CAAe"}

package/components/hooks/use-is-touch-device.d.ts

@@ -0,0 +1 @@
+export declare function useIsTouchDevice(): boolean;

package/components/lib/utils.js

@@ -0,0 +1,10 @@
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+//#region src/components/lib/utils.ts
+function n(...n) {
+	return t(e(n));
+}
+//#endregion
+export { n as cn };
+
+//# sourceMappingURL=utils.js.map

package/components/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAGA,SAAgB,EAAG,GAAG,GAAsB;CAC1C,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC7B"}

package/components/theme-provider/index.d.ts

@@ -0,0 +1,4 @@
+export declare const useTheme: () => {
+    theme: import('./theme-provider.types').Theme;
+    setTheme: (theme: import('./theme-provider.types').Theme) => void;
+};

package/components/theme-provider/index.js

@@ -0,0 +1,12 @@
+import { ThemeProviderContext as e } from "./theme-provider.types.js";
+import { useContext as t } from "react";
+//#region src/components/theme-provider/index.ts
+var n = () => {
+	let n = t(e);
+	if (n === void 0) throw Error("useTheme must be used within a ThemeProvider");
+	return n;
+};
+//#endregion
+export { n as useTheme };
+
+//# sourceMappingURL=index.js.map

package/components/theme-provider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/theme-provider/index.ts"],"sourcesContent":["import {useContext} from \"react\";\nimport {ThemeProviderContext} from \"./theme-provider.types\";\n\nexport const useTheme = () => {\n  const context = useContext(ThemeProviderContext);\n\n  if (context === undefined)\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n\n  return context;\n};\n"],"mappings":";;;AAGA,IAAa,UAAiB;CAC5B,IAAM,IAAU,EAAW,CAAoB;CAE/C,IAAI,MAAY,KAAA,GACd,MAAU,MAAM,8CAA8C;CAEhE,OAAO;AACT"}

package/components/theme-provider/theme-provider.component.d.ts

@@ -0,0 +1,2 @@
+import { ThemeProviderProps } from './theme-provider.types';
+export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;

package/components/theme-provider/theme-provider.component.js

@@ -0,0 +1,31 @@
+import { ThemeProviderContext as e } from "./theme-provider.types.js";
+import { useEffect as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/theme-provider/theme-provider.component.tsx
+function i({ children: i, defaultTheme: a = "system", storageKey: o = "vite-ui-theme", ...s }) {
+	let [c, l] = n(() => localStorage.getItem(o) || a);
+	t(() => {
+		let e = window.document.documentElement;
+		if (e.classList.remove("light", "dark"), c === "system") {
+			let t = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+			e.classList.add(t);
+			return;
+		}
+		e.classList.add(c);
+	}, [c]);
+	let u = {
+		theme: c,
+		setTheme: (e) => {
+			localStorage.setItem(o, e), l(e);
+		}
+	};
+	return /* @__PURE__ */ r(e.Provider, {
+		...s,
+		value: u,
+		children: i
+	});
+}
+//#endregion
+export { i as ThemeProvider };
+
+//# sourceMappingURL=theme-provider.component.js.map

package/components/theme-provider/theme-provider.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.component.js","names":[],"sources":["../../../src/components/theme-provider/theme-provider.component.tsx"],"sourcesContent":["import {useEffect, useState} from \"react\";\nimport {\n  ThemeProviderContext,\n  type Theme,\n  type ThemeProviderProps,\n} from \"./theme-provider.types\";\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = \"system\",\n  storageKey = \"vite-ui-theme\",\n  ...props\n}: ThemeProviderProps) {\n  const [theme, setTheme] = useState<Theme>(\n    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme\n  );\n\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    root.classList.remove(\"light\", \"dark\");\n\n    if (theme === \"system\") {\n      const systemTheme = window.matchMedia(\"(prefers-color-scheme: dark)\")\n        .matches\n        ? \"dark\"\n        : \"light\";\n\n      root.classList.add(systemTheme);\n      return;\n    }\n\n    root.classList.add(theme);\n  }, [theme]);\n\n  const value = {\n    theme,\n    setTheme: (theme: Theme) => {\n      localStorage.setItem(storageKey, theme);\n      setTheme(theme);\n    },\n  };\n\n  return (\n    <ThemeProviderContext.Provider {...props} value={value}>\n      {children}\n    </ThemeProviderContext.Provider>\n  );\n}\n"],"mappings":";;;;AAOA,SAAgB,EAAc,EAC5B,aACA,kBAAe,UACf,gBAAa,iBACb,GAAG,KACkB;CACrB,IAAM,CAAC,GAAO,KAAY,QACjB,aAAa,QAAQ,CAAU,KAAe,CACvD;CAEA,QAAgB;EACd,IAAM,IAAO,OAAO,SAAS;EAI7B,IAFA,EAAK,UAAU,OAAO,SAAS,MAAM,GAEjC,MAAU,UAAU;GACtB,IAAM,IAAc,OAAO,WAAW,8BAA8B,EACjE,UACC,SACA;GAEJ,EAAK,UAAU,IAAI,CAAW;GAC9B;EACF;EAEA,EAAK,UAAU,IAAI,CAAK;CAC1B,GAAG,CAAC,CAAK,CAAC;CAEV,IAAM,IAAQ;EACZ;EACA,WAAW,MAAiB;GAE1B,AADA,aAAa,QAAQ,GAAY,CAAK,GACtC,EAAS,CAAK;EAChB;CACF;CAEA,OACE,kBAAC,EAAqB,UAAtB;EAA+B,GAAI;EAAc;EAC9C;CAC4B,CAAA;AAEnC"}

package/components/theme-provider/theme-provider.types.d.ts

@@ -0,0 +1,12 @@
+export type Theme = "dark" | "light" | "system";
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export declare const ThemeProviderContext: import('react').Context<ThemeProviderState>;
+export {};

package/components/theme-provider/theme-provider.types.js

@@ -0,0 +1,9 @@
+import { createContext as e } from "react";
+var t = e({
+	theme: "system",
+	setTheme: () => null
+});
+//#endregion
+export { t as ThemeProviderContext };
+
+//# sourceMappingURL=theme-provider.types.js.map

package/components/theme-provider/theme-provider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.types.js","names":[],"sources":["../../../src/components/theme-provider/theme-provider.types.ts"],"sourcesContent":["import {createContext} from \"react\";\n\nexport type Theme = \"dark\" | \"light\" | \"system\";\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  defaultTheme?: Theme;\n  storageKey?: string;\n};\n\ntype ThemeProviderState = {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n};\n\nconst initialState: ThemeProviderState = {\n  theme: \"system\",\n  setTheme: () => null,\n};\n\nexport const ThemeProviderContext =\n  createContext<ThemeProviderState>(initialState);\n"],"mappings":";AAoBA,IAAa,IACX,EAAkC;CALlC,OAAO;CACP,gBAAgB;AAIkB,CAAY"}

package/components/ui/avatar.js

@@ -0,0 +1,30 @@
+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";
+//#region src/components/ui/avatar.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.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, {
+		"data-slot": "avatar-image",
+		className: e("aspect-square size-full", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: e("bg-muted flex size-full items-center justify-center rounded-full text-xs", r),
+		...i
+	});
+}
+//#endregion
+export { r as Avatar, a as AvatarFallback, i as AvatarImage };
+
+//# sourceMappingURL=avatar.js.map

package/components/ui/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Avatar as AvatarPrimitive} from \"radix-ui\";\n\nimport {cn} from \"@/lib/utils\";\n\nfunction Avatar({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn(\n        \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square size-full\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted flex size-full items-center justify-center rounded-full text-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {Avatar, AvatarFallback, AvatarImage};\n"],"mappings":";;;;;AAKA,SAAS,EAAO,EACd,cACA,GAAG,KACiD;CACpD,OACE,kBAAC,EAAgB,MAAjB;EACE,aAAU;EACV,WAAW,EACT,8DACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,cACA,GAAG,KACkD;CACrD,OACE,kBAAC,EAAgB,OAAjB;EACE,aAAU;EACV,WAAW,EAAG,2BAA2B,CAAS;EAClD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAe,EACtB,cACA,GAAG,KACqD;CACxD,OACE,kBAAC,EAAgB,UAAjB;EACE,aAAU;EACV,WAAW,EACT,4EACA,CACF;EACA,GAAI;CACL,CAAA;AAEL"}