@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.4

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @codefast/ui
 
+## 0.4.0-canary.4
+
+### Minor Changes
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`8fdbf99`](https://github.com/codefastlabs/codefast/commit/8fdbf99e9b889e6937aca721a3f439cc25b6ea4b) Thanks [@thevuong](https://github.com/thevuong)! - Add `--ease-exit` motion token and apply asymmetric enter/exit easing across overlay, popup, accordion, and sidebar components, syncing dialog overlay durations with content.
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`377224b`](https://github.com/codefastlabs/codefast/commit/377224bc337ca15ee4cfcfc1ddd9667bfce96b04) Thanks [@thevuong](https://github.com/thevuong)! - Add semantic motion duration tokens (`menu`, `popup`, `overlay`, `panel`, `expand`) and retune component timings for snappier feedback — menus 150/100ms, popovers 200/120ms, dialogs 220/150ms, sheets and drawers 320/220ms, accordion 200/150ms.
+
+### Patch Changes
+
+- [`6685ce3`](https://github.com/codefastlabs/codefast/commit/6685ce3db5042d0c1b90bda98d5d1517eeade1d2) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): update source file patterns in preset.css
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`eecb986`](https://github.com/codefastlabs/codefast/commit/eecb9862353b93f76a03a75015a3b7c4e0ba948d) Thanks [@thevuong](https://github.com/thevuong)! - chore(deps): update catalog dependencies — radix-ui 1.5.0, react-hook-form 7.78.0, TanStack Router/Start patches, hono 4.12.25, oxfmt 0.54 / oxlint 1.69, knip 6.16, turbo 2.9.17-canary.7 — and bump pnpm to 11.5.2
+
+- [`451da65`](https://github.com/codefastlabs/codefast/commit/451da65cf5b55cf982b0cb72396d7e08cbeab4ec) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): remove "use client" directive from multiple components
+
+- [`b4ac0df`](https://github.com/codefastlabs/codefast/commit/b4ac0df0ed6073915c5b3502af60bb65489bc1fc) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): replace @radix-ui/react-context with radix-ui package
+
+- [`06ab079`](https://github.com/codefastlabs/codefast/commit/06ab079012d82e8bd37f47a9978a98c446b6b0c9) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): adjust border radius in input group styles
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`48c6661`](https://github.com/codefastlabs/codefast/commit/48c66618f88d4fa93c769e9ede2776f5c8075aa2) Thanks [@thevuong](https://github.com/thevuong)! - fix(ui): align ContextMenuSubTrigger spacing with ContextMenuItem so submenu trigger icons sit correctly
+
+- [`c2e6f73`](https://github.com/codefastlabs/codefast/commit/c2e6f73d39912a9675f53233ce3464f76ad00b1b) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): streamline component styling and className usage
+
+- [`801ac83`](https://github.com/codefastlabs/codefast/commit/801ac83659e00c84cf0d0dc4b1e2a632f7f26e20) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): enhance InputGroup component structure and styling
+
+- [`dfcd7ef`](https://github.com/codefastlabs/codefast/commit/dfcd7ef01c224e5fa4f30b760daedda85b35dd55) Thanks [@thevuong](https://github.com/thevuong)! - feat(ui): enhance InputNumber component with new split variant and additional functionality
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`480292c`](https://github.com/codefastlabs/codefast/commit/480292c36615c682f58e88fdb3136781620b98c0) Thanks [@thevuong](https://github.com/thevuong)! - refactor(navigation-menu): pass the trigger `className` to `navigationMenuTriggerVariants` as a `ClassValue` array instead of pre-merging with `cn`, letting the variant resolver handle merging in one pass
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`391f4c7`](https://github.com/codefastlabs/codefast/commit/391f4c768a589eb47808ba8f1dcfe7c60ba2bfe5) Thanks [@thevuong](https://github.com/thevuong)! - Fix navigation menu viewport scale animation by replacing the invalid `origin-top-center` class with `origin-[top_center]`.
+
+- [`2425b93`](https://github.com/codefastlabs/codefast/commit/2425b9310ee6bf62c7b74a85516808f7159bf152) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): update component styling for consistency and clarity
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`fa338d6`](https://github.com/codefastlabs/codefast/commit/fa338d61fbfafb94beaa4d05d93d01e2c005cc91) Thanks [@thevuong](https://github.com/thevuong)! - Normalize import statement order and package.json key order repo-wide via the new oxfmt `sortImports`/`sortPackageJson` settings — purely mechanical, no runtime behavior change.
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`68bc271`](https://github.com/codefastlabs/codefast/commit/68bc271a3f9864c68045ee495f510c19f3ac1c80) Thanks [@thevuong](https://github.com/thevuong)! - fix(ui): restore side-scoped slide animations on popover, hover-card, select, and tooltip
+
+  Reinstate ease-snappy easing with distinct open/close durations, scope slide-in
+  classes under data-open (and data-delayed-open for tooltip), and bring back
+  directional slide-out on close — matching the previously restored context menu,
+  dropdown menu, and menubar motion.
+
+- [`2247289`](https://github.com/codefastlabs/codefast/commit/2247289ccc8c983a5cf8dd4689d185eab6f6adb3) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): enhance BreadcrumbSeparator component styling and props
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`b66cb9d`](https://github.com/codefastlabs/codefast/commit/b66cb9debecb933f84ab1b4c711a01430823b641) Thanks [@thevuong](https://github.com/thevuong)! - Scope overlay enter/exit timing with `animation-duration-*` utilities (no more implicit all-property transitions from `duration-*`), make the navigation menu viewport size transition explicit, and fix the input OTP caret blink speed so the intended 1s duration actually applies.
+
+- [`0636d46`](https://github.com/codefastlabs/codefast/commit/0636d46e54366a690fb8b9a85bb3adafe3e73fbc) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): replace `react-day-picker` with `@daypicker/react`
+
+- [`ae3240a`](https://github.com/codefastlabs/codefast/commit/ae3240a4a8f026aa4f5d04fd270022139fc77433) Thanks [@thevuong](https://github.com/thevuong)! - feat(ui): export DirectionProvider to propagate reading direction
+
+- [`09c3782`](https://github.com/codefastlabs/codefast/commit/09c3782ad73a5d5d76e678d9d71ab22135cebd5a) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): simplify DirectionProvider and useDirection
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`95b0ec4`](https://github.com/codefastlabs/codefast/commit/95b0ec41b5223ee48aeb6d82213f6b6d5c5cdd1e) Thanks [@thevuong](https://github.com/thevuong)! - Tune dialog, alert-dialog, drawer, and sheet overlay animations with asymmetric open/close durations and gentle easing.
+
+- [#495](https://github.com/codefastlabs/codefast/pull/495) [`c60a41f`](https://github.com/codefastlabs/codefast/commit/c60a41f28af1e51d29331c3716ec5023e41b617a) Thanks [@thevuong](https://github.com/thevuong)! - refactor(ui): drop redundant single-arg `cn(className)` in Breadcrumb, CalendarRoot, AlertDialogAction/Cancel, and SidebarTrigger — `className` already forwards through `...props`, so the extra destructure and wrapper added nothing
+
+- Updated dependencies [[`fa338d6`](https://github.com/codefastlabs/codefast/commit/fa338d61fbfafb94beaa4d05d93d01e2c005cc91), [`b097689`](https://github.com/codefastlabs/codefast/commit/b0976892cae3433670837aee0872262d38be0f45), [`7a4f8c3`](https://github.com/codefastlabs/codefast/commit/7a4f8c3b487526a319c6808d1164ba1c8168e9b6)]:
+  - @codefast/tailwind-variants@0.4.0-canary.4
+
 ## 0.3.16-canary.3
 
 ### Patch Changes

package/README.md

@@ -86,7 +86,7 @@ Import the palette and the preset **after** `tailwindcss` so Tailwind isn't dupl
 @import "tailwindcss";
 
 /* @codefast/ui tokens + preset */
-@import "@codefast/ui/css/slate.css";
+@import "@codefast/ui/css/themes/slate.css";
 @import "@codefast/ui/css/preset.css";
 ```
 
@@ -110,7 +110,7 @@ Make sure your bundler can process CSS `@import` (Vite and Next.js do this out o
 
 ### Theme palettes
 
-Replace `slate.css` with any of the palettes below:
+Replace `themes/slate.css` with any palette under `@codefast/ui/css/themes/`:
 
 ```
 amber · blue · cyan · emerald · fuchsia · gray · green · indigo · lime · neutral
@@ -134,7 +134,7 @@ Pair with [`@codefast/theme`](../theme/README.md) for SSR-safe theme management
 Override CSS custom properties after the imports:
 
 ```css
-@import "@codefast/ui/css/slate.css";
+@import "@codefast/ui/css/themes/slate.css";
 @import "@codefast/ui/css/preset.css";
 
 :root {
@@ -258,7 +258,7 @@ All components are also re-exported from the root entry `@codefast/ui`.
 | `Alert`          | `@codefast/ui/alert`           | Inline status message.          |
 | `Avatar`         | `@codefast/ui/avatar`          | User avatar with fallback.      |
 | `Badge`          | `@codefast/ui/badge`           | Status pill.                    |
-| `Calendar`       | `@codefast/ui/calendar`        | Date picker (react-day-picker). |
+| `Calendar`       | `@codefast/ui/calendar`        | Date picker (@daypicker/react). |
 | `Carousel`       | `@codefast/ui/carousel`        | Slider (embla-carousel).        |
 | `Chart`          | `@codefast/ui/chart`           | Responsive charts (recharts).   |
 | `Collapsible`    | `@codefast/ui/collapsible`     | Expand/collapse primitive.      |
@@ -298,7 +298,9 @@ Low-level building blocks, used internally by the styled components, exposed for
 | `@codefast/ui/primitives/checkbox-group`  | Controlled checkbox-group state machine.                 |
 | `@codefast/ui/primitives/progress-circle` | Math + a11y primitive for circular progress.             |
 | `@codefast/ui/lib/utils`                  | `cn()` — classname merge helper used by every component. |
-| `@codefast/ui/css/*`                      | Palette + preset CSS files (see [Styling](#styling)).    |
+| `@codefast/ui/css/themes/*`               | Theme palette CSS files (see [Styling](#styling)).       |
+| `@codefast/ui/css/preset.css`             | Tailwind preset: variants, `cf-*` utilities, base layer. |
+| `@codefast/ui/css/style.css`              | Bundled Tailwind + default palette + preset.             |
 
 ```tsx
 import { cn } from "@codefast/ui/lib/utils";
@@ -312,32 +314,32 @@ const classes = cn("rounded-md px-3 py-1", disabled && "opacity-50");
 
 If you ship TanStack Start behind **[Nitro](https://v3.nitro.build/)** and **Vite 8 (Rolldown)**, you may hit a server-side `TypeError` referencing `__extends` or `__toESM(...).default` during route loaders or SSR. It originates from CJS `tslib` usage inside overlay-related dependencies (Dialog, Sheet, Menu, …) that reach for `react-remove-scroll-bar` and friends.
 
-**Preferred fix** — make Nitro pick ESM entry points from those packages:
+**Fix** — make Nitro resolve the ESM entry points of those packages via the `module` export condition. Pass it to the `nitro` plugin so the server build picks ESM over CJS:
 
 ```ts
 // vite.config.ts
 import { defineConfig } from "vite";
+import { nitro } from "nitro/vite";
 
 export default defineConfig({
-  nitro: {
-    exportConditions: ["import", "module", "default"],
-  },
-  // plugins: [tanstackStart(), nitro(), …],
+  plugins: [
+    // tanstackStart(), …
+    nitro({ exportConditions: ["module"] }),
+  ],
 });
 ```
 
-**Fallback** — alias `tslib` to its ESM build:
+Keep the client `resolve.conditions` aligned with the server so both sides resolve the same entry points — a mismatch can otherwise surface as a hydration warning:
 
 ```ts
 export default defineConfig({
   resolve: {
-    alias: { tslib: "tslib/tslib.es6.mjs" },
+    conditions: ["module"],
   },
+  // …
 });
 ```
 
-> Don't use `nitro.alias` for the bare specifier `tslib`. In Nitro v3 that option is for unenv path overrides, not npm package names, and produces broken resolutions.
-
 ---
 
 ## Troubleshooting
@@ -347,7 +349,7 @@ export default defineConfig({
 | Components render unstyled                       | Make sure CSS imports run before the first component mounts (import from the app entry).          |
 | Tailwind output is duplicated                    | Use the palette + `preset.css` import — don't also import `css/style.css` in the same app.        |
 | Dark mode doesn't apply                          | Add the `dark` class to `<html>` (or any ancestor). See [Dark mode](#dark-mode).                  |
-| `Cannot destructure property '__extends'` in SSR | Set `nitro.exportConditions: ["import", "module", "default"]` (see above).                        |
+| `Cannot destructure property '__extends'` in SSR | Pass `exportConditions: ["module"]` to the `nitro` plugin (see above).                            |
 | Missing font or radius after palette switch      | Re-import the palette **before** `preset.css`. Preset depends on palette variables being defined. |
 
 ---
@@ -390,7 +392,16 @@ Adding a component:
 4. Add tests under `src/components/__tests__` (unit + `jest-axe` if interactive).
 5. Run `pnpm --filter @codefast/ui build` to verify `tsdown` picks up the new entry.
 
-CSS entry exports under `@codefast/ui/css/*` are sourced directly from `src/css/*`.
+CSS exports under `@codefast/ui/css/*` map to `src/css/`:
+
+```
+css/
+├── style.css          # Tailwind + themes/neutral + preset
+├── preset.css         # Aggregates foundation + utilities
+├── foundation/        # source, variants, tokens, motion, base
+├── utilities/         # shared + component utilities referenced in TSX
+└── themes/            # amber.css … zinc.css
+```
 
 ---
 

package/dist/components/accordion.d.mts

@@ -1,22 +1,22 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { Slot } from "@radix-ui/react-slot";
+import { Accordion as Accordion$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/accordion.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root>;
+type AccordionProps = ComponentProps<typeof Accordion$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */
 declare function Accordion({
+  className,
   ...props
 }: AccordionProps): JSX.Element;
 /**
  * @since 0.3.16-canary.0
  */
-type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
+type AccordionItemProps = ComponentProps<typeof Accordion$1.Item>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -27,22 +27,7 @@ declare function AccordionItem({
 /**
  * @since 0.3.16-canary.0
  */
-interface AccordionIconProps extends ComponentProps<typeof Slot> {
-  asChild?: boolean;
-  className?: string;
-}
-/**
- * @since 0.3.16-canary.0
- */
-declare function AccordionIcon({
-  asChild,
-  className,
-  ...props
-}: AccordionIconProps): JSX.Element;
-/**
- * @since 0.3.16-canary.0
- */
-type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger>;
+type AccordionTriggerProps = ComponentProps<typeof Accordion$1.Trigger>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -54,7 +39,7 @@ declare function AccordionTrigger({
 /**
  * @since 0.3.16-canary.0
  */
-type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
+type AccordionContentProps = ComponentProps<typeof Accordion$1.Content>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -64,4 +49,4 @@ declare function AccordionContent({
   ...props
 }: AccordionContentProps): JSX.Element;
 //#endregion
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionIcon, type AccordionIconProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };

package/dist/components/accordion.mjs

@@ -1,15 +1,14 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronDownIcon } from "lucide-react";
-import { jsx } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Accordion as Accordion$1 } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 /**
 * @since 0.3.16-canary.0
 */
-function Accordion({ ...props }) {
-	return /* @__PURE__ */ jsx(AccordionPrimitive.Root, {
+function Accordion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		className: cn("flex w-full flex-col", className),
 		"data-slot": "accordion",
 		...props
 	});
@@ -18,8 +17,8 @@ function Accordion({ ...props }) {
 * @since 0.3.16-canary.0
 */
 function AccordionItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
-		className: cn("border-b", "last:border-b-0", className),
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		className: cn("not-last:border-b", className),
 		"data-slot": "accordion-item",
 		...props
 	});
@@ -27,26 +26,24 @@ function AccordionItem({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function AccordionIcon({ asChild, className, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : ChevronDownIcon, {
-		"aria-hidden": true,
-		className: cn("size-4 shrink-0 text-muted-foreground", "translate-y-0.5 transition-transform duration-300 ease-spring", "motion-reduce:transition-none motion-reduce:duration-0", className),
-		"data-slot": "accordion-icon",
-		...props
-	});
-}
-/**
-* @since 0.3.16-canary.0
-*/
 function AccordionTrigger({ children, className, ...props }) {
-	return /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
 		className: "flex",
-		"data-slot": "accordion-trigger-wrapper",
-		children: /* @__PURE__ */ jsx(AccordionPrimitive.Trigger, {
-			className: cn("group/accordion-trigger flex grow items-start justify-between gap-4 py-4", "rounded-md outline-hidden", "text-left text-sm font-medium", "hover:not-disabled:underline", "focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "[&[data-state=open]>svg]:rotate-180", className),
+		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
 			"data-slot": "accordion-trigger",
 			...props,
-			children
+			children: [
+				children,
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden",
+					"data-slot": "accordion-trigger-icon"
+				}),
+				/* @__PURE__ */ jsx(ChevronUpIcon, {
+					className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline",
+					"data-slot": "accordion-trigger-icon"
+				})
+			]
 		})
 	});
 }
@@ -54,15 +51,15 @@ function AccordionTrigger({ children, className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function AccordionContent({ children, className, ...props }) {
-	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
-		className: cn("overflow-hidden", "data-open:animate-collapsible-down data-open:ease-snappy", "data-closed:animate-collapsible-up data-closed:ease-snappy", "motion-reduce:animate-none motion-reduce:transition-none"),
+	return /* @__PURE__ */ jsx(Accordion$1.Content, {
+		className: "overflow-hidden text-sm ease-snappy data-open:animate-accordion-down data-open:animation-duration-expand-in data-closed:animate-accordion-up data-closed:ease-exit data-closed:animation-duration-expand-out",
 		"data-slot": "accordion-content",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("pt-0 pb-4", "text-sm", className),
+			className: cn("h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
 			children
 		})
 	});
 }
 //#endregion
-export { Accordion, AccordionContent, AccordionIcon, AccordionItem, AccordionTrigger };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/alert-dialog.d.mts

@@ -1,13 +1,12 @@
-import { VariantProps } from "../lib/utils.mjs";
-import { buttonVariants } from "../variants/button.mjs";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { ButtonProps } from "./button.mjs";
+import { AlertDialog as AlertDialog$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/alert-dialog.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root>;
+type AlertDialogProps = ComponentProps<typeof AlertDialog$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -17,7 +16,7 @@ declare function AlertDialog({
 /**
  * @since 0.3.16-canary.0
  */
-type AlertDialogTriggerProps = ComponentProps<typeof AlertDialogPrimitive.Trigger>;
+type AlertDialogTriggerProps = ComponentProps<typeof AlertDialog$1.Trigger>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -27,20 +26,15 @@ declare function AlertDialogTrigger({
 /**
  * @since 0.3.16-canary.0
  */
-interface AlertDialogContentProps extends ComponentProps<typeof AlertDialogPrimitive.Content> {
-  classNames?: {
-    content?: string;
-    overlay?: string;
-    wrapper?: string;
-  };
+interface AlertDialogContentProps extends ComponentProps<typeof AlertDialog$1.Content> {
+  size?: "default" | "sm";
 }
 /**
  * @since 0.3.16-canary.0
  */
 declare function AlertDialogContent({
-  children,
   className,
-  classNames,
+  size,
   ...props
 }: AlertDialogContentProps): JSX.Element;
 /**
@@ -57,6 +51,21 @@ declare function AlertDialogHeader({
 /**
  * @since 0.3.16-canary.0
  */
+type AlertDialogMediaProps = ComponentProps<"div">;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare function AlertDialogMedia({
+  className,
+  ...props
+}: AlertDialogMediaProps): JSX.Element;
+/**
+ * Optional scrollable region for long content. When used, the Header and Footer
+ * stay pinned (shrink-0) and only this body scrolls; without it, the whole
+ * Content scrolls via its own max-height. A codefast enhancement over radix-vega.
+ *
+ * @since 0.3.16-canary.0
+ */
 type AlertDialogBodyProps = ComponentProps<"div">;
 /**
  * @since 0.3.16-canary.0
@@ -79,7 +88,7 @@ declare function AlertDialogFooter({
 /**
  * @since 0.3.16-canary.0
  */
-type AlertDialogTitleProps = ComponentProps<typeof AlertDialogPrimitive.Title>;
+type AlertDialogTitleProps = ComponentProps<typeof AlertDialog$1.Title>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -90,7 +99,7 @@ declare function AlertDialogTitle({
 /**
  * @since 0.3.16-canary.0
  */
-type AlertDialogDescriptionProps = ComponentProps<typeof AlertDialogPrimitive.Description>;
+type AlertDialogDescriptionProps = ComponentProps<typeof AlertDialog$1.Description>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -101,15 +110,11 @@ declare function AlertDialogDescription({
 /**
  * @since 0.3.16-canary.0
  */
-interface AlertDialogActionProps extends ComponentProps<typeof AlertDialogPrimitive.Action> {
-  size?: VariantProps<typeof buttonVariants>["size"];
-  variant?: VariantProps<typeof buttonVariants>["variant"];
-}
+interface AlertDialogActionProps extends ComponentProps<typeof AlertDialog$1.Action>, Pick<ButtonProps, "size" | "variant"> {}
 /**
  * @since 0.3.16-canary.0
  */
 declare function AlertDialogAction({
-  className,
   size,
   variant,
   ...props
@@ -117,18 +122,14 @@ declare function AlertDialogAction({
 /**
  * @since 0.3.16-canary.0
  */
-interface AlertDialogCancelProps extends ComponentProps<typeof AlertDialogPrimitive.Cancel> {
-  size?: VariantProps<typeof buttonVariants>["size"];
-  variant?: VariantProps<typeof buttonVariants>["variant"];
-}
+interface AlertDialogCancelProps extends ComponentProps<typeof AlertDialog$1.Cancel>, Pick<ButtonProps, "size" | "variant"> {}
 /**
  * @since 0.3.16-canary.0
  */
 declare function AlertDialogCancel({
-  className,
   size,
   variant,
   ...props
 }: AlertDialogCancelProps): JSX.Element;
 //#endregion
-export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogBody, type AlertDialogBodyProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };
+export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogBody, type AlertDialogBodyProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogMedia, type AlertDialogMediaProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/components/alert-dialog.mjs

@@ -1,14 +1,13 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
-import { buttonVariants } from "../variants/button.mjs";
+import { Button } from "./button.mjs";
+import { AlertDialog as AlertDialog$1 } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 //#region src/components/alert-dialog.tsx
 /**
 * @since 0.3.16-canary.0
 */
 function AlertDialog({ ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
 		"data-slot": "alert-dialog",
 		...props
 	});
@@ -17,7 +16,7 @@ function AlertDialog({ ...props }) {
 * @since 0.3.16-canary.0
 */
 function AlertDialogTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
 		"data-slot": "alert-dialog-trigger",
 		...props
 	});
@@ -25,27 +24,26 @@ function AlertDialogTrigger({ ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function AlertDialogContent({ children, className, classNames, ...props }) {
-	return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
-		className: cn("fixed inset-0 z-50", "bg-black/50", "ease-ui data-open:animate-in data-open:fade-in-0", "data-closed:animate-out data-closed:fade-out-0", "motion-reduce:animate-none motion-reduce:transition-none", classNames?.overlay),
-		"data-slot": "alert-dialog-overlay"
-	}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
-		className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center overflow-auto p-8", "sm:grid-rows-[1fr_auto_3fr] sm:p-4", "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none motion-reduce:transition-none", classNames?.wrapper),
-		"data-slot": "alert-dialog-content-wrapper",
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn("relative row-start-2 flex w-full max-w-lg flex-col", "rounded-2xl border", "bg-popover text-popover-foreground shadow-lg", classNames?.content, className),
+function AlertDialogContent({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, {
+		"data-slot": "alert-dialog-portal",
+		children: [/* @__PURE__ */ jsx(AlertDialog$1.Overlay, {
+			className: "fixed inset-0 z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0",
+			"data-slot": "alert-dialog-overlay"
+		}), /* @__PURE__ */ jsx(AlertDialog$1.Content, {
+			className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			"data-size": size,
 			"data-slot": "alert-dialog-content",
-			children
-		})
-	})] });
+			...props
+		})]
+	});
 }
 /**
 * @since 0.3.16-canary.0
 */
 function AlertDialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center", "sm:text-left", className),
+		className: cn("grid shrink-0 grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
 		"data-slot": "alert-dialog-header",
 		...props
 	});
@@ -53,9 +51,19 @@ function AlertDialogHeader({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
+function AlertDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className),
+		"data-slot": "alert-dialog-media",
+		...props
+	});
+}
+/**
+* @since 0.3.16-canary.0
+*/
 function AlertDialogBody({ className, ...props }) {
-	return /* @__PURE__ */ jsx("main", {
-		className: cn("overflow-auto", "px-6 py-2", className),
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("-mx-6 min-h-0 flex-1 overflow-y-auto px-6", className),
 		"data-slot": "alert-dialog-body",
 		...props
 	});
@@ -65,7 +73,7 @@ function AlertDialogBody({ className, ...props }) {
 */
 function AlertDialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6", "sm:flex-row sm:justify-end", className),
+		className: cn("flex shrink-0 flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
 		"data-slot": "alert-dialog-footer",
 		...props
 	});
@@ -74,8 +82,8 @@ function AlertDialogFooter({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function AlertDialogTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
-		className: cn("text-lg leading-none font-semibold tracking-tight", className),
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		className: cn("font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
 		"data-slot": "alert-dialog-title",
 		...props
 	});
@@ -84,8 +92,8 @@ function AlertDialogTitle({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function AlertDialogDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
-		className: cn("text-sm text-muted-foreground", className),
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
 		"data-slot": "alert-dialog-description",
 		...props
 	});
@@ -93,30 +101,30 @@ function AlertDialogDescription({ className, ...props }) {
 /**
 * @since 0.3.16-canary.0
 */
-function AlertDialogAction({ className, size, variant, ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
-		className: buttonVariants({
-			className,
-			size,
-			variant
-		}),
-		"data-slot": "alert-dialog-action",
-		...props
+function AlertDialogAction({ size = "default", variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		size,
+		variant,
+		children: /* @__PURE__ */ jsx(AlertDialog$1.Action, {
+			"data-slot": "alert-dialog-action",
+			...props
+		})
 	});
 }
 /**
 * @since 0.3.16-canary.0
 */
-function AlertDialogCancel({ className, size, variant, ...props }) {
-	return /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
-		className: buttonVariants({
-			className,
-			size,
-			variant
-		}),
-		"data-slot": "alert-dialog-cancel",
-		...props
+function AlertDialogCancel({ size = "default", variant = "outline", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		size,
+		variant,
+		children: /* @__PURE__ */ jsx(AlertDialog$1.Cancel, {
+			"data-slot": "alert-dialog-cancel",
+			...props
+		})
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger };