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

package/dist/kernel/components/ui/navigation-menu.js

@@ -1,31 +1,9 @@
 "use client";
 
-// src/kernel/components/ui/navigation-menu.tsx
+// src/components/ui/navigation-menu.tsx
 import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
-
-// 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/navigation-menu.tsx
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function NavigationMenuRoot({
   className,
@@ -54,7 +32,7 @@ function NavigationMenuItem(props) {
 var navigationMenuTriggerClassName = [
   "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-button px-3 py-1.5 text-sm font-medium leading-none text-foreground-2 outline-none transition-colors duration-150 ease-out",
   "hover:bg-surface-hover hover:text-foreground-1 active:bg-surface-active data-[popup-open]:bg-surface-active data-[popup-open]:text-foreground-1",
-  "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50",
+  "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(" ");
 function NavigationMenuTrigger({
@@ -105,7 +83,7 @@ function NavigationMenuLink({
     {
       className: cn(
         navigationMenuTriggerClassName,
-        "!no-underline hover:!no-underline active:!no-underline data-active:bg-surface-active data-active:text-foreground-1 data-[state=path-active]:bg-surface-active data-[state=path-active]:text-foreground-1",
+        "!no-underline hover:!no-underline active:!no-underline data-active:bg-navigation-menu-highlight-surface data-active:text-navigation-menu-highlight-foreground data-[state=path-active]:bg-navigation-menu-highlight-surface data-[state=path-active]:text-navigation-menu-highlight-foreground",
         className
       ),
       ...props
@@ -125,7 +103,8 @@ function NavigationMenuBackdrop({
   );
 }
 function NavigationMenuPortal(props) {
-  return /* @__PURE__ */ jsx(BaseNavigationMenu.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BaseNavigationMenu.Portal, { ...props, ...themeScope });
 }
 function NavigationMenuPositioner({
   className,
@@ -149,7 +128,7 @@ function NavigationMenuPopup({
     BaseNavigationMenu.Popup,
     {
       className: cn(
-        "animate-popup min-w-56 rounded-popup border border-[color:var(--surface-menu-border)] bg-surface-menu p-2 text-surface-menu-foreground shadow-lg outline-none",
+        "animate-popup min-w-56 rounded-popup border border-navigation-menu-stroke-3 bg-navigation-menu-surface-1 p-2 text-navigation-menu-foreground-1 shadow-navigation-menu outline-none [--text-foreground:var(--navigation-menu-foreground-1)] [--text-muted-foreground:var(--navigation-menu-foreground-4)]",
         className
       ),
       ...props
@@ -176,7 +155,7 @@ function NavigationMenuArrow({
     BaseNavigationMenu.Arrow,
     {
       className: cn(
-        "size-2 rotate-45 border border-[color:var(--surface-menu-border)] bg-surface-menu",
+        "size-2 rotate-45 border border-navigation-menu-stroke-3 bg-navigation-menu-surface-1",
         className
       ),
       ...props

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

@@ -1,16 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-type PopoverProps = ComponentPropsWithoutRef<typeof Popover$1.Root>;
-type PopoverTriggerProps = ComponentPropsWithoutRef<typeof Popover$1.Trigger>;
-type PopoverPortalProps = ComponentPropsWithoutRef<typeof Popover$1.Portal>;
-type PopoverPositionerProps = ComponentPropsWithoutRef<typeof Popover$1.Positioner>;
-type PopoverPopupProps = ComponentPropsWithoutRef<typeof Popover$1.Popup>;
-type PopoverTitleProps = ComponentPropsWithoutRef<typeof Popover$1.Title>;
-type PopoverDescriptionProps = ComponentPropsWithoutRef<typeof Popover$1.Description>;
-type PopoverCloseProps = ComponentPropsWithoutRef<typeof Popover$1.Close>;
-type PopoverArrowProps = ComponentPropsWithoutRef<typeof Popover$1.Arrow>;
+type PopoverProps = ComponentPropsWithRef<typeof Popover$1.Root>;
+type PopoverTriggerProps = ComponentPropsWithRef<typeof Popover$1.Trigger>;
+type PopoverPortalProps = ComponentPropsWithRef<typeof Popover$1.Portal>;
+type PopoverPositionerProps = ComponentPropsWithRef<typeof Popover$1.Positioner>;
+type PopoverPopupProps = ComponentPropsWithRef<typeof Popover$1.Popup>;
+type PopoverTitleProps = ComponentPropsWithRef<typeof Popover$1.Title>;
+type PopoverDescriptionProps = ComponentPropsWithRef<typeof Popover$1.Description>;
+type PopoverCloseProps = ComponentPropsWithRef<typeof Popover$1.Close>;
+type PopoverArrowProps = ComponentPropsWithRef<typeof Popover$1.Arrow>;
 declare function Popover(props: PopoverProps): react_jsx_runtime.JSX.Element;
 declare function PopoverTrigger({ className, ...props }: PopoverTriggerProps): react_jsx_runtime.JSX.Element;
 declare function PopoverPortal(props: PopoverPortalProps): react_jsx_runtime.JSX.Element;

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

@@ -1,31 +1,9 @@
 "use client";
 
-// src/kernel/components/ui/popover.tsx
+// src/components/ui/popover.tsx
 import { Popover as BasePopover } from "@base-ui/react/popover";
-
-// 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/popover.tsx
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Popover(props) {
   return /* @__PURE__ */ jsx(BasePopover.Root, { ...props });
@@ -35,7 +13,7 @@ function PopoverTrigger({ className, ...props }) {
     BasePopover.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,7 +21,8 @@ function PopoverTrigger({ className, ...props }) {
   );
 }
 function PopoverPortal(props) {
-  return /* @__PURE__ */ jsx(BasePopover.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BasePopover.Portal, { ...props, ...themeScope });
 }
 function PopoverPositioner({
   className,
@@ -53,7 +32,7 @@ function PopoverPositioner({
   return /* @__PURE__ */ jsx(
     BasePopover.Positioner,
     {
-      className: cn("z-50 outline-none", className),
+      className: cn("z-overlay outline-none", className),
       sideOffset,
       ...props
     }
@@ -64,7 +43,7 @@ function PopoverPopup({ className, ...props }) {
     BasePopover.Popup,
     {
       className: cn(
-        "animate-popup w-72 rounded-popup border border-[color:var(--surface-menu-border)] bg-surface-menu p-4 text-surface-menu-foreground shadow-lg outline-none",
+        "animate-popup w-72 rounded-popup border border-popover-stroke-3 bg-popover-surface-1 p-4 text-popover-foreground-1 shadow-popover outline-none [--text-foreground:var(--popover-foreground-1)] [--text-muted-foreground:var(--popover-foreground-4)]",
         className
       ),
       ...props
@@ -76,7 +55,7 @@ function PopoverTitle({ className, ...props }) {
     BasePopover.Title,
     {
       className: cn(
-        "text-sm font-semibold text-surface-menu-foreground",
+        "text-sm font-semibold text-popover-foreground-1",
         className
       ),
       ...props
@@ -91,7 +70,7 @@ function PopoverDescription({
     BasePopover.Description,
     {
       className: cn(
-        "mt-1 text-sm leading-6 text-surface-menu-disabled-foreground",
+        "mt-1 text-sm leading-6 text-popover-foreground-4",
         className
       ),
       ...props
@@ -103,8 +82,8 @@ function PopoverClose({ className, ...props }) {
     BasePopover.Close,
     {
       className: cn(
-        "inline-flex size-8 items-center justify-center rounded-button text-surface-menu-disabled-foreground transition-colors hover:bg-surface-menu-hover hover:text-surface-menu-hover-foreground",
-        "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-popover-foreground-4 transition-colors hover:bg-popover-surface-3 hover:text-popover-foreground-1",
+        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
         className
       ),
       ...props
@@ -116,7 +95,7 @@ function PopoverArrow({ className, ...props }) {
     BasePopover.Arrow,
     {
       className: cn(
-        "size-2 rotate-45 border border-[color:var(--surface-menu-border)] bg-surface-menu",
+        "size-2 rotate-45 border border-popover-stroke-3 bg-popover-surface-1",
         className
       ),
       ...props

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

@@ -1,31 +1,8 @@
 "use client";
 
-// src/kernel/components/ui/progress.tsx
+// src/components/ui/progress.tsx
 import { Progress as BaseProgress } from "@base-ui/react/progress";
-
-// 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/progress.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Progress(props) {
   return /* @__PURE__ */ jsx(BaseProgress.Root, { ...props });

package/dist/kernel/components/ui/scroll-area.js

@@ -1,31 +1,8 @@
 "use client";
 
-// src/kernel/components/ui/scroll-area.tsx
+// src/components/ui/scroll-area.tsx
 import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-
-// 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/scroll-area.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import {
   Children,
@@ -50,18 +27,11 @@ var scrollAreaVariants = cva(
       variant: "default"
     }
   }
-);
-var DEFAULT_MASK_SIZE = 24;
+), DEFAULT_MASK_SIZE = 24;
 function mergeRefs(...refs) {
   return (value) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") {
-        ref(value);
-      } else {
-        ref.current = value;
-      }
-    }
+    for (let ref of refs)
+      ref && (typeof ref == "function" ? ref(value) : ref.current = value);
   };
 }
 function normalizeMaskConfig({
@@ -69,11 +39,8 @@ function normalizeMaskConfig({
   orientation,
   variant
 }) {
-  if (mask === false) return null;
-  if (!mask && variant !== "gradient") return null;
-  const maskConfig = typeof mask === "object" ? mask : {};
-  const axis = maskConfig.axis ?? (orientation === "horizontal" ? "horizontal" : "vertical");
-  const size = maskConfig.size ?? (axis === "horizontal" ? maskConfig.width : maskConfig.height) ?? maskConfig.height ?? maskConfig.width ?? DEFAULT_MASK_SIZE;
+  if (mask === !1 || !mask && variant !== "gradient") return null;
+  let maskConfig = typeof mask == "object" ? mask : {}, axis = maskConfig.axis ?? (orientation === "horizontal" ? "horizontal" : "vertical"), size = maskConfig.size ?? (axis === "horizontal" ? maskConfig.width : maskConfig.height) ?? maskConfig.height ?? maskConfig.width ?? DEFAULT_MASK_SIZE;
   return {
     axis,
     size,
@@ -85,12 +52,11 @@ function createMaskValue({
   endSize,
   startSize
 }) {
-  const direction = axis === "horizontal" ? "to right" : "to bottom";
-  return `linear-gradient(${direction}, transparent 0, black ${startSize}px, black calc(100% - ${endSize}px), transparent 100%)`;
+  return `linear-gradient(${axis === "horizontal" ? "to right" : "to bottom"}, transparent 0, black ${startSize}px, black calc(100% - ${endSize}px), transparent 100%)`;
 }
 function initialMaskStyle(mask) {
   if (!mask) return {};
-  const maskValue = createMaskValue({
+  let maskValue = createMaskValue({
     axis: mask.axis,
     endSize: mask.size,
     startSize: 0
@@ -106,7 +72,7 @@ function isScrollAreaBlock(child) {
 function hasScrollAreaBlocks(children) {
   return Children.toArray(children).some(isScrollAreaBlock);
 }
-var ScrollAreaRoot = forwardRef(function ScrollAreaRoot2({ className, ...props }, ref) {
+var ScrollAreaRoot = forwardRef(function({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseScrollArea.Root,
     {
@@ -129,7 +95,7 @@ function ScrollArea({
   cornerProps,
   mask,
   orientation = "vertical",
-  scrollbar = true,
+  scrollbar = !0,
   scrollbarClassName,
   scrollbarProps,
   thumbClassName,
@@ -140,18 +106,7 @@ function ScrollArea({
   viewportRef,
   ...props
 }) {
-  const internalViewportRef = useRef(null);
-  const [showStartBorder, setShowStartBorder] = useState(false);
-  const [showEndBorder, setShowEndBorder] = useState(false);
-  const maskConfig = typeof mask === "object" ? mask : void 0;
-  const maskFallback = typeof mask === "object" ? true : mask;
-  const hasMaskConfig = maskConfig !== void 0;
-  const maskAxis = maskConfig?.axis;
-  const maskHeight = maskConfig?.height;
-  const maskSize = maskConfig?.size;
-  const maskTriggerSize = maskConfig?.triggerSize;
-  const maskWidth = maskConfig?.width;
-  const normalizedMask = useMemo(
+  let internalViewportRef = useRef(null), [showStartBorder, setShowStartBorder] = useState(!1), [showEndBorder, setShowEndBorder] = useState(!1), maskConfig = typeof mask == "object" ? mask : void 0, maskFallback = typeof mask == "object" ? !0 : mask, hasMaskConfig = maskConfig !== void 0, maskAxis = maskConfig?.axis, maskHeight = maskConfig?.height, maskSize = maskConfig?.size, maskTriggerSize = maskConfig?.triggerSize, maskWidth = maskConfig?.width, normalizedMask = useMemo(
     () => normalizeMaskConfig({
       mask: hasMaskConfig ? {
         axis: maskAxis,
@@ -174,68 +129,44 @@ function ScrollArea({
       orientation,
       variant
     ]
-  );
-  const viewportStyle = useMemo(
+  ), viewportStyle = useMemo(
     () => ({
       ...initialMaskStyle(normalizedMask),
       ...viewportProps?.style
     }),
     [normalizedMask, viewportProps?.style]
-  );
-  const setViewportRef = useMemo(
+  ), setViewportRef = useMemo(
     () => mergeRefs(internalViewportRef, viewportRef),
     [viewportRef]
   );
-  useEffect(() => {
-    const viewport = internalViewportRef.current;
-    if (!viewport || !normalizedMask && border === "none") {
+  if (useEffect(() => {
+    let viewport = internalViewportRef.current;
+    if (!viewport || !normalizedMask && border === "none")
       return;
-    }
-    const updateScrollState = () => {
-      const scrollAxis = normalizedMask?.axis ?? (orientation === "horizontal" ? "horizontal" : "vertical");
-      const isHorizontal = scrollAxis === "horizontal";
-      const scrollOffset = isHorizontal ? viewport.scrollLeft : viewport.scrollTop;
-      const scrollSize = isHorizontal ? viewport.scrollWidth : viewport.scrollHeight;
-      const clientSize = isHorizontal ? viewport.clientWidth : viewport.clientHeight;
-      const maxScroll = Math.max(0, scrollSize - clientSize);
-      const hasOverflow = maxScroll > 1;
-      const showStart = hasOverflow && scrollOffset > 1;
-      const showEnd = hasOverflow && scrollOffset < maxScroll - 1;
-      setShowStartBorder(showStart);
-      setShowEndBorder(showEnd);
-      if (!normalizedMask) return;
+    let updateScrollState = () => {
+      let isHorizontal = (normalizedMask?.axis ?? (orientation === "horizontal" ? "horizontal" : "vertical")) === "horizontal", scrollOffset = isHorizontal ? viewport.scrollLeft : viewport.scrollTop, scrollSize = isHorizontal ? viewport.scrollWidth : viewport.scrollHeight, clientSize = isHorizontal ? viewport.clientWidth : viewport.clientHeight, maxScroll = Math.max(0, scrollSize - clientSize), hasOverflow = maxScroll > 1, showStart = hasOverflow && scrollOffset > 1, showEnd = hasOverflow && scrollOffset < maxScroll - 1;
+      if (setShowStartBorder(showStart), setShowEndBorder(showEnd), !normalizedMask) return;
       if (!hasOverflow) {
-        viewport.style.removeProperty("mask-image");
-        viewport.style.removeProperty("-webkit-mask-image");
+        viewport.style.removeProperty("mask-image"), viewport.style.removeProperty("-webkit-mask-image");
         return;
       }
-      const startSize = Math.min(
+      let startSize = Math.min(
         normalizedMask.size,
         scrollOffset / normalizedMask.triggerSize * normalizedMask.size
-      );
-      const remainingScroll = maxScroll - scrollOffset;
-      const endSize = Math.min(
+      ), remainingScroll = maxScroll - scrollOffset, endSize = Math.min(
         normalizedMask.size,
         remainingScroll / normalizedMask.triggerSize * normalizedMask.size
-      );
-      const maskValue = createMaskValue({
+      ), maskValue = createMaskValue({
         axis: normalizedMask.axis,
         endSize,
         startSize
       });
-      viewport.style.setProperty("mask-image", maskValue);
-      viewport.style.setProperty("-webkit-mask-image", maskValue);
+      viewport.style.setProperty("mask-image", maskValue), viewport.style.setProperty("-webkit-mask-image", maskValue);
+    }, resizeObserver = new ResizeObserver(updateScrollState);
+    return resizeObserver.observe(viewport), viewport.addEventListener("scroll", updateScrollState, { passive: !0 }), updateScrollState(), () => {
+      resizeObserver.disconnect(), viewport.removeEventListener("scroll", updateScrollState);
     };
-    const resizeObserver = new ResizeObserver(updateScrollState);
-    resizeObserver.observe(viewport);
-    viewport.addEventListener("scroll", updateScrollState, { passive: true });
-    updateScrollState();
-    return () => {
-      resizeObserver.disconnect();
-      viewport.removeEventListener("scroll", updateScrollState);
-    };
-  }, [border, normalizedMask, orientation]);
-  if (hasScrollAreaBlocks(children)) {
+  }, [border, normalizedMask, orientation]), hasScrollAreaBlocks(children))
     return /* @__PURE__ */ jsx(
       ScrollAreaRoot,
       {
@@ -244,13 +175,7 @@ function ScrollArea({
         children
       }
     );
-  }
-  const showVerticalScrollbar = scrollbar && orientation !== "horizontal";
-  const showHorizontalScrollbar = scrollbar && orientation !== "vertical";
-  const showCorner = corner ?? orientation === "both";
-  const defaultStartBorderClassName = orientation === "horizontal" ? "border-l-stroke-2" : "border-t-stroke-2";
-  const defaultEndBorderClassName = orientation === "horizontal" ? "border-r-stroke-2" : "border-b-stroke-2";
-  const scrollBorderClassName = orientation === "horizontal" ? cn(
+  let showVerticalScrollbar = scrollbar && orientation !== "horizontal", showHorizontalScrollbar = scrollbar && orientation !== "vertical", showCorner = corner ?? orientation === "both", defaultStartBorderClassName = orientation === "horizontal" ? "border-l-stroke-2" : "border-t-stroke-2", defaultEndBorderClassName = orientation === "horizontal" ? "border-r-stroke-2" : "border-b-stroke-2", scrollBorderClassName = orientation === "horizontal" ? cn(
     border !== "none" && "border-x border-x-transparent transition-colors",
     (border === "start" || border === "both") && showStartBorder && (borderStartClassName ?? defaultStartBorderClassName),
     (border === "end" || border === "both") && showEndBorder && (borderEndClassName ?? defaultEndBorderClassName)
@@ -327,7 +252,7 @@ function ScrollArea({
     }
   );
 }
-var ScrollAreaViewport = forwardRef(function ScrollAreaViewport2({ className, ...props }, ref) {
+var ScrollAreaViewport = forwardRef(function({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseScrollArea.Viewport,
     {
@@ -336,17 +261,15 @@ var ScrollAreaViewport = forwardRef(function ScrollAreaViewport2({ className, ..
       ...props
     }
   );
-});
-var ScrollAreaContent = forwardRef(function ScrollAreaContent2({ className, ...props }, ref) {
+}), ScrollAreaContent = forwardRef(function({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(BaseScrollArea.Content, { className: cn(className), ref, ...props });
-});
-var ScrollAreaScrollbar = forwardRef(function ScrollAreaScrollbar2({ className, orientation = "vertical", ...props }, ref) {
+}), ScrollAreaScrollbar = forwardRef(function({ className, orientation = "vertical", ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseScrollArea.Scrollbar,
     {
       className: cn(
-        "flex touch-none select-none bg-transparent p-0.5 transition-colors",
-        orientation === "vertical" ? "h-full w-2.5" : "h-2.5 w-full",
+        "flex touch-none select-none bg-[var(--scrollbar-track-surface)] p-[var(--scrollbar-thumb-stroke-width)] transition-colors",
+        orientation === "vertical" ? "h-full w-[var(--scrollbar-size)]" : "h-[var(--scrollbar-size)] w-full",
         className
       ),
       orientation,
@@ -354,25 +277,23 @@ var ScrollAreaScrollbar = forwardRef(function ScrollAreaScrollbar2({ className,
       ...props
     }
   );
-});
-var ScrollAreaThumb = forwardRef(function ScrollAreaThumb2({ className, ...props }, ref) {
+}), ScrollAreaThumb = forwardRef(function({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseScrollArea.Thumb,
     {
       className: cn(
-        "flex-1 rounded-scrollbar-thumb bg-stroke-2 transition-colors hover:bg-stroke-1",
+        "flex-1 rounded-scrollbar-thumb bg-[var(--scrollbar-thumb-stroke)] transition-colors hover:bg-[var(--scrollbar-thumb-hover-stroke)]",
         className
       ),
       ref,
       ...props
     }
   );
-});
-var ScrollAreaCorner = forwardRef(function ScrollAreaCorner2({ className, ...props }, ref) {
+}), ScrollAreaCorner = forwardRef(function({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseScrollArea.Corner,
     {
-      className: cn("bg-transparent", className),
+      className: cn("bg-[var(--scrollbar-track-surface)]", className),
       ref,
       ...props
     }

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

@@ -2,26 +2,26 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { Select as Select$1 } from '@base-ui/react/select';
 import { VariantProps } from 'class-variance-authority';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-type SelectRootProps = ComponentPropsWithoutRef<typeof Select$1.Root>;
-type SelectLabelProps = ComponentPropsWithoutRef<typeof Select$1.Label>;
+type SelectRootProps = ComponentPropsWithRef<typeof Select$1.Root>;
+type SelectLabelProps = ComponentPropsWithRef<typeof Select$1.Label>;
 declare const selectTriggerVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectTriggerVariantProps = VariantProps<typeof selectTriggerVariants>;
-type SelectTriggerProps = ComponentPropsWithoutRef<typeof Select$1.Trigger> & SelectTriggerVariantProps;
-type SelectValueProps = ComponentPropsWithoutRef<typeof Select$1.Value>;
-type SelectIconProps = ComponentPropsWithoutRef<typeof Select$1.Icon>;
-type SelectPortalProps = ComponentPropsWithoutRef<typeof Select$1.Portal>;
-type SelectPositionerProps = ComponentPropsWithoutRef<typeof Select$1.Positioner>;
-type SelectPopupProps = ComponentPropsWithoutRef<typeof Select$1.Popup>;
-type SelectListProps = ComponentPropsWithoutRef<typeof Select$1.List>;
-type SelectItemProps = ComponentPropsWithoutRef<typeof Select$1.Item>;
-type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof Select$1.ItemIndicator>;
-type SelectItemTextProps = ComponentPropsWithoutRef<typeof Select$1.ItemText>;
-type SelectGroupProps = ComponentPropsWithoutRef<typeof Select$1.Group>;
-type SelectGroupLabelProps = ComponentPropsWithoutRef<typeof Select$1.GroupLabel>;
+type SelectTriggerProps = ComponentPropsWithRef<typeof Select$1.Trigger> & SelectTriggerVariantProps;
+type SelectValueProps = ComponentPropsWithRef<typeof Select$1.Value>;
+type SelectIconProps = ComponentPropsWithRef<typeof Select$1.Icon>;
+type SelectPortalProps = ComponentPropsWithRef<typeof Select$1.Portal>;
+type SelectPositionerProps = ComponentPropsWithRef<typeof Select$1.Positioner>;
+type SelectPopupProps = ComponentPropsWithRef<typeof Select$1.Popup>;
+type SelectListProps = ComponentPropsWithRef<typeof Select$1.List>;
+type SelectItemProps = ComponentPropsWithRef<typeof Select$1.Item>;
+type SelectItemIndicatorProps = ComponentPropsWithRef<typeof Select$1.ItemIndicator>;
+type SelectItemTextProps = ComponentPropsWithRef<typeof Select$1.ItemText>;
+type SelectGroupProps = ComponentPropsWithRef<typeof Select$1.Group>;
+type SelectGroupLabelProps = ComponentPropsWithRef<typeof Select$1.GroupLabel>;
 declare function Select(props: SelectRootProps): react_jsx_runtime.JSX.Element;
 declare function SelectLabel({ className, ...props }: SelectLabelProps): react_jsx_runtime.JSX.Element;
 declare function SelectTrigger({ className, size, ...props }: SelectTriggerProps): react_jsx_runtime.JSX.Element;