@parto-system-design/ui 1.1.11 → 1.1.16

package/dist/components/brand/parto-logo.cjs

@@ -0,0 +1,130 @@
+'use strict';
+
+var React = require('react');
+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);
+
+// src/components/brand/parto-logo.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var IconSvg = React__namespace.forwardRef(({ size, className }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    ref,
+    viewBox: "0 0 75 75",
+    width: size,
+    height: size,
+    role: "img",
+    "aria-label": "Parto",
+    "data-slot": "parto-logo-icon",
+    className: cn("text-brand", className),
+    children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "75 0 0 0 0 25 75 0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "75 75 50 75 75 0 75 75" }),
+      /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "75 0 25 75 0 75 0 50 75 0" })
+    ] })
+  }
+));
+IconSvg.displayName = "PartoLogoIcon";
+var LogotypeSvg = React__namespace.forwardRef(
+  ({ height, className }, ref) => {
+    const aspectRatio = 106.03 / 48.15;
+    const width = Math.round(height * aspectRatio);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 106.03 48.15",
+        width,
+        height,
+        role: "img",
+        "aria-label": "\u067E\u0631\u062A\u0648",
+        "data-slot": "parto-logo-logotype",
+        className: cn("text-foreground", className),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "currentColor", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M41.44,0v6.02h18.75V0h-18.75Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.22,44.28H6.43l5.1-9.36.02-.04c-4.33-.08-7.61-2.21-9.19-4.14-1.58-1.94-2.36-4.57-2.36-7.9,0-4.28,1.23-7.54,3.71-9.79,2.47-2.24,6.4-3.36,11.8-3.36h18.21v19.23s11.43,0,11.43,0c2.07,0,3.64-.52,4.7-1.53,1.06-1.01,1.59-2.45,1.59-4.27v-13.43h8.74v12.74c-.06,3.2-.66,5.7-1.86,7.51-1.18,1.81-2.87,3.07-5.08,3.8-2.21.74-5.05,1.1-8.55,1.1h-19.28V15.55s-9.29,0-9.29,0c-1.82,0-3.27.19-4.33.57s-1.86,1.04-2.38,1.99c-.52.96-.77,2.35-.77,4.18v1.56c.04,1.63.28,2.89.71,3.81.43.9,1.18,1.59,2.24,2.05s2.57.69,4.52.69h6.37l-7.3,13.88Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M76.86,9.56h-8.21v20.23l-7.92,14.48h8.79l4.94-9.37v-.02h16.1c3.5,0,6.34-.36,8.55-1.1,2.21-.72,3.89-1.99,5.08-3.8.22-.33.4-.66.57-1.02.82-1.69,1.24-3.86,1.28-6.49v-12.78h-8.73v13.47c0,1.82-.53,3.26-1.59,4.27-1.06,1.01-2.63,1.53-4.7,1.53h-14.15V9.56Z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "97.58 38.26 81.25 38.26 81.25 44.28 91.72 44.28 91.72 48.15 97.58 48.15 97.58 38.26" })
+        ] })
+      }
+    );
+  }
+);
+LogotypeSvg.displayName = "PartoLogoLogotype";
+var PartoLogo = React__namespace.forwardRef(
+  ({ variant = "combined", size = 28, productName, className, ...props }, ref) => {
+    if (variant === "icon") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          "data-slot": "parto-logo",
+          "data-variant": "icon",
+          className: cn("inline-flex items-center", className),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconSvg, { size })
+        }
+      );
+    }
+    if (variant === "logotype") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          "data-slot": "parto-logo",
+          "data-variant": "logotype",
+          className: cn("inline-flex items-center", className),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx(LogotypeSvg, { height: size })
+        }
+      );
+    }
+    const iconSize = Math.round(size * 1.05);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "parto-logo",
+        "data-variant": "combined",
+        className: cn("inline-flex items-center gap-2.5", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconSvg, { size: iconSize }),
+          /* @__PURE__ */ jsxRuntime.jsx(LogotypeSvg, { height: size }),
+          productName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-slot": "parto-logo-divider", className: "h-5 w-px bg-border-stronger/60" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "parto-logo-product-name", className: "text-foreground-light text-sm font-medium", children: productName })
+          ] })
+        ]
+      }
+    );
+  }
+);
+PartoLogo.displayName = "PartoLogo";
+
+exports.PartoLogo = PartoLogo;
+//# sourceMappingURL=parto-logo.cjs.map
+//# sourceMappingURL=parto-logo.cjs.map

package/dist/components/brand/parto-logo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brand/parto-logo.tsx"],"names":["twMerge","clsx","React","jsx","jsxs","Fragment"],"mappings":"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","file":"parto-logo.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","import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Parto brand logo. Every Parto product surfaces this in its header / login /\n * empty-state / about screens so the brand stays visible while individual\n * product names live alongside it.\n *\n * Variants:\n * - `icon`     — the 75×75 brand mark (three triangular shapes). Uses the DS\n *                brand color by default (`text-brand`) but accepts any\n *                `className` overrides for one-off accents.\n * - `logotype` — the \"پرتو\" Persian wordmark. Uses `currentColor` so it\n *                inherits the parent's text color (works in both light\n *                and dark themes).\n * - `combined` — icon + wordmark side-by-side. The recommended default\n *                for headers and login pages.\n *\n * The SVGs are inlined here (kept tiny — under 1KB each) so consumers don't\n * have to copy logo files into `public/` and the component renders as plain\n * markup with no extra network requests.\n */\n\ntype Variant = 'icon' | 'logotype' | 'combined'\n\ninterface PartoLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  variant?: Variant\n  /**\n   * Height in pixels (icon-only) or wordmark height (logotype/combined).\n   * Width auto-scales to preserve aspect ratio.\n   */\n  size?: number\n  /**\n   * Set to a Persian product name to render as `پرتو | <name>` next to the\n   * logo. Skip for marketing surfaces where only the brand should appear.\n   */\n  productName?: string\n}\n\nconst IconSvg = React.forwardRef<SVGSVGElement, { size: number; className?: string }>(({ size, className }, ref) => (\n  <svg\n    ref={ref}\n    viewBox=\"0 0 75 75\"\n    width={size}\n    height={size}\n    role=\"img\"\n    aria-label=\"Parto\"\n    data-slot=\"parto-logo-icon\"\n    className={cn('text-brand', className)}\n  >\n    <g fill=\"currentColor\">\n      <polygon points=\"75 0 0 0 0 25 75 0\" />\n      <polygon points=\"75 75 50 75 75 0 75 75\" />\n      <polygon points=\"75 0 25 75 0 75 0 50 75 0\" />\n    </g>\n  </svg>\n))\nIconSvg.displayName = 'PartoLogoIcon'\n\nconst LogotypeSvg = React.forwardRef<SVGSVGElement, { height: number; className?: string }>(\n  ({ height, className }, ref) => {\n    const aspectRatio = 106.03 / 48.15\n    const width = Math.round(height * aspectRatio)\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 106.03 48.15\"\n        width={width}\n        height={height}\n        role=\"img\"\n        aria-label=\"پرتو\"\n        data-slot=\"parto-logo-logotype\"\n        className={cn('text-foreground', className)}\n      >\n        <g fill=\"currentColor\">\n          <path d=\"M41.44,0v6.02h18.75V0h-18.75Z\" />\n          <path d=\"M15.22,44.28H6.43l5.1-9.36.02-.04c-4.33-.08-7.61-2.21-9.19-4.14-1.58-1.94-2.36-4.57-2.36-7.9,0-4.28,1.23-7.54,3.71-9.79,2.47-2.24,6.4-3.36,11.8-3.36h18.21v19.23s11.43,0,11.43,0c2.07,0,3.64-.52,4.7-1.53,1.06-1.01,1.59-2.45,1.59-4.27v-13.43h8.74v12.74c-.06,3.2-.66,5.7-1.86,7.51-1.18,1.81-2.87,3.07-5.08,3.8-2.21.74-5.05,1.1-8.55,1.1h-19.28V15.55s-9.29,0-9.29,0c-1.82,0-3.27.19-4.33.57s-1.86,1.04-2.38,1.99c-.52.96-.77,2.35-.77,4.18v1.56c.04,1.63.28,2.89.71,3.81.43.9,1.18,1.59,2.24,2.05s2.57.69,4.52.69h6.37l-7.3,13.88Z\" />\n          <path d=\"M76.86,9.56h-8.21v20.23l-7.92,14.48h8.79l4.94-9.37v-.02h16.1c3.5,0,6.34-.36,8.55-1.1,2.21-.72,3.89-1.99,5.08-3.8.22-.33.4-.66.57-1.02.82-1.69,1.24-3.86,1.28-6.49v-12.78h-8.73v13.47c0,1.82-.53,3.26-1.59,4.27-1.06,1.01-2.63,1.53-4.7,1.53h-14.15V9.56Z\" />\n          <polygon points=\"97.58 38.26 81.25 38.26 81.25 44.28 91.72 44.28 91.72 48.15 97.58 48.15 97.58 38.26\" />\n        </g>\n      </svg>\n    )\n  }\n)\nLogotypeSvg.displayName = 'PartoLogoLogotype'\n\nconst PartoLogo = React.forwardRef<HTMLSpanElement, PartoLogoProps>(\n  ({ variant = 'combined', size = 28, productName, className, ...props }, ref) => {\n    if (variant === 'icon') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"parto-logo\"\n          data-variant=\"icon\"\n          className={cn('inline-flex items-center', className)}\n          {...props}\n        >\n          <IconSvg size={size} />\n        </span>\n      )\n    }\n\n    if (variant === 'logotype') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"parto-logo\"\n          data-variant=\"logotype\"\n          className={cn('inline-flex items-center', className)}\n          {...props}\n        >\n          <LogotypeSvg height={size} />\n        </span>\n      )\n    }\n\n    // combined (default): icon + wordmark, optionally followed by product name\n    const iconSize = Math.round(size * 1.05)\n    return (\n      <span\n        ref={ref}\n        data-slot=\"parto-logo\"\n        data-variant=\"combined\"\n        className={cn('inline-flex items-center gap-2.5', className)}\n        {...props}\n      >\n        <IconSvg size={iconSize} />\n        <LogotypeSvg height={size} />\n        {productName && (\n          <>\n            <span aria-hidden=\"true\" data-slot=\"parto-logo-divider\" className=\"h-5 w-px bg-border-stronger/60\" />\n            <span data-slot=\"parto-logo-product-name\" className=\"text-foreground-light text-sm font-medium\">\n              {productName}\n            </span>\n          </>\n        )}\n      </span>\n    )\n  }\n)\nPartoLogo.displayName = 'PartoLogo'\n\nexport { PartoLogo, type PartoLogoProps }\n"]}

package/dist/components/brand/parto-logo.d.cts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+/**
+ * Parto brand logo. Every Parto product surfaces this in its header / login /
+ * empty-state / about screens so the brand stays visible while individual
+ * product names live alongside it.
+ *
+ * Variants:
+ * - `icon`     — the 75×75 brand mark (three triangular shapes). Uses the DS
+ *                brand color by default (`text-brand`) but accepts any
+ *                `className` overrides for one-off accents.
+ * - `logotype` — the "پرتو" Persian wordmark. Uses `currentColor` so it
+ *                inherits the parent's text color (works in both light
+ *                and dark themes).
+ * - `combined` — icon + wordmark side-by-side. The recommended default
+ *                for headers and login pages.
+ *
+ * The SVGs are inlined here (kept tiny — under 1KB each) so consumers don't
+ * have to copy logo files into `public/` and the component renders as plain
+ * markup with no extra network requests.
+ */
+type Variant = 'icon' | 'logotype' | 'combined';
+interface PartoLogoProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: Variant;
+    /**
+     * Height in pixels (icon-only) or wordmark height (logotype/combined).
+     * Width auto-scales to preserve aspect ratio.
+     */
+    size?: number;
+    /**
+     * Set to a Persian product name to render as `پرتو | <name>` next to the
+     * logo. Skip for marketing surfaces where only the brand should appear.
+     */
+    productName?: string;
+}
+declare const PartoLogo: React.ForwardRefExoticComponent<PartoLogoProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { PartoLogo, type PartoLogoProps };

package/dist/components/brand/parto-logo.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+/**
+ * Parto brand logo. Every Parto product surfaces this in its header / login /
+ * empty-state / about screens so the brand stays visible while individual
+ * product names live alongside it.
+ *
+ * Variants:
+ * - `icon`     — the 75×75 brand mark (three triangular shapes). Uses the DS
+ *                brand color by default (`text-brand`) but accepts any
+ *                `className` overrides for one-off accents.
+ * - `logotype` — the "پرتو" Persian wordmark. Uses `currentColor` so it
+ *                inherits the parent's text color (works in both light
+ *                and dark themes).
+ * - `combined` — icon + wordmark side-by-side. The recommended default
+ *                for headers and login pages.
+ *
+ * The SVGs are inlined here (kept tiny — under 1KB each) so consumers don't
+ * have to copy logo files into `public/` and the component renders as plain
+ * markup with no extra network requests.
+ */
+type Variant = 'icon' | 'logotype' | 'combined';
+interface PartoLogoProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: Variant;
+    /**
+     * Height in pixels (icon-only) or wordmark height (logotype/combined).
+     * Width auto-scales to preserve aspect ratio.
+     */
+    size?: number;
+    /**
+     * Set to a Persian product name to render as `پرتو | <name>` next to the
+     * logo. Skip for marketing surfaces where only the brand should appear.
+     */
+    productName?: string;
+}
+declare const PartoLogo: React.ForwardRefExoticComponent<PartoLogoProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { PartoLogo, type PartoLogoProps };

package/dist/components/brand/parto-logo.js

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/brand/parto-logo.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var IconSvg = React.forwardRef(({ size, className }, ref) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    ref,
+    viewBox: "0 0 75 75",
+    width: size,
+    height: size,
+    role: "img",
+    "aria-label": "Parto",
+    "data-slot": "parto-logo-icon",
+    className: cn("text-brand", className),
+    children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
+      /* @__PURE__ */ jsx("polygon", { points: "75 0 0 0 0 25 75 0" }),
+      /* @__PURE__ */ jsx("polygon", { points: "75 75 50 75 75 0 75 75" }),
+      /* @__PURE__ */ jsx("polygon", { points: "75 0 25 75 0 75 0 50 75 0" })
+    ] })
+  }
+));
+IconSvg.displayName = "PartoLogoIcon";
+var LogotypeSvg = React.forwardRef(
+  ({ height, className }, ref) => {
+    const aspectRatio = 106.03 / 48.15;
+    const width = Math.round(height * aspectRatio);
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 106.03 48.15",
+        width,
+        height,
+        role: "img",
+        "aria-label": "\u067E\u0631\u062A\u0648",
+        "data-slot": "parto-logo-logotype",
+        className: cn("text-foreground", className),
+        children: /* @__PURE__ */ jsxs("g", { fill: "currentColor", children: [
+          /* @__PURE__ */ jsx("path", { d: "M41.44,0v6.02h18.75V0h-18.75Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M15.22,44.28H6.43l5.1-9.36.02-.04c-4.33-.08-7.61-2.21-9.19-4.14-1.58-1.94-2.36-4.57-2.36-7.9,0-4.28,1.23-7.54,3.71-9.79,2.47-2.24,6.4-3.36,11.8-3.36h18.21v19.23s11.43,0,11.43,0c2.07,0,3.64-.52,4.7-1.53,1.06-1.01,1.59-2.45,1.59-4.27v-13.43h8.74v12.74c-.06,3.2-.66,5.7-1.86,7.51-1.18,1.81-2.87,3.07-5.08,3.8-2.21.74-5.05,1.1-8.55,1.1h-19.28V15.55s-9.29,0-9.29,0c-1.82,0-3.27.19-4.33.57s-1.86,1.04-2.38,1.99c-.52.96-.77,2.35-.77,4.18v1.56c.04,1.63.28,2.89.71,3.81.43.9,1.18,1.59,2.24,2.05s2.57.69,4.52.69h6.37l-7.3,13.88Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M76.86,9.56h-8.21v20.23l-7.92,14.48h8.79l4.94-9.37v-.02h16.1c3.5,0,6.34-.36,8.55-1.1,2.21-.72,3.89-1.99,5.08-3.8.22-.33.4-.66.57-1.02.82-1.69,1.24-3.86,1.28-6.49v-12.78h-8.73v13.47c0,1.82-.53,3.26-1.59,4.27-1.06,1.01-2.63,1.53-4.7,1.53h-14.15V9.56Z" }),
+          /* @__PURE__ */ jsx("polygon", { points: "97.58 38.26 81.25 38.26 81.25 44.28 91.72 44.28 91.72 48.15 97.58 48.15 97.58 38.26" })
+        ] })
+      }
+    );
+  }
+);
+LogotypeSvg.displayName = "PartoLogoLogotype";
+var PartoLogo = React.forwardRef(
+  ({ variant = "combined", size = 28, productName, className, ...props }, ref) => {
+    if (variant === "icon") {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          "data-slot": "parto-logo",
+          "data-variant": "icon",
+          className: cn("inline-flex items-center", className),
+          ...props,
+          children: /* @__PURE__ */ jsx(IconSvg, { size })
+        }
+      );
+    }
+    if (variant === "logotype") {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          "data-slot": "parto-logo",
+          "data-variant": "logotype",
+          className: cn("inline-flex items-center", className),
+          ...props,
+          children: /* @__PURE__ */ jsx(LogotypeSvg, { height: size })
+        }
+      );
+    }
+    const iconSize = Math.round(size * 1.05);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "parto-logo",
+        "data-variant": "combined",
+        className: cn("inline-flex items-center gap-2.5", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(IconSvg, { size: iconSize }),
+          /* @__PURE__ */ jsx(LogotypeSvg, { height: size }),
+          productName && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "parto-logo-divider", className: "h-5 w-px bg-border-stronger/60" }),
+            /* @__PURE__ */ jsx("span", { "data-slot": "parto-logo-product-name", className: "text-foreground-light text-sm font-medium", children: productName })
+          ] })
+        ]
+      }
+    );
+  }
+);
+PartoLogo.displayName = "PartoLogo";
+
+export { PartoLogo };
+//# sourceMappingURL=parto-logo.js.map
+//# sourceMappingURL=parto-logo.js.map

package/dist/components/brand/parto-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brand/parto-logo.tsx"],"names":[],"mappings":"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","file":"parto-logo.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","import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * Parto brand logo. Every Parto product surfaces this in its header / login /\n * empty-state / about screens so the brand stays visible while individual\n * product names live alongside it.\n *\n * Variants:\n * - `icon`     — the 75×75 brand mark (three triangular shapes). Uses the DS\n *                brand color by default (`text-brand`) but accepts any\n *                `className` overrides for one-off accents.\n * - `logotype` — the \"پرتو\" Persian wordmark. Uses `currentColor` so it\n *                inherits the parent's text color (works in both light\n *                and dark themes).\n * - `combined` — icon + wordmark side-by-side. The recommended default\n *                for headers and login pages.\n *\n * The SVGs are inlined here (kept tiny — under 1KB each) so consumers don't\n * have to copy logo files into `public/` and the component renders as plain\n * markup with no extra network requests.\n */\n\ntype Variant = 'icon' | 'logotype' | 'combined'\n\ninterface PartoLogoProps extends React.HTMLAttributes<HTMLSpanElement> {\n  variant?: Variant\n  /**\n   * Height in pixels (icon-only) or wordmark height (logotype/combined).\n   * Width auto-scales to preserve aspect ratio.\n   */\n  size?: number\n  /**\n   * Set to a Persian product name to render as `پرتو | <name>` next to the\n   * logo. Skip for marketing surfaces where only the brand should appear.\n   */\n  productName?: string\n}\n\nconst IconSvg = React.forwardRef<SVGSVGElement, { size: number; className?: string }>(({ size, className }, ref) => (\n  <svg\n    ref={ref}\n    viewBox=\"0 0 75 75\"\n    width={size}\n    height={size}\n    role=\"img\"\n    aria-label=\"Parto\"\n    data-slot=\"parto-logo-icon\"\n    className={cn('text-brand', className)}\n  >\n    <g fill=\"currentColor\">\n      <polygon points=\"75 0 0 0 0 25 75 0\" />\n      <polygon points=\"75 75 50 75 75 0 75 75\" />\n      <polygon points=\"75 0 25 75 0 75 0 50 75 0\" />\n    </g>\n  </svg>\n))\nIconSvg.displayName = 'PartoLogoIcon'\n\nconst LogotypeSvg = React.forwardRef<SVGSVGElement, { height: number; className?: string }>(\n  ({ height, className }, ref) => {\n    const aspectRatio = 106.03 / 48.15\n    const width = Math.round(height * aspectRatio)\n    return (\n      <svg\n        ref={ref}\n        viewBox=\"0 0 106.03 48.15\"\n        width={width}\n        height={height}\n        role=\"img\"\n        aria-label=\"پرتو\"\n        data-slot=\"parto-logo-logotype\"\n        className={cn('text-foreground', className)}\n      >\n        <g fill=\"currentColor\">\n          <path d=\"M41.44,0v6.02h18.75V0h-18.75Z\" />\n          <path d=\"M15.22,44.28H6.43l5.1-9.36.02-.04c-4.33-.08-7.61-2.21-9.19-4.14-1.58-1.94-2.36-4.57-2.36-7.9,0-4.28,1.23-7.54,3.71-9.79,2.47-2.24,6.4-3.36,11.8-3.36h18.21v19.23s11.43,0,11.43,0c2.07,0,3.64-.52,4.7-1.53,1.06-1.01,1.59-2.45,1.59-4.27v-13.43h8.74v12.74c-.06,3.2-.66,5.7-1.86,7.51-1.18,1.81-2.87,3.07-5.08,3.8-2.21.74-5.05,1.1-8.55,1.1h-19.28V15.55s-9.29,0-9.29,0c-1.82,0-3.27.19-4.33.57s-1.86,1.04-2.38,1.99c-.52.96-.77,2.35-.77,4.18v1.56c.04,1.63.28,2.89.71,3.81.43.9,1.18,1.59,2.24,2.05s2.57.69,4.52.69h6.37l-7.3,13.88Z\" />\n          <path d=\"M76.86,9.56h-8.21v20.23l-7.92,14.48h8.79l4.94-9.37v-.02h16.1c3.5,0,6.34-.36,8.55-1.1,2.21-.72,3.89-1.99,5.08-3.8.22-.33.4-.66.57-1.02.82-1.69,1.24-3.86,1.28-6.49v-12.78h-8.73v13.47c0,1.82-.53,3.26-1.59,4.27-1.06,1.01-2.63,1.53-4.7,1.53h-14.15V9.56Z\" />\n          <polygon points=\"97.58 38.26 81.25 38.26 81.25 44.28 91.72 44.28 91.72 48.15 97.58 48.15 97.58 38.26\" />\n        </g>\n      </svg>\n    )\n  }\n)\nLogotypeSvg.displayName = 'PartoLogoLogotype'\n\nconst PartoLogo = React.forwardRef<HTMLSpanElement, PartoLogoProps>(\n  ({ variant = 'combined', size = 28, productName, className, ...props }, ref) => {\n    if (variant === 'icon') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"parto-logo\"\n          data-variant=\"icon\"\n          className={cn('inline-flex items-center', className)}\n          {...props}\n        >\n          <IconSvg size={size} />\n        </span>\n      )\n    }\n\n    if (variant === 'logotype') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"parto-logo\"\n          data-variant=\"logotype\"\n          className={cn('inline-flex items-center', className)}\n          {...props}\n        >\n          <LogotypeSvg height={size} />\n        </span>\n      )\n    }\n\n    // combined (default): icon + wordmark, optionally followed by product name\n    const iconSize = Math.round(size * 1.05)\n    return (\n      <span\n        ref={ref}\n        data-slot=\"parto-logo\"\n        data-variant=\"combined\"\n        className={cn('inline-flex items-center gap-2.5', className)}\n        {...props}\n      >\n        <IconSvg size={iconSize} />\n        <LogotypeSvg height={size} />\n        {productName && (\n          <>\n            <span aria-hidden=\"true\" data-slot=\"parto-logo-divider\" className=\"h-5 w-px bg-border-stronger/60\" />\n            <span data-slot=\"parto-logo-product-name\" className=\"text-foreground-light text-sm font-medium\">\n              {productName}\n            </span>\n          </>\n        )}\n      </span>\n    )\n  }\n)\nPartoLogo.displayName = 'PartoLogo'\n\nexport { PartoLogo, type PartoLogoProps }\n"]}