@pihanga2/shadcn 0.2.0 → 0.2.1

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

@@ -63,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.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 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// ─── 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"}
+{"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/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.2.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": {