@humain/ui 2.1.63 → 2.1.65

package/dist/index213.js

@@ -1,37 +1,285 @@
 "use client";
 import { cn } from "./index2.js";
+import { Button } from "./index5.js";
+import { useControllableState } from "./index12.js";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/ui/app-shell.tsx
-/**
-* AppShell provides a customizable background wrapper for connected sidebar layouts.
-* It sets a fixed height and allows any CSS background value (gradient, solid color, image).
-*
-* Responsive padding is handled via CSS media queries (no JS hydration flash).
-* Mobile padding applies below 768px, desktop padding at 768px and above.
-*/
-var AppShell = React.forwardRef(({ background, height, padding, mobilePadding, gap, connected, className, style, children, ...props }, ref) => {
-	const cssVars = {};
-	if (background !== void 0) cssVars["--app-shell-background"] = background;
-	if (height !== void 0) cssVars["--app-shell-height"] = height;
-	if (padding !== void 0) cssVars["--app-shell-padding"] = typeof padding === "number" ? `${padding}px` : padding;
-	if (mobilePadding !== void 0) cssVars["--app-shell-mobile-padding"] = typeof mobilePadding === "number" ? `${mobilePadding}px` : mobilePadding;
-	if (gap !== void 0) cssVars["--app-shell-gap"] = typeof gap === "number" ? `${gap}px` : gap;
-	return /* @__PURE__ */ jsx("div", {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/organisms/overlays/Sheet/Sheet.tsx
+var closeButtonVariants = cva("", {
+	variants: { size: {
+		sm: "",
+		md: "",
+		lg: ""
+	} },
+	defaultVariants: { size: "sm" }
+});
+var buttonSizeMap = {
+	sm: "icon-sm",
+	md: "icon",
+	lg: "icon-lg"
+};
+var CloseButton = React.forwardRef(({ className, size = "sm", "aria-label": ariaLabel = "Close", ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		"data-slot": "close-button",
+		appearance: "ghost",
+		variant: "secondary",
+		size: buttonSizeMap[size ?? "sm"],
+		className: cn(closeButtonVariants({ size }), className),
+		"aria-label": ariaLabel,
+		...props,
+		children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: ariaLabel
+		})]
+	});
+});
+CloseButton.displayName = "CloseButton";
+var Root = React.forwardRef(function Root({ ...props }, _ref) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "sheet",
+		...props
+	});
+});
+Root.displayName = "Sheet.Root";
+var Trigger = React.forwardRef(function Trigger({ ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		ref,
+		"data-slot": "sheet-trigger",
+		...props
+	});
+});
+Trigger.displayName = "Sheet.Trigger";
+var Close = React.forwardRef(function Close({ ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		ref,
+		"data-slot": "sheet-close",
+		...props
+	});
+});
+Close.displayName = "Sheet.Close";
+function Portal({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+Portal.displayName = "Sheet.Portal";
+var Backdrop = React.forwardRef(function Backdrop({ className, disableAnimation, disableBackdropBlur, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
 		ref,
-		"data-slot": "app-shell",
-		"data-connected": connected ? "true" : void 0,
-		style: {
-			...cssVars,
-			...style
-		},
-		className: cn("flex h-[var(--app-shell-height,100dvh)] w-full", "gap-[var(--app-shell-gap,0px)]", "p-[var(--app-shell-mobile-padding,0.5rem)] md:p-[var(--app-shell-padding,1rem)]", "bg-app-shell", "transition-[gap] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none", className),
+		"data-slot": "sheet-backdrop",
+		className: cn("bg-background/80/10 fixed inset-0 z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:animate-none", !disableBackdropBlur && "supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+});
+Backdrop.displayName = "Sheet.Backdrop";
+var Viewport = React.forwardRef(function Viewport({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Dialog.Viewport, {
+		ref,
+		"data-slot": "sheet-viewport",
+		className: cn("fixed inset-0 z-50", className),
 		...props,
 		children
 	});
 });
-AppShell.displayName = "AppShell";
+Viewport.displayName = "Sheet.Viewport";
+function PopupBase({ className, children, side = "right", showCloseButton = true, disableAnimation, disableBackdropBlur, ...props }) {
+	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Backdrop, {
+		disableAnimation,
+		disableBackdropBlur
+	}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "sheet-popup",
+		"data-side": side,
+		className: cn("bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", !disableAnimation && "data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-full data-[side=right]:data-open:slide-in-from-right-full data-[side=left]:data-closed:slide-out-to-left-full data-[side=left]:data-open:slide-in-from-left-full data-[side=top]:data-closed:slide-out-to-top-full data-[side=top]:data-open:slide-in-from-top-full data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-full data-[side=bottom]:data-open:slide-in-from-bottom-full data-open:duration-300 data-closed:duration-200 data-open:ease-(--ease-decelerate) data-closed:ease-in motion-reduce:animate-none", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(CloseButton, { className: "absolute top-4 end-4" }) })]
+	})] });
+}
+PopupBase.displayName = "PopupBase";
+function HeaderBase({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cn("gap-1.5 p-4 flex flex-col", className),
+		...props
+	});
+}
+HeaderBase.displayName = "HeaderBase";
+function FooterBase({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: cn("gap-2 p-4 mt-auto flex flex-col", className),
+		...props
+	});
+}
+FooterBase.displayName = "FooterBase";
+function TitleBase({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: cn("text-foreground font-medium", className),
+		...props
+	});
+}
+TitleBase.displayName = "TitleBase";
+function DescriptionBase({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		className: cn("text-muted-foreground text-sm", className),
+		...props
+	});
+}
+DescriptionBase.displayName = "DescriptionBase";
+function SheetComponent({ trigger, open: controlledOpen, defaultOpen = false, onOpenChange, children, ...props }) {
+	const [open, handleOpenChange] = useControllableState({
+		value: controlledOpen,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	return /* @__PURE__ */ jsxs(Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		...props,
+		children: [trigger && /* @__PURE__ */ jsx(Trigger, { render: trigger }), children]
+	});
+}
+SheetComponent.displayName = "Sheet";
+var sheetWidthClasses = {
+	sm: "data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+	md: "data-[side=left]:sm:max-w-md data-[side=right]:sm:max-w-md",
+	lg: "data-[side=left]:sm:max-w-lg data-[side=right]:sm:max-w-lg",
+	xl: "data-[side=left]:sm:max-w-xl data-[side=right]:sm:max-w-xl",
+	full: "data-[side=left]:sm:max-w-full data-[side=right]:sm:max-w-full"
+};
+function Popup({ className, width = "md", children, showCloseButton = false, ...props }) {
+	return /* @__PURE__ */ jsx(PopupBase, {
+		className: cn("shadow-xl border-border", sheetWidthClasses[width], className),
+		showCloseButton,
+		...props,
+		children
+	});
+}
+Popup.displayName = "Sheet.Popup";
+function Header({ className, children, icon, showCloseButton = true, onClose, ...props }) {
+	return /* @__PURE__ */ jsxs(HeaderBase, {
+		className: cn("relative flex flex-row items-start gap-4 px-6 pt-6 pb-0", className),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background shadow-xs delight-bounce-in motion-reduce:!animate-none",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-secondary-foreground [&>svg]:size-5",
+					children: icon
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children
+			}),
+			showCloseButton && /* @__PURE__ */ jsx(Close, {
+				onClick: onClose,
+				render: /* @__PURE__ */ jsx(CloseButton, {
+					size: "md",
+					className: "absolute end-4 top-3"
+				})
+			})
+		]
+	});
+}
+Header.displayName = "Sheet.Header";
+function Title({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TitleBase, {
+		className: cn("text-xl font-semibold text-foreground delight-stagger motion-reduce:!animate-none", className),
+		...props,
+		style: { "--delight-delay": "50ms" }
+	});
+}
+Title.displayName = "Sheet.Title";
+function Description({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DescriptionBase, {
+		className: cn("text-sm text-tertiary-foreground delight-stagger motion-reduce:!animate-none", className),
+		...props,
+		style: { "--delight-delay": "100ms" }
+	});
+}
+Description.displayName = "Sheet.Description";
+function Body({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-body",
+		className: cn("flex flex-1 flex-col gap-6 overflow-y-auto px-6", className),
+		...props,
+		children
+	});
+}
+Body.displayName = "Sheet.Body";
+function Section({ className, children, label, description, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sheet-section",
+		className: cn("flex flex-col gap-4", className),
+		...props,
+		children: [(label || description) && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [label && /* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium text-secondary-foreground",
+				children: label
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-tertiary-foreground",
+				children: description
+			})]
+		}), children]
+	});
+}
+Section.displayName = "Sheet.Section";
+function Divider({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-divider",
+		className: cn("h-px w-full bg-border-secondary", className),
+		...props
+	});
+}
+Divider.displayName = "Sheet.Divider";
+function Footer({ className, children, primaryAction, secondaryAction, onPrimaryAction, onSecondaryAction, primaryLoading, primaryDisabled, ...props }) {
+	if (children) return /* @__PURE__ */ jsx(FooterBase, {
+		className: cn("flex-row items-center justify-end gap-3 border-t border-border px-6 py-4", className),
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs(FooterBase, {
+		className: cn("flex-row items-center justify-end gap-3 border-t border-border px-6 py-4", className),
+		...props,
+		children: [secondaryAction && /* @__PURE__ */ jsx(Close, { render: /* @__PURE__ */ jsx(Button, {
+			appearance: "outline",
+			variant: "secondary",
+			onClick: onSecondaryAction,
+			children: secondaryAction
+		}) }), primaryAction && /* @__PURE__ */ jsx(Button, {
+			onClick: onPrimaryAction,
+			loading: primaryLoading,
+			disabled: primaryDisabled,
+			children: primaryAction
+		})]
+	});
+}
+Footer.displayName = "Sheet.Footer";
+var Sheet = Object.assign(SheetComponent, {
+	Root,
+	Trigger,
+	Portal,
+	Backdrop,
+	Viewport,
+	Popup,
+	Header,
+	Body,
+	Footer,
+	Title,
+	Description,
+	Close,
+	Section,
+	Divider
+});
 //#endregion
-export { AppShell };
+export { Sheet, Backdrop as SheetBackdrop, Body as SheetBody, Close as SheetClose, Description as SheetDescription, Divider as SheetDivider, Footer as SheetFooter, Header as SheetHeader, Popup as SheetPopup, Portal as SheetPortal, Root as SheetRoot, Section as SheetSection, Title as SheetTitle, Trigger as SheetTrigger, Viewport as SheetViewport };
 
 //# sourceMappingURL=index213.js.map

package/dist/index213.js.map

@@ -1 +1 @@
-{"version":3,"file":"index213.js","names":[],"sources":["../src/components/ui/app-shell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * AppShell provides a customizable background wrapper for connected sidebar layouts.\n * It sets a fixed height and allows any CSS background value (gradient, solid color, image).\n *\n * Responsive padding is handled via CSS media queries (no JS hydration flash).\n * Mobile padding applies below 768px, desktop padding at 768px and above.\n */\nconst AppShell = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    /** Any CSS background value (color, gradient, image). Defaults to var(--app-background). */\n    background?: string;\n    /** Fixed height, supports CSS calc(). Defaults to '100vh'. */\n    height?: string;\n    /** Spacing around the inner content in pixels or CSS value. Defaults to token --app-shell-padding (16px). Applied at md breakpoint and above. */\n    padding?: number | string;\n    /** Padding on mobile viewports (<768px). Defaults to 8px. */\n    mobilePadding?: number | string;\n    /** Gap between panels in pixels or CSS value. Sets --app-shell-gap CSS variable. */\n    gap?: number | string;\n    /** When true, panels are visually connected (joined edges, no border-radius between them). */\n    connected?: boolean;\n  }\n>(\n  (\n    {\n      background,\n      height,\n      padding,\n      mobilePadding,\n      gap,\n      connected,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // Build style object, only setting vars when props are explicitly provided\n    const cssVars: Record<string, string | undefined> = {};\n    if (background !== undefined) {\n      cssVars['--app-shell-background'] = background;\n    }\n    if (height !== undefined) {\n      cssVars['--app-shell-height'] = height;\n    }\n    if (padding !== undefined) {\n      cssVars['--app-shell-padding'] =\n        typeof padding === 'number' ? `${padding}px` : padding;\n    }\n    if (mobilePadding !== undefined) {\n      cssVars['--app-shell-mobile-padding'] =\n        typeof mobilePadding === 'number'\n          ? `${mobilePadding}px`\n          : mobilePadding;\n    }\n    if (gap !== undefined) {\n      cssVars['--app-shell-gap'] = typeof gap === 'number' ? `${gap}px` : gap;\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"app-shell\"\n        data-connected={connected ? 'true' : undefined}\n        style={{ ...cssVars, ...style } as React.CSSProperties}\n        className={cn(\n          'flex h-[var(--app-shell-height,100dvh)] w-full',\n          'gap-[var(--app-shell-gap,0px)]',\n          // Responsive padding via CSS: mobile-first, then desktop override at md breakpoint\n          'p-[var(--app-shell-mobile-padding,0.5rem)] md:p-[var(--app-shell-padding,1rem)]',\n          'bg-app-shell',\n          'transition-[gap] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nAppShell.displayName = 'AppShell';\n\nexport { AppShell };\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,WAAW,MAAM,YAkBnB,EACE,YACA,QACA,SACA,eACA,KACA,WACA,WACA,OACA,UACA,GAAG,SAEL,QACG;CAEH,MAAM,UAA8C,CAAC;CACrD,IAAI,eAAe,KAAA,GACjB,QAAQ,4BAA4B;CAEtC,IAAI,WAAW,KAAA,GACb,QAAQ,wBAAwB;CAElC,IAAI,YAAY,KAAA,GACd,QAAQ,yBACN,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;CAEnD,IAAI,kBAAkB,KAAA,GACpB,QAAQ,gCACN,OAAO,kBAAkB,WACrB,GAAG,cAAc,MACjB;CAER,IAAI,QAAQ,KAAA,GACV,QAAQ,qBAAqB,OAAO,QAAQ,WAAW,GAAG,IAAI,MAAM;CAGtE,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,kBAAgB,YAAY,SAAS,KAAA;EACrC,OAAO;GAAE,GAAG;GAAS,GAAG;EAAM;EAC9B,WAAW,GACT,kDACA,kCAEA,mFACA,gBACA,iGACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"index213.js","names":[],"sources":["../src/components/organisms/overlays/Sheet/Sheet.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as SheetPrimitive } from '@base-ui/react/dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport * as React from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { useControllableState } from '@/hooks/use-controllable-state';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// CloseButton - Internal component for sheet close button\n// ============================================\n\nconst closeButtonVariants = cva('', {\n  variants: {\n    size: {\n      sm: '',\n      md: '',\n      lg: '',\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n});\n\nconst buttonSizeMap = {\n  sm: 'icon-sm',\n  md: 'icon',\n  lg: 'icon-lg',\n} as const;\n\ninterface CloseButtonProps\n  extends Omit<\n      React.ComponentProps<typeof Button>,\n      'variant' | 'size' | 'children'\n    >,\n    VariantProps<typeof closeButtonVariants> {\n  'aria-label'?: string;\n}\n\nconst CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(\n  (\n    { className, size = 'sm', 'aria-label': ariaLabel = 'Close', ...props },\n    ref,\n  ) => {\n    return (\n      <Button\n        ref={ref}\n        data-slot=\"close-button\"\n        appearance=\"ghost\"\n        variant=\"secondary\"\n        size={buttonSizeMap[size ?? 'sm']}\n        className={cn(closeButtonVariants({ size }), className)}\n        aria-label={ariaLabel}\n        {...props}\n      >\n        <X />\n        <span className=\"sr-only\">{ariaLabel}</span>\n      </Button>\n    );\n  },\n);\n\nCloseButton.displayName = 'CloseButton';\n\n// ============================================\n// Base Sheet Components\n// ============================================\n\nconst Root = React.forwardRef<HTMLDivElement, SheetPrimitive.Root.Props>(\n  function Root({ ...props }, _ref) {\n    return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n  },\n);\nRoot.displayName = 'Sheet.Root';\n\nconst Trigger = React.forwardRef<\n  HTMLButtonElement,\n  SheetPrimitive.Trigger.Props\n>(function Trigger({ ...props }, ref) {\n  return (\n    <SheetPrimitive.Trigger ref={ref} data-slot=\"sheet-trigger\" {...props} />\n  );\n});\nTrigger.displayName = 'Sheet.Trigger';\n\nconst Close = React.forwardRef<HTMLButtonElement, SheetPrimitive.Close.Props>(\n  function Close({ ...props }, ref) {\n    return (\n      <SheetPrimitive.Close ref={ref} data-slot=\"sheet-close\" {...props} />\n    );\n  },\n);\nClose.displayName = 'Sheet.Close';\n\nfunction Portal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\nPortal.displayName = 'Sheet.Portal';\n\nexport interface BackdropProps extends SheetPrimitive.Backdrop.Props {\n  /** Disables open/close animations */\n  disableAnimation?: boolean;\n  /** Disables backdrop blur effect */\n  disableBackdropBlur?: boolean;\n}\n\nconst Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(\n  function Backdrop(\n    { className, disableAnimation, disableBackdropBlur, ...props },\n    ref,\n  ) {\n    return (\n      <SheetPrimitive.Backdrop\n        ref={ref}\n        data-slot=\"sheet-backdrop\"\n        className={cn(\n          'bg-background/80/10 fixed inset-0 z-50',\n          !disableAnimation &&\n            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:animate-none',\n          !disableBackdropBlur && 'supports-backdrop-filter:backdrop-blur-xs',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nBackdrop.displayName = 'Sheet.Backdrop';\n\n// ============================================\n// Viewport - Scroll container for sheet positioning\n// ============================================\n\nexport interface ViewportProps extends SheetPrimitive.Viewport.Props {}\n\nconst Viewport = React.forwardRef<HTMLDivElement, ViewportProps>(\n  function Viewport({ className, children, ...props }, ref) {\n    return (\n      <SheetPrimitive.Viewport\n        ref={ref}\n        data-slot=\"sheet-viewport\"\n        className={cn('fixed inset-0 z-50', className)}\n        {...props}\n      >\n        {children}\n      </SheetPrimitive.Viewport>\n    );\n  },\n);\nViewport.displayName = 'Sheet.Viewport';\n\n// Base PopupBase (internal use)\ninterface PopupBaseProps extends SheetPrimitive.Popup.Props {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  showCloseButton?: boolean;\n  disableAnimation?: boolean;\n  disableBackdropBlur?: boolean;\n}\n\nfunction PopupBase({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  disableAnimation,\n  disableBackdropBlur,\n  ...props\n}: PopupBaseProps) {\n  return (\n    <Portal>\n      <Backdrop\n        disableAnimation={disableAnimation}\n        disableBackdropBlur={disableBackdropBlur}\n      />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-popup\"\n        data-side={side}\n        className={cn(\n          'bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n          !disableAnimation &&\n            'data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-full data-[side=right]:data-open:slide-in-from-right-full data-[side=left]:data-closed:slide-out-to-left-full data-[side=left]:data-open:slide-in-from-left-full data-[side=top]:data-closed:slide-out-to-top-full data-[side=top]:data-open:slide-in-from-top-full data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-full data-[side=bottom]:data-open:slide-in-from-bottom-full data-open:duration-300 data-closed:duration-200 data-open:ease-(--ease-decelerate) data-closed:ease-in motion-reduce:animate-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            render={<CloseButton className=\"absolute top-4 end-4\" />}\n          />\n        )}\n      </SheetPrimitive.Popup>\n    </Portal>\n  );\n}\nPopupBase.displayName = 'PopupBase';\n\n// Base HeaderBase (internal use)\nfunction HeaderBase({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('gap-1.5 p-4 flex flex-col', className)}\n      {...props}\n    />\n  );\n}\nHeaderBase.displayName = 'HeaderBase';\n\n// Base FooterBase (internal use)\nfunction FooterBase({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('gap-2 p-4 mt-auto flex flex-col', className)}\n      {...props}\n    />\n  );\n}\nFooterBase.displayName = 'FooterBase';\n\n// Base TitleBase (internal use)\nfunction TitleBase({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-foreground font-medium', className)}\n      {...props}\n    />\n  );\n}\nTitleBase.displayName = 'TitleBase';\n\n// Base DescriptionBase (internal use)\nfunction DescriptionBase({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\nDescriptionBase.displayName = 'DescriptionBase';\n\n// ============================================\n// Sheet (supports both controlled and uncontrolled modes)\n// ============================================\n\nexport interface SheetProps {\n  /**\n   * Optional trigger element that opens the sheet.\n   * When provided, uses base-ui's render prop to prevent nested button hydration errors.\n   * The trigger element will be rendered directly (not wrapped in a button).\n   *\n   * @example\n   * <Sheet trigger={<Button>Open Sheet</Button>}>\n   *   <Sheet.Popup>...</Sheet.Popup>\n   * </Sheet>\n   */\n  trigger?: React.ReactElement;\n  /** Sheet content */\n  children?: React.ReactNode;\n  /**\n   * Controlled open state. When provided, the sheet is in controlled mode.\n   * Use with `onOpenChange` to manage state externally.\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   * Required for controlled mode, optional for uncontrolled mode.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Initial open state for uncontrolled mode.\n   * Ignored when `open` prop is provided (controlled mode).\n   */\n  defaultOpen?: boolean;\n  /** Whether the sheet is modal (blocks interaction with the rest of the page) */\n  modal?: boolean;\n  /** Called when the sheet should be dismissed */\n  onDismiss?: () => void;\n}\n\nfunction SheetComponent({\n  trigger,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n  ...props\n}: SheetProps) {\n  const [open, handleOpenChange] = useControllableState({\n    value: controlledOpen,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  return (\n    <Root open={open} onOpenChange={handleOpenChange} {...props}>\n      {trigger && <Trigger render={trigger} />}\n      {children}\n    </Root>\n  );\n}\nSheetComponent.displayName = 'Sheet';\n\n// ============================================\n// Popup - Enhanced with Figma styling and width variants\n// ============================================\n\nconst sheetWidthClasses = {\n  sm: 'data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n  md: 'data-[side=left]:sm:max-w-md data-[side=right]:sm:max-w-md',\n  lg: 'data-[side=left]:sm:max-w-lg data-[side=right]:sm:max-w-lg',\n  xl: 'data-[side=left]:sm:max-w-xl data-[side=right]:sm:max-w-xl',\n  full: 'data-[side=left]:sm:max-w-full data-[side=right]:sm:max-w-full',\n};\n\nexport interface PopupProps extends React.ComponentProps<typeof PopupBase> {\n  /** Width of the sheet for left/right sides */\n  width?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\nfunction Popup({\n  className,\n  width = 'md',\n  children,\n  showCloseButton = false,\n  ...props\n}: PopupProps) {\n  return (\n    <PopupBase\n      className={cn(\n        'shadow-xl border-border',\n        sheetWidthClasses[width],\n        className,\n      )}\n      showCloseButton={showCloseButton}\n      {...props}\n    >\n      {children}\n    </PopupBase>\n  );\n}\nPopup.displayName = 'Sheet.Popup';\n\n// ============================================\n// Header - Enhanced with icon support\n// ============================================\n\nexport interface HeaderProps extends React.ComponentProps<'div'> {\n  /** Icon to display in the header */\n  icon?: React.ReactNode;\n  /** Show close button in header */\n  showCloseButton?: boolean;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n}\n\nfunction Header({\n  className,\n  children,\n  icon,\n  showCloseButton = true,\n  onClose,\n  ...props\n}: HeaderProps) {\n  return (\n    <HeaderBase\n      className={cn(\n        'relative flex flex-row items-start gap-4 px-6 pt-6 pb-0',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <div className=\"flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background shadow-xs delight-bounce-in motion-reduce:!animate-none\">\n          <span className=\"text-secondary-foreground [&>svg]:size-5\">\n            {icon}\n          </span>\n        </div>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">{children}</div>\n      {showCloseButton && (\n        <Close\n          onClick={onClose}\n          render={<CloseButton size=\"md\" className=\"absolute end-4 top-3\" />}\n        />\n      )}\n    </HeaderBase>\n  );\n}\nHeader.displayName = 'Sheet.Header';\n\n// ============================================\n// Title - Enhanced typography\n// ============================================\n\nexport interface TitleProps extends React.ComponentProps<typeof TitleBase> {}\n\nfunction Title({ className, ...props }: TitleProps) {\n  return (\n    <TitleBase\n      className={cn(\n        'text-xl font-semibold text-foreground delight-stagger motion-reduce:!animate-none',\n        className,\n      )}\n      {...props}\n      style={{ '--delight-delay': '50ms' } as React.CSSProperties}\n    />\n  );\n}\nTitle.displayName = 'Sheet.Title';\n\n// ============================================\n// Description - Enhanced typography\n// ============================================\n\nexport interface DescriptionProps\n  extends React.ComponentProps<typeof DescriptionBase> {}\n\nfunction Description({ className, ...props }: DescriptionProps) {\n  return (\n    <DescriptionBase\n      className={cn(\n        'text-sm text-tertiary-foreground delight-stagger motion-reduce:!animate-none',\n        className,\n      )}\n      {...props}\n      style={{ '--delight-delay': '100ms' } as React.CSSProperties}\n    />\n  );\n}\nDescription.displayName = 'Sheet.Description';\n\n// ============================================\n// Body - Scrollable content area\n// ============================================\n\nexport interface BodyProps extends React.ComponentProps<'div'> {}\n\nfunction Body({ className, children, ...props }: BodyProps) {\n  return (\n    <div\n      data-slot=\"sheet-body\"\n      className={cn(\n        'flex flex-1 flex-col gap-6 overflow-y-auto px-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nBody.displayName = 'Sheet.Body';\n\n// ============================================\n// Section - Grouped content section\n// ============================================\n\nexport interface SectionProps extends React.ComponentProps<'div'> {\n  /** Section label */\n  label?: string;\n  /** Section description/supporting text */\n  description?: string;\n}\n\nfunction Section({\n  className,\n  children,\n  label,\n  description,\n  ...props\n}: SectionProps) {\n  return (\n    <div\n      data-slot=\"sheet-section\"\n      className={cn('flex flex-col gap-4', className)}\n      {...props}\n    >\n      {(label || description) && (\n        <div className=\"flex flex-col gap-1\">\n          {label && (\n            <p className=\"text-sm font-medium text-secondary-foreground\">\n              {label}\n            </p>\n          )}\n          {description && (\n            <p className=\"text-sm text-tertiary-foreground\">{description}</p>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\nSection.displayName = 'Sheet.Section';\n\n// ============================================\n// Divider - Visual separator\n// ============================================\n\nexport interface DividerProps extends React.ComponentProps<'div'> {}\n\nfunction Divider({ className, ...props }: DividerProps) {\n  return (\n    <div\n      data-slot=\"sheet-divider\"\n      className={cn('h-px w-full bg-border-secondary', className)}\n      {...props}\n    />\n  );\n}\nDivider.displayName = 'Sheet.Divider';\n\n// ============================================\n// Footer - Enhanced with button alignment\n// ============================================\n\nexport interface FooterProps extends React.ComponentProps<'div'> {\n  /** Primary action button text */\n  primaryAction?: string;\n  /** Secondary action button text */\n  secondaryAction?: string;\n  /** Callback for primary action */\n  onPrimaryAction?: () => void;\n  /** Callback for secondary action */\n  onSecondaryAction?: () => void;\n  /** Loading state for primary button */\n  primaryLoading?: boolean;\n  /** Disable primary button */\n  primaryDisabled?: boolean;\n}\n\nfunction Footer({\n  className,\n  children,\n  primaryAction,\n  secondaryAction,\n  onPrimaryAction,\n  onSecondaryAction,\n  primaryLoading,\n  primaryDisabled,\n  ...props\n}: FooterProps) {\n  // If custom children provided, render those instead\n  if (children) {\n    return (\n      <FooterBase\n        className={cn(\n          'flex-row items-center justify-end gap-3 border-t border-border px-6 py-4',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </FooterBase>\n    );\n  }\n\n  // Default footer with primary/secondary actions\n  return (\n    <FooterBase\n      className={cn(\n        'flex-row items-center justify-end gap-3 border-t border-border px-6 py-4',\n        className,\n      )}\n      {...props}\n    >\n      {secondaryAction && (\n        <Close\n          render={\n            <Button\n              appearance=\"outline\"\n              variant=\"secondary\"\n              onClick={onSecondaryAction}\n            >\n              {secondaryAction}\n            </Button>\n          }\n        />\n      )}\n      {primaryAction && (\n        <Button\n          onClick={onPrimaryAction}\n          loading={primaryLoading}\n          disabled={primaryDisabled}\n        >\n          {primaryAction}\n        </Button>\n      )}\n    </FooterBase>\n  );\n}\nFooter.displayName = 'Sheet.Footer';\n\n// ============================================\n// Type exports\n// ============================================\n\nexport type CloseProps = SheetPrimitive.Close.Props;\nexport type PortalProps = SheetPrimitive.Portal.Props;\nexport type TriggerProps = SheetPrimitive.Trigger.Props;\nexport type RootProps = SheetPrimitive.Root.Props;\n\n// ============================================\n// Compound component via dot notation (ADR-011)\n// ============================================\n\nconst Sheet = Object.assign(SheetComponent, {\n  Root,\n  Trigger,\n  Portal,\n  Backdrop,\n  Viewport,\n  Popup,\n  Header,\n  Body,\n  Footer,\n  Title,\n  Description,\n  Close,\n  Section,\n  Divider,\n});\n\nexport {\n  Backdrop as SheetBackdrop,\n  Body as SheetBody,\n  Close as SheetClose,\n  Description as SheetDescription,\n  Divider as SheetDivider,\n  Footer as SheetFooter,\n  Header as SheetHeader,\n  Popup as SheetPopup,\n  Portal as SheetPortal,\n  // Sub-components with Sheet prefix for direct imports\n  Root as SheetRoot,\n  Section as SheetSection,\n  Sheet,\n  Title as SheetTitle,\n  Trigger as SheetTrigger,\n  Viewport as SheetViewport,\n};\n"],"mappings":"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"}

package/dist/index214.js

@@ -1,102 +1,37 @@
 "use client";
 import { cn } from "./index2.js";
-import { CloseButton } from "./index108.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Dialog } from "@base-ui/react/dialog";
-//#region src/components/ui/sheet.tsx
-function Sheet({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Root, {
-		"data-slot": "sheet",
-		...props
-	});
-}
-function SheetTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Trigger, {
-		"data-slot": "sheet-trigger",
-		...props
-	});
-}
-function SheetClose({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Close, {
-		"data-slot": "sheet-close",
-		...props
-	});
-}
-function SheetPortal({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Portal, {
-		"data-slot": "sheet-portal",
-		...props
-	});
-}
-function SheetOverlay({ className, disableAnimation, disableBackdropBlur, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
-		"data-slot": "sheet-overlay",
-		className: cn("bg-background/80/10 fixed inset-0 z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0", !disableBackdropBlur && "supports-backdrop-filter:backdrop-blur-xs", className),
-		...props
-	});
-}
-function SheetContent({ className, children, side = "right", showCloseButton = true, disableAnimation, disableBackdropBlur, ...props }) {
-	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {
-		disableAnimation,
-		disableBackdropBlur
-	}), /* @__PURE__ */ jsxs(Dialog.Popup, {
-		"data-slot": "sheet-content",
-		"data-side": side,
-		className: cn("bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", !disableAnimation && "data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 transition duration-200 ease-in-out", className),
-		...props,
-		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(CloseButton, { className: "absolute top-4 end-4" }) })]
-	})] });
-}
-function SheetHeader({ className, ...props }) {
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/app-shell.tsx
+/**
+* AppShell provides a customizable background wrapper for connected sidebar layouts.
+* It sets a fixed height and allows any CSS background value (gradient, solid color, image).
+*
+* Responsive padding is handled via CSS media queries (no JS hydration flash).
+* Mobile padding applies below 768px, desktop padding at 768px and above.
+*/
+var AppShell = React.forwardRef(({ background, height, padding, mobilePadding, gap, connected, className, style, children, ...props }, ref) => {
+	const cssVars = {};
+	if (background !== void 0) cssVars["--app-shell-background"] = background;
+	if (height !== void 0) cssVars["--app-shell-height"] = height;
+	if (padding !== void 0) cssVars["--app-shell-padding"] = typeof padding === "number" ? `${padding}px` : padding;
+	if (mobilePadding !== void 0) cssVars["--app-shell-mobile-padding"] = typeof mobilePadding === "number" ? `${mobilePadding}px` : mobilePadding;
+	if (gap !== void 0) cssVars["--app-shell-gap"] = typeof gap === "number" ? `${gap}px` : gap;
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "sheet-header",
-		className: cn("gap-1.5 p-4 flex flex-col", className),
-		...props
-	});
-}
-function SheetFooter({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "sheet-footer",
-		className: cn("gap-2 p-4 mt-auto flex flex-col", className),
-		...props
-	});
-}
-function SheetTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Title, {
-		"data-slot": "sheet-title",
-		className: cn("text-foreground font-medium", className),
-		...props
-	});
-}
-function SheetDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Description, {
-		"data-slot": "sheet-description",
-		className: cn("text-muted-foreground text-sm", className),
-		...props
+		ref,
+		"data-slot": "app-shell",
+		"data-connected": connected ? "true" : void 0,
+		style: {
+			...cssVars,
+			...style
+		},
+		className: cn("flex h-[var(--app-shell-height,100dvh)] w-full", "gap-[var(--app-shell-gap,0px)]", "p-[var(--app-shell-mobile-padding,0.5rem)] md:p-[var(--app-shell-padding,1rem)]", "bg-app-shell", "transition-[gap] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none", className),
+		...props,
+		children
 	});
-}
-SheetTrigger.displayName = "Sheet.Trigger";
-SheetClose.displayName = "Sheet.Close";
-SheetPortal.displayName = "Sheet.Portal";
-SheetOverlay.displayName = "Sheet.Overlay";
-SheetContent.displayName = "Sheet.Content";
-SheetHeader.displayName = "Sheet.Header";
-SheetFooter.displayName = "Sheet.Footer";
-SheetTitle.displayName = "Sheet.Title";
-SheetDescription.displayName = "Sheet.Description";
-Sheet.displayName = "Sheet";
-var SheetNamespace = Object.assign(Sheet, {
-	Trigger: SheetTrigger,
-	Close: SheetClose,
-	Portal: SheetPortal,
-	Overlay: SheetOverlay,
-	Content: SheetContent,
-	Header: SheetHeader,
-	Footer: SheetFooter,
-	Title: SheetTitle,
-	Description: SheetDescription
 });
+AppShell.displayName = "AppShell";
 //#endregion
-export { SheetNamespace as Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+export { AppShell };
 
 //# sourceMappingURL=index214.js.map

package/dist/index214.js.map

@@ -1 +1 @@
-{"version":3,"file":"index214.js","names":[],"sources":["../src/components/ui/sheet.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as SheetPrimitive } from '@base-ui/react/dialog';\nimport type * as React from 'react';\nimport { CloseButton } from '@/components/ui/close-button';\nimport { cn } from '@/lib/utils';\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nexport interface SheetOverlayProps extends SheetPrimitive.Backdrop.Props {\n  /** Disables open/close animations */\n  disableAnimation?: boolean;\n  /** Disables backdrop blur effect */\n  disableBackdropBlur?: boolean;\n}\n\nfunction SheetOverlay({\n  className,\n  disableAnimation,\n  disableBackdropBlur,\n  ...props\n}: SheetOverlayProps) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'bg-background/80/10 fixed inset-0 z-50',\n        !disableAnimation &&\n          'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0',\n        !disableBackdropBlur && 'supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface SheetContentProps extends SheetPrimitive.Popup.Props {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  showCloseButton?: boolean;\n  /** Disables open/close animations */\n  disableAnimation?: boolean;\n  /** Disables backdrop blur effect */\n  disableBackdropBlur?: boolean;\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  disableAnimation,\n  disableBackdropBlur,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPortal>\n      <SheetOverlay\n        disableAnimation={disableAnimation}\n        disableBackdropBlur={disableBackdropBlur}\n      />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          'bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n          !disableAnimation &&\n            'data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 transition duration-200 ease-in-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            render={<CloseButton className=\"absolute top-4 end-4\" />}\n          />\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('gap-1.5 p-4 flex flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn('gap-2 p-4 mt-auto flex flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-foreground font-medium', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nSheetTrigger.displayName = 'Sheet.Trigger';\nSheetClose.displayName = 'Sheet.Close';\nSheetPortal.displayName = 'Sheet.Portal';\nSheetOverlay.displayName = 'Sheet.Overlay';\nSheetContent.displayName = 'Sheet.Content';\nSheetHeader.displayName = 'Sheet.Header';\nSheetFooter.displayName = 'Sheet.Footer';\nSheetTitle.displayName = 'Sheet.Title';\nSheetDescription.displayName = 'Sheet.Description';\nSheet.displayName = 'Sheet';\n\nconst SheetNamespace = Object.assign(Sheet, {\n  Trigger: SheetTrigger,\n  Close: SheetClose,\n  Portal: SheetPortal,\n  Overlay: SheetOverlay,\n  Content: SheetContent,\n  Header: SheetHeader,\n  Footer: SheetFooter,\n  Title: SheetTitle,\n  Description: SheetDescription,\n});\n\nexport {\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetNamespace as Sheet,\n  SheetTitle,\n  SheetTrigger,\n};\n"],"mappings":";;;;;;AAOA,SAAS,MAAM,EAAE,GAAG,SAAoC;CACtD,OAAO,oBAAC,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,aAAa,EAAE,GAAG,SAAuC;CAChE,OAAO,oBAAC,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,WAAW,EAAE,GAAG,SAAqC;CAC5D,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,SAAS,YAAY,EAAE,GAAG,SAAsC;CAC9D,OAAO,oBAAC,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AASA,SAAS,aAAa,EACpB,WACA,kBACA,qBACA,GAAG,SACiB;CACpB,OACE,oBAAC,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,0CACA,CAAC,oBACC,kKACF,CAAC,uBAAuB,6CACxB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAWA,SAAS,aAAa,EACpB,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,kBACA,qBACA,GAAG,SACiB;CACpB,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD;EACoB;EACG;CACtB,CAAA,GACD,qBAAC,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,0lBACA,CAAC,oBACC,mhBACF,SACF;EACA,GAAI;YATN,CAWG,UACA,mBACC,oBAAC,OAAe,OAAhB,EACE,QAAQ,oBAAC,aAAD,EAAa,WAAU,uBAAwB,CAAA,EACxD,CAAA,CAEiB;GACX,EAAA,CAAA;AAEjB;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAqC;CACvE,OACE,oBAAC,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACgC;CACnC,OACE,oBAAC,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc;AAC3B,WAAW,cAAc;AACzB,YAAY,cAAc;AAC1B,aAAa,cAAc;AAC3B,aAAa,cAAc;AAC3B,YAAY,cAAc;AAC1B,YAAY,cAAc;AAC1B,WAAW,cAAc;AACzB,iBAAiB,cAAc;AAC/B,MAAM,cAAc;AAEpB,IAAM,iBAAiB,OAAO,OAAO,OAAO;CAC1C,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,aAAa;AACf,CAAC"}
+{"version":3,"file":"index214.js","names":[],"sources":["../src/components/ui/app-shell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n/**\n * AppShell provides a customizable background wrapper for connected sidebar layouts.\n * It sets a fixed height and allows any CSS background value (gradient, solid color, image).\n *\n * Responsive padding is handled via CSS media queries (no JS hydration flash).\n * Mobile padding applies below 768px, desktop padding at 768px and above.\n */\nconst AppShell = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<'div'> & {\n    /** Any CSS background value (color, gradient, image). Defaults to var(--app-background). */\n    background?: string;\n    /** Fixed height, supports CSS calc(). Defaults to '100vh'. */\n    height?: string;\n    /** Spacing around the inner content in pixels or CSS value. Defaults to token --app-shell-padding (16px). Applied at md breakpoint and above. */\n    padding?: number | string;\n    /** Padding on mobile viewports (<768px). Defaults to 8px. */\n    mobilePadding?: number | string;\n    /** Gap between panels in pixels or CSS value. Sets --app-shell-gap CSS variable. */\n    gap?: number | string;\n    /** When true, panels are visually connected (joined edges, no border-radius between them). */\n    connected?: boolean;\n  }\n>(\n  (\n    {\n      background,\n      height,\n      padding,\n      mobilePadding,\n      gap,\n      connected,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // Build style object, only setting vars when props are explicitly provided\n    const cssVars: Record<string, string | undefined> = {};\n    if (background !== undefined) {\n      cssVars['--app-shell-background'] = background;\n    }\n    if (height !== undefined) {\n      cssVars['--app-shell-height'] = height;\n    }\n    if (padding !== undefined) {\n      cssVars['--app-shell-padding'] =\n        typeof padding === 'number' ? `${padding}px` : padding;\n    }\n    if (mobilePadding !== undefined) {\n      cssVars['--app-shell-mobile-padding'] =\n        typeof mobilePadding === 'number'\n          ? `${mobilePadding}px`\n          : mobilePadding;\n    }\n    if (gap !== undefined) {\n      cssVars['--app-shell-gap'] = typeof gap === 'number' ? `${gap}px` : gap;\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"app-shell\"\n        data-connected={connected ? 'true' : undefined}\n        style={{ ...cssVars, ...style } as React.CSSProperties}\n        className={cn(\n          'flex h-[var(--app-shell-height,100dvh)] w-full',\n          'gap-[var(--app-shell-gap,0px)]',\n          // Responsive padding via CSS: mobile-first, then desktop override at md breakpoint\n          'p-[var(--app-shell-mobile-padding,0.5rem)] md:p-[var(--app-shell-padding,1rem)]',\n          'bg-app-shell',\n          'transition-[gap] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nAppShell.displayName = 'AppShell';\n\nexport { AppShell };\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,WAAW,MAAM,YAkBnB,EACE,YACA,QACA,SACA,eACA,KACA,WACA,WACA,OACA,UACA,GAAG,SAEL,QACG;CAEH,MAAM,UAA8C,CAAC;CACrD,IAAI,eAAe,KAAA,GACjB,QAAQ,4BAA4B;CAEtC,IAAI,WAAW,KAAA,GACb,QAAQ,wBAAwB;CAElC,IAAI,YAAY,KAAA,GACd,QAAQ,yBACN,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;CAEnD,IAAI,kBAAkB,KAAA,GACpB,QAAQ,gCACN,OAAO,kBAAkB,WACrB,GAAG,cAAc,MACjB;CAER,IAAI,QAAQ,KAAA,GACV,QAAQ,qBAAqB,OAAO,QAAQ,WAAW,GAAG,IAAI,MAAM;CAGtE,OACE,oBAAC,OAAD;EACO;EACL,aAAU;EACV,kBAAgB,YAAY,SAAS,KAAA;EACrC,OAAO;GAAE,GAAG;GAAS,GAAG;EAAM;EAC9B,WAAW,GACT,kDACA,kCAEA,mFACA,gBACA,iGACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}