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

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

@@ -3,12 +3,44 @@ import { VariantProps } from 'class-variance-authority';
 declare const textareaWrapperVariants: (props?: ({
     layout?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Textarea component
+ */
 export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className">, VariantProps<typeof textareaWrapperVariants> {
+    /**
+     * Label text displayed above or next to the textarea
+     */
     label?: string;
+    /**
+     * Helper text displayed below the textarea
+     */
     description?: string;
+    /**
+     * Error message displayed below the textarea (overrides description)
+     */
     error?: string;
+    /**
+     * Additional CSS classes for the container
+     */
     className?: string;
+    /**
+     * Additional props to pass to the textarea element
+     */
     textareaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;
 }
+/**
+ * Multiline text input component with label, description, and error handling.
+ * Supports vertical and horizontal layouts.
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   label="Comments"
+ *   placeholder="Enter your comments..."
+ *   description="Max 500 characters"
+ *   rows={4}
+ * />
+ * ```
+ */
 declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

package/dist/components/atoms/textarea/textarea.js

@@ -3,7 +3,7 @@ import { forwardRef as p, useId as h } from "react";
 import { cva as d } from "../../../node_modules/class-variance-authority/dist/index.js";
 import { Textarea as j } from "../../../vendor/shadcn/textarea.js";
 import { cn as s } from "../../../lib/utils.js";
-import { Label as N } from "../../../vendor/shadcn/label.js";
+import { Label as N } from "../label/label.js";
 const b = d("flex gap-2 w-full", {
   variants: {
     layout: {

package/dist/components/atoms/time-picker/time-picker.d.ts

@@ -1,4 +1,75 @@
 import { TimePickerProps as TimePickerPrimitiveProps } from '../../../vendor/shadcn/time-picker';
-export type TimePickerProps = TimePickerPrimitiveProps;
-declare const TimePicker: import('react').ForwardRefExoticComponent<TimePickerPrimitiveProps & import('react').RefAttributes<HTMLInputElement>>;
+import * as React from "react";
+/**
+ * Props for the TimePicker component
+ */
+export interface TimePickerProps extends Omit<TimePickerPrimitiveProps, "onChange"> {
+    /**
+     * Label text displayed above the input
+     */
+    label?: string;
+    /**
+     * Error message displayed below the input
+     */
+    error?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    description?: string;
+    /**
+     * Layout orientation
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal" | "responsive";
+    /**
+     * Callback fired when the time value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Picker mode
+     * - "native": HTML5 native input (default)
+     * - "dropdown": Custom dropdown with columns
+     * @default "native"
+     */
+    mode?: "native" | "dropdown";
+    /**
+     * Minute intervals (only for mode="dropdown")
+     * 0 = all minutes, 15 = every 15 minutes, etc.
+     * @default 0
+     */
+    divisorMinutes?: number;
+    /**
+     * Width of the picker (only for mode="dropdown")
+     * @default 140
+     */
+    width?: number | string;
+    /**
+     * Use 24-hour format (military time) instead of 12-hour with AM/PM
+     * @default false
+     */
+    use24Hour?: boolean;
+}
+/**
+ * Time input picker with label, description, and error handling.
+ * Supports two modes: native HTML5 input or custom dropdown.
+ *
+ * @example
+ * ```tsx
+ * // Native mode (default)
+ * <TimePicker
+ *   label="Select time"
+ *   value={time}
+ *   onChange={(value) => setTime(value)}
+ * />
+ *
+ * // Dropdown mode with 15-minute intervals
+ * <TimePicker
+ *   mode="dropdown"
+ *   divisorMinutes={15}
+ *   value={time}
+ *   onChange={(value) => setTime(value)}
+ * />
+ * ```
+ */
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
 export { TimePicker };

package/dist/components/atoms/time-picker/time-picker.js

@@ -1,5 +1,220 @@
-import { TimePicker as e } from "../../../vendor/shadcn/time-picker.js";
-const r = e;
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import * as G from "react";
+import { useId as J, useState as $, useRef as C, useEffect as E } from "react";
+import { cn as c } from "../../../lib/utils.js";
+import { Icon as K } from "../icon/icon.js";
+import { TimePicker as Q } from "../../../vendor/shadcn/time-picker.js";
+import { Field as R, FieldLabel as T, FieldDescription as O, FieldError as _ } from "../../../vendor/shadcn/field.js";
+const X = Array.from({ length: 12 }, (e, n) => n + 1), Y = Array.from({ length: 24 }, (e, n) => n), Z = ["AM", "PM"], H = (e) => {
+  if (e === 0)
+    return Array.from({ length: 60 }, (o, i) => i);
+  const n = 60 / e;
+  return Array.from({ length: n }, (o, i) => i * e);
+}, d = (e) => e.toString().padStart(2, "0"), ee = (e) => {
+  const n = e >= 12 ? "PM" : "AM";
+  return { hour: e === 0 ? 12 : e > 12 ? e - 12 : e, meridiem: n };
+}, te = (e, n) => e === 12 ? n === "AM" ? 0 : 12 : n === "PM" ? e + 12 : e, re = G.forwardRef(
+  ({
+    className: e,
+    label: n,
+    error: o,
+    description: i,
+    orientation: x = "vertical",
+    id: m,
+    onChange: f,
+    mode: y = "native",
+    divisorMinutes: j = 0,
+    width: s = 140,
+    value: l,
+    disabled: p,
+    use24Hour: w = !1,
+    ...h
+  }, P) => {
+    const S = J(), u = m || S, v = !!o;
+    if (y === "native") {
+      const k = /* @__PURE__ */ r.jsx(
+        Q,
+        {
+          ref: P,
+          id: u,
+          value: l,
+          disabled: p,
+          className: c(
+            v && "border-destructive focus-visible:border-destructive",
+            !(n || o || i) && e
+          ),
+          "aria-invalid": v ? !0 : void 0,
+          "aria-describedby": i || o ? `${u}-description` : void 0,
+          ...h,
+          onChange: (a) => {
+            f?.(a.target.value);
+          }
+        }
+      );
+      return n || o || i ? /* @__PURE__ */ r.jsxs(
+        R,
+        {
+          orientation: x,
+          "data-invalid": v,
+          className: c("w-full", e),
+          children: [
+            n && /* @__PURE__ */ r.jsx(T, { htmlFor: u, children: n }),
+            /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+              k,
+              i && !o && /* @__PURE__ */ r.jsx(O, { id: `${u}-description`, children: i }),
+              o && /* @__PURE__ */ r.jsx(_, { id: `${u}-description`, children: o })
+            ] })
+          ]
+        }
+      ) : k;
+    }
+    return /* @__PURE__ */ r.jsx(
+      ne,
+      {
+        value: l || (w ? "00:00" : "12:00"),
+        onChange: f,
+        divisorMinutes: j,
+        width: s,
+        label: n,
+        error: o,
+        description: i,
+        disabled: p,
+        className: e,
+        use24Hour: w
+      }
+    );
+  }
+);
+re.displayName = "TimePicker";
+const ne = ({
+  value: e,
+  onChange: n,
+  divisorMinutes: o,
+  width: i,
+  label: x,
+  error: m,
+  description: f,
+  disabled: y,
+  className: j,
+  use24Hour: s = !1
+}) => {
+  const [l, p] = $(!1), w = C(null), h = C(null), P = (t) => {
+    const [g, B] = t.split(":"), N = parseInt(g, 10) || 0, A = parseInt(B, 10) || 0;
+    if (s)
+      return { hour24: N, minute: A, hour: N, meridiem: "AM" };
+    const { hour: W, meridiem: q } = ee(N);
+    return { hour24: N, minute: A, hour: W, meridiem: q };
+  }, { hour: S, hour24: u, minute: v, meridiem: k } = P(e), [a, D] = $(s ? u : S), [b, F] = $(v), [M, L] = $(k), U = H(o);
+  E(() => {
+    let t;
+    s ? t = a : t = te(a, M);
+    const g = `${d(t)}:${d(b)}`;
+    n?.(g);
+  }, [a, b, M, n, s]), E(() => {
+    const t = (g) => {
+      h.current && !h.current.contains(g.target) && p(!1);
+    };
+    if (l)
+      return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [l]);
+  const V = s ? `${d(a)}:${d(b)}` : `${d(a)}:${d(b)} ${M}`, z = s ? Y : X, I = /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      ref: h,
+      className: c("relative inline-block", j),
+      style: { width: typeof i == "number" ? `${i}px` : i },
+      children: [
+        /* @__PURE__ */ r.jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: y,
+            onClick: () => !y && p(!l),
+            className: c(
+              "flex items-center justify-between w-full h-9 px-3 py-2",
+              "text-sm rounded-md border border-input bg-background",
+              "hover:bg-accent hover:text-accent-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              m && "border-destructive"
+            ),
+            children: [
+              /* @__PURE__ */ r.jsx("span", { children: V }),
+              /* @__PURE__ */ r.jsx(
+                K,
+                {
+                  name: l ? "CaretUp" : "CaretDown",
+                  size: "sm",
+                  className: "ml-2"
+                }
+              )
+            ]
+          }
+        ),
+        l && /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            ref: w,
+            className: c(
+              "absolute z-50 mt-1 bg-popover border border-border rounded-md shadow-lg",
+              "flex divide-x divide-border"
+            ),
+            style: { width: "fit-content", minWidth: s ? "140px" : "200px" },
+            children: [
+              /* @__PURE__ */ r.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: z.map((t) => /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => D(t),
+                  className: c(
+                    "px-3 py-2 text-sm text-left hover:bg-accent",
+                    a === t && "bg-primary text-primary-foreground hover:bg-primary"
+                  ),
+                  children: d(t)
+                },
+                t
+              )) }),
+              /* @__PURE__ */ r.jsx("div", { className: "flex flex-col overflow-y-auto max-h-[200px] min-w-[60px]", children: U.map((t) => /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => F(t),
+                  className: c(
+                    "px-3 py-2 text-sm text-left hover:bg-accent",
+                    b === t && "bg-primary text-primary-foreground hover:bg-primary"
+                  ),
+                  children: d(t)
+                },
+                t
+              )) }),
+              !s && /* @__PURE__ */ r.jsx("div", { className: "flex flex-col min-w-[60px]", children: Z.map((t) => /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => L(t),
+                  className: c(
+                    "px-3 py-2 text-sm text-left hover:bg-accent",
+                    M === t && "bg-primary text-primary-foreground hover:bg-primary"
+                  ),
+                  children: t
+                },
+                t
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return x || m || f ? /* @__PURE__ */ r.jsxs(R, { orientation: "vertical", className: c("w-full", j), children: [
+    x && /* @__PURE__ */ r.jsx(T, { children: x }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+      I,
+      f && !m && /* @__PURE__ */ r.jsx(O, { children: f }),
+      m && /* @__PURE__ */ r.jsx(_, { children: m })
+    ] })
+  ] }) : I;
+};
 export {
-  r as TimePicker
+  re as TimePicker
 };

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

@@ -1 +1,16 @@
+/**
+ * Toast notification container component (based on Sonner).
+ * Place once at root level to enable toast notifications globally.
+ * Use with toast() function from sonner.
+ *
+ * @example
+ * ```tsx
+ * // In root layout:
+ * <Toaster />
+ *
+ * // Anywhere in app:
+ * import { toast } from 'sonner';
+ * toast.success('Operation successful!');
+ * ```
+ */
 export { Toaster } from '../../../vendor/shadcn/sonner';

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

@@ -2,10 +2,35 @@ import { ToggleGroup as ShadcnToggleGroup, ToggleGroupItem as ShadcnToggleGroupI
 import { VariantProps } from 'class-variance-authority';
 import { toggleVariants } from '../../../vendor/shadcn/toggle';
 import * as React from "react";
-export interface ToggleGroupProps extends React.ComponentPropsWithoutRef<typeof ShadcnToggleGroup>, VariantProps<typeof toggleVariants> {
+/**
+ * Props for the ToggleGroup component
+ */
+export interface ToggleGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof ShadcnToggleGroup>, "onValueChange">, VariantProps<typeof toggleVariants> {
+    /**
+     * Callback fired when the selected value changes
+     */
+    onChange?: (value: string) => void;
 }
+/**
+ * Props for the ToggleGroupItem component
+ */
 export interface ToggleGroupItemProps extends React.ComponentPropsWithoutRef<typeof ShadcnToggleGroupItem>, VariantProps<typeof toggleVariants> {
 }
+/**
+ * Group of toggle buttons for single or multiple selection.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup type="single" value={selected} onChange={setSelected}>
+ *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
 declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Individual toggle button within a ToggleGroup
+ */
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleGroup, ToggleGroupItem };

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

@@ -1,32 +1,33 @@
-import { j as s } from "../../../_virtual/jsx-runtime.js";
-import * as a from "react";
-import { ToggleGroup as l, ToggleGroupItem as u } from "../../../vendor/shadcn/toggle-group.js";
+import { j as p } from "../../../_virtual/jsx-runtime.js";
+import * as s from "react";
+import { ToggleGroup as u, ToggleGroupItem as f } from "../../../vendor/shadcn/toggle-group.js";
 import { cn as t } from "../../../lib/utils.js";
-const f = a.forwardRef(({ className: o, variant: r, size: e, children: m, ...g }, p) => /* @__PURE__ */ s.jsx(
-  l,
+const n = s.forwardRef(({ className: o, variant: r, size: e, children: a, onChange: g, ...m }, l) => /* @__PURE__ */ p.jsx(
+  u,
   {
-    ref: p,
+    ref: l,
     className: t(o),
     variant: r,
     size: e,
-    ...g,
-    children: m
+    onValueChange: g,
+    ...m,
+    children: a
   }
 ));
-f.displayName = "ToggleGroup";
-const G = a.forwardRef(({ className: o, variant: r, size: e, children: m, ...g }, p) => /* @__PURE__ */ s.jsx(
-  u,
+n.displayName = "ToggleGroup";
+const G = s.forwardRef(({ className: o, variant: r, size: e, children: a, ...g }, m) => /* @__PURE__ */ p.jsx(
+  f,
   {
-    ref: p,
+    ref: m,
     className: t(o),
     variant: r,
     size: e,
     ...g,
-    children: m
+    children: a
   }
 ));
 G.displayName = "ToggleGroupItem";
 export {
-  f as ToggleGroup,
+  n as ToggleGroup,
   G as ToggleGroupItem
 };

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

@@ -1,15 +1,66 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Tooltip as ShadcnTooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../vendor/shadcn/tooltip';
 type ShadcnTooltipRootProps = ComponentProps<typeof ShadcnTooltip>;
 type TooltipContentProps = ComponentProps<typeof TooltipContent>;
 type TooltipProviderProps = ComponentProps<typeof TooltipProvider>;
 type TooltipTriggerProps = ComponentProps<typeof TooltipTrigger>;
+/**
+ * Props for the Tooltip component
+ */
 interface TooltipProps extends ShadcnTooltipRootProps {
-    content: string;
+    /**
+     * Content to display in the tooltip
+     * Can be a string, JSX element, or any React node
+     */
+    content: ReactNode;
+    /**
+     * Additional props for the tooltip content
+     */
     contentProps?: TooltipContentProps;
+    /**
+     * Additional props for the tooltip provider
+     */
     providerProps?: TooltipProviderProps;
+    /**
+     * Additional props for the tooltip trigger
+     */
     triggerProps?: TooltipTriggerProps;
+    /**
+     * Whether to show the tooltip
+     * @default true
+     */
     show?: boolean;
 }
+/**
+ * Tooltip component for displaying helpful content on hover or focus.
+ *
+ * @example
+ * ```tsx
+ * // Simple text tooltip
+ * <Tooltip content="Click to edit">
+ *   <Button>Edit</Button>
+ * </Tooltip>
+ *
+ * // Conditional tooltip
+ * <Tooltip content="Info" show={showTooltip}>
+ *   <Icon name="Info" />
+ * </Tooltip>
+ *
+ * // ReactNode content with formatting
+ * <Tooltip content={<div><strong>Bold</strong> and <em>italic</em> text</div>}>
+ *   <Button>Rich Content</Button>
+ * </Tooltip>
+ *
+ * // Complex JSX content
+ * <Tooltip content={
+ *   <div className="space-y-1">
+ *     <Typography variant="sm" weight="semibold">Title</Typography>
+ *     <Typography variant="sm">Description here</Typography>
+ *   </div>
+ * }>
+ *   <Icon name="Info" />
+ * </Tooltip>
+ * ```
+ */
 declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipProvider, type TooltipProps, type TooltipProviderProps, };

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

@@ -4,8 +4,26 @@ declare const typographyVariants: (props?: ({
     variant?: "blockquote" | "h1" | "h2" | "h3" | "h4" | "p" | "list" | "muted" | "xs" | "sm" | "lg" | "xl" | "lead" | null | undefined;
     weight?: "bold" | "regular" | "semibold" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Typography component
+ */
 export interface TypographyProps extends HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    /**
+     * HTML element to render (overrides the default element for the variant)
+     * @example "div", "span", "h1", "p"
+     */
     as?: keyof JSX.IntrinsicElements;
 }
+/**
+ * Flexible typography component with predefined text styles and semantic HTML elements.
+ * Automatically renders the appropriate HTML element based on the variant.
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Page Title</Typography>
+ * <Typography variant="muted">Helper text</Typography>
+ * <Typography as="span" variant="lg">Custom span with lg style</Typography>
+ * ```
+ */
 declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<HTMLElement>>;
 export { Typography };

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

@@ -1,17 +1,67 @@
 import { ReactNode } from 'react';
+/**
+ * Represents a single breadcrumb item
+ */
 interface BreadcrumbItemData {
+    /**
+     * Display text for the breadcrumb item
+     */
     label: string;
+    /**
+     * URL to navigate to when the breadcrumb is clicked
+     */
     href?: string;
+    /**
+     * Optional dropdown menu items for this breadcrumb
+     */
     dropdown?: Array<{
+        /**
+         * Display text for dropdown item
+         */
         label: string;
+        /**
+         * URL for dropdown item
+         */
         href: string;
     }>;
 }
+/**
+ * Props for the Breadcrumb component
+ */
 interface BreadcrumbProps {
+    /**
+     * Array of breadcrumb items to display
+     */
     items: BreadcrumbItemData[];
+    /**
+     * Custom separator element between breadcrumb items
+     */
     separator?: ReactNode;
+    /**
+     * Maximum number of items before collapsing with ellipsis
+     * @default 0 (no collapsing)
+     */
     maxItems?: number;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
 }
+/**
+ * Navigation breadcrumb component with support for collapsing and dropdown menus.
+ * Automatically collapses middle items when maxItems is exceeded.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Item Detail' }
+ *   ]}
+ *   maxItems={3}
+ * />
+ * ```
+ */
 declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLElement>>;
 export { Breadcrumb, type BreadcrumbProps, type BreadcrumbItemData };