laif-ds/dist/agent-docs/components/Collapsible.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # Collapsible
 
 ## Overview
 
 A simple container that can show/hide content. Provides a trigger element and animated content area. Useful for progressive disclosure of details.
 
 ---
 
 ## Props
 
 ### Collapsible (Root)
 
 | Prop           | Type                 | Default     | Description                                   |
 | -------------- | -------------------- | ----------- | --------------------------------------------- |
 | `open`         | `boolean`            | `undefined` | Controlled open state.                        |
 | `defaultOpen`  | `boolean`            | `false`     | Uncontrolled initial open state.              |
 | `onOpenChange` | `(open: boolean) => void` | `undefined` | Called when open state changes.            |
 | `className`    | `string`             | `""`        | Additional classes for the root.              |
 
 ### Subcomponents
 
 - `CollapsibleTrigger`: The element that toggles visibility (can be used with `asChild`).
 - `CollapsibleContent`: The collapsible content region.
 
 ---
 
 ## Behavior
 
 - **Controlled**: Use `open` + `onOpenChange` to control state.
 - **Uncontrolled**: Use `defaultOpen` for initial state.
 - **Accessibility**: Works with button triggers and keyboard navigation.
 
 ---
 
 ## Examples
 
 ### Basic
 
 ```tsx
 import { useState } from "react";
 import { Button } from "laif-ds";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";
 
 export function BasicCollapsible() {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
       <div className="flex items-center justify-between gap-4 px-4">
         <h4 className="text-sm font-semibold">Details</h4>
         <CollapsibleTrigger asChild>
           <Button variant="ghost" size="sm">Toggle</Button>
         </CollapsibleTrigger>
       </div>
       <CollapsibleContent className="space-y-2">
         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item A</div>
         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item B</div>
         <div className="border-d-border rounded-md border px-4 py-3 text-sm">Item C</div>
       </CollapsibleContent>
     </Collapsible>
   );
 }
 ```
 
 ### Open by Default
 
 ```tsx
 import { useState } from "react";
 import { Button } from "laif-ds";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "laif-ds";
 
 export function OpenByDefault() {
   const [isOpen, setIsOpen] = useState(true);
   return (
     <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
       <div className="flex items-center justify-between gap-4 px-4">
         <h4 className="text-sm font-semibold">Details</h4>
         <CollapsibleTrigger asChild>
           <Button variant="ghost" size="sm">Toggle</Button>
         </CollapsibleTrigger>
       </div>
       <CollapsibleContent className="space-y-2">
         <div className="rounded-md border px-4 py-3 text-sm">This is additional information.</div>
       </CollapsibleContent>
     </Collapsible>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **asChild**: Wrap your own button/link as trigger while preserving styles.
 - **Styling**: Use `className` on root/content to adjust spacing and borders.