@yuno-payments/dashboard-design-system 2.9.5 → 3.0.0

package/dist/components/molecules/search-field/search-field.js

@@ -1,208 +0,0 @@
-import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as Y, useId as Z, useState as n, useRef as V, useEffect as z } from "react";
-import { cn as r } from "../../../lib/utils.js";
-import { Input as K } from "../../../vendor/shadcn/input.js";
-import { Icon as w } from "../../atoms/icon/icon.js";
-import { cva as D } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { Label as P } from "../../atoms/label/label.js";
-const ee = D("flex gap-2 w-full", {
-  variants: {
-    layout: {
-      vertical: "flex-col",
-      horizontal: "flex-row items-start gap-4"
-    }
-  },
-  defaultVariants: {
-    layout: "vertical"
-  }
-}), te = D("text-sm", {
-  variants: {
-    layout: {
-      vertical: "",
-      horizontal: "mt-2"
-    }
-  },
-  defaultVariants: {
-    layout: "vertical"
-  }
-}), se = Y(
-  ({
-    placeholder: F = "Search",
-    onSearch: l,
-    limitSearch: y = 10,
-    persistKey: c = "",
-    value: m = "",
-    searchOnChange: H = !0,
-    label: N,
-    description: p,
-    error: a,
-    id: O,
-    disabled: x,
-    layout: j = "vertical",
-    className: $,
-    inputProps: v,
-    actionName: E,
-    ...M
-  }, i) => {
-    const R = Z(), u = O || v?.id || R, b = !!a, [o, d] = n(m), [f, L] = n(() => {
-      if (c) {
-        const e = localStorage.getItem(`${c}_searchfield`);
-        return e ? JSON.parse(e) : [];
-      }
-      return [];
-    }), [C, B] = n([]), [J, h] = n(!1), [_, I] = n(!1), g = V(null), G = V(null), W = (e) => {
-      const s = e.target.value;
-      d(s), (s === "" || H) && l(s);
-    }, X = (e) => {
-      e.key === "Enter" && o !== "" && S();
-    }, S = () => {
-      if (!o) return;
-      const e = {
-        label: o,
-        value: o
-      }, s = f.filter(
-        (U) => U.value !== o
-      ), k = f.length < y ? [e, ...s] : [e, ...s.slice(0, y - 1)];
-      L(k), c && localStorage.setItem(
-        `${c}_searchfield`,
-        JSON.stringify(k)
-      ), l(o);
-    }, q = () => {
-      d(""), l(""), g.current?.focus();
-    }, A = (e) => {
-      d(e), l(e), h(!1), g.current?.focus();
-    }, Q = () => {
-      h(!0);
-    }, T = () => {
-      _ || h(!1);
-    };
-    return z(() => {
-      d(m);
-    }, [m]), z(() => {
-      const e = f.map((s) => ({
-        ...s,
-        isSelected: s.value === o
-      })).filter(
-        (s) => o === "" ? !0 : s.label.toLowerCase().includes(o.toLowerCase())
-      );
-      B(e);
-    }, [o, f]), /* @__PURE__ */ t.jsxs(
-      "div",
-      {
-        "data-action-name": E,
-        className: r(ee({ layout: j }), $),
-        children: [
-          N && /* @__PURE__ */ t.jsx(P, { htmlFor: u, className: r(te({ layout: j })), children: N }),
-          /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
-            /* @__PURE__ */ t.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ t.jsxs("div", { className: "relative flex", children: [
-                /* @__PURE__ */ t.jsx(
-                  K,
-                  {
-                    ref: (e) => {
-                      typeof i == "function" ? i(e) : i && (i.current = e), e && (g.current = e);
-                    },
-                    type: "text",
-                    value: o,
-                    onChange: W,
-                    onKeyDown: X,
-                    onFocus: Q,
-                    onBlur: T,
-                    placeholder: F,
-                    disabled: x,
-                    autoComplete: "off",
-                    "aria-invalid": b,
-                    "aria-describedby": p || a ? `${u}-description` : void 0,
-                    ...M,
-                    ...v,
-                    id: u,
-                    className: r(
-                      b && "border-destructive focus-visible:border-destructive",
-                      "!px-9",
-                      v?.className
-                    )
-                  }
-                ),
-                /* @__PURE__ */ t.jsx(
-                  w,
-                  {
-                    name: "MagnifyingGlass",
-                    size: "sm",
-                    onClick: S,
-                    className: r(
-                      "absolute start-3 top-1/2 -translate-y-1/2 text-muted-foreground dark:text-foreground",
-                      !x && "cursor-pointer hover:text-foreground transition-colors"
-                    )
-                  }
-                ),
-                o && /* @__PURE__ */ t.jsx(
-                  w,
-                  {
-                    name: "XCircle",
-                    size: "sm",
-                    weight: "fill",
-                    onClick: q,
-                    className: r(
-                      "absolute end-3 top-1/2 -translate-y-1/2 text-muted-foreground",
-                      !x && "cursor-pointer hover:text-foreground transition-colors"
-                    )
-                  }
-                )
-              ] }),
-              C.length > 0 && J && /* @__PURE__ */ t.jsx(
-                "div",
-                {
-                  ref: G,
-                  onMouseEnter: () => I(!0),
-                  onMouseLeave: () => I(!1),
-                  className: r(
-                    "absolute z-popover w-full mt-1 rounded-md border bg-popover text-popover-foreground shadow-md",
-                    "max-h-[300px] overflow-y-auto"
-                  ),
-                  children: /* @__PURE__ */ t.jsx("div", { className: "py-1", children: C.map((e, s) => /* @__PURE__ */ t.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => A(e.value),
-                      className: r(
-                        "w-full text-left px-4 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer",
-                        e.isSelected && "bg-accent text-accent-foreground"
-                      ),
-                      children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
-                        /* @__PURE__ */ t.jsx(
-                          w,
-                          {
-                            name: "ClockCounterClockwise",
-                            size: "sm",
-                            className: "text-muted-foreground"
-                          }
-                        ),
-                        /* @__PURE__ */ t.jsx("span", { className: "truncate", children: e.label })
-                      ] })
-                    },
-                    `${e.value}-${s}`
-                  )) })
-                }
-              )
-            ] }),
-            (p || a) && /* @__PURE__ */ t.jsx(
-              "p",
-              {
-                id: `${u}-description`,
-                className: r(
-                  "text-sm",
-                  a ? "text-destructive" : "text-muted-foreground"
-                ),
-                children: a || p
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-);
-se.displayName = "SearchField";
-export {
-  se as SearchField
-};

package/dist/components/molecules/search-field/search-field.types.d.ts

@@ -1,84 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-/**
- * Represents a search history value
- */
-export interface SearchValue {
-    /**
-     * Display label for the search value
-     */
-    label: string;
-    /**
-     * Actual value of the search
-     */
-    value: string;
-    /**
-     * Whether this value is currently selected
-     */
-    isSelected?: boolean;
-}
-/**
- * Props for the SearchField component
- */
-export interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "className"> {
-    /**
-     * Placeholder text for the input
-     * @default "Search"
-     */
-    placeholder?: string;
-    /**
-     * Callback fired when search is triggered
-     */
-    onSearch: (value: string) => void;
-    /**
-     * Maximum number of search history items to store
-     * @default 10
-     */
-    limitSearch?: number;
-    /**
-     * Key for persisting search history in localStorage
-     * @default ""
-     */
-    persistKey?: string;
-    /**
-     * Controlled value of the input
-     * @default ""
-     */
-    value?: string;
-    /**
-     * Whether to trigger search on every change or only on Enter
-     * @default true
-     */
-    searchOnChange?: boolean;
-    /**
-     * Label text displayed above the input
-     */
-    label?: string;
-    /**
-     * Helper text displayed below the input
-     */
-    description?: string;
-    /**
-     * Error message displayed below the input
-     */
-    error?: string;
-    /**
-     * Layout orientation
-     * @default "vertical"
-     */
-    layout?: "vertical" | "horizontal";
-    /**
-     * Additional CSS classes for the wrapper
-     */
-    className?: string;
-    /**
-     * Additional props to pass to the input element
-     */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    /**
-     * Stable analytics name applied as `data-action-name` on the outer
-     * wrapper `<div>`. Datadog RUM walks ancestors when looking up the
-     * attribute, so a click on the input, the magnifier, or the clear-X
-     * icon resolves to the same name.
-     */
-    actionName?: string;
-}

package/dist/components/molecules/select/index.d.ts

@@ -1,4 +0,0 @@
-export { Select } from './select';
-export type { SelectProps, SelectOption, SelectOptionGroup } from './select';
-export { SearchSelect } from './search-select';
-export type { SearchSelectProps } from './search-select';

package/dist/components/molecules/select/search-select.d.ts

@@ -1,22 +0,0 @@
-import { SelectOption, SelectOptionGroup } from './select';
-import * as React from "react";
-interface SearchSelectProps {
-    label?: string;
-    description?: string;
-    error?: string;
-    optional?: boolean;
-    placeholder?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    disabled?: boolean;
-    options?: SelectOption[];
-    groups?: SelectOptionGroup[];
-    className?: string;
-    id?: string;
-    searchPlaceholder?: string;
-    maxHeight?: number;
-}
-declare const SearchSelect: React.ForwardRefExoticComponent<SearchSelectProps & React.RefAttributes<HTMLButtonElement>>;
-export { SearchSelect };
-export type { SearchSelectProps };

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

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

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

@@ -1,129 +0,0 @@
-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
- */
-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;
-    /**
-     * Info text displayed in a tooltip next to the label
-     */
-    info?: string;
-    /**
-     * Indicator to show at the right of the label.
-     * - Pass `true` to automatically show "required" or "optional" based on the `required` prop
-     * - Pass a custom string to display that text instead
-     */
-    requiredIndicator?: boolean | string;
-    /**
-     * Whether the select is required
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Whether to show "(Optional)" next to the label
-     * @default false
-     * @deprecated Use requiredIndicator instead
-     */
-    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;
-    /**
-     * 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, info tooltips, required indicators, 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)}
- *   required
- *   requiredIndicator
- *   info="Select your country of residence"
- * />
- * ```
- */
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
-export { Select };
-export type { SelectProps };