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

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

@@ -0,0 +1,409 @@
+"use client";
+
+// src/kernel/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 { cva } from "class-variance-authority";
+import NextLink from "next/link";
+import {
+  createContext,
+  use,
+  useLayoutEffect,
+  useRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var tabsListVariants = cva("relative inline-flex items-center", {
+  variants: {
+    variant: {
+      base: "flex-wrap gap-1 rounded-button border border-stroke-2 bg-surface-2 p-1",
+      button: "flex-wrap gap-1 rounded-button",
+      underline: "gap-5 border-stroke-3 data-[orientation=horizontal]:border-b data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-r"
+    }
+  },
+  defaultVariants: {
+    variant: "base"
+  }
+});
+var 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",
+    "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: {
+        base: [
+          "rounded-[max(calc(var(--radius-button)_-_0.25rem),0px)] px-3 py-1.5 text-foreground-2 transition-colors 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-surface-active data-active:text-foreground-1",
+          "data-[state=path-active]:bg-surface-active data-[state=path-active]:text-foreground-1"
+        ].join(" "),
+        button: [
+          "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"
+        ].join(" "),
+        underline: [
+          "rounded-button px-0 py-2 text-foreground-3 transition-colors duration-150 ease-out",
+          "hover:not-data-disabled:text-foreground-1 active:not-data-disabled:text-foreground-1",
+          "data-active:text-foreground-1 data-[state=path-active]:text-foreground-1",
+          "data-[orientation=vertical]:justify-start data-[orientation=vertical]:py-1.5 data-[orientation=vertical]:pr-4"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "base"
+    }
+  }
+);
+var tabsIndicatorVariants = cva("pointer-events-none absolute", {
+  variants: {
+    animation: {
+      grow: "",
+      slide: ""
+    },
+    variant: {
+      base: "hidden",
+      button: "hidden",
+      underline: "overflow-hidden rounded-full"
+    }
+  },
+  compoundVariants: [
+    {
+      animation: "slide",
+      className: [
+        "bg-[var(--tabs-indicator-color,var(--accent-1))]",
+        "transition-[clip-path] duration-200 ease-[cubic-bezier(0.77,0,0.175,1)] motion-reduce:transition-none",
+        "data-[orientation=horizontal]:inset-x-0 data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:h-0.5",
+        "data-[orientation=vertical]:inset-y-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:w-0.5"
+      ].join(" "),
+      variant: "underline"
+    },
+    {
+      animation: "grow",
+      className: [
+        "data-[orientation=horizontal]:inset-x-0 data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:h-0.5",
+        "data-[orientation=vertical]:inset-y-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:w-0.5"
+      ].join(" "),
+      variant: "underline"
+    }
+  ],
+  defaultVariants: {
+    animation: "slide",
+    variant: "base"
+  }
+});
+var 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);
+function useTabsStyle() {
+  return use(TabsStyleContext) ?? {
+    indicatorAnimation: "slide",
+    variant: "base"
+  };
+}
+function resolveTabsVariant(variant) {
+  return variant ?? "base";
+}
+function mergeBaseUiClassName(className, ...classes) {
+  if (typeof className === "function") {
+    return (state) => cn(...classes, className(state));
+  }
+  return 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;
+}
+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 {
+    ...style,
+    "--tabs-indicator-color": color
+  };
+}
+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))";
+}
+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) => ({
+    ...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(" ");
+}
+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) {
+      return;
+    }
+    const isVertical = state.orientation === "vertical";
+    const animation = indicator.animate(
+      [
+        {
+          opacity: 0.7,
+          transform: isVertical ? "scaleY(0.35)" : "scaleX(0.35)"
+        },
+        {
+          opacity: 1,
+          transform: isVertical ? "scaleY(1)" : "scaleX(1)"
+        }
+      ],
+      {
+        duration: 180,
+        easing: "cubic-bezier(0.23, 1, 0.32, 1)"
+      }
+    );
+    return () => {
+      animation.cancel();
+    };
+  }, [activeHeight, activeLeft, activeTop, activeWidth, state.orientation]);
+  return /* @__PURE__ */ jsx("span", { ...indicatorProps, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: tabsGrowIndicatorClassName,
+      "data-orientation": state.orientation,
+      ref: indicatorRef,
+      style: state.orientation === "vertical" ? {
+        height: "var(--active-tab-height)",
+        top: "var(--active-tab-top)",
+        transformOrigin: "center"
+      } : {
+        left: "var(--active-tab-left)",
+        transformOrigin: "center",
+        width: "var(--active-tab-width)"
+      }
+    }
+  ) });
+}
+function Tabs({
+  children,
+  className,
+  indicatorAnimation = "slide",
+  indicatorColor,
+  style,
+  variant = "base",
+  ...props
+}) {
+  const resolvedVariant = resolveTabsVariant(variant);
+  return /* @__PURE__ */ jsx(
+    TabsStyleContext,
+    {
+      value: { indicatorAnimation, indicatorColor, variant: resolvedVariant },
+      children: /* @__PURE__ */ jsx(
+        BaseTabs.Root,
+        {
+          className: mergeBaseUiClassName(className, "min-w-0"),
+          "data-slot": "tabs",
+          style: mergeTabsStyle(style, indicatorColor),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function TabsList({ className, variant, ...props }) {
+  const styleContext = useTabsStyle();
+  const resolvedVariant = variant ?? styleContext.variant;
+  return /* @__PURE__ */ jsx(
+    BaseTabs.List,
+    {
+      className: mergeBaseUiClassName(
+        className,
+        tabsListVariants({ variant: resolvedVariant })
+      ),
+      "data-slot": "tabs-list",
+      ...props
+    }
+  );
+}
+function TabsTab({ className, variant, ...props }) {
+  const styleContext = useTabsStyle();
+  const resolvedVariant = variant ?? styleContext.variant;
+  return /* @__PURE__ */ jsx(
+    BaseTabs.Tab,
+    {
+      className: mergeBaseUiClassName(
+        className,
+        tabsTabVariants({ variant: resolvedVariant })
+      ),
+      "data-slot": "tabs-tab",
+      ...props
+    }
+  );
+}
+function TabsPanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    BaseTabs.Panel,
+    {
+      className: mergeBaseUiClassName(
+        className,
+        "outline-none focus-visible:outline-2 focus-visible:outline-focus-ring"
+      ),
+      "data-slot": "tabs-panel",
+      ...props
+    }
+  );
+}
+function TabsIndicator({
+  className,
+  indicatorAnimation,
+  indicatorColor,
+  render,
+  style,
+  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);
+  return /* @__PURE__ */ jsx(
+    BaseTabs.Indicator,
+    {
+      className: mergeBaseUiClassName(
+        className,
+        tabsIndicatorVariants({
+          animation: resolvedAnimation,
+          variant: resolvedVariant
+        })
+      ),
+      "data-slot": "tabs-indicator",
+      render: indicatorRender,
+      style: mergeTabsIndicatorStyle(
+        style,
+        indicatorColor ?? styleContext.indicatorColor,
+        resolvedAnimation
+      ),
+      ...props
+    }
+  );
+}
+function NavigationTabs(props) {
+  return /* @__PURE__ */ jsx(Tabs, { "data-slot": "navigation-tabs", ...props });
+}
+function NavigationTabsList(props) {
+  return /* @__PURE__ */ jsx(TabsList, { "data-slot": "navigation-tabs-list", ...props });
+}
+function NavigationTabsIndicator(props) {
+  return /* @__PURE__ */ jsx(TabsIndicator, { "data-slot": "navigation-tabs-indicator", ...props });
+}
+function NavigationTabsLink({
+  active,
+  children,
+  href,
+  rel,
+  render,
+  target,
+  ...props
+}) {
+  const { "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,
+      render: render ?? /* @__PURE__ */ jsx(
+        NextLink,
+        {
+          href,
+          rel: target === "_blank" ? mergeRel(rel) : rel,
+          target
+        }
+      ),
+      ...tabProps,
+      children
+    }
+  );
+}
+function NavigationTabsTab(props) {
+  return /* @__PURE__ */ jsx(NavigationTabsLink, { ...props });
+}
+export {
+  NavigationTabs,
+  NavigationTabsIndicator,
+  NavigationTabsLink,
+  NavigationTabsList,
+  NavigationTabsTab,
+  Tabs,
+  TabsIndicator,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+  tabsIndicatorVariants,
+  tabsListVariants,
+  tabsTabVariants
+};

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

@@ -0,0 +1,184 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/ui/text.tsx
+var text_exports = {};
+__export(text_exports, {
+  Text: () => Text,
+  textVariants: () => textVariants
+});
+module.exports = __toCommonJS(text_exports);
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/ui/text.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var textVariants = (0, import_class_variance_authority.cva)("text-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"
+    }
+  },
+  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",
+      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"
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "body",
+    weight: "default"
+  }
+});
+function Text({
+  as,
+  className,
+  size,
+  variant,
+  weight,
+  ...props
+}) {
+  const Component = as ?? "p";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      className: cn(textVariants({ size, variant, weight }), className),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Text,
+  textVariants
+});

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

@@ -0,0 +1,17 @@
+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 { 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;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextProps<T extends ElementType = "p"> = {
+    as?: T;
+    className?: string;
+} & VariantProps<typeof textVariants> & Omit<ComponentPropsWithoutRef<T>, "as" | "className" | "color">;
+declare function Text<T extends ElementType = "p">({ as, className, size, variant, weight, ...props }: TextProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Text, type TextProps, textVariants };

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

@@ -0,0 +1,17 @@
+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 { 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;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextProps<T extends ElementType = "p"> = {
+    as?: T;
+    className?: string;
+} & VariantProps<typeof textVariants> & Omit<ComponentPropsWithoutRef<T>, "as" | "className" | "color">;
+declare function Text<T extends ElementType = "p">({ as, className, size, variant, weight, ...props }: TextProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Text, type TextProps, textVariants };