@codapet/design-system 0.7.3 → 0.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/AGENTS.md +126 -0
  2. package/README.md +14 -0
  3. package/dist/index.d.mts +10 -1
  4. package/dist/index.mjs +40 -17
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +3 -2
package/AGENTS.md ADDED
@@ -0,0 +1,126 @@
1
+ # AGENTS.md — `@codapet/design-system`
2
+
3
+ Guidance for AI coding agents working in **consumer codebases** that import `@codapet/design-system`. Read this before reaching for shadcn docs or muscle memory — most things are the same, but a handful of defaults and APIs are not, and the install/publish model is different.
4
+
5
+ > This file is published with the npm package. Consumer repos pull it into agent context via `@./node_modules/@codapet/design-system/AGENTS.md` in their own `CLAUDE.md` / `AGENTS.md`. Don't edit it in a consumer repo — fixes belong upstream in the design-system repo.
6
+
7
+ ## Mental model
8
+
9
+ This is a **shadcn/ui-style** library (Radix primitives + cva variants + Tailwind), but it ships as a **single published npm package** — not copy-paste components. So:
10
+
11
+ - ✅ `import { Button } from '@codapet/design-system'`
12
+ - ❌ Don't `npx shadcn add ...`. Don't copy components into the consumer repo. Add new variants by extending via `className` or, if missing, propose them upstream.
13
+ - ✅ Most shadcn examples translate 1:1 — same `data-slot` attrs, same compound-component patterns (`Card` / `CardHeader` / `CardContent`, `Dialog.Trigger` / `Dialog.Content`, etc.).
14
+ - 'use client' is **already baked in** to every export by the build — never wrap design-system components in your own `'use client'` boundary just for that reason. RSCs that pass props down still work.
15
+ - ESM-only. If a consumer uses Jest, add the package to `transformIgnorePatterns` (or use Vitest, which handles it).
16
+ - Single entry: `from '@codapet/design-system'`. There are **no subpath component imports** — only `'@codapet/design-system'` and `'@codapet/design-system/styles'` exist.
17
+
18
+ ## Required setup in a consumer (Tailwind v4)
19
+
20
+ In the app's global CSS:
21
+
22
+ ```css
23
+ @import 'tailwindcss';
24
+ @source "../node_modules/@codapet/design-system/dist/**/*.{js,mjs,ts,tsx}";
25
+ @import '@codapet/design-system/styles';
26
+ ```
27
+
28
+ The `@source` line is **mandatory** — without it Tailwind won't see the class names used inside the package and components render unstyled. Tailwind v3 consumers add the same path under `content` in `tailwind.config.js`.
29
+
30
+ Wrap the app in `<ThemeProvider>` (re-export of `next-themes` with `attribute="class"`, `defaultTheme="light"`, `enableSystem`, `disableTransitionOnChange` pre-set), and mount `<Toaster />` once at the root. Both come from the package.
31
+
32
+ Required font CSS variables (set on `<body>` or `<html>`): `--font-plus-jakarta-sans` (sans), `--font-noto-serif` (serif, used by display headings — italic), `--font-geist-mono`. Without these, `font-sans`/`font-serif`/`font-mono` fall back to the browser default.
33
+
34
+ ## Differences from shadcn defaults
35
+
36
+ These are the foot-guns. Knowing them prevents most "why does my Button look wrong" loops.
37
+
38
+ ### Button
39
+
40
+ - **Default `variant` is `primary`**, not `default`. There is no `default` variant. Available: `primary | secondary | tertiary | outline | ghost | ghost-secondary | ghost-destructive | link | destructive | destructive-secondary | destructive-tertiary`.
41
+ - **Default `size` is `lg` (h-12)**, not `default` (h-9). Sizes: `sm` (h-9) · `md` (h-10) · `lg` (h-12) · `icon` (size-8). For a typical inline action, you usually want `size="md"` — passing nothing gives you a chunky button.
42
+ - Has `cursor-pointer` baked in (shadcn doesn't).
43
+
44
+ ### Input
45
+
46
+ - Custom `size` prop: `sm` (h-10) · `md` (h-12, default) · `lg` (h-14). All bigger than shadcn's h-9.
47
+ - Built-in `leftIcon`, `rightIcon`, `rightIconOnClick`, `error` props — don't wrap Input in your own icon container, use these. `rightIcon` renders inside a `Button` (clickable); `leftIcon` is decorative.
48
+ - Pass `error={true}` to switch to the error color scheme; it also sets `aria-invalid`.
49
+
50
+ ### Textarea
51
+
52
+ - Same `error` prop pattern as Input.
53
+ - For auto-grow, use `AutoResizeTextarea` (custom, takes `minHeight` / `maxHeight` in px) — don't reach for `field-sizing-content` manually.
54
+
55
+ ### Toast
56
+
57
+ - Import `toast` and `Toaster` from `@codapet/design-system`, **not** from `'sonner'`. The exported `Toaster` is pre-styled to match alert tokens; using sonner directly will produce off-brand toasts.
58
+ - Mount `<Toaster />` once in the root layout.
59
+
60
+ ### Form
61
+
62
+ - Standard shadcn pattern: `react-hook-form` + `zod` + `Form / FormField / FormItem / FormLabel / FormControl / FormMessage`. Same API as shadcn — no surprises here.
63
+
64
+ ### Dialog vs SmartDialog
65
+
66
+ - `Dialog`/`Drawer` are the standard Radix/Vaul primitives.
67
+ - **`SmartDialog*`** is a CodaPet addition: same API surface, but renders `Drawer` on `≤600px` and `Dialog` above. Prefer it for any modal that should bottom-sheet on mobile. Replace every `Dialog` token with `SmartDialog` (`SmartDialogTrigger`, `SmartDialogContent`, etc.).
68
+
69
+ ## Components added on top of shadcn
70
+
71
+ These don't exist in shadcn — reach for them instead of building your own:
72
+
73
+ | Component | Use when |
74
+ |---|---|
75
+ | `AlertBanner` | Inline page-level alerts with `type` = `informative` / `error` / `success`, optional `heading`, `icon`, `dismissible`. Distinct from `Alert` (shadcn-equivalent). |
76
+ | `BadgeActionable` | Clickable chip/filter badge with `selected` state and `onBackground` modifier. |
77
+ | `BadgeInformative` (+ `Group` / `Item`) | Read-only info badge with `colorScheme` = `gray` / `blue` / `yellow`. Use `Group` + `Item` for multi-content badges in one container. |
78
+ | `BadgeNumber` | Numeric pill (counts, step indicators). `state` = `active` / `disabled` / `resting`. |
79
+ | `OptionCard` | Selectable card with built-in radio/checkbox indicator. `selectionType` = `single` / `multiple`, `selectorPosition` = `left` / `right`. Visual-only — wire `selected` and `onClick` yourself. |
80
+ | `DropdownSelect` | Compound `DropdownSelect` / `Trigger` / `Content` / `Option` / `Label`. Lighter alternative to `Select` for simple lists. |
81
+ | `SearchableSelect` | Combobox-style select with search; supports `mode="single"` or `"multiple"` + `maxCount` for tag overflow. |
82
+ | `MultiSelectFreeText` | Tag input where users can type free text **and** pick from suggestions. |
83
+ | `SearchInput` | Search field with `variant="icon"` or `"button"`, suggestions dropdown, and clear button. Don't compose this from `Input` + a Search icon. |
84
+ | `DateInput` / `DateRangeInput` | Text input + Calendar popover. Controlled via `date`/`setDate` (or `dateRange`/`setDateRange`). Configurable `dateFormat` (15 options including `'MMM D, YYYY'`, `'DD/MM/YYYY'`, etc.). Prefer over a bare `Calendar`. |
85
+ | `TimeInput` | Time picker with `timeFormat` = `'12h' \| '24h' \| 'h:mm a' \| 'h:mm A'`. Value is `{ hours, minutes }`, not a `Date`. |
86
+ | `AutoResizeTextarea` | Textarea that grows with content; `maxHeight` enables scroll. Handles RHF `setValue`/`reset` correctly. |
87
+ | `ProgressBar` | Step-based bar; pass `currentStep` + `totalSteps`, or `value` (0–100) directly. |
88
+ | `SmartDialog*` | Responsive Dialog↔Drawer (see above). |
89
+ | `Typography`: `DisplayHeading`, `HeadingXL` … `HeadingXXS` (+ `*Medium` variants), `Body` | Use these instead of raw `<h1>`/`<p>` to inherit the right tokens (`font-serif italic` for display, `text-vibrant-text-heading` for headings, `text-vibrant-text-body` for body). Sizes are responsive (md: breakpoint baked in). |
90
+ | `ThemeToggle` | Drop-in light/dark toggle. |
91
+
92
+ ## Color tokens (don't reach for raw Tailwind colors)
93
+
94
+ The brand palette lives in CSS variables exposed as Tailwind colors. Use these, not `bg-blue-600`, `text-gray-500`, `border-red-300`, etc. — raw colors won't dark-mode correctly.
95
+
96
+ - **Brand**: `brand-{subtle,light,normal,vibrant,dark}`, `brand-text-vibrant`. `primary` aliases `brand-normal`.
97
+ - **Surfaces** (backgrounds): `gray-surface-{light,default,dark}`, `primary-surface-{subtle,light,default}`, `secondary-surface-default`, `sand-{subtle,light,normal,dark}`, `sage-{light,normal,dark}`, `rose-{light,normal,dark}`, `error-surface-{subtle,light,default,dark}`, `success-surface-{subtle,default}`, `warning-surface-{subtle,light}`.
98
+ - **Strokes** (borders): `gray-stroke-{light,default}`, `primary-stroke-default`, `secondary-stroke-{light,default}`, `error-stroke-{light,default}`, `success-stroke-light`, `warning-stroke-{default,dark}`, `sand-stroke-disabled`.
99
+ - **Text**: `vibrant-text-{display,heading,body,details,white-darker}`, `secondary-text-dark`, `gray-subtle`, `foreground-secondary`, `destructive-text`.
100
+ - **Icons**: `gray-icon-{subtle,light,default,dark}`, `icon-disabled`.
101
+ - **Semantic** (inherited from shadcn): `background`, `foreground`, `border`, `input`, `ring`, `card`, `popover`, `primary`, `secondary`, `muted`, `accent`, `destructive`, `sidebar*`. These are wired to the brand palette in light **and** dark mode.
102
+
103
+ Source of truth: `src/styles.css` in this package. If a token is missing, propose it there rather than hardcoding a hex.
104
+
105
+ ## Spacing & sizing conventions
106
+
107
+ - Components are built with **fixed pixel heights**, not `py-*` shorthands. Buttons: 36/40/48 (sm/md/lg). Inputs: 40/48/56. Badges (informative/actionable): 24/32/40. Match these when building adjacent custom UI.
108
+ - Border radius is **per-component**, not global — Buttons `rounded-md`, Cards `rounded-xl`, Badges `rounded-md` (default) or `rounded-[8px]` (informative/actionable), Alert banners `rounded-[12px]`. Don't override unless you have a reason.
109
+ - Mobile breakpoint is **768px** (`useIsMobile`), but `SmartDialog*` switches at **600px** via its own `useMediaQuery`. They are intentionally different — use the right one.
110
+
111
+ ## Utilities & hooks
112
+
113
+ - `cn(...inputs)` — `clsx` + `tailwind-merge`. Use it when composing `className` props passed to design-system components, so caller classes win conflicts cleanly.
114
+ - `useIsMobile()` — boolean, 768px breakpoint, SSR-safe (returns `false` on first render).
115
+ - `useTheme()` — re-exported from `next-themes`.
116
+ - `buttonVariants`, `badgeVariants`, etc. — exported `cva` instances. Use them when you need the same look on a non-button element (e.g. an `<a>` styled like a button) instead of reimplementing the styles.
117
+
118
+ ## Common gotchas
119
+
120
+ - **Unstyled components** → missing `@source` glob for `node_modules/@codapet/design-system/dist/**` in the consumer's CSS.
121
+ - **Wrong default Button look** → you forgot `variant="primary"`/`size="md"` are not the same as shadcn's defaults; passing nothing gives you `primary` + `lg`.
122
+ - **Toast looks generic** → you imported `toast` from `'sonner'` instead of from `@codapet/design-system`.
123
+ - **Modal doesn't bottom-sheet on mobile** → you used `Dialog` instead of `SmartDialog`.
124
+ - **Headings look wrong** → you used a raw `<h1>` instead of `HeadingXL` / `DisplayHeading`. The serif-italic display style only comes from `DisplayHeading`.
125
+ - **Dark mode broken** → you used raw Tailwind colors (`bg-gray-100`, `text-zinc-700`) instead of brand tokens; or you forgot to wrap in `ThemeProvider`.
126
+ - **"Module not found" in tests** → Jest can't parse ESM; add `'@codapet/design-system'` to `transformIgnorePatterns` or switch the test file to Vitest.
package/README.md CHANGED
@@ -349,6 +349,20 @@ For detailed information about how dependencies are organized and managed, see [
349
349
  - **Dependencies**: UI libraries and utilities (bundled with library)
350
350
  - **Dev Dependencies**: Build tools and development utilities (not included in package)
351
351
 
352
+ ## Using with AI coding agents
353
+
354
+ This package ships an [`AGENTS.md`](./AGENTS.md) at its root — a guide for AI agents (Claude Code, Cursor, Codex, etc.) explaining how the library differs from stock shadcn/ui (button defaults, custom components, brand tokens, common gotchas). It's published with the npm tarball, so once you've installed the package, the file is at `node_modules/@codapet/design-system/AGENTS.md`.
355
+
356
+ To make Claude Code automatically pull it into every session in your consumer repo, add one line to your repo's `CLAUDE.md` (or `AGENTS.md`):
357
+
358
+ ```
359
+ @./node_modules/@codapet/design-system/AGENTS.md
360
+ ```
361
+
362
+ The `@path` syntax inlines the file's content into the agent's context. Because it resolves at session start, the guide always matches the version of `@codapet/design-system` you have installed — bump the dep, get the updated guide, no copy-paste.
363
+
364
+ For other agent tools (Cursor, Codex, etc.) the file is still readable at the same path; refer to your tool's docs for how to point it at additional context files.
365
+
352
366
  ## Contributing
353
367
 
354
368
  1. Fork the repository
package/dist/index.d.mts CHANGED
@@ -380,8 +380,17 @@ declare function DrawerTrigger({ ...props }: React$1.ComponentProps<typeof Drawe
380
380
  declare function DrawerPortal({ ...props }: React$1.ComponentProps<typeof Drawer$1.Portal>): react_jsx_runtime.JSX.Element;
381
381
  declare function DrawerClose({ ...props }: React$1.ComponentProps<typeof Drawer$1.Close>): react_jsx_runtime.JSX.Element;
382
382
  declare function DrawerOverlay({ className, ...props }: React$1.ComponentProps<typeof Drawer$1.Overlay>): react_jsx_runtime.JSX.Element;
383
- declare function DrawerContent({ className, children, withCloseButton, ...props }: React$1.ComponentProps<typeof Drawer$1.Content> & {
383
+ declare const drawerDirectionClasses: {
384
+ readonly top: "inset-x-0 top-0 max-h-[80vh] rounded-b-3xl border-b border-border-default";
385
+ readonly bottom: "inset-x-0 bottom-0 max-h-[80vh] rounded-t-3xl border-t border-border-default";
386
+ readonly right: "inset-y-0 right-0 w-3/4 border-l border-border-default sm:max-w-sm";
387
+ readonly left: "inset-y-0 left-0 w-3/4 border-r border-border-default sm:max-w-sm";
388
+ };
389
+ declare function DrawerContent({ className, children, withCloseButton, showCloseButton, direction, overlayClassName, ...props }: React$1.ComponentProps<typeof Drawer$1.Content> & {
384
390
  withCloseButton?: boolean;
391
+ showCloseButton?: boolean;
392
+ direction?: keyof typeof drawerDirectionClasses;
393
+ overlayClassName?: string;
385
394
  }): react_jsx_runtime.JSX.Element;
386
395
  declare function DrawerHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
387
396
  declare function DrawerFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
package/dist/index.mjs CHANGED
@@ -1755,7 +1755,7 @@ function DialogOverlay({
1755
1755
  {
1756
1756
  "data-slot": "dialog-overlay",
1757
1757
  className: cn(
1758
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
1758
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40",
1759
1759
  className
1760
1760
  ),
1761
1761
  ...props
@@ -1776,7 +1776,7 @@ function DialogContent({
1776
1776
  {
1777
1777
  "data-slot": "dialog-content",
1778
1778
  className: cn(
1779
- "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-400 sm:max-w-lg",
1779
+ "bg-background border-border-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-3xl border p-6 shadow-lg duration-400 sm:max-w-lg",
1780
1780
  className
1781
1781
  ),
1782
1782
  ...props,
@@ -1786,7 +1786,7 @@ function DialogContent({
1786
1786
  DialogPrimitive.Close,
1787
1787
  {
1788
1788
  "data-slot": "dialog-close",
1789
- className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
1789
+ className: "border-border-default text-muted-foreground hover:bg-muted absolute top-4 right-4 flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
1790
1790
  children: [
1791
1791
  /* @__PURE__ */ jsx21(XIcon, {}),
1792
1792
  /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Close" })
@@ -2957,6 +2957,7 @@ function DateRangeInput({
2957
2957
  }
2958
2958
 
2959
2959
  // src/components/ui/drawer.tsx
2960
+ import { XIcon as XIcon2 } from "lucide-react";
2960
2961
  import "react";
2961
2962
  import { Drawer as DrawerPrimitive } from "vaul";
2962
2963
  import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -2989,36 +2990,53 @@ function DrawerOverlay({
2989
2990
  {
2990
2991
  "data-slot": "drawer-overlay",
2991
2992
  className: cn(
2992
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
2993
+ "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40",
2993
2994
  className
2994
2995
  ),
2995
2996
  ...props
2996
2997
  }
2997
2998
  );
2998
2999
  }
3000
+ var drawerDirectionClasses = {
3001
+ top: "inset-x-0 top-0 max-h-[80vh] rounded-b-3xl border-b border-border-default",
3002
+ bottom: "inset-x-0 bottom-0 max-h-[80vh] rounded-t-3xl border-t border-border-default",
3003
+ right: "inset-y-0 right-0 w-3/4 border-l border-border-default sm:max-w-sm",
3004
+ left: "inset-y-0 left-0 w-3/4 border-r border-border-default sm:max-w-sm"
3005
+ };
2999
3006
  function DrawerContent({
3000
3007
  className,
3001
3008
  children,
3002
3009
  withCloseButton = true,
3010
+ showCloseButton = true,
3011
+ direction = "bottom",
3012
+ overlayClassName,
3003
3013
  ...props
3004
3014
  }) {
3005
3015
  return /* @__PURE__ */ jsxs15(DrawerPortal, { "data-slot": "drawer-portal", children: [
3006
- /* @__PURE__ */ jsx28(DrawerOverlay, {}),
3016
+ /* @__PURE__ */ jsx28(DrawerOverlay, { className: overlayClassName }),
3007
3017
  /* @__PURE__ */ jsxs15(
3008
3018
  DrawerPrimitive.Content,
3009
3019
  {
3010
3020
  "data-slot": "drawer-content",
3011
3021
  className: cn(
3012
3022
  "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
3013
- "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
3014
- "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
3015
- "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
3016
- "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
3023
+ drawerDirectionClasses[direction],
3017
3024
  className
3018
3025
  ),
3019
3026
  ...props,
3020
3027
  children: [
3021
3028
  withCloseButton && /* @__PURE__ */ jsx28("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
3029
+ showCloseButton && /* @__PURE__ */ jsxs15(
3030
+ DrawerPrimitive.Close,
3031
+ {
3032
+ "data-slot": "drawer-close-button",
3033
+ className: "border-border-default text-muted-foreground hover:bg-muted absolute top-4 right-4 z-10 flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
3034
+ children: [
3035
+ /* @__PURE__ */ jsx28(XIcon2, {}),
3036
+ /* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Close" })
3037
+ ]
3038
+ }
3039
+ ),
3022
3040
  children
3023
3041
  ]
3024
3042
  }
@@ -3043,7 +3061,10 @@ function DrawerFooter({ className, ...props }) {
3043
3061
  "div",
3044
3062
  {
3045
3063
  "data-slot": "drawer-footer",
3046
- className: cn("mt-auto flex flex-col gap-2 p-4", className),
3064
+ className: cn(
3065
+ "border-border mt-auto flex shrink-0 flex-col gap-2 border-t px-4 pt-4 pb-[max(1rem,env(safe-area-inset-bottom,0px))]",
3066
+ className
3067
+ ),
3047
3068
  ...props
3048
3069
  }
3049
3070
  );
@@ -5166,7 +5187,7 @@ function SearchInput({
5166
5187
 
5167
5188
  // src/components/ui/searchable-select.tsx
5168
5189
  import * as React44 from "react";
5169
- import { CheckIcon as CheckIcon4, ChevronsUpDown, XIcon as XIcon2 } from "lucide-react";
5190
+ import { CheckIcon as CheckIcon4, ChevronsUpDown, XIcon as XIcon3 } from "lucide-react";
5170
5191
  import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
5171
5192
  var SearchableSelectContext = React44.createContext(null);
5172
5193
  function useSearchableSelect() {
@@ -5334,7 +5355,7 @@ function SearchableSelectTrigger({
5334
5355
  e.stopPropagation();
5335
5356
  ctx.setValues(ctx.values.filter((val) => val !== v));
5336
5357
  },
5337
- children: /* @__PURE__ */ jsx46(XIcon2, { className: "size-3" })
5358
+ children: /* @__PURE__ */ jsx46(XIcon3, { className: "size-3" })
5338
5359
  }
5339
5360
  )
5340
5361
  ]
@@ -5691,7 +5712,7 @@ function Separator5({
5691
5712
 
5692
5713
  // src/components/ui/sheet.tsx
5693
5714
  import * as SheetPrimitive from "@radix-ui/react-dialog";
5694
- import { XIcon as XIcon3 } from "lucide-react";
5715
+ import { XIcon as XIcon4 } from "lucide-react";
5695
5716
  import "react";
5696
5717
  import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
5697
5718
  function Sheet({ ...props }) {
@@ -5753,7 +5774,7 @@ function SheetContent({
5753
5774
  children: [
5754
5775
  children,
5755
5776
  showCloseButton && /* @__PURE__ */ jsxs29(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
5756
- /* @__PURE__ */ jsx49(XIcon3, { className: "size-4" }),
5777
+ /* @__PURE__ */ jsx49(XIcon4, { className: "size-4" }),
5757
5778
  /* @__PURE__ */ jsx49("span", { className: "sr-only", children: "Close" })
5758
5779
  ] })
5759
5780
  ]
@@ -6683,7 +6704,7 @@ var SmartDialog = ({ children, ...props }) => {
6683
6704
  };
6684
6705
  var SmartDialogContent = ({
6685
6706
  children,
6686
- overlayClassName = "",
6707
+ overlayClassName,
6687
6708
  withCloseButton,
6688
6709
  showCloseButton,
6689
6710
  ...props
@@ -6693,14 +6714,16 @@ var SmartDialogContent = ({
6693
6714
  DrawerContent,
6694
6715
  {
6695
6716
  ...props,
6696
- withCloseButton: withCloseButton ?? showCloseButton ?? true,
6717
+ overlayClassName,
6718
+ withCloseButton: withCloseButton ?? true,
6719
+ showCloseButton: showCloseButton ?? true,
6697
6720
  children
6698
6721
  }
6699
6722
  ) : /* @__PURE__ */ jsx54(
6700
6723
  DialogContent,
6701
6724
  {
6702
6725
  ...props,
6703
- showCloseButton: showCloseButton ?? withCloseButton ?? true,
6726
+ showCloseButton: showCloseButton ?? true,
6704
6727
  overlayClassName,
6705
6728
  children
6706
6729
  }