@minidev.fun/ui 1.0.1

package/llm/components/radio-group.llm.md

@@ -0,0 +1,273 @@
+# RadioGroup
+
+Mutually exclusive selection from a group of options.
+
+## Import
+
+```tsx
+import { RadioGroup, RadioGroupItem } from "@minidev.fun/ui/radio-group";
+```
+
+## Anatomy
+
+```tsx
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioGroupItem value="option-1" id="option-1" />
+  <RadioGroupItem value="option-2" id="option-2" />
+</RadioGroup>
+```
+
+## Components
+
+| Component      | Description                                      |
+| -------------- | ------------------------------------------------ |
+| RadioGroup     | Container that manages state for radio items     |
+| RadioGroupItem | Individual radio button with automatic indicator |
+
+## Props
+
+### RadioGroup
+
+| Prop          | Type                     | Default | Description                    |
+| ------------- | ------------------------ | ------- | ------------------------------ |
+| value         | unknown                  | -       | Controlled selected value      |
+| onValueChange | (value: unknown) => void | -       | Called when selection changes  |
+| defaultValue  | unknown                  | -       | Uncontrolled initial value     |
+| name          | string                   | -       | Form field name for submission |
+| disabled      | boolean                  | false   | Disable all radio items        |
+| readOnly      | boolean                  | false   | Prevent selection changes      |
+| required      | boolean                  | false   | Mark as required for forms     |
+| inputRef      | Ref\<HTMLInputElement\>  | -       | Ref to hidden input element    |
+| className     | string                   | -       | Additional CSS classes         |
+
+### RadioGroupItem
+
+| Prop         | Type    | Default | Description                   |
+| ------------ | ------- | ------- | ----------------------------- |
+| value        | string  | -       | Value for this radio option   |
+| id           | string  | -       | HTML id for label association |
+| disabled     | boolean | false   | Disable this specific item    |
+| aria-invalid | boolean | -       | Mark as invalid (error state) |
+| className    | string  | -       | Additional CSS classes        |
+
+The RadioGroupItem automatically renders a checked indicator (filled circle) when selected.
+
+## Data Attributes
+
+### RadioGroup
+
+| Attribute     | When Present      |
+| ------------- | ----------------- |
+| data-disabled | Group is disabled |
+
+### RadioGroupItem
+
+| Attribute      | When Present         |
+| -------------- | -------------------- |
+| data-checked   | Item is selected     |
+| data-unchecked | Item is not selected |
+| data-disabled  | Item is disabled     |
+
+## Examples
+
+### Basic Usage
+
+```tsx
+function NotificationPreferences() {
+  const [method, setMethod] = useState("email");
+
+  return (
+    <RadioGroup value={method} onValueChange={(v) => setMethod(v as string)}>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="email" id="email" />
+        <Label htmlFor="email">Email</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="sms" id="sms" />
+        <Label htmlFor="sms">SMS</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="push" id="push" />
+        <Label htmlFor="push">Push Notifications</Label>
+      </div>
+    </RadioGroup>
+  );
+}
+```
+
+### Uncontrolled with Default Value
+
+```tsx
+<RadioGroup defaultValue="standard" name="shipping">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="standard" id="standard" />
+    <Label htmlFor="standard">Standard Shipping</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="express" id="express" />
+    <Label htmlFor="express">Express Shipping</Label>
+  </div>
+</RadioGroup>
+```
+
+### With Descriptions
+
+```tsx
+<RadioGroup defaultValue="mainnet">
+  <div className="flex items-start space-x-3">
+    <RadioGroupItem value="mainnet" id="mainnet" className="mt-0.5" />
+    <div className="flex-1">
+      <Label htmlFor="mainnet" className="font-medium">
+        Mainnet
+      </Label>
+      <p className="text-muted-foreground text-sm">
+        Production-ready network with real users and data.
+      </p>
+    </div>
+  </div>
+  <div className="flex items-start space-x-3">
+    <RadioGroupItem value="testnet" id="testnet" className="mt-0.5" />
+    <div className="flex-1">
+      <Label htmlFor="testnet" className="font-medium">
+        Testnet
+      </Label>
+      <p className="text-muted-foreground text-sm">
+        Testing environment for development.
+      </p>
+    </div>
+  </div>
+</RadioGroup>
+```
+
+### Error State
+
+```tsx
+function FormField() {
+  const [value, setValue] = useState("");
+  const [showError, setShowError] = useState(false);
+
+  return (
+    <div className="space-y-2">
+      <RadioGroup
+        value={value}
+        onValueChange={(v) => {
+          setValue(v as string);
+          setShowError(false);
+        }}
+        aria-invalid={showError}
+      >
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="yes" id="yes" aria-invalid={showError} />
+          <Label htmlFor="yes">Yes</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="no" id="no" aria-invalid={showError} />
+          <Label htmlFor="no">No</Label>
+        </div>
+      </RadioGroup>
+      {showError && (
+        <p className="text-destructive text-sm">Please make a selection.</p>
+      )}
+    </div>
+  );
+}
+```
+
+### Disabled Group
+
+```tsx
+<RadioGroup disabled defaultValue="option-1">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-1" id="option-1" />
+    <Label htmlFor="option-1">Option 1</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-2" id="option-2" />
+    <Label htmlFor="option-2">Option 2</Label>
+  </div>
+</RadioGroup>
+```
+
+### Individual Disabled Items
+
+```tsx
+<RadioGroup defaultValue="available-1">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="available-1" id="available-1" />
+    <Label htmlFor="available-1">Available Option</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="sold-out" id="sold-out" disabled />
+    <Label htmlFor="sold-out">Sold Out</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="available-2" id="available-2" />
+    <Label htmlFor="available-2">Another Available</Label>
+  </div>
+</RadioGroup>
+```
+
+### Card-Based Layout
+
+```tsx
+<RadioGroup defaultValue="pro">
+  <div className="grid gap-4 sm:grid-cols-3">
+    <label
+      htmlFor="free"
+      className="hover:border-primary/50 border-border flex cursor-pointer flex-col gap-3 rounded-lg border p-4"
+    >
+      <RadioGroupItem value="free" id="free" />
+      <div>
+        <p className="font-semibold">Free Plan</p>
+        <p className="text-muted-foreground text-sm">Perfect for testing</p>
+      </div>
+    </label>
+
+    <label
+      htmlFor="pro"
+      className="hover:border-primary/50 border-primary border-2 flex cursor-pointer flex-col gap-3 rounded-lg p-4"
+    >
+      <RadioGroupItem value="pro" id="pro" />
+      <div>
+        <p className="font-semibold">Pro Plan</p>
+        <p className="text-muted-foreground text-sm">For production apps</p>
+      </div>
+    </label>
+
+    <label
+      htmlFor="enterprise"
+      className="hover:border-primary/50 border-border flex cursor-pointer flex-col gap-3 rounded-lg border p-4"
+    >
+      <RadioGroupItem value="enterprise" id="enterprise" />
+      <div>
+        <p className="font-semibold">Enterprise</p>
+        <p className="text-muted-foreground text-sm">Custom solutions</p>
+      </div>
+    </label>
+  </div>
+</RadioGroup>
+```
+
+## Keyboard
+
+| Key              | Action                    |
+| ---------------- | ------------------------- |
+| Tab              | Focus next radio item     |
+| Shift+Tab        | Focus previous radio item |
+| Space            | Select focused item       |
+| Arrow Down/Right | Select next item          |
+| Arrow Up/Left    | Select previous item      |
+
+## Accessibility
+
+- Each RadioGroupItem should have a unique `id` and paired `<Label htmlFor={id}>`
+- Uses `role="radiogroup"` and `role="radio"` with proper ARIA attributes
+- Manages focus with roving tabindex for keyboard navigation
+- Error states use `aria-invalid` for screen reader announcements
+- Disabled state prevents interaction and is announced to assistive technologies
+
+## Related
+
+- [Label](./label.llm.md) - For labeling radio items
+- [Checkbox](./checkbox.llm.md) - For multi-select options
+- [Select](./select.llm.md) - For dropdown selections

package/llm/components/resizable.llm.md

@@ -0,0 +1,306 @@
+# Resizable
+
+Create resizable panel layouts with draggable handles for complex dashboard, editor, and split-view interfaces.
+
+## Import
+
+```tsx
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@minidev.fun/ui/resizable";
+```
+
+## Anatomy
+
+```tsx
+<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize="50%">Content 1</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize="50%">Content 2</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+**Important:** Size values have different meanings based on type:
+
+- **Numbers are pixels:** `defaultSize={300}` = 300px
+- **Strings are percentages:** `defaultSize="25%"` or `defaultSize="25"` = 25%
+
+## Components
+
+| Component           | Description                                                            |
+| ------------------- | ---------------------------------------------------------------------- |
+| ResizablePanelGroup | Root container that manages layout orientation and panel resizing      |
+| ResizablePanel      | Individual resizable panel with size constraints and collapse behavior |
+| ResizableHandle     | Draggable separator between panels with optional visible grip          |
+
+## Props
+
+### ResizablePanelGroup
+
+| Prop           | Type                                       | Default      | Description                                           |
+| -------------- | ------------------------------------------ | ------------ | ----------------------------------------------------- |
+| orientation    | "horizontal" \| "vertical"                 | "horizontal" | Layout direction for panels                           |
+| id             | string                                     | -            | Unique ID for localStorage persistence of panel sizes |
+| defaultLayout  | number[]                                   | -            | Initial panel sizes as percentages                    |
+| onLayoutChange | (layout: Record\<string, number\>) => void | -            | Called when panel sizes change                        |
+| disabled       | boolean                                    | false        | Disable all resizing                                  |
+| className      | string                                     | -            | Additional CSS classes                                |
+
+### ResizablePanel
+
+All panels inherit props from react-resizable-panels Panel component.
+
+**Size Value Formats:**
+
+- **number** (e.g., `500`) → Pixels
+- **string without unit** (e.g., `"25"`) → Percentage (0-100)
+- **string with %** (e.g., `"25%"`) → Percentage
+- **string with px** (e.g., `"300px"`) → Pixels
+- **string with other units** (e.g., `"1rem"`, `"50vh"`) → CSS units
+
+| Prop          | Type                                                       | Default | Description                                                                    |
+| ------------- | ---------------------------------------------------------- | ------- | ------------------------------------------------------------------------------ |
+| id            | string                                                     | -       | Panel identifier (required for persistence)                                    |
+| defaultSize   | number \| string                                           | -       | Initial size (number=pixels, string=percentage or CSS unit)                    |
+| minSize       | number \| string                                           | 0       | Minimum size (number=pixels, string=percentage or CSS unit)                    |
+| maxSize       | number \| string                                           | 100     | Maximum size (number=pixels, string=percentage or CSS unit)                    |
+| collapsible   | boolean                                                    | false   | Allow panel to collapse below minSize                                          |
+| collapsedSize | number \| string                                           | 0       | Size when collapsed                                                            |
+| collapsed     | boolean                                                    | -       | Controlled collapsed state. Panel syncs to this value.                         |
+| animated      | boolean                                                    | false   | Enable smooth CSS transition for collapse/expand. Drag resizing stays instant. |
+| duration      | number                                                     | 400     | Animation duration in milliseconds. Only applies when `animated` is true.      |
+| onResize      | (size: { asPercentage: number; inPixels: number }) => void | -       | Called when panel is resized                                                   |
+| onCollapse    | () => void                                                 | -       | Called when panel collapses                                                    |
+| onExpand      | () => void                                                 | -       | Called when panel expands                                                      |
+| className     | string                                                     | -       | Additional CSS classes                                                         |
+
+### ResizableHandle
+
+| Prop       | Type    | Default | Description                    |
+| ---------- | ------- | ------- | ------------------------------ |
+| withHandle | boolean | false   | Display visible grip indicator |
+| className  | string  | -       | Additional CSS classes         |
+
+## Data Attributes
+
+| Attribute                         | When Present               | Applied To          |
+| --------------------------------- | -------------------------- | ------------------- |
+| data-slot="resizable-panel-group" | Always                     | ResizablePanelGroup |
+| data-slot="resizable-panel"       | Always                     | ResizablePanel      |
+| data-slot="resizable-handle"      | Always                     | ResizableHandle     |
+| aria-orientation                  | Inherits from parent group | All components      |
+
+## Examples
+
+### Basic Horizontal Layout (Percentages)
+
+```tsx
+<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize="40%">
+    <div className="p-4">Sidebar</div>
+  </ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize="60%">
+    <div className="p-4">Main Content</div>
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+### Fixed Pixel Sidebar
+
+```tsx
+<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize={300} minSize={200} maxSize={500}>
+    <div className="p-4">Fixed width sidebar (300px default)</div>
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel>
+    <div className="p-4">Main content fills remaining space</div>
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+### Vertical Split with Handle
+
+```tsx
+<ResizablePanelGroup orientation="vertical">
+  <ResizablePanel defaultSize="70%">
+    <div className="p-4">Editor</div>
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize="30%">
+    <div className="p-4">Terminal Output</div>
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+### Three Panels with Constraints
+
+```tsx
+<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize="25%" minSize="15%" maxSize="40%">
+    <div className="p-4">Navigation</div>
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize="50%" minSize="30%">
+    <div className="p-4">Content</div>
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize="25%" minSize="15%" maxSize="40%">
+    <div className="p-4">Inspector</div>
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+### Nested Layouts (Editor + Terminal)
+
+```tsx
+<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel defaultSize={250} minSize={150}>
+    <div className="p-4">File Explorer (250px)</div>
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel>
+    <ResizablePanelGroup orientation="vertical">
+      <ResizablePanel defaultSize="70%">
+        <div className="p-4">Code Editor</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize="30%" minSize="20%">
+        <div className="p-4">Terminal</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </ResizablePanel>
+</ResizablePanelGroup>
+```
+
+### Persisted Layout
+
+```tsx
+function Dashboard() {
+  return (
+    <ResizablePanelGroup id="dashboard-layout" orientation="horizontal">
+      <ResizablePanel id="sidebar" defaultSize="25%">
+        <div className="p-4">Sidebar</div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel id="main" defaultSize="75%">
+        <div className="p-4">Main Content</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}
+```
+
+### Controlled with Callbacks
+
+```tsx
+function MonitoredPanels() {
+  const [sizes, setSizes] = useState({ left: 30, right: 70 });
+
+  return (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      onLayoutChange={(layout) => {
+        setSizes({
+          left: layout.left || 0,
+          right: layout.right || 0,
+        });
+      }}
+    >
+      <ResizablePanel id="left" defaultSize="30%">
+        <div className="p-4">Left: {sizes.left.toFixed(1)}%</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel id="right">
+        <div className="p-4">Right: {sizes.right.toFixed(1)}%</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}
+```
+
+### Animated Collapse/Expand
+
+Use `collapsed` prop for declarative control and `animated` for smooth transitions. Drag resizing remains instant (no animation lag).
+
+**Customization:**
+
+- `duration` prop controls speed (default 400ms)
+- `--resizable-easing` CSS variable controls easing curve (default `cubic-bezier(0.16, 1, 0.3, 1)`)
+
+```tsx
+// Custom duration
+<ResizablePanel animated duration={200} collapsed={isCollapsed} />
+
+// Custom easing via Tailwind arbitrary property
+<ResizablePanel
+  className="[--resizable-easing:ease-out]"
+  animated
+  collapsed={isCollapsed}
+/>
+```
+
+```tsx
+import { useState } from "react";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@minidev.fun/ui/resizable";
+import { Button } from "@minidev.fun/ui/button";
+
+function CollapsibleSidebar() {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <div className="h-[400px]">
+      <Button onClick={() => setIsCollapsed(!isCollapsed)}>
+        {isCollapsed ? "Expand" : "Collapse"} Sidebar
+      </Button>
+      <ResizablePanelGroup orientation="horizontal">
+        <ResizablePanel
+          collapsed={isCollapsed}
+          animated
+          defaultSize="25%"
+          minSize="15%"
+          collapsible
+          collapsedSize="0%"
+        >
+          <div className="p-4">Sidebar content</div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel>
+          <div className="p-4">Main content</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+}
+```
+
+## Keyboard
+
+| Key         | Action                                           |
+| ----------- | ------------------------------------------------ |
+| Tab         | Focus next handle                                |
+| Shift + Tab | Focus previous handle                            |
+| Arrow Keys  | Resize panels (direction depends on orientation) |
+| Enter       | Expand collapsed panel                           |
+| Home        | Resize to minimum                                |
+| End         | Resize to maximum                                |
+
+## Accessibility
+
+- Resize handles are keyboard-navigable with proper focus states
+- ARIA attributes automatically reflect orientation and state
+- Supports keyboard resizing via arrow keys
+- Focus ring visible on keyboard navigation
+
+## Related
+
+- [Collapsible](./collapsible.llm.md) - For simpler expand/collapse UI
+- [Tabs](./tabs.llm.md) - Alternative to split views
+- [Card](./card.llm.md) - Static panel container