@parto-system-design/ui 1.1.9 → 1.1.16

package/dist/components/ui/switch.cjs

@@ -0,0 +1,96 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var SwitchPrimitive = require('@radix-ui/react-switch');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var switchRootVariants = classVarianceAuthority.cva(
+  // Hover-checked uses brand-600 in light (darker green) and brand-500 in dark (also darker
+  // since --brand-* scale inverts across themes). Without the dark variant the track would get
+  // *lighter* on hover in dark mode and the white thumb would lose contrast.
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:hover:bg-brand-600/90 dark:data-[state=checked]:hover:bg-brand-500/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border",
+  {
+    variants: {
+      size: {
+        sm: "h-[16px] w-[28px]",
+        md: "h-[20px] w-[34px]",
+        lg: "h-[24px] w-[44px]",
+        /** @deprecated Use sm */
+        small: "h-[16px] w-[28px]",
+        /** @deprecated Use md */
+        medium: "h-[20px] w-[34px]",
+        /** @deprecated Use lg */
+        large: "h-[24px] w-[44px]"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+var switchThumbVariants = classVarianceAuthority.cva(
+  "pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-on-brand shadow-lg ring-0 transition-transform",
+  {
+    variants: {
+      size: {
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-[18px]",
+        /** @deprecated Use sm */
+        small: "size-3",
+        /** @deprecated Use md */
+        medium: "size-4",
+        /** @deprecated Use lg */
+        large: "size-[18px]"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+var Switch = React__namespace.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    SwitchPrimitive__namespace.Root,
+    {
+      "data-slot": "switch",
+      className: cn(switchRootVariants({ size }), className),
+      ...props,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(SwitchPrimitive__namespace.Thumb, { "data-slot": "switch-thumb", className: cn(switchThumbVariants({ size })) })
+    }
+  )
+);
+Switch.displayName = SwitchPrimitive__namespace.Root.displayName;
+
+exports.Switch = Switch;
+//# sourceMappingURL=switch.cjs.map
+//# sourceMappingURL=switch.cjs.map

package/dist/components/ui/switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/switch.tsx"],"names":["twMerge","clsx","cva","React","jsx","SwitchPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACEA,IAAM,kBAAA,GAAqBC,0BAAA;AAAA;AAAA;AAAA;AAAA,EAIzB,wdAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA;AAAA,QACsB,KAAA,EAAO,mBAAA;AAAA;AAAA,QACP,MAAA,EAAQ,mBAAA;AAAA;AAAA,QACR,KAAA,EAAO;AAAA;AACnC,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAKA,IAAM,mBAAA,GAAsBA,0BAAA;AAAA,EAC1B,qIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI,aAAA;AAAA;AAAA,QACsB,KAAA,EAAO,QAAA;AAAA;AAAA,QACP,MAAA,EAAQ,QAAA;AAAA;AAAA,QACR,KAAA,EAAO;AAAA;AACnC,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAKA,IAAM,MAAA,GAAeC,gBAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,MAAM,GAAG,KAAA,IAAS,GAAA,qBAC9BC,cAAA;AAAA,IAAiBC,0BAAA,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,WAAW,EAAA,CAAG,kBAAA,CAAmB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACpD,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,kBAAAD,cAAA,CAAiBC,0BAAA,CAAA,KAAA,EAAhB,EAAsB,WAAA,EAAU,cAAA,EAAe,SAAA,EAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,IAAA,EAAM,CAAC,CAAA,EAAG;AAAA;AAAA;AAGpG;AACA,MAAA,CAAO,cAA8BA,0BAAA,CAAA,IAAA,CAAK,WAAA","file":"switch.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\nimport { formatJalaliDate } from '@/lib/jalali-utils'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport type SupportedLocale = 'fa' | 'ar' | 'en'\n\n/**\n * Convert digits in a string to Persian/Arabic numerals based on locale.\n * @example convertToLocalNumbers('123', 'fa') => '۱۲۳'\n * @example convertToLocalNumbers('123', 'en') => '123'\n */\nexport function convertToLocalNumbers(text: string | number, locale: SupportedLocale): string {\n  if (locale === 'fa' || locale === 'ar') {\n    const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']\n    return String(text).replace(/\\d/g, (digit) => persianDigits[parseInt(digit)])\n  }\n  return String(text)\n}\n\n/**\n * Format large numbers with locale-aware suffixes (K/M/B).\n * @example formatLargeNumber(1500, 'fa') => '۱.۵ هزار'\n * @example formatLargeNumber(1500, 'en') => '1.5K'\n */\nexport function formatLargeNumber(num: number, locale: SupportedLocale): string {\n  if (num >= 1_000_000_000) {\n    const formatted = (num / 1_000_000_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'B' : ' میلیارد')\n  }\n  if (num >= 1_000_000) {\n    const formatted = (num / 1_000_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'M' : ' میلیون')\n  }\n  if (num >= 1_000) {\n    const formatted = (num / 1_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'K' : ' هزار')\n  }\n  return convertToLocalNumbers(num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ','), locale)\n}\n\n/**\n * Format number to Instagram-style short format (English only).\n * @example formatNumber(123456, 'short') => '123K'\n * @example formatNumber(123456, 'exact') => '123,456'\n */\nexport function formatNumber(num: number | undefined, format: 'exact' | 'short' = 'exact'): string {\n  if (num === undefined || num === null) return '0'\n\n  if (format === 'exact') {\n    return num.toLocaleString('en-US')\n  }\n\n  // Short format (Instagram style)\n  if (num >= 1_000_000_000) {\n    return `${(num / 1_000_000_000).toFixed(1).replace(/\\.0$/, '')}B`\n  }\n  if (num >= 1_000_000) {\n    return `${(num / 1_000_000).toFixed(1).replace(/\\.0$/, '')}M`\n  }\n  if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1).replace(/\\.0$/, '')}K`\n  }\n  return num.toString()\n}\n\n/**\n * Format date to relative time with absolute on hover (Persian)\n * @example formatRelativeTime(new Date()) => '۲ ساعت پیش'\n */\nexport function formatRelativeTime(date: Date | string | number): string {\n  const now = new Date()\n  const then = new Date(date)\n  const diffInSeconds = Math.floor((now.getTime() - then.getTime()) / 1000)\n\n  if (diffInSeconds < 60) {\n    return 'همین الان'\n  }\n\n  const diffInMinutes = Math.floor(diffInSeconds / 60)\n  if (diffInMinutes < 60) {\n    return `${convertToLocalNumbers(diffInMinutes, 'fa')} دقیقه پیش`\n  }\n\n  const diffInHours = Math.floor(diffInMinutes / 60)\n  if (diffInHours < 24) {\n    return `${convertToLocalNumbers(diffInHours, 'fa')} ساعت پیش`\n  }\n\n  const diffInDays = Math.floor(diffInHours / 24)\n  if (diffInDays < 7) {\n    return `${convertToLocalNumbers(diffInDays, 'fa')} روز پیش`\n  }\n\n  const diffInWeeks = Math.floor(diffInDays / 7)\n  if (diffInWeeks < 4) {\n    return `${convertToLocalNumbers(diffInWeeks, 'fa')} هفته پیش`\n  }\n\n  const diffInMonths = Math.floor(diffInDays / 30)\n  if (diffInMonths < 12) {\n    return `${convertToLocalNumbers(diffInMonths, 'fa')} ماه پیش`\n  }\n\n  const diffInYears = Math.floor(diffInDays / 365)\n  return `${convertToLocalNumbers(diffInYears, 'fa')} سال پیش`\n}\n\n/**\n * Format date to absolute format (Persian / Jalali)\n * Uses date-fns-jalali for accurate Jalali conversion.\n * @example formatAbsoluteTime(new Date()) => '۱۵ دی ۱۴۰۳، ۱۵:۳۰'\n */\nexport function formatAbsoluteTime(date: Date | string | number): string {\n  const d = new Date(date)\n  return formatJalaliDate(d, 'd MMMM yyyy، HH:mm')\n}\n","'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '@/lib/utils'\n\nconst switchRootVariants = cva(\n  // Hover-checked uses brand-600 in light (darker green) and brand-500 in dark (also darker\n  // since --brand-* scale inverts across themes). Without the dark variant the track would get\n  // *lighter* on hover in dark mode and the white thumb would lose contrast.\n  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:hover:bg-brand-600/90 dark:data-[state=checked]:hover:bg-brand-500/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border',\n  {\n    variants: {\n      size: {\n        sm: 'h-[16px] w-[28px]',\n        md: 'h-[20px] w-[34px]',\n        lg: 'h-[24px] w-[44px]',\n        /** @deprecated Use sm */ small: 'h-[16px] w-[28px]',\n        /** @deprecated Use md */ medium: 'h-[20px] w-[34px]',\n        /** @deprecated Use lg */ large: 'h-[24px] w-[44px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n)\n\n// Checked thumb uses --on-brand (white in both themes) so the thumb stays bright on the\n// brand-colored track regardless of theme. Unchecked thumb uses foreground-lighter for a\n// subdued gray on the muted track.\nconst switchThumbVariants = cva(\n  'pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-on-brand shadow-lg ring-0 transition-transform',\n  {\n    variants: {\n      size: {\n        sm: 'size-3',\n        md: 'size-4',\n        lg: 'size-[18px]',\n        /** @deprecated Use sm */ small: 'size-3',\n        /** @deprecated Use md */ medium: 'size-4',\n        /** @deprecated Use lg */ large: 'size-[18px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n)\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchRootVariants> {}\n\nconst Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(\n  ({ className, size, ...props }, ref) => (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(switchRootVariants({ size }), className)}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitive.Thumb data-slot=\"switch-thumb\" className={cn(switchThumbVariants({ size }))} />\n    </SwitchPrimitive.Root>\n  )\n)\nSwitch.displayName = SwitchPrimitive.Root.displayName\n\nexport { Switch }\n"]}

package/dist/components/ui/switch.d.cts

@@ -0,0 +1,13 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { VariantProps } from 'class-variance-authority';
+
+declare const switchRootVariants: (props?: ({
+    size?: "small" | "medium" | "sm" | "md" | "lg" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchRootVariants> {
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchProps };

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,13 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { VariantProps } from 'class-variance-authority';
+
+declare const switchRootVariants: (props?: ({
+    size?: "small" | "medium" | "sm" | "md" | "lg" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchRootVariants> {
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchProps };

package/dist/components/ui/switch.js

@@ -0,0 +1,73 @@
+'use client';
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var switchRootVariants = cva(
+  // Hover-checked uses brand-600 in light (darker green) and brand-500 in dark (also darker
+  // since --brand-* scale inverts across themes). Without the dark variant the track would get
+  // *lighter* on hover in dark mode and the white thumb would lose contrast.
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:hover:bg-brand-600/90 dark:data-[state=checked]:hover:bg-brand-500/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border",
+  {
+    variants: {
+      size: {
+        sm: "h-[16px] w-[28px]",
+        md: "h-[20px] w-[34px]",
+        lg: "h-[24px] w-[44px]",
+        /** @deprecated Use sm */
+        small: "h-[16px] w-[28px]",
+        /** @deprecated Use md */
+        medium: "h-[20px] w-[34px]",
+        /** @deprecated Use lg */
+        large: "h-[24px] w-[44px]"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+var switchThumbVariants = cva(
+  "pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-on-brand shadow-lg ring-0 transition-transform",
+  {
+    variants: {
+      size: {
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-[18px]",
+        /** @deprecated Use sm */
+        small: "size-3",
+        /** @deprecated Use md */
+        medium: "size-4",
+        /** @deprecated Use lg */
+        large: "size-[18px]"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+var Switch = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      className: cn(switchRootVariants({ size }), className),
+      ...props,
+      ref,
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn(switchThumbVariants({ size })) })
+    }
+  )
+);
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };
+//# sourceMappingURL=switch.js.map
+//# sourceMappingURL=switch.js.map

package/dist/components/ui/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/switch.tsx"],"names":[],"mappings":";;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACEA,IAAM,kBAAA,GAAqB,GAAA;AAAA;AAAA;AAAA;AAAA,EAIzB,wdAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA;AAAA,QACsB,KAAA,EAAO,mBAAA;AAAA;AAAA,QACP,MAAA,EAAQ,mBAAA;AAAA;AAAA,QACR,KAAA,EAAO;AAAA;AACnC,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAKA,IAAM,mBAAA,GAAsB,GAAA;AAAA,EAC1B,qIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI,QAAA;AAAA,QACJ,EAAA,EAAI,aAAA;AAAA;AAAA,QACsB,KAAA,EAAO,QAAA;AAAA;AAAA,QACP,MAAA,EAAQ,QAAA;AAAA;AAAA,QACR,KAAA,EAAO;AAAA;AACnC,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAKA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,MAAM,GAAG,KAAA,IAAS,GAAA,qBAC9B,GAAA;AAAA,IAAiB,eAAA,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,WAAW,EAAA,CAAG,kBAAA,CAAmB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACpD,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAiB,eAAA,CAAA,KAAA,EAAhB,EAAsB,WAAA,EAAU,cAAA,EAAe,SAAA,EAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,IAAA,EAAM,CAAC,CAAA,EAAG;AAAA;AAAA;AAGpG;AACA,MAAA,CAAO,cAA8B,eAAA,CAAA,IAAA,CAAK,WAAA","file":"switch.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\nimport { formatJalaliDate } from '@/lib/jalali-utils'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport type SupportedLocale = 'fa' | 'ar' | 'en'\n\n/**\n * Convert digits in a string to Persian/Arabic numerals based on locale.\n * @example convertToLocalNumbers('123', 'fa') => '۱۲۳'\n * @example convertToLocalNumbers('123', 'en') => '123'\n */\nexport function convertToLocalNumbers(text: string | number, locale: SupportedLocale): string {\n  if (locale === 'fa' || locale === 'ar') {\n    const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']\n    return String(text).replace(/\\d/g, (digit) => persianDigits[parseInt(digit)])\n  }\n  return String(text)\n}\n\n/**\n * Format large numbers with locale-aware suffixes (K/M/B).\n * @example formatLargeNumber(1500, 'fa') => '۱.۵ هزار'\n * @example formatLargeNumber(1500, 'en') => '1.5K'\n */\nexport function formatLargeNumber(num: number, locale: SupportedLocale): string {\n  if (num >= 1_000_000_000) {\n    const formatted = (num / 1_000_000_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'B' : ' میلیارد')\n  }\n  if (num >= 1_000_000) {\n    const formatted = (num / 1_000_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'M' : ' میلیون')\n  }\n  if (num >= 1_000) {\n    const formatted = (num / 1_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'K' : ' هزار')\n  }\n  return convertToLocalNumbers(num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ','), locale)\n}\n\n/**\n * Format number to Instagram-style short format (English only).\n * @example formatNumber(123456, 'short') => '123K'\n * @example formatNumber(123456, 'exact') => '123,456'\n */\nexport function formatNumber(num: number | undefined, format: 'exact' | 'short' = 'exact'): string {\n  if (num === undefined || num === null) return '0'\n\n  if (format === 'exact') {\n    return num.toLocaleString('en-US')\n  }\n\n  // Short format (Instagram style)\n  if (num >= 1_000_000_000) {\n    return `${(num / 1_000_000_000).toFixed(1).replace(/\\.0$/, '')}B`\n  }\n  if (num >= 1_000_000) {\n    return `${(num / 1_000_000).toFixed(1).replace(/\\.0$/, '')}M`\n  }\n  if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1).replace(/\\.0$/, '')}K`\n  }\n  return num.toString()\n}\n\n/**\n * Format date to relative time with absolute on hover (Persian)\n * @example formatRelativeTime(new Date()) => '۲ ساعت پیش'\n */\nexport function formatRelativeTime(date: Date | string | number): string {\n  const now = new Date()\n  const then = new Date(date)\n  const diffInSeconds = Math.floor((now.getTime() - then.getTime()) / 1000)\n\n  if (diffInSeconds < 60) {\n    return 'همین الان'\n  }\n\n  const diffInMinutes = Math.floor(diffInSeconds / 60)\n  if (diffInMinutes < 60) {\n    return `${convertToLocalNumbers(diffInMinutes, 'fa')} دقیقه پیش`\n  }\n\n  const diffInHours = Math.floor(diffInMinutes / 60)\n  if (diffInHours < 24) {\n    return `${convertToLocalNumbers(diffInHours, 'fa')} ساعت پیش`\n  }\n\n  const diffInDays = Math.floor(diffInHours / 24)\n  if (diffInDays < 7) {\n    return `${convertToLocalNumbers(diffInDays, 'fa')} روز پیش`\n  }\n\n  const diffInWeeks = Math.floor(diffInDays / 7)\n  if (diffInWeeks < 4) {\n    return `${convertToLocalNumbers(diffInWeeks, 'fa')} هفته پیش`\n  }\n\n  const diffInMonths = Math.floor(diffInDays / 30)\n  if (diffInMonths < 12) {\n    return `${convertToLocalNumbers(diffInMonths, 'fa')} ماه پیش`\n  }\n\n  const diffInYears = Math.floor(diffInDays / 365)\n  return `${convertToLocalNumbers(diffInYears, 'fa')} سال پیش`\n}\n\n/**\n * Format date to absolute format (Persian / Jalali)\n * Uses date-fns-jalali for accurate Jalali conversion.\n * @example formatAbsoluteTime(new Date()) => '۱۵ دی ۱۴۰۳، ۱۵:۳۰'\n */\nexport function formatAbsoluteTime(date: Date | string | number): string {\n  const d = new Date(date)\n  return formatJalaliDate(d, 'd MMMM yyyy، HH:mm')\n}\n","'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '@/lib/utils'\n\nconst switchRootVariants = cva(\n  // Hover-checked uses brand-600 in light (darker green) and brand-500 in dark (also darker\n  // since --brand-* scale inverts across themes). Without the dark variant the track would get\n  // *lighter* on hover in dark mode and the white thumb would lose contrast.\n  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=checked]:hover:bg-brand-600/90 dark:data-[state=checked]:hover:bg-brand-500/90 data-[state=unchecked]:bg-control data-[state=unchecked]:hover:bg-border',\n  {\n    variants: {\n      size: {\n        sm: 'h-[16px] w-[28px]',\n        md: 'h-[20px] w-[34px]',\n        lg: 'h-[24px] w-[44px]',\n        /** @deprecated Use sm */ small: 'h-[16px] w-[28px]',\n        /** @deprecated Use md */ medium: 'h-[20px] w-[34px]',\n        /** @deprecated Use lg */ large: 'h-[24px] w-[44px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n)\n\n// Checked thumb uses --on-brand (white in both themes) so the thumb stays bright on the\n// brand-colored track regardless of theme. Unchecked thumb uses foreground-lighter for a\n// subdued gray on the muted track.\nconst switchThumbVariants = cva(\n  'pointer-events-none block rounded-full bg-foreground-lighter data-[state=checked]:bg-on-brand shadow-lg ring-0 transition-transform',\n  {\n    variants: {\n      size: {\n        sm: 'size-3',\n        md: 'size-4',\n        lg: 'size-[18px]',\n        /** @deprecated Use sm */ small: 'size-3',\n        /** @deprecated Use md */ medium: 'size-4',\n        /** @deprecated Use lg */ large: 'size-[18px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n)\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchRootVariants> {}\n\nconst Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(\n  ({ className, size, ...props }, ref) => (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(switchRootVariants({ size }), className)}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitive.Thumb data-slot=\"switch-thumb\" className={cn(switchThumbVariants({ size }))} />\n    </SwitchPrimitive.Root>\n  )\n)\nSwitch.displayName = SwitchPrimitive.Root.displayName\n\nexport { Switch }\n"]}

package/dist/components/ui/table.cjs

@@ -0,0 +1,188 @@
+'use client';
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function Table({
+  className,
+  size = "md",
+  striped = false,
+  bordered = false,
+  stickyHeader = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      "data-slot": "table",
+      "data-size": size,
+      "data-striped": striped || void 0,
+      "data-bordered": bordered || void 0,
+      "data-sticky-header": stickyHeader || void 0,
+      className: cn("w-full caption-bottom", className),
+      ...props
+    }
+  ) });
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn(
+        // 1.1.16 — internal row dividers use --border-muted (subtle), same
+        // rationale as Card. The page-level rule of thumb: borders that
+        // separate sections of one surface should whisper, not shout.
+        "[&_tr]:border-b [&_tr]:border-muted bg-surface-75",
+        "[[data-sticky-header]_&]:sticky [[data-sticky-header]_&]:top-0 [[data-sticky-header]_&]:z-[9] [[data-sticky-header]_&]:bg-surface-75",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn(
+        "[&_tr:last-child]:border-0",
+        "[[data-striped]_&_tr:nth-child(even)]:bg-surface-75 [[data-striped]_&_tr:nth-child(even):hover]:bg-surface-200",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-surface-200 data-[state=selected]:bg-selection border-b border-muted transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, sortDirection, ...props }) {
+  const ariaSort = sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : sortDirection === "none" ? "none" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      "aria-sort": ariaSort,
+      className: cn(
+        "text-foreground-lighter text-start align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        // Size variants (inherited from parent table)
+        "[[data-size=sm]_&]:h-8 [[data-size=sm]_&]:px-2 [[data-size=sm]_&]:text-xs",
+        "[[data-size=md]_&]:h-10 [[data-size=md]_&]:px-3 [[data-size=md]_&]:text-sm",
+        "[[data-size=lg]_&]:h-12 [[data-size=lg]_&]:px-4 [[data-size=lg]_&]:text-base",
+        // Bordered variant
+        "[[data-bordered]_&]:border [[data-bordered]_&]:border-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        // Size variants (inherited from parent table)
+        "[[data-size=sm]_&]:px-2 [[data-size=sm]_&]:py-1.5 [[data-size=sm]_&]:text-xs",
+        "[[data-size=md]_&]:px-3 [[data-size=md]_&]:py-2 [[data-size=md]_&]:text-sm",
+        "[[data-size=lg]_&]:px-4 [[data-size=lg]_&]:py-3 [[data-size=lg]_&]:text-base",
+        // Bordered variant
+        "[[data-bordered]_&]:border [[data-bordered]_&]:border-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("caption", { "data-slot": "table-caption", className: cn("text-foreground-muted mt-4 text-sm", className), ...props });
+}
+function TableSortHeader({ className, children, sorted, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "data-slot": "table-sort-header",
+      className: cn(
+        "inline-flex items-center gap-1.5 cursor-pointer select-none hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm",
+        sorted && "text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex flex-col -space-y-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "8",
+              height: "5",
+              viewBox: "0 0 8 5",
+              className: cn("transition-colors", sorted === "asc" ? "text-foreground" : "text-foreground-muted"),
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 0L8 5H0L4 0Z", fill: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: "8",
+              height: "5",
+              viewBox: "0 0 8 5",
+              className: cn("transition-colors", sorted === "desc" ? "text-foreground" : "text-foreground-muted"),
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 5L0 0H8L4 5Z", fill: "currentColor" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+Table.displayName = "Table";
+TableHeader.displayName = "TableHeader";
+TableBody.displayName = "TableBody";
+TableFooter.displayName = "TableFooter";
+TableHead.displayName = "TableHead";
+TableRow.displayName = "TableRow";
+TableCell.displayName = "TableCell";
+TableCaption.displayName = "TableCaption";
+TableSortHeader.displayName = "TableSortHeader";
+
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableRow = TableRow;
+exports.TableSortHeader = TableSortHeader;
+//# sourceMappingURL=table.cjs.map
+//# sourceMappingURL=table.cjs.map

package/dist/components/ui/table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/table.tsx"],"names":["twMerge","clsx","jsx","jsxs"],"mappings":"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","file":"table.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\nimport { formatJalaliDate } from '@/lib/jalali-utils'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport type SupportedLocale = 'fa' | 'ar' | 'en'\n\n/**\n * Convert digits in a string to Persian/Arabic numerals based on locale.\n * @example convertToLocalNumbers('123', 'fa') => '۱۲۳'\n * @example convertToLocalNumbers('123', 'en') => '123'\n */\nexport function convertToLocalNumbers(text: string | number, locale: SupportedLocale): string {\n  if (locale === 'fa' || locale === 'ar') {\n    const persianDigits = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']\n    return String(text).replace(/\\d/g, (digit) => persianDigits[parseInt(digit)])\n  }\n  return String(text)\n}\n\n/**\n * Format large numbers with locale-aware suffixes (K/M/B).\n * @example formatLargeNumber(1500, 'fa') => '۱.۵ هزار'\n * @example formatLargeNumber(1500, 'en') => '1.5K'\n */\nexport function formatLargeNumber(num: number, locale: SupportedLocale): string {\n  if (num >= 1_000_000_000) {\n    const formatted = (num / 1_000_000_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'B' : ' میلیارد')\n  }\n  if (num >= 1_000_000) {\n    const formatted = (num / 1_000_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'M' : ' میلیون')\n  }\n  if (num >= 1_000) {\n    const formatted = (num / 1_000).toFixed(1).replace(/\\.0$/, '')\n    return convertToLocalNumbers(formatted, locale) + (locale === 'en' ? 'K' : ' هزار')\n  }\n  return convertToLocalNumbers(num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ','), locale)\n}\n\n/**\n * Format number to Instagram-style short format (English only).\n * @example formatNumber(123456, 'short') => '123K'\n * @example formatNumber(123456, 'exact') => '123,456'\n */\nexport function formatNumber(num: number | undefined, format: 'exact' | 'short' = 'exact'): string {\n  if (num === undefined || num === null) return '0'\n\n  if (format === 'exact') {\n    return num.toLocaleString('en-US')\n  }\n\n  // Short format (Instagram style)\n  if (num >= 1_000_000_000) {\n    return `${(num / 1_000_000_000).toFixed(1).replace(/\\.0$/, '')}B`\n  }\n  if (num >= 1_000_000) {\n    return `${(num / 1_000_000).toFixed(1).replace(/\\.0$/, '')}M`\n  }\n  if (num >= 1_000) {\n    return `${(num / 1_000).toFixed(1).replace(/\\.0$/, '')}K`\n  }\n  return num.toString()\n}\n\n/**\n * Format date to relative time with absolute on hover (Persian)\n * @example formatRelativeTime(new Date()) => '۲ ساعت پیش'\n */\nexport function formatRelativeTime(date: Date | string | number): string {\n  const now = new Date()\n  const then = new Date(date)\n  const diffInSeconds = Math.floor((now.getTime() - then.getTime()) / 1000)\n\n  if (diffInSeconds < 60) {\n    return 'همین الان'\n  }\n\n  const diffInMinutes = Math.floor(diffInSeconds / 60)\n  if (diffInMinutes < 60) {\n    return `${convertToLocalNumbers(diffInMinutes, 'fa')} دقیقه پیش`\n  }\n\n  const diffInHours = Math.floor(diffInMinutes / 60)\n  if (diffInHours < 24) {\n    return `${convertToLocalNumbers(diffInHours, 'fa')} ساعت پیش`\n  }\n\n  const diffInDays = Math.floor(diffInHours / 24)\n  if (diffInDays < 7) {\n    return `${convertToLocalNumbers(diffInDays, 'fa')} روز پیش`\n  }\n\n  const diffInWeeks = Math.floor(diffInDays / 7)\n  if (diffInWeeks < 4) {\n    return `${convertToLocalNumbers(diffInWeeks, 'fa')} هفته پیش`\n  }\n\n  const diffInMonths = Math.floor(diffInDays / 30)\n  if (diffInMonths < 12) {\n    return `${convertToLocalNumbers(diffInMonths, 'fa')} ماه پیش`\n  }\n\n  const diffInYears = Math.floor(diffInDays / 365)\n  return `${convertToLocalNumbers(diffInYears, 'fa')} سال پیش`\n}\n\n/**\n * Format date to absolute format (Persian / Jalali)\n * Uses date-fns-jalali for accurate Jalali conversion.\n * @example formatAbsoluteTime(new Date()) => '۱۵ دی ۱۴۰۳، ۱۵:۳۰'\n */\nexport function formatAbsoluteTime(date: Date | string | number): string {\n  const d = new Date(date)\n  return formatJalaliDate(d, 'd MMMM yyyy، HH:mm')\n}\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\n/* -------------------------------------------------------------------------- */\n/*  Table                                                                      */\n/* -------------------------------------------------------------------------- */\n\ninterface TableProps extends React.ComponentProps<'table'> {\n  /** Size variant affecting cell padding and font size */\n  size?: 'sm' | 'md' | 'lg'\n  /** Zebra-striped rows */\n  striped?: boolean\n  /** Bordered cells */\n  bordered?: boolean\n  /** Sticky header that stays visible when scrolling */\n  stickyHeader?: boolean\n}\n\nfunction Table({\n  className,\n  size = 'md',\n  striped = false,\n  bordered = false,\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-x-auto\">\n      <table\n        data-slot=\"table\"\n        data-size={size}\n        data-striped={striped || undefined}\n        data-bordered={bordered || undefined}\n        data-sticky-header={stickyHeader || undefined}\n        className={cn('w-full caption-bottom', className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  TableHeader                                                                */\n/* -------------------------------------------------------------------------- */\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\n        // 1.1.16 — internal row dividers use --border-muted (subtle), same\n        // rationale as Card. The page-level rule of thumb: borders that\n        // separate sections of one surface should whisper, not shout.\n        '[&_tr]:border-b [&_tr]:border-muted bg-surface-75',\n        '[[data-sticky-header]_&]:sticky [[data-sticky-header]_&]:top-0 [[data-sticky-header]_&]:z-[9] [[data-sticky-header]_&]:bg-surface-75',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  TableBody                                                                  */\n/* -------------------------------------------------------------------------- */\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\n        '[&_tr:last-child]:border-0',\n        '[[data-striped]_&_tr:nth-child(even)]:bg-surface-75 [[data-striped]_&_tr:nth-child(even):hover]:bg-surface-200',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  TableFooter                                                                */\n/* -------------------------------------------------------------------------- */\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}\n      {...props}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  TableRow                                                                   */\n/* -------------------------------------------------------------------------- */\n\nfunction TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      // 1.1.16 — see TableHeader: row dividers use --border-muted so the\n      // table reads as a continuous list, not a fence of bright lines.\n      className={cn(\n        'hover:bg-surface-200 data-[state=selected]:bg-selection border-b border-muted transition-colors',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  TableHead                                                                  */\n/* -------------------------------------------------------------------------- */\n\ninterface TableHeadProps extends React.ComponentProps<'th'> {\n  /** Sort direction — sets aria-sort on the <th> element */\n  sortDirection?: 'asc' | 'desc' | 'none'\n}\n\nfunction TableHead({ className, sortDirection, ...props }: TableHeadProps) {\n  const ariaSort =\n    sortDirection === 'asc'\n      ? 'ascending'\n      : sortDirection === 'desc'\n        ? 'descending'\n        : sortDirection === 'none'\n          ? 'none'\n          : undefined\n\n  return (\n    <th\n      data-slot=\"table-head\"\n      aria-sort={ariaSort}\n      className={cn(\n        'text-foreground-lighter text-start align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]',\n        // Size variants (inherited from parent table)\n        '[[data-size=sm]_&]:h-8 [[data-size=sm]_&]:px-2 [[data-size=sm]_&]:text-xs',\n        '[[data-size=md]_&]:h-10 [[data-size=md]_&]:px-3 [[data-size=md]_&]:text-sm',\n        '[[data-size=lg]_&]:h-12 [[data-size=lg]_&]:px-4 [[data-size=lg]_&]:text-base',\n        // Bordered variant\n        '[[data-bordered]_&]:border [[data-bordered]_&]:border-border',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  TableCell                                                                  */\n/* -------------------------------------------------------------------------- */\n\nfunction TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        'align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]',\n        // Size variants (inherited from parent table)\n        '[[data-size=sm]_&]:px-2 [[data-size=sm]_&]:py-1.5 [[data-size=sm]_&]:text-xs',\n        '[[data-size=md]_&]:px-3 [[data-size=md]_&]:py-2 [[data-size=md]_&]:text-sm',\n        '[[data-size=lg]_&]:px-4 [[data-size=lg]_&]:py-3 [[data-size=lg]_&]:text-base',\n        // Bordered variant\n        '[[data-bordered]_&]:border [[data-bordered]_&]:border-border',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  TableCaption                                                               */\n/* -------------------------------------------------------------------------- */\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {\n  return (\n    <caption data-slot=\"table-caption\" className={cn('text-foreground-muted mt-4 text-sm', className)} {...props} />\n  )\n}\n\n/* -------------------------------------------------------------------------- */\n/*  TableSortHeader — clickable sort indicator for table headers               */\n/* -------------------------------------------------------------------------- */\n\ninterface TableSortHeaderProps extends React.ComponentProps<'button'> {\n  /** Current sort direction */\n  sorted?: 'asc' | 'desc' | false\n}\n\nfunction TableSortHeader({ className, children, sorted, ...props }: TableSortHeaderProps) {\n  return (\n    <button\n      data-slot=\"table-sort-header\"\n      className={cn(\n        'inline-flex items-center gap-1.5 cursor-pointer select-none hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-sm',\n        sorted && 'text-foreground',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <span className=\"inline-flex flex-col -space-y-0.5\">\n        <svg\n          width=\"8\"\n          height=\"5\"\n          viewBox=\"0 0 8 5\"\n          className={cn('transition-colors', sorted === 'asc' ? 'text-foreground' : 'text-foreground-muted')}\n        >\n          <path d=\"M4 0L8 5H0L4 0Z\" fill=\"currentColor\" />\n        </svg>\n        <svg\n          width=\"8\"\n          height=\"5\"\n          viewBox=\"0 0 8 5\"\n          className={cn('transition-colors', sorted === 'desc' ? 'text-foreground' : 'text-foreground-muted')}\n        >\n          <path d=\"M4 5L0 0H8L4 5Z\" fill=\"currentColor\" />\n        </svg>\n      </span>\n    </button>\n  )\n}\n\nTable.displayName = 'Table'\nTableHeader.displayName = 'TableHeader'\nTableBody.displayName = 'TableBody'\nTableFooter.displayName = 'TableFooter'\nTableHead.displayName = 'TableHead'\nTableRow.displayName = 'TableRow'\nTableCell.displayName = 'TableCell'\nTableCaption.displayName = 'TableCaption'\nTableSortHeader.displayName = 'TableSortHeader'\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableSortHeader }\n"]}

package/dist/components/ui/table.d.cts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface TableProps extends React.ComponentProps<'table'> {
+    /** Size variant affecting cell padding and font size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Zebra-striped rows */
+    striped?: boolean;
+    /** Bordered cells */
+    bordered?: boolean;
+    /** Sticky header that stays visible when scrolling */
+    stickyHeader?: boolean;
+}
+declare function Table({ className, size, striped, bordered, stickyHeader, ...props }: TableProps): react_jsx_runtime.JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
+declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): react_jsx_runtime.JSX.Element;
+declare namespace TableHeader {
+    var displayName: string;
+}
+declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): react_jsx_runtime.JSX.Element;
+declare namespace TableBody {
+    var displayName: string;
+}
+declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): react_jsx_runtime.JSX.Element;
+declare namespace TableFooter {
+    var displayName: string;
+}
+declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): react_jsx_runtime.JSX.Element;
+declare namespace TableRow {
+    var displayName: string;
+}
+interface TableHeadProps extends React.ComponentProps<'th'> {
+    /** Sort direction — sets aria-sort on the <th> element */
+    sortDirection?: 'asc' | 'desc' | 'none';
+}
+declare function TableHead({ className, sortDirection, ...props }: TableHeadProps): react_jsx_runtime.JSX.Element;
+declare namespace TableHead {
+    var displayName: string;
+}
+declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): react_jsx_runtime.JSX.Element;
+declare namespace TableCell {
+    var displayName: string;
+}
+declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): react_jsx_runtime.JSX.Element;
+declare namespace TableCaption {
+    var displayName: string;
+}
+interface TableSortHeaderProps extends React.ComponentProps<'button'> {
+    /** Current sort direction */
+    sorted?: 'asc' | 'desc' | false;
+}
+declare function TableSortHeader({ className, children, sorted, ...props }: TableSortHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace TableSortHeader {
+    var displayName: string;
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortHeader };

package/dist/components/ui/table.d.ts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface TableProps extends React.ComponentProps<'table'> {
+    /** Size variant affecting cell padding and font size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Zebra-striped rows */
+    striped?: boolean;
+    /** Bordered cells */
+    bordered?: boolean;
+    /** Sticky header that stays visible when scrolling */
+    stickyHeader?: boolean;
+}
+declare function Table({ className, size, striped, bordered, stickyHeader, ...props }: TableProps): react_jsx_runtime.JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
+declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): react_jsx_runtime.JSX.Element;
+declare namespace TableHeader {
+    var displayName: string;
+}
+declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): react_jsx_runtime.JSX.Element;
+declare namespace TableBody {
+    var displayName: string;
+}
+declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): react_jsx_runtime.JSX.Element;
+declare namespace TableFooter {
+    var displayName: string;
+}
+declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): react_jsx_runtime.JSX.Element;
+declare namespace TableRow {
+    var displayName: string;
+}
+interface TableHeadProps extends React.ComponentProps<'th'> {
+    /** Sort direction — sets aria-sort on the <th> element */
+    sortDirection?: 'asc' | 'desc' | 'none';
+}
+declare function TableHead({ className, sortDirection, ...props }: TableHeadProps): react_jsx_runtime.JSX.Element;
+declare namespace TableHead {
+    var displayName: string;
+}
+declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): react_jsx_runtime.JSX.Element;
+declare namespace TableCell {
+    var displayName: string;
+}
+declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): react_jsx_runtime.JSX.Element;
+declare namespace TableCaption {
+    var displayName: string;
+}
+interface TableSortHeaderProps extends React.ComponentProps<'button'> {
+    /** Current sort direction */
+    sorted?: 'asc' | 'desc' | false;
+}
+declare function TableSortHeader({ className, children, sorted, ...props }: TableSortHeaderProps): react_jsx_runtime.JSX.Element;
+declare namespace TableSortHeader {
+    var displayName: string;
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortHeader };