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

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(--menu-stroke-3)] bg-menu-surface-1 p-4 text-menu-foreground-1 shadow-lg outline-none [--text-foreground:var(--menu-foreground-1)] [--text-muted-foreground:var(--menu-foreground-4)]",
+        "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
@@ -75,7 +54,10 @@ function PopoverTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     BasePopover.Title,
     {
-      className: cn("text-sm font-semibold text-menu-foreground-1", className),
+      className: cn(
+        "text-sm font-semibold text-popover-foreground-1",
+        className
+      ),
       ...props
     }
   );
@@ -87,7 +69,10 @@ function PopoverDescription({
   return /* @__PURE__ */ jsx(
     BasePopover.Description,
     {
-      className: cn("mt-1 text-sm leading-6 text-menu-foreground-4", className),
+      className: cn(
+        "mt-1 text-sm leading-6 text-popover-foreground-4",
+        className
+      ),
       ...props
     }
   );
@@ -97,8 +82,8 @@ function PopoverClose({ className, ...props }) {
     BasePopover.Close,
     {
       className: cn(
-        "inline-flex size-8 items-center justify-center rounded-button text-menu-foreground-4 transition-colors hover:bg-menu-surface-3 hover:text-menu-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-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
@@ -110,7 +95,7 @@ function PopoverArrow({ className, ...props }) {
     BasePopover.Arrow,
     {
       className: cn(
-        "size-2 rotate-45 border border-[color:var(--menu-stroke-3)] bg-menu-surface-1",
+        "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;

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

@@ -1,38 +1,21 @@
-// src/kernel/components/ui/select.tsx
-import { Select as BaseSelect } from "@base-ui/react/select";
-
-// 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));
-}
+"use client";
 
-// src/kernel/components/ui/select.tsx
+// src/components/ui/select.tsx
+import { Select as BaseSelect } from "@base-ui/react/select";
+import {
+  FrameworkCheckIcon as Check,
+  FrameworkChevronDownIcon as ChevronDown
+} from "@publish.os/nextjs/kernel/framework-icons";
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
-import { Check, ChevronDown } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 var selectTriggerVariants = cva(
   [
     "inline-flex w-full min-w-0 items-center justify-between gap-2 rounded-input border border-stroke-2 bg-surface-1 text-foreground-1 transition-colors",
-    "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:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50",
-    "data-[placeholder]:text-foreground-3 data-[popup-open]:border-focus-ring"
+    "data-[placeholder]:text-foreground-3 data-[popup-open]:border-focus-stroke"
   ].join(" "),
   {
     variants: {
@@ -97,7 +80,8 @@ function SelectIcon({ children, className, ...props }) {
   );
 }
 function SelectPortal(props) {
-  return /* @__PURE__ */ jsx(BaseSelect.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BaseSelect.Portal, { ...props, ...themeScope });
 }
 function SelectPositioner({
   className,
@@ -107,7 +91,7 @@ function SelectPositioner({
   return /* @__PURE__ */ jsx(
     BaseSelect.Positioner,
     {
-      className: cn("z-50 outline-none", className),
+      className: cn("z-overlay outline-none", className),
       sideOffset,
       ...props
     }
@@ -118,7 +102,7 @@ function SelectPopup({ className, ...props }) {
     BaseSelect.Popup,
     {
       className: cn(
-        "animate-popup max-h-72 w-[min(calc(var(--anchor-width)+2rem),var(--available-width))] min-w-[var(--anchor-width)] overflow-hidden rounded-popup border border-[color:var(--menu-stroke-3)] bg-menu-surface-1 p-1 text-menu-foreground-1 shadow-lg outline-none [--text-foreground:var(--menu-foreground-1)] [--text-muted-foreground:var(--menu-foreground-4)]",
+        "animate-popup max-h-72 w-[min(calc(var(--anchor-width)+2rem),var(--available-width))] min-w-[var(--anchor-width)] overflow-hidden rounded-popup border border-select-stroke-3 bg-select-surface-1 p-1 text-select-foreground-1 shadow-select outline-none [--text-foreground:var(--select-foreground-1)] [--text-muted-foreground:var(--select-foreground-4)]",
         className
       ),
       ...props
@@ -133,9 +117,9 @@ function SelectItem({ className, ...props }) {
     BaseSelect.Item,
     {
       className: cn(
-        "relative flex min-w-0 cursor-default select-none items-center rounded-[max(calc(var(--radius-popup)_-_0.25rem),0px)] py-1.5 pl-8 pr-2 text-sm text-menu-foreground-1 outline-none",
-        "data-[highlighted]:bg-menu-option-highlight-surface data-[highlighted]:text-menu-option-highlight-foreground data-[selected]:bg-menu-surface-4 data-[selected]:text-menu-foreground-1 data-[selected]:data-[highlighted]:bg-menu-option-highlight-surface data-[selected]:data-[highlighted]:text-menu-option-highlight-foreground",
-        "data-disabled:pointer-events-none data-disabled:text-menu-foreground-4",
+        "relative flex min-w-0 cursor-default select-none items-center rounded-[max(calc(var(--radius-popup)_-_0.25rem),0px)] py-1.5 pl-8 pr-2 text-sm text-select-foreground-1 outline-none",
+        "data-[highlighted]:bg-select-highlight-surface data-[highlighted]:text-select-highlight-foreground data-[selected]:bg-select-surface-4 data-[selected]:text-select-foreground-1 data-[selected]:data-[highlighted]:bg-select-highlight-surface data-[selected]:data-[highlighted]:text-select-highlight-foreground",
+        "data-disabled:pointer-events-none data-disabled:text-select-foreground-4",
         className
       ),
       ...props
@@ -179,7 +163,7 @@ function SelectGroupLabel({
     BaseSelect.GroupLabel,
     {
       className: cn(
-        "px-2 py-1 text-xs font-medium text-menu-foreground-4",
+        "px-2 py-1 text-xs font-medium text-select-foreground-4",
         className
       ),
       ...props

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

@@ -1,29 +1,6 @@
-// src/kernel/components/ui/separator.tsx
+// src/components/ui/separator.tsx
 import { Separator as BaseSeparator } from "@base-ui/react/separator";
-
-// 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/separator.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Separator({
   className,

package/dist/kernel/components/ui/table.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/table.tsx
+// src/components/ui/table.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Table({
   className,