@pihanga2/shadcn 0.1.0 → 0.2.1

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

@@ -0,0 +1,102 @@
+export declare const PI_SLIDER_CARD = "shad/slider";
+export declare const Slider: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiSliderProps, S, PiSliderEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_SLIDER_ACTION: {
+    CHANGED: string;
+    COMMITTED: string;
+};
+export declare const onPiSliderChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSliderChangedEvent>) => void;
+/**
+ * Fired once when the user **finishes** dragging (mouse-up / touch-end).
+ *
+ * Use this instead of `onPiSliderChanged` when you only care about the final
+ * settled value and do not want to process every intermediate drag position.
+ */
+export declare const onPiSliderCommitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSliderCommittedEvent>) => void;
+export type PiSliderProps = {
+    /**
+     * Field name used to bind to FormContext when inside a pi/form card.
+     * When provided the component reads its value from form data and writes
+     * back via form.handleChange.
+     */
+    name?: string;
+    /**
+     * Controlled numeric value (single thumb).
+     * Ignored when `name` is set and the component is inside a pi/form,
+     * and also ignored when `selfManaged` is true (use `defaultValue` instead).
+     */
+    value?: number;
+    /**
+     * Initial value used when `selfManaged` is true.
+     * Falls back to `value` → `min` → 0 if not provided.
+     */
+    defaultValue?: number;
+    /**
+     * When true the slider keeps its own internal value state.
+     * Dragging updates the displayed value immediately without needing an
+     * external state update.  `onChanged` is still fired on every change so
+     * the app can react (or log) without being responsible for feeding the
+     * value back as a prop.
+     *
+     * Ignored when inside a pi/form (form state takes precedence).
+     */
+    selfManaged?: boolean;
+    /** Minimum value of the slider range. Defaults to 0. */
+    min?: number;
+    /** Maximum value of the slider range. Defaults to 100. */
+    max?: number;
+    /** Stepping interval between selectable values. Defaults to 1. */
+    step?: number;
+    /** When true, the slider is disabled and non-interactive. */
+    disabled?: boolean;
+    /**
+     * Debounce delay in milliseconds applied to `onChanged` during continuous
+     * drag.  Only the last value within each quiet window is dispatched.
+     *
+     * Useful when the `onChanged` handler is expensive (e.g. triggers an API
+     * call) — set e.g. `debounceMs: 200` to cap the event rate.
+     *
+     * Has no effect on `onCommitted`, which always fires exactly once at
+     * drag-end regardless of this setting.
+     *
+     * Omit (or set to 0) to dispatch on every drag position (default behaviour).
+     */
+    debounceMs?: number;
+    /**
+     * When true, `onPiSliderChanged` is **never** dispatched during drag.
+     *
+     * Use this together with `onPiSliderCommitted` when you only care about
+     * the final settled value and want to eliminate all intermediate Redux
+     * actions entirely (stricter than `debounceMs`).
+     *
+     * `onPiSliderCommitted` is unaffected and always fires on release.
+     * `selfManaged` visual updates are also unaffected.
+     */
+    suppressChangedEvents?: boolean;
+    /**
+     * Optional label text rendered above the slider.
+     * When provided, the current numeric value is shown to the right of the label.
+     */
+    label?: string;
+    /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */
+    className?: string;
+};
+export type PiSliderChangedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** New numeric value after the change. */
+    value: number;
+};
+export type PiSliderCommittedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** Final settled value when the user released the thumb. */
+    value: number;
+};
+export type PiSliderEvents = {
+    onChanged: PiSliderChangedEvent;
+    onCommitted: PiSliderCommittedEvent;
+};

package/cards/sliderValue/index.d.ts

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

package/cards/sliderValue/sliderValue.component.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { PiSliderValueProps } from './sliderValue.types';
+/**
+ * Display-only companion to `shad/slider`.
+ *
+ * Renders the same track + filled-range visual as the interactive slider but
+ * with no thumb and no user interaction.  Use this card to show a read-only
+ * numeric value in contexts where editing is not permitted (e.g. a summary
+ * panel, a table cell, or a loading state).
+ *
+ * The component uses the same Tailwind classes as `src/components/ui/slider.tsx`
+ * so the two cards look identical.
+ */
+export declare const SliderValueComponent: (props: PiCardProps<PiSliderValueProps>) => React.ReactNode;

package/cards/sliderValue/sliderValue.types.d.ts

@@ -0,0 +1,21 @@
+export declare const PI_SLIDER_VALUE_CARD = "shad/slider-value";
+export declare const SliderValue: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiSliderValueProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type PiSliderValueProps = {
+    /**
+     * The numeric value to display on the track.
+     * Clamped between `min` and `max`.
+     */
+    value: number;
+    /** Minimum value of the range. Defaults to 0. */
+    min?: number;
+    /** Maximum value of the range. Defaults to 100. */
+    max?: number;
+    /**
+     * Optional label text rendered above the track.
+     * When provided, the numeric value is shown to the right of the label,
+     * matching the interactive `shad/slider` layout exactly.
+     */
+    label?: string;
+    /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */
+    className?: string;
+};

package/cards/stack/stack.types.d.ts

@@ -1,5 +1,23 @@
 import { PiCardRef } from '@pihanga2/core';
-export declare const STACK_CARD = "shad/stack";
+import { AlignItemsT } from '../types';
+export declare const STACK_CARD = "pi/stack";
+/**
+ * Factory function for declaring a `stack` card instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {Stack} from "@/cards/stack";
+ *
+ * registerCard("myApp/toolbar", Stack({
+ *   direction:      "row",
+ *   spacing:        2,
+ *   alignItems:     "center",
+ *   justifyContent: "space-between",
+ *   content:        ["myApp/logo", "myApp/navLinks", "myApp/userMenu"],
+ * }));
+ * ```
+ */
+export declare const Stack: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<StackProps<object>, S, {}>) => import('@pihanga2/core').PiCardDef;
 /**
  * CSS `flex-direction` values supported by the Stack card.
  */
@@ -8,10 +26,6 @@ export type DirectionT = "column-reverse" | "column" | "row-reverse" | "row";
  * CSS `justify-content` values supported by the Stack card.
  */
 export type JustifyContentT = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
-/**
- * CSS `align-items` values supported by the Stack card.
- */
-export type AlignItemsT = "normal" | "stretch" | "center" | "flex-start" | "flex-end" | "start" | "end" | "baseline" | "initial" | "inherit";
 export type StackProps<S = object> = {
     /** Ordered list of child card refs to render */
     content: PiCardRef[];
@@ -28,20 +42,3 @@ export type StackProps<S = object> = {
     /** Card style object (use the `shad` key for Tailwind-compatible overrides) */
     style?: S;
 };
-/**
- * Factory function for declaring a `shad/stack` card instance.
- *
- * ```ts
- * import {registerCard} from "@pihanga2/core";
- * import {Stack} from "@/cards/stack";
- *
- * registerCard("myApp/toolbar", Stack({
- *   direction:      "row",
- *   spacing:        2,
- *   alignItems:     "center",
- *   justifyContent: "space-between",
- *   content:        ["myApp/logo", "myApp/navLinks", "myApp/userMenu"],
- * }));
- * ```
- */
-export declare const Stack: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<StackProps<object>, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/stack/stack.types.js

@@ -1,6 +1,6 @@
 import { createCardDeclaration as e } from "@pihanga2/core";
 //#region src/cards/stack/stack.types.ts
-var t = "shad/stack", n = e(t);
+var t = "pi/stack", n = e(t);
 //#endregion
 export { t as STACK_CARD, n as Stack };
 

package/cards/stack/stack.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.types.js","names":[],"sources":["../../../src/cards/stack/stack.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const STACK_CARD = \"shad/stack\";\n\n/**\n * CSS `flex-direction` values supported by the Stack card.\n */\nexport type DirectionT = \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\";\n\n/**\n * CSS `justify-content` values supported by the Stack card.\n */\nexport type JustifyContentT =\n  | \"flex-start\"\n  | \"center\"\n  | \"flex-end\"\n  | \"space-between\"\n  | \"space-around\"\n  | \"space-evenly\";\n\n/**\n * CSS `align-items` values supported by the Stack card.\n */\nexport type AlignItemsT =\n  | \"normal\"\n  | \"stretch\"\n  | \"center\"\n  | \"flex-start\"\n  | \"flex-end\"\n  | \"start\"\n  | \"end\"\n  | \"baseline\"\n  | \"initial\"\n  | \"inherit\";\n\nexport type StackProps<S = object> = {\n  /** Ordered list of child card refs to render */\n  content: PiCardRef[];\n\n  /** Flex direction — defaults to `\"column\"` */\n  direction?: DirectionT;\n  /** Optional card ref rendered as a separator between children */\n  divider?: PiCardRef;\n  /** Tailwind gap spacing units between children */\n  spacing?: number;\n\n  justifyContent?: JustifyContentT;\n  alignItems?: AlignItemsT;\n\n  /** Additional Tailwind utility classes */\n  className?: string;\n  /** Card style object (use the `shad` key for Tailwind-compatible overrides) */\n  style?: S;\n};\n\n/**\n * Factory function for declaring a `shad/stack` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {Stack} from \"@/cards/stack\";\n *\n * registerCard(\"myApp/toolbar\", Stack({\n *   direction:      \"row\",\n *   spacing:        2,\n *   alignItems:     \"center\",\n *   justifyContent: \"space-between\",\n *   content:        [\"myApp/logo\", \"myApp/navLinks\", \"myApp/userMenu\"],\n * }));\n * ```\n */\nexport const Stack = createCardDeclaration<StackProps>(STACK_CARD);\n"],"mappings":";;AAEA,IAAa,IAAa,cAqEb,IAAQ,EAAkC,CAAU"}
+{"version":3,"file":"stack.types.js","names":[],"sources":["../../../src/cards/stack/stack.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\nimport {AlignItemsT} from \"../types\";\n\nexport const STACK_CARD = \"pi/stack\";\n\n/**\n * Factory function for declaring a `stack` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {Stack} from \"@/cards/stack\";\n *\n * registerCard(\"myApp/toolbar\", Stack({\n *   direction:      \"row\",\n *   spacing:        2,\n *   alignItems:     \"center\",\n *   justifyContent: \"space-between\",\n *   content:        [\"myApp/logo\", \"myApp/navLinks\", \"myApp/userMenu\"],\n * }));\n * ```\n */\nexport const Stack = createCardDeclaration<StackProps>(STACK_CARD);\n\n/**\n * CSS `flex-direction` values supported by the Stack card.\n */\nexport type DirectionT = \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\";\n\n/**\n * CSS `justify-content` values supported by the Stack card.\n */\nexport type JustifyContentT =\n  | \"flex-start\"\n  | \"center\"\n  | \"flex-end\"\n  | \"space-between\"\n  | \"space-around\"\n  | \"space-evenly\";\n\nexport type StackProps<S = object> = {\n  /** Ordered list of child card refs to render */\n  content: PiCardRef[];\n\n  /** Flex direction — defaults to `\"column\"` */\n  direction?: DirectionT;\n  /** Optional card ref rendered as a separator between children */\n  divider?: PiCardRef;\n  /** Tailwind gap spacing units between children */\n  spacing?: number;\n\n  justifyContent?: JustifyContentT;\n  alignItems?: AlignItemsT;\n\n  /** Additional Tailwind utility classes */\n  className?: string;\n  /** Card style object (use the `shad` key for Tailwind-compatible overrides) */\n  style?: S;\n};\n"],"mappings":";;AAGA,IAAa,IAAa,YAkBb,IAAQ,EAAkC,CAAU"}

package/cards/tabs/index.js

@@ -1,13 +1,13 @@
 import { TabsComponent as e } from "./tabs.component.js";
-import { SdTabs as t, TABS_ACTION as n, TABS_CARD as r, onTabsTabChanged as i } from "./tabs.types.js";
-import { registerCardComponent as a } from "@pihanga2/core";
+import { SdTabs as t, TABS_ACTION as n, TABS_CARD as r, Tabs as i, onTabsTabChanged as a } from "./tabs.types.js";
+import { registerCardComponent as o } from "@pihanga2/core";
 //#region src/cards/tabs/index.ts
-a({
+o({
 	name: r,
 	component: e,
 	events: { onTabChanged: n.TABCHANGED }
 });
 //#endregion
-export { t as SdTabs, n as TABS_ACTION, r as TABS_CARD, i as onTabsTabChanged };
+export { t as SdTabs, n as TABS_ACTION, r as TABS_CARD, i as Tabs, a as onTabsTabChanged };
 
 //# sourceMappingURL=index.js.map

package/cards/tabs/tabs.component.js

@@ -1,42 +1,68 @@
-import { Tabs as e, TabsContent as t, TabsList as n, TabsTrigger as r } from "../../components/ui/tabs.js";
-import { Card as i } from "@pihanga2/core";
-import { useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Select as e, SelectContent as t, SelectItem as n, SelectTrigger as r, SelectValue as i } from "../../components/ui/select.js";
+import { Tabs as a, TabsContent as o, TabsList as s, TabsTrigger as c } from "../../components/ui/tabs.js";
+import { Card as l } from "@pihanga2/core";
+import { useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/cards/tabs/tabs.component.tsx
-var c = (c) => {
-	let { tabs: l, value: u, defaultValue: d, selfManaged: f = !1, orientation: p = "horizontal", className: m, listClassName: h, contentClassName: g, cardName: _, onTabChanged: v } = c, [y, b] = a(u ?? d ?? l[0]?.id ?? ""), x = f ? y : u ?? d ?? l[0]?.id ?? "";
-	function S(e) {
-		f && b(e), typeof v == "function" && v({ tabId: e });
+var p = (p) => {
+	let { tabs: m, value: h, defaultValue: g, selfManaged: _ = !1, orientation: v = "horizontal", className: y, listClassName: b, contentClassName: x, maxTabs: S, cardName: C, onTabChanged: w } = p, [T, E] = u(h ?? g ?? m[0]?.id ?? ""), D = _ ? T : h ?? g ?? m[0]?.id ?? "";
+	function O(e) {
+		_ && E(e), typeof w == "function" && w({ tabId: e });
 	}
-	return /* @__PURE__ */ o("div", {
-		"data-pihanga": _,
-		children: /* @__PURE__ */ s(e, {
-			value: x,
-			onValueChange: S,
-			orientation: p,
-			className: m,
-			children: [/* @__PURE__ */ o(n, {
-				className: h,
-				children: l.map((e) => /* @__PURE__ */ o(r, {
+	if (S !== void 0 && m.length > S) {
+		let a = m.find((e) => e.id === D);
+		return /* @__PURE__ */ f("div", {
+			"data-pihanga": C,
+			className: y,
+			children: [/* @__PURE__ */ f(e, {
+				value: D,
+				onValueChange: O,
+				children: [/* @__PURE__ */ d(r, {
+					className: b,
+					children: /* @__PURE__ */ d(i, { placeholder: "Select a tab…" })
+				}), /* @__PURE__ */ d(t, { children: m.map((e) => /* @__PURE__ */ d(n, {
 					value: e.id,
 					disabled: e.disabled,
-					children: typeof e.title == "string" ? e.title : /* @__PURE__ */ o(i, {
+					children: typeof e.title == "string" ? e.title : e.id
+				}, e.id)) })]
+			}), a && /* @__PURE__ */ d("div", {
+				className: x,
+				children: /* @__PURE__ */ d(l, {
+					cardName: a.contentCard,
+					parentCard: C
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ d("div", {
+		"data-pihanga": C,
+		children: /* @__PURE__ */ f(a, {
+			value: D,
+			onValueChange: O,
+			orientation: v,
+			className: y,
+			children: [/* @__PURE__ */ d(s, {
+				className: b,
+				children: m.map((e) => /* @__PURE__ */ d(c, {
+					value: e.id,
+					disabled: e.disabled,
+					children: typeof e.title == "string" ? e.title : /* @__PURE__ */ d(l, {
 						cardName: e.title,
-						parentCard: _
+						parentCard: C
 					})
 				}, e.id))
-			}), l.map((e) => /* @__PURE__ */ o(t, {
+			}), m.map((e) => /* @__PURE__ */ d(o, {
 				value: e.id,
-				className: g,
-				children: /* @__PURE__ */ o(i, {
+				className: x,
+				children: /* @__PURE__ */ d(l, {
 					cardName: e.contentCard,
-					parentCard: _
+					parentCard: C
 				})
 			}, e.id))]
 		})
 	});
 };
 //#endregion
-export { c as TabsComponent };
+export { p as TabsComponent };
 
 //# sourceMappingURL=tabs.component.js.map

package/cards/tabs/tabs.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.component.js","names":[],"sources":["../../../src/cards/tabs/tabs.component.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {Tabs, TabsContent, TabsList, TabsTrigger} from \"@/components/ui/tabs\";\nimport type {TabsEvents, TabsProps} from \"./tabs.types\";\n\nexport const TabsComponent = (\n  props: PiCardProps<TabsProps, TabsEvents>,\n): React.ReactNode => {\n  const {\n    tabs,\n    value: propValue,\n    defaultValue,\n    selfManaged = false,\n    orientation = \"horizontal\",\n    className,\n    listClassName,\n    contentClassName,\n    cardName,\n    onTabChanged,\n  } = props;\n\n  // Resolve the initial value for self-managed mode:\n  // prefer propValue, then defaultValue, then first tab's id.\n  const initialValue = propValue ?? defaultValue ?? tabs[0]?.id ?? \"\";\n\n  // Internal state used only when selfManaged=true.\n  const [managedValue, setManagedValue] = useState<string>(initialValue);\n\n  // Effective active tab:\n  //   selfManaged → use internal state\n  //   controlled  → use the prop (fall back to first tab if not set)\n  const activeValue = selfManaged\n    ? managedValue\n    : (propValue ?? defaultValue ?? tabs[0]?.id ?? \"\");\n\n  function handleValueChange(tabId: string) {\n    if (selfManaged) {\n      setManagedValue(tabId);\n    }\n    // Always dispatch the Pihanga event so reducers can observe the change\n    // even in self-managed mode.\n    if (typeof onTabChanged === \"function\") {\n      onTabChanged({tabId});\n    }\n  }\n\n  return (\n    <div data-pihanga={cardName}>\n      <Tabs\n        value={activeValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        className={className}\n      >\n        <TabsList className={listClassName}>\n          {tabs.map((tab) => (\n            <TabsTrigger key={tab.id} value={tab.id} disabled={tab.disabled}>\n              {typeof tab.title !== \"string\" ? (\n                <Card cardName={tab.title} parentCard={cardName} />\n              ) : (\n                tab.title\n              )}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n\n        {tabs.map((tab) => (\n          <TabsContent key={tab.id} value={tab.id} className={contentClassName}>\n            <Card cardName={tab.contentCard} parentCard={cardName} />\n          </TabsContent>\n        ))}\n      </Tabs>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,GACP,iBACA,iBAAc,IACd,iBAAc,cACd,cACA,kBACA,qBACA,aACA,oBACE,GAOE,CAAC,GAAc,KAAmB,EAHnB,KAAa,KAAgB,EAAK,IAAI,MAAM,EAGI,GAK/D,IAAc,IAChB,IACC,KAAa,KAAgB,EAAK,IAAI,MAAM;CAEjD,SAAS,EAAkB,GAAe;EAMxC,AALI,KACF,EAAgB,CAAK,GAInB,OAAO,KAAiB,cAC1B,EAAa,EAAC,SAAK,CAAC;CAExB;CAEA,OACE,kBAAC,OAAD;EAAK,gBAAc;YACjB,kBAAC,GAAD;GACE,OAAO;GACP,eAAe;GACF;GACF;aAJb,CAME,kBAAC,GAAD;IAAU,WAAW;cAClB,EAAK,KAAK,MACT,kBAAC,GAAD;KAA0B,OAAO,EAAI;KAAI,UAAU,EAAI;eACpD,OAAO,EAAI,SAAU,WAGpB,EAAI,QAFJ,kBAAC,GAAD;MAAM,UAAU,EAAI;MAAO,YAAY;KAAW,CAAA;IAIzC,GANK,EAAI,EAMT,CACd;GACO,CAAA,GAET,EAAK,KAAK,MACT,kBAAC,GAAD;IAA0B,OAAO,EAAI;IAAI,WAAW;cAClD,kBAAC,GAAD;KAAM,UAAU,EAAI;KAAa,YAAY;IAAW,CAAA;GAC7C,GAFK,EAAI,EAET,CACd,CACG;;CACH,CAAA;AAET"}
+{"version":3,"file":"tabs.component.js","names":[],"sources":["../../../src/cards/tabs/tabs.component.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {Tabs, TabsContent, TabsList, TabsTrigger} from \"@/components/ui/tabs\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport type {TabsEvents, TabsProps} from \"./tabs.types\";\n\nexport const TabsComponent = (\n  props: PiCardProps<TabsProps, TabsEvents>,\n): React.ReactNode => {\n  const {\n    tabs,\n    value: propValue,\n    defaultValue,\n    selfManaged = false,\n    orientation = \"horizontal\",\n    className,\n    listClassName,\n    contentClassName,\n    maxTabs,\n    cardName,\n    onTabChanged,\n  } = props;\n\n  // Resolve the initial value for self-managed mode:\n  // prefer propValue, then defaultValue, then first tab's id.\n  const initialValue = propValue ?? defaultValue ?? tabs[0]?.id ?? \"\";\n\n  // Internal state used only when selfManaged=true.\n  const [managedValue, setManagedValue] = useState<string>(initialValue);\n\n  // Effective active tab:\n  //   selfManaged → use internal state\n  //   controlled  → use the prop (fall back to first tab if not set)\n  const activeValue = selfManaged\n    ? managedValue\n    : (propValue ?? defaultValue ?? tabs[0]?.id ?? \"\");\n\n  function handleValueChange(tabId: string) {\n    if (selfManaged) {\n      setManagedValue(tabId);\n    }\n    // Always dispatch the Pihanga event so reducers can observe the change\n    // even in self-managed mode.\n    if (typeof onTabChanged === \"function\") {\n      onTabChanged({tabId});\n    }\n  }\n\n  // When maxTabs is set and the number of tabs exceeds it, replace the tab\n  // strip with a Select drop-down for navigation.\n  const useDropdown = maxTabs !== undefined && tabs.length > maxTabs;\n\n  if (useDropdown) {\n    const activeTab = tabs.find((t) => t.id === activeValue);\n\n    return (\n      <div data-pihanga={cardName} className={className}>\n        {/* Drop-down tab selector */}\n        <Select value={activeValue} onValueChange={handleValueChange}>\n          <SelectTrigger className={listClassName}>\n            <SelectValue placeholder=\"Select a tab…\" />\n          </SelectTrigger>\n          <SelectContent>\n            {tabs.map((tab) => (\n              <SelectItem key={tab.id} value={tab.id} disabled={tab.disabled}>\n                {typeof tab.title === \"string\" ? tab.title : tab.id}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n\n        {/* Content area — render the active tab's card directly */}\n        {activeTab && (\n          <div className={contentClassName}>\n            <Card cardName={activeTab.contentCard} parentCard={cardName} />\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div data-pihanga={cardName}>\n      <Tabs\n        value={activeValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        className={className}\n      >\n        <TabsList className={listClassName}>\n          {tabs.map((tab) => (\n            <TabsTrigger key={tab.id} value={tab.id} disabled={tab.disabled}>\n              {typeof tab.title !== \"string\" ? (\n                <Card cardName={tab.title} parentCard={cardName} />\n              ) : (\n                tab.title\n              )}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n\n        {tabs.map((tab) => (\n          <TabsContent key={tab.id} value={tab.id} className={contentClassName}>\n            <Card cardName={tab.contentCard} parentCard={cardName} />\n          </TabsContent>\n        ))}\n      </Tabs>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,GACP,iBACA,iBAAc,IACd,iBAAc,cACd,cACA,kBACA,qBACA,YACA,aACA,oBACE,GAOE,CAAC,GAAc,KAAmB,EAHnB,KAAa,KAAgB,EAAK,IAAI,MAAM,EAGI,GAK/D,IAAc,IAChB,IACC,KAAa,KAAgB,EAAK,IAAI,MAAM;CAEjD,SAAS,EAAkB,GAAe;EAMxC,AALI,KACF,EAAgB,CAAK,GAInB,OAAO,KAAiB,cAC1B,EAAa,EAAC,SAAK,CAAC;CAExB;CAMA,IAFoB,MAAY,KAAA,KAAa,EAAK,SAAS,GAE1C;EACf,IAAM,IAAY,EAAK,MAAM,MAAM,EAAE,OAAO,CAAW;EAEvD,OACE,kBAAC,OAAD;GAAK,gBAAc;GAAqB;aAAxC,CAEE,kBAAC,GAAD;IAAQ,OAAO;IAAa,eAAe;cAA3C,CACE,kBAAC,GAAD;KAAe,WAAW;eACxB,kBAAC,GAAD,EAAa,aAAY,gBAAiB,CAAA;IAC7B,CAAA,GACf,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MACT,kBAAC,GAAD;KAAyB,OAAO,EAAI;KAAI,UAAU,EAAI;eACnD,OAAO,EAAI,SAAU,WAAW,EAAI,QAAQ,EAAI;IACvC,GAFK,EAAI,EAET,CACb,EACY,CAAA,CACT;OAGP,KACC,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,GAAD;KAAM,UAAU,EAAU;KAAa,YAAY;IAAW,CAAA;GAC3D,CAAA,CAEJ;;CAET;CAEA,OACE,kBAAC,OAAD;EAAK,gBAAc;YACjB,kBAAC,GAAD;GACE,OAAO;GACP,eAAe;GACF;GACF;aAJb,CAME,kBAAC,GAAD;IAAU,WAAW;cAClB,EAAK,KAAK,MACT,kBAAC,GAAD;KAA0B,OAAO,EAAI;KAAI,UAAU,EAAI;eACpD,OAAO,EAAI,SAAU,WAGpB,EAAI,QAFJ,kBAAC,GAAD;MAAM,UAAU,EAAI;MAAO,YAAY;KAAW,CAAA;IAIzC,GANK,EAAI,EAMT,CACd;GACO,CAAA,GAET,EAAK,KAAK,MACT,kBAAC,GAAD;IAA0B,OAAO,EAAI;IAAI,WAAW;cAClD,kBAAC,GAAD;KAAM,UAAU,EAAI;KAAa,YAAY;IAAW,CAAA;GAC7C,GAFK,EAAI,EAET,CACd,CACG;;CACH,CAAA;AAET"}

package/cards/tabs/tabs.types.d.ts

@@ -1,5 +1,7 @@
 import { PiCardRef } from '@pihanga2/core';
 export declare const TABS_CARD = "shad/tabs";
+export declare const Tabs: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<TabsProps, S, TabsEvents>) => import('@pihanga2/core').PiCardDef;
+/** @deprecated Use {@link Tabs} instead. */
 export declare const SdTabs: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<TabsProps, S, TabsEvents>) => import('@pihanga2/core').PiCardDef;
 export declare const TABS_ACTION: {
     TABCHANGED: string;
@@ -61,6 +63,16 @@ export type TabsProps = {
     listClassName?: string;
     /** Additional classes applied to each TabsContent element. */
     contentClassName?: string;
+    /**
+     * Maximum number of tabs to display as a standard tab strip.
+     * When the number of tabs exceeds this value the tab selector is replaced
+     * by a drop-down `<Select>` menu while the tab content area continues to
+     * work as normal.
+     *
+     * When omitted (or `undefined`) the tab strip is always used regardless of
+     * how many tabs there are.
+     */
+    maxTabs?: number;
 };
 export type TabsTabChangedEvent = {
     /** The id of the newly selected tab. */

package/cards/tabs/tabs.types.js

@@ -1,7 +1,7 @@
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#region src/cards/tabs/tabs.types.ts
-var r = "shad/tabs", i = e(r), a = n(r, ["tabChanged"]), o = t(a.TABCHANGED);
+var r = "shad/tabs", i = e(r), a = i, o = n(r, ["tabChanged"]), s = t(o.TABCHANGED);
 //#endregion
-export { i as SdTabs, a as TABS_ACTION, r as TABS_CARD, o as onTabsTabChanged };
+export { a as SdTabs, o as TABS_ACTION, r as TABS_CARD, i as Tabs, s as onTabsTabChanged };
 
 //# sourceMappingURL=tabs.types.js.map

package/cards/tabs/tabs.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.js","names":[],"sources":["../../../src/cards/tabs/tabs.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const TABS_CARD = \"shad/tabs\";\n\nexport const SdTabs = createCardDeclaration<TabsProps, TabsEvents>(TABS_CARD);\n\nexport const TABS_ACTION = registerActions(TABS_CARD, [\"tabChanged\"]);\n\nexport const onTabsTabChanged = createOnAction<TabsTabChangedEvent>(\n  TABS_ACTION.TABCHANGED,\n);\n\n// ─── Tab item definition ──────────────────────────────────────────────────────\n\n/**\n * A single tab entry in the tabs component.\n */\nexport type TabItem = {\n  /** Unique identifier used for controlled value and events. */\n  id: string;\n\n  /**\n   * The label displayed on the tab trigger.\n   * Can be a plain string or a PiCardRef for custom/rich tab labels.\n   */\n  title: string | PiCardRef;\n\n  /**\n   * The Pihanga card rendered as the body of this tab when it is active.\n   */\n  contentCard: PiCardRef;\n\n  /** When true the tab trigger is rendered as disabled. */\n  disabled?: boolean;\n};\n\n// ─── Card props ───────────────────────────────────────────────────────────────\n\nexport type TabsProps = {\n  /** Ordered list of tab definitions. */\n  tabs: TabItem[];\n\n  /**\n   * Controlled: the currently active tab id.\n   * Must be provided (or supplied via a state mapper) when selfManaged is\n   * false (the default).\n   */\n  value?: string;\n\n  /**\n   * Uncontrolled initial active tab id.\n   * Used as the initial value in self-managed mode when value is not set;\n   * falls back to the first tab id if omitted.\n   */\n  defaultValue?: string;\n\n  /**\n   * When true, the component manages its own active tab state internally.\n   * The onTabChanged event is still dispatched on every change so external\n   * reducers can observe the selection.\n   *\n   * When false (default), value fully controls the displayed tab.\n   * @default false\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Layout orientation of the tab list.\n   * Passed directly to the Radix Tabs primitive.\n   * @default \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n\n  /** Additional Tailwind/CSS classes applied to the root Tabs element. */\n  className?: string;\n\n  /** Additional classes applied to the TabsList element. */\n  listClassName?: string;\n\n  /** Additional classes applied to each TabsContent element. */\n  contentClassName?: string;\n};\n\n// ─── Events ───────────────────────────────────────────────────────────────────\n\nexport type TabsTabChangedEvent = {\n  /** The id of the newly selected tab. */\n  tabId: string;\n};\n\nexport type TabsEvents = {\n  /** Fired whenever the user selects a different tab. */\n  onTabChanged: TabsTabChangedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAY,aAEZ,IAAS,EAA6C,CAAS,GAE/D,IAAc,EAAgB,GAAW,CAAC,YAAY,CAAC,GAEvD,IAAmB,EAC9B,EAAY,UACd"}
+{"version":3,"file":"tabs.types.js","names":[],"sources":["../../../src/cards/tabs/tabs.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const TABS_CARD = \"shad/tabs\";\n\nexport const Tabs = createCardDeclaration<TabsProps, TabsEvents>(TABS_CARD);\n\n/** @deprecated Use {@link Tabs} instead. */\nexport const SdTabs = Tabs;\n\nexport const TABS_ACTION = registerActions(TABS_CARD, [\"tabChanged\"]);\n\nexport const onTabsTabChanged = createOnAction<TabsTabChangedEvent>(\n  TABS_ACTION.TABCHANGED,\n);\n\n// ─── Tab item definition ──────────────────────────────────────────────────────\n\n/**\n * A single tab entry in the tabs component.\n */\nexport type TabItem = {\n  /** Unique identifier used for controlled value and events. */\n  id: string;\n\n  /**\n   * The label displayed on the tab trigger.\n   * Can be a plain string or a PiCardRef for custom/rich tab labels.\n   */\n  title: string | PiCardRef;\n\n  /**\n   * The Pihanga card rendered as the body of this tab when it is active.\n   */\n  contentCard: PiCardRef;\n\n  /** When true the tab trigger is rendered as disabled. */\n  disabled?: boolean;\n};\n\n// ─── Card props ───────────────────────────────────────────────────────────────\n\nexport type TabsProps = {\n  /** Ordered list of tab definitions. */\n  tabs: TabItem[];\n\n  /**\n   * Controlled: the currently active tab id.\n   * Must be provided (or supplied via a state mapper) when selfManaged is\n   * false (the default).\n   */\n  value?: string;\n\n  /**\n   * Uncontrolled initial active tab id.\n   * Used as the initial value in self-managed mode when value is not set;\n   * falls back to the first tab id if omitted.\n   */\n  defaultValue?: string;\n\n  /**\n   * When true, the component manages its own active tab state internally.\n   * The onTabChanged event is still dispatched on every change so external\n   * reducers can observe the selection.\n   *\n   * When false (default), value fully controls the displayed tab.\n   * @default false\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Layout orientation of the tab list.\n   * Passed directly to the Radix Tabs primitive.\n   * @default \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n\n  /** Additional Tailwind/CSS classes applied to the root Tabs element. */\n  className?: string;\n\n  /** Additional classes applied to the TabsList element. */\n  listClassName?: string;\n\n  /** Additional classes applied to each TabsContent element. */\n  contentClassName?: string;\n\n  /**\n   * Maximum number of tabs to display as a standard tab strip.\n   * When the number of tabs exceeds this value the tab selector is replaced\n   * by a drop-down `<Select>` menu while the tab content area continues to\n   * work as normal.\n   *\n   * When omitted (or `undefined`) the tab strip is always used regardless of\n   * how many tabs there are.\n   */\n  maxTabs?: number;\n};\n\n// ─── Events ───────────────────────────────────────────────────────────────────\n\nexport type TabsTabChangedEvent = {\n  /** The id of the newly selected tab. */\n  tabId: string;\n};\n\nexport type TabsEvents = {\n  /** Fired whenever the user selects a different tab. */\n  onTabChanged: TabsTabChangedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAY,aAEZ,IAAO,EAA6C,CAAS,GAG7D,IAAS,GAET,IAAc,EAAgB,GAAW,CAAC,YAAY,CAAC,GAEvD,IAAmB,EAC9B,EAAY,UACd"}

package/cards/types.d.ts

@@ -70,3 +70,7 @@ export type ColorT = string;
  * registry) or an arbitrary Tailwind-class string for inline SVG icons.
  */
 export type DecoratorT = string;
+/**
+ * CSS `align-items` values supported by the Box & Stack card.
+ */
+export type AlignItemsT = "normal" | "stretch" | "center" | "flex-start" | "flex-end" | "start" | "end" | "baseline" | "initial" | "inherit";

package/cards/types.js.map

@@ -1 +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"}
+{"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\n/**\n * CSS `align-items` values supported by the Box & Stack card.\n */\nexport type AlignItemsT =\n  | \"normal\"\n  | \"stretch\"\n  | \"center\"\n  | \"flex-start\"\n  | \"flex-end\"\n  | \"start\"\n  | \"end\"\n  | \"baseline\"\n  | \"initial\"\n  | \"inherit\";\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/components/hooks/use-breakpoint.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+/**
+ * Convert a user-supplied breakpoint selector string into a CSS media-query
+ * string suitable for `window.matchMedia`.
+ *
+ * Supported selector formats
+ * ──────────────────────────
+ *  Named (Tailwind)  │ `sm`  `md`  `lg`  `xl`  `2xl`
+ *  Min-width         │ `640px`   `>=640px`
+ *  Exclusive min     │ `>640px`  (≡ min-width: 641px)
+ *  Max-width         │ `<=1024px`
+ *  Exclusive max     │ `<1024px` (≡ max-width: 1023px)
+ */
+export declare function selectorToMediaQuery(selector: string): string;
+/**
+ * Convert a breakpoint selector string into a predicate that tests a pixel
+ * width directly.  Used by `useContainerBreakpoint` to evaluate the selector
+ * against an element's `contentRect.width` rather than the viewport.
+ *
+ * Returns `() => true` for unrecognised selectors (fail-open).
+ */
+export declare function selectorToWidthTest(selector: string): (width: number) => boolean;
+/**
+ * Returns `true` when the **viewport** matches the given breakpoint selector,
+ * and reactively updates on resize via `window.matchMedia`.
+ *
+ * When `selector` is `undefined` the hook always returns `true` (no restriction).
+ *
+ * @param selector  A breakpoint name (`sm` | `md` | `lg` | `xl` | `2xl`),
+ *                  a pixel expression (`>400px`, `>=640px`, `<768px`,
+ *                  `<=1024px`, `400px`), or `undefined`.
+ */
+export declare function useBreakpoint(selector: string | undefined): boolean;
+/**
+ * Returns `true` when the width of the element referenced by `ref` matches
+ * the given breakpoint selector.  Uses `ResizeObserver` so it reacts to
+ * any layout change — not just window resize.
+ *
+ * When `selector` is `undefined` the hook always returns `true`.
+ *
+ * **Note:** The caller must attach `ref` to a DOM element.  A thin wrapper
+ * `<div ref={ref} style={{ width: "100%" }}>` whose width equals its parent's
+ * content width is the canonical usage pattern, allowing the breakpoint to be
+ * evaluated against the **enclosing container** rather than the viewport.
+ *
+ * @param selector  Same format as {@link useBreakpoint}.
+ * @param ref       A React ref attached to the element whose width is measured.
+ */
+export declare function useContainerBreakpoint(selector: string | undefined, ref: React.RefObject<HTMLElement | null>): boolean;

package/components/hooks/use-breakpoint.js

@@ -0,0 +1,73 @@
+"use client";
+import * as e from "react";
+//#region src/components/hooks/use-breakpoint.ts
+var t = {
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280,
+	"2xl": 1536
+};
+function n(e) {
+	return t[e] ? `(min-width: ${t[e]}px)` : /^>=\d+(\.\d+)?px$/.test(e) ? `(min-width: ${e.slice(2)})` : /^>\d+(\.\d+)?px$/.test(e) ? `(min-width: ${parseFloat(e.slice(1)) + 1}px)` : /^<=\d+(\.\d+)?px$/.test(e) ? `(max-width: ${e.slice(2)})` : /^<\d+(\.\d+)?px$/.test(e) ? `(max-width: ${parseFloat(e.slice(1)) - 1}px)` : /^\d+(\.\d+)?px$/.test(e) ? `(min-width: ${e})` : e;
+}
+function r(e) {
+	if (t[e]) {
+		let n = t[e];
+		return (e) => e >= n;
+	}
+	if (/^>=\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e.slice(2));
+		return (e) => e >= t;
+	}
+	if (/^>\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e.slice(1));
+		return (e) => e > t;
+	}
+	if (/^<=\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e.slice(2));
+		return (e) => e <= t;
+	}
+	if (/^<\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e.slice(1));
+		return (e) => e < t;
+	}
+	if (/^\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e);
+		return (e) => e >= t;
+	}
+	return () => !0;
+}
+function i(t) {
+	let r = e.useMemo(() => t ? n(t) : null, [t]), [i, a] = e.useState(() => !r || typeof window > "u" ? !0 : window.matchMedia(r).matches);
+	return e.useEffect(() => {
+		if (!r) {
+			a(!0);
+			return;
+		}
+		let e = window.matchMedia(r);
+		a(e.matches);
+		let t = (e) => a(e.matches);
+		return e.addEventListener ? (e.addEventListener("change", t), () => e.removeEventListener("change", t)) : (e.addListener(t), () => e.removeListener(t));
+	}, [r]), i;
+}
+function a(t, n) {
+	let i = e.useMemo(() => t ? r(t) : null, [t]), [a, o] = e.useState(!0);
+	return e.useEffect(() => {
+		if (!i) {
+			o(!0);
+			return;
+		}
+		let e = n.current;
+		if (!e) return;
+		o(i(e.getBoundingClientRect().width));
+		let t = new ResizeObserver((e) => {
+			for (let t of e) o(i(t.contentBoxSize?.[0]?.inlineSize ?? t.contentRect.width));
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [i, n]), a;
+}
+//#endregion
+export { i as useBreakpoint, a as useContainerBreakpoint };
+
+//# sourceMappingURL=use-breakpoint.js.map

package/components/hooks/use-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.js","names":[],"sources":["../../../src/components/hooks/use-breakpoint.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// ── Named breakpoints ─────────────────────────────────────────────────────────\n\n/** Named Tailwind-compatible breakpoints → pixel values. */\nconst NAMED_PX: Record<string, number> = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  \"2xl\": 1536,\n};\n\n// ── Selector parsers ──────────────────────────────────────────────────────────\n\n/**\n * Convert a user-supplied breakpoint selector string into a CSS media-query\n * string suitable for `window.matchMedia`.\n *\n * Supported selector formats\n * ──────────────────────────\n *  Named (Tailwind)  │ `sm`  `md`  `lg`  `xl`  `2xl`\n *  Min-width         │ `640px`   `>=640px`\n *  Exclusive min     │ `>640px`  (≡ min-width: 641px)\n *  Max-width         │ `<=1024px`\n *  Exclusive max     │ `<1024px` (≡ max-width: 1023px)\n */\nexport function selectorToMediaQuery(selector: string): string {\n  if (NAMED_PX[selector]) return `(min-width: ${NAMED_PX[selector]}px)`;\n\n  if (/^>=\\d+(\\.\\d+)?px$/.test(selector))\n    return `(min-width: ${selector.slice(2)})`;\n\n  if (/^>\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(1));\n    return `(min-width: ${px + 1}px)`;\n  }\n\n  if (/^<=\\d+(\\.\\d+)?px$/.test(selector))\n    return `(max-width: ${selector.slice(2)})`;\n\n  if (/^<\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(1));\n    return `(max-width: ${px - 1}px)`;\n  }\n\n  if (/^\\d+(\\.\\d+)?px$/.test(selector)) return `(min-width: ${selector})`;\n\n  // Fallback: treat as a raw CSS media feature\n  return selector;\n}\n\n/**\n * Convert a breakpoint selector string into a predicate that tests a pixel\n * width directly.  Used by `useContainerBreakpoint` to evaluate the selector\n * against an element's `contentRect.width` rather than the viewport.\n *\n * Returns `() => true` for unrecognised selectors (fail-open).\n */\nexport function selectorToWidthTest(\n  selector: string,\n): (width: number) => boolean {\n  // Named Tailwind breakpoints → min-width\n  if (NAMED_PX[selector]) {\n    const threshold = NAMED_PX[selector];\n    return (w) => w >= threshold;\n  }\n\n  // >=Npx\n  if (/^>=\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(2));\n    return (w) => w >= px;\n  }\n\n  // >Npx\n  if (/^>\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(1));\n    return (w) => w > px;\n  }\n\n  // <=Npx\n  if (/^<=\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(2));\n    return (w) => w <= px;\n  }\n\n  // <Npx\n  if (/^<\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(1));\n    return (w) => w < px;\n  }\n\n  // Bare Npx  →  min-width\n  if (/^\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector);\n    return (w) => w >= px;\n  }\n\n  // Unrecognised → always visible\n  return () => true;\n}\n\n// ── Hooks ─────────────────────────────────────────────────────────────────────\n\n/**\n * Returns `true` when the **viewport** matches the given breakpoint selector,\n * and reactively updates on resize via `window.matchMedia`.\n *\n * When `selector` is `undefined` the hook always returns `true` (no restriction).\n *\n * @param selector  A breakpoint name (`sm` | `md` | `lg` | `xl` | `2xl`),\n *                  a pixel expression (`>400px`, `>=640px`, `<768px`,\n *                  `<=1024px`, `400px`), or `undefined`.\n */\nexport function useBreakpoint(selector: string | undefined): boolean {\n  const mediaQuery = React.useMemo(\n    () => (selector ? selectorToMediaQuery(selector) : null),\n    [selector],\n  );\n\n  const [matches, setMatches] = React.useState<boolean>(() => {\n    if (!mediaQuery || typeof window === \"undefined\") return true;\n    return window.matchMedia(mediaQuery).matches;\n  });\n\n  React.useEffect(() => {\n    if (!mediaQuery) {\n      setMatches(true);\n      return;\n    }\n\n    const mql = window.matchMedia(mediaQuery);\n    setMatches(mql.matches);\n\n    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);\n    if (mql.addEventListener) {\n      mql.addEventListener(\"change\", handler);\n      return () => mql.removeEventListener(\"change\", handler);\n    } else {\n      mql.addListener(handler);\n      return () => mql.removeListener(handler);\n    }\n  }, [mediaQuery]);\n\n  return matches;\n}\n\n/**\n * Returns `true` when the width of the element referenced by `ref` matches\n * the given breakpoint selector.  Uses `ResizeObserver` so it reacts to\n * any layout change — not just window resize.\n *\n * When `selector` is `undefined` the hook always returns `true`.\n *\n * **Note:** The caller must attach `ref` to a DOM element.  A thin wrapper\n * `<div ref={ref} style={{ width: \"100%\" }}>` whose width equals its parent's\n * content width is the canonical usage pattern, allowing the breakpoint to be\n * evaluated against the **enclosing container** rather than the viewport.\n *\n * @param selector  Same format as {@link useBreakpoint}.\n * @param ref       A React ref attached to the element whose width is measured.\n */\nexport function useContainerBreakpoint(\n  selector: string | undefined,\n  ref: React.RefObject<HTMLElement | null>,\n): boolean {\n  // Build the width-test predicate once per selector change.\n  const test = React.useMemo(\n    () => (selector ? selectorToWidthTest(selector) : null),\n    [selector],\n  );\n\n  // Default to `true` (optimistic / SSR-safe) until the observer fires.\n  const [matches, setMatches] = React.useState(true);\n\n  React.useEffect(() => {\n    if (!test) {\n      setMatches(true);\n      return;\n    }\n\n    const el = ref.current;\n    if (!el) return;\n\n    // Run immediately so the first render is correct.\n    setMatches(test(el.getBoundingClientRect().width));\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        // `contentBoxSize` is the standard; fall back to `contentRect` for\n        // older Safari.\n        const width =\n          entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n        setMatches(test(width));\n      }\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [test, ref]);\n\n  return matches;\n}\n"],"mappings":";;;AAOA,IAAM,IAAmC;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAgBA,SAAgB,EAAqB,GAA0B;CAsB7D,OArBI,EAAS,KAAkB,eAAe,EAAS,GAAU,OAE7D,oBAAoB,KAAK,CAAQ,IAC5B,eAAe,EAAS,MAAM,CAAC,EAAE,KAEtC,mBAAmB,KAAK,CAAQ,IAE3B,eADI,WAAW,EAAS,MAAM,CAAC,CAChB,IAAK,EAAE,OAG3B,oBAAoB,KAAK,CAAQ,IAC5B,eAAe,EAAS,MAAM,CAAC,EAAE,KAEtC,mBAAmB,KAAK,CAAQ,IAE3B,eADI,WAAW,EAAS,MAAM,CAAC,CAChB,IAAK,EAAE,OAG3B,kBAAkB,KAAK,CAAQ,IAAU,eAAe,EAAS,KAG9D;AACT;AASA,SAAgB,EACd,GAC4B;CAE5B,IAAI,EAAS,IAAW;EACtB,IAAM,IAAY,EAAS;EAC3B,QAAQ,MAAM,KAAK;CACrB;CAGA,IAAI,oBAAoB,KAAK,CAAQ,GAAG;EACtC,IAAM,IAAK,WAAW,EAAS,MAAM,CAAC,CAAC;EACvC,QAAQ,MAAM,KAAK;CACrB;CAGA,IAAI,mBAAmB,KAAK,CAAQ,GAAG;EACrC,IAAM,IAAK,WAAW,EAAS,MAAM,CAAC,CAAC;EACvC,QAAQ,MAAM,IAAI;CACpB;CAGA,IAAI,oBAAoB,KAAK,CAAQ,GAAG;EACtC,IAAM,IAAK,WAAW,EAAS,MAAM,CAAC,CAAC;EACvC,QAAQ,MAAM,KAAK;CACrB;CAGA,IAAI,mBAAmB,KAAK,CAAQ,GAAG;EACrC,IAAM,IAAK,WAAW,EAAS,MAAM,CAAC,CAAC;EACvC,QAAQ,MAAM,IAAI;CACpB;CAGA,IAAI,kBAAkB,KAAK,CAAQ,GAAG;EACpC,IAAM,IAAK,WAAW,CAAQ;EAC9B,QAAQ,MAAM,KAAK;CACrB;CAGA,aAAa;AACf;AAcA,SAAgB,EAAc,GAAuC;CACnE,IAAM,IAAa,EAAM,cAChB,IAAW,EAAqB,CAAQ,IAAI,MACnD,CAAC,CAAQ,CACX,GAEM,CAAC,GAAS,KAAc,EAAM,eAC9B,CAAC,KAAc,OAAO,SAAW,MAAoB,KAClD,OAAO,WAAW,CAAU,EAAE,OACtC;CAqBD,OAnBA,EAAM,gBAAgB;EACpB,IAAI,CAAC,GAAY;GACf,EAAW,EAAI;GACf;EACF;EAEA,IAAM,IAAM,OAAO,WAAW,CAAU;EACxC,EAAW,EAAI,OAAO;EAEtB,IAAM,KAAW,MAA2B,EAAW,EAAE,OAAO;EAM9D,OALE,EAAI,oBACN,EAAI,iBAAiB,UAAU,CAAO,SACzB,EAAI,oBAAoB,UAAU,CAAO,MAEtD,EAAI,YAAY,CAAO,SACV,EAAI,eAAe,CAAO;CAE3C,GAAG,CAAC,CAAU,CAAC,GAER;AACT;AAiBA,SAAgB,EACd,GACA,GACS;CAET,IAAM,IAAO,EAAM,cACV,IAAW,EAAoB,CAAQ,IAAI,MAClD,CAAC,CAAQ,CACX,GAGM,CAAC,GAAS,KAAc,EAAM,SAAS,EAAI;CA4BjD,OA1BA,EAAM,gBAAgB;EACpB,IAAI,CAAC,GAAM;GACT,EAAW,EAAI;GACf;EACF;EAEA,IAAM,IAAK,EAAI;EACf,IAAI,CAAC,GAAI;EAGT,EAAW,EAAK,EAAG,sBAAsB,EAAE,KAAK,CAAC;EAEjD,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,KAAK,IAAM,KAAS,GAKlB,EAAW,EADT,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,KACxC,CAAC;EAE1B,CAAC;EAGD,OADA,EAAS,QAAQ,CAAE,SACN,EAAS,WAAW;CACnC,GAAG,CAAC,GAAM,CAAG,CAAC,GAEP;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pihanga2/shadcn",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Pihanga core card components built on shadcn/ui and Radix UI — the npm distribution of pihanga-shadcn.",
   "type": "module",
   "exports": {
@@ -127,6 +127,14 @@
     "./cards/typography": {
       "import": "./cards/typography/index.js",
       "types": "./cards/typography/index.d.ts"
+    },
+    "./cards/types": {
+      "import": "./cards/types.js",
+      "types": "./cards/types.d.ts"
+    },
+    "./cards/icons": {
+      "import": "./cards/icons.js",
+      "types": "./cards/icons.d.ts"
     }
   },
   "main": "./cards/core-index.js",