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

package/dist/components/atoms/protected-field/protected-field.types.d.ts

@@ -1,19 +1,5 @@
-/**
- * Props for the ProtectedField component
- */
 export interface ProtectedFieldProps {
-    /**
-     * Text to display (will be masked if protected)
-     * @default "Default Text"
-     */
     text?: string;
-    /**
-     * Whether to mask the text with asterisks
-     * @default true
-     */
     protect?: boolean;
-    /**
-     * Additional CSS classes
-     */
     className?: string;
 }

package/dist/components/atoms/radio-group/radio-group-option.js

@@ -1,8 +1,8 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
 import { RadioGroupItem as d } from "../../../vendor/shadcn/radio-group.js";
-import { cn as a } from "../../../lib/utils.js";
-import { Label as l } from "../label/label.js";
-const o = ({
+import { cn as l } from "../../../lib/utils.js";
+import { Label as a } from "../../../vendor/shadcn/label.js";
+const u = ({
   option: e,
   radioId: s,
   isInlineLayout: t = !1
@@ -17,39 +17,39 @@ const o = ({
           value: e.value,
           id: s,
           disabled: e.disabled,
-          className: "size-3.5 data-[state=unchecked]:bg-background border-border cursor-pointer"
+          className: "size-3.5 data-[state=unchecked]:bg-white border-border cursor-pointer"
         }
       ),
       t ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
         /* @__PURE__ */ r.jsx(
-          l,
+          a,
           {
             htmlFor: s,
-            className: a(
+            className: l(
               "cursor-pointer",
               e.disabled && "text-muted-foreground"
             ),
             children: e.label
           }
         ),
-        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-muted-foreground ml-auto", children: e.description })
+        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-neutral-500 ml-auto", children: e.description })
       ] }) : /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-1.5 flex-1", children: [
         /* @__PURE__ */ r.jsx(
-          l,
+          a,
           {
             htmlFor: s,
-            className: a(
+            className: l(
               "cursor-pointer",
               e.disabled && "text-muted-foreground"
             ),
             children: e.label
           }
         ),
-        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-muted-foreground", children: e.description })
+        e.description && /* @__PURE__ */ r.jsx("p", { className: "text-sm text-neutral-500", children: e.description })
       ] })
     ]
   }
 );
 export {
-  o as RadioGroupOption
+  u as RadioGroupOption
 };

package/dist/components/atoms/radio-group/radio-group.d.ts

@@ -1,64 +1,15 @@
 import { ComponentProps } from 'react';
 import { RadioGroup as ShadcnRadioGroup } from '../../../vendor/shadcn/radio-group';
-/**
- * Represents a single radio option
- */
 interface RadioOption {
-    /**
-     * Unique value for this option
-     */
     value: string;
-    /**
-     * Display label for the option
-     */
     label: string;
-    /**
-     * Optional description text
-     */
     description?: string;
-    /**
-     * Whether this option is disabled
-     */
     disabled?: boolean;
 }
-/**
- * Props for the RadioGroup component
- */
-interface RadioGroupProps extends Omit<ComponentProps<typeof ShadcnRadioGroup>, "children" | "onValueChange"> {
-    /**
-     * Array of radio options to display
-     */
+interface RadioGroupProps extends Omit<ComponentProps<typeof ShadcnRadioGroup>, "children"> {
     options: RadioOption[];
-    /**
-     * Layout direction of radio buttons
-     * @default "vertical"
-     */
     orientation?: "vertical" | "horizontal";
-    /**
-     * Visual layout style
-     * @default "stacked"
-     */
     layout?: "stacked" | "inline";
-    /**
-     * Callback fired when selection changes
-     */
-    onChange?: (value: string) => void;
 }
-/**
- * Radio button group for single-selection from multiple options.
- * Supports vertical/horizontal layouts and inline/stacked styles.
- *
- * @example
- * ```tsx
- * <RadioGroup
- *   name="plan"
- *   options={[
- *     { value: 'free', label: 'Free Plan', description: '$0/month' },
- *     { value: 'pro', label: 'Pro Plan', description: '$10/month' }
- *   ]}
- *   onChange={(value) => console.log(value)}
- * />
- * ```
- */
 declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export { RadioGroup, type RadioGroupProps, type RadioOption };

package/dist/components/atoms/radio-group/radio-group.js

@@ -1,25 +1,24 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
 import { forwardRef as d } from "react";
 import { RadioGroup as f } from "../../../vendor/shadcn/radio-group.js";
-import { RadioGroupOption as x } from "./radio-group-option.js";
-const c = d(
-  ({ options: a, name: e, orientation: i = "vertical", layout: t = "stacked", onChange: l, ...n }, s) => {
-    const p = t === "inline", m = i === "horizontal";
+import { RadioGroupOption as u } from "./radio-group-option.js";
+const x = d(
+  ({ options: a, name: i, orientation: e = "vertical", layout: t = "stacked", ...l }, s) => {
+    const n = t === "inline", p = e === "horizontal";
     return /* @__PURE__ */ r.jsx(
       f,
       {
         ref: s,
-        className: m ? "flex flex-row flex-wrap gap-6" : "flex flex-col gap-3",
-        onValueChange: l,
-        ...n,
+        className: p ? "flex flex-row flex-wrap gap-6" : "flex flex-col gap-3",
+        ...l,
         children: a.map((o) => {
-          const u = `${e}-${o.value}`;
+          const m = `${i}-${o.value}`;
           return /* @__PURE__ */ r.jsx(
-            x,
+            u,
             {
               option: o,
-              radioId: u,
-              isInlineLayout: p
+              radioId: m,
+              isInlineLayout: n
             },
             o.value
           );
@@ -28,7 +27,7 @@ const c = d(
     );
   }
 );
-c.displayName = "RadioGroup";
+x.displayName = "RadioGroup";
 export {
-  c as RadioGroup
+  x as RadioGroup
 };

package/dist/components/atoms/search-field/search-field.d.ts

@@ -1,17 +1,3 @@
 import { SearchFieldProps } from './search-field.types';
-/**
- * Search input field with history dropdown and persistence support.
- * Features search-on-change, history storage, and keyboard navigation.
- *
- * @example
- * ```tsx
- * <SearchField
- *   label="Search products"
- *   onSearch={(query) => handleSearch(query)}
- *   persistKey="product-search"
- *   searchOnChange={false}
- * />
- * ```
- */
 declare const SearchField: import('react').ForwardRefExoticComponent<SearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;
 export { SearchField };

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

@@ -1,10 +1,10 @@
 import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as U, useId as Y, useState as n, useRef as V, useEffect as z } from "react";
+import { forwardRef as U, useId as Y, useState as l, useRef as V, useEffect as z } from "react";
 import { cn as r } from "../../../lib/utils.js";
 import { Input as Z } from "../../../vendor/shadcn/input.js";
-import { Icon as w } from "../icon/icon.js";
 import { cva as D } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { Label as K } from "../label/label.js";
+import { Label as K } from "../../../vendor/shadcn/label.js";
+import { Icon as w } from "../icon/icon.js";
 const P = D("flex gap-2 w-full", {
   variants: {
     layout: {
@@ -28,7 +28,7 @@ const P = D("flex gap-2 w-full", {
 }), te = U(
   ({
     placeholder: F = "Search...",
-    onSearch: l,
+    onSearch: n,
     limitSearch: y = 10,
     persistKey: c = "",
     value: m = "",
@@ -43,15 +43,15 @@ const P = D("flex gap-2 w-full", {
     inputProps: h,
     ...E
   }, i) => {
-    const M = Y(), u = O || h?.id || M, b = !!a, [o, d] = n(m), [f, R] = n(() => {
+    const M = Y(), u = O || h?.id || M, b = !!a, [o, d] = l(m), [f, R] = l(() => {
       if (c) {
         const e = localStorage.getItem(`${c}_searchfield`);
         return e ? JSON.parse(e) : [];
       }
       return [];
-    }), [C, L] = n([]), [B, v] = n(!1), [J, I] = n(!1), g = V(null), _ = V(null), G = (e) => {
+    }), [C, L] = l([]), [B, v] = l(!1), [J, I] = l(!1), g = V(null), _ = V(null), G = (e) => {
       const s = e.target.value;
-      d(s), (s === "" || H) && l(s);
+      d(s), (s === "" || H) && n(s);
     }, W = (e) => {
       e.key === "Enter" && o !== "" && S();
     }, S = () => {
@@ -65,11 +65,11 @@ const P = D("flex gap-2 w-full", {
       R(k), c && localStorage.setItem(
         `${c}_searchfield`,
         JSON.stringify(k)
-      ), l(o);
+      ), n(o);
     }, X = () => {
-      d(""), l(""), g.current?.focus();
+      d(""), n(""), g.current?.focus();
     }, q = (e) => {
-      d(e), l(e), v(!1), g.current?.focus();
+      d(e), n(e), v(!1), g.current?.focus();
     }, A = () => {
       v(!0);
     }, Q = () => {
@@ -105,16 +105,16 @@ const P = D("flex gap-2 w-full", {
                 placeholder: F,
                 disabled: x,
                 autoComplete: "off",
-                "aria-invalid": b,
-                "aria-describedby": p || a ? `${u}-description` : void 0,
-                ...E,
-                ...h,
-                id: u,
                 className: r(
                   b && "border-destructive focus-visible:border-destructive",
                   "!px-9",
                   h?.className
-                )
+                ),
+                "aria-invalid": b,
+                "aria-describedby": p || a ? `${u}-description` : void 0,
+                ...E,
+                ...h,
+                id: u
               }
             ),
             /* @__PURE__ */ t.jsx(
@@ -124,7 +124,7 @@ const P = D("flex gap-2 w-full", {
                 size: "sm",
                 onClick: S,
                 className: r(
-                  "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground dark:text-foreground",
+                  "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground",
                   !x && "cursor-pointer hover:text-foreground transition-colors"
                 )
               }

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

@@ -1,77 +1,20 @@
 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>;
 }

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

@@ -1,4 +1,2 @@
 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/atoms/select/select.d.ts

@@ -1,110 +1,28 @@
 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;
-    /**
-     * Callback fired when the selected value changes
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Whether the select is disabled
-     * @default false
-     */
+    onValueChange?: (value: string) => void;
     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 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(
+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(
   ({
-    label: r,
-    description: m,
+    label: m,
+    description: n,
     error: a,
     optional: j = !1,
     placeholder: f = "Select an option",
     value: u,
     defaultValue: o,
-    onChange: p,
+    onValueChange: p,
     disabled: t = !1,
     options: i = [],
     groups: x = [],
@@ -22,19 +22,19 @@ const V = y.forwardRef(
   }, N) => {
     const S = x.length > 0, b = i.length > 0;
     return /* @__PURE__ */ e.jsxs("div", { className: c("w-full", v), children: [
-      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)" })
+      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)" })
       ] }),
-      m && !a && /* @__PURE__ */ e.jsx(
-        n,
+      n && !a && /* @__PURE__ */ e.jsx(
+        r,
         {
           variant: "sm",
           className: c(
             "text-muted-foreground mb-2",
             t && "opacity-50"
           ),
-          children: m
+          children: n
         }
       ),
       /* @__PURE__ */ e.jsxs(
@@ -46,18 +46,18 @@ const V = y.forwardRef(
           disabled: t,
           children: [
             /* @__PURE__ */ e.jsx(
-              C,
+              G,
               {
                 ref: N,
                 id: h,
                 className: c(a && "border-destructive"),
-                children: /* @__PURE__ */ e.jsx(G, { placeholder: f })
+                children: /* @__PURE__ */ e.jsx(L, { placeholder: f })
               }
             ),
-            /* @__PURE__ */ e.jsx(L, { children: S ? (
+            /* @__PURE__ */ e.jsx(O, { children: S ? (
               // Render grouped options
-              x.map((l, g) => /* @__PURE__ */ e.jsxs(O, { children: [
-                l.label && /* @__PURE__ */ e.jsx(R, { children: l.label }),
+              x.map((l, g) => /* @__PURE__ */ e.jsxs(R, { children: [
+                l.label && /* @__PURE__ */ e.jsx(T, { 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 V = y.forwardRef(
           ]
         }
       ),
-      a && /* @__PURE__ */ e.jsx(n, { variant: "sm", className: "text-destructive mt-2", children: a })
+      a && /* @__PURE__ */ e.jsx(r, { variant: "sm", className: "text-destructive mt-2", children: a })
     ] });
   }
 );
-V.displayName = "Select";
+E.displayName = "Select";
 export {
-  V as Select
+  E as Select
 };

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

@@ -4,26 +4,9 @@ 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,10 +1 @@
-/**
- * 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';