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

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(--surface-menu-border)] bg-surface-menu p-1 text-surface-menu-foreground shadow-lg outline-none",
+        "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-surface-menu-foreground outline-none",
-        "data-[highlighted]:bg-surface-menu-hover data-[highlighted]:text-surface-menu-hover-foreground data-[selected]:bg-surface-menu-active data-[selected]:text-surface-menu-active-foreground",
-        "data-disabled:pointer-events-none data-disabled:text-surface-menu-disabled-foreground",
+        "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-surface-menu-disabled-foreground",
+        "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,

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;