@vite-mf-monorepo/ui 0.4.4 → 0.4.6

package/dist/Rating/Rating.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import CircleRating from "./CircleRating";
+import StarsRating from "./StarsRating";
+function Rating({
+  value,
+  max = 10,
+  variant = "circle",
+  size = "md",
+  showValue = true,
+  trackClassName,
+  className
+}) {
+  const clampedValue = Math.max(0, Math.min(value, max));
+  const percent = clampedValue / max * 100;
+  return /* @__PURE__ */ jsx("div", { className: clsx("ui:inline-flex", className), children: variant === "circle" ? /* @__PURE__ */ jsx(
+    CircleRating,
+    {
+      percent,
+      size,
+      showValue,
+      value: clampedValue,
+      max,
+      trackClassName
+    }
+  ) : /* @__PURE__ */ jsx(
+    StarsRating,
+    {
+      percent,
+      size,
+      showValue,
+      value: clampedValue,
+      max
+    }
+  ) });
+}
+var Rating_default = Rating;
+export {
+  Rating_default as default
+};
+//# sourceMappingURL=Rating.js.map

package/dist/Rating/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Rating/Rating.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport CircleRating from './CircleRating'\nimport StarsRating from './StarsRating'\n\nexport type RatingVariant = 'circle' | 'stars'\nexport type RatingSize = 'sm' | 'md' | 'lg'\n\nexport interface RatingProps {\n  /** Rating value (0-10 by default, or 0-100 if max=100) */\n  value: number\n  /** Maximum value (default: 10 for TMDB scores) */\n  max?: number\n  /** Visual variant */\n  variant?: RatingVariant\n  /** Size of the rating */\n  size?: RatingSize\n  /** Show the numeric value */\n  showValue?: boolean\n  /** Custom class for the background track circle (circle variant only) */\n  trackClassName?: string\n  /** Additional class name */\n  className?: string\n}\n\nfunction Rating({\n  value,\n  max = 10,\n  variant = 'circle',\n  size = 'md',\n  showValue = true,\n  trackClassName,\n  className,\n}: Readonly<RatingProps>) {\n  const clampedValue = Math.max(0, Math.min(value, max))\n  const percent = (clampedValue / max) * 100\n\n  return (\n    <div className={clsx('ui:inline-flex', className)}>\n      {variant === 'circle' ? (\n        <CircleRating\n          percent={percent}\n          size={size}\n          showValue={showValue}\n          value={clampedValue}\n          max={max}\n          trackClassName={trackClassName}\n        />\n      ) : (\n        <StarsRating\n          percent={percent}\n          size={size}\n          showValue={showValue}\n          value={clampedValue}\n          max={max}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default Rating\n"],"mappings":"AAwCQ;AAxCR,OAAO,UAAU;AAEjB,OAAO,kBAAkB;AACzB,OAAO,iBAAiB;AAsBxB,SAAS,OAAO;AAAA,EACd;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,CAAC;AACrD,QAAM,UAAW,eAAe,MAAO;AAEvC,SACE,oBAAC,SAAI,WAAW,KAAK,kBAAkB,SAAS,GAC7C,sBAAY,WACX;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/Rating/StarsRating.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { RatingSize } from './Rating.js';
+
+interface StarsRatingProps {
+    /** Percentage value (0-100) for the star fill */
+    percent: number;
+    /** Size of the stars */
+    size: RatingSize;
+    /** Whether to display the numeric value next to stars */
+    showValue: boolean;
+    /** The actual rating value (used for display) */
+    value: number;
+    /** Maximum rating value (used for display formatting) */
+    max: number;
+}
+declare function StarsRating({ percent, size, showValue, value, max, }: Readonly<StarsRatingProps>): react_jsx_runtime.JSX.Element;
+
+export { type StarsRatingProps, StarsRating as default };

package/dist/Rating/StarsRating.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "../Icon";
+const starsSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+function StarsRating({
+  percent,
+  size,
+  showValue,
+  value,
+  max
+}) {
+  const iconSize = starsSizeMap[size];
+  return /* @__PURE__ */ jsxs("div", { className: "ui:inline-flex ui:items-center ui:gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui:relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "ui:flex ui:text-gray-300", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(Icon, { name: "Star", size: iconSize }, i)) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ui:absolute ui:inset-0 ui:flex ui:text-yellow-400",
+          style: { clipPath: `inset(0 ${String(100 - percent)}% 0 0)` },
+          children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(Icon, { name: "Star", size: iconSize }, i))
+        }
+      )
+    ] }),
+    showValue && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(
+          "ui:font-medium ui:text-muted-foreground",
+          size === "sm" && "ui:text-xs",
+          size === "md" && "ui:text-sm",
+          size === "lg" && "ui:text-base"
+        ),
+        children: max === 100 ? (value / 10).toFixed(1) : value.toFixed(1)
+      }
+    )
+  ] });
+}
+var StarsRating_default = StarsRating;
+export {
+  StarsRating_default as default
+};
+//# sourceMappingURL=StarsRating.js.map

package/dist/Rating/StarsRating.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Rating/StarsRating.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport { Icon } from '../Icon'\n\nimport type { IconSize } from '../Icon'\nimport type { RatingSize } from './Rating'\n\nconst starsSizeMap: Record<RatingSize, IconSize> = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n}\n\nexport interface StarsRatingProps {\n  /** Percentage value (0-100) for the star fill */\n  percent: number\n  /** Size of the stars */\n  size: RatingSize\n  /** Whether to display the numeric value next to stars */\n  showValue: boolean\n  /** The actual rating value (used for display) */\n  value: number\n  /** Maximum rating value (used for display formatting) */\n  max: number\n}\n\nfunction StarsRating({\n  percent,\n  size,\n  showValue,\n  value,\n  max,\n}: Readonly<StarsRatingProps>) {\n  const iconSize = starsSizeMap[size]\n\n  return (\n    <div className=\"ui:inline-flex ui:items-center ui:gap-1\">\n      <div className=\"ui:relative\">\n        {/* Empty stars */}\n        <div className=\"ui:flex ui:text-gray-300\">\n          {[1, 2, 3, 4, 5].map((i) => (\n            <Icon key={i} name=\"Star\" size={iconSize} />\n          ))}\n        </div>\n        {/* Filled stars with clip */}\n        <div\n          className=\"ui:absolute ui:inset-0 ui:flex ui:text-yellow-400\"\n          style={{ clipPath: `inset(0 ${String(100 - percent)}% 0 0)` }}\n        >\n          {[1, 2, 3, 4, 5].map((i) => (\n            <Icon key={i} name=\"Star\" size={iconSize} />\n          ))}\n        </div>\n      </div>\n      {showValue && (\n        <span\n          className={clsx(\n            'ui:font-medium ui:text-muted-foreground',\n            size === 'sm' && 'ui:text-xs',\n            size === 'md' && 'ui:text-sm',\n            size === 'lg' && 'ui:text-base'\n          )}\n        >\n          {max === 100 ? (value / 10).toFixed(1) : value.toFixed(1)}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport default StarsRating\n"],"mappings":"AAqCM,SAIM,KAJN;AArCN,OAAO,UAAU;AAEjB,SAAS,YAAY;AAKrB,MAAM,eAA6C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAeA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,WAAW,aAAa,IAAI;AAElC,SACE,qBAAC,SAAI,WAAU,2CACb;AAAA,yBAAC,SAAI,WAAU,eAEb;AAAA,0BAAC,SAAI,WAAU,4BACZ,WAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACpB,oBAAC,QAAa,MAAK,QAAO,MAAM,YAArB,CAA+B,CAC3C,GACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,UAAU,WAAW,OAAO,MAAM,OAAO,CAAC,SAAS;AAAA,UAE3D,WAAC,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACpB,oBAAC,QAAa,MAAK,QAAO,MAAM,YAArB,CAA+B,CAC3C;AAAA;AAAA,MACH;AAAA,OACF;AAAA,IACC,aACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,QACnB;AAAA,QAEC,kBAAQ,OAAO,QAAQ,IAAI,QAAQ,CAAC,IAAI,MAAM,QAAQ,CAAC;AAAA;AAAA,IAC1D;AAAA,KAEJ;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/Rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Rating, RatingProps, RatingSize, RatingVariant } from './Rating.js';
+import 'react/jsx-runtime';

package/dist/Rating/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Rating";
+export {
+  default2 as Rating
+};
+//# sourceMappingURL=index.js.map

package/dist/Rating/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Rating/index.ts"],"sourcesContent":["export { default as Rating } from './Rating'\nexport type { RatingProps, RatingSize, RatingVariant } from './Rating'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAAyB;","names":["default"]}

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+interface SkeletonProps extends ComponentProps<'div'> {
+    /** Shape variant */
+    variant?: 'rectangle' | 'circle' | 'line';
+    /** Width (Tailwind class or custom value) */
+    width?: string;
+    /** Height (Tailwind class or custom value) */
+    height?: string;
+    /** Aspect ratio (e.g., "2/3", "16/9", "1/1") */
+    aspectRatio?: string;
+    /** Apply rounded corners (default: true for rectangle/line, always true for circle) */
+    rounded?: boolean;
+}
+/**
+ * Skeleton - Atomic loading placeholder component
+ *
+ * Composable primitive for building loading states with shimmer effect.
+ */
+declare function Skeleton({ variant, width, height, aspectRatio, rounded, className, ...rest }: Readonly<SkeletonProps>): react_jsx_runtime.JSX.Element;
+
+export { type SkeletonProps, Skeleton as default };

package/dist/{chunk-FJZK3PY6.js → Skeleton/Skeleton.js}

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-import { jsx } from 'react/jsx-runtime';
-
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
 function Skeleton({
   variant = "rectangle",
   width,
@@ -31,7 +30,7 @@ function Skeleton({
   );
 }
 var Skeleton_default = Skeleton;
-
-export { Skeleton_default };
-//# sourceMappingURL=chunk-FJZK3PY6.js.map
-//# sourceMappingURL=chunk-FJZK3PY6.js.map
+export {
+  Skeleton_default as default
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { ComponentProps } from 'react'\n\nexport interface SkeletonProps extends ComponentProps<'div'> {\n  /** Shape variant */\n  variant?: 'rectangle' | 'circle' | 'line'\n  /** Width (Tailwind class or custom value) */\n  width?: string\n  /** Height (Tailwind class or custom value) */\n  height?: string\n  /** Aspect ratio (e.g., \"2/3\", \"16/9\", \"1/1\") */\n  aspectRatio?: string\n  /** Apply rounded corners (default: true for rectangle/line, always true for circle) */\n  rounded?: boolean\n}\n\n/**\n * Skeleton - Atomic loading placeholder component\n *\n * Composable primitive for building loading states with shimmer effect.\n */\nfunction Skeleton({\n  variant = 'rectangle',\n  width,\n  height,\n  aspectRatio,\n  rounded = true,\n  className,\n  ...rest\n}: Readonly<SkeletonProps>) {\n  return (\n    <div\n      className={clsx(\n        'ui:relative ui:overflow-hidden ui:bg-muted',\n        'ui-skeleton-shimmer',\n        {\n          'ui:rounded-lg': variant === 'rectangle' && rounded,\n          'ui:rounded-full': variant === 'circle',\n          'ui:rounded': variant === 'line' && rounded,\n        },\n        width,\n        height,\n        className\n      )}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      {...rest}\n    />\n  )\n}\n\nexport default Skeleton\n"],"mappings":"AAgCI;AAhCJ,OAAO,UAAU;AAsBjB,SAAS,SAAS;AAAA,EAChB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,iBAAiB,YAAY,eAAe;AAAA,UAC5C,mBAAmB,YAAY;AAAA,UAC/B,cAAc,YAAY,UAAU;AAAA,QACtC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,cAAc,EAAE,YAAY,IAAI;AAAA,MACtC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Skeleton, SkeletonProps } from './Skeleton.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/Skeleton/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Skeleton";
+export {
+  default2 as Skeleton
+};
+//# sourceMappingURL=index.js.map

package/dist/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Skeleton/index.ts"],"sourcesContent":["export { default as Skeleton } from './Skeleton'\nexport type { SkeletonProps } from './Skeleton'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAA2B;","names":["default"]}

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SpinnerProps {
+    className?: string;
+}
+declare function Spinner({ className }: Readonly<SpinnerProps>): react_jsx_runtime.JSX.Element;
+
+export { type SpinnerProps, Spinner as default };

package/dist/Spinner/Spinner.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: clsx(
+        "ui:size-12 ui:rounded-full ui:border-4 ui:border-white/20 ui:border-t-white ui:animate-spin",
+        className
+      )
+    }
+  );
+}
+var Spinner_default = Spinner;
+export {
+  Spinner_default as default
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Spinner/Spinner.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nexport interface SpinnerProps {\n  className?: string\n}\n\nfunction Spinner({ className }: Readonly<SpinnerProps>) {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={clsx(\n        'ui:size-12 ui:rounded-full ui:border-4 ui:border-white/20 ui:border-t-white ui:animate-spin',\n        className\n      )}\n    />\n  )\n}\n\nexport default Spinner\n"],"mappings":"AAQI;AARJ,OAAO,UAAU;AAMjB,SAAS,QAAQ,EAAE,UAAU,GAA2B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Spinner, SpinnerProps } from './Spinner.js';
+import 'react/jsx-runtime';

package/dist/Spinner/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Spinner";
+export {
+  default2 as Spinner
+};
+//# sourceMappingURL=index.js.map

package/dist/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Spinner/index.ts"],"sourcesContent":["export { default as Spinner } from './Spinner'\nexport type { SpinnerProps } from './Spinner'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAA0B;","names":["default"]}

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import TabsList from './TabsList.js';
+import TabsPanel from './TabsPanel.js';
+import TabsTrigger from './TabsTrigger.js';
+import { HTMLAttributes } from 'react';
+
+/** Tabs visual variant */
+type TabsVariant = 'underline' | 'pills';
+interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Default active tab value (uncontrolled) */
+    defaultValue?: string;
+    /** Controlled active tab value */
+    value?: string;
+    /** Callback when tab changes */
+    onValueChange?: (value: string) => void;
+    /** Visual variant */
+    variant?: TabsVariant;
+    /** Optional prefix for ID generation (e.g., "popular" generates ids: popular-{value}) */
+    prefix?: string;
+}
+/**
+ * Tabs component for navigation between content sections.
+ * Implements ARIA tabs pattern for accessibility.
+ * Supports underline and pills variants.
+ * Uses Compound Component pattern.
+ */
+declare function Tabs({ defaultValue, value, onValueChange, variant, prefix, className, children, ...rest }: Readonly<TabsProps>): react_jsx_runtime.JSX.Element;
+declare namespace Tabs {
+    var List: typeof TabsList;
+    var Trigger: typeof TabsTrigger;
+    var Panel: typeof TabsPanel;
+}
+
+export { type TabsProps, type TabsVariant, Tabs as default };

package/dist/Tabs/Tabs.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState } from "react";
+import { TabsContext } from "./TabsContext";
+import TabsList from "./TabsList";
+import TabsPanel from "./TabsPanel";
+import TabsTrigger from "./TabsTrigger";
+function Tabs({
+  defaultValue = "",
+  value,
+  onValueChange,
+  variant = "underline",
+  prefix,
+  className,
+  children,
+  ...rest
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const activeValue = value ?? internalValue;
+  const isControlled = value !== void 0;
+  const handleValueChange = (newValue) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: {
+        value: activeValue,
+        onValueChange: handleValueChange,
+        variant,
+        prefix
+      },
+      children: /* @__PURE__ */ jsx("div", { className: clsx("ui:w-full", className), ...rest, children })
+    }
+  );
+}
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Panel = TabsPanel;
+var Tabs_default = Tabs;
+export {
+  Tabs_default as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useState } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport TabsList from './TabsList'\nimport TabsPanel from './TabsPanel'\nimport TabsTrigger from './TabsTrigger'\n\nimport type { HTMLAttributes } from 'react'\n\n/** Tabs visual variant */\nexport type TabsVariant = 'underline' | 'pills'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Default active tab value (uncontrolled) */\n  defaultValue?: string\n  /** Controlled active tab value */\n  value?: string\n  /** Callback when tab changes */\n  onValueChange?: (value: string) => void\n  /** Visual variant */\n  variant?: TabsVariant\n  /** Optional prefix for ID generation (e.g., \"popular\" generates ids: popular-{value}) */\n  prefix?: string\n}\n\n/**\n * Tabs component for navigation between content sections.\n * Implements ARIA tabs pattern for accessibility.\n * Supports underline and pills variants.\n * Uses Compound Component pattern.\n */\nfunction Tabs({\n  defaultValue = '',\n  value,\n  onValueChange,\n  variant = 'underline',\n  prefix,\n  className,\n  children,\n  ...rest\n}: Readonly<TabsProps>) {\n  const [internalValue, setInternalValue] = useState(defaultValue)\n\n  const activeValue = value ?? internalValue\n  const isControlled = value !== undefined\n\n  const handleValueChange = (newValue: string) => {\n    if (!isControlled) {\n      setInternalValue(newValue)\n    }\n    onValueChange?.(newValue)\n  }\n\n  return (\n    <TabsContext.Provider\n      value={{\n        value: activeValue,\n        onValueChange: handleValueChange,\n        variant,\n        prefix,\n      }}\n    >\n      <div className={clsx('ui:w-full', className)} {...rest}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n}\n\nTabs.List = TabsList\nTabs.Trigger = TabsTrigger\nTabs.Panel = TabsPanel\n\nexport default Tabs\n"],"mappings":"AA+DM;AA/DN,OAAO,UAAU;AACjB,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAC5B,OAAO,cAAc;AACrB,OAAO,eAAe;AACtB,OAAO,iBAAiB;AA0BxB,SAAS,KAAK;AAAA,EACZ,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,YAAY;AAE/D,QAAM,cAAc,SAAS;AAC7B,QAAM,eAAe,UAAU;AAE/B,QAAM,oBAAoB,CAAC,aAAqB;AAC9C,QAAI,CAAC,cAAc;AACjB,uBAAiB,QAAQ;AAAA,IAC3B;AACA,oBAAgB,QAAQ;AAAA,EAC1B;AAEA,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,SAAI,WAAW,KAAK,aAAa,SAAS,GAAI,GAAG,MAC/C,UACH;AAAA;AAAA,EACF;AAEJ;AAEA,KAAK,OAAO;AACZ,KAAK,UAAU;AACf,KAAK,QAAQ;AAEb,IAAO,eAAQ;","names":[]}

package/dist/Tabs/TabsContext.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { TabsVariant } from './Tabs.js';
+import 'react/jsx-runtime';
+import './TabsList.js';
+import './TabsPanel.js';
+import './TabsTrigger.js';
+
+interface TabsContextValue {
+    /** Currently active tab value */
+    value: string;
+    /** Change active tab */
+    onValueChange: (value: string) => void;
+    /** Visual variant */
+    variant: TabsVariant;
+    /** Optional prefix for ID generation */
+    prefix?: string;
+}
+declare const TabsContext: react.Context<TabsContextValue | undefined>;
+declare const useTabsContext: () => TabsContextValue;
+
+export { TabsContext, useTabsContext };

package/dist/Tabs/TabsContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+const TabsContext = createContext(
+  void 0
+);
+const useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs compound components must be used within <Tabs>");
+  }
+  return context;
+};
+export {
+  TabsContext,
+  useTabsContext
+};
+//# sourceMappingURL=TabsContext.js.map

package/dist/Tabs/TabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabsContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { TabsVariant } from './Tabs'\n\ninterface TabsContextValue {\n  /** Currently active tab value */\n  value: string\n  /** Change active tab */\n  onValueChange: (value: string) => void\n  /** Visual variant */\n  variant: TabsVariant\n  /** Optional prefix for ID generation */\n  prefix?: string\n}\n\nexport const TabsContext = createContext<TabsContextValue | undefined>(\n  undefined\n)\n\nexport const useTabsContext = () => {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('Tabs compound components must be used within <Tabs>')\n  }\n  return context\n}\n"],"mappings":"AAAA,SAAS,eAAe,kBAAkB;AAenC,MAAM,cAAc;AAAA,EACzB;AACF;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/dist/Tabs/TabsList.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+type TabsListProps = HTMLAttributes<HTMLDivElement>;
+declare function TabsList({ className, children, ...rest }: Readonly<TabsListProps>): react_jsx_runtime.JSX.Element;
+
+export { type TabsListProps, TabsList as default };

package/dist/Tabs/TabsList.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useRef } from "react";
+import { useTabsContext } from "./TabsContext";
+import { TabsListContext } from "./TabsListContext";
+function TabsList({ className, children, ...rest }) {
+  const { variant } = useTabsContext();
+  const triggersRef = useRef([]);
+  const disabledRef = useRef(/* @__PURE__ */ new Set());
+  const registerTrigger = (value, disabled) => {
+    if (!triggersRef.current.includes(value)) {
+      triggersRef.current.push(value);
+    }
+    if (disabled) {
+      disabledRef.current.add(value);
+    } else {
+      disabledRef.current.delete(value);
+    }
+  };
+  const unregisterTrigger = (value) => {
+    triggersRef.current = triggersRef.current.filter((v) => v !== value);
+    disabledRef.current.delete(value);
+  };
+  const getTriggers = () => triggersRef.current;
+  const isDisabled = (value) => disabledRef.current.has(value);
+  return /* @__PURE__ */ jsx(
+    TabsListContext.Provider,
+    {
+      value: { registerTrigger, unregisterTrigger, getTriggers, isDisabled },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "ui:flex ui:gap-1",
+            variant === "underline" && "ui:border-b ui:border-border",
+            variant === "pills" && "ui:[.media-section:nth-of-type(odd)_&]:bg-white ui:bg-muted ui:p-1 ui:rounded-lg ui:w-fit",
+            className
+          ),
+          role: "tablist",
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
+var TabsList_default = TabsList;
+export {
+  TabsList_default as default
+};
+//# sourceMappingURL=TabsList.js.map

package/dist/Tabs/TabsList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabsList.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useRef } from 'react'\n\nimport { useTabsContext } from './TabsContext'\nimport { TabsListContext } from './TabsListContext'\n\nimport type { HTMLAttributes } from 'react'\n\nexport type TabsListProps = HTMLAttributes<HTMLDivElement>\n\nfunction TabsList({ className, children, ...rest }: Readonly<TabsListProps>) {\n  const { variant } = useTabsContext()\n  const triggersRef = useRef<string[]>([])\n  const disabledRef = useRef<Set<string>>(new Set())\n\n  const registerTrigger = (value: string, disabled?: boolean) => {\n    if (!triggersRef.current.includes(value)) {\n      triggersRef.current.push(value)\n    }\n    if (disabled) {\n      disabledRef.current.add(value)\n    } else {\n      disabledRef.current.delete(value)\n    }\n  }\n\n  const unregisterTrigger = (value: string) => {\n    triggersRef.current = triggersRef.current.filter((v) => v !== value)\n    disabledRef.current.delete(value)\n  }\n\n  const getTriggers = () => triggersRef.current\n  const isDisabled = (value: string) => disabledRef.current.has(value)\n\n  return (\n    <TabsListContext.Provider\n      value={{ registerTrigger, unregisterTrigger, getTriggers, isDisabled }}\n    >\n      <div\n        className={clsx(\n          'ui:flex ui:gap-1',\n          variant === 'underline' && 'ui:border-b ui:border-border',\n          variant === 'pills' &&\n            'ui:[.media-section:nth-of-type(odd)_&]:bg-white ui:bg-muted ui:p-1 ui:rounded-lg ui:w-fit',\n          className\n        )}\n        role=\"tablist\"\n        {...rest}\n      >\n        {children}\n      </div>\n    </TabsListContext.Provider>\n  )\n}\n\nexport default TabsList\n"],"mappings":"AAsCM;AAtCN,OAAO,UAAU;AACjB,SAAS,cAAc;AAEvB,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAMhC,SAAS,SAAS,EAAE,WAAW,UAAU,GAAG,KAAK,GAA4B;AAC3E,QAAM,EAAE,QAAQ,IAAI,eAAe;AACnC,QAAM,cAAc,OAAiB,CAAC,CAAC;AACvC,QAAM,cAAc,OAAoB,oBAAI,IAAI,CAAC;AAEjD,QAAM,kBAAkB,CAAC,OAAe,aAAuB;AAC7D,QAAI,CAAC,YAAY,QAAQ,SAAS,KAAK,GAAG;AACxC,kBAAY,QAAQ,KAAK,KAAK;AAAA,IAChC;AACA,QAAI,UAAU;AACZ,kBAAY,QAAQ,IAAI,KAAK;AAAA,IAC/B,OAAO;AACL,kBAAY,QAAQ,OAAO,KAAK;AAAA,IAClC;AAAA,EACF;AAEA,QAAM,oBAAoB,CAAC,UAAkB;AAC3C,gBAAY,UAAU,YAAY,QAAQ,OAAO,CAAC,MAAM,MAAM,KAAK;AACnE,gBAAY,QAAQ,OAAO,KAAK;AAAA,EAClC;AAEA,QAAM,cAAc,MAAM,YAAY;AACtC,QAAM,aAAa,CAAC,UAAkB,YAAY,QAAQ,IAAI,KAAK;AAEnE,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,OAAO,EAAE,iBAAiB,mBAAmB,aAAa,WAAW;AAAA,MAErE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,YAAY,eAAe;AAAA,YAC3B,YAAY,WACV;AAAA,YACF;AAAA,UACF;AAAA,UACA,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/Tabs/TabsListContext.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+
+interface TabsListContextValue {
+    /** Register a trigger with its value and disabled state */
+    registerTrigger: (value: string, disabled?: boolean) => void;
+    /** Unregister a trigger */
+    unregisterTrigger: (value: string) => void;
+    /** Get all registered trigger values */
+    getTriggers: () => string[];
+    /** Check if a trigger is disabled */
+    isDisabled: (value: string) => boolean;
+}
+declare const TabsListContext: react.Context<TabsListContextValue | undefined>;
+declare const useTabsListContext: () => TabsListContextValue;
+
+export { TabsListContext, useTabsListContext };

package/dist/Tabs/TabsListContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+const TabsListContext = createContext(
+  void 0
+);
+const useTabsListContext = () => {
+  const context = useContext(TabsListContext);
+  if (!context) {
+    throw new Error("TabsTrigger must be used within <Tabs.List>");
+  }
+  return context;
+};
+export {
+  TabsListContext,
+  useTabsListContext
+};
+//# sourceMappingURL=TabsListContext.js.map

package/dist/Tabs/TabsListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabsListContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\ninterface TabsListContextValue {\n  /** Register a trigger with its value and disabled state */\n  registerTrigger: (value: string, disabled?: boolean) => void\n  /** Unregister a trigger */\n  unregisterTrigger: (value: string) => void\n  /** Get all registered trigger values */\n  getTriggers: () => string[]\n  /** Check if a trigger is disabled */\n  isDisabled: (value: string) => boolean\n}\n\nexport const TabsListContext = createContext<TabsListContextValue | undefined>(\n  undefined\n)\n\nexport const useTabsListContext = () => {\n  const context = useContext(TabsListContext)\n  if (!context) {\n    throw new Error('TabsTrigger must be used within <Tabs.List>')\n  }\n  return context\n}\n"],"mappings":"AAAA,SAAS,eAAe,kBAAkB;AAanC,MAAM,kBAAkB;AAAA,EAC7B;AACF;AAEO,MAAM,qBAAqB,MAAM;AACtC,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,6CAA6C;AAAA,EAC/D;AACA,SAAO;AACT;","names":[]}

package/dist/Tabs/TabsPanel.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Value that identifies this panel (must match a Tabs.Trigger value) */
+    value: string;
+    /** Panel content */
+    children: ReactNode;
+}
+/**
+ * Tabpanel for Tabs component.
+ * Automatically hidden/shown based on active tab value.
+ * Provides proper ARIA attributes for accessibility.
+ */
+declare function TabsPanel({ value, children, ...rest }: Readonly<TabsPanelProps>): react_jsx_runtime.JSX.Element;
+
+export { type TabsPanelProps, TabsPanel as default };

package/dist/Tabs/TabsPanel.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTabsContext } from "./TabsContext";
+function TabsPanel({ value, children, ...rest }) {
+  const { value: activeValue, prefix } = useTabsContext();
+  const isActive = value === activeValue;
+  const getTabId = (val) => prefix ? `tab-${prefix}-${val}` : `tab-${val}`;
+  const getTabPanelId = (val) => prefix ? `tabpanel-${prefix}-${val}` : `tabpanel-${val}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: getTabPanelId(value),
+      "aria-labelledby": getTabId(value),
+      hidden: !isActive,
+      ...rest,
+      className: clsx("ui:mt-4", rest.className),
+      children
+    }
+  );
+}
+var TabsPanel_default = TabsPanel;
+export {
+  TabsPanel_default as default
+};
+//# sourceMappingURL=TabsPanel.js.map

package/dist/Tabs/TabsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabsPanel.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport { useTabsContext } from './TabsContext'\n\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nexport interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Value that identifies this panel (must match a Tabs.Trigger value) */\n  value: string\n  /** Panel content */\n  children: ReactNode\n}\n\n/**\n * Tabpanel for Tabs component.\n * Automatically hidden/shown based on active tab value.\n * Provides proper ARIA attributes for accessibility.\n */\nfunction TabsPanel({ value, children, ...rest }: Readonly<TabsPanelProps>) {\n  const { value: activeValue, prefix } = useTabsContext()\n  const isActive = value === activeValue\n\n  const getTabId = (val: string) =>\n    prefix ? `tab-${prefix}-${val}` : `tab-${val}`\n  const getTabPanelId = (val: string) =>\n    prefix ? `tabpanel-${prefix}-${val}` : `tabpanel-${val}`\n\n  return (\n    <div\n      role=\"tabpanel\"\n      id={getTabPanelId(value)}\n      aria-labelledby={getTabId(value)}\n      hidden={!isActive}\n      {...rest}\n      className={clsx('ui:mt-4', rest.className)}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default TabsPanel\n"],"mappings":"AA4BI;AA5BJ,OAAO,UAAU;AAEjB,SAAS,sBAAsB;AAgB/B,SAAS,UAAU,EAAE,OAAO,UAAU,GAAG,KAAK,GAA6B;AACzE,QAAM,EAAE,OAAO,aAAa,OAAO,IAAI,eAAe;AACtD,QAAM,WAAW,UAAU;AAE3B,QAAM,WAAW,CAAC,QAChB,SAAS,OAAO,MAAM,IAAI,GAAG,KAAK,OAAO,GAAG;AAC9C,QAAM,gBAAgB,CAAC,QACrB,SAAS,YAAY,MAAM,IAAI,GAAG,KAAK,YAAY,GAAG;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,IAAI,cAAc,KAAK;AAAA,MACvB,mBAAiB,SAAS,KAAK;AAAA,MAC/B,QAAQ,CAAC;AAAA,MACR,GAAG;AAAA,MACJ,WAAW,KAAK,WAAW,KAAK,SAAS;AAAA,MAExC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/Tabs/TabsTrigger.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Value that identifies this tab */
+    value: string;
+    /** Optional icon component */
+    icon?: ReactNode;
+}
+declare function TabsTrigger({ value, icon, disabled, className, children, ...rest }: Readonly<TabsTriggerProps>): react_jsx_runtime.JSX.Element;
+
+export { type TabsTriggerProps, TabsTrigger as default };