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

package/dist/components/atoms/access-denied-alert/access-denied-alert.d.ts

@@ -1,6 +1,9 @@
 import { HTMLAttributes } from 'react';
 import { IconName } from '../icon';
 import { IconWeight } from '@phosphor-icons/react';
+/**
+ * Props for the AccessDeniedAlert component
+ */
 interface AccessDeniedAlertProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Icon name to display on the left side.
@@ -18,5 +21,18 @@ interface AccessDeniedAlertProps extends HTMLAttributes<HTMLDivElement> {
      */
     text?: string;
 }
+/**
+ * Alert component for displaying access denied / permission error messages.
+ * Shows an icon and customizable message for unauthorized access scenarios.
+ *
+ * @example
+ * ```tsx
+ * <AccessDeniedAlert />
+ * <AccessDeniedAlert
+ *   iconName="Lock"
+ *   text="You need admin permissions to access this feature"
+ * />
+ * ```
+ */
 declare const AccessDeniedAlert: import('react').ForwardRefExoticComponent<AccessDeniedAlertProps & import('react').RefAttributes<HTMLDivElement>>;
 export { AccessDeniedAlert, type AccessDeniedAlertProps };

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

@@ -1,26 +1,92 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import type * as AccordionPrimitive from "@radix-ui/react-accordion";
+/**
+ * Props for the Accordion component.
+ * Supports both single and multiple selection modes.
+ */
 type AccordionProps = (AccordionPrimitive.AccordionSingleProps & {
+    /**
+     * Single selection mode - only one item can be expanded at a time
+     */
     type: "single";
+    /**
+     * Accordion items
+     */
     children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
 }) | (AccordionPrimitive.AccordionMultipleProps & {
+    /**
+     * Multiple selection mode - multiple items can be expanded simultaneously
+     */
     type: "multiple";
+    /**
+     * Accordion items
+     */
     children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
     className?: string;
 });
+/**
+ * Collapsible content sections organized in an accordion pattern.
+ * Supports single or multiple open items at once.
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
 declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the AccordionItem component
+ */
 interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the accordion item (trigger and content)
+     */
     children: ReactNode;
+    /**
+     * Unique identifier for the accordion item
+     */
     value: string;
 }
+/**
+ * Individual accordion section container
+ */
 declare const AccordionItem: import('react').ForwardRefExoticComponent<AccordionItemProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the AccordionTrigger component
+ */
 interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Text or elements to display in the trigger button
+     */
     children: ReactNode;
 }
+/**
+ * Clickable header that toggles the accordion item
+ */
 declare const AccordionTrigger: import('react').ForwardRefExoticComponent<AccordionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Props for the AccordionContent component
+ */
 interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content to display when the accordion item is expanded
+     */
     children: ReactNode;
 }
+/**
+ * Collapsible content area of the accordion item
+ */
 declare const AccordionContent: import('react').ForwardRefExoticComponent<AccordionContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, };

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

@@ -1,10 +1,35 @@
 import { Alert as ShadcnAlert } from '../../../vendor/shadcn/alert';
 import { ComponentProps } from 'react';
-import { IconName } from '../icon';
+import { Icon, IconName } from '../icon';
+/**
+ * Props for the Alert component
+ */
 interface AlertProps extends Omit<ComponentProps<typeof ShadcnAlert>, "children"> {
+    /**
+     * Optional icon to display at the start of the alert
+     */
     icon?: IconName;
+    /**
+     * Alert title/heading
+     */
     title?: string;
+    /**
+     * Alert description/body text
+     */
     description?: string;
+    /**
+     * Props for the icon component
+     */
+    iconProps?: ComponentProps<typeof Icon>;
 }
+/**
+ * Alert component for displaying informational, success, warning, or error messages.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="default" icon="Info" title="Information" description="This is an info alert" />
+ * <Alert variant="destructive" icon="Warning" title="Error" description="Something went wrong" />
+ * ```
+ */
 declare const Alert: import('react').ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export { Alert, type AlertProps };

package/dist/components/atoms/alert/alert.js

@@ -1,15 +1,16 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { Alert as l, AlertTitle as i, AlertDescription as a } from "../../../vendor/shadcn/alert.js";
+import { Alert as a, AlertTitle as i, AlertDescription as f } from "../../../vendor/shadcn/alert.js";
 import { forwardRef as n } from "react";
 import { Icon as p } from "../icon/icon.js";
-const x = n(
-  ({ icon: e, title: s, description: t, ...m }, o) => /* @__PURE__ */ r.jsxs(l, { ref: o, ...m, children: [
-    e && /* @__PURE__ */ r.jsx(p, { name: e, className: "size-4" }),
-    s && /* @__PURE__ */ r.jsx(i, { children: s }),
-    t && /* @__PURE__ */ r.jsx(a, { children: t })
+import { cn as x } from "../../../lib/utils.js";
+const c = n(
+  ({ icon: e, title: m, description: s, iconProps: t, ...l }, o) => /* @__PURE__ */ r.jsxs(a, { ref: o, ...l, children: [
+    e && /* @__PURE__ */ r.jsx(p, { name: e, className: x("size-4", t?.className), ...t }),
+    m && /* @__PURE__ */ r.jsx(i, { children: m }),
+    s && /* @__PURE__ */ r.jsx(f, { children: s })
   ] })
 );
-x.displayName = "Alert";
+c.displayName = "Alert";
 export {
-  x as Alert
+  c as Alert
 };

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

@@ -1,9 +1,37 @@
 import { AvatarProps } from './avatar';
 import * as React from "react";
+/**
+ * Props for the AvatarGroup component
+ */
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Avatar components to display in the group
+     */
     children: React.ReactNode;
+    /**
+     * Maximum number of avatars to display before showing "+N" badge
+     * @default 3
+     */
     max?: number;
+    /**
+     * Size for all avatars in the group
+     * @default "default"
+     */
     size?: AvatarProps["size"];
 }
+/**
+ * Displays multiple avatars in an overlapping stack.
+ * Shows remaining count when exceeding max.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3} size="lg">
+ *   <Avatar name="User 1" />
+ *   <Avatar name="User 2" />
+ *   <Avatar name="User 3" />
+ *   <Avatar name="User 4" />
+ * </AvatarGroup>
+ * ```
+ */
 declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
 export { AvatarGroup };

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

@@ -4,11 +4,36 @@ import { Avatar as ShadcnAvatar } from '../../../vendor/shadcn/avatar';
 declare const avatarVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Avatar component
+ */
 export interface AvatarProps extends ComponentProps<typeof ShadcnAvatar>, VariantProps<typeof avatarVariants> {
+    /**
+     * Image source URL
+     */
     src?: string;
+    /**
+     * Alternative text for the image
+     */
     alt?: string;
+    /**
+     * User name to generate initials from if image fails to load
+     */
     name?: string;
+    /**
+     * Custom fallback content (overrides initials)
+     */
     fallback?: string | ReactNode;
 }
+/**
+ * User avatar component with automatic fallback to initials or icon.
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="/user.jpg" name="John Doe" size="lg" />
+ * <Avatar name="Jane Smith" size="default" />
+ * <Avatar fallback={<CustomIcon />} />
+ * ```
+ */
 declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export { Avatar };

package/dist/components/atoms/avatar/avatar.js

@@ -1,5 +1,5 @@
 import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as c } from "react";
+import { forwardRef as u } from "react";
 import { cva as r } from "../../../node_modules/class-variance-authority/dist/index.js";
 import { UserIcon as v } from "../../../node_modules/@phosphor-icons/react/dist/csr/User.es.js";
 import { cn as s } from "../../../lib/utils.js";
@@ -22,7 +22,7 @@ const j = r(
     }
   }
 ), A = r("aspect-square h-full w-full object-cover"), b = r(
-  "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground font-medium uppercase",
+  "flex h-full w-full items-center justify-center rounded-full bg-surface text-muted-foreground font-medium uppercase",
   {
     variants: {
       size: {
@@ -37,15 +37,15 @@ const j = r(
       size: "default"
     }
   }
-), h = c(
-  ({ size: l, src: i, alt: d, name: e, fallback: o, className: f, ...n }, u) => {
-    const m = e ? x(e) : void 0;
+), h = u(
+  ({ size: l, src: i, alt: m, name: e, fallback: o, className: d, ...n }, c) => {
+    const f = e ? x(e) : void 0;
     let a;
-    return o ? a = o : m ? a = m : a = /* @__PURE__ */ t.jsx(v, { className: "size-1/2" }), /* @__PURE__ */ t.jsxs(
+    return o ? a = o : f ? a = f : a = /* @__PURE__ */ t.jsx(v, { className: "size-1/2" }), /* @__PURE__ */ t.jsxs(
       p,
       {
-        ref: u,
-        className: s(j({ size: l }), f),
+        ref: c,
+        className: s(j({ size: l }), d),
         "data-testid": "avatar",
         ...n,
         children: [
@@ -53,7 +53,7 @@ const j = r(
             g,
             {
               src: i,
-              alt: d || e || "Avatar",
+              alt: m || e || "Avatar",
               className: s(A()),
               "data-testid": "avatar-image",
               "data-slot": "avatar-image"

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

@@ -1,12 +1,40 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Badge as ShadcnBadge } from '../../../vendor/shadcn/badge';
 import { Icon, IconName } from '../icon';
+/**
+ * Props for the Badge component
+ */
 interface BadgeProps extends ComponentProps<typeof ShadcnBadge> {
+    /**
+     * Icon to display at the start (left side) of the badge
+     */
     startIcon?: IconName;
+    /**
+     * Icon to display at the end (right side) of the badge
+     */
     endIcon?: IconName;
+    /**
+     * Additional props to pass to the start icon
+     */
     startIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Additional props to pass to the end icon
+     */
     endIconProps?: Partial<ComponentProps<typeof Icon>>;
-    children?: string;
+    /**
+     * Text content of the badge
+     */
+    children?: ReactNode | string;
 }
+/**
+ * Badge component for displaying labels, statuses, or categories with optional icons.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="default">Active</Badge>
+ * <Badge variant="secondary" startIcon="CheckCircle">Completed</Badge>
+ * <Badge variant="destructive" endIcon="X">Error</Badge>
+ * ```
+ */
 declare const Badge: import('react').ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
 export { Badge, type BadgeProps };

package/dist/components/atoms/badge/badge.js

@@ -1,15 +1,31 @@
-import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as t } from "react";
-import { Badge as d } from "../../../vendor/shadcn/badge.js";
-import { Icon as m } from "../icon/icon.js";
-const f = t(
-  ({ children: o, startIcon: e, endIcon: s, startIconProps: a, endIconProps: i, ...x }, p) => /* @__PURE__ */ r.jsxs(d, { ref: p, ...x, children: [
-    e && /* @__PURE__ */ r.jsx(m, { name: e, size: "xs", ...a }),
-    o,
-    s && /* @__PURE__ */ r.jsx(m, { name: s, size: "xs", ...i })
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as f } from "react";
+import { Badge as o } from "../../../vendor/shadcn/badge.js";
+import { Icon as s } from "../icon/icon.js";
+const d = f(
+  ({ children: g, startIcon: i, endIcon: r, startIconProps: m, endIconProps: a, ...t }, x) => /* @__PURE__ */ e.jsxs(o, { ref: x, ...t, children: [
+    i && /* @__PURE__ */ e.jsx(
+      s,
+      {
+        name: i,
+        size: "xs",
+        weight: m?.weight || "fill",
+        ...m
+      }
+    ),
+    g,
+    r && /* @__PURE__ */ e.jsx(
+      s,
+      {
+        name: r,
+        size: "xs",
+        weight: a?.weight || "regular",
+        ...a
+      }
+    )
   ] })
 );
-f.displayName = "Badge";
+d.displayName = "Badge";
 export {
-  f as Badge
+  d as Badge
 };

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

@@ -2,16 +2,60 @@ import { ComponentProps, ReactNode } from 'react';
 import { Icon, IconName } from '../icon';
 type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
 type ButtonSize = "default" | "sm" | "lg" | "icon";
+/**
+ * Props for the Button component
+ */
 interface ButtonProps extends Omit<ComponentProps<"button">, "children"> {
+    /**
+     * Visual style variant of the button
+     * @default "default"
+     */
     variant?: ButtonVariant;
+    /**
+     * Size of the button
+     * @default "default"
+     */
     size?: ButtonSize;
+    /**
+     * When true, button renders as Slot component to pass props to child element
+     * @default false
+     */
     asChild?: boolean;
+    /**
+     * Icon to display at the start (left side) of the button
+     */
     startIcon?: IconName;
+    /**
+     * Icon to display at the end (right side) of the button
+     */
     endIcon?: IconName;
+    /**
+     * Additional props to pass to the start icon
+     */
     startIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Additional props to pass to the end icon
+     */
     endIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Shows loading spinner and disables the button
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Button content (text, elements, etc.)
+     */
     children?: ReactNode;
 }
+/**
+ * Versatile button component with icon support and loading state.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="default">Click me</Button>
+ * <Button startIcon="Plus" size="sm">Add Item</Button>
+ * <Button loading disabled>Saving...</Button>
+ * ```
+ */
 declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export { Button, type ButtonProps };

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

@@ -1,33 +1,167 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { CardProps as ShadcnCardProps } from '../../../vendor/shadcn/card';
-interface CardProps extends ShadcnCardProps {
+/**
+ * Props for the CardBase component (composable version)
+ */
+interface CardBaseProps extends ShadcnCardProps {
+    /**
+     * Content to display in the card
+     */
     children: ReactNode;
     /**
      * Visual variant of the card
      * - `default`: Standard gray border
      * - `active`: Blue border for active/selected state
+     * @default "default"
      */
     variant?: "default" | "active";
 }
-declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Base container card component for manual composition.
+ * Use this when you need full control over the card structure.
+ *
+ * @example
+ * ```tsx
+ * <CardBase variant="default">
+ *   <CardHeader>
+ *     <CardTitle>Title</CardTitle>
+ *     <CardDescription>Description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>Content goes here</CardContent>
+ *   <CardFooter>Footer actions</CardFooter>
+ * </CardBase>
+ * ```
+ */
+declare const CardBase: import('react').ForwardRefExoticComponent<CardBaseProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardHeader component
+ */
 interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the card header (typically CardTitle and CardDescription)
+     */
     children: ReactNode;
 }
+/**
+ * Header section of a card
+ */
 declare const CardHeader: import('react').ForwardRefExoticComponent<CardHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardTitle component
+ */
 interface CardTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title text or elements
+     */
     children: ReactNode;
 }
+/**
+ * Title element within a card header
+ */
 declare const CardTitle: import('react').ForwardRefExoticComponent<CardTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardDescription component
+ */
 interface CardDescriptionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Description text or elements
+     */
     children: ReactNode;
 }
+/**
+ * Description element within a card header
+ */
 declare const CardDescription: import('react').ForwardRefExoticComponent<CardDescriptionProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardContent component
+ */
 interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Main content of the card
+     */
     children: ReactNode;
 }
+/**
+ * Main content section of a card
+ */
 declare const CardContent: import('react').ForwardRefExoticComponent<CardContentProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Props for the CardFooter component
+ */
 interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Footer content (typically action buttons)
+     */
     children: ReactNode;
 }
+/**
+ * Footer section of a card
+ */
 declare const CardFooter: import('react').ForwardRefExoticComponent<CardFooterProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, };
+/**
+ * Props for the Card component (pre-composed version)
+ */
+interface CardProps extends Omit<ShadcnCardProps, 'children' | 'title'> {
+    /**
+     * Card title
+     */
+    title?: ReactNode;
+    /**
+     * Card description (shown below the title)
+     */
+    description?: ReactNode;
+    /**
+     * Main content of the card
+     */
+    children: ReactNode;
+    /**
+     * Footer content (typically action buttons)
+     */
+    footer?: ReactNode;
+    /**
+     * Visual variant of the card
+     * - `default`: Standard gray border
+     * - `active`: Blue border for active/selected state
+     * @default "default"
+     */
+    variant?: "default" | "active";
+    /**
+     * Additional className for the header
+     */
+    headerClassName?: string;
+    /**
+     * Additional className for the title
+     */
+    titleClassName?: string;
+    /**
+     * Additional className for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional className for the content
+     */
+    contentClassName?: string;
+    /**
+     * Additional className for the footer
+     */
+    footerClassName?: string;
+}
+/**
+ * Pre-composed Card component with built-in structure.
+ * Use this for simple cases where you just need to pass title and footer as props.
+ * For more complex layouts, use CardBase with manual composition.
+ *
+ * @example
+ * ```tsx
+ * <Card
+ *   title="Card Title"
+ *   description="Card description"
+ *   footer={<Button>Action</Button>}
+ *   variant="default"
+ * >
+ *   <p>Main content here</p>
+ * </Card>
+ * ```
+ */
+declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Card, CardBase, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, type CardProps, type CardBaseProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, };