@classytic/fluid 0.3.4 → 0.4.0

package/dist/client/core.d.mts

@@ -1,7 +1,7 @@
 import { n as ApiPaginationData, r as ApiPaginationProps, t as ApiPagination } from "../api-pagination-CJ0vR_w6.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as react from "react";
-import { ComponentType, ElementType, HTMLAttributes, ReactNode, RefObject } from "react";
+import { ComponentPropsWithoutRef, ComponentType, ElementType, HTMLAttributes, ReactNode, RefObject } from "react";
 import { LucideIcon, LucideProps } from "lucide-react";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
@@ -1186,32 +1186,28 @@ declare function SimpleTable({
 }: SimpleTableProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/tabs-wrapper.d.ts
-interface TabsWrapperProps {
+type TabPreset = "default" | "line";
+interface TabsWrapperProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> {
   defaultValue?: string;
   value?: string;
   onValueChange?: (value: string) => void;
-  children: ReactNode;
-  className?: string;
+  /** Elements rendered inside TabsList. */
+  triggers: ReactNode;
   listClassName?: string;
-  variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
+  preset?: TabPreset;
+  fullWidth?: boolean;
   orientation?: "horizontal" | "vertical";
   layout?: "default" | "flex" | "sidebar";
 }
 declare const TabsWrapper: react.NamedExoticComponent<TabsWrapperProps>;
-interface TabTriggerProps {
+interface TabTriggerProps extends Omit<ComponentPropsWithoutRef<"button">, "value"> {
   value: string;
-  children: ReactNode;
-  className?: string;
-  variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
   icon?: ReactNode;
   hideTextOnMobile?: boolean;
-  disabled?: boolean;
 }
 declare const TabTrigger: react.NamedExoticComponent<TabTriggerProps>;
-interface TabContentProps {
+interface TabContentProps extends Omit<ComponentPropsWithoutRef<"div">, "value"> {
   value: string;
-  children: ReactNode;
-  className?: string;
   withScrollArea?: boolean;
   scrollAreaClassName?: string;
   padding?: boolean;
@@ -1226,16 +1222,16 @@ interface DynamicTabItem {
   disabled?: boolean;
   hideTextOnMobile?: boolean;
 }
-interface DynamicTabsProps {
+interface DynamicTabsProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> {
   tabs?: DynamicTabItem[];
   defaultValue?: string;
   value?: string;
   onValueChange?: (value: string) => void;
-  variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
+  preset?: TabPreset;
+  fullWidth?: boolean;
+  orientation?: "horizontal" | "vertical";
   layout?: "default" | "flex" | "sidebar";
-  className?: string;
   listClassName?: string;
-  listWrapperClassName?: string;
   contentClassName?: string;
   scrollable?: boolean;
 }
@@ -1611,4 +1607,4 @@ declare function AnimatedCounter({
   as
 }: AnimatedCounterProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
 //#endregion
-export { AccordionSection, type AccordionSectionProps, ActionDropdown, type ActionDropdownItem, type ActionDropdownProps, ActionTooltip, type ActionTooltipProps, type AnimateBaseProps, AnimatedCounter, type AnimatedCounterProps, AnimatedText, type AnimatedTextProps, type Animation, ApiPagination, type ApiPaginationData, type ApiPaginationProps, ButtonTooltip, type ButtonTooltipProps, CardWrapper, type CardWrapperProps, CheckboxDropdown, type CheckboxDropdownProps, ClientSubmitButton, type ClientSubmitButtonProps, CollapsibleCard, type CollapsibleCardProps, CollapsibleSection, type CollapsibleSectionProps, CollapsibleWrapper, type CollapsibleWrapperProps, ConfirmDialog, type ConfirmDialogProps, ConfirmSheet, type ConfirmSheetProps, CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, CopyText, type CopyTextProps, CustomPagination, type CustomPaginationProps, DEFAULT_COUNTRIES, DataCard, type DataCardProps, DeleteConfirmDialog, type DeleteConfirmDialogProps, DetailItem, type DetailItemProps, DetailView, type DetailViewItemData, type DetailViewProps, DialogWrapper, type DialogWrapperProps, type DragHandleProps, DraggableCard, type DraggableCardProps, DropdownWrapper, type DropdownWrapperProps, type DynamicTabItem, DynamicTabs, type DynamicTabsProps, ErrorState, ErrorStateInline, type ErrorStateInlineProps, type ErrorStateProps, FadeIn, FadeInUp, FaqAccordion, type FaqAccordionProps, type FaqItem, FeatureItem, type FeatureItemProps, FeatureList, type FeatureListItem, type FeatureListProps, FormDialog, type FormDialogProps, FormSheet, type FormSheetProps, IconItemMedia, type IconItemMediaProps, IconTooltip, type IconTooltipProps, InfoAlert, type InfoAlertProps, InfoRow, type InfoRowProps, InfoTooltip, type InfoTooltipProps, LoadingCard, type LoadingCardProps, PaginationInfo, type PaginationInfoProps, type PhoneCountry, PhoneInput, type PhoneInputProps, Pill, PillAvatar, PillAvatarGroup, type PillAvatarGroupProps, type PillAvatarProps, PillButton, type PillButtonProps, PillDelta, type PillDeltaProps, PillIcon, type PillIconProps, PillIndicator, type PillIndicatorProps, type PillProps, PillStatus, type PillStatusProps, RadioDropdown, type RadioDropdownProps, ResponsiveSplitLayout, type ResponsiveSplitLayoutProps, ScaleIn, SelectDropdown, type SelectDropdownOption, type SelectDropdownProps, SheetWrapper, type SheetWrapperProps, SimpleTable, type SimpleTableProps, type SlideDirection, SlideIn, type SlideInProps, StaggerChildren, type StaggerChildrenProps, StatsCard, type StatsCardProps, StatusBanner, type StatusBannerProps, type StatusBannerVariant, StepContent, type StepContentProps, Stepper, type StepperProps, type StepperStep, TabContent, type TabContentProps, TabTrigger, type TabTriggerProps, TableWrapper, type TableWrapperColumn, type TableWrapperEmptyState, type TableWrapperProps, TabsWrapper, type TabsWrapperProps, Thumbnail, type ThumbnailProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, TooltipWrapper, type TooltipWrapperProps, type UseInViewOptions, useInView };
+export { AccordionSection, type AccordionSectionProps, ActionDropdown, type ActionDropdownItem, type ActionDropdownProps, ActionTooltip, type ActionTooltipProps, type AnimateBaseProps, AnimatedCounter, type AnimatedCounterProps, AnimatedText, type AnimatedTextProps, type Animation, ApiPagination, type ApiPaginationData, type ApiPaginationProps, ButtonTooltip, type ButtonTooltipProps, CardWrapper, type CardWrapperProps, CheckboxDropdown, type CheckboxDropdownProps, ClientSubmitButton, type ClientSubmitButtonProps, CollapsibleCard, type CollapsibleCardProps, CollapsibleSection, type CollapsibleSectionProps, CollapsibleWrapper, type CollapsibleWrapperProps, ConfirmDialog, type ConfirmDialogProps, ConfirmSheet, type ConfirmSheetProps, CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, CopyText, type CopyTextProps, CustomPagination, type CustomPaginationProps, DEFAULT_COUNTRIES, DataCard, type DataCardProps, DeleteConfirmDialog, type DeleteConfirmDialogProps, DetailItem, type DetailItemProps, DetailView, type DetailViewItemData, type DetailViewProps, DialogWrapper, type DialogWrapperProps, type DragHandleProps, DraggableCard, type DraggableCardProps, DropdownWrapper, type DropdownWrapperProps, type DynamicTabItem, DynamicTabs, type DynamicTabsProps, ErrorState, ErrorStateInline, type ErrorStateInlineProps, type ErrorStateProps, FadeIn, FadeInUp, FaqAccordion, type FaqAccordionProps, type FaqItem, FeatureItem, type FeatureItemProps, FeatureList, type FeatureListItem, type FeatureListProps, FormDialog, type FormDialogProps, FormSheet, type FormSheetProps, IconItemMedia, type IconItemMediaProps, IconTooltip, type IconTooltipProps, InfoAlert, type InfoAlertProps, InfoRow, type InfoRowProps, InfoTooltip, type InfoTooltipProps, LoadingCard, type LoadingCardProps, PaginationInfo, type PaginationInfoProps, type PhoneCountry, PhoneInput, type PhoneInputProps, Pill, PillAvatar, PillAvatarGroup, type PillAvatarGroupProps, type PillAvatarProps, PillButton, type PillButtonProps, PillDelta, type PillDeltaProps, PillIcon, type PillIconProps, PillIndicator, type PillIndicatorProps, type PillProps, PillStatus, type PillStatusProps, RadioDropdown, type RadioDropdownProps, ResponsiveSplitLayout, type ResponsiveSplitLayoutProps, ScaleIn, SelectDropdown, type SelectDropdownOption, type SelectDropdownProps, SheetWrapper, type SheetWrapperProps, SimpleTable, type SimpleTableProps, type SlideDirection, SlideIn, type SlideInProps, StaggerChildren, type StaggerChildrenProps, StatsCard, type StatsCardProps, StatusBanner, type StatusBannerProps, type StatusBannerVariant, StepContent, type StepContentProps, Stepper, type StepperProps, type StepperStep, TabContent, type TabContentProps, type TabPreset, TabTrigger, type TabTriggerProps, TableWrapper, type TableWrapperColumn, type TableWrapperEmptyState, type TableWrapperProps, TabsWrapper, type TabsWrapperProps, Thumbnail, type ThumbnailProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, TooltipWrapper, type TooltipWrapperProps, type UseInViewOptions, useInView };

package/dist/client/core.mjs

@@ -2,20 +2,19 @@
 
 import { t as cn } from "../utils-DQ5SCVoW.mjs";
 import { t as useMediaQuery } from "../use-media-query-BnVNIKT4.mjs";
-import { n as CustomPagination, r as PaginationInfo, t as ApiPagination } from "../api-pagination-DBTE0yk4.mjs";
+import { a as SelectDropdown, c as PaginationInfo, i as RadioDropdown, n as CheckboxDropdown, o as ApiPagination, r as DropdownWrapper, s as CustomPagination, t as ActionDropdown } from "../dropdown-wrapper-B86u9Fri.mjs";
 import { i as ClientSubmitButton, n as FormSheet, r as SheetWrapper, t as ConfirmSheet } from "../sheet-wrapper-C13Y-Q6w.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import * as React$1 from "react";
-import { Children, Fragment as Fragment$1, createElement, isValidElement, memo, useEffect, useMemo, useRef, useState } from "react";
-import { AlertCircle, AlertTriangle, ArrowLeft, ArrowRight, Check, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronUp, ChevronUpIcon, Circle, Copy, Info, Loader2, MinusIcon, MoreHorizontal, RefreshCw, X } from "lucide-react";
+import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, memo, use, useEffect, useMemo, useRef, useState } from "react";
+import { AlertCircle, AlertTriangle, ArrowLeft, ArrowRight, Check, CheckCircle2, ChevronDown, ChevronDownIcon, ChevronUp, ChevronUpIcon, Circle, Copy, Info, Loader2, MinusIcon, RefreshCw, X } from "lucide-react";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { cva } from "class-variance-authority";
 import { Item, ItemContent, ItemDescription } from "@/components/ui/item";
@@ -642,170 +641,6 @@ function FormDialog({ open, onOpenChange, title, description, children, onSubmit
 	});
 }
 
-//#endregion
-//#region src/components/dropdown-wrapper.tsx
-function DropdownWrapper({ trigger, children, align = "end", side = "bottom", sideOffset = 4, className, contentClassName, ...props }) {
-	return /* @__PURE__ */ jsxs(DropdownMenu, {
-		...props,
-		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
-			align,
-			side,
-			sideOffset,
-			className: cn("min-w-[160px]", contentClassName),
-			children
-		})]
-	});
-}
-function ActionDropdown({ items = [], triggerIcon: TriggerIcon = MoreHorizontal, triggerVariant = "ghost", triggerSize = "sm", triggerClassName, triggerLabel, showOnHover = false, align = "end", contentClassName, onOpenChange, stopPropagation = true, ...props }) {
-	const handleTriggerClick = (e) => {
-		if (stopPropagation) e.stopPropagation();
-	};
-	const trigger = /* @__PURE__ */ jsxs(Button, {
-		variant: triggerVariant,
-		size: triggerSize,
-		onClick: handleTriggerClick,
-		className: cn(showOnHover && "opacity-0 group-hover:opacity-100 transition-opacity", triggerClassName),
-		children: [
-			/* @__PURE__ */ jsx(TriggerIcon, { className: "h-4 w-4" }),
-			triggerLabel && /* @__PURE__ */ jsx("span", {
-				className: "ml-2",
-				children: triggerLabel
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Open menu"
-			})
-		]
-	});
-	const handleItemClick = (item) => (e) => {
-		if (stopPropagation) e.stopPropagation();
-		item.onClick?.(e);
-	};
-	return /* @__PURE__ */ jsxs(DropdownMenu, {
-		onOpenChange,
-		...props,
-		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
-			align,
-			className: cn("min-w-[180px]", contentClassName),
-			children: items.map((item, index) => {
-				if (item.hidden) return null;
-				if (item.type === "separator") return /* @__PURE__ */ jsx(DropdownMenuSeparator, {}, item.key || `separator-${index}`);
-				if (item.type === "label") return /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
-					className: item.className,
-					children: item.label
-				}) }, item.key || `label-${index}`);
-				if (item.type === "group") return /* @__PURE__ */ jsx(DropdownMenuGroup, { children: item.items?.map((groupItem, groupIndex) => {
-					if (groupItem.hidden) return null;
-					const GroupItemIcon = groupItem.icon;
-					const groupItemLabel = typeof groupItem.label === "function" ? groupItem.label() : groupItem.label;
-					return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-						onClick: handleItemClick(groupItem),
-						disabled: groupItem.disabled,
-						className: cn(groupItem.variant === "destructive" && "text-destructive focus:text-destructive", groupItem.className),
-						children: [
-							GroupItemIcon && /* @__PURE__ */ jsx(GroupItemIcon, { className: "h-4 w-4" }),
-							/* @__PURE__ */ jsx("span", { children: groupItemLabel }),
-							groupItem.shortcut && /* @__PURE__ */ jsx("span", {
-								className: "ml-auto text-xs tracking-widest text-muted-foreground",
-								children: groupItem.shortcut
-							})
-						]
-					}, groupItem.key || `group-item-${groupIndex}`);
-				}) }, item.key || `group-${index}`);
-				const ItemIcon = item.icon;
-				const displayLabel = typeof item.label === "function" ? item.label() : item.label;
-				return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-					onClick: handleItemClick(item),
-					disabled: item.disabled,
-					className: cn(item.variant === "destructive" && "text-destructive focus:text-destructive", item.className),
-					children: [
-						ItemIcon && /* @__PURE__ */ jsx(ItemIcon, { className: "h-4 w-4" }),
-						/* @__PURE__ */ jsx("span", { children: displayLabel }),
-						item.shortcut && /* @__PURE__ */ jsx("span", {
-							className: "ml-auto text-xs tracking-widest text-muted-foreground",
-							children: item.shortcut
-						})
-					]
-				}, item.key || `item-${index}`);
-			})
-		})]
-	});
-}
-function SelectDropdown({ value, onValueChange, placeholder = "Select option...", options = [], triggerClassName, contentClassName, disabled = false, ...props }) {
-	const selectedOption = options.find((option) => option.value === value);
-	const trigger = /* @__PURE__ */ jsxs(Button, {
-		variant: "outline",
-		disabled,
-		className: cn("w-full justify-between", !selectedOption && "text-muted-foreground", triggerClassName),
-		children: [selectedOption ? selectedOption.label : placeholder, /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
-	});
-	return /* @__PURE__ */ jsxs(DropdownMenu, {
-		...props,
-		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
-			align: "start",
-			className: cn("w-full min-w-(--anchor-width)", contentClassName),
-			children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onClick: () => onValueChange?.(option.value),
-				className: cn("cursor-pointer", value === option.value && "bg-accent"),
-				children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
-			}, option.value))
-		})]
-	});
-}
-function CheckboxDropdown({ values = [], onValuesChange, placeholder = "Select options...", options = [], triggerClassName, contentClassName, disabled = false, showSelectedCount = true, ...props }) {
-	const selectedOptions = options.filter((option) => values.includes(option.value));
-	const displayText = selectedOptions.length > 0 ? showSelectedCount ? `${selectedOptions.length} selected` : selectedOptions.map((opt) => opt.label).join(", ") : placeholder;
-	const trigger = /* @__PURE__ */ jsxs(Button, {
-		variant: "outline",
-		disabled,
-		className: cn("w-full justify-between", selectedOptions.length === 0 && "text-muted-foreground", triggerClassName),
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: displayText
-		}), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
-	});
-	const handleCheckedChange = (optionValue, checked) => {
-		if (checked) onValuesChange?.([...values, optionValue]);
-		else onValuesChange?.(values.filter((value) => value !== optionValue));
-	};
-	return /* @__PURE__ */ jsxs(DropdownMenu, {
-		...props,
-		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
-			align: "start",
-			className: cn("w-full min-w-(--anchor-width)", contentClassName),
-			children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
-				checked: values.includes(option.value),
-				onCheckedChange: (checked) => handleCheckedChange(option.value, checked),
-				children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
-			}, option.value))
-		})]
-	});
-}
-function RadioDropdown({ value, onValueChange, placeholder = "Select option...", options = [], triggerClassName, contentClassName, disabled = false, ...props }) {
-	const selectedOption = options.find((option) => option.value === value);
-	const trigger = /* @__PURE__ */ jsxs(Button, {
-		variant: "outline",
-		disabled,
-		className: cn("w-full justify-between", !selectedOption && "text-muted-foreground", triggerClassName),
-		children: [selectedOption ? selectedOption.label : placeholder, /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
-	});
-	return /* @__PURE__ */ jsxs(DropdownMenu, {
-		...props,
-		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenuContent, {
-			align: "start",
-			className: cn("w-full min-w-(--anchor-width)", contentClassName),
-			children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
-				value,
-				onValueChange,
-				children: options.map((option) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
-					value: option.value,
-					children: [option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4" }), option.label]
-				}, option.value))
-			})
-		})]
-	});
-}
-
 //#endregion
 //#region src/components/error-state.tsx
 /**
@@ -1481,58 +1316,73 @@ function PillAvatarGroup({ children, className, ...props }) {
 
 //#endregion
 //#region src/components/tabs-wrapper.tsx
-const LIST_BASE_CLASS = "flex flex-wrap items-center justify-start gap-1 h-auto rounded-md p-1 shadow-sm transition-colors";
-const LIST_VARIANTS = {
-	default: "border border-border/50 bg-muted/60 backdrop-blur-sm",
-	primary: "border border-primary/30 bg-primary/10",
-	secondary: "border border-secondary/40 bg-secondary/10",
-	outline: "border border-border bg-background",
-	ghost: "border border-transparent bg-transparent shadow-none",
-	underline: "w-full mb-4 rounded-none border-b border-border/60 bg-transparent p-0 shadow-none gap-6"
+const PRESET_VARIANT = {
+	default: "default",
+	line: "line"
 };
-const TRIGGER_VARIANTS = {
-	default: "text-muted-foreground hover:bg-muted/40 hover:text-foreground data-active:bg-background data-active:text-foreground data-active:shadow-sm",
-	primary: "text-primary hover:bg-primary/10 hover:text-primary data-active:bg-primary data-active:text-primary-foreground",
-	secondary: "text-secondary-foreground hover:bg-secondary/10 hover:text-secondary-foreground data-active:bg-secondary data-active:text-secondary-foreground",
-	outline: "text-foreground hover:bg-accent/40 hover:text-accent-foreground data-active:bg-accent data-active:text-accent-foreground",
-	ghost: "text-muted-foreground hover:bg-muted/30 hover:text-foreground data-active:bg-muted data-active:text-foreground",
-	underline: "text-muted-foreground rounded-none px-0 py-2 hover:bg-transparent hover:text-primary border-b-2 border-transparent data-active:border-primary data-active:text-primary data-active:shadow-none"
+const PRESETS = {
+	default: {
+		list: "",
+		trigger: ""
+	},
+	line: {
+		list: [
+			"justify-start p-0 shadow-none flex-nowrap",
+			"group-data-horizontal/tabs:w-full group-data-horizontal/tabs:border-b group-data-horizontal/tabs:border-border/60 group-data-horizontal/tabs:gap-5 group-data-horizontal/tabs:h-auto",
+			"group-data-vertical/tabs:border-r group-data-vertical/tabs:border-border/60 group-data-vertical/tabs:gap-1"
+		].join(" "),
+		trigger: [
+			"flex-initial",
+			"group-data-horizontal/tabs:px-2 group-data-horizontal/tabs:pb-2.5 group-data-horizontal/tabs:pt-1.5",
+			"group-data-vertical/tabs:py-2 group-data-vertical/tabs:px-3",
+			"after:bg-primary",
+			"data-active:text-primary",
+			"dark:data-active:text-primary"
+		].join(" ")
+	}
 };
-const TabsWrapper = memo(function TabsWrapper({ defaultValue, value, onValueChange, children, className, listClassName, variant = "default", orientation = "horizontal", layout = "default", ...props }) {
-	const isFlexLayout = useMemo(() => layout === "flex" || layout === "sidebar", [layout]);
-	const computedClasses = useMemo(() => ({
-		root: cn("w-full", isFlexLayout && "flex-1 flex flex-col", className),
-		list: cn(LIST_BASE_CLASS, isFlexLayout ? "w-full" : "w-fit", !isFlexLayout && variant !== "underline" && "mb-6", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, listClassName)
-	}), [
-		isFlexLayout,
-		className,
-		variant,
+const TabPresetContext = createContext({
+	preset: "default",
+	fullWidth: false
+});
+const TabsWrapper = memo(function TabsWrapper({ defaultValue, value, onValueChange, children, className, triggers, listClassName, preset = "default", fullWidth = false, orientation = "horizontal", layout = "default", ...props }) {
+	const isFlexLayout = layout === "flex" || layout === "sidebar";
+	const rootClassName = useMemo(() => cn("w-full", isFlexLayout && "flex-1 min-h-0", className), [isFlexLayout, className]);
+	const listClass = useMemo(() => cn(PRESETS[preset].list, fullWidth && "w-full", listClassName), [
+		preset,
+		fullWidth,
 		listClassName
 	]);
-	const triggers = [];
-	const panels = [];
-	Children.forEach(children, (child) => {
-		if (isValidElement(child) && child.type === TabContent) panels.push(child);
-		else triggers.push(child);
-	});
-	return /* @__PURE__ */ jsxs(Tabs, {
-		defaultValue,
-		value,
-		onValueChange,
-		orientation,
-		className: computedClasses.root,
-		...props,
-		children: [/* @__PURE__ */ jsx(TabsList, {
-			className: computedClasses.list,
-			children: triggers
-		}), panels]
+	return /* @__PURE__ */ jsx(TabPresetContext, {
+		value: {
+			preset,
+			fullWidth
+		},
+		children: /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue,
+			value,
+			onValueChange,
+			orientation,
+			className: rootClassName,
+			...props,
+			children: [/* @__PURE__ */ jsx(TabsList, {
+				variant: PRESET_VARIANT[preset],
+				className: listClass,
+				children: triggers
+			}), children]
+		})
 	});
 });
-const TabTrigger = memo(function TabTrigger({ value, children, className, variant = "default", icon, hideTextOnMobile = false, disabled = false, ...props }) {
+const TabTrigger = memo(function TabTrigger({ value, children, className, icon, hideTextOnMobile = false, disabled = false, ...props }) {
+	const { preset, fullWidth } = use(TabPresetContext);
 	return /* @__PURE__ */ jsxs(TabsTrigger, {
 		value,
 		disabled,
-		className: useMemo(() => cn("flex items-center gap-2 transition-colors duration-200", TRIGGER_VARIANTS[variant] ?? TRIGGER_VARIANTS.default, className), [variant, className]),
+		className: useMemo(() => cn(PRESETS[preset].trigger, fullWidth && "flex-1", className), [
+			preset,
+			fullWidth,
+			className
+		]),
 		...props,
 		children: [icon, hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
 			className: "hidden sm:inline",
@@ -1561,77 +1411,52 @@ const TabContent = memo(function TabContent({ value, children, className, withSc
 		}) : children
 	});
 });
-const DynamicTabs = memo(function DynamicTabs({ tabs = [], defaultValue, value, onValueChange, variant = "default", layout = "default", className, listClassName, listWrapperClassName, contentClassName, scrollable = false, ...props }) {
-	const isFlexLayout = useMemo(() => layout === "flex" || layout === "sidebar", [layout]);
-	const useSheetDefaults = isFlexLayout && scrollable;
-	const computedClasses = useMemo(() => ({
-		root: cn("w-full", isFlexLayout && "flex-1 flex flex-col min-h-0", className),
-		listWrapper: cn("w-full", useSheetDefaults ? "px-0" : "px-6", listWrapperClassName),
-		flexList: cn("flex flex-wrap items-center justify-center gap-1 h-auto", variant === "underline" ? "rounded-none border-b border-border/60 bg-transparent p-0 shadow-none gap-6" : "rounded-md p-1 shadow-sm backdrop-blur-sm", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, useSheetDefaults && "mb-4 gap-0.5", listClassName),
-		standardList: cn(LIST_BASE_CLASS, variant !== "underline" && "w-fit mb-6", LIST_VARIANTS[variant] ?? LIST_VARIANTS.default, listClassName),
-		contentWrapper: cn(isFlexLayout && "flex-1 min-h-0 overflow-hidden"),
-		flexContent: cn("mt-0 h-full", useSheetDefaults && "px-1", contentClassName),
-		standardContent: cn(isFlexLayout ? "h-full" : "space-y-4 mt-6", contentClassName)
-	}), [
+const DynamicTabs = memo(function DynamicTabs({ tabs = [], defaultValue, value, onValueChange, preset = "default", fullWidth = false, orientation = "horizontal", layout = "default", className, listClassName, contentClassName, scrollable = false, ...props }) {
+	const isFlexLayout = layout === "flex" || layout === "sidebar";
+	const rootClassName = useMemo(() => cn("w-full", isFlexLayout && "flex-1 min-h-0", className), [isFlexLayout, className]);
+	const listClass = useMemo(() => cn(PRESETS[preset].list, fullWidth && "w-full", isFlexLayout && "justify-center", listClassName), [
+		preset,
+		fullWidth,
 		isFlexLayout,
-		useSheetDefaults,
-		className,
-		listWrapperClassName,
-		listClassName,
-		variant,
-		contentClassName
+		listClassName
 	]);
-	return /* @__PURE__ */ jsxs(Tabs, {
-		defaultValue,
-		value,
-		onValueChange,
-		className: computedClasses.root,
-		...props,
-		children: [isFlexLayout ? /* @__PURE__ */ jsx("div", {
-			className: computedClasses.listWrapper,
-			children: /* @__PURE__ */ jsx(TabsList, {
-				className: computedClasses.flexList,
-				children: tabs.map((tab) => /* @__PURE__ */ jsxs(TabTrigger, {
+	const contentClass = useMemo(() => cn(isFlexLayout ? "mt-0 h-full" : "space-y-4 mt-6", contentClassName), [isFlexLayout, contentClassName]);
+	const content = isFlexLayout && scrollable ? /* @__PURE__ */ jsx(ScrollArea, {
+		className: "h-full w-full flex-1 min-h-0",
+		children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+			value: tab.value,
+			className: contentClass,
+			children: tab.content
+		}, tab.value))
+	}) : tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
+		value: tab.value,
+		className: contentClass,
+		children: tab.content
+	}, tab.value));
+	return /* @__PURE__ */ jsx(TabPresetContext, {
+		value: {
+			preset,
+			fullWidth
+		},
+		children: /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue,
+			value,
+			onValueChange,
+			orientation,
+			className: rootClassName,
+			...props,
+			children: [/* @__PURE__ */ jsx(TabsList, {
+				variant: PRESET_VARIANT[preset],
+				className: listClass,
+				children: tabs.map((tab) => /* @__PURE__ */ jsx(TabTrigger, {
 					value: tab.value,
-					variant,
 					disabled: tab.disabled,
-					className: "justify-center px-3 py-2 text-xs sm:text-sm shrink-0",
-					children: [tab.icon, tab.hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
-						className: "hidden sm:inline",
-						children: tab.label
-					}) : tab.label]
-				}, tab.value))
-			})
-		}) : /* @__PURE__ */ jsx(TabsList, {
-			className: computedClasses.standardList,
-			children: tabs.map((tab) => /* @__PURE__ */ jsxs(TabTrigger, {
-				value: tab.value,
-				variant,
-				disabled: tab.disabled,
-				className: "whitespace-nowrap",
-				children: [tab.icon, tab.hideTextOnMobile ? /* @__PURE__ */ jsx("span", {
-					className: "hidden sm:inline text-sm",
-					children: tab.label
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "text-sm",
+					icon: tab.icon,
+					hideTextOnMobile: tab.hideTextOnMobile,
 					children: tab.label
-				})]
-			}, tab.value))
-		}), /* @__PURE__ */ jsx("div", {
-			className: computedClasses.contentWrapper,
-			children: isFlexLayout && scrollable ? /* @__PURE__ */ jsx(ScrollArea, {
-				className: "h-full w-full",
-				children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
-					value: tab.value,
-					className: computedClasses.flexContent,
-					children: tab.content
 				}, tab.value))
-			}) : tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, {
-				value: tab.value,
-				className: computedClasses.standardContent,
-				children: tab.content
-			}, tab.value))
-		})]
+			}), content]
+		})
 	});
 });
 
@@ -1684,10 +1509,11 @@ function ResponsiveSplitLayout({ leftPanel, rightPanel, className, leftPanelClas
 				defaultValue: "left",
 				value: mobileView,
 				onValueChange: (val) => setMobileView(val),
-				variant: "default",
+				preset: "default",
+				fullWidth: true,
 				layout: "flex",
 				className: "h-full",
-				listWrapperClassName: "px-4 py-2 flex-shrink-0",
+				listClassName: "mx-3 mt-3 mb-1 flex-shrink-0",
 				contentClassName: "mt-0 flex-1 min-h-0"
 			})
 		});
@@ -1761,7 +1587,7 @@ function ResponsiveSplitLayout({ leftPanel, rightPanel, className, leftPanelClas
 	return /* @__PURE__ */ jsxs(ResizablePanelGroup, {
 		direction: "horizontal",
 		className: cn("h-full", className),
-		autoSaveId: persistLayoutKey,
+		...persistLayoutKey ? { autoSaveId: persistLayoutKey } : {},
 		children: [
 			/* @__PURE__ */ jsx(ResizablePanel, {
 				defaultSize: defaultLayout[0],

package/dist/client/hooks.mjs

@@ -6,7 +6,7 @@ import { t as useMediaQuery } from "../use-media-query-BnVNIKT4.mjs";
 import { t as useScrollDetection } from "../use-scroll-detection-CsgsQYvy.mjs";
 import { n as useDebouncedCallback, t as useDebounce } from "../use-debounce-xmZucz5e.mjs";
 import { t as useKeyboardShortcut } from "../use-keyboard-shortcut-Bl6YM5Q7.mjs";
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 //#region src/hooks/use-base-search.ts
@@ -391,6 +391,30 @@ const storage = {
 
 //#endregion
 //#region src/hooks/use-local-storage.ts
+function parseSnapshot(rawValue, initialValue) {
+	try {
+		const parsed = JSON.parse(rawValue);
+		if (parsed && typeof parsed === "object" && "__expiresAt" in parsed && typeof parsed.__expiresAt === "number") {
+			if (Date.now() > parsed.__expiresAt) return {
+				value: initialValue,
+				expired: true
+			};
+			return {
+				value: parsed.value ?? initialValue,
+				expired: false
+			};
+		}
+		return {
+			value: parsed ?? initialValue,
+			expired: false
+		};
+	} catch {
+		return {
+			value: initialValue,
+			expired: false
+		};
+	}
+}
 /**
 * useLocalStorage — Persist state in localStorage with type safety and optional expiry.
 *
@@ -411,12 +435,14 @@ const storage = {
 function useLocalStorage(key, initialValue, ttl) {
 	const ttlRef = useRef(ttl);
 	ttlRef.current = ttl;
+	const initialValueRef = useRef(initialValue);
+	const serializedInitialRef = useRef(() => JSON.stringify(initialValue));
 	const getSnapshot = useCallback(() => {
-		if (typeof window === "undefined") return JSON.stringify(initialValue);
-		return window.localStorage.getItem(key) ?? JSON.stringify(initialValue);
-	}, [key, initialValue]);
-	const getServerSnapshot = useCallback(() => JSON.stringify(initialValue), [initialValue]);
-	useSyncExternalStore(useCallback((onStoreChange) => {
+		if (typeof window === "undefined") return serializedInitialRef.current();
+		return window.localStorage.getItem(key) ?? serializedInitialRef.current();
+	}, [key]);
+	const getServerSnapshot = useCallback(() => serializedInitialRef.current(), []);
+	const rawValue = useSyncExternalStore(useCallback((onStoreChange) => {
 		const handleStorage = (e) => {
 			if (e.key === key || e.key === null) onStoreChange();
 		};
@@ -430,30 +456,30 @@ function useLocalStorage(key, initialValue, ttl) {
 			window.removeEventListener("local-storage-change", handleLocal);
 		};
 	}, [key]), getSnapshot, getServerSnapshot);
-	const value = (() => {
-		const parsed = storage.get(key, initialValue);
-		return parsed !== null ? parsed : initialValue;
-	})();
+	const parsedSnapshot = useMemo(() => parseSnapshot(rawValue, initialValueRef.current), [rawValue]);
+	useEffect(() => {
+		if (!parsedSnapshot.expired || typeof window === "undefined") return;
+		storage.remove(key);
+		window.dispatchEvent(new CustomEvent("local-storage-change", { detail: { key } }));
+	}, [key, parsedSnapshot.expired]);
 	const notifyChange = useCallback(() => {
 		window.dispatchEvent(new CustomEvent("local-storage-change", { detail: { key } }));
 	}, [key]);
+	const setValue = useCallback((updater) => {
+		const init = initialValueRef.current;
+		const current = parseSnapshot(typeof window === "undefined" ? JSON.stringify(init) : window.localStorage.getItem(key) ?? JSON.stringify(init), init).value;
+		const nextValue = updater instanceof Function ? updater(current) : updater;
+		storage.set(key, nextValue, ttlRef.current);
+		notifyChange();
+	}, [key, notifyChange]);
+	const removeValue = useCallback(() => {
+		storage.remove(key);
+		notifyChange();
+	}, [key, notifyChange]);
 	return [
-		value,
-		useCallback((updater) => {
-			const currentValue = storage.get(key, initialValue);
-			const current = currentValue !== null ? currentValue : initialValue;
-			const nextValue = updater instanceof Function ? updater(current) : updater;
-			storage.set(key, nextValue, ttlRef.current);
-			notifyChange();
-		}, [
-			key,
-			initialValue,
-			notifyChange
-		]),
-		useCallback(() => {
-			storage.remove(key);
-			notifyChange();
-		}, [key, notifyChange])
+		parsedSnapshot.value,
+		setValue,
+		removeValue
 	];
 }