@parto-system-design/ui 1.1.9 → 1.1.16

package/dist/components/ui/table.js

@@ -0,0 +1,178 @@
+'use client';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Table({
+  className,
+  size = "md",
+  striped = false,
+  bordered = false,
+  stickyHeader = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("span", { className: "inline-flex flex-col -space-y-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "8",
+              height: "5",
+              viewBox: "0 0 8 5",
+              className: cn("transition-colors", sorted === "asc" ? "text-foreground" : "text-foreground-muted"),
+              children: /* @__PURE__ */ jsx("path", { d: "M4 0L8 5H0L4 0Z", fill: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "8",
+              height: "5",
+              viewBox: "0 0 8 5",
+              className: cn("transition-colors", sorted === "desc" ? "text-foreground" : "text-foreground-muted"),
+              children: /* @__PURE__ */ 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";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortHeader };
+//# sourceMappingURL=table.js.map
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/table.tsx"],"names":[],"mappings":"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","file":"table.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'\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/tabs.cjs

@@ -0,0 +1,140 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+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 TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+
+function useDocumentDirection() {
+  const [direction, setDirection] = React.useState("rtl");
+  React.useEffect(() => {
+    const getDirection = () => {
+      if (typeof document === "undefined") return "rtl";
+      const htmlDir = document.documentElement.getAttribute("dir");
+      if (htmlDir === "ltr" || htmlDir === "rtl") {
+        return htmlDir;
+      }
+      const computedDir = window.getComputedStyle(document.documentElement).direction;
+      return computedDir === "rtl" ? "rtl" : "ltr";
+    };
+    setDirection(getDirection());
+    const observer = new MutationObserver(() => {
+      setDirection(getDirection());
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return direction;
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var Tabs = React__namespace.forwardRef(({ dir, ...props }, ref) => {
+  const documentDir = useDocumentDirection();
+  const resolvedDir = dir ?? documentDir;
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { ref, dir: resolvedDir, ...props });
+});
+Tabs.displayName = "Tabs";
+var TabsList = React__namespace.forwardRef(
+  ({ className, variant = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      ref,
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "inline-flex items-center text-foreground-lighter",
+        // Default (pill) variant
+        variant === "default" && "rounded-lg bg-surface-200 p-1 gap-1",
+        // Underline variant
+        variant === "underline" && "border-b border-border gap-0",
+        // Outline variant
+        variant === "outline" && "rounded-lg border border-border gap-0",
+        // Sizes — height
+        size === "sm" && "h-8",
+        size === "md" && "h-9",
+        size === "lg" && "h-10",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+var TabsTrigger = React__namespace.forwardRef(
+  ({ className, children, icon, badge, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    TabsPrimitive__namespace.Trigger,
+    {
+      ref,
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        // Default (pill) variant
+        "[[data-variant=default]_&]:rounded-md [[data-variant=default]_&]:px-3 [[data-variant=default]_&]:data-[state=active]:bg-background [[data-variant=default]_&]:data-[state=active]:text-foreground [[data-variant=default]_&]:data-[state=active]:shadow-sm",
+        // Underline variant
+        "[[data-variant=underline]_&]:px-4 [[data-variant=underline]_&]:border-b-2 [[data-variant=underline]_&]:border-transparent [[data-variant=underline]_&]:rounded-none [[data-variant=underline]_&]:data-[state=active]:border-brand [[data-variant=underline]_&]:data-[state=active]:text-foreground",
+        // Outline variant
+        "[[data-variant=outline]_&]:px-4 [[data-variant=outline]_&]:border-e [[data-variant=outline]_&]:border-border [[data-variant=outline]_&]:last:border-e-0 [[data-variant=outline]_&]:first:rounded-s-lg [[data-variant=outline]_&]:last:rounded-e-lg [[data-variant=outline]_&]:data-[state=active]:bg-surface-200 [[data-variant=outline]_&]:data-[state=active]:text-foreground",
+        // Sizes
+        "[[data-size=sm]_&]:text-xs [[data-size=sm]_&]:h-full",
+        "[[data-size=md]_&]:text-sm [[data-size=md]_&]:h-full",
+        "[[data-size=lg]_&]:text-base [[data-size=lg]_&]:h-full",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: icon }),
+        children,
+        badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded-full bg-surface-300 text-2xs font-semibold", children: badge })
+      ]
+    }
+  )
+);
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+var TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Content,
+  {
+    ref,
+    "data-slot": "tabs-content",
+    className: cn(
+      "mt-2 p-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+//# sourceMappingURL=tabs.cjs.map
+//# sourceMappingURL=tabs.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/use-document-direction.ts","../../../src/lib/utils.ts","../../../src/components/ui/tabs.tsx"],"names":["useState","useEffect","twMerge","clsx","React","TabsPrimitive","jsx","jsxs"],"mappings":"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","file":"tabs.cjs","sourcesContent":["'use client'\n\nimport { useState, useEffect } from 'react'\n\ntype Direction = 'ltr' | 'rtl'\n\nfunction useDocumentDirection(): Direction {\n  const [direction, setDirection] = useState<Direction>('rtl')\n\n  useEffect(() => {\n    const getDirection = (): Direction => {\n      if (typeof document === 'undefined') return 'rtl'\n      const htmlDir = document.documentElement.getAttribute('dir')\n      if (htmlDir === 'ltr' || htmlDir === 'rtl') {\n        return htmlDir\n      }\n      const computedDir = window.getComputedStyle(document.documentElement).direction\n      return computedDir === 'rtl' ? 'rtl' : 'ltr'\n    }\n\n    setDirection(getDirection())\n\n    const observer = new MutationObserver(() => {\n      setDirection(getDirection())\n    })\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n    })\n\n    return () => observer.disconnect()\n  }, [])\n\n  return direction\n}\n\nexport { useDocumentDirection }\nexport type { Direction }\n","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 TabsPrimitive from '@radix-ui/react-tabs'\n\nimport { useDocumentDirection, type Direction } from '@/hooks/use-document-direction'\nimport { cn } from '@/lib/utils'\n\n/* -------------------------------------------------------------------------- */\n/*  Tabs Root                                                                  */\n/* -------------------------------------------------------------------------- */\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ dir, ...props }, ref) => {\n  // Forward document `dir` to Radix so ArrowLeft/ArrowRight semantics flip in RTL.\n  const documentDir = useDocumentDirection()\n  const resolvedDir = (dir as Direction) ?? documentDir\n  return <TabsPrimitive.Root ref={ref} dir={resolvedDir} {...props} />\n})\nTabs.displayName = 'Tabs'\n\n/* -------------------------------------------------------------------------- */\n/*  TabsList                                                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {\n  /** Visual variant */\n  variant?: 'default' | 'underline' | 'outline'\n  /** Size */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, variant = 'default', size = 'md', ...props }, ref) => (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        'inline-flex items-center text-foreground-lighter',\n        // Default (pill) variant\n        variant === 'default' && 'rounded-lg bg-surface-200 p-1 gap-1',\n        // Underline variant\n        variant === 'underline' && 'border-b border-border gap-0',\n        // Outline variant\n        variant === 'outline' && 'rounded-lg border border-border gap-0',\n        // Sizes — height\n        size === 'sm' && 'h-8',\n        size === 'md' && 'h-9',\n        size === 'lg' && 'h-10',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nTabsList.displayName = TabsPrimitive.List.displayName\n\n/* -------------------------------------------------------------------------- */\n/*  TabsTrigger                                                                */\n/* -------------------------------------------------------------------------- */\n\ninterface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {\n  /** Icon rendered before the label */\n  icon?: React.ReactNode\n  /** Badge/count rendered after the label */\n  badge?: React.ReactNode\n}\n\nconst TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n  ({ className, children, icon, badge, ...props }, ref) => (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n        // Default (pill) variant\n        '[[data-variant=default]_&]:rounded-md [[data-variant=default]_&]:px-3 [[data-variant=default]_&]:data-[state=active]:bg-background [[data-variant=default]_&]:data-[state=active]:text-foreground [[data-variant=default]_&]:data-[state=active]:shadow-sm',\n        // Underline variant\n        '[[data-variant=underline]_&]:px-4 [[data-variant=underline]_&]:border-b-2 [[data-variant=underline]_&]:border-transparent [[data-variant=underline]_&]:rounded-none [[data-variant=underline]_&]:data-[state=active]:border-brand [[data-variant=underline]_&]:data-[state=active]:text-foreground',\n        // Outline variant\n        '[[data-variant=outline]_&]:px-4 [[data-variant=outline]_&]:border-e [[data-variant=outline]_&]:border-border [[data-variant=outline]_&]:last:border-e-0 [[data-variant=outline]_&]:first:rounded-s-lg [[data-variant=outline]_&]:last:rounded-e-lg [[data-variant=outline]_&]:data-[state=active]:bg-surface-200 [[data-variant=outline]_&]:data-[state=active]:text-foreground',\n        // Sizes\n        '[[data-size=sm]_&]:text-xs [[data-size=sm]_&]:h-full',\n        '[[data-size=md]_&]:text-sm [[data-size=md]_&]:h-full',\n        '[[data-size=lg]_&]:text-base [[data-size=lg]_&]:h-full',\n        className\n      )}\n      {...props}\n    >\n      {icon && <span className=\"flex-shrink-0\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded-full bg-surface-300 text-2xs font-semibold\">\n          {badge}\n        </span>\n      )}\n    </TabsPrimitive.Trigger>\n  )\n)\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\n/* -------------------------------------------------------------------------- */\n/*  TabsContent                                                                */\n/* -------------------------------------------------------------------------- */\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    data-slot=\"tabs-content\"\n    className={cn(\n      'mt-2 p-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"]}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+    /** Visual variant */
+    variant?: 'default' | 'underline' | 'outline';
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+    /** Icon rendered before the label */
+    icon?: React.ReactNode;
+    /** Badge/count rendered after the label */
+    badge?: React.ReactNode;
+}
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+    /** Visual variant */
+    variant?: 'default' | 'underline' | 'outline';
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+    /** Icon rendered before the label */
+    icon?: React.ReactNode;
+    /** Badge/count rendered after the label */
+    badge?: React.ReactNode;
+}
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/ui/tabs.js

@@ -0,0 +1,115 @@
+'use client';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function useDocumentDirection() {
+  const [direction, setDirection] = useState("rtl");
+  useEffect(() => {
+    const getDirection = () => {
+      if (typeof document === "undefined") return "rtl";
+      const htmlDir = document.documentElement.getAttribute("dir");
+      if (htmlDir === "ltr" || htmlDir === "rtl") {
+        return htmlDir;
+      }
+      const computedDir = window.getComputedStyle(document.documentElement).direction;
+      return computedDir === "rtl" ? "rtl" : "ltr";
+    };
+    setDirection(getDirection());
+    const observer = new MutationObserver(() => {
+      setDirection(getDirection());
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["dir"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return direction;
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Tabs = React.forwardRef(({ dir, ...props }, ref) => {
+  const documentDir = useDocumentDirection();
+  const resolvedDir = dir ?? documentDir;
+  return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, dir: resolvedDir, ...props });
+});
+Tabs.displayName = "Tabs";
+var TabsList = React.forwardRef(
+  ({ className, variant = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "inline-flex items-center text-foreground-lighter",
+        // Default (pill) variant
+        variant === "default" && "rounded-lg bg-surface-200 p-1 gap-1",
+        // Underline variant
+        variant === "underline" && "border-b border-border gap-0",
+        // Outline variant
+        variant === "outline" && "rounded-lg border border-border gap-0",
+        // Sizes — height
+        size === "sm" && "h-8",
+        size === "md" && "h-9",
+        size === "lg" && "h-10",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef(
+  ({ className, children, icon, badge, ...props }, ref) => /* @__PURE__ */ jsxs(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        // Default (pill) variant
+        "[[data-variant=default]_&]:rounded-md [[data-variant=default]_&]:px-3 [[data-variant=default]_&]:data-[state=active]:bg-background [[data-variant=default]_&]:data-[state=active]:text-foreground [[data-variant=default]_&]:data-[state=active]:shadow-sm",
+        // Underline variant
+        "[[data-variant=underline]_&]:px-4 [[data-variant=underline]_&]:border-b-2 [[data-variant=underline]_&]:border-transparent [[data-variant=underline]_&]:rounded-none [[data-variant=underline]_&]:data-[state=active]:border-brand [[data-variant=underline]_&]:data-[state=active]:text-foreground",
+        // Outline variant
+        "[[data-variant=outline]_&]:px-4 [[data-variant=outline]_&]:border-e [[data-variant=outline]_&]:border-border [[data-variant=outline]_&]:last:border-e-0 [[data-variant=outline]_&]:first:rounded-s-lg [[data-variant=outline]_&]:last:rounded-e-lg [[data-variant=outline]_&]:data-[state=active]:bg-surface-200 [[data-variant=outline]_&]:data-[state=active]:text-foreground",
+        // Sizes
+        "[[data-size=sm]_&]:text-xs [[data-size=sm]_&]:h-full",
+        "[[data-size=md]_&]:text-sm [[data-size=md]_&]:h-full",
+        "[[data-size=lg]_&]:text-base [[data-size=lg]_&]:h-full",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: icon }),
+        children,
+        badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded-full bg-surface-300 text-2xs font-semibold", children: badge })
+      ]
+    }
+  )
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    "data-slot": "tabs-content",
+    className: cn(
+      "mt-2 p-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+//# sourceMappingURL=tabs.js.map
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/use-document-direction.ts","../../../src/lib/utils.ts","../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"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","file":"tabs.js","sourcesContent":["'use client'\n\nimport { useState, useEffect } from 'react'\n\ntype Direction = 'ltr' | 'rtl'\n\nfunction useDocumentDirection(): Direction {\n  const [direction, setDirection] = useState<Direction>('rtl')\n\n  useEffect(() => {\n    const getDirection = (): Direction => {\n      if (typeof document === 'undefined') return 'rtl'\n      const htmlDir = document.documentElement.getAttribute('dir')\n      if (htmlDir === 'ltr' || htmlDir === 'rtl') {\n        return htmlDir\n      }\n      const computedDir = window.getComputedStyle(document.documentElement).direction\n      return computedDir === 'rtl' ? 'rtl' : 'ltr'\n    }\n\n    setDirection(getDirection())\n\n    const observer = new MutationObserver(() => {\n      setDirection(getDirection())\n    })\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n    })\n\n    return () => observer.disconnect()\n  }, [])\n\n  return direction\n}\n\nexport { useDocumentDirection }\nexport type { Direction }\n","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 TabsPrimitive from '@radix-ui/react-tabs'\n\nimport { useDocumentDirection, type Direction } from '@/hooks/use-document-direction'\nimport { cn } from '@/lib/utils'\n\n/* -------------------------------------------------------------------------- */\n/*  Tabs Root                                                                  */\n/* -------------------------------------------------------------------------- */\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ dir, ...props }, ref) => {\n  // Forward document `dir` to Radix so ArrowLeft/ArrowRight semantics flip in RTL.\n  const documentDir = useDocumentDirection()\n  const resolvedDir = (dir as Direction) ?? documentDir\n  return <TabsPrimitive.Root ref={ref} dir={resolvedDir} {...props} />\n})\nTabs.displayName = 'Tabs'\n\n/* -------------------------------------------------------------------------- */\n/*  TabsList                                                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {\n  /** Visual variant */\n  variant?: 'default' | 'underline' | 'outline'\n  /** Size */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  ({ className, variant = 'default', size = 'md', ...props }, ref) => (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        'inline-flex items-center text-foreground-lighter',\n        // Default (pill) variant\n        variant === 'default' && 'rounded-lg bg-surface-200 p-1 gap-1',\n        // Underline variant\n        variant === 'underline' && 'border-b border-border gap-0',\n        // Outline variant\n        variant === 'outline' && 'rounded-lg border border-border gap-0',\n        // Sizes — height\n        size === 'sm' && 'h-8',\n        size === 'md' && 'h-9',\n        size === 'lg' && 'h-10',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nTabsList.displayName = TabsPrimitive.List.displayName\n\n/* -------------------------------------------------------------------------- */\n/*  TabsTrigger                                                                */\n/* -------------------------------------------------------------------------- */\n\ninterface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {\n  /** Icon rendered before the label */\n  icon?: React.ReactNode\n  /** Badge/count rendered after the label */\n  badge?: React.ReactNode\n}\n\nconst TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(\n  ({ className, children, icon, badge, ...props }, ref) => (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n        // Default (pill) variant\n        '[[data-variant=default]_&]:rounded-md [[data-variant=default]_&]:px-3 [[data-variant=default]_&]:data-[state=active]:bg-background [[data-variant=default]_&]:data-[state=active]:text-foreground [[data-variant=default]_&]:data-[state=active]:shadow-sm',\n        // Underline variant\n        '[[data-variant=underline]_&]:px-4 [[data-variant=underline]_&]:border-b-2 [[data-variant=underline]_&]:border-transparent [[data-variant=underline]_&]:rounded-none [[data-variant=underline]_&]:data-[state=active]:border-brand [[data-variant=underline]_&]:data-[state=active]:text-foreground',\n        // Outline variant\n        '[[data-variant=outline]_&]:px-4 [[data-variant=outline]_&]:border-e [[data-variant=outline]_&]:border-border [[data-variant=outline]_&]:last:border-e-0 [[data-variant=outline]_&]:first:rounded-s-lg [[data-variant=outline]_&]:last:rounded-e-lg [[data-variant=outline]_&]:data-[state=active]:bg-surface-200 [[data-variant=outline]_&]:data-[state=active]:text-foreground',\n        // Sizes\n        '[[data-size=sm]_&]:text-xs [[data-size=sm]_&]:h-full',\n        '[[data-size=md]_&]:text-sm [[data-size=md]_&]:h-full',\n        '[[data-size=lg]_&]:text-base [[data-size=lg]_&]:h-full',\n        className\n      )}\n      {...props}\n    >\n      {icon && <span className=\"flex-shrink-0\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded-full bg-surface-300 text-2xs font-semibold\">\n          {badge}\n        </span>\n      )}\n    </TabsPrimitive.Trigger>\n  )\n)\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\n/* -------------------------------------------------------------------------- */\n/*  TabsContent                                                                */\n/* -------------------------------------------------------------------------- */\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    data-slot=\"tabs-content\"\n    className={cn(\n      'mt-2 p-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      className\n    )}\n    {...props}\n  />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"]}