@stackloop/ui 4.0.9 → 4.1.0

package/README.md

@@ -47,7 +47,6 @@ If using Tailwind CSS v4 with `@theme`, the library's theme variables are alread
 @theme {
   /* Override library colors */
   --color-primary: #your-color;
-  --color-primary-dark: #your-darker-color;
   --color-border: #your-border-color;
   --color-border-dark: #your-darker-border;
   --color-secondary: #your-secondary-bg;
@@ -88,7 +87,6 @@ The library uses a simplified color system with semantic variables:
 | Variable | Default | Description |
 |----------|---------|-------------|
 | `--color-primary` | `#525252` | Primary brand color |
-| `--color-primary-dark` | `#404040` | Darker primary variant |
 | `--color-border` | `#e5e5e5` | Default border color |
 | `--color-border-dark` | `#d4d4d4` | Darker border variant |
 | `--color-secondary` | `#fafafa` | Secondary background |
@@ -110,7 +108,6 @@ Create a custom theme file or extend the existing one:
 @theme {
   /* Brand colors */
   --color-primary: #3b82f6;
-  --color-primary-dark: #2563eb;
   
   /* Borders */
   --color-border: #e2e8f0;
@@ -163,7 +160,7 @@ import { Button, Modal } from '@stackloop/ui'
 
 Components with the `animate` prop:
 
-- `AudioRecorder`, `Badge`, `BottomSheet`, `Button`, `Card`, `CameraCapture`, `Checkbox`, `CountrySelect`, `DatePicker`, `Drawer`, `Dropdown`, `DualSlider`, `FileUploader`, `FloatingActionButton`, `Input`, `Modal`, `MultiSelect`, `Pagination`, `PhoneInput`, `RadioPills`, `Select`, `Slider`, `Spinner`, `StepProgress`, `Table`, `Textarea`, `ThumbnailGrid`, `Toggle`, `ToastProvider`
+- `Accordion`, `AudioRecorder`, `Badge`, `BottomSheet`, `Button`, `Card`, `CameraCapture`, `Checkbox`, `CountrySelect`, `DatePicker`, `Drawer`, `Dropdown`, `DualSlider`, `FileUploader`, `FloatingActionButton`, `Input`, `Modal`, `MultiSelect`, `Pagination`, `PhoneInput`, `RadioPills`, `Select`, `Slider`, `Spinner`, `StepProgress`, `Table`, `Textarea`, `ThumbnailGrid`, `Toggle`, `ToastProvider`
 
 ## Ripple Behavior
 
@@ -1245,6 +1242,64 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
   <ThumbnailGrid items={items} onRemove={(id)=>{}} />
   ```
 
+**Accordion**:
+- **Description:** Expandable/collapsible content sections with smooth animations. Supports single or multiple open items with customizable styling.
+- **Props:**
+  - **`items`**: `{ id: string; title: string|ReactNode; content: string|ReactNode; disabled?: boolean; icon?: ReactNode }[]` — required.
+  - **`variant`**: `'default'|'bordered'` — default: `'default'`. Controls border styling (top border only for default, full border for bordered).
+  - **`allowMultiple`**: `boolean` — default: `false`. When `false`, only one item can be open at a time. When `true`, multiple items can be open.
+  - **`defaultOpen`**: `string[]` — default: `[]`. Array of item IDs that should be open initially.
+  - **`onChange`**: `(openItems: string[]) => void` — optional. Called whenever the open state changes.
+  - **`className`**: `string` — optional.
+- **Features:**
+  - Smooth height and opacity animations on expand/collapse using Framer Motion.
+  - No rounded borders, only border-top styling for clean appearance.
+  - Optional icons support for each accordion item.
+  - Disabled state support for individual items.
+  - Hover effects and smooth transitions.
+- **Usage:**
+
+  ```jsx
+  import { Accordion } from '@stackloop/ui'
+
+  // Single open mode (default)
+  <Accordion
+    items={[
+      {
+        id: 'item1',
+        title: 'Question 1',
+        content: 'Answer 1'
+      },
+      {
+        id: 'item2',
+        title: 'Question 2',
+        content: 'Answer 2'
+      }
+    ]}
+    defaultOpen={['item1']}
+  />
+
+  // Multiple open mode
+  <Accordion
+    items={[
+      {
+        id: 'section1',
+        title: 'Section 1',
+        content: 'Content 1',
+        icon: <Icon />
+      },
+      {
+        id: 'section2',
+        title: 'Section 2',
+        content: 'Content 2'
+      }
+    ]}
+    allowMultiple={true}
+    defaultOpen={['section1']}
+    onChange={(openItems) => console.log(openItems)}
+  />
+  ```
+
 **Card**:
 - **Description:** Generic card container with variants and content subcomponents.
 - **Props:**

package/dist/Accordion.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface AccordionItemProps {
+    id: string;
+    title: string | React.ReactNode;
+    content: string | React.ReactNode;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItemProps[];
+    variant?: 'default' | 'bordered';
+    allowMultiple?: boolean;
+    defaultOpen?: string[];
+    className?: string;
+    onChange?: (openItems: string[]) => void;
+    animate?: boolean;
+}
+export declare const Accordion: React.FC<AccordionProps>;