@codefast/ui 0.3.6 → 0.3.7-canary.1

package/README.md

@@ -1,352 +1,373 @@
-# @codefast/ui
+# UI Components Library
 
-A modern, high-performance UI component library built with React, TypeScript, and Tailwind CSS. Designed for scalable web applications with comprehensive accessibility support and seamless dark mode integration.
+Core UI components library built with React, Tailwind CSS, and Radix UI for creating modern, accessible, and customizable user interfaces with a comprehensive design system.
 
-## Features
-
-- 🎨 **50+ Components** - Comprehensive collection of UI components
-- 🌙 **Dark Mode** - Built-in dark mode support with smooth transitions
-- ♿ **Accessible** - WCAG compliant components built on Radix UI primitives
-- 🎯 **TypeScript** - Full TypeScript support with comprehensive type definitions
-- 🚀 **Performance** - Optimized for bundle size and runtime performance
-- 🎨 **Customizable** - Easily themeable with CSS variables and Tailwind CSS
-- 📱 **Responsive** - Mobile-first responsive design
-- 🔧 **Developer Experience** - Excellent IntelliSense and documentation
+[![CI](https://github.com/codefastlabs/codefast/actions/workflows/release.yml/badge.svg)](https://github.com/codefastlabs/codefast/actions/workflows/release.yml)
+[![NPM Version](https://img.shields.io/npm/v/@codefast/ui.svg)](https://www.npmjs.com/package/@codefast/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Node.js](https://img.shields.io/badge/Node.js-20%2B-green.svg)](https://nodejs.org/)
+[![pnpm](https://img.shields.io/badge/pnpm-10%2B-blue.svg)](https://pnpm.io/)
 
 ## Installation
 
+Install the component library via pnpm (recommended):
+
 ```bash
-# Using pnpm (recommended)
 pnpm add @codefast/ui
-
-# Using npm
-npm install @codefast/ui
-
-# Using yarn
-yarn add @codefast/ui
 ```
 
-## Quick Start
+Or using npm:
 
-### 1. CSS Configuration
-
-Import the required styles in your global CSS file (e.g., `app/globals.css`):
-
-```css
-@import "tailwindcss";
-@import "@codefast/ui/styles.css";
-
-@source '../../node_modules/@codefast/ui';
-@custom-variant dark (&:where(.dark, .dark *));
-
-@layer base {
-  :root {
-    --input: var(--color-neutral-200);
-    --border: var(--color-neutral-200);
-    --ring: var(--color-neutral-400);
-    --background: var(--color-white);
-    --foreground: var(--color-neutral-950);
-    --primary: var(--color-sky-500);
-    --primary-foreground: var(--color-neutral-50);
-    --secondary: var(--color-neutral-100);
-    --secondary-foreground: var(--color-neutral-900);
-    --destructive: var(--color-red-600);
-    --accent: var(--color-neutral-100);
-    --accent-foreground: var(--color-neutral-900);
-    --muted: var(--color-neutral-100);
-    --muted-foreground: var(--color-neutral-500);
-    --popover: var(--color-white);
-    --popover-foreground: var(--color-neutral-950);
-    --popover-overlay: --alpha(var(--color-neutral-900) / 20%);
-    --card: var(--color-white);
-    --card-foreground: var(--color-neutral-950);
-    --sidebar: var(--color-neutral-50);
-    --sidebar-foreground: var(--color-neutral-950);
-    --sidebar-primary: var(--color-sky-500);
-    --sidebar-primary-foreground: var(--color-neutral-50);
-    --sidebar-accent: var(--color-neutral-100);
-    --sidebar-accent-foreground: var(--color-neutral-900);
-    --sidebar-border: var(--color-neutral-200);
-    --sidebar-ring: var(--color-neutral-400);
-    --chart-1: var(--color-orange-600);
-    --chart-2: var(--color-teal-600);
-    --chart-3: var(--color-cyan-600);
-    --chart-4: var(--color-amber-600);
-    --chart-5: var(--color-amber-500);
-  }
-
-  @variant dark {
-    --input: var(--color-neutral-700);
-    --border: --alpha(var(--color-neutral-700) / 50%);
-    --ring: var(--color-neutral-500);
-    --background: var(--color-neutral-950);
-    --foreground: var(--color-neutral-50);
-    --primary: var(--color-sky-700);
-    --primary-foreground: var(--color-neutral-50);
-    --secondary: var(--color-neutral-800);
-    --secondary-foreground: var(--color-neutral-50);
-    --destructive: var(--color-red-400);
-    --accent: var(--color-neutral-700);
-    --accent-foreground: var(--color-neutral-50);
-    --muted: var(--color-neutral-800);
-    --muted-foreground: var(--color-neutral-400);
-    --popover: var(--color-neutral-800);
-    --popover-foreground: var(--color-neutral-50);
-    --popover-overlay: --alpha(var(--color-neutral-900) / 80%);
-    --card: var(--color-neutral-900);
-    --card-foreground: var(--color-neutral-50);
-    --sidebar: var(--color-neutral-900);
-    --sidebar-foreground: var(--color-neutral-50);
-    --sidebar-primary: var(--color-sky-700);
-    --sidebar-primary-foreground: var(--color-neutral-50);
-    --sidebar-accent: var(--color-neutral-800);
-    --sidebar-accent-foreground: var(--color-neutral-50);
-    --sidebar-border: var(--color-neutral-800);
-    --sidebar-ring: var(--color-neutral-600);
-    --chart-1: var(--color-blue-700);
-    --chart-2: var(--color-emerald-500);
-    --chart-3: var(--color-amber-500);
-    --chart-4: var(--color-purple-500);
-    --chart-5: var(--color-rose-500);
-  }
-}
+```bash
+npm install @codefast/ui
 ```
 
-### 2. Next.js Configuration (Optional)
+**Peer Dependencies**:
 
-For better performance in Next.js applications, add this to your `next.config.ts`:
+Make sure you have installed the peer dependencies:
+
+```bash
+pnpm add react react-dom
+pnpm add -D @types/react @types/react-dom
+```
 
-```typescript
-import type { NextConfig } from "next";
+**Styling**:
 
-const nextConfig: NextConfig = {
-  experimental: {
-    optimizePackageImports: ["@codefast/ui"],
-  },
-};
+Import the CSS styles in your application:
 
-export default nextConfig;
+```tsx
+import "@codefast/ui/styles.css";
 ```
 
-## Usage Examples
+**Requirements**:
+
+- Node.js version 20.0.0 or higher
+- React version 19.0.0 or higher
+- TypeScript version 5.9.2 or higher (recommended)
 
-### Basic Components
+## Quick Start
 
 ```tsx
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@codefast/ui";
 
-export function Example() {
+function App() {
   return (
-    <Card>
+    <Card className="w-96">
       <CardHeader>
-        <CardTitle>Welcome</CardTitle>
+        <CardTitle>Welcome to CodeFast UI</CardTitle>
       </CardHeader>
       <CardContent>
-        <Button variant="default">Get Started</Button>
-        <Button variant="outline">Learn More</Button>
+        <p className="mb-4">
+          A comprehensive UI components library built with React and Tailwind CSS.
+        </p>
+        <Button>Get Started</Button>
       </CardContent>
     </Card>
   );
 }
 ```
 
-### Form Components
+## Usage
+
+### Components Overview
+
+The library provides a comprehensive set of components organized into categories:
+
+#### Layout Components
+
+- **Box**: Flexible container component
+- **Card**: Content containers with header, content, and footer sections
+- **Separator**: Visual dividers between content sections
+- **AspectRatio**: Maintain consistent aspect ratios for content
+
+#### Form Components
+
+- **Button**: Interactive buttons with various styles and sizes
+- **Input**: Text input fields with validation support
+- **Checkbox**: Individual checkboxes and checkbox groups
+- **RadioGroup**: Radio button groups for single selection
+- **Select**: Dropdown selection components
+- **Switch**: Toggle switches for boolean values
+- **Slider**: Range input sliders
+- **Label**: Form labels with accessibility features
+
+#### Navigation Components
+
+- **Breadcrumb**: Navigation breadcrumbs
+- **NavigationMenu**: Complex navigation menus
+- **Menubar**: Application menu bars
+- **Tabs**: Tabbed interfaces
+
+#### Overlay Components
+
+- **Dialog**: Modal dialogs and popups
+- **AlertDialog**: Confirmation and alert dialogs
+- **Popover**: Contextual popovers
+- **Tooltip**: Informational tooltips
+- **HoverCard**: Rich hover cards with content
+
+#### Data Display Components
+
+- **Avatar**: User profile images and fallbacks
+- **Badge**: Status indicators and labels
+- **Alert**: System messages and notifications
+- **Progress**: Progress indicators
+- **Accordion**: Expandable content sections
+- **Calendar**: Date selection calendars
+- **Carousel**: Content carousels and sliders
+
+### Basic Component Usage
+
+#### Using Form Components
 
 ```tsx
-import { Input, Label, Button, Form } from "@codefast/ui";
+import { Button, Input, Label, Card, CardContent, CardHeader, CardTitle } from "@codefast/ui";
+import { useState } from "react";
+
+function ContactForm() {
+  const [email, setEmail] = useState("");
 
-export function LoginForm() {
   return (
-    <Form>
-      <div className="space-y-4">
+    <Card className="w-96">
+      <CardHeader>
+        <CardTitle>Contact Us</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
         <div>
           <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="Enter your email" />
+          <Input
+            id="email"
+            type="email"
+            placeholder="Enter your email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
         </div>
-        <div>
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" placeholder="Enter your password" />
-        </div>
-        <Button type="submit" className="w-full">
-          Sign In
-        </Button>
-      </div>
-    </Form>
+        <Button className="w-full">Submit</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+#### Using Navigation Components
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@codefast/ui";
+
+function TabExample() {
+  return (
+    <Tabs defaultValue="account" className="w-96">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account" className="mt-4">
+        <p>Make changes to your account here.</p>
+      </TabsContent>
+      <TabsContent value="password" className="mt-4">
+        <p>Change your password here.</p>
+      </TabsContent>
+    </Tabs>
   );
 }
 ```
 
-### Navigation Components
+#### Using Overlay Components
 
 ```tsx
 import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Button,
 } from "@codefast/ui";
 
-export function Navigation() {
+function DialogExample() {
   return (
-    <NavigationMenu>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <NavigationMenuLink href="/products/web">Web Apps</NavigationMenuLink>
-            <NavigationMenuLink href="/products/mobile">Mobile Apps</NavigationMenuLink>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-    </NavigationMenu>
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Edit Profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">{/* Form content */}</div>
+      </DialogContent>
+    </Dialog>
   );
 }
 ```
 
-## Available Components
-
-### Layout & Structure
-
-- **Container** - Responsive container component
-- **Box** - Flexible box component
-- **Section** - Semantic section wrapper
-- **Separator** - Visual divider component
-- **AspectRatio** - Maintain aspect ratios
-- **Resizable** - Resizable panels
-
-### Navigation
-
-- **NavigationMenu** - Accessible navigation menus
-- **Breadcrumb** - Breadcrumb navigation
-- **Pagination** - Page navigation
-- **Menubar** - Menu bar component
-- **Sidebar** - Collapsible sidebar
-
-### Data Display
-
-- **Card** - Flexible content containers
-- **Table** - Data tables with sorting
-- **Badge** - Status and category badges
-- **Avatar** - User profile images
-- **Skeleton** - Loading placeholders
-- **Progress** - Progress indicators
-- **Chart** - Data visualization components
-
-### Feedback
-
-- **Alert** - Alert messages
-- **AlertDialog** - Modal alerts
-- **Sonner** - Toast notifications
-- **Spinner** - Loading spinners
-- **Progress Circle** - Circular progress
-
-### Forms & Input
-
-- **Input** - Text input fields
-- **InputNumber** - Numeric input
-- **InputPassword** - Password input
-- **InputSearch** - Search input
-- **InputOTP** - One-time password input
-- **Textarea** - Multi-line text input
-- **Select** - Dropdown selection
-- **Checkbox** - Checkbox input
-- **CheckboxGroup** - Grouped checkboxes
-- **CheckboxCards** - Card-style checkboxes
-- **Radio** - Radio button input
-- **RadioGroup** - Grouped radio buttons
-- **RadioCards** - Card-style radio buttons
-- **Switch** - Toggle switch
-- **Slider** - Range slider
-- **Label** - Form labels
-- **Form** - Form wrapper with validation
-
-### Interactive
-
-- **Button** - Action buttons
-- **Toggle** - Toggle buttons
-- **ToggleGroup** - Grouped toggles
-- **Tabs** - Tabbed interfaces
-- **Accordion** - Collapsible content
-- **Collapsible** - Show/hide content
-- **Dialog** - Modal dialogs
-- **Drawer** - Slide-out panels
-- **Sheet** - Side panels
-- **Popover** - Floating content
-- **Tooltip** - Contextual hints
-- **HoverCard** - Hover-triggered cards
-- **ContextMenu** - Right-click menus
-- **DropdownMenu** - Dropdown menus
-- **Command** - Command palette
-- **Calendar** - Date picker
-- **Carousel** - Image/content carousel
-
-### Typography
-
-- **Heading** - Semantic headings
-- **Text** - Text component
-- **Blockquote** - Quote blocks
-- **Code** - Inline code
-- **Pre** - Code blocks
-- **Em** - Emphasized text
-- **Strong** - Strong text
-- **Kbd** - Keyboard shortcuts
-- **Quote** - Quote component
-
-### Utility
-
-- **ScrollArea** - Custom scrollbars
-- **Inline** - Inline wrapper
-
-## Theming
-
-The library uses CSS variables for theming. You can customize the appearance by modifying the CSS variables in your global styles:
-
-```css
-:root {
-  --primary: var(--color-blue-600);
-  --primary-foreground: var(--color-white);
-  /* ... other variables */
+### Theming and Customization
+
+The library uses Tailwind CSS for styling and supports theme customization:
+
+```tsx
+import { ThemeProvider } from "next-themes";
+
+function App() {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <div className="bg-background text-foreground min-h-screen">{/* Your app content */}</div>
+    </ThemeProvider>
+  );
 }
 ```
 
-## TypeScript Support
+## API Reference
+
+### Common Props
+
+Most components accept these common props:
+
+| Prop        | Type              | Default     | Description            |
+| ----------- | ----------------- | ----------- | ---------------------- |
+| `className` | `string`          | `undefined` | Additional CSS classes |
+| `children`  | `React.ReactNode` | `undefined` | Child components       |
+
+### Component Categories
 
-All components are fully typed with TypeScript. Import types as needed:
+#### Layout Components
+
+- **Box**: `BoxProps` - Flexible container with layout utilities
+- **Card**: `CardProps` - Content container with sections
+- **Separator**: `SeparatorProps` - Visual divider element
+- **AspectRatio**: `AspectRatioProps` - Aspect ratio container
+
+#### Form Components
+
+- **Button**: `ButtonProps` - Interactive button with variants
+- **Input**: `InputProps` - Text input with validation
+- **Label**: `LabelProps` - Form label with accessibility
+- **Checkbox**: `CheckboxProps` - Boolean input control
+- **RadioGroup**: `RadioGroupProps` - Single selection group
+- **Select**: `SelectProps` - Dropdown selection
+- **Switch**: `SwitchProps` - Boolean toggle control
+- **Slider**: `SliderProps` - Range input control
+
+#### Navigation Components
+
+- **Tabs**: `TabsProps` - Tabbed interface container
+- **NavigationMenu**: `NavigationMenuProps` - Complex navigation
+- **Breadcrumb**: `BreadcrumbProps` - Navigation breadcrumbs
+- **Menubar**: `MenubarProps` - Application menu bar
+
+#### Overlay Components
+
+- **Dialog**: `DialogProps` - Modal dialog container
+- **AlertDialog**: `AlertDialogProps` - Confirmation dialog
+- **Popover**: `PopoverProps` - Contextual overlay
+- **Tooltip**: `TooltipProps` - Informational overlay
+- **HoverCard**: `HoverCardProps` - Rich content overlay
+
+### TypeScript Support
+
+All components are fully typed with TypeScript. Import types alongside components:
 
 ```tsx
-import type { ButtonProps, CardProps } from "@codefast/ui";
+import type { ButtonProps, CardProps, InputProps, ComponentProps } from "@codefast/ui";
+
+// Component props are fully typed using ComponentProps
+function MyButton(props: ComponentProps<typeof Button>) {
+  return <Button {...props} />;
+}
+
+// Alternative using ButtonProps
+function MyCustomButton(props: ButtonProps) {
+  return <Button {...props} />;
+}
 ```
 
-## Accessibility
+### Accessibility Features
+
+All components follow WAI-ARIA guidelines and provide:
 
-All components follow WCAG 2.1 guidelines and include:
+- **Keyboard Navigation**: Full keyboard support for all interactive elements
+- **Screen Reader Support**: Proper ARIA labels and descriptions
+- **Focus Management**: Logical focus order and visual indicators
+- **High Contrast**: Support for high contrast themes
+- **Reduced Motion**: Respects user's motion preferences
 
-- Proper ARIA attributes
-- Keyboard navigation support
-- Screen reader compatibility
-- Focus management
-- High contrast support
+#### Keyboard Navigation
 
-## Browser Support
+Common keyboard shortcuts across components:
 
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
+- **Tab/Shift+Tab**: Navigate between focusable elements
+- **Enter/Space**: Activate buttons and controls
+- **Arrow Keys**: Navigate within component groups
+- **Escape**: Close overlays and cancel actions
+- **Home/End**: Navigate to first/last items in lists
 
 ## Contributing
 
-We welcome contributions! Please see our [Contributing Guide](https://github.com/codefastlabs/codefast/blob/main/CONTRIBUTING.md) for details.
+We welcome all contributions! To get started with development:
+
+### Environment Setup
+
+1. Fork this repository
+2. Clone to your machine: `git clone <your-fork-url>`
+3. Install dependencies: `pnpm install`
+4. Create a new branch: `git checkout -b feature/feature-name`
+
+### Development Workflow
+
+```bash
+# Build all packages
+pnpm build:packages
+
+# Development mode for UI components
+pnpm dev --filter=@codefast/ui
+
+# Run tests
+pnpm test --filter=@codefast/ui
+
+# Run tests with coverage
+pnpm test:coverage --filter=@codefast/ui
+
+# Lint and format
+pnpm lint:fix
+pnpm format
+```
+
+### Adding New Components
+
+1. Create component files in `src/components/[component-name]/`
+2. Export component and types from `src/index.ts`
+3. Add comprehensive tests
+4. Update documentation
+5. Submit a pull request
+
+See details at [CONTRIBUTING.md](../../CONTRIBUTING.md).
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) for details.
+Distributed under the MIT License. See [LICENSE](../../LICENSE) for more details.
+
+## Contact
+
+- npm: [@codefast/ui](https://www.npmjs.com/package/@codefast/ui)
+- GitHub: [codefastlabs/codefast](https://github.com/codefastlabs/codefast)
+- Issues: [GitHub Issues](https://github.com/codefastlabs/codefast/issues)
+- Documentation: [Component Docs](https://codefast.dev/docs/components)
+
+## Acknowledgments
+
+This library is built on top of excellent open-source projects:
+
+- **[Radix UI](https://radix-ui.com/)** - Accessible component primitives
+- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
+- **[Lucide React](https://lucide.dev/)** - Icon library
+- **[React Hook Form](https://react-hook-form.com/)** - Form validation
+- **[Next Themes](https://github.com/pacocoursey/next-themes)** - Theme management
 
-## Links
+## Changelog
 
-- [Documentation](https://github.com/codefastlabs/codefast/tree/main/packages/ui)
-- [GitHub Repository](https://github.com/codefastlabs/codefast)
-- [Issues](https://github.com/codefastlabs/codefast/issues)
-- [Changelog](CHANGELOG.md)
+See [CHANGELOG.md](./CHANGELOG.md) for a complete list of changes and version history.

package/dist/components/accordion/accordion.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,c)=>{for(var r in c)__webpack_require__.o(c,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:c[r]})},__webpack_require__.o=(e,c)=>Object.prototype.hasOwnProperty.call(e,c),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AccordionTrigger:()=>AccordionTrigger,AccordionItem:()=>AccordionItem,AccordionContent:()=>AccordionContent,Accordion:()=>Accordion,AccordionIcon:()=>AccordionIcon});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_lucide_react_namespaceObject=require("lucide-react"),utils_cjs_namespaceObject=require("../../lib/utils.cjs"),react_accordion_namespaceObject=require("@radix-ui/react-accordion"),react_slot_namespaceObject=require("@radix-ui/react-slot");function Accordion({...e}){return(0,jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Root,{"data-slot":"accordion",...e})}function AccordionItem({className:e,...c}){return(0,jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Item,{className:(0,utils_cjs_namespaceObject.cn)("border-b last:border-b-0",e),"data-slot":"accordion-item",...c})}function AccordionIcon({asChild:e,className:c,...r}){let t=e?react_slot_namespaceObject.Slot:external_lucide_react_namespaceObject.ChevronDownIcon;return(0,jsx_runtime_namespaceObject.jsx)(t,{"aria-hidden":!0,className:(0,utils_cjs_namespaceObject.cn)("text-muted-foreground size-4 shrink-0 translate-y-0.5 transition-transform duration-200",c),"data-slot":"accordion-icon",...r})}function AccordionTrigger({children:e,className:c,...r}){return(0,jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Header,{className:"flex","data-slot":"accordion-trigger-wrapper",children:(0,jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Trigger,{className:(0,utils_cjs_namespaceObject.cn)("focus-visible:ring-ring/50 focus-visible:ring-3 outline-hidden hover:not-disabled:underline group/accordion-trigger flex grow items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",c),"data-slot":"accordion-trigger",...r,children:e})})}function AccordionContent({children:e,className:c,...r}){return(0,jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Content,{className:"data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden","data-slot":"accordion-content",...r,children:(0,jsx_runtime_namespaceObject.jsx)("div",{className:(0,utils_cjs_namespaceObject.cn)("pb-4 pt-0 text-sm",c),children:e})})}for(var __webpack_i__ in exports.Accordion=__webpack_exports__.Accordion,exports.AccordionContent=__webpack_exports__.AccordionContent,exports.AccordionIcon=__webpack_exports__.AccordionIcon,exports.AccordionItem=__webpack_exports__.AccordionItem,exports.AccordionTrigger=__webpack_exports__.AccordionTrigger,__webpack_exports__)-1===["Accordion","AccordionContent","AccordionIcon","AccordionItem","AccordionTrigger"].indexOf(__webpack_i__)&&(exports[__webpack_i__]=__webpack_exports__[__webpack_i__]);Object.defineProperty(exports,"__esModule",{value:!0});

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

@@ -0,0 +1,18 @@
+import type { ComponentProps, JSX } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Slot } from "@radix-ui/react-slot";
+type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root>;
+declare function Accordion({ ...props }: AccordionProps): JSX.Element;
+type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
+declare function AccordionItem({ className, ...props }: AccordionItemProps): JSX.Element;
+interface AccordionIconProps extends ComponentProps<typeof Slot> {
+    asChild?: boolean;
+    className?: string;
+}
+declare function AccordionIcon({ asChild, className, ...props }: AccordionIconProps): JSX.Element;
+type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger>;
+declare function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps): JSX.Element;
+type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
+declare function AccordionContent({ children, className, ...props }: AccordionContentProps): JSX.Element;
+export { Accordion, AccordionContent, AccordionIcon, AccordionItem, AccordionTrigger };
+export type { AccordionContentProps, AccordionIconProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, };