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

package/dist/kernel/components/ui/button-group.js

@@ -1,37 +1,14 @@
-// src/kernel/components/ui/button-group.tsx
-import { buttonVariants } from "./button.js";
-import { Separator } from "./separator.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/button-group.tsx
+// src/components/ui/button-group.tsx
+import { buttonVariants } from "@publish.os/nextjs/kernel/components/ui/button";
+import { Separator } from "@publish.os/nextjs/kernel/components/ui/separator";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var buttonGroupVariants = cva(
   [
     "inline-flex w-fit items-stretch",
     "has-[>[data-slot=button-group]]:gap-2",
-    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
+    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-content",
     "[&>input]:flex-1",
     "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit"
   ].join(" "),
@@ -52,7 +29,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  const resolvedOrientation = orientation ?? "horizontal";
+  let resolvedOrientation = orientation ?? "horizontal";
   return (
     // biome-ignore lint/a11y/useSemanticElements: ButtonGroup can wrap buttons, links, inputs, and composite triggers; fieldset semantics would be too narrow.
     /* @__PURE__ */ jsx(
@@ -80,7 +57,7 @@ function ButtonGroupText({
     "div",
     {
       className: cn(
-        buttonVariants({ iconOnly: false, size, variant }),
+        buttonVariants({ iconOnly: !1, size, variant }),
         "pointer-events-none",
         className
       ),

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

@@ -1,45 +1,22 @@
-// src/kernel/components/ui/button.tsx
+// src/components/ui/button.tsx
 import { Button as BaseButton } from "@base-ui/react/button";
-
-// 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/button.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
   [
     "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-button border font-medium leading-none",
-    "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(" "),
   {
     variants: {
       variant: {
-        solid: "border-accent-solid bg-accent-solid text-accent-foreground shadow-sm hover:not-data-disabled:border-accent-solid-hover hover:not-data-disabled:bg-accent-solid-hover active:not-data-disabled:border-accent-solid-active active:not-data-disabled:bg-accent-solid-active data-[state=path-active]:border-accent-solid-hover data-[state=path-active]:bg-accent-solid-hover",
-        soft: "border-0 bg-accent-soft text-accent-1 hover:not-data-disabled:bg-accent-soft-hover active:not-data-disabled:bg-accent-soft-active data-[state=path-active]:bg-accent-soft-active",
-        outline: "border-stroke-2 bg-transparent text-foreground-1 hover:not-data-disabled:bg-surface-hover active:not-data-disabled:bg-surface-active data-[state=path-active]:border-accent-border data-[state=path-active]:bg-accent-soft-hover data-[state=path-active]:text-accent-1",
-        ghost: "border-transparent bg-transparent text-foreground-2 hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-foreground-1 active:not-data-disabled:bg-surface-active data-[state=path-active]:bg-accent-soft-hover data-[state=path-active]:text-accent-1"
+        solid: "border-accent-1 bg-accent-1 text-accent-1-foreground shadow-sm hover:not-data-disabled:border-accent-1-hover hover:not-data-disabled:bg-accent-1-hover active:not-data-disabled:border-accent-1-active active:not-data-disabled:bg-accent-1-active data-[state=path-active]:border-accent-1-hover data-[state=path-active]:bg-accent-1-hover",
+        soft: "border-0 bg-accent-2 text-accent-1 hover:not-data-disabled:bg-accent-2-hover active:not-data-disabled:bg-accent-2-active data-[state=path-active]:bg-accent-2-active",
+        outline: "border-stroke-2 bg-transparent text-foreground-1 hover:not-data-disabled:bg-surface-hover active:not-data-disabled:bg-surface-active data-[state=path-active]:border-accent-2-stroke data-[state=path-active]:bg-accent-2-hover data-[state=path-active]:text-accent-1",
+        ghost: "border-transparent bg-transparent text-foreground-2 hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-foreground-1 active:not-data-disabled:bg-surface-active data-[state=path-active]:bg-accent-2-hover data-[state=path-active]:text-accent-1"
       },
       size: {
         xs: "h-7 gap-1.5 px-2 text-xs",
@@ -54,14 +31,14 @@ var buttonVariants = cva(
       }
     },
     compoundVariants: [
-      { className: "size-7 p-0", iconOnly: true, size: "xs" },
-      { className: "size-8 p-0", iconOnly: true, size: "sm" },
-      { className: "size-10 p-0", iconOnly: true, size: "md" },
-      { className: "size-11 p-0", iconOnly: true, size: "lg" },
-      { className: "size-12 p-0", iconOnly: true, size: "xl" }
+      { className: "size-7 p-0", iconOnly: !0, size: "xs" },
+      { className: "size-8 p-0", iconOnly: !0, size: "sm" },
+      { className: "size-10 p-0", iconOnly: !0, size: "md" },
+      { className: "size-11 p-0", iconOnly: !0, size: "lg" },
+      { className: "size-12 p-0", iconOnly: !0, size: "xl" }
     ],
     defaultVariants: {
-      iconOnly: false,
+      iconOnly: !1,
       size: "md",
       variant: "solid"
     }

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

@@ -4,8 +4,8 @@ import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes } from 'react';
 
 declare const cardVariants: (props?: ({
-    variant?: "ghost" | "inset" | "default" | "elevated" | null | undefined;
-    padding?: "sm" | "md" | "lg" | "none" | null | undefined;
+    variant?: "ghost" | "default" | "elevated" | "inset" | null | undefined;
+    padding?: "none" | "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CardProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
 declare function Card({ className, padding, variant, ...props }: CardProps): react_jsx_runtime.JSX.Element;

package/dist/kernel/components/ui/card.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/card.tsx
+// src/components/ui/card.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var cardVariants = cva("rounded-card border text-foreground-1", {

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

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-type DialogProps = ComponentPropsWithoutRef<typeof Dialog$1.Root>;
-type DialogTriggerProps = ComponentPropsWithoutRef<typeof Dialog$1.Trigger>;
-type DialogPortalProps = ComponentPropsWithoutRef<typeof Dialog$1.Portal>;
-type DialogBackdropProps = ComponentPropsWithoutRef<typeof Dialog$1.Backdrop>;
-type DialogPopupProps = ComponentPropsWithoutRef<typeof Dialog$1.Popup>;
-type DialogTitleProps = ComponentPropsWithoutRef<typeof Dialog$1.Title>;
-type DialogDescriptionProps = ComponentPropsWithoutRef<typeof Dialog$1.Description>;
-type DialogCloseProps = ComponentPropsWithoutRef<typeof Dialog$1.Close>;
+type DialogProps = ComponentPropsWithRef<typeof Dialog$1.Root>;
+type DialogTriggerProps = ComponentPropsWithRef<typeof Dialog$1.Trigger>;
+type DialogPortalProps = ComponentPropsWithRef<typeof Dialog$1.Portal>;
+type DialogBackdropProps = ComponentPropsWithRef<typeof Dialog$1.Backdrop>;
+type DialogPopupProps = ComponentPropsWithRef<typeof Dialog$1.Popup>;
+type DialogTitleProps = ComponentPropsWithRef<typeof Dialog$1.Title>;
+type DialogDescriptionProps = ComponentPropsWithRef<typeof Dialog$1.Description>;
+type DialogCloseProps = ComponentPropsWithRef<typeof Dialog$1.Close>;
 declare function Dialog(props: DialogProps): react_jsx_runtime.JSX.Element;
 declare function DialogTrigger({ className, ...props }: DialogTriggerProps): react_jsx_runtime.JSX.Element;
 declare function DialogPortal(props: DialogPortalProps): react_jsx_runtime.JSX.Element;

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

@@ -1,31 +1,9 @@
 "use client";
 
-// src/kernel/components/ui/dialog.tsx
+// src/components/ui/dialog.tsx
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-
-// 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/dialog.tsx
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Dialog(props) {
   return /* @__PURE__ */ jsx(BaseDialog.Root, { ...props });
@@ -35,7 +13,7 @@ function DialogTrigger({ className, ...props }) {
     BaseDialog.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,14 +21,15 @@ function DialogTrigger({ className, ...props }) {
   );
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsx(BaseDialog.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BaseDialog.Portal, { ...props, ...themeScope });
 }
 function DialogBackdrop({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     BaseDialog.Backdrop,
     {
       className: cn(
-        "animate-overlay fixed inset-0 z-modal h-dvh w-dvw bg-overlay-background",
+        "animate-overlay fixed inset-0 z-modal h-dvh w-dvw bg-dialog-backdrop",
         className
       ),
       ...props
@@ -62,7 +41,7 @@ function DialogPopup({ className, ...props }) {
     BaseDialog.Popup,
     {
       className: cn(
-        "animate-dialog-popup fixed left-1/2 top-1/2 z-modal w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 rounded-dialog border border-stroke-2 bg-surface-1 p-6 text-foreground-1 shadow-lg outline-none",
+        "animate-dialog-popup fixed left-1/2 top-1/2 z-modal w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 rounded-dialog border border-dialog-stroke-2 bg-dialog-surface-1 p-6 text-dialog-foreground-1 shadow-dialog outline-none",
         className
       ),
       ...props
@@ -74,7 +53,7 @@ function DialogTitle({ className, ...props }) {
     BaseDialog.Title,
     {
       className: cn(
-        "text-lg font-semibold tracking-tight text-foreground-1",
+        "text-lg font-semibold tracking-tight text-dialog-foreground-1",
         className
       ),
       ...props
@@ -88,7 +67,10 @@ function DialogDescription({
   return /* @__PURE__ */ jsx(
     BaseDialog.Description,
     {
-      className: cn("mt-2 text-sm leading-6 text-foreground-2", className),
+      className: cn(
+        "mt-2 text-sm leading-6 text-dialog-foreground-2",
+        className
+      ),
       ...props
     }
   );
@@ -98,8 +80,8 @@ function DialogClose({ className, ...props }) {
     BaseDialog.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-dialog-foreground-3 transition-colors hover:bg-dialog-surface-3 hover:text-dialog-foreground-1",
+        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
         className
       ),
       ...props

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

@@ -1,16 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Drawer as Drawer$1 } from '@base-ui/react/drawer';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-type DrawerProps = ComponentPropsWithoutRef<typeof Drawer$1.Root>;
-type DrawerTriggerProps = ComponentPropsWithoutRef<typeof Drawer$1.Trigger>;
-type DrawerPortalProps = ComponentPropsWithoutRef<typeof Drawer$1.Portal>;
-type DrawerBackdropProps = ComponentPropsWithoutRef<typeof Drawer$1.Backdrop>;
-type DrawerViewportProps = ComponentPropsWithoutRef<typeof Drawer$1.Viewport>;
-type DrawerPopupProps = ComponentPropsWithoutRef<typeof Drawer$1.Popup>;
-type DrawerTitleProps = ComponentPropsWithoutRef<typeof Drawer$1.Title>;
-type DrawerDescriptionProps = ComponentPropsWithoutRef<typeof Drawer$1.Description>;
-type DrawerCloseProps = ComponentPropsWithoutRef<typeof Drawer$1.Close>;
+type DrawerProps = ComponentPropsWithRef<typeof Drawer$1.Root>;
+type DrawerTriggerProps = ComponentPropsWithRef<typeof Drawer$1.Trigger>;
+type DrawerPortalProps = ComponentPropsWithRef<typeof Drawer$1.Portal>;
+type DrawerBackdropProps = ComponentPropsWithRef<typeof Drawer$1.Backdrop>;
+type DrawerViewportProps = ComponentPropsWithRef<typeof Drawer$1.Viewport>;
+type DrawerPopupProps = ComponentPropsWithRef<typeof Drawer$1.Popup>;
+type DrawerTitleProps = ComponentPropsWithRef<typeof Drawer$1.Title>;
+type DrawerDescriptionProps = ComponentPropsWithRef<typeof Drawer$1.Description>;
+type DrawerCloseProps = ComponentPropsWithRef<typeof Drawer$1.Close>;
 declare function Drawer(props: DrawerProps): react_jsx_runtime.JSX.Element;
 declare function DrawerTrigger({ className, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
 declare function DrawerPortal(props: DrawerPortalProps): react_jsx_runtime.JSX.Element;

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

@@ -1,31 +1,9 @@
 "use client";
 
-// src/kernel/components/ui/drawer.tsx
+// src/components/ui/drawer.tsx
 import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
-
-// 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/drawer.tsx
+import { useThemeScope } from "@publish.os/nextjs/theme-scope";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Drawer(props) {
   return /* @__PURE__ */ jsx(BaseDrawer.Root, { ...props });
@@ -35,7 +13,7 @@ function DrawerTrigger({ className, ...props }) {
     BaseDrawer.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,14 +21,15 @@ function DrawerTrigger({ className, ...props }) {
   );
 }
 function DrawerPortal(props) {
-  return /* @__PURE__ */ jsx(BaseDrawer.Portal, { ...props });
+  let themeScope = useThemeScope();
+  return /* @__PURE__ */ jsx(BaseDrawer.Portal, { ...props, ...themeScope });
 }
 function DrawerBackdrop({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     BaseDrawer.Backdrop,
     {
       className: cn(
-        "animate-overlay fixed inset-0 z-modal h-dvh w-dvw bg-overlay-background",
+        "animate-overlay fixed inset-0 z-modal h-dvh w-dvw bg-drawer-backdrop",
         className
       ),
       ...props
@@ -74,7 +53,7 @@ function DrawerPopup({ className, ...props }) {
     BaseDrawer.Popup,
     {
       className: cn(
-        "animate-drawer-popup pointer-events-auto fixed bottom-0 right-0 top-0 w-[min(100vw,20rem)] border-l border-stroke-2 bg-surface-1 p-6 text-foreground-1 shadow-lg outline-none",
+        "animate-drawer-popup pointer-events-auto fixed bottom-0 right-0 top-0 w-[min(100vw,20rem)] border-l border-drawer-stroke-2 bg-drawer-surface-1 p-6 text-drawer-foreground-1 shadow-drawer outline-none",
         className
       ),
       ...props
@@ -86,7 +65,7 @@ function DrawerTitle({ className, ...props }) {
     BaseDrawer.Title,
     {
       className: cn(
-        "text-lg font-semibold tracking-tight text-foreground-1",
+        "text-lg font-semibold tracking-tight text-drawer-foreground-1",
         className
       ),
       ...props
@@ -100,7 +79,10 @@ function DrawerDescription({
   return /* @__PURE__ */ jsx(
     BaseDrawer.Description,
     {
-      className: cn("mt-2 text-sm leading-6 text-foreground-2", className),
+      className: cn(
+        "mt-2 text-sm leading-6 text-drawer-foreground-2",
+        className
+      ),
       ...props
     }
   );
@@ -110,8 +92,8 @@ function DrawerClose({ className, ...props }) {
     BaseDrawer.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-drawer-foreground-3 transition-colors hover:bg-drawer-surface-3 hover:text-drawer-foreground-1",
+        "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-stroke",
         className
       ),
       ...props

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

@@ -1,29 +1,6 @@
-// src/kernel/components/ui/input.tsx
+// src/components/ui/input.tsx
 import { Input as BaseInput } from "@base-ui/react/input";
-
-// 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/input.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -31,7 +8,7 @@ var inputVariants = cva(
   [
     "flex w-full rounded-input border bg-surface-1 text-foreground-1 transition-colors",
     "placeholder:text-foreground-3",
-    "focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+    "focus:outline-none 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"
   ].join(" "),
   {
@@ -44,8 +21,8 @@ var inputVariants = cva(
         xl: "h-12 px-4 text-base"
       },
       variant: {
-        default: "border-stroke-2 focus:border-focus-ring",
-        ghost: "border-transparent bg-surface-2 focus:border-focus-ring"
+        default: "border-stroke-2 focus:border-focus-stroke",
+        ghost: "border-transparent bg-surface-2 focus:border-focus-stroke"
       }
     },
     defaultVariants: {
@@ -53,8 +30,7 @@ var inputVariants = cva(
       variant: "default"
     }
   }
-);
-var Input = forwardRef(function Input2({ className, size, variant, ...props }, ref) {
+), Input = forwardRef(function({ className, size, variant, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseInput,
     {

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

@@ -1,30 +1,9 @@
-// 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/kbd.tsx
+// src/components/ui/kbd.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var kbdVariants = cva(
-  "not-markdown-prose relative -top-[0.03em] inline-flex h-fit shrink-0 select-none items-center justify-center whitespace-nowrap bg-surface-1 px-[0.5em] pt-[0.05em] pb-[0.1em] align-text-top font-sans font-normal leading-[1.7em] text-foreground-1 [--kbd-fallback-shadow:inset_0_-0.05em_0.5em_color-mix(in_oklab,var(--stroke-4)_80%,transparent),inset_0_0.05em_color-mix(in_oklab,var(--palette-neutral-1)_95%,transparent),inset_0_0.25em_0.5em_color-mix(in_oklab,var(--surface-3)_70%,transparent),inset_0_-0.075em_color-mix(in_oklab,var(--stroke-1)_58%,var(--stroke-2)),0_0_0_0.065em_color-mix(in_oklab,var(--stroke-2)_82%,transparent),0_0.08em_0.17em_color-mix(in_oklab,var(--stroke-1)_45%,transparent)] [--kbd-fallback-shadow-active:inset_0_0.05em_color-mix(in_oklab,var(--foreground-4)_45%,transparent),0_0_0_0.065em_color-mix(in_oklab,var(--stroke-1)_64%,transparent)] [border-radius:max(var(--radius-kbd),1px)] [box-shadow:var(--kbd-shadow,var(--kbd-fallback-shadow))] [word-spacing:-0.1em] transition-[background-color,box-shadow] duration-150 hover:bg-surface-background hover:[box-shadow:var(--kbd-shadow,var(--kbd-fallback-shadow)),0_0_0_0.05em_color-mix(in_oklab,var(--stroke-2)_50%,transparent)] focus-visible:outline-2 focus-visible:outline-focus-ring active:bg-surface-2 active:pt-[0.1em] active:pb-[0.05em] active:[box-shadow:var(--kbd-shadow-active,var(--kbd-fallback-shadow-active))] [&_*]:leading-none",
+  "not-markdown-prose relative -top-[0.03em] inline-flex h-fit shrink-0 select-none items-center justify-center whitespace-nowrap bg-surface-1 px-[0.5em] pt-[0.05em] pb-[0.1em] align-text-top font-sans font-normal leading-[1.7em] text-foreground-1 [--kbd-fallback-shadow:inset_0_-0.05em_0.5em_color-mix(in_oklab,var(--stroke-4)_80%,transparent),inset_0_0.05em_color-mix(in_oklab,var(--neutral-100)_95%,transparent),inset_0_0.25em_0.5em_color-mix(in_oklab,var(--surface-3)_70%,transparent),inset_0_-0.075em_color-mix(in_oklab,var(--stroke-1)_58%,var(--stroke-2)),0_0_0_0.065em_color-mix(in_oklab,var(--stroke-2)_82%,transparent),0_0.08em_0.17em_color-mix(in_oklab,var(--stroke-1)_45%,transparent)] [--kbd-fallback-shadow-active:inset_0_0.05em_color-mix(in_oklab,var(--foreground-4)_45%,transparent),0_0_0_0.065em_color-mix(in_oklab,var(--stroke-1)_64%,transparent)] [border-radius:max(var(--radius-kbd),1px)] [box-shadow:var(--kbd-shadow,var(--kbd-fallback-shadow))] [word-spacing:-0.1em] transition-[background-color,box-shadow] duration-150 hover:bg-surface-page hover:[box-shadow:var(--kbd-shadow,var(--kbd-fallback-shadow)),0_0_0_0.05em_color-mix(in_oklab,var(--stroke-2)_50%,transparent)] focus-visible:outline-2 focus-visible:outline-focus-stroke active:bg-surface-2 active:pt-[0.1em] active:pb-[0.05em] active:[box-shadow:var(--kbd-shadow-active,var(--kbd-fallback-shadow-active))] [&_*]:leading-none",
   {
     variants: {
       size: {
@@ -40,20 +19,20 @@ var kbdVariants = cva(
       }
     },
     compoundVariants: [
-      { className: "w-[1.75em]", size: "xs", square: true },
-      { className: "w-[1.75em]", size: "sm", square: true },
-      { className: "w-[1.75em]", size: "md", square: true },
-      { className: "w-[1.75em]", size: "lg", square: true },
-      { className: "w-[1.75em]", size: "xl", square: true }
+      { className: "w-[1.75em]", size: "xs", square: !0 },
+      { className: "w-[1.75em]", size: "sm", square: !0 },
+      { className: "w-[1.75em]", size: "md", square: !0 },
+      { className: "w-[1.75em]", size: "lg", square: !0 },
+      { className: "w-[1.75em]", size: "xl", square: !0 }
     ],
     defaultVariants: {
       size: "md",
-      square: false
+      square: !1
     }
   }
 );
 function isSingleCharacter(children) {
-  return typeof children === "string" && Array.from(children.trim()).length === 1;
+  return typeof children == "string" && Array.from(children.trim()).length === 1;
 }
 function Kbd({ children, className, size, square, ...props }) {
   return /* @__PURE__ */ jsx(

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

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ReactNode, AnchorHTMLAttributes } from 'react';
 
 declare const linkVariants: (props?: ({
-    color?: "default" | "accent" | null | undefined;
+    color?: "accent" | "default" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
     variant?: "inline" | "standalone" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;