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

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

@@ -1,138 +1,120 @@
-// 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("text-foreground-1", {
-  variants: {
-    size: {
-      xs: "",
-      sm: "",
-      md: "",
-      lg: "",
-      xl: "",
-      "2xl": "",
-      "3xl": "",
-      "4xl": "",
-      "5xl": "",
-      "6xl": "",
-      "7xl": "",
-      "8xl": "",
-      "9xl": ""
-    },
-    variant: {
-      body: "",
-      headline: "",
-      label: "",
-      overline: ""
-    },
-    weight: {
-      default: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
-    }
-  },
-  compoundVariants: [
-    { className: "text-xs leading-5", size: "xs", variant: "body" },
-    { className: "text-sm leading-6", size: "sm", variant: "body" },
-    { className: "text-base leading-7", size: "md", variant: "body" },
-    { className: "text-lg leading-8", size: "lg", variant: "body" },
-    { className: "text-xl leading-8", size: "xl", variant: "body" },
-    { className: "text-xs leading-4", size: "xs", variant: "label" },
-    { className: "text-sm leading-5", size: "sm", variant: "label" },
-    { className: "text-base leading-6", size: "md", variant: "label" },
-    { className: "text-lg leading-7", size: "lg", variant: "label" },
-    { className: "text-xl leading-8", size: "xl", variant: "label" },
-    {
-      className: "text-xs uppercase leading-4 tracking-wide text-foreground-3",
-      size: "xs",
-      variant: "overline"
+var textVariants = cva(
+  "text-[var(--text-foreground,var(--foreground-1))]",
+  {
+    variants: {
+      size: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+        "2xl": "",
+        "3xl": "",
+        "4xl": "",
+        "5xl": "",
+        "6xl": "",
+        "7xl": "",
+        "8xl": "",
+        "9xl": ""
+      },
+      variant: {
+        body: "",
+        headline: "",
+        label: "",
+        overline: ""
+      },
+      weight: {
+        default: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold"
+      }
     },
-    {
-      className: "text-sm uppercase leading-5 tracking-wide text-foreground-3",
-      size: "sm",
-      variant: "overline"
-    },
-    {
-      className: "text-base uppercase leading-6 tracking-wide text-foreground-3",
+    compoundVariants: [
+      { className: "text-xs leading-5", size: "xs", variant: "body" },
+      { className: "text-sm leading-6", size: "sm", variant: "body" },
+      { className: "text-base leading-7", size: "md", variant: "body" },
+      { className: "text-lg leading-8", size: "lg", variant: "body" },
+      { className: "text-xl leading-8", size: "xl", variant: "body" },
+      { className: "text-xs leading-4", size: "xs", variant: "label" },
+      { className: "text-sm leading-5", size: "sm", variant: "label" },
+      { className: "text-base leading-6", size: "md", variant: "label" },
+      { className: "text-lg leading-7", size: "lg", variant: "label" },
+      { className: "text-xl leading-8", size: "xl", variant: "label" },
+      {
+        className: "text-xs uppercase leading-4 tracking-wide text-[var(--text-muted-foreground,var(--foreground-3))]",
+        size: "xs",
+        variant: "overline"
+      },
+      {
+        className: "text-sm uppercase leading-5 tracking-wide text-[var(--text-muted-foreground,var(--foreground-3))]",
+        size: "sm",
+        variant: "overline"
+      },
+      {
+        className: "text-base uppercase leading-6 tracking-wide text-[var(--text-muted-foreground,var(--foreground-3))]",
+        size: "md",
+        variant: "overline"
+      },
+      {
+        className: "text-lg uppercase leading-7 tracking-wide text-[var(--text-muted-foreground,var(--foreground-3))]",
+        size: "lg",
+        variant: "overline"
+      },
+      {
+        className: "text-xl uppercase leading-8 tracking-wide text-[var(--text-muted-foreground,var(--foreground-3))]",
+        size: "xl",
+        variant: "overline"
+      },
+      { className: "text-xl leading-8", size: "xl", variant: "headline" },
+      { className: "text-2xl leading-9", size: "2xl", variant: "headline" },
+      {
+        className: "text-3xl leading-10 tracking-tight",
+        size: "3xl",
+        variant: "headline"
+      },
+      {
+        className: "text-4xl leading-none tracking-tight",
+        size: "4xl",
+        variant: "headline"
+      },
+      {
+        className: "text-5xl leading-none tracking-tight",
+        size: "5xl",
+        variant: "headline"
+      },
+      {
+        className: "text-6xl leading-none tracking-tight",
+        size: "6xl",
+        variant: "headline"
+      },
+      {
+        className: "text-7xl leading-none tracking-tight",
+        size: "7xl",
+        variant: "headline"
+      },
+      {
+        className: "text-8xl leading-none tracking-tight",
+        size: "8xl",
+        variant: "headline"
+      },
+      {
+        className: "text-9xl leading-none tracking-tight",
+        size: "9xl",
+        variant: "headline"
+      }
+    ],
+    defaultVariants: {
       size: "md",
-      variant: "overline"
-    },
-    {
-      className: "text-lg uppercase leading-7 tracking-wide text-foreground-3",
-      size: "lg",
-      variant: "overline"
-    },
-    {
-      className: "text-xl uppercase leading-8 tracking-wide text-foreground-3",
-      size: "xl",
-      variant: "overline"
-    },
-    { className: "text-xl leading-8", size: "xl", variant: "headline" },
-    { className: "text-2xl leading-9", size: "2xl", variant: "headline" },
-    {
-      className: "text-3xl leading-10 tracking-tight",
-      size: "3xl",
-      variant: "headline"
-    },
-    {
-      className: "text-4xl leading-none tracking-tight",
-      size: "4xl",
-      variant: "headline"
-    },
-    {
-      className: "text-5xl leading-none tracking-tight",
-      size: "5xl",
-      variant: "headline"
-    },
-    {
-      className: "text-6xl leading-none tracking-tight",
-      size: "6xl",
-      variant: "headline"
-    },
-    {
-      className: "text-7xl leading-none tracking-tight",
-      size: "7xl",
-      variant: "headline"
-    },
-    {
-      className: "text-8xl leading-none tracking-tight",
-      size: "8xl",
-      variant: "headline"
-    },
-    {
-      className: "text-9xl leading-none tracking-tight",
-      size: "9xl",
-      variant: "headline"
+      variant: "body",
+      weight: "default"
     }
-  ],
-  defaultVariants: {
-    size: "md",
-    variant: "body",
-    weight: "default"
   }
-});
+);
 function Text({
   as,
   className,
@@ -141,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;

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

@@ -1,31 +1,9 @@
 "use client";
 
-// src/kernel/components/ui/tooltip.tsx
+// src/components/ui/tooltip.tsx
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-
-// 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/tooltip.tsx
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function TooltipProvider(props) {
   return /* @__PURE__ */ jsx(BaseTooltip.Provider, { ...props });
@@ -38,7 +16,7 @@ function TooltipTrigger({ className, ...props }) {
     BaseTooltip.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
@@ -46,7 +24,8 @@ function TooltipTrigger({ className, ...props }) {
   );
 }
 function TooltipPortal(props) {
-  return /* @__PURE__ */ jsx(BaseTooltip.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BaseTooltip.Portal, { ...props, ...themeScope });
 }
 function TooltipPositioner({
   className,
@@ -56,7 +35,7 @@ function TooltipPositioner({
   return /* @__PURE__ */ jsx(
     BaseTooltip.Positioner,
     {
-      className: cn("z-50 outline-none", className),
+      className: cn("z-overlay outline-none", className),
       sideOffset,
       ...props
     }
@@ -67,7 +46,7 @@ function TooltipPopup({ className, ...props }) {
     BaseTooltip.Popup,
     {
       className: cn(
-        "max-w-xs rounded-tooltip border border-stroke-2 bg-surface-3 px-2.5 py-1.5 text-xs leading-5 text-foreground-1 shadow-lg outline-none",
+        "max-w-xs rounded-tooltip border border-tooltip-stroke-4 bg-tooltip-surface-1 px-2.5 py-1.5 text-xs leading-5 text-tooltip-foreground-1 shadow-tooltip outline-none [--text-foreground:var(--tooltip-foreground-1)] [--text-muted-foreground:var(--tooltip-foreground-4)]",
         className
       ),
       ...props
@@ -79,7 +58,7 @@ function TooltipArrow({ className, ...props }) {
     BaseTooltip.Arrow,
     {
       className: cn(
-        "size-2 rotate-45 border border-stroke-2 bg-surface-3",
+        "size-2 rotate-45 border border-tooltip-stroke-4 bg-tooltip-surface-1",
         className
       ),
       ...props