@octanejs/shadcn 0.0.6 → 0.0.8

package/src/bases/base-ui/ui/tooltip.tsrx

@@ -0,0 +1,73 @@
+// Base UI base tooltip — runs on @octanejs/base-ui's Tooltip.
+//
+// SAME TWO POSITIONING DIFFERENCES AS POPOVER: the transform-origin var is plain
+// `--transform-origin` rather than radix's `--radix-tooltip-content-transform-origin`, and the
+// tree gains a Positioner layer (Portal > Positioner > Popup) which owns the offset.
+//
+// ONE RADIX-ONLY STATE IS DROPPED. The radix base styles `data-[state=delayed-open]:` alongside
+// `data-open:`, because radix distinguishes an immediate open from one that waited out the
+// delay. Base UI publishes only `data-open`/`data-closed` — there is no delayed-open state to
+// match, so those three utilities would be dead weight referencing an attribute that never
+// appears. The `data-open:` variants they duplicate are kept and cover both cases.
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source.
+import { createElement, Fragment, type OctaneNode } from 'octane';
+import { Tooltip as TooltipPrimitive } from '@octanejs/base-ui/tooltip';
+
+import { cn } from '../../../lib/utils';
+
+export interface TooltipProviderProps extends Record<string, unknown> {
+	delay?: number;
+}
+
+export function TooltipProvider({ delay = 0, ...props }: TooltipProviderProps) @{
+	<TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />
+}
+
+export function Tooltip(props: Record<string, unknown>) @{
+	<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+export function TooltipTrigger(props: Record<string, unknown>) @{
+	<TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+export interface TooltipContentProps extends Record<string, unknown> {
+	className?: string;
+	sideOffset?: number;
+	children?: OctaneNode;
+}
+
+export function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: TooltipContentProps) {
+	return createElement(TooltipPrimitive.Portal, {
+		children: createElement(TooltipPrimitive.Positioner, {
+			sideOffset,
+			children: createElement(TooltipPrimitive.Popup, {
+				'data-slot': 'tooltip-content',
+				className: cn(
+					'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+					className,
+				),
+				...props,
+				// Octane reconciles ARRAY children as a keyed list, so every entry needs a key —
+				// including the consumer's. Leaving `children` bare emits the missing-key warning
+				// and lets the consumer node be mismatched against the arrow when its identity
+				// changes. The consumer may pass anything (a string, an element, an array), so it
+				// is wrapped in a keyed Fragment rather than keyed in place.
+				children: [
+					createElement(Fragment, { key: 'content', children }),
+					createElement(TooltipPrimitive.Arrow, {
+						key: 'arrow',
+						className: 'z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground',
+					}),
+				],
+			}),
+		}),
+	});
+}

package/src/{ui → bases/radix/ui}/accordion.tsrx

@@ -9,7 +9,7 @@ import { Accordion as AccordionPrimitive } from '@octanejs/radix';
 import { ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
 import type { OctaneNode } from 'octane';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/alert-dialog.tsrx

@@ -6,7 +6,7 @@
 import { createElement, type OctaneNode } from 'octane';
 import { AlertDialog as AlertDialogPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 import { Button, type ButtonProps } from './button.tsrx';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;

package/src/{ui → bases/radix/ui}/alert.tsrx

@@ -2,8 +2,8 @@
 // cva strings verbatim. Pure template JSX (no consumer-children interleave).
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../lib/utils';
-import type { DivProps } from '../lib/types';
+import { cn } from '../../../lib/utils';
+import type { DivProps } from '../../../lib/types';
 
 export const alertVariants = cva(
 	'group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=\'size-\'])]:size-4',

package/src/{ui → bases/radix/ui}/avatar.tsrx

@@ -3,7 +3,7 @@
 // @octanejs/radix; pure template JSX.
 import { Avatar as AvatarPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/badge.tsrx

@@ -4,8 +4,8 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
-import type { HostProps } from '../lib/types';
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
 
 export const badgeVariants = cva(
 	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',

package/src/{ui → bases/radix/ui}/breadcrumb.tsrx

@@ -7,7 +7,7 @@ import { Slot } from '@octanejs/radix';
 import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
 import { createElement, type OctaneNode } from 'octane';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/button.tsrx

@@ -7,8 +7,8 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
-import type { HostProps } from '../lib/types';
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
 
 export const buttonVariants = cva(
 	'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',

package/src/{ui → bases/radix/ui}/card.tsrx

@@ -1,7 +1,7 @@
 // Default-Tailwind (package canonical) card — user-supplied flavor, class strings verbatim (uses the
 // --card-spacing custom-property pattern and the nova cn-font-heading hook).
-import { cn } from '../lib/utils';
-import type { DivProps } from '../lib/types';
+import { cn } from '../../../lib/utils';
+import type { DivProps } from '../../../lib/types';
 
 type Props = DivProps;
 

package/src/{ui → bases/radix/ui}/checkbox.tsrx

@@ -6,7 +6,7 @@
 import { Checkbox as CheckboxPrimitive } from '@octanejs/radix';
 import { CheckIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface CheckboxProps extends Record<string, unknown> {
 	className?: string;

package/src/{ui → bases/radix/ui}/context-menu.tsrx

@@ -8,7 +8,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { ContextMenu as ContextMenuPrimitive } from '@octanejs/radix';
 import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/dialog.tsrx

@@ -9,7 +9,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { Dialog as DialogPrimitive } from '@octanejs/radix';
 import { XIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 import { Button } from './button.tsrx';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;

package/src/{ui → bases/radix/ui}/dropdown-menu.tsrx

@@ -8,7 +8,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { DropdownMenu as DropdownMenuPrimitive } from '@octanejs/radix';
 import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/empty.tsrx

@@ -3,7 +3,7 @@
 // as a <div> (typed as "p") — both preserved as-is.
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type DivProps = { className?: string } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/field.tsrx

@@ -6,7 +6,7 @@
 import { createElement, useMemo, type OctaneNode } from 'octane';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 import { Label } from './label.tsrx';
 import { Separator } from './separator.tsrx';
 

package/src/{ui → bases/radix/ui}/hover-card.tsrx

@@ -10,7 +10,7 @@
 import { createElement } from 'octane';
 import { HoverCard as HoverCardPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export function HoverCard(props: Record<string, unknown>) @{
 	<HoverCardPrimitive.Root data-slot="hover-card" {...props} />

package/src/{ui → bases/radix/ui}/input.tsrx

@@ -1,7 +1,7 @@
 // Default-Tailwind (package canonical) input — user-supplied flavor, class string verbatim.
 // OCTANE DIVERGENCE: per-keystroke handling is the native onInput event.
-import { cn } from '../lib/utils';
-import type { HostProps } from '../lib/types';
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
 
 export interface InputProps extends HostProps<'input'> {}
 

package/src/{ui → bases/radix/ui}/item.tsrx

@@ -4,7 +4,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 import { Separator } from './separator.tsrx';
 
 type DivProps = { className?: string } & Record<string, unknown>;

package/src/{ui → bases/radix/ui}/kbd.tsrx

@@ -1,8 +1,8 @@
 // Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
 // apps/v4/registry/bases/radix/ui/kbd.tsx. Note: upstream renders KbdGroup as
 // a <kbd> host too — preserved as-is.
-import { cn } from '../lib/utils';
-import type { HostProps } from '../lib/types';
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
 
 export interface KbdProps extends HostProps<'kbd'> {}
 

package/src/{ui → bases/radix/ui}/label.tsrx

@@ -3,7 +3,7 @@
 // dropped — octane has no RSC axis).
 import { Label as LabelPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface LabelProps extends Record<string, unknown> {
 	className?: string;

package/src/{ui → bases/radix/ui}/menubar.tsrx

@@ -8,7 +8,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { Menubar as MenubarPrimitive } from '@octanejs/radix';
 import { CheckIcon, ChevronRightIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/native-select.tsrx

@@ -5,7 +5,7 @@
 // <select> and the chevron keep their fixed classes.
 import { ChevronDownIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface NativeSelectProps extends Record<string, unknown> {
 	className?: string;

package/src/{ui → bases/radix/ui}/navigation-menu.tsrx

@@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority';
 import { NavigationMenu as NavigationMenuPrimitive } from '@octanejs/radix';
 import { ChevronDownIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/pagination.tsrx

@@ -6,7 +6,7 @@
 import { createElement, type OctaneNode } from 'octane';
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 import { Button, type ButtonProps } from './button.tsrx';
 
 type Props = { className?: string } & Record<string, unknown>;

package/src/{ui → bases/radix/ui}/popover.tsrx

@@ -10,7 +10,7 @@
 import { createElement } from 'octane';
 import { Popover as PopoverPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/progress.tsrx

@@ -5,7 +5,7 @@
 // Root, whose role/aria-valuemax/data-state contract comes from its defaults.
 import { Progress as ProgressPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface ProgressProps extends Record<string, unknown> {
 	className?: string;

package/src/{ui → bases/radix/ui}/radio-group.tsrx

@@ -4,7 +4,7 @@
 import { RadioGroup as RadioGroupPrimitive } from '@octanejs/radix';
 import { CircleIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/scroll-area.tsrx

@@ -5,7 +5,7 @@
 import type { OctaneNode } from 'octane';
 import { ScrollArea as ScrollAreaPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/select.tsrx

@@ -7,7 +7,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { Select as SelectPrimitive } from '@octanejs/radix';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/separator.tsrx

@@ -3,7 +3,7 @@
 // is dropped — octane has no RSC axis).
 import { Separator as SeparatorPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface SeparatorProps extends Record<string, unknown> {
 	className?: string;

package/src/{ui → bases/radix/ui}/sheet.tsrx

@@ -8,7 +8,7 @@ import { createElement, type OctaneNode } from 'octane';
 import { Dialog as SheetPrimitive } from '@octanejs/radix';
 import { XIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 import { Button } from './button.tsrx';
 
 type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;

package/src/{ui → bases/radix/ui}/sidebar.tsrx

@@ -18,8 +18,8 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { Slot } from '@octanejs/radix';
 import { PanelLeftIcon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
-import { useIsMobile } from '../hooks/use-mobile';
+import { cn } from '../../../lib/utils';
+import { useIsMobile } from '../../../hooks/use-mobile';
 import { Button } from './button.tsrx';
 import { Input } from './input.tsrx';
 import { Separator } from './separator.tsrx';

package/src/{ui → bases/radix/ui}/skeleton.tsrx

@@ -1,7 +1,7 @@
 // Default-Tailwind flavor (package canonical) — utilities-inlined upstream styling.
 // apps/v4/registry/bases/radix/ui/skeleton.tsx.
-import { cn } from '../lib/utils';
-import type { HostProps } from '../lib/types';
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
 
 export interface SkeletonProps extends HostProps<'div'> {}
 

package/src/{ui → bases/radix/ui}/slider.tsrx

@@ -9,7 +9,7 @@
 import { createElement, useMemo } from 'octane';
 import { Slider as SliderPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface SliderProps extends Record<string, unknown> {
 	className?: string;

package/src/{ui → bases/radix/ui}/spinner.tsrx

@@ -6,7 +6,7 @@
 // @octanejs/lucide. Other icon libraries are a registry-emit concern.
 import { Loader2Icon } from '@octanejs/lucide';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface SpinnerProps extends Record<string, unknown> {
 	className?: string;

package/src/{ui → bases/radix/ui}/switch.tsrx

@@ -3,7 +3,7 @@
 // @octanejs/radix; pure template JSX.
 import { Switch as SwitchPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface SwitchProps extends Record<string, unknown> {
 	className?: string;

package/src/{ui → bases/radix/ui}/table.tsrx

@@ -2,7 +2,7 @@
 // apps/v4/registry/bases/radix/ui/table.tsx (the `"use client"` directive is
 // dropped — octane has no RSC axis). Table renders inside the upstream
 // table-container wrapper div.
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 // Multi-host family (div/table/thead/tbody/tr/th/td/caption): no single host
 // prop table applies, so the shared alias stays structural.

package/src/{ui → bases/radix/ui}/tabs.tsrx

@@ -4,7 +4,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Tabs as TabsPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 type Props = { className?: string } & Record<string, unknown>;
 

package/src/{ui → bases/radix/ui}/textarea.tsrx

@@ -3,8 +3,8 @@
 //
 // OCTANE DIVERGENCE: per-keystroke handling is the native `onInput` event, not
 // a synthetic `onChange`; native `change` keeps its commit-on-blur meaning.
-import { cn } from '../lib/utils';
-import type { HostProps } from '../lib/types';
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
 
 export interface TextareaProps extends HostProps<'textarea'> {}
 

package/src/{ui → bases/radix/ui}/toggle-group.tsrx

@@ -10,7 +10,7 @@ import { createContext, createElement, useContext, type OctaneNode } from 'octan
 import { type VariantProps } from 'class-variance-authority';
 import { ToggleGroup as ToggleGroupPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 import { toggleVariants } from './toggle.tsrx';
 
 const ToggleGroupContext = createContext<

package/src/{ui → bases/radix/ui}/toggle.tsrx

@@ -4,7 +4,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Toggle as TogglePrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export const toggleVariants = cva(
 	'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',

package/src/{ui → bases/radix/ui}/tooltip.tsrx

@@ -10,7 +10,7 @@
 import { createElement, type OctaneNode } from 'octane';
 import { Tooltip as TooltipPrimitive } from '@octanejs/radix';
 
-import { cn } from '../lib/utils';
+import { cn } from '../../../lib/utils';
 
 export interface TooltipProviderProps extends Record<string, unknown> {
 	delayDuration?: number;

package/src/bases/react-aria/ui/accordion.tsrx

@@ -0,0 +1,73 @@
+import { type OctaneNode } from 'octane';
+import {
+	DisclosurePanel as AccordionContentPrimitive,
+	Heading as AccordionHeaderPrimitive,
+	Disclosure as AccordionItemPrimitive,
+	DisclosureGroup as AccordionPrimitive,
+	Button as AccordionTriggerPrimitive,
+	type ButtonProps,
+	type DisclosureGroupProps,
+	type DisclosurePanelProps,
+	type DisclosureProps,
+} from '@octanejs/aria/components';
+
+import { cn } from '../../../lib/utils';
+import { ChevronDownIcon, ChevronUpIcon } from '@octanejs/lucide';
+
+export function Accordion({ className, ...props }: DisclosureGroupProps) {
+	return <AccordionPrimitive
+		data-slot="accordion"
+		className={cn('flex w-full flex-col', className)}
+		{...props}
+	/>;
+}
+
+export function AccordionItem({ className, ...props }: DisclosureProps) {
+	return <AccordionItemPrimitive
+		data-slot="accordion-item"
+		className={cn('not-last:border-b', className)}
+		{...props}
+	/>;
+}
+
+export function AccordionTrigger({ className, children, ...props }: Omit<
+	ButtonProps,
+	'children'
+> & { children: OctaneNode }) {
+	return <AccordionHeaderPrimitive className="flex">
+		<AccordionTriggerPrimitive
+			slot="trigger"
+			data-slot="accordion-trigger"
+			className={cn(
+				'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDownIcon
+				data-slot="accordion-trigger-icon"
+				className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+			/>
+			<ChevronUpIcon
+				data-slot="accordion-trigger-icon"
+				className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+			/>
+		</AccordionTriggerPrimitive>
+	</AccordionHeaderPrimitive>;
+}
+
+export function AccordionContent({ className, children, ...props }: DisclosurePanelProps) {
+	return <AccordionContentPrimitive
+		data-slot="accordion-content"
+		className="h-(--disclosure-panel-height) overflow-clip text-sm transition-[height] data-open:animate-accordion-down data-closed:animate-accordion-up"
+		{...props}
+	>
+		<div
+			className={cn(
+				'pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+				className,
+			)}
+		>{children}</div>
+	</AccordionContentPrimitive>;
+}