@yuno-payments/dashboard-design-system 0.0.170 → 0.0.171

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

@@ -0,0 +1,201 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import * as n from "react";
+import { cn as a } from "../../../lib/utils.js";
+import { FieldLabel as A } from "../../../vendor/shadcn/field.js";
+import { Icon as b } from "../icon/icon.js";
+import { Combobox as B, ComboboxTrigger as H, ComboboxContent as J } from "../../../vendor/shadcn/combobox.js";
+import { Command as K, CommandInput as M, CommandList as P, CommandEmpty as Q, CommandGroup as U, CommandItem as k } from "../../../vendor/shadcn/command.js";
+import { Typography as x } from "../typography/typography.js";
+const W = n.forwardRef(
+  ({
+    label: j,
+    description: N,
+    error: u,
+    optional: G = !1,
+    placeholder: L = "Select an option",
+    value: r,
+    defaultValue: p,
+    onChange: h,
+    disabled: f = !1,
+    options: c = [],
+    groups: o = [],
+    className: E,
+    id: g,
+    searchPlaceholder: z = "Search...",
+    maxHeight: F = 300
+  }, I) => {
+    const [i, C] = n.useState(!1), [v, S] = n.useState(""), d = o.length > 0, w = c.length > 0, R = n.useCallback(() => {
+      if (!r) return null;
+      if (d)
+        for (const s of o) {
+          const l = s.options.find((t) => t.value === r);
+          if (l) return l.label;
+        }
+      else if (w) {
+        const s = c.find((l) => l.value === r);
+        if (s) return s.label;
+      }
+      return null;
+    }, [r, o, c, d, w]), T = n.useCallback(
+      (s) => {
+        if (!s)
+          return { filteredOptions: c, filteredGroups: o };
+        const l = s.toLowerCase();
+        if (d) {
+          const t = o.map((m) => ({
+            ...m,
+            options: m.options.filter(
+              (V) => V.label.toLowerCase().includes(l)
+            )
+          })).filter((m) => m.options.length > 0);
+          return { filteredOptions: [], filteredGroups: t };
+        } else
+          return { filteredOptions: c.filter(
+            (m) => m.label.toLowerCase().includes(l)
+          ), filteredGroups: [] };
+      },
+      [c, o, d]
+    ), { filteredOptions: q, filteredGroups: D } = T(v);
+    n.useEffect(() => {
+      i && setTimeout(() => {
+        document.querySelector(
+          '[data-slot="command-input"]'
+        )?.focus();
+      }, 0);
+    }, [i]), n.useEffect(() => {
+      i || S("");
+    }, [i]), n.useEffect(() => {
+      p && !r && h?.(p);
+    }, [p, r, h]);
+    const y = (s) => {
+      f || (h?.(s), C(!1));
+    }, O = R();
+    return /* @__PURE__ */ e.jsxs("div", { className: a("w-full", E), children: [
+      j && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
+        /* @__PURE__ */ e.jsx(A, { htmlFor: g, className: a(f && "text-muted-foreground"), children: j }),
+        G && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
+      ] }),
+      N && !u && /* @__PURE__ */ e.jsx(
+        x,
+        {
+          variant: "sm",
+          className: a(
+            "text-muted-foreground mb-2",
+            f && "text-muted-"
+          ),
+          children: N
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(B, { open: i, onOpenChange: C, children: [
+        /* @__PURE__ */ e.jsx(H, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            ref: I,
+            id: g,
+            type: "button",
+            disabled: f,
+            role: "combobox",
+            "aria-expanded": i,
+            "aria-haspopup": "listbox",
+            className: a(
+              "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:text-muted- shadow-xs [&>span]:min-w-0 [&>span]:truncate",
+              u && "border-destructive"
+            ),
+            children: [
+              /* @__PURE__ */ e.jsx(
+                "span",
+                {
+                  className: a(
+                    "truncate",
+                    !O && "text-muted-foreground"
+                  ),
+                  children: O || L
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                b,
+                {
+                  name: "CaretDown",
+                  size: "sm",
+                  className: "text-muted- shrink-0"
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e.jsx(J, { className: "p-0", align: "start", children: /* @__PURE__ */ e.jsxs(K, { shouldFilter: !1, children: [
+          /* @__PURE__ */ e.jsx(
+            M,
+            {
+              placeholder: z,
+              value: v,
+              onValueChange: S
+            }
+          ),
+          /* @__PURE__ */ e.jsxs(P, { style: { maxHeight: F }, children: [
+            /* @__PURE__ */ e.jsx(Q, { children: /* @__PURE__ */ e.jsx(
+              x,
+              {
+                variant: "sm",
+                className: "text-muted-foreground py-6 text-center",
+                children: "No results found."
+              }
+            ) }),
+            d ? D.map((s, l) => /* @__PURE__ */ e.jsxs(U, { children: [
+              s.label && /* @__PURE__ */ e.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: s.label }),
+              s.options.map((t) => /* @__PURE__ */ e.jsxs(
+                k,
+                {
+                  value: t.value,
+                  onSelect: () => y(t.value),
+                  className: a(
+                    "cursor-pointer",
+                    r === t.value && "bg-accent"
+                  ),
+                  children: [
+                    /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
+                      t.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: t.icon }),
+                      t.label
+                    ] }),
+                    r === t.value && /* @__PURE__ */ e.jsx(
+                      b,
+                      {
+                        name: "Check",
+                        size: "sm",
+                        className: "ml-auto"
+                      }
+                    )
+                  ]
+                },
+                t.value
+              ))
+            ] }, l)) : q.map((s) => /* @__PURE__ */ e.jsxs(
+              k,
+              {
+                value: s.value,
+                onSelect: () => y(s.value),
+                className: a(
+                  "cursor-pointer",
+                  r === s.value && "bg-accent"
+                ),
+                children: [
+                  /* @__PURE__ */ e.jsxs("span", { className: "flex items-center", children: [
+                    s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
+                    s.label
+                  ] }),
+                  r === s.value && /* @__PURE__ */ e.jsx(b, { name: "Check", size: "sm", className: "ml-auto" })
+                ]
+              },
+              s.value
+            ))
+          ] })
+        ] }) })
+      ] }),
+      u && /* @__PURE__ */ e.jsx(x, { variant: "sm", className: "text-destructive mt-2", children: u })
+    ] });
+  }
+);
+W.displayName = "SearchSelect";
+export {
+  W as SearchSelect
+};

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

@@ -1,28 +1,110 @@
 import * as React from "react";
+/**
+ * Represents a single option in the select dropdown
+ */
 export interface SelectOption {
+    /**
+     * Unique value for this option
+     */
     value: string;
+    /**
+     * Display label for this option
+     */
     label: string;
+    /**
+     * Optional icon to display before the label
+     */
     icon?: React.ReactNode;
 }
+/**
+ * Represents a group of options in the select dropdown
+ */
 export interface SelectOptionGroup {
+    /**
+     * Optional label for the group
+     */
     label?: string;
+    /**
+     * Array of options in this group
+     */
     options: SelectOption[];
 }
+/**
+ * Props for the Select component
+ */
 export interface SelectProps {
+    /**
+     * Label text displayed above the select
+     */
     label?: string;
+    /**
+     * Helper text displayed below the select
+     */
     description?: string;
+    /**
+     * Error message displayed below the select
+     */
     error?: string;
+    /**
+     * Whether to show "(Optional)" next to the label
+     * @default false
+     */
     optional?: boolean;
+    /**
+     * Placeholder text shown when no option is selected
+     * @default "Select an option"
+     */
     placeholder?: string;
+    /**
+     * Controlled value of the select
+     */
     value?: string;
+    /**
+     * Default value for uncontrolled mode
+     */
     defaultValue?: string;
-    onValueChange?: (value: string) => void;
+    /**
+     * Callback fired when the selected value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Whether the select is disabled
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Array of options (use either options or groups, not both)
+     */
     options?: SelectOption[];
+    /**
+     * Array of grouped options (use either options or groups, not both)
+     */
     groups?: SelectOptionGroup[];
+    /**
+     * Additional CSS classes for the container
+     */
     className?: string;
+    /**
+     * HTML id attribute for the select element
+     */
     id?: string;
 }
+/**
+ * Select dropdown component with label, description, error handling, and grouped options support.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   label="Country"
+ *   placeholder="Select a country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'mx', label: 'Mexico' }
+ *   ]}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 export { Select };
 export type { SelectProps };

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

@@ -1,19 +1,19 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
 import * as y from "react";
 import { cn as c } from "../../../lib/utils.js";
-import { Select as w, SelectTrigger as G, SelectValue as L, SelectContent as O, SelectGroup as R, SelectLabel as T, SelectItem as d } from "../../../vendor/shadcn/select.js";
-import { Label as C } from "../../../vendor/shadcn/label.js";
-import { Typography as r } from "../typography/typography.js";
-const E = y.forwardRef(
+import { Select as w, SelectTrigger as C, SelectValue as G, SelectContent as L, SelectGroup as O, SelectLabel as R, SelectItem as d } from "../../../vendor/shadcn/select.js";
+import { Label as T } from "../label/label.js";
+import { Typography as n } from "../typography/typography.js";
+const V = y.forwardRef(
   ({
-    label: m,
-    description: n,
+    label: r,
+    description: m,
     error: a,
     optional: j = !1,
     placeholder: f = "Select an option",
     value: u,
     defaultValue: o,
-    onValueChange: p,
+    onChange: p,
     disabled: t = !1,
     options: i = [],
     groups: x = [],
@@ -22,19 +22,19 @@ const E = y.forwardRef(
   }, N) => {
     const S = x.length > 0, b = i.length > 0;
     return /* @__PURE__ */ e.jsxs("div", { className: c("w-full", v), children: [
-      m && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
-        /* @__PURE__ */ e.jsx(C, { htmlFor: h, className: c(t && "opacity-50"), children: m }),
-        j && /* @__PURE__ */ e.jsx(r, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
+      r && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
+        /* @__PURE__ */ e.jsx(T, { htmlFor: h, className: c(t && "opacity-50"), children: r }),
+        j && /* @__PURE__ */ e.jsx(n, { variant: "sm", className: "text-muted-foreground", children: "(Optional)" })
       ] }),
-      n && !a && /* @__PURE__ */ e.jsx(
-        r,
+      m && !a && /* @__PURE__ */ e.jsx(
+        n,
         {
           variant: "sm",
           className: c(
             "text-muted-foreground mb-2",
             t && "opacity-50"
           ),
-          children: n
+          children: m
         }
       ),
       /* @__PURE__ */ e.jsxs(
@@ -46,18 +46,18 @@ const E = y.forwardRef(
           disabled: t,
           children: [
             /* @__PURE__ */ e.jsx(
-              G,
+              C,
               {
                 ref: N,
                 id: h,
                 className: c(a && "border-destructive"),
-                children: /* @__PURE__ */ e.jsx(L, { placeholder: f })
+                children: /* @__PURE__ */ e.jsx(G, { placeholder: f })
               }
             ),
-            /* @__PURE__ */ e.jsx(O, { children: S ? (
+            /* @__PURE__ */ e.jsx(L, { children: S ? (
               // Render grouped options
-              x.map((l, g) => /* @__PURE__ */ e.jsxs(R, { children: [
-                l.label && /* @__PURE__ */ e.jsx(T, { children: l.label }),
+              x.map((l, g) => /* @__PURE__ */ e.jsxs(O, { children: [
+                l.label && /* @__PURE__ */ e.jsx(R, { children: l.label }),
                 l.options.map((s) => /* @__PURE__ */ e.jsxs(d, { value: s.value, children: [
                   s.icon && /* @__PURE__ */ e.jsx("span", { className: "mr-2 inline-flex items-center", children: s.icon }),
                   s.label
@@ -73,11 +73,11 @@ const E = y.forwardRef(
           ]
         }
       ),
-      a && /* @__PURE__ */ e.jsx(r, { variant: "sm", className: "text-destructive mt-2", children: a })
+      a && /* @__PURE__ */ e.jsx(n, { variant: "sm", className: "text-destructive mt-2", children: a })
     ] });
   }
 );
-E.displayName = "Select";
+V.displayName = "Select";
 export {
-  E as Select
+  V as Select
 };

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

@@ -4,9 +4,26 @@ declare const dividerVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
     spacing?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Separator component
+ */
 interface SeparatorProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof dividerVariants> {
+    /**
+     * Orientation of the separator
+     * @default "horizontal"
+     */
     orientation?: "horizontal" | "vertical";
 }
+/**
+ * Visual separator line for dividing content sections.
+ * Supports horizontal/vertical orientations and spacing variants.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" spacing="md" />
+ * ```
+ */
 declare const Separator: {
     ({ className, orientation, spacing, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -1 +1,10 @@
+/**
+ * Skeleton loader component for displaying placeholder content during loading states.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-4 w-[250px]" />
+ * <Skeleton className="h-12 w-12 rounded-full" />
+ * ```
+ */
 export { Skeleton } from '../../../vendor/shadcn/skeleton';

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

@@ -1,10 +1,64 @@
 import { Switch as ShadcnSwitch } from '../../../vendor/shadcn/switch';
-import { ComponentProps } from 'react';
-export interface SwitchProps extends Omit<ComponentProps<typeof ShadcnSwitch>, "children"> {
+import { ComponentProps, ChangeEvent } from 'react';
+/**
+ * Props for the Switch component
+ */
+export interface SwitchProps extends Omit<ComponentProps<typeof ShadcnSwitch>, "children" | "onCheckedChange" | "className" | "onChange"> {
+    /**
+     * Label text displayed next to the switch
+     */
     label: string;
+    /**
+     * Optional description text displayed below the label
+     */
     description?: string;
+    /**
+     * Position of the switch relative to the label
+     * @default "left"
+     */
     side?: "left" | "right";
+    /**
+     * Visual variant of the switch container
+     * - "default": minimal layout without background
+     * - "box": contained layout with background, border, and padding
+     * @default "default"
+     */
     variant?: "default" | "box";
+    /**
+     * Callback fired when the switch state changes
+     * Provides a synthetic ChangeEvent compatible with react-hook-form
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional CSS classes to apply to the wrapper container
+     */
+    className?: string;
+    /**
+     * Additional CSS classes to apply to the switch element itself
+     */
+    switchClassName?: string;
+    /**
+     * Additional CSS classes to apply to the label element
+     */
+    labelClassName?: string;
+    /**
+     * Optional info icon with tooltip
+     */
+    info?: string;
 }
+/**
+ * Toggle switch component with label and optional description.
+ * Supports left/right positioning and box variant for emphasized display.
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   label="Enable notifications"
+ *   description="Receive email notifications for updates"
+ *   checked={isEnabled}
+ *   onChange={(e) => setIsEnabled(e.target.checked)}
+ * />
+ * ```
+ */
 declare const Switch: import('react').ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export { Switch };

package/dist/components/atoms/switch/switch.js

@@ -1,47 +1,79 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { Switch as p } from "../../../vendor/shadcn/switch.js";
-import { forwardRef as f, useId as h } from "react";
-import { cn as w } from "../../../lib/utils.js";
-import { Label as u } from "../../../vendor/shadcn/label.js";
-const j = f(
+import { Switch as v } from "../../../vendor/shadcn/switch.js";
+import { forwardRef as N, useId as y } from "react";
+import { cn as o } from "../../../lib/utils.js";
+import { Label as S } from "../label/label.js";
+const C = N(
   ({
-    label: t,
-    description: s,
-    side: o = "left",
-    variant: a = "default",
-    id: i,
-    name: l,
-    ...c
-  }, m) => {
-    const x = h(), r = i || l || x, d = /* @__PURE__ */ e.jsx(
-      p,
+    label: c,
+    description: a,
+    side: i = "left",
+    variant: l = "default",
+    id: d,
+    name: t,
+    onChange: n,
+    className: m,
+    switchClassName: x,
+    info: f,
+    labelClassName: p,
+    ...h
+  }, u) => {
+    const g = y(), r = d || t || g, w = (s) => {
+      if (!n) return;
+      n({
+        target: {
+          name: t || r,
+          checked: s,
+          type: "checkbox",
+          value: s ? "on" : "off"
+        },
+        currentTarget: {
+          name: t || r,
+          checked: s,
+          type: "checkbox",
+          value: s ? "on" : "off"
+        },
+        preventDefault: () => {
+        },
+        stopPropagation: () => {
+        }
+      });
+    }, b = /* @__PURE__ */ e.jsx(
+      v,
       {
-        ref: m,
+        ref: u,
         id: r,
-        className: "cursor-pointer",
-        ...c
+        name: t,
+        className: o("cursor-pointer", x),
+        onCheckedChange: w,
+        ...h
       }
-    ), n = w("flex gap-3 items-start", {
-      "flex-row-reverse": o === "right",
-      "bg-white box-border justify-start p-4 rounded-lg border shadow-xs": a === "box"
-    });
-    return /* @__PURE__ */ e.jsxs("div", { className: n, children: [
-      d,
+    ), j = o(
+      "flex gap-2 items-start",
+      {
+        "flex-row-reverse": i === "right",
+        "bg-background box-border justify-start p-4 rounded-lg border shadow-xs": l === "box"
+      },
+      m
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: j, children: [
+      b,
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
-        /* @__PURE__ */ e.jsx(
-          u,
+        /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx(
+          S,
           {
             htmlFor: r,
-            className: "text-sm leading-[18.39px] cursor-pointer",
-            children: t
+            info: f,
+            className: o("text-sm leading-[18.39px] cursor-pointer", p),
+            children: c
           }
-        ),
-        s && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-neutral-500", children: s })
+        ) }),
+        a && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: a })
       ] })
     ] });
   }
 );
-j.displayName = "Switch";
+C.displayName = "Switch";
 export {
-  j as Switch
+  C as Switch
 };

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

@@ -1 +1,17 @@
+/**
+ * Tabs components for organizing content into switchable panels.
+ * Composed of Tabs (root), TabsList, TabsTrigger, and TabsContent.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * ```
+ */
 export { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../vendor/shadcn/tabs';