@vertz/theme-shadcn 0.2.24 → 0.2.26

package/dist/index.d.ts

@@ -336,36 +336,59 @@ interface ThemedHoverCardComponent {
 	Content: (props: HoverCardSlotProps) => HTMLElement;
 }
 import { ChildValue as ChildValue12 } from "@vertz/ui";
+import { AnimateConfig } from "@vertz/ui-primitives";
+interface ListRootProps {
+	children?: ChildValue12;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+	animate?: boolean | AnimateConfig;
+	sortable?: boolean;
+	onReorder?: (fromIndex: number, toIndex: number) => void;
+}
+interface ListSlotProps {
+	children?: ChildValue12;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+interface ThemedListComponent {
+	(props: ListRootProps): HTMLElement;
+	Item: (props: ListSlotProps) => HTMLElement;
+	DragHandle: (props: ListSlotProps) => HTMLElement;
+	reorder: <T>(arr: readonly T[], from: number, to: number) => T[];
+}
+import { ChildValue as ChildValue13 } from "@vertz/ui";
 interface MenubarRootProps {
 	onSelect?: (value: string) => void;
-	children?: ChildValue12;
+	children?: ChildValue13;
 }
 interface MenubarMenuProps {
 	value: string;
-	children?: ChildValue12;
+	children?: ChildValue13;
 }
 interface MenubarSlotProps {
-	children?: ChildValue12;
+	children?: ChildValue13;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
 }
 interface MenubarItemProps {
 	value: string;
-	children?: ChildValue12;
+	children?: ChildValue13;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
 }
 interface MenubarGroupProps {
 	label: string;
-	children?: ChildValue12;
+	children?: ChildValue13;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
 }
 interface MenubarLabelProps {
-	children?: ChildValue12;
+	children?: ChildValue13;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
@@ -380,26 +403,26 @@ interface ThemedMenubarComponent {
 	Label: (props: MenubarLabelProps) => HTMLElement;
 	Separator: (props: MenubarSlotProps) => HTMLElement;
 }
-import { ChildValue as ChildValue13 } from "@vertz/ui";
+import { ChildValue as ChildValue14 } from "@vertz/ui";
 interface NavigationMenuRootProps {
 	orientation?: "horizontal" | "vertical";
 	delayOpen?: number;
 	delayClose?: number;
-	children?: ChildValue13;
+	children?: ChildValue14;
 }
 interface NavigationMenuSlotProps {
-	children?: ChildValue13;
+	children?: ChildValue14;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
 }
 interface NavigationMenuItemProps {
 	value: string;
-	children?: ChildValue13;
+	children?: ChildValue14;
 }
 interface NavigationMenuLinkProps {
 	href: string;
-	children?: ChildValue13;
+	children?: ChildValue14;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
@@ -418,13 +441,13 @@ interface ThemedNavigationMenuComponent {
 	Link: (props: NavigationMenuLinkProps) => HTMLElement;
 	Viewport: (props: NavigationMenuViewportProps) => HTMLElement;
 }
-import { ChildValue as ChildValue14 } from "@vertz/ui";
+import { ChildValue as ChildValue15 } from "@vertz/ui";
 interface PopoverRootProps {
 	onOpenChange?: (open: boolean) => void;
-	children?: ChildValue14;
+	children?: ChildValue15;
 }
 interface PopoverSlotProps {
-	children?: ChildValue14;
+	children?: ChildValue15;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
@@ -434,30 +457,30 @@ interface ThemedPopoverComponent {
 	Trigger: (props: PopoverSlotProps) => HTMLElement;
 	Content: (props: PopoverSlotProps) => HTMLElement;
 }
-import { ChildValue as ChildValue15 } from "@vertz/ui";
+import { ChildValue as ChildValue16 } from "@vertz/ui";
 interface ProgressRootProps {
-	children?: ChildValue15;
+	children?: ChildValue16;
 	defaultValue?: number;
 	min?: number;
 	max?: number;
 }
 type ThemedProgressComponent = (props: ProgressRootProps) => HTMLElement;
-import { ChildValue as ChildValue16 } from "@vertz/ui";
+import { ChildValue as ChildValue17 } from "@vertz/ui";
 interface RadioGroupRootProps {
-	children?: ChildValue16;
+	children?: ChildValue17;
 	defaultValue?: string;
 	onValueChange?: (value: string) => void;
 }
 interface RadioGroupItemProps {
 	value: string;
 	disabled?: boolean;
-	children?: ChildValue16;
+	children?: ChildValue17;
 }
 interface ThemedRadioGroupComponent {
 	(props: RadioGroupRootProps): HTMLElement;
 	Item: (props: RadioGroupItemProps) => HTMLElement;
 }
-import { ChildValue as ChildValue17 } from "@vertz/ui";
+import { ChildValue as ChildValue18 } from "@vertz/ui";
 import { PanelOptions } from "@vertz/ui-primitives";
 interface ResizablePanelStyleClasses {
 	readonly root: string;
@@ -467,10 +490,10 @@ interface ResizablePanelStyleClasses {
 interface ResizablePanelRootProps {
 	orientation?: "horizontal" | "vertical";
 	onResize?: (sizes: number[]) => void;
-	children?: ChildValue17;
+	children?: ChildValue18;
 }
 interface ResizablePanelPanelProps extends PanelOptions {
-	children?: ChildValue17;
+	children?: ChildValue18;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
@@ -486,35 +509,35 @@ interface ThemedResizablePanelComponent {
 	Handle: (props: ResizablePanelHandleProps) => HTMLElement;
 }
 declare function createThemedResizablePanel(styles: ResizablePanelStyleClasses): ThemedResizablePanelComponent;
-import { ChildValue as ChildValue18 } from "@vertz/ui";
+import { ChildValue as ChildValue19 } from "@vertz/ui";
 interface ScrollAreaRootProps {
 	orientation?: "vertical" | "horizontal" | "both";
-	children?: ChildValue18;
+	children?: ChildValue19;
 }
 type ThemedScrollAreaComponent = (props: ScrollAreaRootProps) => HTMLElement;
-import { ChildValue as ChildValue19 } from "@vertz/ui";
+import { ChildValue as ChildValue20 } from "@vertz/ui";
 interface SelectRootProps {
 	defaultValue?: string;
 	placeholder?: string;
 	onValueChange?: (value: string) => void;
-	children?: ChildValue19;
+	children?: ChildValue20;
 }
 interface SelectSlotProps {
-	children?: ChildValue19;
+	children?: ChildValue20;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
 }
 interface SelectItemProps {
 	value: string;
-	children?: ChildValue19;
+	children?: ChildValue20;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
 }
 interface SelectGroupProps {
 	label: string;
-	children?: ChildValue19;
+	children?: ChildValue20;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
@@ -527,15 +550,15 @@ interface ThemedSelectComponent {
 	Group: (props: SelectGroupProps) => HTMLElement;
 	Separator: (props: SelectSlotProps) => HTMLElement;
 }
-import { ChildValue as ChildValue20 } from "@vertz/ui";
+import { ChildValue as ChildValue21 } from "@vertz/ui";
 import { SheetSide as SheetSide2 } from "@vertz/ui-primitives";
 interface SheetRootProps {
 	side?: SheetSide2;
 	onOpenChange?: (open: boolean) => void;
-	children?: ChildValue20;
+	children?: ChildValue21;
 }
 interface SheetSlotProps {
-	children?: ChildValue20;
+	children?: ChildValue21;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
@@ -551,9 +574,9 @@ interface ThemedSheetComponent {
 	Description: (props: SheetSlotProps) => HTMLElement;
 	Close: (props: SheetSlotProps) => HTMLElement;
 }
-import { ChildValue as ChildValue21 } from "@vertz/ui";
+import { ChildValue as ChildValue22 } from "@vertz/ui";
 interface SliderRootProps {
-	children?: ChildValue21;
+	children?: ChildValue22;
 	defaultValue?: number;
 	min?: number;
 	max?: number;
@@ -562,37 +585,37 @@ interface SliderRootProps {
 	onValueChange?: (value: number) => void;
 }
 type ThemedSliderComponent = (props: SliderRootProps) => HTMLElement;
-import { ChildValue as ChildValue22 } from "@vertz/ui";
+import { ChildValue as ChildValue23 } from "@vertz/ui";
 interface ThemedSwitchProps {
-	children?: ChildValue22;
+	children?: ChildValue23;
 	defaultChecked?: boolean;
 	disabled?: boolean;
 	onCheckedChange?: (checked: boolean) => void;
 	size?: "default" | "sm";
 }
 type ThemedSwitchComponent = (props: ThemedSwitchProps) => HTMLElement;
-import { ChildValue as ChildValue23 } from "@vertz/ui";
+import { ChildValue as ChildValue24 } from "@vertz/ui";
 interface TabsRootProps {
 	defaultValue?: string;
 	variant?: "default" | "line";
-	children?: ChildValue23;
+	children?: ChildValue24;
 }
 interface TabsSlotProps {
-	children?: ChildValue23;
+	children?: ChildValue24;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
 }
 interface TabsTriggerProps {
 	value: string;
-	children?: ChildValue23;
+	children?: ChildValue24;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
 }
 interface TabsContentProps {
 	value: string;
-	children?: ChildValue23;
+	children?: ChildValue24;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
@@ -609,17 +632,17 @@ type ThemedToastResult = ToastElements & {
 	announce: (content: string) => ToastMessage;
 	dismiss: (id: string) => void;
 };
-import { ChildValue as ChildValue24 } from "@vertz/ui";
+import { ChildValue as ChildValue25 } from "@vertz/ui";
 interface ToggleRootProps {
-	children?: ChildValue24;
+	children?: ChildValue25;
 	defaultPressed?: boolean;
 	disabled?: boolean;
 	onPressedChange?: (pressed: boolean) => void;
 }
 type ThemedToggleComponent = (props: ToggleRootProps) => HTMLElement;
-import { ChildValue as ChildValue25 } from "@vertz/ui";
+import { ChildValue as ChildValue26 } from "@vertz/ui";
 interface ToggleGroupRootProps {
-	children?: ChildValue25;
+	children?: ChildValue26;
 	type?: "single" | "multiple";
 	defaultValue?: string[];
 	orientation?: "horizontal" | "vertical";
@@ -628,19 +651,19 @@ interface ToggleGroupRootProps {
 }
 interface ToggleGroupItemProps {
 	value: string;
-	children?: ChildValue25;
+	children?: ChildValue26;
 }
 interface ThemedToggleGroupComponent {
 	(props: ToggleGroupRootProps): HTMLElement;
 	Item: (props: ToggleGroupItemProps) => HTMLElement;
 }
-import { ChildValue as ChildValue26 } from "@vertz/ui";
+import { ChildValue as ChildValue27 } from "@vertz/ui";
 interface TooltipRootProps {
 	delay?: number;
-	children?: ChildValue26;
+	children?: ChildValue27;
 }
 interface TooltipSlotProps {
-	children?: ChildValue26;
+	children?: ChildValue27;
 	className?: string;
 	/** @deprecated Use `className` instead. */
 	class?: string;
@@ -746,69 +769,77 @@ type HoverCardBlocks = {
 /** Create hover card css() styles. */
 declare function createHoverCardStyles(): CSSOutput18<HoverCardBlocks>;
 import { CSSOutput as CSSOutput21, StyleEntry as StyleEntry21 } from "@vertz/ui";
-type MenubarBlocks = {
+type ListBlocks = {
 	root: StyleEntry21[];
-	trigger: StyleEntry21[];
-	content: StyleEntry21[];
 	item: StyleEntry21[];
-	separator: StyleEntry21[];
-	label: StyleEntry21[];
+	dragHandle: StyleEntry21[];
 };
-/** Create menubar css() styles. */
-declare function createMenubarStyles(): CSSOutput21<MenubarBlocks>;
+/** Create list css() styles. */
+declare function createListStyles(): CSSOutput21<ListBlocks>;
 import { CSSOutput as CSSOutput22, StyleEntry as StyleEntry22 } from "@vertz/ui";
-type NavigationMenuBlocks = {
+type MenubarBlocks = {
 	root: StyleEntry22[];
-	list: StyleEntry22[];
 	trigger: StyleEntry22[];
 	content: StyleEntry22[];
-	link: StyleEntry22[];
-	viewport: StyleEntry22[];
+	item: StyleEntry22[];
+	separator: StyleEntry22[];
+	label: StyleEntry22[];
 };
-/** Create navigation menu css() styles. */
-declare function createNavigationMenuStyles(): CSSOutput22<NavigationMenuBlocks>;
+/** Create menubar css() styles. */
+declare function createMenubarStyles(): CSSOutput22<MenubarBlocks>;
 import { CSSOutput as CSSOutput23, StyleEntry as StyleEntry23 } from "@vertz/ui";
-type PaginationBlocks = {
-	nav: StyleEntry23[];
+type NavigationMenuBlocks = {
+	root: StyleEntry23[];
 	list: StyleEntry23[];
-	item: StyleEntry23[];
+	trigger: StyleEntry23[];
+	content: StyleEntry23[];
 	link: StyleEntry23[];
-	linkActive: StyleEntry23[];
-	navButton: StyleEntry23[];
-	ellipsis: StyleEntry23[];
+	viewport: StyleEntry23[];
+};
+/** Create navigation menu css() styles. */
+declare function createNavigationMenuStyles(): CSSOutput23<NavigationMenuBlocks>;
+import { CSSOutput as CSSOutput24, StyleEntry as StyleEntry24 } from "@vertz/ui";
+type PaginationBlocks = {
+	nav: StyleEntry24[];
+	list: StyleEntry24[];
+	item: StyleEntry24[];
+	link: StyleEntry24[];
+	linkActive: StyleEntry24[];
+	navButton: StyleEntry24[];
+	ellipsis: StyleEntry24[];
 };
 /** Create pagination css() styles. */
-declare function createPaginationStyles(): CSSOutput23<PaginationBlocks>;
-import { CSSOutput as CSSOutput27, StyleEntry as StyleEntry27 } from "@vertz/ui";
+declare function createPaginationStyles(): CSSOutput24<PaginationBlocks>;
+import { CSSOutput as CSSOutput28, StyleEntry as StyleEntry28 } from "@vertz/ui";
 type ResizablePanelBlocks = {
-	root: StyleEntry27[];
-	panel: StyleEntry27[];
-	handle: StyleEntry27[];
+	root: StyleEntry28[];
+	panel: StyleEntry28[];
+	handle: StyleEntry28[];
 };
 /** Create resizable panel css() styles following shadcn conventions. */
-declare function createResizablePanelStyles(): CSSOutput27<ResizablePanelBlocks>;
-import { CSSOutput as CSSOutput28, StyleEntry as StyleEntry28 } from "@vertz/ui";
+declare function createResizablePanelStyles(): CSSOutput28<ResizablePanelBlocks>;
+import { CSSOutput as CSSOutput29, StyleEntry as StyleEntry29 } from "@vertz/ui";
 type ScrollAreaBlocks = {
-	root: StyleEntry28[];
-	viewport: StyleEntry28[];
-	scrollbar: StyleEntry28[];
-	thumb: StyleEntry28[];
+	root: StyleEntry29[];
+	viewport: StyleEntry29[];
+	scrollbar: StyleEntry29[];
+	thumb: StyleEntry29[];
 };
 /** Create scroll-area css() styles following shadcn conventions. */
-declare function createScrollAreaStyles(): CSSOutput28<ScrollAreaBlocks>;
-import { CSSOutput as CSSOutput39, StyleEntry as StyleEntry39 } from "@vertz/ui";
+declare function createScrollAreaStyles(): CSSOutput29<ScrollAreaBlocks>;
+import { CSSOutput as CSSOutput40, StyleEntry as StyleEntry40 } from "@vertz/ui";
 type ToggleBlocks = {
-	root: StyleEntry39[];
+	root: StyleEntry40[];
 };
 /** Create toggle css() styles. */
-declare function createToggleStyles(): CSSOutput39<ToggleBlocks>;
-import { CSSOutput as CSSOutput40, StyleEntry as StyleEntry40 } from "@vertz/ui";
+declare function createToggleStyles(): CSSOutput40<ToggleBlocks>;
+import { CSSOutput as CSSOutput41, StyleEntry as StyleEntry41 } from "@vertz/ui";
 type ToggleGroupBlocks = {
-	root: StyleEntry40[];
-	item: StyleEntry40[];
+	root: StyleEntry41[];
+	item: StyleEntry41[];
 };
 /** Create toggle group css() styles. */
-declare function createToggleGroupStyles(): CSSOutput40<ToggleGroupBlocks>;
+declare function createToggleGroupStyles(): CSSOutput41<ToggleGroupBlocks>;
 /** Pre-built style definitions returned by configureTheme(). */
 interface ThemeStyles {
 	/** Button variant function: `button({ intent: 'primary', size: 'md' })` */
@@ -1039,6 +1070,8 @@ interface ThemeStyles {
 	drawer: ReturnType<typeof createDrawerStyles>;
 	/** HoverCard css() styles. */
 	hoverCard: ReturnType<typeof createHoverCardStyles>;
+	/** List css() styles. */
+	list: ReturnType<typeof createListStyles>;
 	/** Menubar css() styles. */
 	menubar: ReturnType<typeof createMenubarStyles>;
 	/** NavigationMenu css() styles. */
@@ -1100,6 +1133,8 @@ interface ThemedPrimitives {
 	Drawer: ThemedDrawerComponent;
 	/** Themed HoverCard — hover-triggered interactive card. */
 	HoverCard: ThemedHoverCardComponent;
+	/** Themed List — compound component with List.Item and List.DragHandle. */
+	List: ThemedListComponent;
 	/** Themed Menubar — composable JSX component with Menubar.Menu, Menubar.Trigger, Menubar.Content, etc. */
 	Menubar: ThemedMenubarComponent;
 	/** Themed NavigationMenu — composable JSX component with NavigationMenu.List, NavigationMenu.Item, etc. */
@@ -1223,6 +1258,7 @@ declare module "@vertz/ui/components" {
 		Slider: ThemedSliderComponent;
 		Toggle: ThemedToggleComponent;
 		Toast: ThemedPrimitives["Toast"];
+		List: ThemedListComponent;
 		Carousel: ThemedCarouselComponent;
 		Command: ThemedCommandComponent;
 		Collapsible: ThemedCollapsibleComponent;

package/dist/index.js

@@ -28,7 +28,7 @@ import {
   ComposedSkeleton,
   ComposedTable,
   ComposedTextarea,
-  withStyles as withStyles18
+  withStyles as withStyles19
 } from "@vertz/ui-primitives";
 
 // src/components/primitives/accordion.ts
@@ -410,10 +410,41 @@ function createThemedHoverCard(styles) {
   });
 }
 
+// src/components/primitives/list.ts
+import { ComposedList, withStyles as withStyles8 } from "@vertz/ui-primitives";
+function createThemedList(styles) {
+  const StyledList = withStyles8(ComposedList, {
+    root: styles.root,
+    item: styles.item,
+    dragHandle: styles.dragHandle
+  });
+  function ListRoot({
+    children,
+    className,
+    class: classProp,
+    animate,
+    sortable,
+    onReorder
+  }) {
+    return StyledList({
+      children,
+      className: className ?? classProp,
+      animate,
+      sortable,
+      onReorder
+    });
+  }
+  return Object.assign(ListRoot, {
+    Item: ComposedList.Item,
+    DragHandle: ComposedList.DragHandle,
+    reorder: ComposedList.reorder
+  });
+}
+
 // src/components/primitives/menubar.ts
-import { ComposedMenubar, withStyles as withStyles8 } from "@vertz/ui-primitives";
+import { ComposedMenubar, withStyles as withStyles9 } from "@vertz/ui-primitives";
 function createThemedMenubar(styles) {
-  const Styled = withStyles8(ComposedMenubar, {
+  const Styled = withStyles9(ComposedMenubar, {
     root: styles.root,
     trigger: styles.trigger,
     content: styles.content,
@@ -437,9 +468,9 @@ function createThemedMenubar(styles) {
 }
 
 // src/components/primitives/navigation-menu.tsx
-import { ComposedNavigationMenu, withStyles as withStyles9 } from "@vertz/ui-primitives";
+import { ComposedNavigationMenu, withStyles as withStyles10 } from "@vertz/ui-primitives";
 function createThemedNavigationMenu(styles) {
-  const Styled = withStyles9(ComposedNavigationMenu, {
+  const Styled = withStyles10(ComposedNavigationMenu, {
     root: styles.root,
     list: styles.list,
     trigger: styles.trigger,
@@ -471,9 +502,9 @@ function createThemedNavigationMenu(styles) {
 }
 
 // src/components/primitives/popover.ts
-import { ComposedPopover, withStyles as withStyles10 } from "@vertz/ui-primitives";
+import { ComposedPopover, withStyles as withStyles11 } from "@vertz/ui-primitives";
 function createThemedPopover(styles) {
-  const StyledPopover = withStyles10(ComposedPopover, {
+  const StyledPopover = withStyles11(ComposedPopover, {
     content: styles.content
   });
   function PopoverRoot({ children, onOpenChange }) {
@@ -497,9 +528,9 @@ function createThemedProgress(styles) {
 }
 
 // src/components/primitives/radio-group.ts
-import { ComposedRadioGroup, withStyles as withStyles11 } from "@vertz/ui-primitives";
+import { ComposedRadioGroup, withStyles as withStyles12 } from "@vertz/ui-primitives";
 function createThemedRadioGroup(styles) {
-  const StyledRadioGroup = withStyles11(ComposedRadioGroup, {
+  const StyledRadioGroup = withStyles12(ComposedRadioGroup, {
     root: styles.root,
     item: styles.item,
     indicator: styles.indicator,
@@ -557,9 +588,9 @@ function createThemedScrollArea(styles) {
 }
 
 // src/components/primitives/select.ts
-import { ComposedSelect, withStyles as withStyles12 } from "@vertz/ui-primitives";
+import { ComposedSelect, withStyles as withStyles13 } from "@vertz/ui-primitives";
 function createThemedSelect(styles) {
-  const StyledSelect = withStyles12(ComposedSelect, {
+  const StyledSelect = withStyles13(ComposedSelect, {
     trigger: styles.trigger,
     content: styles.content,
     item: styles.item,
@@ -641,13 +672,13 @@ function createThemedSlider(styles) {
 }
 
 // src/components/primitives/switch.ts
-import { ComposedSwitch, withStyles as withStyles13 } from "@vertz/ui-primitives";
+import { ComposedSwitch, withStyles as withStyles14 } from "@vertz/ui-primitives";
 function createThemedSwitch(styles) {
-  const DefaultSwitch = withStyles13(ComposedSwitch, {
+  const DefaultSwitch = withStyles14(ComposedSwitch, {
     root: styles.root,
     thumb: styles.thumb
   });
-  const SmSwitch = withStyles13(ComposedSwitch, {
+  const SmSwitch = withStyles14(ComposedSwitch, {
     root: styles.rootSm,
     thumb: styles.thumbSm
   });
@@ -658,14 +689,14 @@ function createThemedSwitch(styles) {
 }
 
 // src/components/primitives/tabs.ts
-import { ComposedTabs, withStyles as withStyles14 } from "@vertz/ui-primitives";
+import { ComposedTabs, withStyles as withStyles15 } from "@vertz/ui-primitives";
 function createThemedTabs(styles) {
-  const DefaultTabs = withStyles14(ComposedTabs, {
+  const DefaultTabs = withStyles15(ComposedTabs, {
     list: styles.list,
     trigger: styles.trigger,
     panel: styles.panel
   });
-  const LineTabs = withStyles14(ComposedTabs, {
+  const LineTabs = withStyles15(ComposedTabs, {
     list: styles.listLine,
     trigger: styles.triggerLine,
     panel: styles.panel
@@ -698,9 +729,9 @@ function createThemedToast(styles) {
 }
 
 // src/components/primitives/toggle.ts
-import { ComposedToggle, withStyles as withStyles15 } from "@vertz/ui-primitives";
+import { ComposedToggle, withStyles as withStyles16 } from "@vertz/ui-primitives";
 function createThemedToggle(styles) {
-  const StyledToggle = withStyles15(ComposedToggle, {
+  const StyledToggle = withStyles16(ComposedToggle, {
     root: styles.root
   });
   return function ToggleRoot(props) {
@@ -709,9 +740,9 @@ function createThemedToggle(styles) {
 }
 
 // src/components/primitives/toggle-group.tsx
-import { ComposedToggleGroup, withStyles as withStyles16 } from "@vertz/ui-primitives";
+import { ComposedToggleGroup, withStyles as withStyles17 } from "@vertz/ui-primitives";
 function createThemedToggleGroup(styles) {
-  const StyledToggleGroup = withStyles16(ComposedToggleGroup, {
+  const StyledToggleGroup = withStyles17(ComposedToggleGroup, {
     root: styles.root,
     item: styles.item
   });
@@ -724,9 +755,9 @@ function createThemedToggleGroup(styles) {
 }
 
 // src/components/primitives/tooltip.ts
-import { ComposedTooltip, withStyles as withStyles17 } from "@vertz/ui-primitives";
+import { ComposedTooltip, withStyles as withStyles18 } from "@vertz/ui-primitives";
 function createThemedTooltip(styles) {
-  const StyledTooltip = withStyles17(ComposedTooltip, {
+  const StyledTooltip = withStyles18(ComposedTooltip, {
     content: styles.content
   });
   function TooltipRoot({ children, delay }) {
@@ -777,7 +808,9 @@ function createAccordionStyles() {
       "text:sm",
       "text:muted-foreground",
       {
-        '&[data-state="open"]': [animationDecl(`${accordionDown} 200ms ease-out forwards`)]
+        '&[data-state="open"]:not([data-initial])': [
+          animationDecl(`${accordionDown} 200ms ease-out forwards`)
+        ]
       },
       {
         '&[data-state="closed"]': [animationDecl(`${accordionUp} 200ms ease-out forwards`)]
@@ -2252,10 +2285,77 @@ function createLabel() {
     css: s.css
   };
 }
+// src/styles/list.ts
+import { css as css21, keyframes as keyframes2 } from "@vertz/ui";
+var listEnter = keyframes2("vz-list-enter", {
+  from: { opacity: "0", transform: "translateY(-0.5rem)" },
+  to: { opacity: "1", transform: "translateY(0)" }
+});
+function createListStyles() {
+  const s = css21({
+    listRoot: [
+      "flex",
+      "flex-col",
+      "gap:0",
+      {
+        "&": {
+          "list-style": "none",
+          margin: "0",
+          padding: "0",
+          position: "relative"
+        }
+      }
+    ],
+    listItem: [
+      "flex",
+      "items:center",
+      "gap:2",
+      "px:3",
+      "py:2",
+      "border-b:1",
+      "border:border",
+      "text:sm",
+      "text:foreground",
+      { "&:last-child": { "border-bottom": "0" } },
+      {
+        "&[data-dragging]": {
+          position: "relative",
+          "z-index": "50",
+          "box-shadow": "0 4px 12px rgba(0,0,0,0.15)",
+          "background-color": "var(--color-background)",
+          opacity: "1"
+        }
+      },
+      { '&[data-presence="enter"]': [animationDecl(`${listEnter} 200ms ease-out`)] },
+      {
+        '&[data-presence="exit"]': [{ overflow: "hidden", "pointer-events": "none" }]
+      }
+    ],
+    listDragHandle: [
+      "flex",
+      "items:center",
+      "text:muted-foreground",
+      {
+        "&": {
+          cursor: "grab",
+          "touch-action": "none",
+          "user-select": "none"
+        },
+        "&:active": { cursor: "grabbing" }
+      }
+    ]
+  });
+  return {
+    root: s.listRoot,
+    item: s.listItem,
+    dragHandle: s.listDragHandle,
+    css: s.css
+  };
+}
 // src/styles/menubar.ts
-import { css as css21 } from "@vertz/ui";
+import { css as css22 } from "@vertz/ui";
 function createMenubarStyles() {
-  const s = css21({
+  const s = css22({
     mbRoot: [
       "flex",
       "h:9",
@@ -2328,9 +2428,9 @@ function createMenubarStyles() {
   };
 }
 // src/styles/navigation-menu.ts
-import { css as css22 } from "@vertz/ui";
+import { css as css23 } from "@vertz/ui";
 function createNavigationMenuStyles() {
-  const s = css22({
+  const s = css23({
     navRoot: ["relative", "z:10"],
     navList: ["flex", "items:center", "gap:1"],
     navTrigger: [
@@ -2403,7 +2503,7 @@ function createNavigationMenuStyles() {
   };
 }
 // src/styles/pagination.ts
-import { css as css23 } from "@vertz/ui";
+import { css as css24 } from "@vertz/ui";
 var focusRing7 = {
   "&:focus-visible": [
     "outline-none",
@@ -2414,7 +2514,7 @@ var focusRing7 = {
   ]
 };
 function createPaginationStyles() {
-  const s = css23({
+  const s = css24({
     paginationNav: [
       "flex",
       "justify:center",
@@ -2534,9 +2634,9 @@ function createPaginationStyles() {
   };
 }
 // src/styles/popover.ts
-import { css as css24 } from "@vertz/ui";
+import { css as css25 } from "@vertz/ui";
 function createPopoverStyles() {
-  const s = css24({
+  const s = css25({
     popoverContent: [
       "z:50",
       "overflow-hidden",
@@ -2568,9 +2668,9 @@ function createPopoverStyles() {
   };
 }
 // src/styles/progress.ts
-import { css as css25 } from "@vertz/ui";
+import { css as css26 } from "@vertz/ui";
 function createProgressStyles() {
-  const s = css25({
+  const s = css26({
     progressRoot: [
       "relative",
       "w:full",
@@ -2588,7 +2688,7 @@ function createProgressStyles() {
   };
 }
 // src/styles/radio-group.ts
-import { css as css26 } from "@vertz/ui";
+import { css as css27 } from "@vertz/ui";
 var focusRing8 = {
   "&:focus-visible": [
     "outline-none",
@@ -2599,7 +2699,7 @@ var focusRing8 = {
   ]
 };
 function createRadioGroupStyles() {
-  const s = css26({
+  const s = css27({
     radioGroupRoot: ["grid", "gap:2"],
     radioGroupItem: [
       "flex",
@@ -2664,7 +2764,7 @@ function createRadioGroupStyles() {
   };
 }
 // src/styles/resizable-panel.ts
-import { css as css27 } from "@vertz/ui";
+import { css as css28 } from "@vertz/ui";
 var focusRing9 = {
   "&:focus-visible": [
     "outline-none",
@@ -2675,7 +2775,7 @@ var focusRing9 = {
   ]
 };
 function createResizablePanelStyles() {
-  const s = css27({
+  const s = css28({
     resizableRoot: ["flex", "h:full", "w:full"],
     resizablePanel: ["overflow-hidden", { "&": [{ "white-space": "nowrap" }] }],
     resizableHandle: [
@@ -2713,9 +2813,9 @@ function createResizablePanelStyles() {
   };
 }
 // src/styles/scroll-area.ts
-import { css as css28 } from "@vertz/ui";
+import { css as css29 } from "@vertz/ui";
 function createScrollAreaStyles() {
-  const s = css28({
+  const s = css29({
     scrollAreaRoot: ["relative", "overflow-hidden"],
     scrollAreaViewport: ["h:full", "w:full", { "&": { "border-radius": "inherit" } }],
     scrollAreaScrollbar: [
@@ -2756,7 +2856,7 @@ function createScrollAreaStyles() {
   };
 }
 // src/styles/select.ts
-import { css as css29 } from "@vertz/ui";
+import { css as css30 } from "@vertz/ui";
 var focusRing10 = {
   "&:focus-visible": [
     "outline-none",
@@ -2767,7 +2867,7 @@ var focusRing10 = {
   ]
 };
 function createSelectStyles() {
-  const s = css29({
+  const s = css30({
     selectTrigger: [
       "flex",
       "w:full",
@@ -2900,9 +3000,9 @@ function createSelectStyles() {
   };
 }
 // src/styles/separator.ts
-import { css as css30 } from "@vertz/ui";
+import { css as css31 } from "@vertz/ui";
 function createSeparator() {
-  const s = css30({
+  const s = css31({
     separatorBase: ["bg:border", "shrink-0"],
     separatorHorizontal: ["w:full", { "&": { height: "1px" } }],
     separatorVertical: [
@@ -2922,7 +3022,7 @@ function createSeparator() {
   };
 }
 // src/styles/sheet.ts
-import { css as css31 } from "@vertz/ui";
+import { css as css32 } from "@vertz/ui";
 var focusRing11 = {
   "&:focus-visible": [
     "outline-none",
@@ -2944,7 +3044,7 @@ var PANEL_BASE2 = [
   "text:sm"
 ];
 function createSheetStyles() {
-  const s = css31({
+  const s = css32({
     sheetOverlay: [
       "fixed",
       "inset:0",
@@ -3138,8 +3238,8 @@ function createSheetStyles() {
   };
 }
 // src/styles/skeleton.ts
-import { css as css32, keyframes as keyframes2 } from "@vertz/ui";
-var pulse = keyframes2("vz-skeleton-pulse", {
+import { css as css33, keyframes as keyframes3 } from "@vertz/ui";
+var pulse = keyframes3("vz-skeleton-pulse", {
   "0%, 100%": { opacity: "1" },
   "50%": { opacity: "0.5" }
 });
@@ -3149,7 +3249,7 @@ var skeletonBase = [
   { "&": { animation: `${pulse} 2s ease-in-out infinite` } }
 ];
 function createSkeletonStyles() {
-  return css32({
+  return css33({
     root: [...skeletonBase],
     textRoot: ["flex", "flex-col"],
     textLine: [...skeletonBase, "h:4"],
@@ -3157,12 +3257,12 @@ function createSkeletonStyles() {
   });
 }
 // src/styles/slider.ts
-import { css as css33 } from "@vertz/ui";
+import { css as css34 } from "@vertz/ui";
 var ringStyle = {
   "box-shadow": "0 0 0 3px color-mix(in oklch, var(--color-ring) 50%, transparent)"
 };
 function createSliderStyles() {
-  const s = css33({
+  const s = css34({
     sliderRoot: [
       "relative",
       "flex",
@@ -3233,7 +3333,7 @@ function createSliderStyles() {
   };
 }
 // src/styles/switch.ts
-import { css as css34 } from "@vertz/ui";
+import { css as css35 } from "@vertz/ui";
 var focusRing12 = {
   "&:focus-visible": [
     "outline-none",
@@ -3244,7 +3344,7 @@ var focusRing12 = {
   ]
 };
 function createSwitchStyles() {
-  const s = css34({
+  const s = css35({
     switchRoot: [
       "inline-flex",
       "shrink-0",
@@ -3351,9 +3451,9 @@ function createSwitchStyles() {
   };
 }
 // src/styles/table.ts
-import { css as css35 } from "@vertz/ui";
+import { css as css36 } from "@vertz/ui";
 function createTableStyles() {
-  const s = css35({
+  const s = css36({
     tableRoot: [
       "w:full",
       "text:sm",
@@ -3409,9 +3509,9 @@ function createTableStyles() {
   };
 }
 // src/styles/tabs.ts
-import { css as css36 } from "@vertz/ui";
+import { css as css37 } from "@vertz/ui";
 function createTabsStyles() {
-  const s = css36({
+  const s = css37({
     tabsList: [
       "inline-flex",
       "items:center",
@@ -3498,7 +3598,7 @@ function createTabsStyles() {
   };
 }
 // src/styles/textarea.ts
-import { css as css37 } from "@vertz/ui";
+import { css as css38 } from "@vertz/ui";
 function createTextarea() {
   const focusRing13 = {
     "&:focus-visible": [
@@ -3510,7 +3610,7 @@ function createTextarea() {
       { "outline-offset": "2px" }
     ]
   };
-  const s = css37({
+  const s = css38({
     textareaBase: [
       "flex",
       "w:full",
@@ -3541,7 +3641,7 @@ function createTextarea() {
   };
 }
 // src/styles/toast.ts
-import { css as css38 } from "@vertz/ui";
+import { css as css39 } from "@vertz/ui";
 var focusRing13 = {
   "&:focus-visible": [
     "outline-none",
@@ -3552,7 +3652,7 @@ var focusRing13 = {
   ]
 };
 function createToastStyles() {
-  const s = css38({
+  const s = css39({
     toastViewport: [
       "fixed",
       "z:50",
@@ -3632,7 +3732,7 @@ function createToastStyles() {
   };
 }
 // src/styles/toggle.ts
-import { css as css39 } from "@vertz/ui";
+import { css as css40 } from "@vertz/ui";
 var focusRing14 = {
   "&:focus-visible": [
     "outline-none",
@@ -3643,7 +3743,7 @@ var focusRing14 = {
   ]
 };
 function createToggleStyles() {
-  const s = css39({
+  const s = css40({
     toggleRoot: [
       "inline-flex",
       "items:center",
@@ -3670,7 +3770,7 @@ function createToggleStyles() {
   };
 }
 // src/styles/toggle-group.ts
-import { css as css40 } from "@vertz/ui";
+import { css as css41 } from "@vertz/ui";
 var focusRing15 = {
   "&:focus-visible": [
     "outline-none",
@@ -3681,7 +3781,7 @@ var focusRing15 = {
   ]
 };
 function createToggleGroupStyles() {
-  const s = css40({
+  const s = css41({
     toggleGroupRoot: ["inline-flex", "items:center", "gap:1", "rounded:md"],
     toggleGroupItem: [
       "inline-flex",
@@ -3710,9 +3810,9 @@ function createToggleGroupStyles() {
   };
 }
 // src/styles/tooltip.ts
-import { css as css41 } from "@vertz/ui";
+import { css as css42 } from "@vertz/ui";
 function createTooltipStyles() {
-  const s = css41({
+  const s = css42({
     tooltipContent: [
       "z:50",
       "bg:primary",
@@ -3777,6 +3877,7 @@ function configureTheme(config) {
   const datePickerStyles = createDatePickerStyles();
   const drawerStyles = createDrawerStyles();
   const hoverCardStyles = createHoverCardStyles();
+  const listStyles = createListStyles();
   const menubarStyles = createMenubarStyles();
   const navigationMenuStyles = createNavigationMenuStyles();
   const paginationStyles = createPaginationStyles();
@@ -3821,6 +3922,7 @@ function configureTheme(config) {
     datePicker: datePickerStyles,
     drawer: drawerStyles,
     hoverCard: hoverCardStyles,
+    list: listStyles,
     menubar: menubarStyles,
     navigationMenu: navigationMenuStyles,
     pagination: paginationStyles,
@@ -3834,12 +3936,12 @@ function configureTheme(config) {
     green: { backgroundColor: "oklch(0.55 0.15 155)", color: "#fff" },
     yellow: { backgroundColor: "oklch(0.75 0.15 85)", color: "oklch(0.25 0.05 85)" }
   };
-  const DefaultAlert = withStyles18(ComposedAlert, {
+  const DefaultAlert = withStyles19(ComposedAlert, {
     root: alertStyles.root,
     title: alertStyles.title,
     description: alertStyles.description
   });
-  const DestructiveAlert = withStyles18(ComposedAlert, {
+  const DestructiveAlert = withStyles19(ComposedAlert, {
     root: [alertStyles.root, alertStyles.destructive].join(" "),
     title: alertStyles.title,
     description: alertStyles.description
@@ -3858,7 +3960,7 @@ function configureTheme(config) {
       const style = color ? badgeColorInlineStyles[color] : undefined;
       return ComposedBadge({ ...rest, classes: { base: badgeStyles({ color }) }, style });
     },
-    Breadcrumb: withStyles18(ComposedBreadcrumb, {
+    Breadcrumb: withStyles19(ComposedBreadcrumb, {
       nav: breadcrumbStyles.nav,
       list: breadcrumbStyles.list,
       item: breadcrumbStyles.item,
@@ -3866,7 +3968,7 @@ function configureTheme(config) {
       page: breadcrumbStyles.page,
       separator: breadcrumbStyles.separator
     }),
-    Card: withStyles18(ComposedCard, {
+    Card: withStyles19(ComposedCard, {
       root: cardStyles.root,
       header: cardStyles.header,
       title: cardStyles.title,
@@ -3875,9 +3977,9 @@ function configureTheme(config) {
       footer: cardStyles.footer,
       action: cardStyles.action
     }),
-    Input: withStyles18(ComposedInput, { base: inputStyles.base }),
-    Textarea: withStyles18(ComposedTextarea, { base: textareaStyles.base }),
-    Label: withStyles18(ComposedLabel, { base: labelStyles.base }),
+    Input: withStyles19(ComposedInput, { base: inputStyles.base }),
+    Textarea: withStyles19(ComposedTextarea, { base: textareaStyles.base }),
+    Label: withStyles19(ComposedLabel, { base: labelStyles.base }),
     Pagination: (props) => ComposedPagination({
       ...props,
       classes: {
@@ -3890,37 +3992,37 @@ function configureTheme(config) {
         ellipsis: paginationStyles.ellipsis
       }
     }),
-    Separator: withStyles18(ComposedSeparator, {
+    Separator: withStyles19(ComposedSeparator, {
       base: separatorStyles.base,
       horizontal: separatorStyles.horizontal,
       vertical: separatorStyles.vertical
     }),
-    FormGroup: withStyles18(ComposedFormGroup, {
+    FormGroup: withStyles19(ComposedFormGroup, {
       base: formGroupStyles.base,
       error: formGroupStyles.error
     }),
-    Avatar: withStyles18(ComposedAvatar, {
+    Avatar: withStyles19(ComposedAvatar, {
       root: avatarStyles.root,
       image: avatarStyles.image,
       fallback: avatarStyles.fallback
     }),
-    EmptyState: withStyles18(ComposedEmptyState, {
+    EmptyState: withStyles19(ComposedEmptyState, {
       root: emptyStateStyles.root,
       icon: emptyStateStyles.icon,
       title: emptyStateStyles.title,
       description: emptyStateStyles.description,
       action: emptyStateStyles.action
     }),
-    Skeleton: Object.assign(withStyles18(ComposedSkeleton, { root: skeletonStyles.root }), {
-      Text: withStyles18(ComposedSkeleton.Text, {
+    Skeleton: Object.assign(withStyles19(ComposedSkeleton, { root: skeletonStyles.root }), {
+      Text: withStyles19(ComposedSkeleton.Text, {
         root: skeletonStyles.textRoot,
         line: skeletonStyles.textLine
       }),
-      Circle: withStyles18(ComposedSkeleton.Circle, {
+      Circle: withStyles19(ComposedSkeleton.Circle, {
         root: skeletonStyles.circleRoot
       })
     }),
-    Table: withStyles18(ComposedTable, {
+    Table: withStyles19(ComposedTable, {
       root: tableStyles.root,
       header: tableStyles.header,
       body: tableStyles.body,
@@ -3956,6 +4058,7 @@ function configureTheme(config) {
       }),
       Drawer: createThemedDrawer(drawerStyles),
       HoverCard: createThemedHoverCard(hoverCardStyles),
+      List: createThemedList(listStyles),
       Menubar: createThemedMenubar(menubarStyles),
       NavigationMenu: createThemedNavigationMenu(navigationMenuStyles),
       ResizablePanel: createThemedResizablePanel(resizablePanelStyles),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/theme-shadcn",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "type": "module",
   "license": "MIT",
   "description": "Shadcn-inspired theme for Vertz — pre-built style definitions using variants() and css()",
@@ -39,12 +39,12 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@vertz/ui": "^0.2.23",
-    "@vertz/ui-primitives": "^0.2.23"
+    "@vertz/ui": "^0.2.25",
+    "@vertz/ui-primitives": "^0.2.25"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.7.0",
-    "@vertz/ui-compiler": "^0.2.23",
+    "@vertz/ui-compiler": "^0.2.25",
     "bunup": "^0.16.31",
     "happy-dom": "^20.7.0",
     "typescript": "^5.7.0"