@minidev.fun/ui 1.0.1

package/llm/components/chart.llm.md

@@ -0,0 +1,281 @@
+# Chart
+
+Flexible chart container built on Recharts with theming, configuration, and accessibility support for all chart types.
+
+## Import
+
+```tsx
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from "@minidev.fun/ui/chart";
+```
+
+## Anatomy
+
+```tsx
+<ChartContainer config={chartConfig}>
+  <LineChart data={data}>
+    <XAxis dataKey="name" />
+    <YAxis />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <ChartLegend content={<ChartLegendContent />} />
+    <Line dataKey="value" />
+  </LineChart>
+</ChartContainer>
+```
+
+## Components
+
+| Component           | Description                                                                  |
+| ------------------- | ---------------------------------------------------------------------------- |
+| ChartContainer      | Root container providing responsive layout, theme context, and CSS variables |
+| ChartTooltip        | Re-export of Recharts Tooltip for positioning (use with ChartTooltipContent) |
+| ChartTooltipContent | Custom tooltip content with series indicators and formatting                 |
+| ChartLegend         | Re-export of Recharts Legend for positioning (use with ChartLegendContent)   |
+| ChartLegendContent  | Custom legend content with icons and colors                                  |
+
+## Props
+
+### ChartContainer
+
+| Prop      | Type        | Default | Description                                                     |
+| --------- | ----------- | ------- | --------------------------------------------------------------- |
+| config    | ChartConfig | -       | Chart configuration defining series labels, colors, and icons   |
+| children  | ReactNode   | -       | Recharts chart component (LineChart, BarChart, AreaChart, etc.) |
+| className | string      | -       | Additional classes for sizing (e.g., "h-[400px]")               |
+| id        | string      | -       | Optional unique identifier for the chart                        |
+
+### ChartConfig
+
+The config object maps series keys to their display configuration:
+
+```tsx
+const config = {
+  revenue: {
+    label: "Revenue",
+    color: "hsl(142 76% 36%)", // Single color
+  },
+  expenses: {
+    label: "Expenses",
+    theme: {
+      // Theme-aware colors
+      light: "hsl(0 84% 60%)",
+      dark: "hsl(0 72% 50%)",
+    },
+    icon: TrendingDown, // Optional icon component
+  },
+} satisfies ChartConfig;
+```
+
+Each series can have:
+
+- `label`: Display name for tooltips and legends
+- `color`: Single color for both themes, OR
+- `theme`: Object with `light` and `dark` colors
+- `icon`: Optional React component for legend
+
+### ChartTooltipContent
+
+| Prop           | Type                        | Default | Description                           |
+| -------------- | --------------------------- | ------- | ------------------------------------- |
+| indicator      | "dot" \| "line" \| "dashed" | "dot"   | Visual indicator style for series     |
+| hideLabel      | boolean                     | false   | Hide the tooltip label (x-axis value) |
+| hideIndicator  | boolean                     | false   | Hide series color indicators          |
+| nameKey        | string                      | -       | Override key for series names         |
+| labelKey       | string                      | -       | Override key for tooltip label        |
+| formatter      | function                    | -       | Custom value formatter                |
+| labelFormatter | function                    | -       | Custom label formatter                |
+
+### ChartLegendContent
+
+| Prop          | Type              | Default  | Description                                   |
+| ------------- | ----------------- | -------- | --------------------------------------------- |
+| hideIcon      | boolean           | false    | Hide series icons, showing only color squares |
+| nameKey       | string            | -        | Override key for series names                 |
+| verticalAlign | "top" \| "bottom" | "bottom" | Legend position                               |
+
+## Data Attributes
+
+| Attribute  | Applied To     | Description                              |
+| ---------- | -------------- | ---------------------------------------- |
+| data-slot  | ChartContainer | Always "chart"                           |
+| data-chart | ChartContainer | Unique chart ID for CSS variable scoping |
+
+## Chart Types
+
+The container works with all Recharts chart types:
+
+- **LineChart**: Trends over time
+- **BarChart**: Comparing values (vertical or horizontal)
+- **AreaChart**: Filled regions showing volume
+- **PieChart**: Proportional data
+- **RadialBarChart**: Circular progress or gauges
+
+## Examples
+
+### Basic Line Chart
+
+```tsx
+import { Line, LineChart, XAxis, YAxis } from "recharts"
+
+const data = [
+  { month: "Jan", value: 2400 },
+  { month: "Feb", value: 1398 },
+  { month: "Mar", value: 9800 },
+]
+
+const config = {
+  value: {
+    label: "Revenue",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+<ChartContainer config={config} className="h-[300px]">
+  <LineChart data={data}>
+    <XAxis dataKey="month" />
+    <YAxis />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <Line dataKey="value" stroke="var(--color-value)" strokeWidth={2} />
+  </LineChart>
+</ChartContainer>
+```
+
+### Multi-Series with Legend
+
+```tsx
+import { Area, AreaChart, XAxis, YAxis } from "recharts"
+
+const data = [
+  { month: "Jan", revenue: 12400, expenses: 8200 },
+  { month: "Feb", revenue: 18200, expenses: 9100 },
+]
+
+const config = {
+  revenue: { label: "Revenue", color: "hsl(142 76% 36%)" },
+  expenses: { label: "Expenses", color: "hsl(0 84% 60%)" },
+} satisfies ChartConfig
+
+<ChartContainer config={config} className="h-[400px]">
+  <AreaChart data={data}>
+    <XAxis dataKey="month" />
+    <YAxis />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <ChartLegend content={<ChartLegendContent />} />
+    <Area
+      dataKey="revenue"
+      fill="var(--color-revenue)"
+      stroke="var(--color-revenue)"
+      fillOpacity={0.6}
+    />
+    <Area
+      dataKey="expenses"
+      fill="var(--color-expenses)"
+      stroke="var(--color-expenses)"
+      fillOpacity={0.4}
+    />
+  </AreaChart>
+</ChartContainer>
+```
+
+### Bar Chart with Custom Tooltip
+
+```tsx
+import { Bar, BarChart, XAxis, YAxis } from "recharts"
+
+const config = {
+  requests: { label: "API Requests", color: "var(--chart-1)" },
+} satisfies ChartConfig
+
+<ChartContainer config={config} className="h-[300px]">
+  <BarChart data={apiData}>
+    <XAxis dataKey="endpoint" />
+    <YAxis />
+    <ChartTooltip
+      content={
+        <ChartTooltipContent
+          formatter={(value) => [value.toLocaleString(), "Requests"]}
+        />
+      }
+    />
+    <Bar dataKey="requests" fill="var(--color-requests)" radius={4} />
+  </BarChart>
+</ChartContainer>
+```
+
+### Theme-Aware Colors
+
+```tsx
+const config = {
+  active: {
+    label: "Active Users",
+    theme: {
+      light: "hsl(220 70% 50%)",
+      dark: "hsl(220 70% 60%)",
+    },
+  },
+} satisfies ChartConfig
+
+<ChartContainer config={config}>
+  <LineChart data={data}>
+    {/* Color automatically switches with theme */}
+    <Line dataKey="active" stroke="var(--color-active)" />
+  </LineChart>
+</ChartContainer>
+```
+
+### Tooltip Indicators
+
+```tsx
+// Dot indicator (default)
+<ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+
+// Line indicator
+<ChartTooltip content={<ChartTooltipContent indicator="line" />} />
+
+// Dashed indicator
+<ChartTooltip content={<ChartTooltipContent indicator="dashed" />} />
+```
+
+## Color Variables
+
+ChartContainer generates CSS variables for each config key:
+
+```tsx
+const config = {
+  revenue: { color: "hsl(142 76% 36%)" },
+};
+// Generates: --color-revenue: hsl(142 76% 36%)
+// Use in charts: var(--color-revenue)
+```
+
+Recharts built-in chart colors are also available:
+
+- `var(--chart-1)` through `var(--chart-5)`: Pre-defined theme colors
+
+## Accessibility
+
+- Uses Recharts' `accessibilityLayer` prop for keyboard navigation
+- Tooltips provide screen reader-friendly descriptions of data points
+- Color indicators supplement with text labels in tooltips/legends
+- CSS variables respect color mode preferences
+
+## Best Practices
+
+- Set explicit height via className (e.g., "h-[400px]") - default is aspect-video
+- Use `satisfies ChartConfig` for type-safe configuration
+- Reference colors with `var(--color-{key})` to match config
+- Include `accessibilityLayer` prop on Recharts components
+- Format large numbers in tooltips with `formatter` prop
+- Use theme-aware colors for charts that will be viewed in both modes
+
+## Related
+
+- [Recharts Documentation](https://recharts.org/) - Full chart component reference
+- Card - Container for chart sections with headers
+- Tooltip - Related tooltip pattern for non-chart UI

package/llm/components/checkbox.llm.md

@@ -0,0 +1,234 @@
+# Checkbox
+
+Binary selection component for forms, settings, and multi-select interfaces.
+
+## Import
+
+```tsx
+import { Checkbox } from "@minidev.fun/ui/checkbox";
+```
+
+## Anatomy
+
+```tsx
+<Checkbox />
+```
+
+The component includes a built-in indicator with check icon - no need for separate child components.
+
+## Props
+
+All Base UI Checkbox.Root props are supported. Common props:
+
+| Prop            | Type                       | Default | Description                            |
+| --------------- | -------------------------- | ------- | -------------------------------------- |
+| checked         | boolean                    | -       | Controlled checked state               |
+| defaultChecked  | boolean                    | false   | Initial checked state (uncontrolled)   |
+| onCheckedChange | (checked: boolean) => void | -       | Called when state changes              |
+| disabled        | boolean                    | false   | Prevents user interaction              |
+| required        | boolean                    | false   | Must be checked before form submission |
+| name            | string                     | -       | Form field name                        |
+| value           | string                     | -       | Form value when checked                |
+| indeterminate   | boolean                    | false   | Show indeterminate/mixed state         |
+| readOnly        | boolean                    | false   | Prevents state changes but shows value |
+
+### Styling Props
+
+| Prop      | Type   | Description            |
+| --------- | ------ | ---------------------- |
+| className | string | Additional CSS classes |
+
+## Data Attributes
+
+Use these for custom styling:
+
+| Attribute      | When Present                   |
+| -------------- | ------------------------------ |
+| data-checked   | Checkbox is checked            |
+| data-unchecked | Checkbox is unchecked          |
+| data-disabled  | Component is disabled          |
+| data-readonly  | Component is readonly          |
+| data-required  | Field is required              |
+| data-invalid   | Validation failed (with Field) |
+| data-focused   | Checkbox has focus             |
+
+## Examples
+
+### Basic Usage
+
+```tsx
+<label className="flex items-center gap-2">
+  <Checkbox />
+  <span>Accept terms and conditions</span>
+</label>
+```
+
+### Controlled State
+
+```tsx
+function NewsletterSubscription() {
+  const [subscribed, setSubscribed] = useState(false);
+
+  return (
+    <label className="flex items-center gap-2">
+      <Checkbox
+        checked={subscribed}
+        onCheckedChange={(checked) => setSubscribed(checked as boolean)}
+      />
+      <span>Subscribe to newsletter</span>
+    </label>
+  );
+}
+```
+
+### With Label Component
+
+```tsx
+import { Label } from "@minidev.fun/ui/label";
+
+<label className="flex items-center gap-2">
+  <Checkbox defaultChecked />
+  <Label>Enable notifications</Label>
+</label>;
+```
+
+### With Description
+
+```tsx
+<label className="flex items-start gap-3">
+  <Checkbox defaultChecked />
+  <div className="flex-1">
+    <Label>Email notifications</Label>
+    <p className="text-muted-foreground text-xs">
+      Receive email updates about your account activity
+    </p>
+  </div>
+</label>
+```
+
+### Form Integration
+
+```tsx
+<form>
+  <fieldset className="space-y-3">
+    <legend className="text-sm font-medium">Preferences</legend>
+
+    <label className="flex items-center gap-2">
+      <Checkbox name="weekly-summary" defaultChecked />
+      <Label>Send weekly summaries</Label>
+    </label>
+
+    <label className="flex items-center gap-2">
+      <Checkbox name="dark-mode" />
+      <Label>Enable dark mode</Label>
+    </label>
+
+    <label className="flex items-center gap-2">
+      <Checkbox name="public-profile" required />
+      <Label>I accept the terms of service *</Label>
+    </label>
+  </fieldset>
+</form>
+```
+
+### Disabled State
+
+```tsx
+<label className="flex items-center gap-2">
+  <Checkbox disabled defaultChecked />
+  <Label>Admin access (requires Pro plan)</Label>
+</label>
+```
+
+### Permission Settings Example
+
+```tsx
+function APIPermissions() {
+  const [permissions, setPermissions] = useState({
+    readAccess: true,
+    writeAccess: false,
+    adminAccess: false,
+  });
+
+  const togglePermission = (key: keyof typeof permissions) => {
+    setPermissions((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <div className="space-y-3">
+      <label className="flex items-start gap-3">
+        <Checkbox
+          checked={permissions.readAccess}
+          onCheckedChange={() => togglePermission("readAccess")}
+        />
+        <div className="flex-1">
+          <Label>Read Access</Label>
+          <p className="text-muted-foreground text-xs">
+            Fetch casts, users, and channel data
+          </p>
+        </div>
+      </label>
+
+      <label className="flex items-start gap-3">
+        <Checkbox
+          checked={permissions.writeAccess}
+          onCheckedChange={() => togglePermission("writeAccess")}
+        />
+        <div className="flex-1">
+          <Label>Write Access</Label>
+          <p className="text-muted-foreground text-xs">
+            Publish casts and update profiles
+          </p>
+        </div>
+      </label>
+
+      <label className="flex items-start gap-3">
+        <Checkbox
+          checked={permissions.adminAccess}
+          onCheckedChange={() => togglePermission("adminAccess")}
+          disabled
+        />
+        <div className="flex-1">
+          <Label>Admin Access</Label>
+          <p className="text-muted-foreground text-xs">
+            Full administrative permissions (Enterprise only)
+          </p>
+        </div>
+      </label>
+    </div>
+  );
+}
+```
+
+## Keyboard
+
+| Key         | Action                          |
+| ----------- | ------------------------------- |
+| Space       | Toggle checked state            |
+| Enter       | Toggle checked state (in forms) |
+| Tab         | Move focus to next element      |
+| Shift + Tab | Move focus to previous element  |
+
+## Accessibility
+
+- Renders semantic HTML with hidden native checkbox input
+- Full keyboard navigation support
+- Proper ARIA attributes automatically applied
+- Works with form labels via native label element
+- Supports required field validation
+- Focus visible states for keyboard users
+
+## Styling Notes
+
+- Size: 16px × 16px (size-4)
+- Border radius: 4px
+- Checked state shows primary color background
+- Includes focus ring on keyboard focus
+- Disabled state reduces opacity to 50%
+- Peer class allows styling adjacent elements based on state
+
+## Related
+
+- [Label](./label.llm.md) - Accessible labels for form fields
+- [Switch](./switch.llm.md) - Alternative for on/off toggles
+- [Radio Group](./radio-group.llm.md) - Single selection from multiple options

package/llm/components/code.llm.md

@@ -0,0 +1,82 @@
+# Code
+
+Inline code component with monospace font and subtle background.
+
+## Import
+
+```tsx
+import { Code } from "@minidev.fun/ui/typography";
+```
+
+## Usage
+
+```tsx
+<Text>
+  Use the <Code>useState</Code> hook for local state.
+</Text>
+```
+
+## Props
+
+| Prop      | Type                                                                                  | Default   | Description            |
+| --------- | ------------------------------------------------------------------------------------- | --------- | ---------------------- |
+| color     | "default" \| "muted" \| "subtle" \| "destructive" \| "success" \| "warning" \| "info" | "default" | Text color             |
+| className | string                                                                                | -         | Additional CSS classes |
+
+## Examples
+
+### Basic
+
+```tsx
+<Code>npm install @minidev.fun/ui</Code>
+```
+
+### Inline with Text
+
+```tsx
+<Text>
+  The <Code>Button</Code> component accepts a <Code>variant</Code> prop.
+</Text>
+```
+
+### With Colors
+
+```tsx
+<Code color="destructive">error.message</Code>
+<Code color="success">response.data</Code>
+```
+
+### In Lists
+
+```tsx
+<ul>
+  <li>
+    <Code>variant</Code> - Visual style
+  </li>
+  <li>
+    <Code>size</Code> - Component size
+  </li>
+  <li>
+    <Code>disabled</Code> - Disable interaction
+  </li>
+</ul>
+```
+
+## Styling
+
+Default styling:
+
+- Monospace font (`font-mono`)
+- Small text size (`text-sm`)
+- Muted background (`bg-muted`)
+- Rounded corners
+- Horizontal padding
+
+## Note
+
+For multi-line code blocks with syntax highlighting, use a dedicated solution like `prism-react-renderer` or `shiki`.
+
+## Related
+
+- [Text](./text.llm.md) - Paragraph text
+- [Kbd](./kbd.llm.md) - Keyboard shortcuts