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

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

@@ -5,12 +5,41 @@ import { TooltipProps } from '../tooltip/tooltip';
 declare const iconVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Icon component
+ */
 interface IconProps extends Omit<PhosphorIconProps, "size">, VariantProps<typeof iconVariants> {
+    /**
+     * Name of the Phosphor icon to render
+     */
     name: IconName;
+    /**
+     * Icon weight/style
+     * @default "light"
+     */
     weight?: PhosphorIconWeight;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
+    /**
+     * Optional tooltip text to display on hover
+     */
     tooltip?: string;
+    /**
+     * Additional props to pass to the Tooltip component
+     */
     tooltipProps?: Partial<TooltipProps>;
 }
+/**
+ * Icon component using Phosphor Icons with size variants and optional tooltip.
+ *
+ * @example
+ * ```tsx
+ * <Icon name="User" size="md" />
+ * <Icon name="CheckCircle" size="lg" weight="fill" color="green" />
+ * <Icon name="Info" tooltip="More information" />
+ * ```
+ */
 declare const Icon: import('react').ForwardRefExoticComponent<Omit<IconProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
 export { Icon, type IconProps };

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

@@ -10,7 +10,7 @@ export { CurrencyField, type CurrencyFieldProps } from './currency-field';
 export { DatePicker, type DatePickerProps } from './date-picker';
 export { DateRangePicker, type DateRangePickerProps, } from './date-range-picker';
 export { TimePicker, type TimePickerProps } from './time-picker';
-export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, FilterDateRange, FilterDateRangeOption, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter';
+export { FilterButton, FilterTag, FilterSection, FilterCheckboxOption, FilterRadioOption, FilterContent, FilterDateRange, FilterDateRangeOption, FilterDateRangeValue, type FilterButtonProps, type FilterTagProps, type FilterSectionProps, type FilterCheckboxOptionProps, type FilterRadioOptionProps, type FilterContentProps, type FilterDateRangeProps, type FilterDateRangeOptionProps, } from './filter';
 export { FilterDropdown, FilterMenu, FilterMenuItem, type FilterDropdownProps, type FilterConfig, type FilterMenuProps, type FilterMenuItemProps, } from './filter-dropdown';
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, type DropdownMenuProps, type DropdownMenuPortalProps, type DropdownMenuTriggerProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuLabelProps, type DropdownMenuItemProps, type DropdownMenuCheckboxItemProps, type DropdownMenuRadioGroupProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, type DropdownMenuShortcutProps, type DropdownMenuSubProps, type DropdownMenuSubTriggerProps, type DropdownMenuSubContentProps, } from './dropdown-menu';
 export { DotsMenu, type DotsMenuProps, type DotsMenuAction, type DotsMenuOptions, } from './dots-menu';
@@ -18,7 +18,7 @@ export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupIt
 export { Tooltip, TooltipProvider, type TooltipProps, type TooltipProviderProps, } from './tooltip';
 export { Field, type FieldProps } from './field';
 export { NavLink, type NavLinkProps } from './nav-link';
-export { Select, type SelectProps, type SelectOption, type SelectOptionGroup, } from './select';
+export { Select, SearchSelect, type SelectProps, type SelectOption, type SelectOptionGroup, type SearchSelectProps, } from './select';
 export { Combobox, type ComboboxProps, type ComboboxOption } from './combobox';
 export { Link, type LinkProps } from './link';
 export { MultiValuesField, type MultiValuesFieldProps, type TriggerKey, } from './multi-values-field';
@@ -32,6 +32,7 @@ export { Switch, type SwitchProps } from './switch';
 export { Textarea, type TextareaProps } from './textarea';
 export { Typography, type TypographyProps } from './typography';
 export { Icon, type IconProps, type IconName } from './icon';
+export { Loading, type LoadingProps } from './loading';
 export { OTPField, type OTPFieldProps } from './otp-field';
 export { PasswordField, type PasswordFieldProps } from './password-field';
 export { ProtectedField, type ProtectedFieldProps } from './protected-field';

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

@@ -1 +1 @@
-export { Label } from '../../../vendor/shadcn/label';
+export { Label } from './label';

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

@@ -0,0 +1,11 @@
+import { Label as ShadcnLabel } from '../../../vendor/shadcn/label';
+import { ComponentProps } from 'react';
+interface LabelProps extends ComponentProps<typeof ShadcnLabel> {
+    info?: string;
+    className?: string;
+}
+declare const Label: {
+    ({ htmlFor, className, info, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Label };

package/dist/components/atoms/label/label.js

@@ -0,0 +1,28 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { cn as o } from "../../../lib/utils.js";
+import { Label as a } from "../../../vendor/shadcn/label.js";
+import "react";
+import { Icon as i } from "../icon/icon.js";
+const l = ({ htmlFor: r, className: t, info: s, ...m }) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ e.jsx(
+    a,
+    {
+      htmlFor: r,
+      className: o("text-sm leading-[18.39px] cursor-pointer", t),
+      ...m
+    }
+  ),
+  s && /* @__PURE__ */ e.jsx(
+    i,
+    {
+      name: "Info",
+      size: "sm",
+      className: "text-muted-foreground",
+      tooltip: s
+    }
+  )
+] });
+l.displayName = "Label";
+export {
+  l as Label
+};

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

@@ -1,7 +1,27 @@
 import { ComponentProps } from 'react';
+/**
+ * Props for the Link component
+ */
 interface LinkProps extends ComponentProps<"a"> {
+    /**
+     * Whether to show underline decoration
+     * @default true
+     */
     underline?: boolean;
+    /**
+     * When true, renders as Slot to merge props with child element
+     * @default false
+     */
     asChild?: boolean;
 }
+/**
+ * Styled anchor link component with optional underline.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/about">About Us</Link>
+ * <Link href="/terms" underline={false}>Terms</Link>
+ * ```
+ */
 declare const Link: import('react').ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
 export { Link, type LinkProps };

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

@@ -0,0 +1 @@
+export { Loading, type LoadingProps } from './loading';

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

@@ -0,0 +1,39 @@
+import { VariantProps } from 'class-variance-authority';
+import { IconWeight as PhosphorIconWeight } from '@phosphor-icons/react';
+declare const loadingVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Loading component
+ */
+interface LoadingProps extends VariantProps<typeof loadingVariants> {
+    /**
+     * Icon weight/style
+     * @default "light"
+     */
+    weight?: PhosphorIconWeight;
+    /**
+     * Custom color for the loading icon
+     */
+    color?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Whether the loading icon should be mirrored
+     */
+    mirrored?: boolean;
+}
+/**
+ * Loading component that displays an animated spinning icon.
+ *
+ * @example
+ * ```tsx
+ * <Loading size="md" />
+ * <Loading size="lg" color="#3b82f6" />
+ * <Loading weight="bold" className="text-primary" />
+ * ```
+ */
+declare const Loading: import('react').ForwardRefExoticComponent<LoadingProps & import('react').RefAttributes<SVGSVGElement>>;
+export { Loading, type LoadingProps };

package/dist/components/atoms/loading/loading.js

@@ -0,0 +1,37 @@
+import { j as n } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as e } from "react";
+import { cva as d } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { cn as f } from "../../../lib/utils.js";
+import { Icon as l } from "../icon/icon.js";
+const p = d("animate-spin", {
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), c = e(
+  ({ size: a = "md", weight: o = "light", color: r, className: m, mirrored: i = !1, ...t }, s) => /* @__PURE__ */ n.jsx(
+    l,
+    {
+      ref: s,
+      name: "CircleNotch",
+      size: a,
+      weight: o,
+      color: r,
+      mirrored: i,
+      className: f(p({ size: a }), m),
+      ...t
+    }
+  )
+);
+c.displayName = "Loading";
+export {
+  c as Loading
+};

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

@@ -16,7 +16,7 @@ export interface MultiSelectProps {
     /**
      * Callback fired when selection changes
      */
-    onValueChange?: (value: string[]) => void;
+    onChange?: (value: string[]) => void;
     /**
      * Placeholder text when no items are selected
      */

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

@@ -10,7 +10,7 @@ const D = c.forwardRef(
   ({
     options: m,
     value: s = [],
-    onValueChange: l,
+    onChange: l,
     placeholder: b = "Select items...",
     searchPlaceholder: w = "Search...",
     emptyMessage: N = "No results found.",
@@ -23,10 +23,10 @@ const D = c.forwardRef(
     showBadges: x = !0,
     allowClear: y = !0
   }, k) => {
-    const [h, S] = c.useState(!1), [p, L] = c.useState(""), P = (t) => {
+    const [h, S] = c.useState(!1), [p, V] = c.useState(""), L = (t) => {
       const r = s.includes(t) ? s.filter((d) => d !== t) : [...s, t];
       l?.(r);
-    }, V = (t, r) => {
+    }, P = (t, r) => {
       r?.preventDefault(), r?.stopPropagation();
       const d = s.filter((R) => R !== t);
       l?.(d);
@@ -64,7 +64,7 @@ const D = c.forwardRef(
                         {
                           type: "button",
                           className: "ml-1 rounded-full outline-hidden hover:bg-muted-foreground/20",
-                          onClick: (r) => V(t.value, r),
+                          onClick: (r) => P(t.value, r),
                           children: /* @__PURE__ */ e.jsx(g, { className: "h-3 w-3" })
                         }
                       )
@@ -120,7 +120,7 @@ const D = c.forwardRef(
             {
               placeholder: w,
               value: p,
-              onValueChange: L
+              onValueChange: V
             }
           ),
           /* @__PURE__ */ e.jsx(I, { children: N }),
@@ -131,7 +131,7 @@ const D = c.forwardRef(
             {
               value: t.value,
               onSelect: () => {
-                P(t.value);
+                L(t.value);
               },
               children: [
                 /* @__PURE__ */ e.jsx(

package/dist/components/atoms/multi-values-field/multi-values-field.d.ts

@@ -1,3 +1,19 @@
 import { MultiValuesFieldProps } from './multi-values-field.types';
+/**
+ * Multi-value input field for adding/removing multiple string values as badges.
+ * Features keyboard shortcuts, validation, duplicate detection, and max items limit.
+ *
+ * @example
+ * ```tsx
+ * <MultiValuesField
+ *   label="Email addresses"
+ *   value={emails}
+ *   onChange={setEmails}
+ *   validate={(value) => /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value) || "Invalid email"}
+ *   maxItems={5}
+ *   allowDuplicates={false}
+ * />
+ * ```
+ */
 declare const MultiValuesField: import('react').ForwardRefExoticComponent<MultiValuesFieldProps & import('react').RefAttributes<HTMLInputElement>>;
 export { MultiValuesField };

package/dist/components/atoms/multi-values-field/multi-values-field.js

@@ -1,136 +1,158 @@
-import { j as n } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as q, useId as z, useState as g } from "react";
-import { cn as b } from "../../../lib/utils.js";
-import { Field as G, FieldLabel as H, FieldDescription as J, FieldError as K } from "../../../vendor/shadcn/field.js";
-import { Badge as O } from "../badge/badge.js";
-const Q = q(
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as O, useId as Q, useState as b } from "react";
+import { cn as y } from "../../../lib/utils.js";
+import { Field as U, FieldLabel as W, FieldDescription as Y, FieldError as Z } from "../../../vendor/shadcn/field.js";
+import { Badge as E } from "../badge/badge.js";
+import { Icon as _ } from "../icon/icon.js";
+const A = O(
   ({
     value: t = [],
-    onChange: d,
+    onChange: p,
     label: w,
-    description: c,
-    error: y,
-    placeholder: j = "Type and press Enter...",
-    disabled: u = !1,
-    id: v,
+    description: f,
+    error: k,
+    placeholder: v = "Type and press Enter...",
+    disabled: l = !1,
+    id: C,
     name: V,
-    triggerKeys: p = ["Enter", "Tab", "Comma"],
+    triggerKeys: c = ["Enter", "Tab", "Comma", "Space"],
     addOnBlur: B = !0,
-    allowDuplicates: D = !1,
-    maxItems: f,
-    validate: k,
-    badgeVariant: I = "outline",
-    orientation: N = "vertical",
-    className: $
-  }, C) => {
-    const T = z(), o = v || T, m = !!y, [h, E] = g(""), [R, F] = g(!1), [x, i] = g(""), s = (e) => {
-      const r = e.trim();
-      if (r !== "") {
-        if (f && t.length >= f) {
-          i(`Maximum ${f} items allowed`);
+    allowDuplicates: I = !1,
+    maxItems: m,
+    validate: j,
+    badgeVariant: N = "outline",
+    orientation: $ = "vertical",
+    className: T,
+    deleteAll: a
+  }, R) => {
+    const M = Q(), o = C || M, h = !!k, [x, D] = b(""), [S, F] = b(!1), [g, i] = b(""), s = (e) => {
+      const n = e.trim();
+      if (n !== "") {
+        if (m && t.length >= m) {
+          i(`Maximum ${m} items allowed`);
           return;
         }
-        if (!D && t.includes(r)) {
+        if (!I && t.includes(n)) {
           i("Duplicate values are not allowed");
           return;
         }
-        if (k) {
-          const l = k(r);
-          if (l !== !0) {
+        if (j) {
+          const d = j(n);
+          if (d !== !0) {
             i(
-              typeof l == "string" ? l : "Invalid value"
+              typeof d == "string" ? d : "Invalid value"
             );
             return;
           }
         }
-        i(""), d([...t, r]), E("");
+        i(""), p([...t, n]), D("");
       }
-    }, M = (e) => {
-      d(t.filter((r) => r !== e)), i("");
     }, P = (e) => {
-      const r = e.currentTarget.value;
-      e.key === "Enter" && p.includes("Enter") ? (e.preventDefault(), s(r)) : e.key === "Tab" && p.includes("Tab") ? r.trim() !== "" && (e.preventDefault(), s(r)) : (e.key === "," || e.key === ",") && p.includes("Comma") ? (e.preventDefault(), s(r)) : e.key === "Backspace" && r === "" && t.length > 0 && d(t.slice(0, -1));
-    }, A = (e) => {
-      E(e.target.value), i("");
-    }, L = () => {
+      p(t.filter((n) => n !== e)), i("");
+    }, L = (e) => {
+      const n = e.currentTarget.value;
+      e.key === "Enter" && c.includes("Enter") ? (e.preventDefault(), s(n)) : e.key === "Tab" && c.includes("Tab") ? n.trim() !== "" && (e.preventDefault(), s(n)) : (e.key === "," || e.key === ",") && c.includes("Comma") || e.key === " " && c.includes("Space") ? (e.preventDefault(), s(n)) : e.key === "Backspace" && n === "" && t.length > 0 && p(t.slice(0, -1));
+    }, X = (e) => {
+      D(e.target.value), i("");
+    }, q = () => {
       F(!0);
-    }, S = () => {
-      F(!1), B && h.trim() !== "" && s(h);
-    }, X = (e, r) => {
-      e.preventDefault(), e.stopPropagation(), M(r);
-    }, a = y || x;
-    return /* @__PURE__ */ n.jsxs(
-      G,
+    }, z = () => {
+      F(!1), B && x.trim() !== "" && s(x);
+    }, G = (e, n) => {
+      e.preventDefault(), e.stopPropagation(), P(n);
+    }, H = () => {
+      l || !a?.onClick || a.onClick();
+    }, u = k || g;
+    return /* @__PURE__ */ r.jsxs(
+      U,
       {
-        orientation: N,
-        "data-invalid": m,
-        className: b("w-full", $),
+        orientation: $,
+        "data-invalid": h,
+        className: y("w-full", T),
         children: [
-          w && /* @__PURE__ */ n.jsx(H, { htmlFor: o, children: w }),
-          /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
-            /* @__PURE__ */ n.jsxs(
+          w && /* @__PURE__ */ r.jsx(W, { htmlFor: o, children: w }),
+          /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+            /* @__PURE__ */ r.jsxs(
               "div",
               {
-                className: b(
-                  "font-normal file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-9 w-full min-w-0 rounded-md border bg-white px-3 py-1.5 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 text-sm",
+                className: y(
+                  "font-normal file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1.5 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 text-sm",
                   "flex-wrap gap-1.5 items-center",
-                  R && "border-ring ring-ring/50 ring-[3px]",
-                  (m || x) && "border-destructive ring-destructive/20 dark:ring-destructive/40",
-                  u && "opacity-50 cursor-not-allowed"
+                  S && "border-ring ring-ring/50 ring-[3px]",
+                  (h || g) && "border-destructive ring-destructive/20 dark:ring-destructive/40",
+                  l && "opacity-50 cursor-not-allowed"
                 ),
                 onClick: () => {
-                  u || document.getElementById(o)?.focus();
+                  l || document.getElementById(o)?.focus();
                 },
                 children: [
-                  t.map((e, r) => /* @__PURE__ */ n.jsx(
-                    O,
-                    {
-                      variant: I,
-                      endIcon: "X",
-                      className: "m-0 cursor-pointer",
-                      onClick: (l) => X(l, e),
-                      endIconProps: {
-                        className: "cursor-pointer hover:text-destructive transition-colors"
-                      },
-                      children: e
-                    },
-                    `${e}-${r}`
-                  )),
-                  /* @__PURE__ */ n.jsx(
+                  (() => {
+                    const e = a && !l && t.length >= a.length;
+                    return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+                      e && /* @__PURE__ */ r.jsx(
+                        "div",
+                        {
+                          onClick: (n) => {
+                            n.preventDefault(), n.stopPropagation(), H();
+                          },
+                          children: /* @__PURE__ */ r.jsx(
+                            E,
+                            {
+                              variant: "secondary",
+                              className: "gap-1 cursor-pointer flex items-center",
+                              children: a.label || "Delete all"
+                            }
+                          )
+                        }
+                      ),
+                      t.map((n, d) => /* @__PURE__ */ r.jsxs(E, { variant: N, children: [
+                        n,
+                        /* @__PURE__ */ r.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (J) => G(J, n),
+                            children: /* @__PURE__ */ r.jsx(_, { name: "X", className: "h-3 w-3" })
+                          }
+                        )
+                      ] }, `${n}-${d}`))
+                    ] });
+                  })(),
+                  /* @__PURE__ */ r.jsx(
                     "input",
                     {
-                      ref: C,
+                      ref: R,
                       id: o,
                       name: V,
                       type: "text",
-                      value: h,
-                      onChange: A,
-                      onKeyDown: P,
-                      onFocus: L,
-                      onBlur: S,
-                      placeholder: t.length === 0 ? j : "",
-                      disabled: u,
-                      className: b(
+                      value: x,
+                      onChange: X,
+                      onKeyDown: L,
+                      onFocus: q,
+                      onBlur: z,
+                      placeholder: t.length === 0 ? v : "",
+                      disabled: l,
+                      className: y(
                         "flex-1 min-w-[120px] outline-none bg-transparent border-none shadow-none p-0 h-6",
                         "placeholder:text-muted-foreground",
                         "disabled:cursor-not-allowed"
                       ),
-                      "aria-invalid": m || !!x,
-                      "aria-describedby": c || a ? `${o}-description` : void 0
+                      "aria-invalid": h || !!g,
+                      "aria-describedby": f || u ? `${o}-description` : void 0
                     }
                   )
                 ]
               }
             ),
-            c && !a && /* @__PURE__ */ n.jsx(J, { id: `${o}-description`, children: c }),
-            a && /* @__PURE__ */ n.jsx(K, { id: `${o}-description`, children: a })
+            f && !u && /* @__PURE__ */ r.jsx(Y, { id: `${o}-description`, children: f }),
+            u && /* @__PURE__ */ r.jsx(Z, { id: `${o}-description`, children: u })
           ] })
         ]
       }
     );
   }
 );
-Q.displayName = "MultiValuesField";
+A.displayName = "MultiValuesField";
 export {
-  Q as MultiValuesField
+  A as MultiValuesField
 };

package/dist/components/atoms/multi-values-field/multi-values-field.types.d.ts

@@ -1,20 +1,101 @@
+/**
+ * Keyboard keys that trigger adding a value
+ */
 export type TriggerKey = "Enter" | "Tab" | "Comma";
+/**
+ * Props for the MultiValuesField component
+ */
 export interface MultiValuesFieldProps {
+    /**
+     * Current array of values
+     */
     value: string[];
+    /**
+     * Callback fired when the values array changes
+     */
     onChange: (values: string[]) => void;
+    /**
+     * Label text displayed above the input
+     */
     label?: string;
+    /**
+     * Helper text displayed below the input
+     */
     description?: string;
+    /**
+     * Error message displayed below the input
+     */
     error?: string;
+    /**
+     * Placeholder text for the input
+     * @default "Type and press Enter..."
+     */
     placeholder?: string;
+    /**
+     * Whether the field is disabled
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * HTML id attribute
+     */
     id?: string;
+    /**
+     * HTML name attribute
+     */
     name?: string;
+    /**
+     * Keys that trigger adding a new value
+     * @default ["Enter", "Tab", "Comma"]
+     */
     triggerKeys?: TriggerKey[];
+    /**
+     * Whether to add value when input loses focus
+     * @default true
+     */
     addOnBlur?: boolean;
+    /**
+     * Whether to allow duplicate values
+     * @default false
+     */
     allowDuplicates?: boolean;
+    /**
+     * Maximum number of values allowed
+     */
     maxItems?: number;
+    /**
+     * Validation function that returns true or an error message
+     */
     validate?: (value: string) => boolean | string;
+    /**
+     * Visual variant for the value badges
+     * @default "outline"
+     */
     badgeVariant?: "default" | "secondary" | "destructive" | "outline";
+    /**
+     * Layout orientation
+     * @default "vertical"
+     */
     orientation?: "vertical" | "horizontal";
+    /**
+     * Additional CSS classes
+     */
     className?: string;
+    /**
+     * Configuration for "Delete All" chip functionality
+     */
+    deleteAll?: {
+        /**
+         * Label for the delete all chip
+         */
+        label?: string;
+        /**
+         * Minimum number of selected items to show delete all
+         */
+        length: number;
+        /**
+         * Callback fired when delete all is clicked
+         */
+        onClick: () => void;
+    };
 }