@publish.os/nextjs 0.0.1-alpha.5 → 0.0.1-alpha.7

package/dist/kernel/components/ui/breadcrumb.js

@@ -1,9 +1,8 @@
-// src/kernel/components/ui/breadcrumb.tsx
-import { CollapsibleBreadcrumbTrail } from "./breadcrumb-trail.js";
-import { buttonVariants } from "./button.js";
+// src/components/ui/breadcrumb.tsx
+import { buttonVariants } from "@publish.os/nextjs/kernel/components/ui/button";
 import {
   linkVariants
-} from "./link.js";
+} from "@publish.os/nextjs/kernel/components/ui/link";
 import {
   Menu,
   MenuLinkItem,
@@ -11,31 +10,8 @@ import {
   MenuPortal,
   MenuPositioner,
   MenuTrigger
-} from "./menu.js";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/ui/breadcrumb.tsx
+} from "@publish.os/nextjs/kernel/components/ui/menu";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import NextLink from "next/link";
 import {
@@ -58,8 +34,7 @@ var breadcrumbVariants = cva(
       size: "md"
     }
   }
-);
-var breadcrumbItemVariants = cva("inline-flex min-w-0 items-center", {
+), breadcrumbItemVariants = cva("inline-flex min-w-0 items-center", {
   variants: {
     size: {
       xs: "gap-1",
@@ -72,8 +47,7 @@ var breadcrumbItemVariants = cva("inline-flex min-w-0 items-center", {
   defaultVariants: {
     size: "md"
   }
-});
-var breadcrumbTextVariants = cva("", {
+}), breadcrumbTextVariants = cva("", {
   variants: {
     size: {
       xs: "text-xs",
@@ -83,11 +57,10 @@ var breadcrumbTextVariants = cva("", {
       xl: "text-base"
     }
   }
-});
-var breadcrumbDefaultVariants = cva(
+}), breadcrumbDefaultVariants = cva(
   [
     "inline-flex min-w-0 max-w-full truncate rounded-button text-foreground-2 opacity-100 transition-[color,opacity] hover:text-foreground-1 hover:opacity-90",
-    "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+    "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
     "data-[state=path-active]:text-foreground-1 data-[state=path-active]:opacity-100"
   ].join(" "),
   {
@@ -101,8 +74,7 @@ var breadcrumbDefaultVariants = cva(
       }
     }
   }
-);
-var breadcrumbPageVariants = cva("", {
+), breadcrumbPageVariants = cva("", {
   variants: {
     size: {
       xs: "text-xs",
@@ -112,8 +84,7 @@ var breadcrumbPageVariants = cva("", {
       xl: "text-base"
     }
   }
-});
-var breadcrumbEllipsisVariants = cva(
+}), breadcrumbEllipsisVariants = cva(
   "inline-flex items-center justify-center",
   {
     variants: {
@@ -131,19 +102,13 @@ var breadcrumbEllipsisVariants = cva(
   }
 );
 function resolveBreadcrumbVariant(variant) {
-  if (variant?.startsWith("button.")) {
-    return {
-      buttonVariant: variant.slice("button.".length),
-      linkVariant: null
-    };
-  }
-  if (variant?.startsWith("link.")) {
-    return {
-      buttonVariant: null,
-      linkVariant: variant.slice("link.".length)
-    };
-  }
-  return {
+  return variant?.startsWith("button.") ? {
+    buttonVariant: variant.slice(7),
+    linkVariant: null
+  } : variant?.startsWith("link.") ? {
+    buttonVariant: null,
+    linkVariant: variant.slice(5)
+  } : {
     buttonVariant: null,
     linkVariant: null
   };
@@ -154,7 +119,7 @@ function breadcrumbLinkClasses({
   size,
   variant = "default"
 }) {
-  const { buttonVariant, linkVariant } = resolveBreadcrumbVariant(variant);
+  let { buttonVariant, linkVariant } = resolveBreadcrumbVariant(variant);
   return cn(
     buttonVariant ? buttonVariants({ size, variant: buttonVariant }) : linkVariant ? linkVariants({ color: "default", size, variant: linkVariant }) : breadcrumbDefaultVariants({ size }),
     active ? "font-medium" : void 0,
@@ -226,7 +191,7 @@ function BreadcrumbPage({
     {
       "aria-current": "page",
       className: cn(
-        variant ? breadcrumbLinkClasses({ active: true, size, variant }) : "max-w-full truncate font-medium text-foreground-1 opacity-100",
+        variant ? breadcrumbLinkClasses({ active: !0, size, variant }) : "max-w-full truncate font-medium text-foreground-1 opacity-100",
         breadcrumbPageVariants({ size }),
         className
       ),
@@ -268,7 +233,7 @@ function BreadcrumbEllipsis({
       role: "presentation",
       ...props,
       children: [
-        "...",
+        "\u2026",
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
       ]
     }
@@ -327,24 +292,10 @@ function BreadcrumbTrailMenu({
 }
 function BreadcrumbTrail({
   className,
-  collapsed = false,
   items,
-  menuLabel = "Show hidden breadcrumb links",
   size,
   variant
 }) {
-  if (collapsed) {
-    return /* @__PURE__ */ jsx(
-      CollapsibleBreadcrumbTrail,
-      {
-        className,
-        items,
-        menuLabel,
-        size,
-        variant
-      }
-    );
-  }
   return /* @__PURE__ */ jsx(Breadcrumb, { className, children: /* @__PURE__ */ jsx(BreadcrumbList, { className: "flex-nowrap overflow-hidden", size, children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
     index > 0 ? /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "shrink-0", size }) : null,
     /* @__PURE__ */ jsx(BreadcrumbTrailEntry, { item, size, variant })

package/dist/kernel/components/ui/button-group.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { ButtonVariantProps } from './button.js';
-import { SeparatorProps } from './separator.js';
-import { VariantProps } from 'class-variance-authority';
+import { Separator } from '@base-ui/react/separator';
 import { ComponentPropsWithoutRef } from 'react';
-import '@base-ui/react/separator';
+import { VariantProps } from 'class-variance-authority';
+
+type SeparatorProps = ComponentPropsWithoutRef<typeof Separator>;
 
 declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;

package/dist/kernel/components/ui/button-group.js

@@ -1,37 +1,14 @@
-// src/kernel/components/ui/button-group.tsx
-import { buttonVariants } from "./button.js";
-import { Separator } from "./separator.js";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/ui/button-group.tsx
+// src/components/ui/button-group.tsx
+import { buttonVariants } from "@publish.os/nextjs/kernel/components/ui/button";
+import { Separator } from "@publish.os/nextjs/kernel/components/ui/separator";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var buttonGroupVariants = cva(
   [
     "inline-flex w-fit items-stretch",
     "has-[>[data-slot=button-group]]:gap-2",
-    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
+    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-content",
     "[&>input]:flex-1",
     "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit"
   ].join(" "),
@@ -52,7 +29,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  const resolvedOrientation = orientation ?? "horizontal";
+  let resolvedOrientation = orientation ?? "horizontal";
   return (
     // biome-ignore lint/a11y/useSemanticElements: ButtonGroup can wrap buttons, links, inputs, and composite triggers; fieldset semantics would be too narrow.
     /* @__PURE__ */ jsx(
@@ -80,7 +57,7 @@ function ButtonGroupText({
     "div",
     {
       className: cn(
-        buttonVariants({ iconOnly: false, size, variant }),
+        buttonVariants({ iconOnly: !1, size, variant }),
         "pointer-events-none",
         className
       ),

package/dist/kernel/components/ui/button.js

@@ -1,45 +1,22 @@
-// src/kernel/components/ui/button.tsx
+// src/components/ui/button.tsx
 import { Button as BaseButton } from "@base-ui/react/button";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/ui/button.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   [
     "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-button border font-medium leading-none",
-    "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+    "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
     "disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
   ].join(" "),
   {
     variants: {
       variant: {
-        solid: "border-accent-solid bg-accent-solid text-accent-foreground shadow-sm hover:not-data-disabled:border-accent-solid-hover hover:not-data-disabled:bg-accent-solid-hover active:not-data-disabled:border-accent-solid-active active:not-data-disabled:bg-accent-solid-active data-[state=path-active]:border-accent-solid-hover data-[state=path-active]:bg-accent-solid-hover",
-        soft: "border-0 bg-accent-soft text-accent-1 hover:not-data-disabled:bg-accent-soft-hover active:not-data-disabled:bg-accent-soft-active data-[state=path-active]:bg-accent-soft-active",
-        outline: "border-stroke-2 bg-transparent text-foreground-1 hover:not-data-disabled:bg-surface-hover active:not-data-disabled:bg-surface-active data-[state=path-active]:border-accent-border data-[state=path-active]:bg-accent-soft-hover data-[state=path-active]:text-accent-1",
-        ghost: "border-transparent bg-transparent text-foreground-2 hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-foreground-1 active:not-data-disabled:bg-surface-active data-[state=path-active]:bg-accent-soft-hover data-[state=path-active]:text-accent-1"
+        solid: "border-accent-1 bg-accent-1 text-accent-1-foreground shadow-sm hover:not-data-disabled:border-accent-1-hover hover:not-data-disabled:bg-accent-1-hover active:not-data-disabled:border-accent-1-active active:not-data-disabled:bg-accent-1-active data-[state=path-active]:border-accent-1-hover data-[state=path-active]:bg-accent-1-hover",
+        soft: "border-0 bg-accent-2 text-accent-1 hover:not-data-disabled:bg-accent-2-hover active:not-data-disabled:bg-accent-2-active data-[state=path-active]:bg-accent-2-active",
+        outline: "border-stroke-2 bg-transparent text-foreground-1 hover:not-data-disabled:bg-surface-hover active:not-data-disabled:bg-surface-active data-[state=path-active]:border-accent-2-stroke data-[state=path-active]:bg-accent-2-hover data-[state=path-active]:text-accent-1",
+        ghost: "border-transparent bg-transparent text-foreground-2 hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-foreground-1 active:not-data-disabled:bg-surface-active data-[state=path-active]:bg-accent-2-hover data-[state=path-active]:text-accent-1"
       },
       size: {
         xs: "h-7 gap-1.5 px-2 text-xs",
@@ -54,14 +31,14 @@ var buttonVariants = cva(
       }
     },
     compoundVariants: [
-      { className: "size-7 p-0", iconOnly: true, size: "xs" },
-      { className: "size-8 p-0", iconOnly: true, size: "sm" },
-      { className: "size-10 p-0", iconOnly: true, size: "md" },
-      { className: "size-11 p-0", iconOnly: true, size: "lg" },
-      { className: "size-12 p-0", iconOnly: true, size: "xl" }
+      { className: "size-7 p-0", iconOnly: !0, size: "xs" },
+      { className: "size-8 p-0", iconOnly: !0, size: "sm" },
+      { className: "size-10 p-0", iconOnly: !0, size: "md" },
+      { className: "size-11 p-0", iconOnly: !0, size: "lg" },
+      { className: "size-12 p-0", iconOnly: !0, size: "xl" }
     ],
     defaultVariants: {
-      iconOnly: false,
+      iconOnly: !1,
       size: "md",
       variant: "solid"
     }

package/dist/kernel/components/ui/card.d.ts

@@ -4,8 +4,8 @@ import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes } from 'react';
 
 declare const cardVariants: (props?: ({
-    variant?: "ghost" | "inset" | "default" | "elevated" | null | undefined;
-    padding?: "sm" | "md" | "lg" | "none" | null | undefined;
+    variant?: "ghost" | "default" | "elevated" | "inset" | null | undefined;
+    padding?: "none" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CardProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
 declare function Card({ className, padding, variant, ...props }: CardProps): react_jsx_runtime.JSX.Element;

package/dist/kernel/components/ui/card.js

@@ -1,26 +1,5 @@
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/ui/card.tsx
+// src/components/ui/card.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var cardVariants = cva("rounded-card border text-foreground-1", {

package/dist/kernel/components/ui/dialog.d.ts

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-type DialogProps = ComponentPropsWithoutRef<typeof Dialog$1.Root>;
-type DialogTriggerProps = ComponentPropsWithoutRef<typeof Dialog$1.Trigger>;
-type DialogPortalProps = ComponentPropsWithoutRef<typeof Dialog$1.Portal>;
-type DialogBackdropProps = ComponentPropsWithoutRef<typeof Dialog$1.Backdrop>;
-type DialogPopupProps = ComponentPropsWithoutRef<typeof Dialog$1.Popup>;
-type DialogTitleProps = ComponentPropsWithoutRef<typeof Dialog$1.Title>;
-type DialogDescriptionProps = ComponentPropsWithoutRef<typeof Dialog$1.Description>;
-type DialogCloseProps = ComponentPropsWithoutRef<typeof Dialog$1.Close>;
+type DialogProps = ComponentPropsWithRef<typeof Dialog$1.Root>;
+type DialogTriggerProps = ComponentPropsWithRef<typeof Dialog$1.Trigger>;
+type DialogPortalProps = ComponentPropsWithRef<typeof Dialog$1.Portal>;
+type DialogBackdropProps = ComponentPropsWithRef<typeof Dialog$1.Backdrop>;
+type DialogPopupProps = ComponentPropsWithRef<typeof Dialog$1.Popup>;
+type DialogTitleProps = ComponentPropsWithRef<typeof Dialog$1.Title>;
+type DialogDescriptionProps = ComponentPropsWithRef<typeof Dialog$1.Description>;
+type DialogCloseProps = ComponentPropsWithRef<typeof Dialog$1.Close>;
 declare function Dialog(props: DialogProps): react_jsx_runtime.JSX.Element;
 declare function DialogTrigger({ className, ...props }: DialogTriggerProps): react_jsx_runtime.JSX.Element;
 declare function DialogPortal(props: DialogPortalProps): react_jsx_runtime.JSX.Element;

package/dist/kernel/components/ui/dialog.js

@@ -1,31 +1,9 @@
 "use client";
 
-// src/kernel/components/ui/dialog.tsx
+// src/components/ui/dialog.tsx
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/ui/dialog.tsx
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Dialog(props) {
   return /* @__PURE__ */ jsx(BaseDialog.Root, { ...props });
@@ -35,7 +13,7 @@ function DialogTrigger({ className, ...props }) {
     BaseDialog.Trigger,
     {
       className: cn(
-        "rounded-button focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+        "rounded-button focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
         className
       ),
       ...props
@@ -43,14 +21,15 @@ function DialogTrigger({ className, ...props }) {
   );
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsx(BaseDialog.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BaseDialog.Portal, { ...props, ...themeScope });
 }
 function DialogBackdrop({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     BaseDialog.Backdrop,
     {
       className: cn(
-        "animate-overlay fixed inset-0 z-modal h-dvh w-dvw bg-overlay-background",
+        "animate-overlay fixed inset-0 z-modal h-dvh w-dvw bg-dialog-backdrop",
         className
       ),
       ...props
@@ -62,7 +41,7 @@ function DialogPopup({ className, ...props }) {
     BaseDialog.Popup,
     {
       className: cn(
-        "animate-dialog-popup fixed left-1/2 top-1/2 z-modal w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 rounded-dialog border border-stroke-2 bg-surface-1 p-6 text-foreground-1 shadow-lg outline-none",
+        "animate-dialog-popup fixed left-1/2 top-1/2 z-modal w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 rounded-dialog border border-dialog-stroke-2 bg-dialog-surface-1 p-6 text-dialog-foreground-1 shadow-dialog outline-none",
         className
       ),
       ...props
@@ -74,7 +53,7 @@ function DialogTitle({ className, ...props }) {
     BaseDialog.Title,
     {
       className: cn(
-        "text-lg font-semibold tracking-tight text-foreground-1",
+        "text-lg font-semibold tracking-tight text-dialog-foreground-1",
         className
       ),
       ...props
@@ -88,7 +67,10 @@ function DialogDescription({
   return /* @__PURE__ */ jsx(
     BaseDialog.Description,
     {
-      className: cn("mt-2 text-sm leading-6 text-foreground-2", className),
+      className: cn(
+        "mt-2 text-sm leading-6 text-dialog-foreground-2",
+        className
+      ),
       ...props
     }
   );
@@ -98,8 +80,8 @@ function DialogClose({ className, ...props }) {
     BaseDialog.Close,
     {
       className: cn(
-        "inline-flex size-8 items-center justify-center rounded-button text-foreground-3 transition-colors hover:bg-surface-hover hover:text-foreground-1",
-        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+        "inline-flex size-8 items-center justify-center rounded-button text-dialog-foreground-3 transition-colors hover:bg-dialog-surface-3 hover:text-dialog-foreground-1",
+        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
         className
       ),
       ...props

package/dist/kernel/components/ui/drawer.d.ts

@@ -1,16 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-type DrawerProps = ComponentPropsWithoutRef<typeof Drawer$1.Root>;
-type DrawerTriggerProps = ComponentPropsWithoutRef<typeof Drawer$1.Trigger>;
-type DrawerPortalProps = ComponentPropsWithoutRef<typeof Drawer$1.Portal>;
-type DrawerBackdropProps = ComponentPropsWithoutRef<typeof Drawer$1.Backdrop>;
-type DrawerViewportProps = ComponentPropsWithoutRef<typeof Drawer$1.Viewport>;
-type DrawerPopupProps = ComponentPropsWithoutRef<typeof Drawer$1.Popup>;
-type DrawerTitleProps = ComponentPropsWithoutRef<typeof Drawer$1.Title>;
-type DrawerDescriptionProps = ComponentPropsWithoutRef<typeof Drawer$1.Description>;
-type DrawerCloseProps = ComponentPropsWithoutRef<typeof Drawer$1.Close>;
+type DrawerProps = ComponentPropsWithRef<typeof Drawer$1.Root>;
+type DrawerTriggerProps = ComponentPropsWithRef<typeof Drawer$1.Trigger>;
+type DrawerPortalProps = ComponentPropsWithRef<typeof Drawer$1.Portal>;
+type DrawerBackdropProps = ComponentPropsWithRef<typeof Drawer$1.Backdrop>;
+type DrawerViewportProps = ComponentPropsWithRef<typeof Drawer$1.Viewport>;
+type DrawerPopupProps = ComponentPropsWithRef<typeof Drawer$1.Popup>;
+type DrawerTitleProps = ComponentPropsWithRef<typeof Drawer$1.Title>;
+type DrawerDescriptionProps = ComponentPropsWithRef<typeof Drawer$1.Description>;
+type DrawerCloseProps = ComponentPropsWithRef<typeof Drawer$1.Close>;
 declare function Drawer(props: DrawerProps): react_jsx_runtime.JSX.Element;
 declare function DrawerTrigger({ className, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
 declare function DrawerPortal(props: DrawerPortalProps): react_jsx_runtime.JSX.Element;

package/dist/kernel/components/ui/drawer.js

@@ -1,31 +1,9 @@
 "use client";
 
-// src/kernel/components/ui/drawer.tsx
+// src/components/ui/drawer.tsx
 import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/ui/drawer.tsx
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Drawer(props) {
   return /* @__PURE__ */ jsx(BaseDrawer.Root, { ...props });
@@ -35,7 +13,7 @@ function DrawerTrigger({ className, ...props }) {
     BaseDrawer.Trigger,
     {
       className: cn(
-        "rounded-button focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+        "rounded-button focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
         className
       ),
       ...props
@@ -43,14 +21,15 @@ function DrawerTrigger({ className, ...props }) {
   );
 }
 function DrawerPortal(props) {
-  return /* @__PURE__ */ jsx(BaseDrawer.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BaseDrawer.Portal, { ...props, ...themeScope });
 }
 function DrawerBackdrop({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     BaseDrawer.Backdrop,
     {
       className: cn(
-        "animate-overlay fixed inset-0 z-modal h-dvh w-dvw bg-overlay-background",
+        "animate-overlay fixed inset-0 z-modal h-dvh w-dvw bg-drawer-backdrop",
         className
       ),
       ...props
@@ -74,7 +53,7 @@ function DrawerPopup({ className, ...props }) {
     BaseDrawer.Popup,
     {
       className: cn(
-        "animate-drawer-popup pointer-events-auto fixed bottom-0 right-0 top-0 w-[min(100vw,20rem)] border-l border-stroke-2 bg-surface-1 p-6 text-foreground-1 shadow-lg outline-none",
+        "animate-drawer-popup pointer-events-auto fixed bottom-0 right-0 top-0 w-[min(100vw,20rem)] border-l border-drawer-stroke-2 bg-drawer-surface-1 p-6 text-drawer-foreground-1 shadow-drawer outline-none",
         className
       ),
       ...props
@@ -86,7 +65,7 @@ function DrawerTitle({ className, ...props }) {
     BaseDrawer.Title,
     {
       className: cn(
-        "text-lg font-semibold tracking-tight text-foreground-1",
+        "text-lg font-semibold tracking-tight text-drawer-foreground-1",
         className
       ),
       ...props
@@ -100,7 +79,10 @@ function DrawerDescription({
   return /* @__PURE__ */ jsx(
     BaseDrawer.Description,
     {
-      className: cn("mt-2 text-sm leading-6 text-foreground-2", className),
+      className: cn(
+        "mt-2 text-sm leading-6 text-drawer-foreground-2",
+        className
+      ),
       ...props
     }
   );
@@ -110,8 +92,8 @@ function DrawerClose({ className, ...props }) {
     BaseDrawer.Close,
     {
       className: cn(
-        "inline-flex size-8 items-center justify-center rounded-button text-foreground-3 transition-colors hover:bg-surface-hover hover:text-foreground-1",
-        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+        "inline-flex size-8 items-center justify-center rounded-button text-drawer-foreground-3 transition-colors hover:bg-drawer-surface-3 hover:text-drawer-foreground-1",
+        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
         className
       ),
       ...props