@k8o/arte-odyssey 3.1.0 → 4.0.0

package/README.md

@@ -21,29 +21,44 @@ npm install react react-dom typescript tailwindcss
 ```
 
 Required versions:
+
 - React ≥19.0.0
 - TypeScript ≥5.9.0
 - Tailwind CSS ≥4.0.0
 
 ## Quick Start
 
-1. Install the package and import the CSS:
+1. Import the CSS and set up the provider:
+
+```css
+/* In your main CSS file (recommended for Tailwind CSS 4) */
+@import 'tailwindcss';
+@import '@k8o/arte-odyssey/styles.css';
+```
 
 ```tsx
-// In your main CSS file or component
-import '@k8o/arte-odyssey/styles.css';
+// In your app entry point
+import { ArteOdysseyProvider } from '@k8o/arte-odyssey';
+
+function App() {
+  return (
+    <ArteOdysseyProvider>
+      <YourApp />
+    </ArteOdysseyProvider>
+  );
+}
 ```
 
-2. Use components in your React app:
+2. Use components:
 
 ```tsx
-import { Button, Card } from '@k8o/arte-odyssey';
+import { Button } from '@k8o/arte-odyssey';
+import { Card } from '@k8o/arte-odyssey';
 
-function App() {
+function MyPage() {
   return (
-    <Card>
-      <h1>Welcome to ArteOdyssey</h1>
-      <Button variant="primary" onClick={() => alert('Hello!')}>
+    <Card title="Welcome to ArteOdyssey">
+      <Button color="primary" variant="contained" onClick={() => alert('Hello!')}>
         Click me
       </Button>
     </Card>
@@ -51,92 +66,122 @@ function App() {
 }
 ```
 
+## AI Agent Skills
+
+ArteOdyssey provides an Agent Skill for AI coding assistants. It gives your agent knowledge of the design system, component APIs, and design principles.
+
+```bash
+npx skills add k35o/ArteOdyssey --skill arte-odyssey-usage
+```
+
+Compatible with Claude Code, Cursor, GitHub Copilot, and other [Agent Skills](https://agentskills.io/) compatible tools.
+
 ## Component Categories
 
 ### Layout & Navigation
+
 - **Accordion** - Collapsible content panels
 - **Breadcrumb** - Navigation path indicator
-- **Card** - Flexible content container
+- **Card** / **InteractiveCard** - Flexible content container (with hover interaction)
 - **Separator** - Visual content divider
 - **Tabs** - Tab-based content organization
+- **ScrollLinked** - Scroll progress indicator
 
 ### Form Controls
+
 - **Autocomplete** - Search with suggestions
-- **Checkbox** - Multi-selection input
-- **Form Control** - Form field wrapper with label and validation
-- **Number Field** - Numeric input with controls
+- **Checkbox** - Binary selection input
+- **FileField** - File upload with composite pattern
+- **FormControl** - Form field wrapper with label and validation
+- **NumberField** - Numeric input with controls
 - **Radio** - Single selection from options
-- **Range Field** - Slider input control
+- **Slider** - Slider input control
 - **Select** - Dropdown selection
-- **Text Field** - Single-line text input
+- **TextField** - Single-line text input
 - **Textarea** - Multi-line text input
 
 ### Buttons & Links
+
 - **Button** - Primary action button
-- **Icon Button** - Button with icon only
-- **Link Button** - Button styled as link
+- **IconButton** - Button with icon only
+- **LinkButton** - Button styled as link
 - **Anchor** - External link component
-- **Icon Link** - Link with icon
+- **IconLink** - Link with icon
 
 ### Feedback & Status
+
 - **Alert** - Important messages and notifications
 - **Toast** - Temporary notification messages
 - **Progress** - Progress indication
-- **Baseline Status** - Web standard support indicator
+- **BaselineStatus** - Web standard support indicator
 
 ### Overlays & Modals
+
 - **Dialog** - Modal dialog boxes
 - **Drawer** - Slide-out panel
 - **Modal** - Overlay modal component
 - **Popover** - Floating content container
 - **Tooltip** - Contextual help text
-- **Dropdown Menu** - Action menu component
+- **DropdownMenu** - Action menu component
 
 ### Data Display
+
 - **Code** - Formatted code display
 - **Heading** - Typography heading component
-- **List Box** - Selectable list component
-- **Text Tag** - Labeled text elements
+- **ListBox** - Selectable list component
 
 ### Utilities
-- **Error Boundary** - Error handling wrapper
-- **Providers** - Context providers for the library
-- **Scroll Linked** - Scroll-triggered animations
+
+- **ErrorBoundary** - Error handling wrapper
+- **ArteOdysseyProvider** - Context providers for the library
 - **Icons** - Icon component collection
 
 ## Usage Examples
 
-### Basic Button
+### Button
 
 ```tsx
 import { Button } from '@k8o/arte-odyssey';
 
-<Button variant="primary" size="medium">
-  Primary Button
+// Primary action
+<Button color="primary" variant="contained" size="md">
+  Save
+</Button>
+
+// Secondary action
+<Button color="gray" variant="outlined">
+  Cancel
+</Button>
+
+// Text-only
+<Button variant="skeleton">
+  Learn more
 </Button>
 ```
 
 ### Form with Validation
 
 ```tsx
-import { FormControl, TextField, Button } from '@k8o/arte-odyssey';
+import { FormControl } from '@k8o/arte-odyssey';
+import { TextField } from '@k8o/arte-odyssey';
+import { Button } from '@k8o/arte-odyssey';
 
 <form>
-  <FormControl label="Email" required>
-    <TextField
-      type="email"
-      placeholder="Enter your email"
-      required
-    />
-  </FormControl>
+  <FormControl
+    label="Email"
+    isRequired
+    errorText={error}
+    renderInput={(props) => <TextField {...props} id="email" placeholder="Enter your email" />}
+  />
   <Button type="submit">Submit</Button>
-</form>
+</form>;
 ```
 
-### Modal Dialog
+### Dialog
 
 ```tsx
-import { Dialog, Button } from '@k8o/arte-odyssey';
+import { Dialog } from '@k8o/arte-odyssey';
+import { Button } from '@k8o/arte-odyssey';
 import { useState } from 'react';
 
 function MyComponent() {
@@ -144,19 +189,16 @@ function MyComponent() {
 
   return (
     <>
-      <Button onClick={() => setIsOpen(true)}>
-        Open Dialog
-      </Button>
-      <Dialog
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        title="Confirm Action"
-      >
-        <p>Are you sure you want to continue?</p>
-        <Button onClick={() => setIsOpen(false)}>
-          Confirm
-        </Button>
-      </Dialog>
+      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
+      {isOpen && (
+        <Dialog.Root>
+          <Dialog.Header title="Confirm Action" onClose={() => setIsOpen(false)} />
+          <Dialog.Content>
+            <p>Are you sure you want to continue?</p>
+            <Button onClick={() => setIsOpen(false)}>Confirm</Button>
+          </Dialog.Content>
+        </Dialog.Root>
+      )}
     </>
   );
 }
@@ -168,12 +210,12 @@ ArteOdyssey supports granular imports to optimize your bundle size:
 
 ```tsx
 // Import specific components
-import { Button } from '@k8o/arte-odyssey/button';
-import { Card } from '@k8o/arte-odyssey/card';
+import { Button } from '@k8o/arte-odyssey';
+import { Card } from '@k8o/arte-odyssey';
 
 // Import specific hooks
-import { useClickAway } from '@k8o/arte-odyssey/hooks/click-away';
-import { useLocalStorage } from '@k8o/arte-odyssey/hooks/local-storage';
+import { useClickAway } from '@k8o/arte-odyssey';
+import { useLocalStorage } from '@k8o/arte-odyssey';
 ```
 
 ## Custom Hooks
@@ -181,27 +223,18 @@ import { useLocalStorage } from '@k8o/arte-odyssey/hooks/local-storage';
 The library includes several useful hooks:
 
 - **useClickAway** - Detect clicks outside an element
+- **useClient** - Client-side rendering detection
 - **useClipboard** - Clipboard operations
 - **useHash** - URL hash management
 - **useInterval** - Interval timer management
 - **useLocalStorage** - Local storage with React state
+- **useResize** - Element resize detection
 - **useScrollDirection** - Scroll direction detection
 - **useStep** - Step-based state management
 - **useTimeout** - Timeout management
+- **useWindowResize** - Window resize events
 - **useWindowSize** - Window size tracking
 
-## TypeScript Support
-
-All components are fully typed with TypeScript. The library exports comprehensive type definitions for all props and APIs.
-
-```tsx
-import type { ButtonProps } from '@k8o/arte-odyssey';
-
-const CustomButton: React.FC<ButtonProps> = (props) => {
-  return <Button {...props} />;
-};
-```
-
 ## Accessibility
 
 All components follow WCAG accessibility guidelines:
@@ -217,10 +250,9 @@ All components follow WCAG accessibility guidelines:
 
 Components are built with Tailwind CSS and support customization through:
 
-- CSS custom properties
+- CSS custom properties (semantic design tokens)
 - Tailwind utility classes
-- Theme configuration
-- Style overrides
+- Light / Dark mode via semantic color tokens
 
 ## Development
 
@@ -260,7 +292,3 @@ MIT License - see [LICENSE](../../LICENSE) for details.
 ## Contributing
 
 Contributions are welcome! Please see the [main repository](../../README.md) for contribution guidelines.
-
----
-
-Built with ❤️ using React, TypeScript, and Tailwind CSS.

package/dist/components/buttons/button/button.d.mts

@@ -0,0 +1,14 @@
+import { FC, HTMLProps, ReactNode } from "react";
+
+//#region src/components/buttons/button/button.d.ts
+declare const Button: FC<{
+  type?: 'button' | 'submit';
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'primary' | 'gray';
+  variant?: 'contained' | 'outlined' | 'skeleton';
+  fullWidth?: boolean;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>>;
+//#endregion
+export { Button };

package/dist/components/buttons/button/button.mjs

@@ -0,0 +1,29 @@
+import { cn } from "../../../helpers/cn.mjs";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/buttons/button/button.tsx
+const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "contained", disabled = false, fullWidth = false, onClick, startIcon, endIcon, ...rest }) => {
+	return /* @__PURE__ */ jsxs("button", {
+		className: cn("cursor-pointer rounded-lg border-2 text-center font-bold transition-colors", {
+			"border-transparent bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained" && color === "primary",
+			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
+			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": disabled && variant === "contained",
+			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "primary",
+			"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "gray",
+			"cursor-not-allowed bg-bg-base opacity-35 hover:bg-bg-base active:bg-bg-base": disabled && variant === "outlined",
+			"border-transparent bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton",
+			"cursor-not-allowed bg-transparent text-fg-mute opacity-35 hover:text-fg-mute active:text-fg-mute": disabled && variant === "skeleton"
+		}, "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", fullWidth && "w-full", Boolean(startIcon ?? endIcon) && "flex items-center gap-2", startIcon && endIcon ? "justify-between" : startIcon && variant !== "skeleton" ? "justify-center" : endIcon && "justify-between"),
+		disabled,
+		onClick,
+		ref,
+		type,
+		...rest,
+		children: [
+			startIcon,
+			children,
+			endIcon
+		]
+	});
+};
+//#endregion
+export { Button };

package/dist/components/buttons/button/index.d.mts

@@ -0,0 +1,2 @@
+import { Button } from "./button.mjs";
+export { Button };

package/dist/components/buttons/button/index.mjs

@@ -0,0 +1,2 @@
+import { Button } from "./button.mjs";
+export { Button };

package/dist/components/buttons/icon-button/icon-button.d.mts

@@ -0,0 +1,11 @@
+import { FC, HTMLProps } from "react";
+
+//#region src/components/buttons/icon-button/icon-button.d.ts
+type Props = {
+  size?: 'sm' | 'md' | 'lg';
+  bg?: 'transparent' | 'base' | 'primary';
+  label: string;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+declare const IconButton: FC<Props>;
+//#endregion
+export { IconButton };

package/dist/components/buttons/icon-button/icon-button.mjs

@@ -0,0 +1,17 @@
+import { cn } from "../../../helpers/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/buttons/icon-button/icon-button.tsx
+const IconButton = ({ ref, size = "md", bg = "transparent", label, children, ...props }) => {
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-label": props.role ? label : void 0,
+		className: cn("inline-flex cursor-pointer rounded-full bg-transparent transition-colors", "hover:bg-bg-subtle", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info active:bg-bg-emphasize", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg/90 active:bg-primary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", props.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent"),
+		ref,
+		...props,
+		children: [!props.role && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}), children]
+	});
+};
+//#endregion
+export { IconButton };

package/dist/components/buttons/icon-button/index.d.mts

@@ -0,0 +1,2 @@
+import { IconButton } from "./icon-button.mjs";
+export { IconButton };

package/dist/components/buttons/icon-button/index.mjs

@@ -0,0 +1,2 @@
+import { IconButton } from "./icon-button.mjs";
+export { IconButton };

package/dist/components/buttons/icon-link/icon-link.d.mts

@@ -0,0 +1,27 @@
+import { PropsWithChildren, ReactNode } from "react";
+
+//#region src/components/buttons/icon-link/icon-link.d.ts
+declare const IconLink: <T extends string>({
+  size,
+  bg,
+  label,
+  href,
+  children,
+  openInNewTab,
+  renderAnchor
+}: PropsWithChildren<{
+  size?: "sm" | "md" | "lg";
+  bg?: "transparent" | "base" | "primary";
+  label?: string;
+  href: T;
+  openInNewTab?: boolean;
+  renderAnchor?: (props: {
+    href: NoInfer<T>;
+    className: string;
+    target?: string;
+    rel?: string;
+    children: ReactNode;
+  }) => ReactNode;
+}>) => ReactNode;
+//#endregion
+export { IconLink };

package/dist/components/buttons/icon-link/icon-link.mjs

@@ -0,0 +1,24 @@
+import { cn } from "../../../helpers/cn.mjs";
+import { isInternalRoute } from "../../../helpers/is-internal-route.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/buttons/icon-link/icon-link.tsx
+const IconLink = ({ size = "md", bg = "transparent", label, href, children, openInNewTab = false, renderAnchor = ({ children, ...props }) => /* @__PURE__ */ jsx("a", {
+	...props,
+	children
+}) }) => {
+	const props = (isInternalRoute(href) && !openInNewTab ? "internal" : "external") === "internal" ? {} : {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	};
+	return renderAnchor({
+		href,
+		className: cn("inline-flex rounded-full transition-colors hover:bg-bg-subtle active:bg-bg-emphasize focus-visible:ring-2 focus-visible:ring-border-info", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg/90 active:bg-primary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3"),
+		...props,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		}), children] })
+	});
+};
+//#endregion
+export { IconLink };

package/dist/components/buttons/icon-link/index.d.mts

@@ -0,0 +1,2 @@
+import { IconLink } from "./icon-link.mjs";
+export { IconLink };

package/dist/components/buttons/icon-link/index.mjs

@@ -0,0 +1,2 @@
+import { IconLink } from "./icon-link.mjs";
+export { IconLink };

package/dist/components/buttons/link-button/index.d.mts

@@ -0,0 +1,2 @@
+import { LinkButton } from "./link-button.mjs";
+export { LinkButton };

package/dist/components/buttons/link-button/index.mjs

@@ -0,0 +1,2 @@
+import { LinkButton } from "./link-button.mjs";
+export { LinkButton };

package/dist/components/buttons/link-button/link-button.d.mts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+
+//#region src/components/buttons/link-button/link-button.d.ts
+declare const LinkButton: <T extends string>({
+  children,
+  size,
+  color,
+  variant,
+  href,
+  startIcon,
+  endIcon,
+  active,
+  openInNewTab,
+  renderAnchor
+}: {
+  variant?: "contained" | "outlined" | "skeleton";
+  size?: "sm" | "md" | "lg";
+  color?: "primary" | "gray";
+  href: T;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+  active?: boolean;
+  openInNewTab?: boolean;
+  children: string;
+  renderAnchor?: (props: {
+    "aria-label"?: string;
+    href: NoInfer<T>;
+    className: string;
+    target?: string;
+    rel?: string;
+    children: ReactNode;
+  }) => ReactNode;
+}) => ReactNode;
+//#endregion
+export { LinkButton };

package/dist/components/buttons/link-button/link-button.mjs

@@ -0,0 +1,32 @@
+import { cn } from "../../../helpers/cn.mjs";
+import { isInternalRoute } from "../../../helpers/is-internal-route.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/buttons/link-button/link-button.tsx
+const LinkButton = ({ children, size = "md", color = "primary", variant = "contained", href, startIcon, endIcon, active = false, openInNewTab = false, renderAnchor = ({ children, ...props }) => /* @__PURE__ */ jsx("a", {
+	...props,
+	children
+}) }) => {
+	const props = (isInternalRoute(href) && !openInNewTab ? "internal" : "external") === "internal" ? {} : {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	};
+	return renderAnchor({
+		href,
+		className: cn("rounded-lg border-2 text-center font-bold transition-colors", {
+			"border-transparent bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained" && color === "primary",
+			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
+			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "primary",
+			"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "gray",
+			"border-transparent bg-transparent text-fg-mute hover:text-fg-base active:text-fg-base": variant === "skeleton"
+		}, "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", Boolean(startIcon ?? endIcon) && "flex items-center gap-2", Boolean(endIcon) && "justify-between", active && "text-fg-info hover:text-fg-info active:text-fg-info"),
+		"aria-label": children,
+		...props,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			startIcon,
+			children,
+			endIcon
+		] })
+	});
+};
+//#endregion
+export { LinkButton };

package/dist/components/data-display/accordion/accordion-button.d.mts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+
+//#region src/components/data-display/accordion/accordion-button.d.ts
+declare const AccordionButton: FC<PropsWithChildren>;
+//#endregion
+export { AccordionButton };

package/dist/components/data-display/accordion/accordion-button.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useItemId, useOpen, useToggleOpen } from "./context.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-display/accordion/accordion-button.tsx
+const AccordionButton = ({ children }) => {
+	const id = useItemId();
+	const open = useOpen();
+	const toggleOpen = useToggleOpen();
+	return /* @__PURE__ */ jsxs("button", {
+		"aria-controls": `${id}-panel`,
+		"aria-expanded": open,
+		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md py-4 text-fg-base", "hover:text-primary-fg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info"),
+		id: `${id}-button`,
+		onClick: toggleOpen,
+		type: "button",
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: cn("transition-transform duration-150", open && "rotate-180"),
+			children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" })
+		})]
+	});
+};
+//#endregion
+export { AccordionButton };

package/dist/components/data-display/accordion/accordion-item.d.mts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from "react";
+
+//#region src/components/data-display/accordion/accordion-item.d.ts
+declare const AccordionItem: FC<PropsWithChildren<{
+  defaultOpen?: boolean;
+}>>;
+//#endregion
+export { AccordionItem };

package/dist/components/data-display/accordion/accordion-item.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { AccordionItemProvider } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react";
+//#region src/components/data-display/accordion/accordion-item.tsx
+const AccordionItem = ({ children, defaultOpen = false }) => {
+	return /* @__PURE__ */ jsx(AccordionItemProvider, {
+		defaultOpen,
+		id: useId(),
+		children: /* @__PURE__ */ jsx("div", { children })
+	});
+};
+//#endregion
+export { AccordionItem };

package/dist/components/data-display/accordion/accordion-panel.d.mts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+
+//#region src/components/data-display/accordion/accordion-panel.d.ts
+declare const AccordionPanel: FC<PropsWithChildren>;
+//#endregion
+export { AccordionPanel };

package/dist/components/data-display/accordion/accordion-panel.mjs

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useItemId, useOpen } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/accordion/accordion-panel.tsx
+const AccordionPanel = ({ children }) => {
+	const id = useItemId();
+	const open = useOpen();
+	return /* @__PURE__ */ jsx("section", {
+		"aria-labelledby": `${id}-button`,
+		className: cn({ hidden: !open }, "pb-4"),
+		hidden: !open,
+		id: `${id}-panel`,
+		children
+	});
+};
+//#endregion
+export { AccordionPanel };

package/dist/components/data-display/accordion/accordion.d.mts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from "react";
+
+//#region src/components/data-display/accordion/accordion.d.ts
+declare const Accordion: FC<PropsWithChildren>;
+//#endregion
+export { Accordion };

package/dist/components/data-display/accordion/accordion.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/data-display/accordion/accordion.tsx
+const Accordion = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "divide-y divide-border-mute",
+		children
+	});
+};
+//#endregion
+export { Accordion };

package/dist/components/data-display/accordion/context.d.mts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from "react";
+
+//#region src/components/data-display/accordion/context.d.ts
+type ToggleOpen = () => void;
+declare const useOpen: () => boolean;
+declare const useToggleOpen: () => ToggleOpen;
+declare const useItemId: () => string;
+declare const AccordionItemProvider: FC<PropsWithChildren<{
+  defaultOpen?: boolean;
+  id: string;
+}>>;
+//#endregion
+export { AccordionItemProvider, useItemId, useOpen, useToggleOpen };