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

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

@@ -118,7 +118,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-[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)]",
         className
       ),
       ...props
@@ -133,9 +133,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-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",
         className
       ),
       ...props
@@ -179,7 +179,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-menu-foreground-4",
         className
       ),
       ...props

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+
+declare const tagVariants: (props?: ({
+    borderStyle?: "solid" | "dotted" | null | undefined;
+    tone?: "accent" | "neutral" | null | undefined;
+    variant?: "solid" | "soft" | "outline" | 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;
+
+export { Tag, type TagProps, tagVariants };

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

@@ -0,0 +1,76 @@
+// 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
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var tagVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-tag border px-2 py-0.5 text-xs font-medium leading-5 [&_svg]:shrink-0",
+  {
+    variants: {
+      borderStyle: {
+        dotted: "",
+        solid: ""
+      },
+      tone: {
+        accent: "[--tag-color:var(--accent-1)] [--tag-solid-background:var(--accent-solid)] [--tag-solid-foreground:var(--accent-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)]"
+      }
+    },
+    compoundVariants: [
+      {
+        borderStyle: "dotted",
+        className: "border-dotted",
+        variant: ["solid", "soft", "outline"]
+      }
+    ],
+    defaultVariants: {
+      borderStyle: "solid",
+      tone: "neutral",
+      variant: "solid"
+    }
+  }
+);
+function Tag({
+  borderStyle,
+  className,
+  tone,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(tagVariants({ borderStyle, tone, variant }), className),
+      ...props
+    }
+  );
+}
+export {
+  Tag,
+  tagVariants
+};

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

@@ -6,7 +6,7 @@ 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?: "default" | "bold" | "medium" | "semibold" | null | undefined;
+    weight?: "bold" | "medium" | "default" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextProps<T extends ElementType = "p"> = {
     as?: T;

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

@@ -23,116 +23,119 @@ function cn(...inputs) {
 // src/kernel/components/ui/text.tsx
 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": ""
+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"
+      }
     },
-    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"
-    },
-    {
-      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,

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

@@ -46,7 +46,7 @@ function ThemeToggle({
   size = "sm",
   title,
   type = "button",
-  variant = "secondary",
+  variant = "soft",
   ...props
 }) {
   const { theme, setTheme } = useTheme();

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

@@ -67,7 +67,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-lg outline-none [--text-foreground:var(--tooltip-foreground-1)] [--text-muted-foreground:var(--tooltip-foreground-4)]",
         className
       ),
       ...props
@@ -79,7 +79,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