@david-richard/notify-ds 1.1.0 → 1.1.2

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import { Search, Hide, View, XCircle, Info, Check, Minus, ChevronDown, ChevronRight, ArrowUp2, ArrowDown2 } from './chunk-O55YYDMU.mjs';
 import * as React4 from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -5,7 +6,6 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// components/button.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -154,7 +154,7 @@ var InputField = React4.forwardRef(
         required && /* @__PURE__ */ jsx("span", { className: "text-[var(--color-brand-red,#EF2149)]", "aria-hidden": "true", children: " *" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: pillVariants({ state }), children: [
-        type === "search" && /* @__PURE__ */ jsx("span", { className: cn("shrink-0", iconColor), "aria-hidden": "true", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+        type === "search" && /* @__PURE__ */ jsx("span", { className: cn("shrink-0", iconColor), "aria-hidden": "true", children: /* @__PURE__ */ jsx(Search, { size: 16 }) }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -187,7 +187,7 @@ var InputField = React4.forwardRef(
             onClick: () => setShowPassword((v) => !v),
             className: cn("shrink-0 cursor-pointer", iconColor),
             "aria-label": showPassword ? "Hide password" : "Show password",
-            children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+            children: showPassword ? /* @__PURE__ */ jsx(Hide, { size: 16 }) : /* @__PURE__ */ jsx(View, { size: 16 })
           }
         ),
         !rightSlot && type === "search" && hasValue && !disabled && /* @__PURE__ */ jsx(
@@ -198,10 +198,10 @@ var InputField = React4.forwardRef(
             onClick: () => setHasValue(false),
             className: cn("shrink-0 cursor-pointer", iconColor),
             "aria-label": "Clear search",
-            children: /* @__PURE__ */ jsx(XCircleIcon, {})
+            children: /* @__PURE__ */ jsx(XCircle, { size: 16 })
           }
         ),
-        !rightSlot && state === "error" && type !== "password" && /* @__PURE__ */ jsx("span", { className: cn("shrink-0", iconColor), "aria-hidden": "true", children: /* @__PURE__ */ jsx(InfoCircleIcon, {}) })
+        !rightSlot && state === "error" && type !== "password" && /* @__PURE__ */ jsx("span", { className: cn("shrink-0", iconColor), "aria-hidden": "true", children: /* @__PURE__ */ jsx(Info, { size: 16 }) })
       ] }),
       (errorMessage || helperText) && /* @__PURE__ */ jsx(
         "p",
@@ -217,39 +217,6 @@ var InputField = React4.forwardRef(
   }
 );
 InputField.displayName = "InputField";
-function SearchIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "4.5" }),
-    /* @__PURE__ */ jsx("line", { x1: "10.5", y1: "10.5", x2: "14", y2: "14" })
-  ] });
-}
-function EyeIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5Z" }),
-    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "2" })
-  ] });
-}
-function EyeOffIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M2 2l12 12M6.5 6.5A2 2 0 0 0 9.5 9.5" }),
-    /* @__PURE__ */ jsx("path", { d: "M4.2 4.2C2.6 5.2 1 8 1 8s2.5 5 7 5c1.4 0 2.7-.4 3.8-1" }),
-    /* @__PURE__ */ jsx("path", { d: "M9.8 3.2C12.2 4.2 15 8 15 8s-.7 1.4-1.8 2.6" })
-  ] });
-}
-function XCircleIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5" }),
-    /* @__PURE__ */ jsx("line", { x1: "5.5", y1: "5.5", x2: "10.5", y2: "10.5" }),
-    /* @__PURE__ */ jsx("line", { x1: "10.5", y1: "5.5", x2: "5.5", y2: "10.5" })
-  ] });
-}
-function InfoCircleIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5" }),
-    /* @__PURE__ */ jsx("line", { x1: "8", y1: "7", x2: "8", y2: "11" }),
-    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5", r: "0.5", fill: "currentColor", stroke: "none" })
-  ] });
-}
 var Checkbox = React4.forwardRef(
   ({ label, indeterminate, helperText, disabled, checked, defaultChecked, className, onChange, ...props }, ref) => {
     const internalRef = React4.useRef(null);
@@ -299,8 +266,8 @@ var Checkbox = React4.forwardRef(
                 showCheck || showDash ? "border-transparent bg-[var(--color-secondary,#339FB8)] text-[var(--color-foreground,#000)]" : "border-[var(--color-secondary,#339FB8)] bg-transparent"
               ),
               children: [
-                showCheck && /* @__PURE__ */ jsx(CheckIcon, {}),
-                showDash && /* @__PURE__ */ jsx(DashIcon, {})
+                showCheck && /* @__PURE__ */ jsx(Check, { size: 12 }),
+                showDash && /* @__PURE__ */ jsx(Minus, { size: 12 })
               ]
             }
           ),
@@ -314,12 +281,6 @@ var Checkbox = React4.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-function CheckIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "1,4 4,7 10,1" }) });
-}
-function DashIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "9", y2: "1" }) });
-}
 var Radio = React4.forwardRef(
   ({ label, helperText, disabled, checked, defaultChecked, className, onChange, ...props }, ref) => {
     const [isChecked, setIsChecked] = React4.useState(!!defaultChecked);
@@ -562,8 +523,9 @@ var Selector = React4.forwardRef(
           icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
           /* @__PURE__ */ jsx("span", { children: label }),
           /* @__PURE__ */ jsx(
-            ChevronDownIcon,
+            ChevronDown,
             {
+              size: 12,
               className: cn(
                 "shrink-0 transition-transform duration-[120ms]",
                 open && "rotate-180"
@@ -579,23 +541,6 @@ Selector.displayName = "Selector";
 function SelectorGroup({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), children });
 }
-function ChevronDownIcon({ className }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 12 12",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      children: /* @__PURE__ */ jsx("polyline", { points: "2,4 6,8 10,4" })
-    }
-  );
-}
 function TabBar({
   tabs,
   value,
@@ -854,14 +799,14 @@ function Badge({ variant, size, icon, children, className, ...props }) {
 function TrendBadge({ value, decimals = 1, showArrow = true, className, ...props }) {
   const colorClass = value > 0 ? "text-[var(--color-success,#16A34A)]" : value < 0 ? "text-[var(--color-destructive,#EF2149)]" : "text-[var(--color-text-tertiary,#6B7280)]";
   const formatted = `${value > 0 ? "+" : ""}${value.toFixed(decimals)}%`;
-  const arrow = showArrow ? value > 0 ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : value < 0 ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : null : null;
+  const arrow = showArrow ? value > 0 ? /* @__PURE__ */ jsx(ArrowUp2, {}) : value < 0 ? /* @__PURE__ */ jsx(ArrowDown2, {}) : null : null;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       className: cn(
         "inline-flex items-center gap-1 whitespace-nowrap select-none",
-        "font-['Inter'] text-[12px] font-medium leading-tight",
-        "[&_svg]:size-3",
+        "font-['Inter'] text-[13px] font-medium leading-tight",
+        "[&_svg]:size-3.5",
         colorClass,
         className
       ),
@@ -873,12 +818,6 @@ function TrendBadge({ value, decimals = 1, showArrow = true, className, ...props
     }
   );
 }
-function ArrowUpIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "2,7 5,3 8,7" }) });
-}
-function ArrowDownIcon() {
-  return /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "2,3 5,7 8,3" }) });
-}
 function MetricTile({
   label,
   value,
@@ -893,9 +832,9 @@ function MetricTile({
   as: Tag = "div"
 }) {
   const valueSize = {
-    sm: "text-[18px]",
-    md: "text-[24px]",
-    lg: "text-[30px]"
+    sm: "text-[22px]",
+    md: "text-[28px]",
+    lg: "text-[34px]"
   }[size];
   const padding = {
     sm: "p-3",
@@ -929,14 +868,14 @@ function MetricTile({
             "span",
             {
               className: cn(
-                "font-['Inter'] text-[12px] font-normal leading-tight",
+                "font-['Inter'] text-[14px] font-normal leading-tight",
                 "text-[var(--color-text-tertiary,#6B7280)]",
                 loading && "h-3 w-24 rounded bg-gray-200"
               ),
               children: !loading && label
             }
           ),
-          !loading && (icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-tertiary,#6B7280)] [&_svg]:size-4", "aria-hidden": "true", children: icon }) : onClick ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-tertiary,#6B7280)] [&_svg]:size-3.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }) : null)
+          !loading && (icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-tertiary,#6B7280)] [&_svg]:size-4", "aria-hidden": "true", children: icon }) : onClick ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--color-text-tertiary,#6B7280)]", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) }) : null)
         ] }),
         /* @__PURE__ */ jsx(
           "span",
@@ -950,9 +889,9 @@ function MetricTile({
             children: !loading && value
           }
         ),
-        (trend !== void 0 || trendLabel) && !loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          trendLabel && /* @__PURE__ */ jsx("span", { className: "font-['Inter'] text-[12px] text-[var(--color-text-tertiary,#6B7280)]", children: trendLabel }),
-          trend !== void 0 && /* @__PURE__ */ jsx(TrendBadge, { value: trend })
+        (trend !== void 0 || trendLabel) && !loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          trendLabel ? /* @__PURE__ */ jsx("span", { className: "font-['Inter'] text-[13px] text-[var(--color-text-tertiary,#6B7280)]", children: trendLabel }) : /* @__PURE__ */ jsx("span", {}),
+          trend !== void 0 ? /* @__PURE__ */ jsx(TrendBadge, { value: trend }) : /* @__PURE__ */ jsx("span", {})
         ] }),
         loading && trend !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 h-4 w-16 rounded bg-gray-200" })
       ]
@@ -968,9 +907,6 @@ function MetricTileGrid({ cols = 2, children, className }) {
   }[cols];
   return /* @__PURE__ */ jsx("div", { className: cn("grid gap-3", colClass, className), children });
 }
-function ChevronRightIcon() {
-  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "5,3 9,7 5,11" }) });
-}
 
 export { Badge, BottomNav, BottomNavContainer, Button, Checkbox, IconButton, InputField, MetricTile, MetricTileGrid, Radio, RadioGroup, Selector, SelectorGroup, Switcher, TabBar, TabPanel, TabPanels, Toggle, TrendBadge, buttonVariants };
 //# sourceMappingURL=index.mjs.map