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

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

@@ -1,31 +1,8 @@
 "use client";
 
-// src/kernel/components/ui/tabs.tsx
+// src/components/ui/tabs.tsx
 import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-
-// 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/tabs.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import NextLink from "next/link";
 import {
@@ -46,12 +23,11 @@ var tabsListVariants = cva("relative inline-flex items-center", {
   defaultVariants: {
     variant: "base"
   }
-});
-var tabsTabVariants = cva(
+}), tabsTabVariants = cva(
   [
     "relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap text-sm font-medium leading-none outline-none",
     "!no-underline hover:!no-underline active:!no-underline",
-    "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(" "),
@@ -69,8 +45,8 @@ var tabsTabVariants = cva(
           "h-8 rounded-button border border-transparent bg-transparent px-3 text-foreground-2 transition-[background-color,border-color,color,box-shadow] duration-150 ease-out",
           "hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-foreground-1",
           "active:not-data-disabled:bg-surface-active",
-          "data-active:bg-accent-soft-hover data-active:text-accent-1",
-          "data-[state=path-active]:bg-accent-soft-hover data-[state=path-active]:text-accent-1"
+          "data-active:bg-accent-2-hover data-active:text-accent-1",
+          "data-[state=path-active]:bg-accent-2-hover data-[state=path-active]:text-accent-1"
         ].join(" "),
         underline: [
           "rounded-button px-0 py-2 text-foreground-3 transition-colors duration-150 ease-out",
@@ -84,8 +60,7 @@ var tabsTabVariants = cva(
       variant: "base"
     }
   }
-);
-var tabsIndicatorVariants = cva("pointer-events-none absolute", {
+), tabsIndicatorVariants = cva("pointer-events-none absolute", {
   variants: {
     animation: {
       grow: "",
@@ -121,13 +96,11 @@ var tabsIndicatorVariants = cva("pointer-events-none absolute", {
     animation: "slide",
     variant: "base"
   }
-});
-var tabsGrowIndicatorClassName = [
+}), tabsGrowIndicatorClassName = [
   "absolute rounded-full bg-[var(--tabs-indicator-color,var(--accent-1))]",
   "data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:h-full",
   "data-[orientation=vertical]:right-0 data-[orientation=vertical]:w-full"
-].join(" ");
-var TabsStyleContext = createContext(null);
+].join(" "), TabsStyleContext = createContext(null);
 function useTabsStyle() {
   return use(TabsStyleContext) ?? {
     indicatorAnimation: "slide",
@@ -138,76 +111,49 @@ function resolveTabsVariant(variant) {
   return variant ?? "base";
 }
 function mergeBaseUiClassName(className, ...classes) {
-  if (typeof className === "function") {
-    return (state) => cn(...classes, className(state));
-  }
-  return cn(...classes, className);
+  return typeof className == "function" ? (state) => cn(...classes, className(state)) : cn(...classes, className);
 }
 function cssColorValue(color) {
-  if (!color) return void 0;
-  if (color === "accent") return "var(--accent-1)";
-  if (color === "current") return "currentColor";
-  if (color === "foreground") return "var(--foreground-1)";
-  if (color.startsWith("var(")) return color;
-  if (color.startsWith("--")) return `var(${color})`;
-  return color;
+  if (color)
+    return color === "accent" ? "var(--accent-1)" : color === "current" ? "currentColor" : color === "foreground" ? "var(--foreground-1)" : color.startsWith("var(") ? color : color.startsWith("--") ? `var(${color})` : color;
 }
 function mergeTabsStyle(style, indicatorColor) {
-  const color = cssColorValue(indicatorColor);
-  if (!color) return style;
-  if (typeof style === "function") {
-    return (state) => ({
-      ...style(state),
-      "--tabs-indicator-color": color
-    });
-  }
-  return {
+  let color = cssColorValue(indicatorColor);
+  return color ? typeof style == "function" ? (state) => ({
+    ...style(state),
+    "--tabs-indicator-color": color
+  }) : {
     ...style,
     "--tabs-indicator-color": color
-  };
+  } : style;
 }
 function tabsSlideClipPath(orientation) {
-  if (orientation === "vertical") {
-    return "inset(var(--active-tab-top) 0 calc(100% - var(--active-tab-top) - var(--active-tab-height)) 0)";
-  }
-  return "inset(0 calc(100% - var(--active-tab-left) - var(--active-tab-width)) 0 var(--active-tab-left))";
+  return orientation === "vertical" ? "inset(var(--active-tab-top) 0 calc(100% - var(--active-tab-top) - var(--active-tab-height)) 0)" : "inset(0 calc(100% - var(--active-tab-left) - var(--active-tab-width)) 0 var(--active-tab-left))";
 }
 function mergeTabsIndicatorStyle(style, indicatorColor, indicatorAnimation) {
-  const mergedStyle = mergeTabsStyle(style, indicatorColor);
-  if (indicatorAnimation !== "slide") return mergedStyle;
-  if (typeof mergedStyle === "function") {
-    return (state) => ({
-      ...mergedStyle(state),
-      clipPath: tabsSlideClipPath(state.orientation)
-    });
-  }
-  return (state) => ({
+  let mergedStyle = mergeTabsStyle(style, indicatorColor);
+  return indicatorAnimation !== "slide" ? mergedStyle : typeof mergedStyle == "function" ? (state) => ({
+    ...mergedStyle(state),
+    clipPath: tabsSlideClipPath(state.orientation)
+  }) : (state) => ({
     ...mergedStyle,
     clipPath: tabsSlideClipPath(state.orientation)
   });
 }
 function mergeRel(rel) {
-  const values = new Set((rel ?? "").split(/\s+/).filter(Boolean));
-  values.add("noopener");
-  values.add("noreferrer");
-  return Array.from(values).join(" ");
+  let values = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+  return values.add("noopener"), values.add("noreferrer"), Array.from(values).join(" ");
 }
 function TabsGrowIndicator({
   indicatorProps,
   state
 }) {
-  const indicatorRef = useRef(null);
-  const activeLeft = state.activeTabPosition?.left;
-  const activeTop = state.activeTabPosition?.top;
-  const activeWidth = state.activeTabSize?.width;
-  const activeHeight = state.activeTabSize?.height;
-  useLayoutEffect(() => {
-    const indicator = indicatorRef.current;
-    if (!indicator || activeLeft == null || activeTop == null || activeWidth == null || activeHeight == null || typeof indicator.animate !== "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  let indicatorRef = useRef(null), activeLeft = state.activeTabPosition?.left, activeTop = state.activeTabPosition?.top, activeWidth = state.activeTabSize?.width, activeHeight = state.activeTabSize?.height;
+  return useLayoutEffect(() => {
+    let indicator = indicatorRef.current;
+    if (!indicator || activeLeft == null || activeTop == null || activeWidth == null || activeHeight == null || typeof indicator.animate != "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches)
       return;
-    }
-    const isVertical = state.orientation === "vertical";
-    const animation = indicator.animate(
+    let isVertical = state.orientation === "vertical", animation = indicator.animate(
       [
         {
           opacity: 0.7,
@@ -226,8 +172,7 @@ function TabsGrowIndicator({
     return () => {
       animation.cancel();
     };
-  }, [activeHeight, activeLeft, activeTop, activeWidth, state.orientation]);
-  return /* @__PURE__ */ jsx("span", { ...indicatorProps, children: /* @__PURE__ */ jsx(
+  }, [activeHeight, activeLeft, activeTop, activeWidth, state.orientation]), /* @__PURE__ */ jsx("span", { ...indicatorProps, children: /* @__PURE__ */ jsx(
     "span",
     {
       "aria-hidden": "true",
@@ -255,7 +200,7 @@ function Tabs({
   variant = "base",
   ...props
 }) {
-  const resolvedVariant = resolveTabsVariant(variant);
+  let resolvedVariant = resolveTabsVariant(variant);
   return /* @__PURE__ */ jsx(
     TabsStyleContext,
     {
@@ -274,8 +219,7 @@ function Tabs({
   );
 }
 function TabsList({ className, variant, ...props }) {
-  const styleContext = useTabsStyle();
-  const resolvedVariant = variant ?? styleContext.variant;
+  let styleContext = useTabsStyle(), resolvedVariant = variant ?? styleContext.variant;
   return /* @__PURE__ */ jsx(
     BaseTabs.List,
     {
@@ -289,8 +233,7 @@ function TabsList({ className, variant, ...props }) {
   );
 }
 function TabsTab({ className, variant, ...props }) {
-  const styleContext = useTabsStyle();
-  const resolvedVariant = variant ?? styleContext.variant;
+  let styleContext = useTabsStyle(), resolvedVariant = variant ?? styleContext.variant;
   return /* @__PURE__ */ jsx(
     BaseTabs.Tab,
     {
@@ -309,7 +252,7 @@ function TabsPanel({ className, ...props }) {
     {
       className: mergeBaseUiClassName(
         className,
-        "outline-none focus-visible:outline-2 focus-visible:outline-focus-ring"
+        "outline-none focus-visible:outline-2 focus-visible:outline-focus-stroke"
       ),
       "data-slot": "tabs-panel",
       ...props
@@ -325,10 +268,7 @@ function TabsIndicator({
   variant,
   ...props
 }) {
-  const styleContext = useTabsStyle();
-  const resolvedVariant = variant ?? styleContext.variant;
-  const resolvedAnimation = indicatorAnimation ?? styleContext.indicatorAnimation;
-  const indicatorRender = render ?? (resolvedVariant === "underline" && resolvedAnimation === "grow" ? (indicatorProps, state) => /* @__PURE__ */ jsx(TabsGrowIndicator, { indicatorProps, state }) : void 0);
+  let styleContext = useTabsStyle(), resolvedVariant = variant ?? styleContext.variant, resolvedAnimation = indicatorAnimation ?? styleContext.indicatorAnimation, indicatorRender = render ?? (resolvedVariant === "underline" && resolvedAnimation === "grow" ? (indicatorProps, state) => /* @__PURE__ */ jsx(TabsGrowIndicator, { indicatorProps, state }) : void 0);
   return /* @__PURE__ */ jsx(
     BaseTabs.Indicator,
     {
@@ -368,14 +308,14 @@ function NavigationTabsLink({
   target,
   ...props
 }) {
-  const { "aria-current": ariaCurrent, ...tabProps } = props;
+  let { "aria-current": ariaCurrent, ...tabProps } = props;
   return /* @__PURE__ */ jsx(
     TabsTab,
     {
       "aria-current": active ? "page" : ariaCurrent,
       "data-slot": "navigation-tabs-link",
       "data-state": active ? "path-active" : void 0,
-      nativeButton: false,
+      nativeButton: !1,
       render: render ?? /* @__PURE__ */ jsx(
         NextLink,
         {

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

@@ -4,9 +4,9 @@ import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes } from 'react';
 
 declare const tagVariants: (props?: ({
-    borderStyle?: "solid" | "dotted" | null | undefined;
+    borderStyle?: "dotted" | "solid" | null | undefined;
     tone?: "accent" | "neutral" | null | undefined;
-    variant?: "solid" | "soft" | "outline" | null | undefined;
+    variant?: "solid" | "outline" | "soft" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TagProps = HTMLAttributes<HTMLSpanElement> & VariantProps<typeof tagVariants>;
 declare function Tag({ borderStyle, className, tone, variant, ...props }: TagProps): react_jsx_runtime.JSX.Element;

package/dist/kernel/components/ui/tag.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/tag.tsx
+// src/components/ui/tag.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var tagVariants = cva(
@@ -32,13 +11,13 @@ var tagVariants = cva(
         solid: ""
       },
       tone: {
-        accent: "[--tag-color:var(--accent-1)] [--tag-solid-background:var(--accent-solid)] [--tag-solid-foreground:var(--accent-foreground)]",
+        accent: "[--tag-color:var(--accent-1)] [--tag-solid-background:var(--accent-1)] [--tag-solid-foreground:var(--accent-1-foreground)]",
         neutral: "[--tag-color:var(--foreground-2)] [--tag-solid-background:var(--foreground-1)] [--tag-solid-foreground:var(--surface-1)]"
       },
       variant: {
         outline: "border-[color-mix(in_oklch,var(--tag-color)_48%,transparent)] bg-transparent text-[var(--tag-color)]",
         soft: "border-[color-mix(in_oklch,var(--tag-color)_20%,transparent)] bg-[color-mix(in_oklch,var(--tag-color)_9%,transparent)] text-[var(--tag-color)]",
-        solid: "border-[color-mix(in_oklch,var(--tag-solid-foreground)_12%,transparent)] bg-[var(--tag-solid-background)] text-[var(--tag-solid-foreground)] shadow-[inset_0_1px_0_rgb(255_255_255_/_0.035),0_1px_1px_rgb(0_0_0_/_0.025)]"
+        solid: "border-shadow-4 border-[color-mix(in_oklch,var(--tag-solid-foreground)_12%,transparent)] bg-[var(--tag-solid-background)] text-[var(--tag-solid-foreground)]"
       }
     },
     compoundVariants: [

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

@@ -5,8 +5,8 @@ import { ElementType, ComponentPropsWithoutRef } from 'react';
 
 declare const textVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | null | undefined;
-    variant?: "body" | "label" | "overline" | "headline" | null | undefined;
-    weight?: "bold" | "medium" | "default" | "semibold" | null | undefined;
+    variant?: "body" | "headline" | "label" | "overline" | null | undefined;
+    weight?: "default" | "medium" | "semibold" | "bold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextProps<T extends ElementType = "p"> = {
     as?: T;

package/dist/kernel/components/ui/text.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/text.tsx
+// src/components/ui/text.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var textVariants = cva(
@@ -144,9 +123,8 @@ function Text({
   weight,
   ...props
 }) {
-  const Component = as ?? "p";
   return /* @__PURE__ */ jsx(
-    Component,
+    as ?? "p",
     {
       className: cn(textVariants({ size, variant, weight }), className),
       ...props

package/dist/kernel/components/ui/theme-toggle.d.ts

@@ -1,8 +1,22 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from './button.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+declare const buttonVariants: (props?: ({
+    variant?: "solid" | "soft" | "outline" | "ghost" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+type ButtonProps = {
+    active?: boolean;
+    children?: ReactNode;
+    className?: string;
+    leftIcon?: ReactNode;
+    loading?: boolean;
+    rightIcon?: ReactNode;
+} & ButtonVariantProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;
 
 type ThemeToggleProps = Omit<ButtonProps, "children" | "iconOnly" | "leftIcon" | "loading" | "rightIcon">;
 declare function ThemeToggle({ className, onClick, size, title, type, variant, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;

package/dist/kernel/components/ui/theme-toggle.js

@@ -1,44 +1,22 @@
 "use client";
 
-// src/kernel/components/ui/theme-toggle.tsx
-import { Button } from "./button.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/theme-toggle.tsx
-import { Monitor, Moon, Sun } from "lucide-react";
+// src/components/ui/theme-toggle.tsx
+import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
+import {
+  FrameworkMonitorIcon as Monitor,
+  FrameworkMoonIcon as Moon,
+  FrameworkSunIcon as Sun
+} from "@publish.os/nextjs/kernel/framework-icons";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { useTheme } from "next-themes";
 import { useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var themeOrder = ["system", "light", "dark"];
-function Icon({ theme }) {
-  if (theme === "light") return /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true", size: 16 });
-  if (theme === "dark") return /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true", size: 16 });
-  return /* @__PURE__ */ jsx(Monitor, { "aria-hidden": "true", size: 16 });
+function ThemeIcon({ theme }) {
+  return theme === "light" ? /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true", size: 16 }) : theme === "dark" ? /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true", size: 16 }) : /* @__PURE__ */ jsx(Monitor, { "aria-hidden": "true", size: 16 });
 }
 function normalizeTheme(theme) {
-  if (theme === "light" || theme === "dark") return theme;
-  return "system";
+  return theme === "light" || theme === "dark" ? theme : "system";
 }
 function ThemeToggle({
   className,
@@ -49,33 +27,29 @@ function ThemeToggle({
   variant = "soft",
   ...props
 }) {
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-  const activeTheme = normalizeTheme(theme);
-  const nextTheme = useMemo(() => {
-    const index = themeOrder.indexOf(activeTheme);
+  let { theme, setTheme } = useTheme(), [mounted, setMounted] = useState(!1), activeTheme = normalizeTheme(theme), nextTheme = useMemo(() => {
+    let index = themeOrder.indexOf(activeTheme);
     return themeOrder[(index + 1) % themeOrder.length] ?? "system";
   }, [activeTheme]);
   useEffect(() => {
-    setMounted(true);
+    setMounted(!0);
   }, []);
-  const label = mounted ? `Switch to ${nextTheme} theme` : "Theme preference";
+  let label = mounted ? `Switch to ${nextTheme} theme` : "Theme preference";
   return /* @__PURE__ */ jsx(
     Button,
     {
       "aria-label": props["aria-label"] ?? label,
       className: cn("hover:border-stroke-1", className),
-      iconOnly: true,
+      iconOnly: !0,
       onClick: (event) => {
-        onClick?.(event);
-        if (!event.defaultPrevented) setTheme(nextTheme);
+        onClick?.(event), event.defaultPrevented || setTheme(nextTheme);
       },
       size,
       title: title ?? label,
       type,
       variant,
       ...props,
-      children: /* @__PURE__ */ jsx(Icon, { theme: mounted ? activeTheme : "system" })
+      children: /* @__PURE__ */ jsx(ThemeIcon, { theme: mounted ? activeTheme : "system" })
     }
   );
 }

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

@@ -1,18 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Toast as Toast$1 } from '@base-ui/react/toast';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
 declare const createToastManager: typeof Toast$1.createToastManager;
 declare const useToastManager: typeof Toast$1.useToastManager;
-type ToastProviderProps = ComponentPropsWithoutRef<typeof Toast$1.Provider>;
-type ToastViewportProps = ComponentPropsWithoutRef<typeof Toast$1.Viewport>;
-type ToastProps = ComponentPropsWithoutRef<typeof Toast$1.Root>;
-type ToastContentProps = ComponentPropsWithoutRef<typeof Toast$1.Content>;
-type ToastTitleProps = ComponentPropsWithoutRef<typeof Toast$1.Title>;
-type ToastDescriptionProps = ComponentPropsWithoutRef<typeof Toast$1.Description>;
-type ToastCloseProps = ComponentPropsWithoutRef<typeof Toast$1.Close>;
-type ToastPortalProps = ComponentPropsWithoutRef<typeof Toast$1.Portal>;
-type ToastPositionerProps = ComponentPropsWithoutRef<typeof Toast$1.Positioner>;
+type ToastProviderProps = ComponentPropsWithRef<typeof Toast$1.Provider>;
+type ToastViewportProps = ComponentPropsWithRef<typeof Toast$1.Viewport>;
+type ToastProps = ComponentPropsWithRef<typeof Toast$1.Root>;
+type ToastContentProps = ComponentPropsWithRef<typeof Toast$1.Content>;
+type ToastTitleProps = ComponentPropsWithRef<typeof Toast$1.Title>;
+type ToastDescriptionProps = ComponentPropsWithRef<typeof Toast$1.Description>;
+type ToastCloseProps = ComponentPropsWithRef<typeof Toast$1.Close>;
+type ToastPortalProps = ComponentPropsWithRef<typeof Toast$1.Portal>;
+type ToastPositionerProps = ComponentPropsWithRef<typeof Toast$1.Positioner>;
 declare function ToastProvider(props: ToastProviderProps): react_jsx_runtime.JSX.Element;
 declare function ToastViewport({ className, ...props }: ToastViewportProps): react_jsx_runtime.JSX.Element;
 declare function Toast({ className, ...props }: ToastProps): react_jsx_runtime.JSX.Element;

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

@@ -1,34 +1,11 @@
 "use client";
 
-// src/kernel/components/ui/toast.tsx
+// src/components/ui/toast.tsx
 import { Toast as BaseToast } from "@base-ui/react/toast";
-
-// 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/toast.tsx
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
-var createToastManager = BaseToast.createToastManager;
-var useToastManager = BaseToast.useToastManager;
+var createToastManager = BaseToast.createToastManager, useToastManager = BaseToast.useToastManager;
 function ToastProvider(props) {
   return /* @__PURE__ */ jsx(BaseToast.Provider, { ...props });
 }
@@ -37,7 +14,7 @@ function ToastViewport({ className, ...props }) {
     BaseToast.Viewport,
     {
       className: cn(
-        "fixed bottom-4 right-4 z-50 grid w-[min(92vw,24rem)] gap-2",
+        "fixed bottom-4 right-4 z-toast grid w-[min(92vw,24rem)] gap-2",
         className
       ),
       ...props
@@ -49,7 +26,7 @@ function Toast({ className, ...props }) {
     BaseToast.Root,
     {
       className: cn(
-        "rounded-dialog border border-stroke-2 bg-surface-1 p-4 text-foreground-1 shadow-lg outline-none",
+        "rounded-dialog border border-toast-stroke-2 bg-toast-surface-1 p-4 text-toast-foreground-1 shadow-toast outline-none",
         className
       ),
       ...props
@@ -63,7 +40,7 @@ function ToastTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     BaseToast.Title,
     {
-      className: cn("text-sm font-semibold text-foreground-1", className),
+      className: cn("text-sm font-semibold text-toast-foreground-1", className),
       ...props
     }
   );
@@ -75,7 +52,7 @@ function ToastDescription({
   return /* @__PURE__ */ jsx(
     BaseToast.Description,
     {
-      className: cn("text-sm leading-6 text-foreground-2", className),
+      className: cn("text-sm leading-6 text-toast-foreground-2", className),
       ...props
     }
   );
@@ -85,8 +62,8 @@ function ToastClose({ className, ...props }) {
     BaseToast.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-toast-foreground-3 transition-colors hover:bg-toast-surface-3 hover:text-toast-foreground-1",
+        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
         className
       ),
       ...props
@@ -94,13 +71,14 @@ function ToastClose({ className, ...props }) {
   );
 }
 function ToastPortal(props) {
-  return /* @__PURE__ */ jsx(BaseToast.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BaseToast.Portal, { ...props, ...themeScope });
 }
 function ToastPositioner({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     BaseToast.Positioner,
     {
-      className: cn("z-50 outline-none", className),
+      className: cn("z-toast outline-none", className),
       ...props
     }
   );

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

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-type TooltipProviderProps = ComponentPropsWithoutRef<typeof Tooltip$1.Provider>;
-type TooltipProps = ComponentPropsWithoutRef<typeof Tooltip$1.Root>;
-type TooltipTriggerProps = ComponentPropsWithoutRef<typeof Tooltip$1.Trigger>;
-type TooltipPortalProps = ComponentPropsWithoutRef<typeof Tooltip$1.Portal>;
-type TooltipPositionerProps = ComponentPropsWithoutRef<typeof Tooltip$1.Positioner>;
-type TooltipPopupProps = ComponentPropsWithoutRef<typeof Tooltip$1.Popup>;
-type TooltipArrowProps = ComponentPropsWithoutRef<typeof Tooltip$1.Arrow>;
+type TooltipProviderProps = ComponentPropsWithRef<typeof Tooltip$1.Provider>;
+type TooltipProps = ComponentPropsWithRef<typeof Tooltip$1.Root>;
+type TooltipTriggerProps = ComponentPropsWithRef<typeof Tooltip$1.Trigger>;
+type TooltipPortalProps = ComponentPropsWithRef<typeof Tooltip$1.Portal>;
+type TooltipPositionerProps = ComponentPropsWithRef<typeof Tooltip$1.Positioner>;
+type TooltipPopupProps = ComponentPropsWithRef<typeof Tooltip$1.Popup>;
+type TooltipArrowProps = ComponentPropsWithRef<typeof Tooltip$1.Arrow>;
 declare function TooltipProvider(props: TooltipProviderProps): react_jsx_runtime.JSX.Element;
 declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
 declare function TooltipTrigger({ className, ...props }: TooltipTriggerProps): react_jsx_runtime.JSX.Element;