@parto-system-design/ui 1.1.9 → 1.1.16

package/dist/components/ui/slider.cjs

@@ -0,0 +1,129 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var SliderPrimitive = require('@radix-ui/react-slider');
+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 SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+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 Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  dir,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const _values = React__namespace.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  const documentDir = useDocumentDirection();
+  const resolvedDir = dir ?? documentDir;
+  const resolveThumbLabel = (index) => {
+    if (!ariaLabel) return void 0;
+    if (_values.length === 1) return ariaLabel;
+    return `${ariaLabel} ${index + 1}`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SliderPrimitive__namespace.Root,
+    {
+      "data-slot": "slider",
+      dir: resolvedDir,
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SliderPrimitive__namespace.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            "aria-label": resolveThumbLabel(index),
+            "aria-labelledby": ariaLabelledBy,
+            className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-background-surface-75 shadow-sm transition-all duration-150 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+Slider.displayName = "Slider";
+
+exports.Slider = Slider;
+//# sourceMappingURL=slider.cjs.map
+//# sourceMappingURL=slider.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/hooks/use-document-direction.ts","../../../src/components/ui/slider.tsx"],"names":["twMerge","clsx","useState","useEffect","React","jsxs","SliderPrimitive","jsx"],"mappings":"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","file":"slider.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 { 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","'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { cn } from '@/lib/utils'\nimport { useDocumentDirection, type Direction } from '@/hooks/use-document-direction'\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  dir,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),\n    [value, defaultValue, min, max]\n  )\n  const documentDir = useDocumentDirection()\n  const resolvedDir = (dir as Direction) ?? documentDir\n\n  // Radix scopes aria-label/labelledby to the Root, but axe (and screen readers)\n  // need them on each Thumb since the thumb is the actual aria input. Propagate\n  // down. For multi-thumb sliders, consumers should pass per-thumb labels via\n  // an array; we suffix with the thumb index in that case for disambiguation.\n  const resolveThumbLabel = (index: number): string | undefined => {\n    if (!ariaLabel) return undefined\n    if (_values.length === 1) return ariaLabel\n    return `${ariaLabel} ${index + 1}`\n  }\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      dir={resolvedDir}\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          aria-label={resolveThumbLabel(index)}\n          aria-labelledby={ariaLabelledBy}\n          className=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-background-surface-75 shadow-sm transition-all duration-150 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nSlider.displayName = 'Slider'\n\nexport { Slider }\n"]}

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+declare function Slider({ className, defaultValue, value, min, max, dir, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare namespace Slider {
+    var displayName: string;
+}
+
+export { Slider };

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+declare function Slider({ className, defaultValue, value, min, max, dir, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare namespace Slider {
+    var displayName: string;
+}
+
+export { Slider };

package/dist/components/ui/slider.js

@@ -0,0 +1,107 @@
+'use client';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+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 Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  dir,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const _values = React.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  const documentDir = useDocumentDirection();
+  const resolvedDir = dir ?? documentDir;
+  const resolveThumbLabel = (index) => {
+    if (!ariaLabel) return void 0;
+    if (_values.length === 1) return ariaLabel;
+    return `${ariaLabel} ${index + 1}`;
+  };
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      dir: resolvedDir,
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            "aria-label": resolveThumbLabel(index),
+            "aria-labelledby": ariaLabelledBy,
+            className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-background-surface-75 shadow-sm transition-all duration-150 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+Slider.displayName = "Slider";
+
+export { Slider };
+//# sourceMappingURL=slider.js.map
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/hooks/use-document-direction.ts","../../../src/components/ui/slider.tsx"],"names":[],"mappings":"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","file":"slider.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 { 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","'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { cn } from '@/lib/utils'\nimport { useDocumentDirection, type Direction } from '@/hooks/use-document-direction'\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  dir,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),\n    [value, defaultValue, min, max]\n  )\n  const documentDir = useDocumentDirection()\n  const resolvedDir = (dir as Direction) ?? documentDir\n\n  // Radix scopes aria-label/labelledby to the Root, but axe (and screen readers)\n  // need them on each Thumb since the thumb is the actual aria input. Propagate\n  // down. For multi-thumb sliders, consumers should pass per-thumb labels via\n  // an array; we suffix with the thumb index in that case for disambiguation.\n  const resolveThumbLabel = (index: number): string | undefined => {\n    if (!ariaLabel) return undefined\n    if (_values.length === 1) return ariaLabel\n    return `${ariaLabel} ${index + 1}`\n  }\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      dir={resolvedDir}\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          aria-label={resolveThumbLabel(index)}\n          aria-labelledby={ariaLabelledBy}\n          className=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-background-surface-75 shadow-sm transition-all duration-150 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nSlider.displayName = 'Slider'\n\nexport { Slider }\n"]}

package/dist/components/ui/social-platform-badge.cjs

@@ -0,0 +1,120 @@
+'use client';
+'use strict';
+
+var React = require('react');
+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);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var PLATFORM_META = {
+  instagram: {
+    label: "Instagram",
+    icon: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) })
+  },
+  twitter: {
+    label: "X",
+    icon: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.63 5.905-5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
+  },
+  tiktok: {
+    label: "TikTok",
+    icon: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.16 8.16 0 004.77 1.52V6.75a4.85 4.85 0 01-1-.06z" }) })
+  },
+  youtube: {
+    label: "YouTube",
+    icon: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) })
+  },
+  linkedin: {
+    label: "LinkedIn",
+    icon: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) })
+  },
+  telegram: {
+    label: "Telegram",
+    icon: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" }) })
+  },
+  threads: {
+    label: "Threads",
+    icon: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.868 1.205 8.617.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.749-1.752-2.98-.065-1.19.388-2.285 1.277-3.086.84-.754 2.02-1.164 3.43-1.19.954-.018 1.858.09 2.695.322-.082-.858-.372-1.502-.861-1.903-.529-.434-1.32-.658-2.332-.67-.884.01-1.63.23-2.22.65l-1.11-1.75c.97-.625 2.18-.95 3.6-.97h.022c1.63.02 2.976.497 3.898 1.385.955.92 1.444 2.25 1.51 3.95.23.073.46.149.682.232 1.69.64 2.847 1.635 3.406 2.946.859 2.002.86 5.139-1.773 7.674-1.797 1.742-3.993 2.525-6.935 2.545zm.098-10.02c-.745.01-1.377.186-1.882.523-.443.298-.706.733-.67 1.215.03.564.342 1.017.876 1.275.516.25 1.087.299 1.58.127.684-.24 1.34-.93 1.614-2.366a9.68 9.68 0 00-1.518-.774z" }) })
+  },
+  facebook: {
+    label: "Facebook",
+    icon: ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.875v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) })
+  }
+};
+var socialPlatformBadgeVariants = classVarianceAuthority.cva("inline-flex items-center font-medium transition-colors duration-150", {
+  variants: {
+    size: {
+      xs: "gap-1",
+      sm: "gap-1.5",
+      md: "gap-1.5",
+      lg: "gap-2"
+    },
+    variant: {
+      flat: "",
+      badge: "border border-border bg-surface-100"
+    }
+  },
+  compoundVariants: [
+    { variant: "badge", size: "xs", className: "px-1.5 py-0.5 rounded" },
+    { variant: "badge", size: "sm", className: "px-2 py-1 rounded" },
+    { variant: "badge", size: "md", className: "px-2.5 py-1 rounded-md" },
+    { variant: "badge", size: "lg", className: "px-3 py-1.5 rounded-md" }
+  ],
+  defaultVariants: { size: "sm", variant: "flat" }
+});
+var SIZE_CHILD_CLASSES = {
+  xs: { icon: "size-3", text: "text-xs" },
+  sm: { icon: "size-4", text: "text-xs" },
+  md: { icon: "size-5", text: "text-sm" },
+  lg: { icon: "size-6", text: "text-base" }
+};
+var SocialPlatformBadge = React__namespace.forwardRef(
+  ({ className, platform, size = "sm", showLabel = false, variant = "flat", style, ...props }, ref) => {
+    const meta = PLATFORM_META[platform];
+    const Icon = meta.icon;
+    const sizeClasses = SIZE_CHILD_CLASSES[size];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "social-platform-badge",
+        className: cn(socialPlatformBadgeVariants({ size, variant }), className),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: cn(sizeClasses.icon, "shrink-0"), style: { color: `var(--social-platform-${platform})` } }),
+          showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(sizeClasses.text, "text-foreground-light"), children: meta.label })
+        ]
+      }
+    );
+  }
+);
+SocialPlatformBadge.displayName = "SocialPlatformBadge";
+
+exports.SocialPlatformBadge = SocialPlatformBadge;
+exports.socialPlatformBadgeVariants = socialPlatformBadgeVariants;
+//# sourceMappingURL=social-platform-badge.cjs.map
+//# sourceMappingURL=social-platform-badge.cjs.map

package/dist/components/ui/social-platform-badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/social-platform-badge.tsx"],"names":["twMerge","clsx","jsx","cva","React","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACqBA,IAAM,aAAA,GAGF;AAAA,EACF,SAAA,EAAW;AAAA,IACT,KAAA,EAAO,WAAA;AAAA,IACP,MAAM,CAAC,EAAE,WAAU,qBACjBC,cAAA,CAAC,SAAI,SAAA,EAAsB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,gBAAe,aAAA,EAAY,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kjCAAijC,CAAA,EAC3jC;AAAA,GAEJ;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,GAAA;AAAA,IACP,MAAM,CAAC,EAAE,WAAU,qBACjBA,cAAA,CAAC,SAAI,SAAA,EAAsB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,gBAAe,aAAA,EAAY,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,4KAA2K,CAAA,EACrL;AAAA,GAEJ;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,QAAA;AAAA,IACP,MAAM,CAAC,EAAE,WAAU,qBACjBA,cAAA,CAAC,SAAI,SAAA,EAAsB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,gBAAe,aAAA,EAAY,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,8SAA6S,CAAA,EACvT;AAAA,GAEJ;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAM,CAAC,EAAE,WAAU,qBACjBA,cAAA,CAAC,SAAI,SAAA,EAAsB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,gBAAe,aAAA,EAAY,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,yVAAwV,CAAA,EAClW;AAAA,GAEJ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,UAAA;AAAA,IACP,MAAM,CAAC,EAAE,WAAU,qBACjBA,cAAA,CAAC,SAAI,SAAA,EAAsB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,gBAAe,aAAA,EAAY,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sbAAqb,CAAA,EAC/b;AAAA,GAEJ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,UAAA;AAAA,IACP,MAAM,CAAC,EAAE,WAAU,qBACjBA,cAAA,CAAC,SAAI,SAAA,EAAsB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,gBAAe,aAAA,EAAY,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,+mBAA8mB,CAAA,EACxnB;AAAA,GAEJ;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAM,CAAC,EAAE,WAAU,qBACjBA,cAAA,CAAC,SAAI,SAAA,EAAsB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,gBAAe,aAAA,EAAY,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,krCAAirC,CAAA,EAC3rC;AAAA,GAEJ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,UAAA;AAAA,IACP,MAAM,CAAC,EAAE,WAAU,qBACjBA,cAAA,CAAC,SAAI,SAAA,EAAsB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,gBAAe,aAAA,EAAY,MAAA,EAC7E,yCAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kSAAiS,CAAA,EAC3S;AAAA;AAGN,CAAA;AAEA,IAAM,2BAAA,GAA8BC,2BAAI,qEAAA,EAAuE;AAAA,EAC7G,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,OAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,EAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,OAAA,EAAS,OAAA,EAAS,IAAA,EAAM,IAAA,EAAM,WAAW,uBAAA,EAAwB;AAAA,IACnE,EAAE,OAAA,EAAS,OAAA,EAAS,IAAA,EAAM,IAAA,EAAM,WAAW,mBAAA,EAAoB;AAAA,IAC/D,EAAE,OAAA,EAAS,OAAA,EAAS,IAAA,EAAM,IAAA,EAAM,WAAW,wBAAA,EAAyB;AAAA,IACpE,EAAE,OAAA,EAAS,OAAA,EAAS,IAAA,EAAM,IAAA,EAAM,WAAW,wBAAA;AAAyB,GACtE;AAAA,EACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA,EAAM,SAAS,MAAA;AAC1C,CAAC;AAGD,IAAM,kBAAA,GAAqB;AAAA,EACzB,EAAA,EAAI,EAAE,IAAA,EAAM,QAAA,EAAU,MAAM,SAAA,EAAU;AAAA,EACtC,EAAA,EAAI,EAAE,IAAA,EAAM,QAAA,EAAU,MAAM,SAAA,EAAU;AAAA,EACtC,EAAA,EAAI,EAAE,IAAA,EAAM,QAAA,EAAU,MAAM,SAAA,EAAU;AAAA,EACtC,EAAA,EAAI,EAAE,IAAA,EAAM,QAAA,EAAU,MAAM,WAAA;AAC9B,CAAA;AAEA,IAAM,mBAAA,GAA4BC,gBAAA,CAAA,UAAA;AAAA,EAChC,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,OAAO,IAAA,EAAM,SAAA,GAAY,KAAA,EAAO,OAAA,GAAU,MAAA,EAAQ,KAAA,EAAO,GAAG,KAAA,IAAS,GAAA,KAAQ;AACnG,IAAA,MAAM,IAAA,GAAO,cAAc,QAAQ,CAAA;AACnC,IAAA,MAAM,OAAO,IAAA,CAAK,IAAA;AAClB,IAAA,MAAM,WAAA,GAAc,mBAAmB,IAAI,CAAA;AAE3C,IAAA,uBACEC,eAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,uBAAA;AAAA,QACV,SAAA,EAAW,GAAG,2BAAA,CAA4B,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACvE,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAH,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,WAAA,CAAY,IAAA,EAAM,UAAU,CAAA,EAAG,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,sBAAA,EAAyB,QAAQ,KAAI,EAAG,CAAA;AAAA,UAC1G,SAAA,oBAAaA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,YAAY,IAAA,EAAM,uBAAuB,CAAA,EAAI,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM;AAAA;AAAA;AAAA,KAC5F;AAAA,EAEJ;AACF;AAEA,mBAAA,CAAoB,WAAA,GAAc,qBAAA","file":"social-platform-badge.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 { cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\nexport type SocialPlatform =\n  | 'instagram'\n  | 'twitter'\n  | 'tiktok'\n  | 'youtube'\n  | 'linkedin'\n  | 'telegram'\n  | 'threads'\n  | 'facebook'\n\nexport interface SocialPlatformBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The social media platform to display */\n  platform: SocialPlatform\n  /** Size of the badge */\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  /** Show the platform name label */\n  showLabel?: boolean\n  /** Visual style of the badge */\n  variant?: 'flat' | 'badge'\n}\n\nconst PLATFORM_META: Record<\n  SocialPlatform,\n  { label: string; icon: React.FC<{ className?: string; style?: React.CSSProperties }> }\n> = {\n  instagram: {\n    label: 'Instagram',\n    icon: ({ className }) => (\n      <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\" />\n      </svg>\n    ),\n  },\n  twitter: {\n    label: 'X',\n    icon: ({ className }) => (\n      <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.63 5.905-5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n      </svg>\n    ),\n  },\n  tiktok: {\n    label: 'TikTok',\n    icon: ({ className }) => (\n      <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.16 8.16 0 004.77 1.52V6.75a4.85 4.85 0 01-1-.06z\" />\n      </svg>\n    ),\n  },\n  youtube: {\n    label: 'YouTube',\n    icon: ({ className }) => (\n      <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z\" />\n      </svg>\n    ),\n  },\n  linkedin: {\n    label: 'LinkedIn',\n    icon: ({ className }) => (\n      <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\" />\n      </svg>\n    ),\n  },\n  telegram: {\n    label: 'Telegram',\n    icon: ({ className }) => (\n      <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z\" />\n      </svg>\n    ),\n  },\n  threads: {\n    label: 'Threads',\n    icon: ({ className }) => (\n      <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.868 1.205 8.617.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.749-1.752-2.98-.065-1.19.388-2.285 1.277-3.086.84-.754 2.02-1.164 3.43-1.19.954-.018 1.858.09 2.695.322-.082-.858-.372-1.502-.861-1.903-.529-.434-1.32-.658-2.332-.67-.884.01-1.63.23-2.22.65l-1.11-1.75c.97-.625 2.18-.95 3.6-.97h.022c1.63.02 2.976.497 3.898 1.385.955.92 1.444 2.25 1.51 3.95.23.073.46.149.682.232 1.69.64 2.847 1.635 3.406 2.946.859 2.002.86 5.139-1.773 7.674-1.797 1.742-3.993 2.525-6.935 2.545zm.098-10.02c-.745.01-1.377.186-1.882.523-.443.298-.706.733-.67 1.215.03.564.342 1.017.876 1.275.516.25 1.087.299 1.58.127.684-.24 1.34-.93 1.614-2.366a9.68 9.68 0 00-1.518-.774z\" />\n      </svg>\n    ),\n  },\n  facebook: {\n    label: 'Facebook',\n    icon: ({ className }) => (\n      <svg className={className} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n        <path d=\"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.875v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z\" />\n      </svg>\n    ),\n  },\n}\n\nconst socialPlatformBadgeVariants = cva('inline-flex items-center font-medium transition-colors duration-150', {\n  variants: {\n    size: {\n      xs: 'gap-1',\n      sm: 'gap-1.5',\n      md: 'gap-1.5',\n      lg: 'gap-2',\n    },\n    variant: {\n      flat: '',\n      badge: 'border border-border bg-surface-100',\n    },\n  },\n  compoundVariants: [\n    { variant: 'badge', size: 'xs', className: 'px-1.5 py-0.5 rounded' },\n    { variant: 'badge', size: 'sm', className: 'px-2 py-1 rounded' },\n    { variant: 'badge', size: 'md', className: 'px-2.5 py-1 rounded-md' },\n    { variant: 'badge', size: 'lg', className: 'px-3 py-1.5 rounded-md' },\n  ],\n  defaultVariants: { size: 'sm', variant: 'flat' },\n})\n\n/** Size-specific classes for child elements (icon, text) */\nconst SIZE_CHILD_CLASSES = {\n  xs: { icon: 'size-3', text: 'text-xs' },\n  sm: { icon: 'size-4', text: 'text-xs' },\n  md: { icon: 'size-5', text: 'text-sm' },\n  lg: { icon: 'size-6', text: 'text-base' },\n}\n\nconst SocialPlatformBadge = React.forwardRef<HTMLSpanElement, SocialPlatformBadgeProps>(\n  ({ className, platform, size = 'sm', showLabel = false, variant = 'flat', style, ...props }, ref) => {\n    const meta = PLATFORM_META[platform]\n    const Icon = meta.icon\n    const sizeClasses = SIZE_CHILD_CLASSES[size]\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"social-platform-badge\"\n        className={cn(socialPlatformBadgeVariants({ size, variant }), className)}\n        style={style}\n        {...props}\n      >\n        <Icon className={cn(sizeClasses.icon, 'shrink-0')} style={{ color: `var(--social-platform-${platform})` }} />\n        {showLabel && <span className={cn(sizeClasses.text, 'text-foreground-light')}>{meta.label}</span>}\n      </span>\n    )\n  }\n)\n\nSocialPlatformBadge.displayName = 'SocialPlatformBadge'\n\nexport { SocialPlatformBadge, socialPlatformBadgeVariants }\n"]}

package/dist/components/ui/social-platform-badge.d.cts

@@ -0,0 +1,21 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type SocialPlatform = 'instagram' | 'twitter' | 'tiktok' | 'youtube' | 'linkedin' | 'telegram' | 'threads' | 'facebook';
+interface SocialPlatformBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** The social media platform to display */
+    platform: SocialPlatform;
+    /** Size of the badge */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Show the platform name label */
+    showLabel?: boolean;
+    /** Visual style of the badge */
+    variant?: 'flat' | 'badge';
+}
+declare const socialPlatformBadgeVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    variant?: "flat" | "badge" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const SocialPlatformBadge: React.ForwardRefExoticComponent<SocialPlatformBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { type SocialPlatform, SocialPlatformBadge, type SocialPlatformBadgeProps, socialPlatformBadgeVariants };

package/dist/components/ui/social-platform-badge.d.ts

@@ -0,0 +1,21 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+
+type SocialPlatform = 'instagram' | 'twitter' | 'tiktok' | 'youtube' | 'linkedin' | 'telegram' | 'threads' | 'facebook';
+interface SocialPlatformBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** The social media platform to display */
+    platform: SocialPlatform;
+    /** Size of the badge */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Show the platform name label */
+    showLabel?: boolean;
+    /** Visual style of the badge */
+    variant?: 'flat' | 'badge';
+}
+declare const socialPlatformBadgeVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    variant?: "flat" | "badge" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const SocialPlatformBadge: React.ForwardRefExoticComponent<SocialPlatformBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { type SocialPlatform, SocialPlatformBadge, type SocialPlatformBadgeProps, socialPlatformBadgeVariants };

package/dist/components/ui/social-platform-badge.js

@@ -0,0 +1,97 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var PLATFORM_META = {
+  instagram: {
+    label: "Instagram",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) })
+  },
+  twitter: {
+    label: "X",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.63 5.905-5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
+  },
+  tiktok: {
+    label: "TikTok",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.16 8.16 0 004.77 1.52V6.75a4.85 4.85 0 01-1-.06z" }) })
+  },
+  youtube: {
+    label: "YouTube",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) })
+  },
+  linkedin: {
+    label: "LinkedIn",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) })
+  },
+  telegram: {
+    label: "Telegram",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" }) })
+  },
+  threads: {
+    label: "Threads",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.868 1.205 8.617.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.749-1.752-2.98-.065-1.19.388-2.285 1.277-3.086.84-.754 2.02-1.164 3.43-1.19.954-.018 1.858.09 2.695.322-.082-.858-.372-1.502-.861-1.903-.529-.434-1.32-.658-2.332-.67-.884.01-1.63.23-2.22.65l-1.11-1.75c.97-.625 2.18-.95 3.6-.97h.022c1.63.02 2.976.497 3.898 1.385.955.92 1.444 2.25 1.51 3.95.23.073.46.149.682.232 1.69.64 2.847 1.635 3.406 2.946.859 2.002.86 5.139-1.773 7.674-1.797 1.742-3.993 2.525-6.935 2.545zm.098-10.02c-.745.01-1.377.186-1.882.523-.443.298-.706.733-.67 1.215.03.564.342 1.017.876 1.275.516.25 1.087.299 1.58.127.684-.24 1.34-.93 1.614-2.366a9.68 9.68 0 00-1.518-.774z" }) })
+  },
+  facebook: {
+    label: "Facebook",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.875v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) })
+  }
+};
+var socialPlatformBadgeVariants = cva("inline-flex items-center font-medium transition-colors duration-150", {
+  variants: {
+    size: {
+      xs: "gap-1",
+      sm: "gap-1.5",
+      md: "gap-1.5",
+      lg: "gap-2"
+    },
+    variant: {
+      flat: "",
+      badge: "border border-border bg-surface-100"
+    }
+  },
+  compoundVariants: [
+    { variant: "badge", size: "xs", className: "px-1.5 py-0.5 rounded" },
+    { variant: "badge", size: "sm", className: "px-2 py-1 rounded" },
+    { variant: "badge", size: "md", className: "px-2.5 py-1 rounded-md" },
+    { variant: "badge", size: "lg", className: "px-3 py-1.5 rounded-md" }
+  ],
+  defaultVariants: { size: "sm", variant: "flat" }
+});
+var SIZE_CHILD_CLASSES = {
+  xs: { icon: "size-3", text: "text-xs" },
+  sm: { icon: "size-4", text: "text-xs" },
+  md: { icon: "size-5", text: "text-sm" },
+  lg: { icon: "size-6", text: "text-base" }
+};
+var SocialPlatformBadge = React.forwardRef(
+  ({ className, platform, size = "sm", showLabel = false, variant = "flat", style, ...props }, ref) => {
+    const meta = PLATFORM_META[platform];
+    const Icon = meta.icon;
+    const sizeClasses = SIZE_CHILD_CLASSES[size];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "social-platform-badge",
+        className: cn(socialPlatformBadgeVariants({ size, variant }), className),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: cn(sizeClasses.icon, "shrink-0"), style: { color: `var(--social-platform-${platform})` } }),
+          showLabel && /* @__PURE__ */ jsx("span", { className: cn(sizeClasses.text, "text-foreground-light"), children: meta.label })
+        ]
+      }
+    );
+  }
+);
+SocialPlatformBadge.displayName = "SocialPlatformBadge";
+
+export { SocialPlatformBadge, socialPlatformBadgeVariants };
+//# sourceMappingURL=social-platform-badge.js.map
+//# sourceMappingURL=social-platform-badge.js.map