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

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

@@ -1,12 +1,44 @@
 import { ComponentProps } from 'react';
 import { InputOTP } from '../../../vendor/shadcn/input-otp';
 import * as React from "react";
+/**
+ * Props for the OTPField component
+ */
 export interface OTPFieldProps extends Omit<ComponentProps<typeof InputOTP>, "maxLength" | "render"> {
+    /**
+     * Number of OTP input slots
+     * @default 6
+     */
     maxLength?: number;
+    /**
+     * Label text displayed above the input
+     */
     label?: string;
+    /**
+     * Error message displayed below the input
+     */
     error?: string;
+    /**
+     * Additional CSS classes for the field wrapper
+     */
     className?: string;
+    /**
+     * Additional CSS classes for the OTP input container
+     */
     containerClassName?: string;
 }
+/**
+ * One-Time Password input field with individual digit slots.
+ *
+ * @example
+ * ```tsx
+ * <OTPField
+ *   label="Enter verification code"
+ *   maxLength={6}
+ *   value={otp}
+ *   onChange={(value) => setOtp(value)}
+ * />
+ * ```
+ */
 declare const OTPField: React.ForwardRefExoticComponent<Omit<OTPFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { OTPField };

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

@@ -1,9 +1,32 @@
 import { InputHTMLAttributes } from 'react';
 import { FieldProps } from '../field';
 import { LinkProps } from '../link';
+/**
+ * Props for the PasswordField component
+ */
 export interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type">, Omit<FieldProps, "type" | "endIcon" | "endIconProps"> {
+    /**
+     * Whether password is visible by default
+     * @default false
+     */
     defaultVisible?: boolean;
+    /**
+     * Props for the "Forgot password?" link
+     */
     forgotPasswordLinkProps?: LinkProps;
 }
+/**
+ * Password input field with toggle visibility button and optional "Forgot password?" link.
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   forgotPasswordLinkProps={{ href: '/forgot-password' }}
+ *   value={password}
+ *   onChange={(e) => setPassword(e.target.value)}
+ * />
+ * ```
+ */
 declare const PasswordField: import('react').ForwardRefExoticComponent<PasswordFieldProps & import('react').RefAttributes<HTMLInputElement>>;
 export { PasswordField };

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

@@ -1,7 +1,7 @@
 import { j as s } from "../../../_virtual/jsx-runtime.js";
 import { forwardRef as m, useState as p } from "react";
 import { cn as x } from "../../../lib/utils.js";
-import { Label as f } from "../../../vendor/shadcn/label.js";
+import { Label as f } from "../label/label.js";
 import { Link as w } from "../link/link.js";
 import { Field as d } from "../field/field.js";
 const u = m(

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

@@ -1,8 +1,23 @@
 import { ComponentProps } from 'react';
 import { Progress as ShadcnProgress } from '../../../vendor/shadcn/progress';
+/**
+ * Props for the Progress component
+ */
 interface ProgressProps extends ComponentProps<typeof ShadcnProgress> {
+    /**
+     * Current progress value (0-100)
+     */
     value?: number;
 }
+/**
+ * Progress bar component for showing task completion or loading status.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={75} />
+ * <Progress value={progressPercent} className="w-full" />
+ * ```
+ */
 declare const Progress: {
     ({ value, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

@@ -1,2 +1,12 @@
 import { ProtectedFieldProps } from './protected-field.types';
+/**
+ * Display-only field that can mask sensitive information with asterisks.
+ * Automatically truncates long text and provides protected view.
+ *
+ * @example
+ * ```tsx
+ * <ProtectedField text="secret-api-key-12345" protect={true} />
+ * <ProtectedField text="user@email.com" protect={false} />
+ * ```
+ */
 export declare const ProtectedField: ({ protect, text, className, }: ProtectedFieldProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,15 +1,64 @@
 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;
 }
-interface RadioGroupProps extends Omit<ComponentProps<typeof ShadcnRadioGroup>, "children"> {
+/**
+ * Props for the RadioGroup component
+ */
+interface RadioGroupProps extends Omit<ComponentProps<typeof ShadcnRadioGroup>, "children" | "onValueChange"> {
+    /**
+     * Array of radio options to display
+     */
     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,24 +1,25 @@
 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 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";
+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";
     return /* @__PURE__ */ r.jsx(
       f,
       {
         ref: s,
-        className: p ? "flex flex-row flex-wrap gap-6" : "flex flex-col gap-3",
-        ...l,
+        className: m ? "flex flex-row flex-wrap gap-6" : "flex flex-col gap-3",
+        onValueChange: l,
+        ...n,
         children: a.map((o) => {
-          const m = `${i}-${o.value}`;
+          const u = `${e}-${o.value}`;
           return /* @__PURE__ */ r.jsx(
-            u,
+            x,
             {
               option: o,
-              radioId: m,
-              isInlineLayout: n
+              radioId: u,
+              isInlineLayout: p
             },
             o.value
           );
@@ -27,7 +28,7 @@ const x = d(
     );
   }
 );
-x.displayName = "RadioGroup";
+c.displayName = "RadioGroup";
 export {
-  x as RadioGroup
+  c as RadioGroup
 };

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

@@ -1,3 +1,17 @@
 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 l, useRef as V, useEffect as z } from "react";
+import { forwardRef as U, useId as Y, useState as n, 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 { cva as D } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { Label as K } from "../../../vendor/shadcn/label.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";
 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: n,
+    onSearch: l,
     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] = l(m), [f, R] = l(() => {
+    const M = Y(), u = O || h?.id || M, b = !!a, [o, d] = n(m), [f, R] = n(() => {
       if (c) {
         const e = localStorage.getItem(`${c}_searchfield`);
         return e ? JSON.parse(e) : [];
       }
       return [];
-    }), [C, L] = l([]), [B, v] = l(!1), [J, I] = l(!1), g = V(null), _ = V(null), G = (e) => {
+    }), [C, L] = n([]), [B, v] = n(!1), [J, I] = n(!1), g = V(null), _ = V(null), G = (e) => {
       const s = e.target.value;
-      d(s), (s === "" || H) && n(s);
+      d(s), (s === "" || H) && l(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)
-      ), n(o);
+      ), l(o);
     }, X = () => {
-      d(""), n(""), g.current?.focus();
+      d(""), l(""), g.current?.focus();
     }, q = (e) => {
-      d(e), n(e), v(!1), g.current?.focus();
+      d(e), l(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",
-                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
+                id: u,
+                className: r(
+                  b && "border-destructive focus-visible:border-destructive",
+                  "!px-9",
+                  h?.className
+                )
               }
             ),
             /* @__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",
+                  "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground dark:text-foreground",
                   !x && "cursor-pointer hover:text-foreground transition-colors"
                 )
               }

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

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

@@ -0,0 +1,22 @@
+import { SelectOption, SelectOptionGroup } from './select';
+import * as React from "react";
+export 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 };