@yuno-payments/dashboard-design-system 0.0.8-beta.6 → 0.0.9

package/README.md

@@ -1,69 +1,299 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+# Dashboard Design System
+
+A design component library for Yuno's dashboard, built with React, TypeScript, and based on the shadcn/ui design system.
+
+## Project Description
+
+This library provides a complete set of reusable components that follow Atomic Design principles and are aligned with Yuno's design system. All components are built on a solid foundation of shadcn/ui components and extended with specific functionalities for dashboard needs.
+
+## Motivation and Objective
+
+The primary **motivation** of this design system is to be perfectly aligned with our Figma design system to **facilitate AI-powered interface generation** and optimize our development workflow. By maintaining strict consistency between our component library and Figma designs, we enable:
+
+- 🤖 **AI-assisted development**: Seamless code generation from Figma designs
+- ⚡ **Accelerated development**: Faster prototyping and implementation
+- 🎯 **Design-to-code consistency**: Perfect alignment between design and implementation
+- 🔄 **Streamlined workflow**: Reduced friction between design and development teams
+
+## Figma Design System
+
+All components in this library must correspond exactly in **name and design** with the components defined in our Figma design system:
+
+**🎨 [Figma Design System - shadcn UI Kit for Yuno](https://www.figma.com/design/fcHm3yuz9KiqdRHM7oWneG/shadcn-ui-kit-for-Figma---Pro-Blocks---August-2025--Yuno-)**
+
+This Figma system is based on **[shadcndesign.com](https://www.shadcndesign.com/)**, ensuring industry-standard design patterns and AI compatibility.
+
+⚠️ **IMPORTANT:** It is **mandatory** that any new component or modification follows exactly the design specifications, nomenclature, and behavior defined in Figma.
+
+## Technology Foundation
+
+### Shadcn/ui Base
+This design system is primarily based on **[shadcn/ui](https://ui.shadcn.com/docs)**, a collection of beautifully designed components built using Radix UI and Tailwind CSS. Shadcn/ui provides:
+
+- ✅ **Accessibility-first**: Full ARIA support and keyboard navigation
+- ✅ **Customizable**: Built with CSS variables and utility classes
+- ✅ **Copy & paste**: Simple integration without package dependencies
+- ✅ **TypeScript**: Full type safety and IntelliSense support
+
+**📚 [Shadcn/ui Documentation](https://ui.shadcn.com/docs)**
+
+### Tailwind CSS Integration
+All components use **Tailwind CSS** utility classes for styling. Developers must be familiar with Tailwind's utility-first approach:
+
+- 🎨 **Utility-first**: Use utility classes for rapid UI development
+- 📱 **Responsive design**: Built-in responsive design utilities
+- 🌙 **Dark mode**: Native dark mode support
+- ⚡ **Performance**: Optimized CSS output with purging
+
+**📚 [Tailwind CSS Documentation](https://tailwindcss.com/docs/installation/using-vite)**
+
+## Vendors Folder
+
+The `src/vendor/` folder contains the **base components** that we use to create our custom components:
+
+```
+src/vendor/shadcn/
+├── alert.tsx           # Base alert component
+├── avatar.tsx          # Base avatar component
+├── badge.tsx           # Base badge component
+├── breadcrumb.tsx      # Base breadcrumb component
+├── button.tsx          # Base button component
+├── checkbox.tsx        # Base checkbox component
+├── dropdown-menu.tsx   # Base dropdown component
+├── input.tsx           # Base input component
+├── label.tsx           # Base label component
+├── radio-group.tsx     # Base radio group component
+├── separator.tsx       # Base separator component
+├── skeleton.tsx        # Base skeleton component
+├── switch.tsx          # Base switch component
+├── tabs.tsx            # Base tabs component
+└── tooltip.tsx         # Base tooltip component
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+These shadcn/ui base components provide:
+- ✅ Complete accessibility (ARIA, keyboard navigation)
+- ✅ Base styles with Tailwind CSS
+- ✅ Predefined variants and states
+- ✅ Radix UI primitives compatibility
+
+## Atomic Design Structure
+
+The library strictly follows the **Atomic Design** methodology with the following structure:
+
 ```
+src/components/
+├── atoms/              # Basic and indivisible components
+│   ├── alert/
+│   ├── avatar/
+│   ├── badge/
+│   ├── button/
+│   ├── checkbox/
+│   ├── icon/
+│   ├── input/
+│   ├── label/
+│   ├── radio-group/
+│   ├── separator/
+│   ├── skeleton/
+│   ├── switch/
+│   ├── tabs/
+│   ├── tooltip/
+│   └── typography/
+├── molecules/          # Combinations of atoms
+│   └── breadcrumb/
+└── organisms/          # Complex components
+    └── dialog/
+```
+
+### Atomic Design Rules
+
+1. **Atoms**: Basic components that cannot be divided further (Button, Input, Icon)
+2. **Molecules**: Simple combinations of atoms that work together (Breadcrumb, SearchBox)
+3. **Organisms**: Complex components that combine molecules and atoms (Dialog, DataTable, Navigation)
+
+**⚠️ IMPORTANT**: All new components MUST follow this structure and be classified correctly according to their complexity.
+
+## Project Rules
+
+### 📋 Mandatory Requirements for Components
+
+Every component added to the library **MUST** include:
+
+1. **📄 Main file** (`component.tsx`)
+2. **📖 Storybook story** (`component.stories.tsx`)
+3. **🧪 Unit test** (`component.test.tsx`)
+4. **📤 Export file** (`index.tsx`)
+
+### 📁 Component Folder Structure
+
+```
+src/components/[atomic-level]/[component-name]/
+├── index.tsx                    # Component exports
+├── [component-name].tsx         # Main implementation
+├── [component-name].stories.tsx # Storybook documentation
+└── [component-name].test.tsx    # Unit tests
+```
+
+### 📖 Story Requirements
+
+Each story must include:
+- ✅ Complete documentation with description, when to use, best practices
+- ✅ Examples of all variants and states
+- ✅ Common use cases
+- ✅ Accessibility examples
+- ✅ Reference to Figma component
+- ✅ Interactive controls for all props
+
+### 🧪 Test Requirements
+
+Each test must cover:
+- ✅ Basic component rendering
+- ✅ All variants and states
+- ✅ User interactions
+- ✅ Accessibility (ARIA roles, keyboard navigation)
+- ✅ Props and callbacks
+- ✅ Edge cases and error handling
+
+## Best Practices
+
+### 🎯 Component Development
+
+1. **Extend base components**: Always start from components in `src/vendor/shadcn/`
+2. **Follow naming conventions**: PascalCase for components, camelCase for props
+3. **Use strict TypeScript**: Define clear interfaces for all props
+4. **Implement forwardRef**: For components that need DOM access
+5. **Use class-variance-authority**: To handle style variants
+6. **Apply cn() utility**: To combine Tailwind CSS classes
+
+### 🎨 Styling and Design
+
+1. **Use design tokens**: CSS variables defined in the theme
+2. **Maintain consistency**: Follow spacing and typography system
+3. **Responsive design**: Consider all breakpoints
+4. **Dark mode**: Support light and dark themes
+5. **Accessibility**: Comply with WCAG 2.1 AA
+
+### 📚 Documentation
+
+1. **Complete JSDoc**: Document all props and methods
+2. **Clear examples**: Show real use cases
+3. **Best practices**: Explain when and how to use each component
+4. **Accessibility**: Document accessibility features
+
+## Important Scripts
+
+```bash
+# 🔨 Build and development
+npm run build              # Build library for production
+npm run storybook          # Run Storybook in development mode (port 6006)
+npm run build-storybook    # Build static Storybook
+
+# 🧪 Testing and quality
+npm run test               # Run unit tests with Vitest
+npm run lint               # Run ESLint to verify code quality
+
+# 📦 Publishing
+npm run publish            # Publish library to npm (public access)
+```
+
+### 🔧 Development Scripts
+
+- **`storybook`**: Starts Storybook development server to document and test components
+- **`build`**: Uses Vite to build the library optimized for production
+- **`test`**: Runs the test suite with Vitest in single-run mode
+- **`lint`**: Verifies code with ESLint according to configured rules
+
+## Component Dependencies
+
+### 🔗 Dependency Hierarchy
+
+```
+Organisms
+    ↓
+Molecules  
+    ↓
+Atoms
+    ↓
+Vendor (shadcn)
+```
+
+### 📊 Specific Dependency Mapping
+
+#### Atoms → Vendor + External Libraries
+- **`Button`** → `@/vendor/shadcn/button` + `Icon` (atom) + `react`
+  - Uses specific icons: `CircleNotch` (loading), `startIcon`, `endIcon`
+- **`Typography`** → `class-variance-authority` + `@/lib/utils` (cn)
+- **`Icon`** → `@phosphor-icons/react` (100+ icons available)
+- **`Tooltip`** → `@/vendor/shadcn/tooltip`
+- **`Badge`** → `@/vendor/shadcn/badge`
+- **`Avatar`** → `@/vendor/shadcn/avatar`
+- **`Checkbox`** → `@/vendor/shadcn/checkbox`
+- **`Input`** → `@/vendor/shadcn/input`
+- **`Switch`** → `@/vendor/shadcn/switch`
+- **`Alert`** → `@/vendor/shadcn/alert`
+- **`Separator`** → `@/vendor/shadcn/separator`
+
+#### Molecules → Atoms + Vendor
+- **`Breadcrumb`** → Multiple dependencies:
+  - `Icon` (atom) - uses `CaretDown` for dropdowns
+  - `@/vendor/shadcn/breadcrumb` (6 base components)
+  - `@/vendor/shadcn/dropdown-menu` (4 components)
+  - `react` (Fragment, ReactNode, forwardRef)
+
+#### Organisms → Atoms + Libraries
+- **`Dialog`** → Complex dependencies:
+  - `Button` + `ButtonProps` (atom)
+  - `@/lib/utils` (cn utility)
+  - `class-variance-authority` (style variants)
+  - `lucide-react` (X, ArrowLeft icons)
+  - `react` (forwardRef, useState, useEffect)
+
+### 🛠️ Shared Utilities
+
+```typescript
+// src/lib/utils.ts
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+```
+
+This utility is fundamental and used in **all components** for:
+- ✅ Combining Tailwind CSS classes
+- ✅ Resolving style conflicts
+- ✅ Applying conditional styles
+
+## Project Structure
+
+```
+dashboard-design-system/
+├── .storybook/              # Storybook configuration
+├── src/
+│   ├── components/          # Components organized by Atomic Design
+│   │   ├── atoms/          # Basic components
+│   │   ├── molecules/      # Combinations of atoms
+│   │   └── organisms/      # Complex components
+│   ├── lib/                # Utilities and helpers
+│   ├── types/              # TypeScript type definitions
+│   ├── vendor/             # Base components (shadcn)
+│   ├── global.css          # Global styles and CSS variables
+│   └── index.ts            # Main entry point
+├── package.json            # Dependencies and scripts
+├── vite.config.ts          # Vite configuration
+├── vitest.config.ts        # Test configuration
+└── tsconfig.json           # TypeScript configuration
+```
+
+## Contributing
+
+To contribute to this library:
+
+1. 🔍 **Review Figma**: Verify that the component exists in the design system
+2. 🏗️ **Follow Atomic Design**: Classify the component correctly
+3. 📝 **Create documentation**: Complete story with examples and best practices
+4. 🧪 **Write tests**: Complete coverage of functionality and accessibility
+5. ✅ **Verify quality**: Run lint and tests before commit
+6. 📦 **Export correctly**: Update corresponding index.ts files
+
+---
+
+**Current version**: `0.0.8-beta.6`  
+**Maintained by**: Dashboard Frontend Team - Yuno Payments

package/dist/_virtual/index.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/use-sync-external-store/shim/index.js";
+var i = r();
+export {
+  i as s
+};

package/dist/_virtual/index2.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/_virtual/use-sync-external-store-shim.development.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/use-sync-external-store-shim.production.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

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

@@ -0,0 +1,10 @@
+import { Alert as ShadcnAlert } from '../../../vendor/shadcn/alert';
+import { ComponentProps } from 'react';
+import { IconName } from '../icon';
+interface AlertProps extends Omit<ComponentProps<typeof ShadcnAlert>, "children"> {
+    icon?: IconName;
+    title?: string;
+    description?: string;
+}
+declare const Alert: import('react').ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Alert, type AlertProps };

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

@@ -0,0 +1 @@
+export * from './alert';

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

@@ -0,0 +1,9 @@
+import { AvatarProps } from './avatar';
+import * as React from "react";
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    max?: number;
+    size?: AvatarProps["size"];
+}
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { AvatarGroup };

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

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+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;
+export interface AvatarProps extends ComponentProps<typeof ShadcnAvatar>, VariantProps<typeof avatarVariants> {
+    src?: string;
+    alt?: string;
+    name?: string;
+    fallback?: string | ReactNode;
+}
+declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export { Avatar };

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

@@ -0,0 +1,76 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as n } from "react";
+import { cva as r } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { cn as s } from "../../../lib/utils.js";
+import { getNameInitials as u } from "./avatar.utils.js";
+import { Avatar as c, AvatarImage as x, AvatarFallback as v } from "../../../vendor/shadcn/avatar.js";
+import p from "../../../node_modules/lucide-react/dist/esm/icons/user.js";
+const g = r(
+  "relative flex shrink-0 overflow-hidden rounded-full",
+  {
+    variants: {
+      size: {
+        xs: "size-5",
+        sm: "size-6",
+        default: "size-8",
+        lg: "size-10",
+        xl: "size-12"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), z = r("aspect-square h-full w-full object-cover"), j = r(
+  "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground font-medium uppercase",
+  {
+    variants: {
+      size: {
+        xs: "text-[10px]",
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base",
+        xl: "text-lg"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), b = n(
+  ({ size: l, src: i, alt: f, name: e, ...m }, d) => {
+    const o = e ? u(e) : void 0;
+    let a;
+    return !a && o && (a = o), a || (a = /* @__PURE__ */ t.jsx(p, { className: "size-1/2" })), /* @__PURE__ */ t.jsxs(
+      c,
+      {
+        ref: d,
+        className: s(g({ size: l })),
+        ...m,
+        children: [
+          i && /* @__PURE__ */ t.jsx(
+            x,
+            {
+              src: i,
+              alt: f || e || "Avatar",
+              className: s(z()),
+              "data-testid": "avatar-image"
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            v,
+            {
+              className: s(j({ size: l })),
+              "data-testid": "avatar-fallback",
+              children: a
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+b.displayName = "Avatar";
+export {
+  b as Avatar
+};

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

@@ -0,0 +1,2 @@
+declare const getNameInitials: (name: string) => string | undefined;
+export { getNameInitials };

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

@@ -0,0 +1,11 @@
+const n = (r) => {
+  const t = r.replace(/[^\w\s]/gi, "").replace(/\d+/g, "").replace(/\s+/g, " ").trim();
+  if (!t)
+    return;
+  const e = t.split(" ").filter((i) => i.length > 0);
+  if (e.length !== 0)
+    return e.length === 1 ? e[0].charAt(0).toUpperCase() : (e[0].charAt(0) + e[e.length - 1].charAt(0)).toUpperCase();
+};
+export {
+  n as getNameInitials
+};

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

@@ -1,13 +1,2 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
-    src?: string;
-    alt?: string;
-    name?: string;
-    fallback?: React.ReactNode;
-}
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
-export { Avatar };
+export * from './avatar';
+export * from './avatar-group';

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

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { Badge as ShadcnBadge } from '../../../vendor/shadcn/badge';
+import { Icon, IconName } from '../icon';
+interface BadgeProps extends ComponentProps<typeof ShadcnBadge> {
+    startIcon?: IconName;
+    endIcon?: IconName;
+    startIconProps?: ComponentProps<typeof Icon>;
+    endIconProps?: ComponentProps<typeof Icon>;
+    children?: string;
+}
+declare const Badge: import('react').ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export { Badge, type BadgeProps };

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

@@ -0,0 +1,15 @@
+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 })
+  ] })
+);
+f.displayName = "Badge";
+export {
+  f as Badge
+};

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

@@ -0,0 +1 @@
+export { Badge, type BadgeProps } from './badge';

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

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react';
+import { Button as ShadcnButton } from '../../../vendor/shadcn/button';
+import { Icon, IconName } from '../icon';
+interface ButtonProps extends ComponentProps<typeof ShadcnButton> {
+    startIcon?: IconName;
+    endIcon?: IconName;
+    startIconProps?: ComponentProps<typeof Icon>;
+    endIconProps?: ComponentProps<typeof Icon>;
+    isLoading?: boolean;
+    children?: string;
+}
+declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export { Button, type ButtonProps };

package/dist/components/atoms/button/button.js

@@ -0,0 +1,19 @@
+import { j as m } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as x } from "react";
+import { Button as j } from "../../../vendor/shadcn/button.js";
+import { Icon as t } from "../icon/icon.js";
+const u = x(
+  ({ children: o, startIcon: e, endIcon: r, startIconProps: a, endIconProps: i, isLoading: s = !1, disabled: n, ...p }, f) => {
+    const l = n || s;
+    return /* @__PURE__ */ m.jsxs(j, { ref: f, disabled: l, ...p, children: [
+      s && /* @__PURE__ */ m.jsx(t, { name: "CircleNotch", size: "sm", className: "animate-spin" }),
+      e && !s && /* @__PURE__ */ m.jsx(t, { name: e, size: "sm", ...a }),
+      o,
+      r && !s && /* @__PURE__ */ m.jsx(t, { name: r, size: "sm", ...i })
+    ] });
+  }
+);
+u.displayName = "Button";
+export {
+  u as Button
+};

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

@@ -1,14 +1 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-    label?: React.ReactNode;
-    startIcon?: React.ReactNode;
-    endIcon?: React.ReactNode;
-}
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+export { Button, type ButtonProps } from './button';

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

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { Checkbox as ShadcnCheckbox } from '../../../vendor/shadcn/checkbox';
+export interface CheckboxProps extends Omit<ComponentProps<typeof ShadcnCheckbox>, "children"> {
+    label: string;
+    description?: string;
+}
+declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export { Checkbox };