@clubmed/trident-ui 2.0.0-beta.4 → 2.0.0-beta.40

package/ui/frame/SliderFrame.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import { ImageProps } from '../Image';
+import { FrameWrapperProps } from './FrameWrapper';
+interface SliderLabels {
+    next: string;
+    previous: string;
+}
+export interface SliderFrameProps extends FrameWrapperProps {
+    describedby?: string;
+    items: ImageProps[];
+    labels: SliderLabels;
+}
+export declare const SliderFrame: FunctionComponent<SliderFrameProps>;
+export {};

package/ui/frame/SliderFrame.js

@@ -0,0 +1,50 @@
+"use client";
+import { Image as e } from "../Image.js";
+import { FrameWrapper as t } from "./FrameWrapper.js";
+import { Carousel as n } from "../carousel/Carousel.js";
+import { CarouselBody as r } from "../carousel/CarouselBody.js";
+import { CarouselItem as i } from "../carousel/CarouselItem.js";
+import { CarouselNext as a } from "../carousel/CarouselNext.js";
+import { CarouselPrevious as o } from "../carousel/CarouselPrevious.js";
+import { useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region lib/ui/frame/SliderFrame.tsx
+var u = ({ children: u, describedby: d, items: f, labels: p, ...m }) => {
+	let h = f.length > 1, g = s(() => f.map((t) => /* @__PURE__ */ c(e, {
+		...t,
+		className: "pointer-events-none size-full object-cover"
+	}, t.src)), [f]);
+	return /* @__PURE__ */ l(t, {
+		...m,
+		children: [h ? /* @__PURE__ */ l(n, {
+			className: "rounded-16 h-full select-none",
+			children: [/* @__PURE__ */ c(r, {
+				className: "h-full",
+				scrollClassName: "h-full auto-cols-full",
+				children: g.map((e, t) => /* @__PURE__ */ c(i, {
+					index: t,
+					children: /* @__PURE__ */ c("div", {
+						className: "h-full overflow-hidden",
+						children: e
+					})
+				}, t))
+			}), /* @__PURE__ */ l("div", {
+				className: "pointer-events-none absolute inset-0 z-1 -mx-70 flex items-center justify-between gap-x-20 px-12 opacity-0 transition-all group-hover:mx-0 group-hover:opacity-100",
+				children: [/* @__PURE__ */ c(o, {
+					"aria-describedby": d,
+					label: p.previous
+				}), /* @__PURE__ */ c(a, {
+					"aria-describedby": d,
+					label: p.next
+				})]
+			})]
+		}) : /* @__PURE__ */ c(e, {
+			...f[0],
+			className: "size-full object-cover"
+		}), u]
+	});
+};
+//#endregion
+export { u as SliderFrame };
+
+//# sourceMappingURL=SliderFrame.js.map

package/ui/frame/SliderFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderFrame.js","names":[],"sources":["../../../lib/ui/frame/SliderFrame.tsx"],"sourcesContent":["'use client';\nimport { type FunctionComponent, useMemo } from 'react';\n\nimport { Image, type ImageProps } from '../Image';\nimport { Carousel } from '../carousel/Carousel';\nimport { CarouselBody } from '../carousel/CarouselBody';\nimport { CarouselItem } from '../carousel/CarouselItem';\nimport { CarouselNext } from '../carousel/CarouselNext';\nimport { CarouselPrevious } from '../carousel/CarouselPrevious';\n\nimport { FrameWrapper, type FrameWrapperProps } from './FrameWrapper';\n\ninterface SliderLabels {\n  next: string;\n  previous: string;\n}\n\nexport interface SliderFrameProps extends FrameWrapperProps {\n  describedby?: string;\n  items: ImageProps[];\n  labels: SliderLabels;\n}\n\nexport const SliderFrame: FunctionComponent<SliderFrameProps> = ({\n  children,\n  describedby,\n  items,\n  labels,\n  ...props\n}) => {\n  const hasScroll = items.length > 1;\n\n  const sliderItems = useMemo(\n    () =>\n      items.map((item) => (\n        <Image key={item.src} {...item} className=\"pointer-events-none size-full object-cover\" />\n      )),\n    [items],\n  );\n\n  return (\n    <FrameWrapper {...props}>\n      {hasScroll ? (\n        <Carousel className=\"rounded-16 h-full select-none\">\n          <CarouselBody className=\"h-full\" scrollClassName=\"h-full auto-cols-full\">\n            {sliderItems.map((item, i) => (\n              <CarouselItem index={i} key={i}>\n                <div className=\"h-full overflow-hidden\">{item}</div>\n              </CarouselItem>\n            ))}\n          </CarouselBody>\n          <div className=\"pointer-events-none absolute inset-0 z-1 -mx-70 flex items-center justify-between gap-x-20 px-12 opacity-0 transition-all group-hover:mx-0 group-hover:opacity-100\">\n            <CarouselPrevious aria-describedby={describedby} label={labels.previous} />\n            <CarouselNext aria-describedby={describedby} label={labels.next} />\n          </div>\n        </Carousel>\n      ) : (\n        <Image {...items[0]} className=\"size-full object-cover\" />\n      )}\n      {children}\n    </FrameWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAuBA,IAAa,KAAoD,EAC/D,aACA,gBACA,UACA,WACA,GAAG,QACC;CACJ,IAAM,IAAY,EAAM,SAAS,GAE3B,IAAc,QAEhB,EAAM,KAAK,MACT,kBAAC,GAAD;EAAsB,GAAI;EAAM,WAAU;EAA+C,EAA7E,EAAK,IAAwE,CACzF,EACJ,CAAC,EAAM,CACR;AAED,QACE,kBAAC,GAAD;EAAc,GAAI;YAAlB,CACG,IACC,kBAAC,GAAD;GAAU,WAAU;aAApB,CACE,kBAAC,GAAD;IAAc,WAAU;IAAS,iBAAgB;cAC9C,EAAY,KAAK,GAAM,MACtB,kBAAC,GAAD;KAAc,OAAO;eACnB,kBAAC,OAAD;MAAK,WAAU;gBAA0B;MAAW,CAAA;KACvC,EAFc,EAEd,CAAA;IAEJ,CAAA,EACf,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAkB,oBAAkB;KAAa,OAAO,EAAO;KAAY,CAAA,EAC3E,kBAAC,GAAD;KAAc,oBAAkB;KAAa,OAAO,EAAO;KAAQ,CAAA,CAAA;;OAIvE,kBAAC,GAAD;GAAO,GAAI,EAAM;GAAI,WAAU;GAA2B,CAAA,EAE3D,EAAA"}

package/ui/helpers/colors/colors.d.ts

@@ -8,6 +8,7 @@ export declare enum Colors {
     lightSand = "lightSand",
     marygold = "marygold",
     orange = "orange",
+    pearl = "pearl",
     red = "red",
     saffron = "saffron",
     sand = "sand",
@@ -47,6 +48,7 @@ declare const BG_COLORS: {
     readonly lightSand: "bg-lightSand";
     readonly marygold: "bg-marygold";
     readonly orange: "bg-orange";
+    readonly pearl: "bg-pearl";
     readonly red: "bg-red";
     readonly saffron: "bg-saffron";
     readonly sand: "bg-sand";
@@ -65,6 +67,7 @@ declare const TEXT_COLORS: {
     readonly lightSand: "text-lightSand";
     readonly marygold: "text-marygold";
     readonly orange: "text-orange";
+    readonly pearl: "text-pearl";
     readonly red: "text-red";
     readonly saffron: "text-saffron";
     readonly sand: "text-sand";
@@ -85,6 +88,7 @@ declare const TO_COLORS: {
     readonly lightSand: "to-lightSand";
     readonly marygold: "to-marygold";
     readonly orange: "to-orange";
+    readonly pearl: "to-pearl";
     readonly red: "to-red";
     readonly saffron: "to-saffron";
     readonly sand: "to-sand";

package/ui/helpers/colors/colors.js

@@ -1,6 +1,6 @@
 //#region lib/ui/helpers/colors/colors.ts
 var e = /* @__PURE__ */ function(e) {
-	return e.black = "black", e.darkGrey = "darkGrey", e.green = "green", e.lavender = "lavender", e.lightGrey = "lightGrey", e.lightSand = "lightSand", e.marygold = "marygold", e.orange = "orange", e.red = "red", e.saffron = "saffron", e.sand = "sand", e.sienna = "sienna", e.ultramarine = "ultramarine", e.verdigris = "verdigris", e.wave = "wave", e.white = "white", e.current = "current", e;
+	return e.black = "black", e.darkGrey = "darkGrey", e.green = "green", e.lavender = "lavender", e.lightGrey = "lightGrey", e.lightSand = "lightSand", e.marygold = "marygold", e.orange = "orange", e.pearl = "pearl", e.red = "red", e.saffron = "saffron", e.sand = "sand", e.sienna = "sienna", e.ultramarine = "ultramarine", e.verdigris = "verdigris", e.wave = "wave", e.white = "white", e.current = "current", e;
 }({}), t = {
 	[e.black]: "border-black",
 	[e.darkGrey]: "border-darkGrey",
@@ -28,6 +28,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.lightSand]: "bg-lightSand",
 	[e.marygold]: "bg-marygold",
 	[e.orange]: "bg-orange",
+	[e.pearl]: "bg-pearl",
 	[e.red]: "bg-red",
 	[e.saffron]: "bg-saffron",
 	[e.sand]: "bg-sand",
@@ -44,6 +45,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.lightSand]: "text-lightSand",
 	[e.marygold]: "text-marygold",
 	[e.orange]: "text-orange",
+	[e.pearl]: "text-pearl",
 	[e.red]: "text-red",
 	[e.saffron]: "text-saffron",
 	[e.sand]: "text-sand",
@@ -62,6 +64,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.lightSand]: "to-lightSand",
 	[e.marygold]: "to-marygold",
 	[e.orange]: "to-orange",
+	[e.pearl]: "to-pearl",
 	[e.red]: "to-red",
 	[e.saffron]: "to-saffron",
 	[e.sand]: "to-sand",
@@ -80,6 +83,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.sand]: e.black,
 	[e.verdigris]: e.black,
 	[e.white]: e.black,
+	[e.pearl]: e.black,
 	[e.black]: e.white,
 	[e.green]: e.white,
 	[e.lavender]: e.white,
@@ -111,6 +115,7 @@ var e = /* @__PURE__ */ function(e) {
 	[e.green]: "text-white",
 	[e.lavender]: "text-white",
 	[e.orange]: "text-white",
+	[e.pearl]: "text-white",
 	[e.red]: "text-white",
 	[e.sienna]: "text-white",
 	[e.ultramarine]: "text-white",

package/ui/helpers/colors/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","names":[],"sources":["../../../../lib/ui/helpers/colors/colors.ts"],"sourcesContent":["import type { Theme } from '../../types/Theme';\n\nexport enum Colors {\n  black = 'black',\n  darkGrey = 'darkGrey',\n  green = 'green',\n  lavender = 'lavender',\n  lightGrey = 'lightGrey',\n  lightSand = 'lightSand',\n  marygold = 'marygold',\n  orange = 'orange',\n  red = 'red',\n  saffron = 'saffron',\n  sand = 'sand',\n  sienna = 'sienna',\n  ultramarine = 'ultramarine',\n  verdigris = 'verdigris',\n  wave = 'wave',\n  white = 'white',\n  current = 'current',\n}\n\nconst BORDER_COLORS = {\n  [Colors.black]: 'border-black',\n  [Colors.darkGrey]: 'border-darkGrey',\n  [Colors.green]: 'border-green',\n  [Colors.lavender]: 'border-lavender',\n  [Colors.lightGrey]: 'border-lightGrey',\n  [Colors.lightSand]: 'border-lightSand',\n  [Colors.marygold]: 'border-marygold',\n  [Colors.orange]: 'border-orange',\n  [Colors.red]: 'border-red',\n  [Colors.saffron]: 'border-saffron',\n  [Colors.sand]: 'border-sand',\n  [Colors.sienna]: 'border-sienna',\n  [Colors.ultramarine]: 'border-ultramarine',\n  [Colors.verdigris]: 'border-verdigris',\n  [Colors.wave]: 'border-wave',\n  [Colors.white]: 'border-white',\n  [Colors.current]: 'border-current',\n} as const satisfies Record<string, `border-${string}`>;\n\nexport type BorderColor = keyof typeof BORDER_COLORS;\n\nconst BG_COLORS = {\n  [Colors.black]: 'bg-black',\n  [Colors.darkGrey]: 'bg-darkGrey',\n  [Colors.green]: 'bg-green',\n  [Colors.lavender]: 'bg-lavender',\n  [Colors.lightGrey]: 'bg-lightGrey',\n  [Colors.lightSand]: 'bg-lightSand',\n  [Colors.marygold]: 'bg-marygold',\n  [Colors.orange]: 'bg-orange',\n  [Colors.red]: 'bg-red',\n  [Colors.saffron]: 'bg-saffron',\n  [Colors.sand]: 'bg-sand',\n  [Colors.sienna]: 'bg-sienna',\n  [Colors.ultramarine]: 'bg-ultramarine',\n  [Colors.verdigris]: 'bg-verdigris',\n  [Colors.wave]: 'bg-wave',\n  [Colors.white]: 'bg-white',\n  [Colors.current]: 'bg-current',\n} as const satisfies Record<Colors, `bg-${string}`>;\n\nexport type BgColor = keyof typeof BG_COLORS;\n\nconst TEXT_COLORS = {\n  [Colors.black]: 'text-black',\n  [Colors.green]: 'text-green',\n  [Colors.lavender]: 'text-lavender',\n  [Colors.lightSand]: 'text-lightSand',\n  [Colors.marygold]: 'text-marygold',\n  [Colors.orange]: 'text-orange',\n  [Colors.red]: 'text-red',\n  [Colors.saffron]: 'text-saffron',\n  [Colors.sand]: 'text-sand',\n  [Colors.sienna]: 'text-sienna',\n  [Colors.ultramarine]: 'text-ultramarine',\n  [Colors.verdigris]: 'text-verdigris',\n  [Colors.wave]: 'text-wave',\n  [Colors.white]: 'text-white',\n  [Colors.darkGrey]: 'text-darkGrey',\n  [Colors.lightGrey]: 'text-lightGrey',\n  [Colors.current]: 'text-current',\n} as const satisfies Record<Colors, `text-${string}`>;\n\nexport type TextColor = keyof typeof TEXT_COLORS;\n\nconst TO_COLORS = {\n  [Colors.black]: `to-black`,\n  [Colors.green]: `to-green`,\n  [Colors.lavender]: `to-lavender`,\n  [Colors.lightSand]: `to-lightSand`,\n  [Colors.marygold]: `to-marygold`,\n  [Colors.orange]: `to-orange`,\n  [Colors.red]: `to-red`,\n  [Colors.saffron]: `to-saffron`,\n  [Colors.sand]: `to-sand`,\n  [Colors.sienna]: `to-sienna`,\n  [Colors.ultramarine]: `to-ultramarine`,\n  [Colors.verdigris]: `to-verdigris`,\n  [Colors.wave]: `to-wave`,\n  [Colors.white]: `to-white`,\n  [Colors.darkGrey]: `to-darkGrey`,\n  [Colors.lightGrey]: `to-lightGrey`,\n  [Colors.current]: `to-current`,\n} as const satisfies Record<keyof typeof Colors, `to-${string}`>;\n\nexport type ToColor = keyof typeof TO_COLORS;\n\nconst COMPLEMENTARY_COLORS = {\n  [Colors.lightSand]: Colors.black,\n  [Colors.marygold]: Colors.black,\n  [Colors.saffron]: Colors.black,\n  [Colors.sand]: Colors.black,\n  [Colors.verdigris]: Colors.black,\n  [Colors.white]: Colors.black,\n  [Colors.black]: Colors.white,\n  [Colors.green]: Colors.white,\n  [Colors.lavender]: Colors.white,\n  [Colors.orange]: Colors.white,\n  [Colors.red]: Colors.white,\n  [Colors.sienna]: Colors.white,\n  [Colors.ultramarine]: Colors.white,\n  [Colors.wave]: Colors.white,\n  [Colors.darkGrey]: Colors.white,\n  [Colors.lightGrey]: Colors.black,\n  [Colors.current]: Colors.white,\n} as const satisfies Record<keyof typeof Colors, Colors.white | Colors.black>;\n\nconst THEME_TO_COLOR: Record<string, Colors> = {\n  dark: Colors.ultramarine,\n  exclusiveCollection: Colors.ultramarine,\n  coreRange: Colors.lightSand,\n  light: Colors.lightSand,\n  happyToCare: Colors.verdigris,\n  joyview: Colors.wave,\n  urbanOasis: Colors.marygold,\n  yellow: Colors.saffron,\n};\n\nconst COMPLEMENTARY_TEXT_COLOR_CONFIG = {\n  [Colors.lightSand]: 'text-black',\n  [Colors.marygold]: 'text-black',\n  [Colors.saffron]: 'text-black',\n  [Colors.sand]: 'text-black',\n  [Colors.verdigris]: 'text-black',\n  [Colors.white]: 'text-black',\n  [Colors.black]: 'text-white',\n  [Colors.green]: 'text-white',\n  [Colors.lavender]: 'text-white',\n  [Colors.orange]: 'text-white',\n  [Colors.red]: 'text-white',\n  [Colors.sienna]: 'text-white',\n  [Colors.ultramarine]: 'text-white',\n  [Colors.wave]: 'text-white',\n  [Colors.darkGrey]: 'text-white',\n  [Colors.lightGrey]: 'text-black',\n  [Colors.current]: 'text-current',\n} as const satisfies Record<keyof typeof Colors, `text-${string}`>;\n\nconst colorGuard = <T extends Record<string, string>, K extends keyof T>(\n  color: string | K,\n  obj: T,\n): color is K => {\n  return color in obj;\n};\n\nexport const getBorderColor = (color: string): `border-${string}` => {\n  if (colorGuard(color, BORDER_COLORS)) {\n    return BORDER_COLORS[color];\n  }\n\n  return `border-${color}`;\n};\n\nexport const getBgColor = (color: string): `bg-${string}` => {\n  if (colorGuard(color, BG_COLORS)) {\n    return BG_COLORS[color];\n  }\n\n  return `bg-${color}`;\n};\n\nexport const getTextColor = (color: string): `text-${string}` => {\n  if (colorGuard(color, TEXT_COLORS)) {\n    return TEXT_COLORS[color];\n  }\n\n  return `text-${color}`;\n};\n\nexport const getGradientToColor = (color: string): `to-${string}` => {\n  if (colorGuard(color, TO_COLORS)) {\n    return TO_COLORS[color];\n  }\n\n  return `to-${color}`;\n};\n\nexport const getComplementaryTextColor = (color: string): `text-${string}` => {\n  return COMPLEMENTARY_TEXT_COLOR_CONFIG[color as Colors] || 'text-white';\n};\n\nexport const getComplementaryColor = (color: string): Colors => {\n  return COMPLEMENTARY_COLORS[color as Colors] || 'white';\n};\n\nexport const getThemeColor = (theme: Theme): Colors => {\n  return THEME_TO_COLOR[theme] || theme;\n};\n"],"mappings":"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"}
+{"version":3,"file":"colors.js","names":[],"sources":["../../../../lib/ui/helpers/colors/colors.ts"],"sourcesContent":["import type { Theme } from '../../types/Theme';\n\nexport enum Colors {\n  black = 'black',\n  darkGrey = 'darkGrey',\n  green = 'green',\n  lavender = 'lavender',\n  lightGrey = 'lightGrey',\n  lightSand = 'lightSand',\n  marygold = 'marygold',\n  orange = 'orange',\n  pearl = 'pearl',\n  red = 'red',\n  saffron = 'saffron',\n  sand = 'sand',\n  sienna = 'sienna',\n  ultramarine = 'ultramarine',\n  verdigris = 'verdigris',\n  wave = 'wave',\n  white = 'white',\n  current = 'current',\n}\n\nconst BORDER_COLORS = {\n  [Colors.black]: 'border-black',\n  [Colors.darkGrey]: 'border-darkGrey',\n  [Colors.green]: 'border-green',\n  [Colors.lavender]: 'border-lavender',\n  [Colors.lightGrey]: 'border-lightGrey',\n  [Colors.lightSand]: 'border-lightSand',\n  [Colors.marygold]: 'border-marygold',\n  [Colors.orange]: 'border-orange',\n  [Colors.red]: 'border-red',\n  [Colors.saffron]: 'border-saffron',\n  [Colors.sand]: 'border-sand',\n  [Colors.sienna]: 'border-sienna',\n  [Colors.ultramarine]: 'border-ultramarine',\n  [Colors.verdigris]: 'border-verdigris',\n  [Colors.wave]: 'border-wave',\n  [Colors.white]: 'border-white',\n  [Colors.current]: 'border-current',\n} as const satisfies Record<string, `border-${string}`>;\n\nexport type BorderColor = keyof typeof BORDER_COLORS;\n\nconst BG_COLORS = {\n  [Colors.black]: 'bg-black',\n  [Colors.darkGrey]: 'bg-darkGrey',\n  [Colors.green]: 'bg-green',\n  [Colors.lavender]: 'bg-lavender',\n  [Colors.lightGrey]: 'bg-lightGrey',\n  [Colors.lightSand]: 'bg-lightSand',\n  [Colors.marygold]: 'bg-marygold',\n  [Colors.orange]: 'bg-orange',\n  [Colors.pearl]: 'bg-pearl',\n  [Colors.red]: 'bg-red',\n  [Colors.saffron]: 'bg-saffron',\n  [Colors.sand]: 'bg-sand',\n  [Colors.sienna]: 'bg-sienna',\n  [Colors.ultramarine]: 'bg-ultramarine',\n  [Colors.verdigris]: 'bg-verdigris',\n  [Colors.wave]: 'bg-wave',\n  [Colors.white]: 'bg-white',\n  [Colors.current]: 'bg-current',\n} as const satisfies Record<Colors, `bg-${string}`>;\n\nexport type BgColor = keyof typeof BG_COLORS;\n\nconst TEXT_COLORS = {\n  [Colors.black]: 'text-black',\n  [Colors.green]: 'text-green',\n  [Colors.lavender]: 'text-lavender',\n  [Colors.lightSand]: 'text-lightSand',\n  [Colors.marygold]: 'text-marygold',\n  [Colors.orange]: 'text-orange',\n  [Colors.pearl]: 'text-pearl',\n  [Colors.red]: 'text-red',\n  [Colors.saffron]: 'text-saffron',\n  [Colors.sand]: 'text-sand',\n  [Colors.sienna]: 'text-sienna',\n  [Colors.ultramarine]: 'text-ultramarine',\n  [Colors.verdigris]: 'text-verdigris',\n  [Colors.wave]: 'text-wave',\n  [Colors.white]: 'text-white',\n  [Colors.darkGrey]: 'text-darkGrey',\n  [Colors.lightGrey]: 'text-lightGrey',\n  [Colors.current]: 'text-current',\n} as const satisfies Record<Colors, `text-${string}`>;\n\nexport type TextColor = keyof typeof TEXT_COLORS;\n\nconst TO_COLORS = {\n  [Colors.black]: `to-black`,\n  [Colors.green]: `to-green`,\n  [Colors.lavender]: `to-lavender`,\n  [Colors.lightSand]: `to-lightSand`,\n  [Colors.marygold]: `to-marygold`,\n  [Colors.orange]: `to-orange`,\n  [Colors.pearl]: `to-pearl`,\n  [Colors.red]: `to-red`,\n  [Colors.saffron]: `to-saffron`,\n  [Colors.sand]: `to-sand`,\n  [Colors.sienna]: `to-sienna`,\n  [Colors.ultramarine]: `to-ultramarine`,\n  [Colors.verdigris]: `to-verdigris`,\n  [Colors.wave]: `to-wave`,\n  [Colors.white]: `to-white`,\n  [Colors.darkGrey]: `to-darkGrey`,\n  [Colors.lightGrey]: `to-lightGrey`,\n  [Colors.current]: `to-current`,\n} as const satisfies Record<keyof typeof Colors, `to-${string}`>;\n\nexport type ToColor = keyof typeof TO_COLORS;\n\nconst COMPLEMENTARY_COLORS = {\n  [Colors.lightSand]: Colors.black,\n  [Colors.marygold]: Colors.black,\n  [Colors.saffron]: Colors.black,\n  [Colors.sand]: Colors.black,\n  [Colors.verdigris]: Colors.black,\n  [Colors.white]: Colors.black,\n  [Colors.pearl]: Colors.black,\n  [Colors.black]: Colors.white,\n  [Colors.green]: Colors.white,\n  [Colors.lavender]: Colors.white,\n  [Colors.orange]: Colors.white,\n  [Colors.red]: Colors.white,\n  [Colors.sienna]: Colors.white,\n  [Colors.ultramarine]: Colors.white,\n  [Colors.wave]: Colors.white,\n  [Colors.darkGrey]: Colors.white,\n  [Colors.lightGrey]: Colors.black,\n  [Colors.current]: Colors.white,\n} as const satisfies Record<keyof typeof Colors, Colors.white | Colors.black>;\n\nconst THEME_TO_COLOR: Record<string, Colors> = {\n  dark: Colors.ultramarine,\n  exclusiveCollection: Colors.ultramarine,\n  coreRange: Colors.lightSand,\n  light: Colors.lightSand,\n  happyToCare: Colors.verdigris,\n  joyview: Colors.wave,\n  urbanOasis: Colors.marygold,\n  yellow: Colors.saffron,\n};\n\nconst COMPLEMENTARY_TEXT_COLOR_CONFIG = {\n  [Colors.lightSand]: 'text-black',\n  [Colors.marygold]: 'text-black',\n  [Colors.saffron]: 'text-black',\n  [Colors.sand]: 'text-black',\n  [Colors.verdigris]: 'text-black',\n  [Colors.white]: 'text-black',\n  [Colors.black]: 'text-white',\n  [Colors.green]: 'text-white',\n  [Colors.lavender]: 'text-white',\n  [Colors.orange]: 'text-white',\n  [Colors.pearl]: 'text-white',\n  [Colors.red]: 'text-white',\n  [Colors.sienna]: 'text-white',\n  [Colors.ultramarine]: 'text-white',\n  [Colors.wave]: 'text-white',\n  [Colors.darkGrey]: 'text-white',\n  [Colors.lightGrey]: 'text-black',\n  [Colors.current]: 'text-current',\n} as const satisfies Record<keyof typeof Colors, `text-${string}`>;\n\nconst colorGuard = <T extends Record<string, string>, K extends keyof T>(\n  color: string | K,\n  obj: T,\n): color is K => {\n  return color in obj;\n};\n\nexport const getBorderColor = (color: string): `border-${string}` => {\n  if (colorGuard(color, BORDER_COLORS)) {\n    return BORDER_COLORS[color];\n  }\n\n  return `border-${color}`;\n};\n\nexport const getBgColor = (color: string): `bg-${string}` => {\n  if (colorGuard(color, BG_COLORS)) {\n    return BG_COLORS[color];\n  }\n\n  return `bg-${color}`;\n};\n\nexport const getTextColor = (color: string): `text-${string}` => {\n  if (colorGuard(color, TEXT_COLORS)) {\n    return TEXT_COLORS[color];\n  }\n\n  return `text-${color}`;\n};\n\nexport const getGradientToColor = (color: string): `to-${string}` => {\n  if (colorGuard(color, TO_COLORS)) {\n    return TO_COLORS[color];\n  }\n\n  return `to-${color}`;\n};\n\nexport const getComplementaryTextColor = (color: string): `text-${string}` => {\n  return COMPLEMENTARY_TEXT_COLOR_CONFIG[color as Colors] || 'text-white';\n};\n\nexport const getComplementaryColor = (color: string): Colors => {\n  return COMPLEMENTARY_COLORS[color as Colors] || 'white';\n};\n\nexport const getThemeColor = (theme: Theme): Colors => {\n  return THEME_TO_COLOR[theme] || theme;\n};\n"],"mappings":"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"}

package/ui/helpers/phone/defaultPrefixes.js

@@ -1,123 +1,123 @@
 //#region lib/ui/helpers/phone/defaultPrefixes.ts
 var e = [
+	{
+		code: "+33",
+		label: "Fra +33",
+		country: "FR"
+	},
 	{
 		code: "+1",
-		label: "US/Canada (+1)",
+		label: "USA +1",
 		country: "US"
 	},
 	{
 		code: "+44",
-		label: "UK (+44)",
+		label: "UK +44",
 		country: "GB"
 	},
-	{
-		code: "+33",
-		label: "France (+33)",
-		country: "FR"
-	},
 	{
 		code: "+49",
-		label: "Germany (+49)",
+		label: "Ger +49",
 		country: "DE"
 	},
 	{
 		code: "+39",
-		label: "Italy (+39)",
+		label: "Ita +39",
 		country: "IT"
 	},
 	{
 		code: "+34",
-		label: "Spain (+34)",
+		label: "Spn +34",
 		country: "ES"
 	},
 	{
 		code: "+86",
-		label: "China (+86)",
+		label: "Chn +86",
 		country: "CN"
 	},
 	{
 		code: "+91",
-		label: "India (+91)",
+		label: "Ind +91",
 		country: "IN"
 	},
 	{
 		code: "+81",
-		label: "Japan (+81)",
+		label: "JP +81",
 		country: "JP"
 	},
 	{
 		code: "+82",
-		label: "South Korea (+82)",
+		label: "Kr +82",
 		country: "KR"
 	},
 	{
 		code: "+7",
-		label: "Russia (+7)",
+		label: "Rus +7",
 		country: "RU"
 	},
 	{
 		code: "+61",
-		label: "Australia (+61)",
+		label: "Aus +61",
 		country: "AU"
 	},
 	{
 		code: "+55",
-		label: "Brazil (+55)",
+		label: "Bra +55",
 		country: "BR"
 	},
 	{
 		code: "+52",
-		label: "Mexico (+52)",
+		label: "Mex +52",
 		country: "MX"
 	},
 	{
 		code: "+31",
-		label: "Netherlands (+31)",
+		label: "NL +31",
 		country: "NL"
 	},
 	{
 		code: "+46",
-		label: "Sweden (+46)",
+		label: "Swe +46",
 		country: "SE"
 	},
 	{
 		code: "+41",
-		label: "Switzerland (+41)",
+		label: "Swi +41",
 		country: "CH"
 	},
 	{
 		code: "+32",
-		label: "Belgium (+32)",
+		label: "Bel +32",
 		country: "BE"
 	},
 	{
 		code: "+48",
-		label: "Poland (+48)",
+		label: "Pol +48",
 		country: "PL"
 	},
 	{
 		code: "+351",
-		label: "Portugal (+351)",
+		label: "Por +351",
 		country: "PT"
 	},
 	{
 		code: "+30",
-		label: "Greece (+30)",
+		label: "Gre +30",
 		country: "GR"
 	},
 	{
 		code: "+47",
-		label: "Norway (+47)",
+		label: "Nor +47",
 		country: "NO"
 	},
 	{
 		code: "+45",
-		label: "Denmark (+45)",
+		label: "Den +45",
 		country: "DK"
 	},
 	{
 		code: "+358",
-		label: "Finland (+358)",
+		label: "Fin +358",
 		country: "FI"
 	}
 ];

package/ui/helpers/phone/defaultPrefixes.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultPrefixes.js","names":[],"sources":["../../../../lib/ui/helpers/phone/defaultPrefixes.ts"],"sourcesContent":["/**\n * Default phone number prefixes for common countries\n */\n\nexport interface PhonePrefix {\n  code: string;\n  label?: string;\n  country?: string;\n}\n\n/**\n * List of common country phone prefixes\n * Sorted by popularity/usage frequency\n */\nexport const DEFAULT_PHONE_PREFIXES: PhonePrefix[] = [\n  { code: '+1', label: 'US/Canada (+1)', country: 'US' },\n  { code: '+44', label: 'UK (+44)', country: 'GB' },\n  { code: '+33', label: 'France (+33)', country: 'FR' },\n  { code: '+49', label: 'Germany (+49)', country: 'DE' },\n  { code: '+39', label: 'Italy (+39)', country: 'IT' },\n  { code: '+34', label: 'Spain (+34)', country: 'ES' },\n  { code: '+86', label: 'China (+86)', country: 'CN' },\n  { code: '+91', label: 'India (+91)', country: 'IN' },\n  { code: '+81', label: 'Japan (+81)', country: 'JP' },\n  { code: '+82', label: 'South Korea (+82)', country: 'KR' },\n  { code: '+7', label: 'Russia (+7)', country: 'RU' },\n  { code: '+61', label: 'Australia (+61)', country: 'AU' },\n  { code: '+55', label: 'Brazil (+55)', country: 'BR' },\n  { code: '+52', label: 'Mexico (+52)', country: 'MX' },\n  { code: '+31', label: 'Netherlands (+31)', country: 'NL' },\n  { code: '+46', label: 'Sweden (+46)', country: 'SE' },\n  { code: '+41', label: 'Switzerland (+41)', country: 'CH' },\n  { code: '+32', label: 'Belgium (+32)', country: 'BE' },\n  { code: '+48', label: 'Poland (+48)', country: 'PL' },\n  { code: '+351', label: 'Portugal (+351)', country: 'PT' },\n  { code: '+30', label: 'Greece (+30)', country: 'GR' },\n  { code: '+47', label: 'Norway (+47)', country: 'NO' },\n  { code: '+45', label: 'Denmark (+45)', country: 'DK' },\n  { code: '+358', label: 'Finland (+358)', country: 'FI' },\n];\n"],"mappings":";AAcA,IAAa,IAAwC;CACnD;EAAE,MAAM;EAAM,OAAO;EAAkB,SAAS;EAAM;CACtD;EAAE,MAAM;EAAO,OAAO;EAAY,SAAS;EAAM;CACjD;EAAE,MAAM;EAAO,OAAO;EAAgB,SAAS;EAAM;CACrD;EAAE,MAAM;EAAO,OAAO;EAAiB,SAAS;EAAM;CACtD;EAAE,MAAM;EAAO,OAAO;EAAe,SAAS;EAAM;CACpD;EAAE,MAAM;EAAO,OAAO;EAAe,SAAS;EAAM;CACpD;EAAE,MAAM;EAAO,OAAO;EAAe,SAAS;EAAM;CACpD;EAAE,MAAM;EAAO,OAAO;EAAe,SAAS;EAAM;CACpD;EAAE,MAAM;EAAO,OAAO;EAAe,SAAS;EAAM;CACpD;EAAE,MAAM;EAAO,OAAO;EAAqB,SAAS;EAAM;CAC1D;EAAE,MAAM;EAAM,OAAO;EAAe,SAAS;EAAM;CACnD;EAAE,MAAM;EAAO,OAAO;EAAmB,SAAS;EAAM;CACxD;EAAE,MAAM;EAAO,OAAO;EAAgB,SAAS;EAAM;CACrD;EAAE,MAAM;EAAO,OAAO;EAAgB,SAAS;EAAM;CACrD;EAAE,MAAM;EAAO,OAAO;EAAqB,SAAS;EAAM;CAC1D;EAAE,MAAM;EAAO,OAAO;EAAgB,SAAS;EAAM;CACrD;EAAE,MAAM;EAAO,OAAO;EAAqB,SAAS;EAAM;CAC1D;EAAE,MAAM;EAAO,OAAO;EAAiB,SAAS;EAAM;CACtD;EAAE,MAAM;EAAO,OAAO;EAAgB,SAAS;EAAM;CACrD;EAAE,MAAM;EAAQ,OAAO;EAAmB,SAAS;EAAM;CACzD;EAAE,MAAM;EAAO,OAAO;EAAgB,SAAS;EAAM;CACrD;EAAE,MAAM;EAAO,OAAO;EAAgB,SAAS;EAAM;CACrD;EAAE,MAAM;EAAO,OAAO;EAAiB,SAAS;EAAM;CACtD;EAAE,MAAM;EAAQ,OAAO;EAAkB,SAAS;EAAM;CACzD"}
+{"version":3,"file":"defaultPrefixes.js","names":[],"sources":["../../../../lib/ui/helpers/phone/defaultPrefixes.ts"],"sourcesContent":["/**\n * Default phone number prefixes for common countries\n */\n\nexport interface PhonePrefix {\n  code: string;\n  label?: string;\n  country?: string;\n}\n\n/**\n * List of common country phone prefixes\n * Sorted by popularity/usage frequency\n */\nexport const DEFAULT_PHONE_PREFIXES: PhonePrefix[] = [\n  { code: '+33', label: 'Fra +33', country: 'FR' },\n  { code: '+1', label: 'USA +1', country: 'US' },\n  { code: '+44', label: 'UK +44', country: 'GB' },\n  { code: '+49', label: 'Ger +49', country: 'DE' },\n  { code: '+39', label: 'Ita +39', country: 'IT' },\n  { code: '+34', label: 'Spn +34', country: 'ES' },\n  { code: '+86', label: 'Chn +86', country: 'CN' },\n  { code: '+91', label: 'Ind +91', country: 'IN' },\n  { code: '+81', label: 'JP +81', country: 'JP' },\n  { code: '+82', label: 'Kr +82', country: 'KR' },\n  { code: '+7', label: 'Rus +7', country: 'RU' },\n  { code: '+61', label: 'Aus +61', country: 'AU' },\n  { code: '+55', label: 'Bra +55', country: 'BR' },\n  { code: '+52', label: 'Mex +52', country: 'MX' },\n  { code: '+31', label: 'NL +31', country: 'NL' },\n  { code: '+46', label: 'Swe +46', country: 'SE' },\n  { code: '+41', label: 'Swi +41', country: 'CH' },\n  { code: '+32', label: 'Bel +32', country: 'BE' },\n  { code: '+48', label: 'Pol +48', country: 'PL' },\n  { code: '+351', label: 'Por +351', country: 'PT' },\n  { code: '+30', label: 'Gre +30', country: 'GR' },\n  { code: '+47', label: 'Nor +47', country: 'NO' },\n  { code: '+45', label: 'Den +45', country: 'DK' },\n  { code: '+358', label: 'Fin +358', country: 'FI' },\n];\n"],"mappings":";AAcA,IAAa,IAAwC;CACnD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAM,OAAO;EAAU,SAAS;EAAM;CAC9C;EAAE,MAAM;EAAO,OAAO;EAAU,SAAS;EAAM;CAC/C;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAU,SAAS;EAAM;CAC/C;EAAE,MAAM;EAAO,OAAO;EAAU,SAAS;EAAM;CAC/C;EAAE,MAAM;EAAM,OAAO;EAAU,SAAS;EAAM;CAC9C;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAU,SAAS;EAAM;CAC/C;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAQ,OAAO;EAAY,SAAS;EAAM;CAClD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAO,OAAO;EAAW,SAAS;EAAM;CAChD;EAAE,MAAM;EAAQ,OAAO;EAAY,SAAS;EAAM;CACnD"}

package/ui/helpers/phone/formatters.d.ts

@@ -44,3 +44,14 @@ export declare function getCursorPosition(oldValue: string, newValue: string, ol
  * @returns Number of '#' characters in pattern
  */
 export declare function countDigitPlaceholders(pattern: string): number;
+export declare function getLiteralPrefixInfo(pattern: string): {
+    literalPrefix: string;
+    literalPrefixDigits: string;
+};
+export declare function stripLiteralPrefix(allDigits: string, literalPrefixDigits: string): string;
+export declare function calculateCursorPosition(digitsBeforeCursor: number, formatted: string, literalPrefixDigits: string): number;
+export declare function formatPhoneDigits(inputValue: string, pattern: string, cursorPosition: number): {
+    formatted: string;
+    nextCursor: number;
+    literalPrefixDigits: string;
+} | null;

package/ui/helpers/phone/formatters.js

@@ -27,7 +27,38 @@ function n(t, n, r) {
 function r(e) {
 	return (e.match(/#/g) || []).length;
 }
+function i(t) {
+	let n = t.indexOf("#"), r = n > 0 ? t.substring(0, n) : "";
+	return {
+		literalPrefix: r,
+		literalPrefixDigits: e(r)
+	};
+}
+function a(e, t) {
+	return t.length > 0 && e.startsWith(t) ? e.substring(t.length) : e;
+}
+function o(e, t, n) {
+	let r = 0, i = 0;
+	for (let a = 0; a < t.length; a++) if (/\d/.test(t[a])) {
+		if (i < n.length) {
+			i++;
+			continue;
+		}
+		if (r++, r === e) return a + 1;
+	}
+	return t.length;
+}
+function s(n, s, c) {
+	let { literalPrefixDigits: l } = i(s), u = a(e(n), l), d = r(s);
+	if (u.length > d) return null;
+	let f = a(e(n.substring(0, c)), l).length, p = t(u, s);
+	return {
+		formatted: p,
+		nextCursor: o(f, p, l),
+		literalPrefixDigits: l
+	};
+}
 //#endregion
-export { r as countDigitPlaceholders, e as extractDigits, t as formatWithPattern, n as getCursorPosition };
+export { o as calculateCursorPosition, r as countDigitPlaceholders, e as extractDigits, s as formatPhoneDigits, t as formatWithPattern, n as getCursorPosition, i as getLiteralPrefixInfo, a as stripLiteralPrefix };
 
 //# sourceMappingURL=formatters.js.map

package/ui/helpers/phone/formatters.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","names":[],"sources":["../../../../lib/ui/helpers/phone/formatters.ts"],"sourcesContent":["/**\n * Phone number formatting utilities\n * Provides pattern-based formatting without external dependencies\n */\n\n/**\n * Extract only digits from a string\n * @param value - Input string that may contain non-digit characters\n * @returns String containing only digits (0-9)\n */\nexport function extractDigits(value: string): string {\n  return value.replace(/\\D/g, '');\n}\n\n/**\n * Apply a pattern to input digits\n * Pattern uses '#' as placeholder for digits, other characters are literals\n *\n * @example\n * formatWithPattern(\"5551234567\", \"+1 (###) ###-####\")\n * // returns \"+1 (555) 123-4567\"\n *\n * @param value - String containing the digits to format\n * @param pattern - Format pattern where '#' represents a digit placeholder\n * @returns Formatted string according to pattern\n */\nexport function formatWithPattern(value: string, pattern: string): string {\n  const digits = extractDigits(value);\n  if (digits.length === 0) return '';\n\n  let digitIndex = 0;\n  let result = '';\n  let started = false;\n\n  for (let i = 0; i < pattern.length; i++) {\n    if (pattern[i] === '#') {\n      if (digitIndex < digits.length) {\n        // Add any leading literals before the first digit\n        if (!started) {\n          // Add all literals from start until this digit\n          for (let j = 0; j < i; j++) {\n            if (pattern[j] !== '#') {\n              result += pattern[j];\n            }\n          }\n          started = true;\n        }\n\n        result += digits[digitIndex];\n        digitIndex++;\n      } else {\n        // No more digits available\n        break;\n      }\n    } else if (started) {\n      // Literal character after we've started\n      result += pattern[i];\n    }\n  }\n\n  return result;\n}\n\n/**\n * Calculate cursor position after formatting\n * Critical for UX - ensures cursor stays in correct position relative to digits\n *\n * @example\n * // User types \"4\" at position: \"1|23\" → \"1423\"\n * // After formatting: \"(14) 23\"\n * // Cursor should be: \"(14|) 23\" (after the 4, not at end)\n *\n * @param oldValue - Previous input value\n * @param newValue - New formatted value\n * @param oldCursor - Cursor position before formatting\n * @returns New cursor position after formatting\n */\nexport function getCursorPosition(oldValue: string, newValue: string, oldCursor: number): number {\n  // Count digits before cursor in old value\n  const digitsBeforeCursor = extractDigits(oldValue.substring(0, oldCursor)).length;\n\n  // Find position in new value where we have the same number of digits\n  let digitCount = 0;\n  let newCursor = 0;\n\n  for (let i = 0; i < newValue.length; i++) {\n    if (/\\d/.test(newValue[i])) {\n      digitCount++;\n      if (digitCount === digitsBeforeCursor) {\n        newCursor = i + 1;\n        break;\n      }\n    }\n  }\n\n  // If we didn't find enough digits, cursor goes to end\n  if (digitCount < digitsBeforeCursor) {\n    newCursor = newValue.length;\n  }\n\n  return newCursor;\n}\n\n/**\n * Count digit placeholders in a pattern\n * Used to determine maximum number of digits allowed\n *\n * @param pattern - Format pattern\n * @returns Number of '#' characters in pattern\n */\nexport function countDigitPlaceholders(pattern: string): number {\n  return (pattern.match(/#/g) || []).length;\n}\n"],"mappings":";AAUA,SAAgB,EAAc,GAAuB;AACnD,QAAO,EAAM,QAAQ,OAAO,GAAG;;AAejC,SAAgB,EAAkB,GAAe,GAAyB;CACxE,IAAM,IAAS,EAAc,EAAM;AACnC,KAAI,EAAO,WAAW,EAAG,QAAO;CAEhC,IAAI,IAAa,GACb,IAAS,IACT,IAAU;AAEd,MAAK,IAAI,IAAI,GAAG,IAAI,EAAQ,QAAQ,IAClC,KAAI,EAAQ,OAAO,IACjB,KAAI,IAAa,EAAO,QAAQ;AAE9B,MAAI,CAAC,GAAS;AAEZ,QAAK,IAAI,IAAI,GAAG,IAAI,GAAG,IACrB,CAAI,EAAQ,OAAO,QACjB,KAAU,EAAQ;AAGtB,OAAU;;AAIZ,EADA,KAAU,EAAO,IACjB;OAGA;MAEO,MAET,KAAU,EAAQ;AAItB,QAAO;;AAiBT,SAAgB,EAAkB,GAAkB,GAAkB,GAA2B;CAE/F,IAAM,IAAqB,EAAc,EAAS,UAAU,GAAG,EAAU,CAAC,CAAC,QAGvE,IAAa,GACb,IAAY;AAEhB,MAAK,IAAI,IAAI,GAAG,IAAI,EAAS,QAAQ,IACnC,KAAI,KAAK,KAAK,EAAS,GAAG,KACxB,KACI,MAAe,IAAoB;AACrC,MAAY,IAAI;AAChB;;AAUN,QAJI,IAAa,MACf,IAAY,EAAS,SAGhB;;AAUT,SAAgB,EAAuB,GAAyB;AAC9D,SAAQ,EAAQ,MAAM,KAAK,IAAI,EAAE,EAAE"}
+{"version":3,"file":"formatters.js","names":[],"sources":["../../../../lib/ui/helpers/phone/formatters.ts"],"sourcesContent":["/**\n * Phone number formatting utilities\n * Provides pattern-based formatting without external dependencies\n */\n\n/**\n * Extract only digits from a string\n * @param value - Input string that may contain non-digit characters\n * @returns String containing only digits (0-9)\n */\nexport function extractDigits(value: string): string {\n  return value.replace(/\\D/g, '');\n}\n\n/**\n * Apply a pattern to input digits\n * Pattern uses '#' as placeholder for digits, other characters are literals\n *\n * @example\n * formatWithPattern(\"5551234567\", \"+1 (###) ###-####\")\n * // returns \"+1 (555) 123-4567\"\n *\n * @param value - String containing the digits to format\n * @param pattern - Format pattern where '#' represents a digit placeholder\n * @returns Formatted string according to pattern\n */\nexport function formatWithPattern(value: string, pattern: string): string {\n  const digits = extractDigits(value);\n  if (digits.length === 0) return '';\n\n  let digitIndex = 0;\n  let result = '';\n  let started = false;\n\n  for (let i = 0; i < pattern.length; i++) {\n    if (pattern[i] === '#') {\n      if (digitIndex < digits.length) {\n        // Add any leading literals before the first digit\n        if (!started) {\n          // Add all literals from start until this digit\n          for (let j = 0; j < i; j++) {\n            if (pattern[j] !== '#') {\n              result += pattern[j];\n            }\n          }\n          started = true;\n        }\n\n        result += digits[digitIndex];\n        digitIndex++;\n      } else {\n        // No more digits available\n        break;\n      }\n    } else if (started) {\n      // Literal character after we've started\n      result += pattern[i];\n    }\n  }\n\n  return result;\n}\n\n/**\n * Calculate cursor position after formatting\n * Critical for UX - ensures cursor stays in correct position relative to digits\n *\n * @example\n * // User types \"4\" at position: \"1|23\" → \"1423\"\n * // After formatting: \"(14) 23\"\n * // Cursor should be: \"(14|) 23\" (after the 4, not at end)\n *\n * @param oldValue - Previous input value\n * @param newValue - New formatted value\n * @param oldCursor - Cursor position before formatting\n * @returns New cursor position after formatting\n */\nexport function getCursorPosition(oldValue: string, newValue: string, oldCursor: number): number {\n  // Count digits before cursor in old value\n  const digitsBeforeCursor = extractDigits(oldValue.substring(0, oldCursor)).length;\n\n  // Find position in new value where we have the same number of digits\n  let digitCount = 0;\n  let newCursor = 0;\n\n  for (let i = 0; i < newValue.length; i++) {\n    if (/\\d/.test(newValue[i])) {\n      digitCount++;\n      if (digitCount === digitsBeforeCursor) {\n        newCursor = i + 1;\n        break;\n      }\n    }\n  }\n\n  // If we didn't find enough digits, cursor goes to end\n  if (digitCount < digitsBeforeCursor) {\n    newCursor = newValue.length;\n  }\n\n  return newCursor;\n}\n\n/**\n * Count digit placeholders in a pattern\n * Used to determine maximum number of digits allowed\n *\n * @param pattern - Format pattern\n * @returns Number of '#' characters in pattern\n */\nexport function countDigitPlaceholders(pattern: string): number {\n  return (pattern.match(/#/g) || []).length;\n}\n\nexport function getLiteralPrefixInfo(pattern: string): {\n  literalPrefix: string;\n  literalPrefixDigits: string;\n} {\n  const firstHashIndex = pattern.indexOf('#');\n  const literalPrefix = firstHashIndex > 0 ? pattern.substring(0, firstHashIndex) : '';\n  const literalPrefixDigits = extractDigits(literalPrefix);\n  return { literalPrefix, literalPrefixDigits };\n}\n\nexport function stripLiteralPrefix(allDigits: string, literalPrefixDigits: string): string {\n  if (literalPrefixDigits.length > 0 && allDigits.startsWith(literalPrefixDigits)) {\n    return allDigits.substring(literalPrefixDigits.length);\n  }\n  return allDigits;\n}\n\nexport function calculateCursorPosition(\n  digitsBeforeCursor: number,\n  formatted: string,\n  literalPrefixDigits: string,\n): number {\n  let digitCount = 0;\n  let skippedPrefixDigits = 0;\n\n  for (let i = 0; i < formatted.length; i++) {\n    if (/\\d/.test(formatted[i])) {\n      if (skippedPrefixDigits < literalPrefixDigits.length) {\n        skippedPrefixDigits++;\n        continue;\n      }\n      digitCount++;\n      if (digitCount === digitsBeforeCursor) {\n        return i + 1;\n      }\n    }\n  }\n\n  return formatted.length;\n}\n\nexport function formatPhoneDigits(\n  inputValue: string,\n  pattern: string,\n  cursorPosition: number,\n): { formatted: string; nextCursor: number; literalPrefixDigits: string } | null {\n  const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n  const allDigits = stripLiteralPrefix(extractDigits(inputValue), literalPrefixDigits);\n  const maxDigits = countDigitPlaceholders(pattern);\n  if (allDigits.length > maxDigits) return null;\n\n  const digitsBeforeCursorInInput = stripLiteralPrefix(\n    extractDigits(inputValue.substring(0, cursorPosition)),\n    literalPrefixDigits,\n  );\n  const digitsBeforeCursor = digitsBeforeCursorInInput.length;\n  const formatted = formatWithPattern(allDigits, pattern);\n  const nextCursor = calculateCursorPosition(digitsBeforeCursor, formatted, literalPrefixDigits);\n  return { formatted, nextCursor, literalPrefixDigits };\n}\n"],"mappings":";AAUA,SAAgB,EAAc,GAAuB;AACnD,QAAO,EAAM,QAAQ,OAAO,GAAG;;AAejC,SAAgB,EAAkB,GAAe,GAAyB;CACxE,IAAM,IAAS,EAAc,EAAM;AACnC,KAAI,EAAO,WAAW,EAAG,QAAO;CAEhC,IAAI,IAAa,GACb,IAAS,IACT,IAAU;AAEd,MAAK,IAAI,IAAI,GAAG,IAAI,EAAQ,QAAQ,IAClC,KAAI,EAAQ,OAAO,IACjB,KAAI,IAAa,EAAO,QAAQ;AAE9B,MAAI,CAAC,GAAS;AAEZ,QAAK,IAAI,IAAI,GAAG,IAAI,GAAG,IACrB,CAAI,EAAQ,OAAO,QACjB,KAAU,EAAQ;AAGtB,OAAU;;AAIZ,EADA,KAAU,EAAO,IACjB;OAGA;MAEO,MAET,KAAU,EAAQ;AAItB,QAAO;;AAiBT,SAAgB,EAAkB,GAAkB,GAAkB,GAA2B;CAE/F,IAAM,IAAqB,EAAc,EAAS,UAAU,GAAG,EAAU,CAAC,CAAC,QAGvE,IAAa,GACb,IAAY;AAEhB,MAAK,IAAI,IAAI,GAAG,IAAI,EAAS,QAAQ,IACnC,KAAI,KAAK,KAAK,EAAS,GAAG,KACxB,KACI,MAAe,IAAoB;AACrC,MAAY,IAAI;AAChB;;AAUN,QAJI,IAAa,MACf,IAAY,EAAS,SAGhB;;AAUT,SAAgB,EAAuB,GAAyB;AAC9D,SAAQ,EAAQ,MAAM,KAAK,IAAI,EAAE,EAAE;;AAGrC,SAAgB,EAAqB,GAGnC;CACA,IAAM,IAAiB,EAAQ,QAAQ,IAAI,EACrC,IAAgB,IAAiB,IAAI,EAAQ,UAAU,GAAG,EAAe,GAAG;AAElF,QAAO;EAAE;EAAe,qBADI,EAAc,EAAc;EACX;;AAG/C,SAAgB,EAAmB,GAAmB,GAAqC;AAIzF,QAHI,EAAoB,SAAS,KAAK,EAAU,WAAW,EAAoB,GACtE,EAAU,UAAU,EAAoB,OAAO,GAEjD;;AAGT,SAAgB,EACd,GACA,GACA,GACQ;CACR,IAAI,IAAa,GACb,IAAsB;AAE1B,MAAK,IAAI,IAAI,GAAG,IAAI,EAAU,QAAQ,IACpC,KAAI,KAAK,KAAK,EAAU,GAAG,EAAE;AAC3B,MAAI,IAAsB,EAAoB,QAAQ;AACpD;AACA;;AAGF,MADA,KACI,MAAe,EACjB,QAAO,IAAI;;AAKjB,QAAO,EAAU;;AAGnB,SAAgB,EACd,GACA,GACA,GAC+E;CAC/E,IAAM,EAAE,2BAAwB,EAAqB,EAAQ,EACvD,IAAY,EAAmB,EAAc,EAAW,EAAE,EAAoB,EAC9E,IAAY,EAAuB,EAAQ;AACjD,KAAI,EAAU,SAAS,EAAW,QAAO;CAMzC,IAAM,IAJ4B,EAChC,EAAc,EAAW,UAAU,GAAG,EAAe,CAAC,EACtD,EACD,CACoD,QAC/C,IAAY,EAAkB,GAAW,EAAQ;AAEvD,QAAO;EAAE;EAAW,YADD,EAAwB,GAAoB,GAAW,EAAoB;EAC9D;EAAqB"}

package/ui/helpers/phone/index.d.ts

@@ -2,5 +2,5 @@
  * Phone number utilities
  * Provides formatting, validation, and default prefixes for phone number inputs
  */
-export { extractDigits, formatWithPattern, getCursorPosition, countDigitPlaceholders, } from './formatters';
+export { extractDigits, formatWithPattern, getCursorPosition, countDigitPlaceholders, getLiteralPrefixInfo, stripLiteralPrefix, calculateCursorPosition, formatPhoneDigits, } from './formatters';
 export { DEFAULT_PHONE_PREFIXES, type PhonePrefix } from './defaultPrefixes';

package/ui/helpers/phone/index.js

@@ -1,3 +1,3 @@
-import { countDigitPlaceholders as e, extractDigits as t, formatWithPattern as n, getCursorPosition as r } from "./formatters.js";
-import { DEFAULT_PHONE_PREFIXES as i } from "./defaultPrefixes.js";
-export { i as DEFAULT_PHONE_PREFIXES, e as countDigitPlaceholders, t as extractDigits, n as formatWithPattern, r as getCursorPosition };
+import { calculateCursorPosition as e, countDigitPlaceholders as t, extractDigits as n, formatPhoneDigits as r, formatWithPattern as i, getCursorPosition as a, getLiteralPrefixInfo as o, stripLiteralPrefix as s } from "./formatters.js";
+import { DEFAULT_PHONE_PREFIXES as c } from "./defaultPrefixes.js";
+export { c as DEFAULT_PHONE_PREFIXES, e as calculateCursorPosition, t as countDigitPlaceholders, n as extractDigits, r as formatPhoneDigits, i as formatWithPattern, a as getCursorPosition, o as getLiteralPrefixInfo, s as stripLiteralPrefix };

package/ui/hooks/useValue.js

@@ -3,7 +3,7 @@ import { useEffect as e, useState as t } from "react";
 function n({ name: n, initialValue: r, onChange: i, defaultValue: a = "", formatter: o = (e) => e }) {
 	let [s, c] = t(o(r || a));
 	e(() => {
-		r !== void 0 && c(o(r));
+		c(o(r ?? a));
 	}, [r]);
 	function l(e) {
 		e = o(e), c(e), i && i(n, e);

package/ui/hooks/useValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useValue.js","names":[],"sources":["../../../lib/ui/hooks/useValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface UseValueProps<Value = string, InitialValue = Value> {\n  name: string;\n  initialValue?: InitialValue;\n  defaultValue?: Value | string;\n  formatter?: (v: Value) => Value;\n  onChange?: (name: string, value: Value) => void;\n}\n\nexport function useValue<Value = string, InitialValue = Value>({\n  name,\n  initialValue,\n  onChange,\n  defaultValue = '',\n  formatter = (v: Value) => v as unknown as Value,\n}: UseValueProps<Value, InitialValue>) {\n  const [value, setValue] = useState<Value>(formatter((initialValue || defaultValue) as Value));\n\n  useEffect(() => {\n    if (initialValue !== undefined) {\n      setValue(formatter(initialValue as Value));\n    }\n  }, [initialValue]);\n\n  function setNewValue(newValue: Value) {\n    newValue = formatter(newValue);\n    setValue(newValue);\n    if (onChange) onChange(name, newValue);\n  }\n\n  function resetValue() {\n    setValue(defaultValue as Value);\n  }\n\n  return {\n    value,\n    setValue: setNewValue,\n    resetValue,\n  };\n}\n"],"mappings":";;AAUA,SAAgB,EAA+C,EAC7D,SACA,iBACA,aACA,kBAAe,IACf,gBAAa,MAAa,KACW;CACrC,IAAM,CAAC,GAAO,KAAY,EAAgB,EAAW,KAAgB,EAAuB,CAAC;AAE7F,SAAgB;AACd,EAAI,MAAiB,KAAA,KACnB,EAAS,EAAU,EAAsB,CAAC;IAE3C,CAAC,EAAa,CAAC;CAElB,SAAS,EAAY,GAAiB;AAGpC,EAFA,IAAW,EAAU,EAAS,EAC9B,EAAS,EAAS,EACd,KAAU,EAAS,GAAM,EAAS;;CAGxC,SAAS,IAAa;AACpB,IAAS,EAAsB;;AAGjC,QAAO;EACL;EACA,UAAU;EACV;EACD"}
+{"version":3,"file":"useValue.js","names":[],"sources":["../../../lib/ui/hooks/useValue.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport interface UseValueProps<Value = string, InitialValue = Value> {\n  name: string;\n  initialValue?: InitialValue;\n  defaultValue?: Value | string;\n  formatter?: (v: Value) => Value;\n  onChange?: (name: string, value: Value) => void;\n}\n\nexport function useValue<Value = string, InitialValue = Value>({\n  name,\n  initialValue,\n  onChange,\n  defaultValue = '',\n  formatter = (v: Value) => v as unknown as Value,\n}: UseValueProps<Value, InitialValue>) {\n  const [value, setValue] = useState<Value>(formatter((initialValue || defaultValue) as Value));\n\n  useEffect(() => {\n    // Use ?? operator to fallback to defaultValue when initialValue is undefined/null\n    // This ensures the component resets properly when controlled value becomes undefined\n    setValue(formatter((initialValue ?? defaultValue) as Value));\n  }, [initialValue]);\n\n  function setNewValue(newValue: Value) {\n    newValue = formatter(newValue);\n    setValue(newValue);\n    if (onChange) onChange(name, newValue);\n  }\n\n  function resetValue() {\n    setValue(defaultValue as Value);\n  }\n\n  return {\n    value,\n    setValue: setNewValue,\n    resetValue,\n  };\n}\n"],"mappings":";;AAUA,SAAgB,EAA+C,EAC7D,SACA,iBACA,aACA,kBAAe,IACf,gBAAa,MAAa,KACW;CACrC,IAAM,CAAC,GAAO,KAAY,EAAgB,EAAW,KAAgB,EAAuB,CAAC;AAE7F,SAAgB;AAGd,IAAS,EAAW,KAAgB,EAAuB,CAAC;IAC3D,CAAC,EAAa,CAAC;CAElB,SAAS,EAAY,GAAiB;AAGpC,EAFA,IAAW,EAAU,EAAS,EAC9B,EAAS,EAAS,EACd,KAAU,EAAS,GAAM,EAAS;;CAGxC,SAAS,IAAa;AACpB,IAAS,EAAsB;;AAGjC,QAAO;EACL;EACA,UAAU;EACV;EACD"}

package/ui/tabs/Tabs.js

@@ -55,7 +55,7 @@ var m = ({ className: t, compacted: r = !1, selected: i, children: a }) => /* @_
 	let l = { "--active-tab": s };
 	return /* @__PURE__ */ f("div", {
 		"data-name": "TabsHeader",
-		className: e("scrollbar-hidden relative isolate flex max-w-full overflow-x-scroll scroll-smooth py-20", t),
+		className: e("scrollbar-hidden relative isolate flex max-w-full overflow-x-auto scroll-smooth py-20", t),
 		ref: a,
 		children: /* @__PURE__ */ p("div", {
 			role: "tablist",

package/ui/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":[],"sources":["../../../lib/ui/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FunctionComponent,\n  type PropsWithChildren,\n  type RefObject,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nimport { TabsProvider } from '../contexts/TabControl';\nimport {\n  useActiveTab,\n  useActiveTabControl,\n  useRegisterTabControl,\n  useTabDispatch,\n  useTabsUid,\n} from '../hooks/tabControl';\nimport { useKeyboardControls } from '../hooks/useKeyboardControls';\nimport { Select } from '../forms/Select';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n  className?: string;\n  /**\n   * Shrink the spacing between tabs and panels\n   */\n  compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  compacted = false,\n  selected,\n  children,\n}) => {\n  return (\n    <div\n      className={clsx('flex flex-col', className, {\n        'sm:gap-y-20': !compacted,\n      })}\n      data-name=\"Tabs\"\n    >\n      <TabsProvider selected={selected}>{children}</TabsProvider>\n    </div>\n  );\n};\n\ninterface TabsBodyProps {\n  className?: string;\n}\n\nexport const TabsBody: FunctionComponent<PropsWithChildren<TabsBodyProps>> = ({\n  className,\n  children,\n}) => {\n  return (\n    <div data-name=\"TabsBody\" className={clsx('grid grid-rows-1 overflow-hidden', className)}>\n      {children}\n    </div>\n  );\n};\n\ninterface TabPanelProps {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on panel select handler\n   */\n  onSelect?: (context: { value: TabPanelProps['value'] }) => void;\n}\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<TabPanelProps>> = ({\n  value,\n  className,\n  onSelect,\n  children,\n  ...attrs\n}) => {\n  const uid = useTabsUid();\n  const mounted = useRef(false);\n  const tabSelected = useActiveTab();\n  const isActive = tabSelected === value;\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n\n    if (isActive) {\n      onSelect?.({ value });\n    }\n  }, [isActive, value, onSelect]);\n\n  return (\n    <div\n      {...attrs}\n      aria-hidden={!isActive}\n      className={clsx(\n        className,\n        'relative col-start-1 row-start-1 transition-opacity duration-500',\n        {\n          'pointer-events-none z-0 h-0 opacity-0': !isActive,\n          'pointer-events-auto z-1 h-auto opacity-100': isActive,\n        },\n      )}\n      inert={isActive ? undefined : true}\n      tabIndex={isActive ? 0 : -1}\n      id={`TabPanel_${value}_${uid}`}\n      data-name={`TabPanel_${value}`}\n      role=\"tabpanel\"\n      aria-labelledby={`Tab_${value}_${uid}`}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface TabListProps {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<TabListProps>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  useEffect(() => {\n    if (!currentControl?.current || !ref.current) {\n      return;\n    }\n\n    const spacerWidth = spacerRef.current!.offsetWidth ?? 0;\n    const currentRect = currentControl.current.getBoundingClientRect();\n    const containerRect = ref.current!.getBoundingClientRect();\n    const scroll = ref.current!.scrollLeft;\n\n    ref.current.scrollLeft = scroll + (currentRect.left - containerRect.left) - spacerWidth;\n  }, [currentControl]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <div\n      data-name=\"TabsHeader\"\n      className={clsx(\n        'scrollbar-hidden relative isolate flex max-w-full overflow-x-scroll scroll-smooth py-20',\n        className,\n      )}\n      ref={ref}\n    >\n      <div role=\"tablist\" className=\"flex flex-row\" style={style}>\n        <div\n          ref={spacerRef}\n          className={clsx('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={clsx('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport interface TabSelectProps {\n  items: { label: string; value: number }[];\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport const TabSelect: FunctionComponent<TabSelectProps> = ({\n  items,\n  className,\n  'aria-label': ariaLabel = 'Select tab',\n}) => {\n  const activeTab = useActiveTab();\n  const dispatch = useTabDispatch();\n\n  const handleChange = (_name: string, value: string) => {\n    dispatch({ type: 'update', payload: Number(value) });\n  };\n\n  const selectValue = activeTab === -1 ? undefined : activeTab;\n\n  return (\n    <Select\n      value={selectValue?.toString()}\n      onChange={handleChange}\n      name={ariaLabel}\n      className={clsx(className)}\n    >\n      {items.map((item) => (\n        <option key={item.value} value={item.value}>\n          {item.label}\n        </option>\n      ))}\n    </Select>\n  );\n};\n\ninterface TabProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /**\n   * Tab Heading text\n   */\n  label?: string;\n  /**\n   * Tab heading index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onSelect?: (context: { value: TabProps['value']; label: TabProps['label'] }) => void;\n  /**\n   * Heading type\n   * _default: **h2**_\n   */\n  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<TabProps>> = ({\n  as: TagName = 'h2',\n  label,\n  children,\n  value,\n  onSelect,\n  className,\n  ...attr\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const activeTab = useActiveTab();\n  const uid = useTabsUid();\n  const dispatch = useRegisterTabControl({ value, ref: ref as RefObject<HTMLDivElement> });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  const pillStyle = { '--tab-index': value } as CSSProperties;\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onSelect?.({ value, label });\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [label, value, onSelect, activeTab]);\n\n  const start = useCallback(() => {\n    dispatch({ type: 'start' });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: 'end' });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: 'previous' });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: 'next' });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'next' : 'previous' });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'previous' : 'next' });\n  }, [dispatch]);\n\n  const keyboardHandler = useKeyboardControls({\n    start,\n    end,\n    up,\n    down,\n    left,\n    right,\n  });\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const isSpace = e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space';\n      const isEnter = e.key === 'Enter' || e.code === 'Enter';\n\n      if (isActive.current && (isSpace || isEnter)) {\n        e.preventDefault();\n        return;\n      }\n\n      keyboardHandler(e);\n    },\n    [keyboardHandler],\n  );\n\n  const handleClick = () => {\n    if (isActive.current) {\n      return;\n    }\n\n    dispatch({ type: 'update', payload: value });\n  };\n\n  return (\n    <div\n      {...attr}\n      id={attr.id || `Tab_${value}_${uid}`}\n      data-name=\"Tab\"\n      ref={ref}\n      role=\"tab\"\n      aria-selected={isActive.current}\n      aria-controls={`TabPanel_${value}_${uid}`}\n      tabIndex={isActive.current ? 0 : -1}\n      className={clsx(\n        'group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none',\n        {\n          'text-white': isActive.current,\n          'text-black': !isActive.current,\n          'transition-transform active:scale-[1.03]': isActive.current,\n        },\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n    >\n      <TagName\n        className={clsx(\n          'relative inline-block px-20 py-12',\n          'before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)',\n          className,\n        )}\n        {...(!isActive ? { role: 'presentation' } : {})}\n      >\n        <span\n          className={clsx(\n            'tab-focus-pill ease transition-transform/colors',\n            'rounded-pill absolute inset-0 -z-1 duration-300',\n            'bg-black',\n          )}\n          style={pillStyle}\n        />\n        {children ?? label}\n      </TagName>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../lib/ui/tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type FunctionComponent,\n  type PropsWithChildren,\n  type RefObject,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nimport { TabsProvider } from '../contexts/TabControl';\nimport {\n  useActiveTab,\n  useActiveTabControl,\n  useRegisterTabControl,\n  useTabDispatch,\n  useTabsUid,\n} from '../hooks/tabControl';\nimport { useKeyboardControls } from '../hooks/useKeyboardControls';\nimport { Select } from '../forms/Select';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n  className?: string;\n  /**\n   * Shrink the spacing between tabs and panels\n   */\n  compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  compacted = false,\n  selected,\n  children,\n}) => {\n  return (\n    <div\n      className={clsx('flex flex-col', className, {\n        'sm:gap-y-20': !compacted,\n      })}\n      data-name=\"Tabs\"\n    >\n      <TabsProvider selected={selected}>{children}</TabsProvider>\n    </div>\n  );\n};\n\ninterface TabsBodyProps {\n  className?: string;\n}\n\nexport const TabsBody: FunctionComponent<PropsWithChildren<TabsBodyProps>> = ({\n  className,\n  children,\n}) => {\n  return (\n    <div data-name=\"TabsBody\" className={clsx('grid grid-rows-1 overflow-hidden', className)}>\n      {children}\n    </div>\n  );\n};\n\ninterface TabPanelProps {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on panel select handler\n   */\n  onSelect?: (context: { value: TabPanelProps['value'] }) => void;\n}\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<TabPanelProps>> = ({\n  value,\n  className,\n  onSelect,\n  children,\n  ...attrs\n}) => {\n  const uid = useTabsUid();\n  const mounted = useRef(false);\n  const tabSelected = useActiveTab();\n  const isActive = tabSelected === value;\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n\n    if (isActive) {\n      onSelect?.({ value });\n    }\n  }, [isActive, value, onSelect]);\n\n  return (\n    <div\n      {...attrs}\n      aria-hidden={!isActive}\n      className={clsx(\n        className,\n        'relative col-start-1 row-start-1 transition-opacity duration-500',\n        {\n          'pointer-events-none z-0 h-0 opacity-0': !isActive,\n          'pointer-events-auto z-1 h-auto opacity-100': isActive,\n        },\n      )}\n      inert={isActive ? undefined : true}\n      tabIndex={isActive ? 0 : -1}\n      id={`TabPanel_${value}_${uid}`}\n      data-name={`TabPanel_${value}`}\n      role=\"tabpanel\"\n      aria-labelledby={`Tab_${value}_${uid}`}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface TabListProps {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<TabListProps>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  useEffect(() => {\n    if (!currentControl?.current || !ref.current) {\n      return;\n    }\n\n    const spacerWidth = spacerRef.current!.offsetWidth ?? 0;\n    const currentRect = currentControl.current.getBoundingClientRect();\n    const containerRect = ref.current!.getBoundingClientRect();\n    const scroll = ref.current!.scrollLeft;\n\n    ref.current.scrollLeft = scroll + (currentRect.left - containerRect.left) - spacerWidth;\n  }, [currentControl]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <div\n      data-name=\"TabsHeader\"\n      className={clsx(\n        'scrollbar-hidden relative isolate flex max-w-full overflow-x-auto scroll-smooth py-20',\n        className,\n      )}\n      ref={ref}\n    >\n      <div role=\"tablist\" className=\"flex flex-row\" style={style}>\n        <div\n          ref={spacerRef}\n          className={clsx('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={clsx('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport interface TabSelectProps {\n  items: { label: string; value: number }[];\n  className?: string;\n  'aria-label'?: string;\n}\n\nexport const TabSelect: FunctionComponent<TabSelectProps> = ({\n  items,\n  className,\n  'aria-label': ariaLabel = 'Select tab',\n}) => {\n  const activeTab = useActiveTab();\n  const dispatch = useTabDispatch();\n\n  const handleChange = (_name: string, value: string) => {\n    dispatch({ type: 'update', payload: Number(value) });\n  };\n\n  const selectValue = activeTab === -1 ? undefined : activeTab;\n\n  return (\n    <Select\n      value={selectValue?.toString()}\n      onChange={handleChange}\n      name={ariaLabel}\n      className={clsx(className)}\n    >\n      {items.map((item) => (\n        <option key={item.value} value={item.value}>\n          {item.label}\n        </option>\n      ))}\n    </Select>\n  );\n};\n\ninterface TabProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n  /**\n   * Tab Heading text\n   */\n  label?: string;\n  /**\n   * Tab heading index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onSelect?: (context: { value: TabProps['value']; label: TabProps['label'] }) => void;\n  /**\n   * Heading type\n   * _default: **h2**_\n   */\n  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<TabProps>> = ({\n  as: TagName = 'h2',\n  label,\n  children,\n  value,\n  onSelect,\n  className,\n  ...attr\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const activeTab = useActiveTab();\n  const uid = useTabsUid();\n  const dispatch = useRegisterTabControl({ value, ref: ref as RefObject<HTMLDivElement> });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  const pillStyle = { '--tab-index': value } as CSSProperties;\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onSelect?.({ value, label });\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [label, value, onSelect, activeTab]);\n\n  const start = useCallback(() => {\n    dispatch({ type: 'start' });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: 'end' });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: 'previous' });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: 'next' });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'next' : 'previous' });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === 'rtl';\n\n    dispatch({ type: isRTL ? 'previous' : 'next' });\n  }, [dispatch]);\n\n  const keyboardHandler = useKeyboardControls({\n    start,\n    end,\n    up,\n    down,\n    left,\n    right,\n  });\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const isSpace = e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space';\n      const isEnter = e.key === 'Enter' || e.code === 'Enter';\n\n      if (isActive.current && (isSpace || isEnter)) {\n        e.preventDefault();\n        return;\n      }\n\n      keyboardHandler(e);\n    },\n    [keyboardHandler],\n  );\n\n  const handleClick = () => {\n    if (isActive.current) {\n      return;\n    }\n\n    dispatch({ type: 'update', payload: value });\n  };\n\n  return (\n    <div\n      {...attr}\n      id={attr.id || `Tab_${value}_${uid}`}\n      data-name=\"Tab\"\n      ref={ref}\n      role=\"tab\"\n      aria-selected={isActive.current}\n      aria-controls={`TabPanel_${value}_${uid}`}\n      tabIndex={isActive.current ? 0 : -1}\n      className={clsx(\n        'group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none',\n        {\n          'text-white': isActive.current,\n          'text-black': !isActive.current,\n          'transition-transform active:scale-[1.03]': isActive.current,\n        },\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n    >\n      <TagName\n        className={clsx(\n          'relative inline-block px-20 py-12',\n          'before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)',\n          className,\n        )}\n        {...(!isActive ? { role: 'presentation' } : {})}\n      >\n        <span\n          className={clsx(\n            'tab-focus-pill ease transition-transform/colors',\n            'rounded-pill absolute inset-0 -z-1 duration-300',\n            'bg-black',\n          )}\n          style={pillStyle}\n        />\n        {children ?? label}\n      </TagName>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAqCA,IAAa,KAAqD,EAChE,cACA,eAAY,IACZ,aACA,kBAGE,kBAAC,OAAD;CACE,WAAW,EAAK,iBAAiB,GAAW,EAC1C,eAAe,CAAC,GACjB,CAAC;CACF,aAAU;WAEV,kBAAC,GAAD;EAAwB;EAAW;EAAwB,CAAA;CACvD,CAAA,EAQG,KAAiE,EAC5E,cACA,kBAGE,kBAAC,OAAD;CAAK,aAAU;CAAW,WAAW,EAAK,oCAAoC,EAAU;CACrF;CACG,CAAA,EAiBG,KAAiE,EAC5E,UACA,cACA,aACA,aACA,GAAG,QACC;CACJ,IAAM,IAAM,GAAY,EAClB,IAAU,EAAO,GAAM,EAEvB,IADc,GAAc,KACD;AAajC,QAXA,QAAgB;AACd,MAAI,CAAC,EAAQ,SAAS;AACpB,KAAQ,UAAU;AAClB;;AAGF,EAAI,KACF,IAAW,EAAE,UAAO,CAAC;IAEtB;EAAC;EAAU;EAAO;EAAS,CAAC,EAG7B,kBAAC,OAAD;EACE,GAAI;EACJ,eAAa,CAAC;EACd,WAAW,EACT,GACA,oEACA;GACE,yCAAyC,CAAC;GAC1C,8CAA8C;GAC/C,CACF;EACD,OAAO,IAAW,KAAA,IAAY;EAC9B,UAAU,IAAW,IAAI;EACzB,IAAI,YAAY,EAAM,GAAG;EACzB,aAAW,YAAY;EACvB,MAAK;EACL,mBAAiB,OAAO,EAAM,GAAG;EAEhC;EACG,CAAA;GAYG,KAA+D,EAC1E,cACA,iBAAc,IACd,kBACI;CACJ,IAAM,IAAM,EAAuB,KAAK,EAClC,IAAY,EAAuB,KAAK,EACxC,CAAC,GAAY,KAAkB,GAAqB;AAE1D,SAAgB;AACd,MAAI,CAAC,GAAgB,WAAW,CAAC,EAAI,QACnC;EAGF,IAAM,IAAc,EAAU,QAAS,eAAe,GAChD,IAAc,EAAe,QAAQ,uBAAuB,EAC5D,IAAgB,EAAI,QAAS,uBAAuB,EACpD,IAAS,EAAI,QAAS;AAE5B,IAAI,QAAQ,aAAa,KAAU,EAAY,OAAO,EAAc,QAAQ;IAC3E,CAAC,EAAe,CAAC;CAEpB,IAAM,IAAQ,EAAE,gBAAgB,GAAY;AAE5C,QACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,yFACA,EACD;EACI;YAEL,kBAAC,OAAD;GAAK,MAAK;GAAU,WAAU;GAAuB;aAArD;IACE,kBAAC,OAAD;KACE,KAAK;KACL,WAAW,EAAK,YAAY,EAC1B,0FACE,CAAC,GACJ,CAAA;KACD,CAAA;IACD;IACD,kBAAC,OAAD,EACE,WAAW,EAAK,YAAY,EAC1B,0FACE,CAAC,GACJ,CAAC,EACF,CAAA;;;EAEA,CAAA;GAUG,KAAgD,EAC3D,UACA,cACA,cAAc,IAAY,mBACtB;CACJ,IAAM,IAAY,GAAc,EAC1B,IAAW,GAAgB;AAQjC,QACE,kBAAC,GAAD;EACE,QAJgB,MAAc,KAAK,KAAA,IAAY,IAI3B,UAAU;EAC9B,WATkB,GAAe,MAAkB;AACrD,KAAS;IAAE,MAAM;IAAU,SAAS,OAAO,EAAA;IAAQ,CAAC;;EASlD,MAAM;EACN,WAAW,EAAK,EAAU;YAEzB,EAAM,KAAK,MACV,kBAAC,UAAD;GAAyB,OAAO,EAAK;aAClC,EAAK;GACC,EAFI,EAAK,MAET,CAAA;EAEJ,CAAA;GAyBA,KAAuD,EAClE,IAAI,IAAU,MACd,UACA,aACA,UACA,aACA,cACA,GAAG,QACC;CACJ,IAAM,IAAM,EAAuB,KAAK,EAClC,IAAY,GAAc,EAC1B,IAAM,GAAY,EAClB,IAAW,EAAsB;EAAE;EAAY;EAAkC,CAAC,EAClF,IAAoB,EAAO,EAAU,EAErC,IAAW,EAAO,MAAc,EAAM;AAC5C,GAAS,UAAU,MAAc;CAEjC,IAAM,IAAY,EAAE,eAAe,GAAO;AAE1C,SAAgB;AAKd,EAJI,EAAkB,YAAY,KAAa,MAAU,MACvD,EAAI,SAAS,OAAO,EACpB,IAAW;GAAE;GAAO;GAAO,CAAC,GAE1B,EAAkB,YAAY,MAChC,EAAkB,UAAU;IAE7B;EAAC;EAAO;EAAO;EAAU;EAAU,CAAC;CA8BvC,IAAM,IAAkB,EAAoB;EAC1C,OA7BY,QAAkB;AAC9B,KAAS,EAAE,MAAM,SAAS,CAAC;KAC1B,CAAC,EAAS,CAAC;EA4BZ,KA1BU,QAAkB;AAC5B,KAAS,EAAE,MAAM,OAAO,CAAC;KACxB,CAAC,EAAS,CAAC;EAyBZ,IAvBS,QAAkB;AAC3B,KAAS,EAAE,MAAM,YAAY,CAAC;KAC7B,CAAC,EAAS,CAAC;EAsBZ,MApBW,QAAkB;AAC7B,KAAS,EAAE,MAAM,QAAQ,CAAC;KACzB,CAAC,EAAS,CAAC;EAmBZ,MAjBW,QAAkB;AAG7B,KAAS,EAAE,MAFG,SAAS,gBAAgB,QAAQ,QAEtB,SAAS,YAAY,CAAC;KAC9C,CAAC,EAAS,CAAC;EAcZ,OAZY,QAAkB;AAG9B,KAAS,EAAE,MAFG,SAAS,gBAAgB,QAAQ,QAEtB,aAAa,QAAQ,CAAC;KAC9C,CAAC,EAAS,CAAA;EASZ,CAAC,EAEI,IAAgB,GACnB,MAAqC;EACpC,IAAM,IAAU,EAAE,QAAQ,OAAO,EAAE,QAAQ,cAAc,EAAE,SAAS,SAC9D,IAAU,EAAE,QAAQ,WAAW,EAAE,SAAS;AAEhD,MAAI,EAAS,YAAY,KAAW,IAAU;AAC5C,KAAE,gBAAgB;AAClB;;AAGF,IAAgB,EAAE;IAEpB,CAAC,EAAgB,CAClB,EAEK,UAAoB;AACpB,IAAS,WAIb,EAAS;GAAE,MAAM;GAAU,SAAS;GAAO,CAAC;;AAG9C,QACE,kBAAC,OAAD;EACE,GAAI;EACJ,IAAI,EAAK,MAAM,OAAO,EAAM,GAAG;EAC/B,aAAU;EACL;EACL,MAAK;EACL,iBAAe,EAAS;EACxB,iBAAe,YAAY,EAAM,GAAG;EACpC,UAAU,EAAS,UAAU,IAAI;EACjC,WAAW,EACT,2IACA;GACE,cAAc,EAAS;GACvB,cAAc,CAAC,EAAS;GACxB,4CAA4C,EAAS;GACtD,CACF;EACD,WAAW;EACX,SAAS;YAET,kBAAC,GAAD;GACE,WAAW,EACT,qCACA,gPACA,EACD;GACD,GAAM,IAAsC,EAAE,GAA7B,EAAE,MAAM,gBAAgB;aAN3C,CAQE,kBAAC,QAAD;IACE,WAAW,EACT,mDACA,mDACA,WACD;IACD,OAAO;IACP,CAAA,EACD,KAAY,EAAA;;EAEX,CAAA"}

package/ui/Breadcrumb.themes.d.ts

@@ -1,8 +0,0 @@
-import { Theme } from './types/Theme';
-export declare const getTheme: (theme: Theme) => {
-    thStart: string;
-    thEnd: string;
-} | {
-    readonly thStart: "text-middleGrey";
-    readonly thEnd: "text-black font-bold";
-};

package/ui/Breadcrumb.themes.js

@@ -1,16 +0,0 @@
-//#region lib/ui/Breadcrumb.themes.ts
-var e = {
-	thStart: "bg-ultramarine",
-	thEnd: "bg-ultramarine font-bold"
-}, t = {
-	dark: e,
-	wave: e,
-	light: {
-		thStart: "text-middleGrey",
-		thEnd: "text-black font-bold"
-	}
-}, n = (e) => t[e] || t.light;
-//#endregion
-export { n as getTheme };
-
-//# sourceMappingURL=Breadcrumb.themes.js.map

package/ui/Breadcrumb.themes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumb.themes.js","names":[],"sources":["../../lib/ui/Breadcrumb.themes.ts"],"sourcesContent":["import type { Theme } from './types/Theme';\nconst dark = {\n  thStart: 'bg-ultramarine',\n  thEnd: 'bg-ultramarine font-bold',\n};\n\nconst THEME = {\n  dark,\n  wave: dark,\n  light: {\n    thStart: 'text-middleGrey',\n    thEnd: 'text-black font-bold',\n  },\n} as const satisfies Record<string, { thStart: string; thEnd: string }>;\n\nexport const getTheme = (theme: Theme) => {\n  return THEME[theme as keyof typeof THEME] || THEME.light;\n};\n"],"mappings":";AACA,IAAM,IAAO;CACX,SAAS;CACT,OAAO;CACR,EAEK,IAAQ;CACZ;CACA,MAAM;CACN,OAAO;EACL,SAAS;EACT,OAAO;EACR;CACF,EAEY,KAAY,MAChB,EAAM,MAAgC,EAAM"}