@classytic/fluid 0.1.2 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @classytic/fluid
 
-Reusable UI components built on shadcn/ui for Next.js projects.
+Reusable UI components built on shadcn/ui and Base UI for Next.js projects.
 
 ## Install
 
@@ -11,47 +11,92 @@ npm install @classytic/fluid
 ## Usage
 
 ```tsx
-import { DialogWrapper, FormInput, DataTable } from "@classytic/fluid";
-import { PageHeader, InsetSidebar } from "@classytic/fluid/dashboard";
+// Main components
+import {
+  DialogWrapper,
+  FormInput,
+  DataTable,
+  EmptyState,
+} from "@classytic/fluid";
+
+// Dashboard components (sidebar, header, project switcher)
+import {
+  PageHeader,
+  InsetSidebar,
+  SidebarNav,
+} from "@classytic/fluid/dashboard";
+
+// Layout utilities
+import { Section, Container } from "@classytic/fluid/layout";
+
+// Compact form components (floating labels)
+import { CompactInput, CompactSelect, Field } from "@classytic/fluid/compact";
+
+// Composable search system
+import { Search, SearchProvider, useSearch } from "@classytic/fluid/search";
 ```
 
 ## Components
 
-| Category | Components |
-|----------|-----------|
-| **Dialogs/Sheets** | DialogWrapper, FormDialog, SheetWrapper, FormSheet, ConfirmDialog |
-| **Forms** | FormInput, FormTextarea, SelectInput, CheckboxInput, RadioInput, SwitchInput, DateInput, TagInput, ComboboxInput, SlugField, FormErrorSummary, DateRangeFilter |
-| **Tables** | DataTable, TableWrapper, SimpleTable |
-| **Layout** | CardWrapper, CollapsibleWrapper, ResponsiveSplitLayout, TabsWrapper |
-| **Display** | Pill, InfoRow, CopyButton, Thumbnail, DisplayHeading |
-| **Navigation** | ApiPagination, CustomPagination |
-| **Dashboard** | PageHeader, HeaderSection, InsetSidebar, DualSidebar, ProjectSwitcher, SidebarNav, SidebarUserMenu |
-| **Other** | ModeToggle, TooltipWrapper, DropdownWrapper, AccordionWrapper |
+| Category           | Components                                                                                                                                                                                                 |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Dialogs/Sheets** | DialogWrapper, FormDialog, SheetWrapper, FormSheet, ConfirmDialog, ConfirmSheet, DeleteConfirmDialog                                                                                                       |
+| **Forms**          | FormInput, FormTextarea, SelectInput, CheckboxInput, RadioInput, SwitchInput, DateInput, DateRangeInput, TagInput, TagChoiceInput, ComboboxInput, SlugField, PhoneInput, FormErrorSummary, DateRangeFilter |
+| **Compact Forms**  | CompactInput, CompactTextarea, CompactSelect, CompactNumberInput, CompactTagChoice, CompactSlugField, Field                                                                                                |
+| **Tables**         | DataTable, TableWrapper, SimpleTable                                                                                                                                                                       |
+| **Layout**         | CardWrapper, DataCard, StatsCard, CollapsibleWrapper, CollapsibleCard, ResponsiveSplitLayout, TabsWrapper, DynamicTabs, Section, Container                                                                 |
+| **Display**        | Pill (+ PillAvatar, PillStatus, PillDelta, PillIcon), InfoRow, CopyButton, CopyText, CopyCodeBlock, Thumbnail, DisplayHeading                                                                              |
+| **Feedback**       | EmptyState (+ NoResults, NoData, NotFound presets), LoadingState, LoadingOverlay, ErrorState, StatusBanner                                                                                                 |
+| **Navigation**     | ApiPagination, CustomPagination                                                                                                                                                                            |
+| **Search**         | Search.Root, Search.Input, Search.TypeInput, Search.Filters, Search.Actions, Search.Container, SearchProvider                                                                                              |
+| **Dashboard**      | PageHeader, HeaderSection, InsetSidebar, DualSidebar, ProjectSwitcher, SidebarNav, SidebarBrand, SidebarUserMenu                                                                                           |
+| **Other**          | ModeToggle, TooltipWrapper, ButtonTooltip, IconTooltip, DropdownWrapper, ActionDropdown, SelectDropdown, CheckboxDropdown, RadioDropdown, AccordionSection, FaqAccordion, EventCalendar                    |
+
+## Hooks
+
+| Hook                   | Description                                |
+| ---------------------- | ------------------------------------------ |
+| `useDebounce`          | Debounce a value (e.g., search input)      |
+| `useDebouncedCallback` | Debounce a function callback               |
+| `useCopyToClipboard`   | Copy text to clipboard with feedback state |
+| `useBaseSearch`        | Full search state management with filters  |
+| `useIsMobile`          | Responsive breakpoint detection            |
+| `useMediaQuery`        | Generic media query hook                   |
+| `useScrollDetection`   | Detect scroll position/direction           |
 
 ## Exports
 
 ```tsx
-// Main components
+// Main — all components, hooks, and utilities
 import { ... } from "@classytic/fluid";
 
-// Dashboard components (sidebar, header)
+// Dashboard — sidebar layouts, headers, navigation
 import { ... } from "@classytic/fluid/dashboard";
 
-// Layout utilities
+// Layout — Section, Container
 import { ... } from "@classytic/fluid/layout";
+
+// Compact — space-efficient form fields
+import { ... } from "@classytic/fluid/compact";
+
+// Search — composable search UI
+import { ... } from "@classytic/fluid/search";
 ```
 
 ## Requirements
 
-- Next.js with `@/` path alias
+- React 18+ (Next.js optional — required for dashboard/routing components)
 - shadcn/ui components at `@/components/ui/*`
+- Tailwind CSS configured in your project
 
 ## Dev
 
 ```bash
 npm run build   # Build package
 npm run dev     # Watch mode
+npm run clean   # Remove dist
 ```
+
 ## License
 
 **UNLICENSED**
@@ -59,4 +104,4 @@ npm run dev     # Watch mode
 Copyright © 2026 Classytic. All rights reserved.
 
 This software is the confidential and proprietary information of Classytic.
-Unauthorized copying of this software, via any medium is strictly prohibited.
+Unauthorized copying of this software, via any medium is strictly prohibited.

package/animations.css

@@ -0,0 +1,74 @@
+/**
+ * @classytic/fluid — Animation System
+ *
+ * Opt-in file for consumers who want Tailwind animate-* utility classes.
+ * If you already import styles.css, you do NOT need this file —
+ * styles.css includes both the keyframes and theme tokens.
+ *
+ * Usage: @import "@classytic/fluid/animations.css";
+ */
+
+@theme inline {
+  --animate-fade-in: fade-in 0.6s ease-out forwards;
+  --animate-fade-in-up: fade-in-up 0.6s ease-out forwards;
+  --animate-scale-in: scale-in 0.6s ease-out forwards;
+  --animate-slide-in-left: slide-in-left 0.6s ease-out forwards;
+  --animate-slide-in-right: slide-in-right 0.6s ease-out forwards;
+  --animate-slide-in-up: slide-in-up 0.6s ease-out forwards;
+  --animate-slide-in-down: slide-in-down 0.6s ease-out forwards;
+  --animate-pulse-soft: pulse-soft 3s ease-in-out infinite;
+  --animate-float: float 6s ease-in-out infinite;
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes slide-in-left {
+    from { opacity: 0; transform: translateX(-30px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @keyframes slide-in-right {
+    from { opacity: 0; transform: translateX(30px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @keyframes slide-in-up {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes slide-in-down {
+    from { opacity: 0; transform: translateY(-30px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes pulse-soft {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.8; }
+  }
+
+  @keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-fluid-animate] {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}

package/dist/chunk-GUHK2DTW.js

@@ -0,0 +1,15 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { __export, cn };
+//# sourceMappingURL=chunk-GUHK2DTW.js.map
+//# sourceMappingURL=chunk-GUHK2DTW.js.map

package/dist/chunk-GUHK2DTW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts"],"names":[],"mappings":";;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-GUHK2DTW.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n"]}

package/dist/chunk-H3NFL3GJ.js

@@ -0,0 +1,57 @@
+import { cn } from './chunk-GUHK2DTW.js';
+import { jsx } from 'react/jsx-runtime';
+
+var backgrounds = {
+  default: "bg-background",
+  muted: "bg-muted",
+  primary: "bg-primary text-primary-foreground",
+  transparent: "bg-transparent"
+};
+var paddings = {
+  none: "",
+  sm: "py-8 md:py-12",
+  md: "py-12 md:py-16",
+  lg: "py-16 md:py-24",
+  xl: "py-24 md:py-32"
+};
+function Section({
+  id,
+  children,
+  className,
+  background = "default",
+  padding = "sm"
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id,
+      className: cn(backgrounds[background], paddings[padding], className),
+      children
+    }
+  );
+}
+var maxWidthClasses = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  full: "max-w-full"
+};
+function Container({
+  children,
+  className,
+  maxWidth = "7xl"
+}) {
+  const isFullWidth = maxWidth === "full";
+  const baseClass = isFullWidth ? "w-full px-4 sm:px-6 lg:px-10" : "mx-auto px-4 sm:px-6 lg:px-8";
+  return /* @__PURE__ */ jsx("div", { className: cn(baseClass, !isFullWidth && maxWidthClasses[maxWidth], className), children });
+}
+
+export { Container, Section };
+//# sourceMappingURL=chunk-H3NFL3GJ.js.map
+//# sourceMappingURL=chunk-H3NFL3GJ.js.map

package/dist/chunk-H3NFL3GJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layout/section.tsx","../src/layout/container.tsx"],"names":["jsx"],"mappings":";;;AAcA,IAAM,WAAA,GAA0C;AAAA,EAC9C,OAAA,EAAS,eAAA;AAAA,EACT,KAAA,EAAO,UAAA;AAAA,EACP,OAAA,EAAS,oCAAA;AAAA,EACT,WAAA,EAAa;AACf,CAAA;AAEA,IAAM,QAAA,GAAoC;AAAA,EACxC,IAAA,EAAM,EAAA;AAAA,EACN,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,SAAS,OAAA,CAAQ;AAAA,EACtB,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA,GAAa,SAAA;AAAA,EACb,OAAA,GAAU;AACZ,CAAA,EAAiB;AACf,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAW,GAAG,WAAA,CAAY,UAAU,GAAG,QAAA,CAAS,OAAO,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAEJ;ACjCA,IAAM,eAAA,GAA4C;AAAA,EAChD,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,KAAA,EAAO,kBAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAEO,SAAS,SAAA,CAAU;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW;AACb,CAAA,EAAmB;AACjB,EAAA,MAAM,cAAc,QAAA,KAAa,MAAA;AACjC,EAAA,MAAM,SAAA,GAAY,cACd,8BAAA,GACA,8BAAA;AAEJ,EAAA,uBACEA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,CAAC,WAAA,IAAe,eAAA,CAAgB,QAAQ,CAAA,EAAG,SAAS,GAC/E,QAAA,EACH,CAAA;AAEJ","file":"chunk-H3NFL3GJ.js","sourcesContent":["import { cn } from \"../utils\";\r\nimport type { ReactNode } from \"react\";\r\n\r\ntype Background = \"default\" | \"muted\" | \"primary\" | \"transparent\";\r\ntype Padding = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\r\n\r\nexport interface SectionProps {\r\n  id?: string;\r\n  children: ReactNode;\r\n  className?: string;\r\n  background?: Background;\r\n  padding?: Padding;\r\n}\r\n\r\nconst backgrounds: Record<Background, string> = {\r\n  default: \"bg-background\",\r\n  muted: \"bg-muted\",\r\n  primary: \"bg-primary text-primary-foreground\",\r\n  transparent: \"bg-transparent\",\r\n};\r\n\r\nconst paddings: Record<Padding, string> = {\r\n  none: \"\",\r\n  sm: \"py-8 md:py-12\",\r\n  md: \"py-12 md:py-16\",\r\n  lg: \"py-16 md:py-24\",\r\n  xl: \"py-24 md:py-32\",\r\n};\r\n\r\nexport function Section({\r\n  id,\r\n  children,\r\n  className,\r\n  background = \"default\",\r\n  padding = \"sm\",\r\n}: SectionProps) {\r\n  return (\r\n    <section\r\n      id={id}\r\n      className={cn(backgrounds[background], paddings[padding], className)}\r\n    >\r\n      {children}\r\n    </section>\r\n  );\r\n}\r\n","import { cn } from \"../utils\";\r\nimport type { ReactNode } from \"react\";\r\n\r\ntype MaxWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"full\";\r\n\r\nexport interface ContainerProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n  maxWidth?: MaxWidth;\r\n}\r\n\r\nconst maxWidthClasses: Record<MaxWidth, string> = {\r\n  sm: \"max-w-screen-sm\",\r\n  md: \"max-w-screen-md\",\r\n  lg: \"max-w-screen-lg\",\r\n  xl: \"max-w-screen-xl\",\r\n  \"2xl\": \"max-w-screen-2xl\",\r\n  \"4xl\": \"max-w-4xl\",\r\n  \"5xl\": \"max-w-5xl\",\r\n  \"6xl\": \"max-w-6xl\",\r\n  \"7xl\": \"max-w-7xl\",\r\n  full: \"max-w-full\",\r\n};\r\n\r\nexport function Container({\r\n  children,\r\n  className,\r\n  maxWidth = \"7xl\",\r\n}: ContainerProps) {\r\n  const isFullWidth = maxWidth === \"full\";\r\n  const baseClass = isFullWidth\r\n    ? \"w-full px-4 sm:px-6 lg:px-10\"\r\n    : \"mx-auto px-4 sm:px-6 lg:px-8\";\r\n\r\n  return (\r\n    <div className={cn(baseClass, !isFullWidth && maxWidthClasses[maxWidth], className)}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"]}

package/dist/chunk-J2YRTQE4.js

@@ -0,0 +1,293 @@
+import { cn } from './chunk-GUHK2DTW.js';
+import * as React from 'react';
+import { memo, useMemo, useCallback } from 'react';
+import { LoaderIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from '@/components/ui/sheet';
+
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(void 0);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+function ClientSubmitButton({
+  children,
+  disabled,
+  loading = false,
+  loadingText,
+  className,
+  variant,
+  size,
+  form,
+  ...props
+}) {
+  const isDisabled = loading || disabled;
+  const content = loading && loadingText ? loadingText : children;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "submit",
+      form,
+      "aria-disabled": isDisabled,
+      "aria-busy": loading,
+      className: cn("relative", className),
+      disabled: isDisabled,
+      variant,
+      size,
+      ...props,
+      children: [
+        content,
+        loading && /* @__PURE__ */ jsx("span", { className: "animate-spin absolute right-4", children: /* @__PURE__ */ jsx(LoaderIcon, {}) }),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", role: "status", children: loading ? "Loading" : "Submit form" })
+      ]
+    }
+  );
+}
+var SIZE_VARIANTS = {
+  sm: "sm:!max-w-md",
+  default: "w-full sm:!max-w-md md:!max-w-lg",
+  lg: "w-full sm:!max-w-lg md:!max-w-2xl lg:!max-w-4xl",
+  xl: "w-full sm:!max-w-2xl md:!max-w-4xl lg:!max-w-5xl",
+  full: "w-full !max-w-full",
+  mobile: "w-[85%] !max-w-sm",
+  "mobile-nav": "!w-[300px] sm:!w-[350px]"
+};
+var getPadding = (size, type = "default") => {
+  const isFullSize = size === "full";
+  if (type === "header" || type === "footer") {
+    return isFullSize ? "px-6 lg:px-8" : "px-4";
+  }
+  return isFullSize ? "p-6 lg:p-8" : "p-4";
+};
+var SheetWrapper = memo(function SheetWrapper2({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  header,
+  side = "right",
+  size = "default",
+  modal = true,
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  innerClassName,
+  hideHeader = false,
+  hideTitle = false,
+  hideDescription = false,
+  hideCloseButton = false,
+  disableContentPadding = false
+}) {
+  const computedClasses = useMemo(
+    () => ({
+      header: cn(
+        "border-b pb-4 pt-6",
+        getPadding(size, "header"),
+        headerClassName
+      ),
+      inner: cn(
+        "flex-1 overflow-y-auto",
+        !disableContentPadding && getPadding(size),
+        innerClassName
+      ),
+      footer: cn(
+        "border-t bg-muted/30 pt-4 pb-6 mt-auto",
+        getPadding(size, "footer"),
+        footerClassName
+      )
+    }),
+    [
+      size,
+      headerClassName,
+      innerClassName,
+      footerClassName,
+      disableContentPadding
+    ]
+  );
+  const shouldHideTitle = !!header || hideTitle;
+  const shouldHideDescription = !!header || hideDescription;
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side,
+      showCloseButton: !hideCloseButton,
+      className: cn(
+        SIZE_VARIANTS[size],
+        "flex flex-col p-0",
+        contentClassName,
+        className
+      ),
+      children: [
+        !hideHeader && /* @__PURE__ */ jsxs(SheetHeader, { className: computedClasses.header, children: [
+          /* @__PURE__ */ jsx(SheetTitle, { className: shouldHideTitle ? "sr-only" : "", children: title || "Sheet" }),
+          description && /* @__PURE__ */ jsx(
+            SheetDescription,
+            {
+              className: shouldHideDescription ? "sr-only" : "",
+              children: description
+            }
+          ),
+          header
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: computedClasses.inner, children }),
+        footer && /* @__PURE__ */ jsx(SheetFooter, { className: computedClasses.footer, children: footer })
+      ]
+    }
+  ) });
+});
+var FormSheet = memo(function FormSheet2({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  onSubmit,
+  onCancel,
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  submitDisabled = false,
+  submitLoading = false,
+  formId,
+  size = "lg",
+  ...props
+}) {
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    onOpenChange?.(false);
+  }, [onCancel, onOpenChange]);
+  const footer = useMemo(
+    () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2 w-full", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "flex-1",
+          onClick: handleCancel,
+          disabled: submitDisabled || submitLoading,
+          children: cancelLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ClientSubmitButton,
+        {
+          form: formId,
+          className: "flex-1",
+          disabled: submitDisabled,
+          loading: submitLoading,
+          loadingText: "Saving...",
+          children: submitLabel
+        }
+      )
+    ] }),
+    [
+      cancelLabel,
+      submitLabel,
+      submitDisabled,
+      submitLoading,
+      formId,
+      handleCancel
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    SheetWrapper,
+    {
+      open,
+      onOpenChange,
+      title,
+      description,
+      size,
+      footer,
+      ...props,
+      children
+    }
+  );
+});
+var ConfirmSheet = memo(function ConfirmSheet2({
+  open,
+  onOpenChange,
+  title = "Confirm Action",
+  description,
+  children,
+  onConfirm,
+  onCancel,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "default",
+  confirmDisabled = false,
+  confirmLoading = false,
+  size = "sm",
+  ...props
+}) {
+  const handleConfirm = useCallback(() => {
+    onConfirm?.();
+  }, [onConfirm]);
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    onOpenChange?.(false);
+  }, [onCancel, onOpenChange]);
+  const footer = useMemo(
+    () => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 w-full", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "flex-1",
+          onClick: handleCancel,
+          children: cancelLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: confirmVariant,
+          className: "flex-1",
+          onClick: handleConfirm,
+          disabled: confirmDisabled || confirmLoading,
+          children: confirmLoading ? "Loading..." : confirmLabel
+        }
+      )
+    ] }),
+    [
+      cancelLabel,
+      confirmLabel,
+      confirmVariant,
+      confirmDisabled,
+      confirmLoading,
+      handleConfirm,
+      handleCancel
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    SheetWrapper,
+    {
+      open,
+      onOpenChange,
+      title,
+      description,
+      size,
+      footer,
+      ...props,
+      children
+    }
+  );
+});
+
+export { ClientSubmitButton, ConfirmSheet, FormSheet, SheetWrapper, useIsMobile };
+//# sourceMappingURL=chunk-J2YRTQE4.js.map
+//# sourceMappingURL=chunk-J2YRTQE4.js.map

package/dist/chunk-J2YRTQE4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-mobile.ts","../src/components/client-submit-button.tsx","../src/components/sheet-wrapper.tsx"],"names":["SheetWrapper","jsx","jsxs","FormSheet","Button","ConfirmSheet"],"mappings":"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","file":"chunk-J2YRTQE4.js","sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\nexport function useIsMobile() {\r\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\r\n\r\n  React.useEffect(() => {\r\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n    const onChange = () => {\r\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n    };\r\n    mql.addEventListener(\"change\", onChange);\r\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n    return () => mql.removeEventListener(\"change\", onChange);\r\n  }, []);\r\n\r\n  return !!isMobile;\r\n}\r\n","\"use client\";\r\n\r\nimport { ReactNode } from \"react\";\r\nimport { LoaderIcon } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"../utils\";\r\n\r\nexport interface ClientSubmitButtonProps {\r\n  children: ReactNode;\r\n  disabled?: boolean;\r\n  loading?: boolean;\r\n  loadingText?: string;\r\n  className?: string;\r\n  variant?: \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\";\r\n  size?: \"default\" | \"sm\" | \"lg\" | \"icon\";\r\n  form?: string;\r\n}\r\n\r\nexport function ClientSubmitButton({\r\n  children,\r\n  disabled,\r\n  loading = false,\r\n  loadingText,\r\n  className,\r\n  variant,\r\n  size,\r\n  form,\r\n  ...props\r\n}: ClientSubmitButtonProps) {\r\n  const isDisabled = loading || disabled;\r\n  const content = loading && loadingText ? loadingText : children;\r\n\r\n  return (\r\n    <Button\r\n      type=\"submit\"\r\n      form={form}\r\n      aria-disabled={isDisabled}\r\n      aria-busy={loading}\r\n      className={cn(\"relative\", className)}\r\n      disabled={isDisabled}\r\n      variant={variant}\r\n      size={size}\r\n      {...props}\r\n    >\r\n      {content}\r\n      {loading && (\r\n        <span className=\"animate-spin absolute right-4\">\r\n          <LoaderIcon />\r\n        </span>\r\n      )}\r\n      <span aria-live=\"polite\" className=\"sr-only\" role=\"status\">\r\n        {loading ? \"Loading\" : \"Submit form\"}\r\n      </span>\r\n    </Button>\r\n  );\r\n}\r\n","\"use client\";\r\n\r\nimport { memo, useMemo, useCallback, type ReactNode } from \"react\";\r\nimport {\r\n  Sheet,\r\n  SheetContent,\r\n  SheetHeader,\r\n  SheetTitle,\r\n  SheetDescription,\r\n  SheetFooter,\r\n} from \"@/components/ui/sheet\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { ClientSubmitButton } from \"./client-submit-button\";\r\nimport { cn } from \"../utils\";\r\n\r\n// Size variants configuration\r\n// !important is required here because the base SheetContent uses data-attribute\r\n// selectors (data-[side=right]:sm:max-w-sm) which add CSS specificity that plain\r\n// utility classes cannot override via tailwind-merge.\r\nconst SIZE_VARIANTS = {\r\n  sm: \"sm:!max-w-md\",\r\n  default: \"w-full sm:!max-w-md md:!max-w-lg\",\r\n  lg: \"w-full sm:!max-w-lg md:!max-w-2xl lg:!max-w-4xl\",\r\n  xl: \"w-full sm:!max-w-2xl md:!max-w-4xl lg:!max-w-5xl\",\r\n  full: \"w-full !max-w-full\",\r\n  mobile: \"w-[85%] !max-w-sm\",\r\n  \"mobile-nav\": \"!w-[300px] sm:!w-[350px]\",\r\n} as const;\r\n\r\ntype SizeVariant = keyof typeof SIZE_VARIANTS;\r\n\r\nconst getPadding = (\r\n  size: SizeVariant,\r\n  type: \"default\" | \"header\" | \"footer\" = \"default\",\r\n) => {\r\n  const isFullSize = size === \"full\";\r\n\r\n  if (type === \"header\" || type === \"footer\") {\r\n    return isFullSize ? \"px-6 lg:px-8\" : \"px-4\";\r\n  }\r\n\r\n  return isFullSize ? \"p-6 lg:p-8\" : \"p-4\";\r\n};\r\n\r\nexport interface SheetWrapperProps {\r\n  open: boolean;\r\n  onOpenChange: (open: boolean) => void;\r\n  title?: string;\r\n  description?: string;\r\n  children?: ReactNode;\r\n  footer?: ReactNode;\r\n  header?: ReactNode;\r\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  size?: SizeVariant;\r\n  modal?: boolean;\r\n  className?: string;\r\n  headerClassName?: string;\r\n  contentClassName?: string;\r\n  footerClassName?: string;\r\n  innerClassName?: string;\r\n  hideHeader?: boolean;\r\n  hideTitle?: boolean;\r\n  hideDescription?: boolean;\r\n  hideCloseButton?: boolean;\r\n  disableContentPadding?: boolean;\r\n}\r\n\r\nexport const SheetWrapper = memo(function SheetWrapper({\r\n  open,\r\n  onOpenChange,\r\n  title,\r\n  description,\r\n  children,\r\n  footer,\r\n  header,\r\n  side = \"right\",\r\n  size = \"default\",\r\n  modal = true,\r\n  className,\r\n  headerClassName,\r\n  contentClassName,\r\n  footerClassName,\r\n  innerClassName,\r\n  hideHeader = false,\r\n  hideTitle = false,\r\n  hideDescription = false,\r\n  hideCloseButton = false,\r\n  disableContentPadding = false,\r\n}: SheetWrapperProps) {\r\n  const computedClasses = useMemo(\r\n    () => ({\r\n      header: cn(\r\n        \"border-b pb-4 pt-6\",\r\n        getPadding(size, \"header\"),\r\n        headerClassName,\r\n      ),\r\n      inner: cn(\r\n        \"flex-1 overflow-y-auto\",\r\n        !disableContentPadding && getPadding(size),\r\n        innerClassName,\r\n      ),\r\n      footer: cn(\r\n        \"border-t bg-muted/30 pt-4 pb-6 mt-auto\",\r\n        getPadding(size, \"footer\"),\r\n        footerClassName,\r\n      ),\r\n    }),\r\n    [\r\n      size,\r\n      headerClassName,\r\n      innerClassName,\r\n      footerClassName,\r\n      disableContentPadding,\r\n    ],\r\n  );\r\n\r\n  const shouldHideTitle = !!header || hideTitle;\r\n  const shouldHideDescription = !!header || hideDescription;\r\n\r\n  return (\r\n    <Sheet open={open} onOpenChange={onOpenChange} modal={modal}>\r\n      <SheetContent\r\n        side={side}\r\n        showCloseButton={!hideCloseButton}\r\n        className={cn(\r\n          SIZE_VARIANTS[size],\r\n          \"flex flex-col p-0\",\r\n          contentClassName,\r\n          className,\r\n        )}\r\n      >\r\n        {!hideHeader && (\r\n          <SheetHeader className={computedClasses.header}>\r\n            <SheetTitle className={shouldHideTitle ? \"sr-only\" : \"\"}>\r\n              {title || \"Sheet\"}\r\n            </SheetTitle>\r\n            {description && (\r\n              <SheetDescription\r\n                className={shouldHideDescription ? \"sr-only\" : \"\"}\r\n              >\r\n                {description}\r\n              </SheetDescription>\r\n            )}\r\n            {header}\r\n          </SheetHeader>\r\n        )}\r\n\r\n        <div className={computedClasses.inner}>{children}</div>\r\n\r\n        {footer && (\r\n          <SheetFooter className={computedClasses.footer}>{footer}</SheetFooter>\r\n        )}\r\n      </SheetContent>\r\n    </Sheet>\r\n  );\r\n});\r\n\r\nexport interface FormSheetProps extends Omit<SheetWrapperProps, \"footer\"> {\r\n  onSubmit?: () => void;\r\n  onCancel?: () => void;\r\n  submitLabel?: string;\r\n  cancelLabel?: string;\r\n  submitDisabled?: boolean;\r\n  submitLoading?: boolean;\r\n  formId?: string;\r\n}\r\n\r\nexport const FormSheet = memo(function FormSheet({\r\n  open,\r\n  onOpenChange,\r\n  title,\r\n  description,\r\n  children,\r\n  onSubmit,\r\n  onCancel,\r\n  submitLabel = \"Submit\",\r\n  cancelLabel = \"Cancel\",\r\n  submitDisabled = false,\r\n  submitLoading = false,\r\n  formId,\r\n  size = \"lg\",\r\n  ...props\r\n}: FormSheetProps) {\r\n  const handleCancel = useCallback(() => {\r\n    onCancel?.();\r\n    onOpenChange?.(false);\r\n  }, [onCancel, onOpenChange]);\r\n\r\n  const footer = useMemo(\r\n    () => (\r\n      <div className=\"flex flex-col sm:flex-row gap-2 w-full\">\r\n        <Button\r\n          type=\"button\"\r\n          variant=\"outline\"\r\n          className=\"flex-1\"\r\n          onClick={handleCancel}\r\n          disabled={submitDisabled || submitLoading}\r\n        >\r\n          {cancelLabel}\r\n        </Button>\r\n        <ClientSubmitButton\r\n          form={formId}\r\n          className=\"flex-1\"\r\n          disabled={submitDisabled}\r\n          loading={submitLoading}\r\n          loadingText=\"Saving...\"\r\n        >\r\n          {submitLabel}\r\n        </ClientSubmitButton>\r\n      </div>\r\n    ),\r\n    [\r\n      cancelLabel,\r\n      submitLabel,\r\n      submitDisabled,\r\n      submitLoading,\r\n      formId,\r\n      handleCancel,\r\n    ],\r\n  );\r\n\r\n  return (\r\n    <SheetWrapper\r\n      open={open}\r\n      onOpenChange={onOpenChange}\r\n      title={title}\r\n      description={description}\r\n      size={size}\r\n      footer={footer}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </SheetWrapper>\r\n  );\r\n});\r\n\r\nexport interface ConfirmSheetProps extends Omit<SheetWrapperProps, \"footer\"> {\r\n  onConfirm?: () => void;\r\n  onCancel?: () => void;\r\n  confirmLabel?: string;\r\n  cancelLabel?: string;\r\n  confirmVariant?:\r\n    | \"default\"\r\n    | \"destructive\"\r\n    | \"outline\"\r\n    | \"secondary\"\r\n    | \"ghost\"\r\n    | \"link\";\r\n  confirmDisabled?: boolean;\r\n  confirmLoading?: boolean;\r\n}\r\n\r\nexport const ConfirmSheet = memo(function ConfirmSheet({\r\n  open,\r\n  onOpenChange,\r\n  title = \"Confirm Action\",\r\n  description,\r\n  children,\r\n  onConfirm,\r\n  onCancel,\r\n  confirmLabel = \"Confirm\",\r\n  cancelLabel = \"Cancel\",\r\n  confirmVariant = \"default\",\r\n  confirmDisabled = false,\r\n  confirmLoading = false,\r\n  size = \"sm\",\r\n  ...props\r\n}: ConfirmSheetProps) {\r\n  const handleConfirm = useCallback(() => {\r\n    onConfirm?.();\r\n  }, [onConfirm]);\r\n\r\n  const handleCancel = useCallback(() => {\r\n    onCancel?.();\r\n    onOpenChange?.(false);\r\n  }, [onCancel, onOpenChange]);\r\n\r\n  const footer = useMemo(\r\n    () => (\r\n      <div className=\"flex gap-2 w-full\">\r\n        <Button\r\n          type=\"button\"\r\n          variant=\"outline\"\r\n          className=\"flex-1\"\r\n          onClick={handleCancel}\r\n        >\r\n          {cancelLabel}\r\n        </Button>\r\n        <Button\r\n          type=\"button\"\r\n          variant={confirmVariant}\r\n          className=\"flex-1\"\r\n          onClick={handleConfirm}\r\n          disabled={confirmDisabled || confirmLoading}\r\n        >\r\n          {confirmLoading ? \"Loading...\" : confirmLabel}\r\n        </Button>\r\n      </div>\r\n    ),\r\n    [\r\n      cancelLabel,\r\n      confirmLabel,\r\n      confirmVariant,\r\n      confirmDisabled,\r\n      confirmLoading,\r\n      handleConfirm,\r\n      handleCancel,\r\n    ],\r\n  );\r\n\r\n  return (\r\n    <SheetWrapper\r\n      open={open}\r\n      onOpenChange={onOpenChange}\r\n      title={title}\r\n      description={description}\r\n      size={size}\r\n      footer={footer}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </SheetWrapper>\r\n  );\r\n});\r\n"]}