@yuno-payments/dashboard-design-system 0.0.53-beta.2 → 0.0.53

package/dist/components/atoms/index.d.ts

@@ -16,6 +16,7 @@ export { Input, type InputProps } from './input';
 export { NavLink, type NavLinkProps } from './nav-link';
 export { Select, type SelectProps, type SelectOption, type SelectOptionGroup, } from './select';
 export { Link, type LinkProps } from './link';
+export { MultiSelect, type MultiSelectProps, type MultiSelectOption, } from './multi-select';
 export { RadioGroup, type RadioGroupProps, type RadioOption, RadioGroupBase, RadioGroupItem, } from './radio-group';
 export { Skeleton } from './skeleton';
 export { Separator, type SeparatorProps } from './separator';

package/dist/components/atoms/multi-select/index.d.ts

@@ -0,0 +1,2 @@
+export { MultiSelect } from './multi-select';
+export type { MultiSelectProps, MultiSelectOption } from './multi-select';

package/dist/components/atoms/multi-select/multi-select.d.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+}
+export interface MultiSelectProps {
+    /**
+     * Array of options to display in the dropdown
+     */
+    options: MultiSelectOption[];
+    /**
+     * Currently selected values (array of value strings)
+     */
+    value?: string[];
+    /**
+     * Callback fired when selection changes
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * Placeholder text when no items are selected
+     */
+    placeholder?: string;
+    /**
+     * Placeholder text for the search input
+     */
+    searchPlaceholder?: string;
+    /**
+     * Message to display when no options match the search
+     */
+    emptyMessage?: string;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional label for the multi-select
+     */
+    label?: string;
+    /**
+     * Optional description text
+     */
+    description?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Maximum number of items to display as badges before showing count
+     */
+    maxDisplay?: number;
+    /**
+     * Additional CSS classes for the trigger button
+     */
+    className?: string;
+    /**
+     * Whether to show badges for selected items
+     */
+    showBadges?: boolean;
+    /**
+     * Whether to allow clearing all selections
+     */
+    allowClear?: boolean;
+}
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/atoms/multi-select/multi-select.js

@@ -0,0 +1,160 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import * as c from "react";
+import { cn as j } from "../../../lib/utils.js";
+import { Button as B } from "../../../vendor/shadcn/button.js";
+import { Command as E, CommandInput as F, CommandEmpty as I, CommandList as A, CommandGroup as G, CommandItem as T } from "../../../vendor/shadcn/command.js";
+import { Popover as W, PopoverTrigger as X, PopoverContent as q } from "../../../vendor/shadcn/popover.js";
+import g from "../../../node_modules/lucide-react/dist/esm/icons/x.js";
+import z from "../../../node_modules/lucide-react/dist/esm/icons/check.js";
+const D = c.forwardRef(
+  ({
+    options: m,
+    value: s = [],
+    onValueChange: l,
+    placeholder: b = "Select items...",
+    searchPlaceholder: w = "Search...",
+    emptyMessage: N = "No results found.",
+    disabled: v = !1,
+    label: i,
+    description: u,
+    error: o,
+    maxDisplay: a = 3,
+    className: C,
+    showBadges: x = !0,
+    allowClear: y = !0
+  }, k) => {
+    const [h, S] = c.useState(!1), [p, L] = c.useState(""), P = (t) => {
+      const r = s.includes(t) ? s.filter((d) => d !== t) : [...s, t];
+      l?.(r);
+    }, V = (t, r) => {
+      r?.preventDefault(), r?.stopPropagation();
+      const d = s.filter((R) => R !== t);
+      l?.(d);
+    }, O = (t) => {
+      t.preventDefault(), t.stopPropagation(), l?.([]);
+    }, n = s.map((t) => m.find((r) => r.value === t)).filter(Boolean), M = x ? n.slice(0, a) : [], f = n.length > a ? n.length - a : 0;
+    return /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
+      i && /* @__PURE__ */ e.jsx("label", { className: "text-sm font-medium text-foreground mb-1.5 block", children: i }),
+      u && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground mb-2", children: u }),
+      /* @__PURE__ */ e.jsxs(W, { open: h, onOpenChange: S, children: [
+        /* @__PURE__ */ e.jsx(X, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          B,
+          {
+            ref: k,
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": h,
+            disabled: v,
+            className: j(
+              "w-full justify-between h-auto min-h-9 py-2",
+              o && "border-destructive",
+              !s.length && "text-muted-foreground",
+              C
+            ),
+            children: [
+              /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-1 items-center flex-1", children: s.length === 0 ? /* @__PURE__ */ e.jsx("span", { children: b }) : x ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                M.map((t) => /* @__PURE__ */ e.jsxs(
+                  "span",
+                  {
+                    className: "inline-flex items-center mr-1 px-2 py-0.5 h-6 text-xs font-normal rounded-md border border-border bg-secondary text-secondary-foreground",
+                    children: [
+                      /* @__PURE__ */ e.jsx("span", { className: "max-w-[150px] truncate", children: t.label }),
+                      /* @__PURE__ */ e.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "ml-1 rounded-full outline-hidden hover:bg-muted-foreground/20",
+                          onClick: (r) => V(t.value, r),
+                          children: /* @__PURE__ */ e.jsx(g, { className: "h-3 w-3" })
+                        }
+                      )
+                    ]
+                  },
+                  t.value
+                )),
+                f > 0 && /* @__PURE__ */ e.jsxs("span", { className: "inline-flex items-center px-2 py-0.5 h-6 text-xs font-normal rounded-md border border-border bg-secondary text-secondary-foreground", children: [
+                  "+",
+                  f,
+                  " more"
+                ] })
+              ] }) : /* @__PURE__ */ e.jsxs("span", { className: "text-sm", children: [
+                n.length,
+                " selected"
+              ] }) }),
+              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 ml-2", children: [
+                y && s.length > 0 && /* @__PURE__ */ e.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: O,
+                    className: "h-4 w-4 rounded-full hover:bg-muted p-0.5",
+                    children: /* @__PURE__ */ e.jsx(g, { className: "h-3 w-3" })
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  "svg",
+                  {
+                    className: "h-4 w-4 shrink-0 opacity-50",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ e.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M19 9l-7 7-7-7"
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(q, { className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ e.jsxs(E, { shouldFilter: !1, children: [
+          /* @__PURE__ */ e.jsx(
+            F,
+            {
+              placeholder: w,
+              value: p,
+              onValueChange: L
+            }
+          ),
+          /* @__PURE__ */ e.jsx(I, { children: N }),
+          /* @__PURE__ */ e.jsx(A, { children: /* @__PURE__ */ e.jsx(G, { children: m.filter(
+            (t) => t.label.toLowerCase().includes(p.toLowerCase())
+          ).map((t) => /* @__PURE__ */ e.jsxs(
+            T,
+            {
+              value: t.value,
+              onSelect: () => {
+                P(t.value);
+              },
+              children: [
+                /* @__PURE__ */ e.jsx(
+                  z,
+                  {
+                    className: j(
+                      "mr-2 h-4 w-4",
+                      s.includes(t.value) ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                t.label
+              ]
+            },
+            t.value
+          )) }) })
+        ] }) })
+      ] }),
+      o && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-destructive mt-1.5", children: o })
+    ] });
+  }
+);
+D.displayName = "MultiSelect";
+export {
+  D as MultiSelect
+};

package/dist/components/atoms/tooltip/tooltip.d.ts

@@ -9,6 +9,7 @@ interface TooltipProps extends ShadcnTooltipRootProps {
     contentProps?: TooltipContentProps;
     providerProps?: TooltipProviderProps;
     triggerProps?: TooltipTriggerProps;
+    show?: boolean;
 }
 declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Tooltip, TooltipProvider, type TooltipProps, type TooltipProviderProps };
+export { Tooltip, TooltipProvider, type TooltipProps, type TooltipProviderProps, };

package/dist/components/atoms/tooltip/tooltip.js

@@ -1,21 +1,22 @@
 import { j as o } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as m } from "react";
-import { TooltipProvider as n, Tooltip as T, TooltipTrigger as d, TooltipContent as x } from "../../../vendor/shadcn/tooltip.js";
-const a = m(
+import { forwardRef as n } from "react";
+import { TooltipProvider as x, Tooltip as T, TooltipTrigger as a, TooltipContent as j } from "../../../vendor/shadcn/tooltip.js";
+const d = n(
   ({
-    content: r,
-    children: i,
-    contentProps: t,
-    providerProps: p,
-    triggerProps: e,
+    content: t,
+    children: r,
+    contentProps: i,
+    providerProps: e,
+    triggerProps: p,
+    show: s = !0,
     ...l
-  }, s) => /* @__PURE__ */ o.jsx(n, { ...p, children: /* @__PURE__ */ o.jsxs(T, { ...l, children: [
-    /* @__PURE__ */ o.jsx(d, { asChild: !0, ...e, children: i }),
-    /* @__PURE__ */ o.jsx(x, { ref: s, ...t, children: r })
-  ] }) })
+  }, m) => s ? /* @__PURE__ */ o.jsx(x, { ...e, children: /* @__PURE__ */ o.jsxs(T, { ...l, children: [
+    /* @__PURE__ */ o.jsx(a, { asChild: !0, ...p, children: r }),
+    /* @__PURE__ */ o.jsx(j, { ref: m, ...i, children: t })
+  ] }) }) : /* @__PURE__ */ o.jsx(o.Fragment, { children: r })
 );
-a.displayName = "Tooltip";
+d.displayName = "Tooltip";
 export {
-  a as Tooltip,
-  n as TooltipProvider
+  d as Tooltip,
+  x as TooltipProvider
 };