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

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

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { LinkStyleVariant, LinkButtonVariant } from './link.js';
+import { VariantProps } from 'class-variance-authority';
+import NextLink from 'next/link';
+import { ReactNode, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import './button.js';
+
+declare const breadcrumbVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BreadcrumbVariantProps = VariantProps<typeof breadcrumbVariants>;
+type BreadcrumbStyleVariant = "default" | `link.${LinkStyleVariant}` | LinkButtonVariant;
+type BreadcrumbSizeProps = Pick<BreadcrumbVariantProps, "size">;
+type BreadcrumbStyleProps = {
+    variant?: BreadcrumbStyleVariant;
+};
+declare function Breadcrumb({ className, ...props }: ComponentPropsWithoutRef<"nav">): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbList({ className, size, ...props }: BreadcrumbSizeProps & ComponentPropsWithoutRef<"ol">): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbItem({ className, size, ...props }: BreadcrumbSizeProps & ComponentPropsWithoutRef<"li">): react_jsx_runtime.JSX.Element;
+type BreadcrumbLinkProps = {
+    active?: boolean;
+    children?: ReactNode;
+    href: string;
+} & BreadcrumbSizeProps & BreadcrumbStyleProps & Omit<ComponentPropsWithoutRef<typeof NextLink>, "href">;
+declare function BreadcrumbLink({ active, children, className, href, size, variant, ...props }: BreadcrumbLinkProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbPage({ className, size, variant, ...props }: BreadcrumbSizeProps & BreadcrumbStyleProps & ComponentPropsWithoutRef<"span">): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, size, ...props }: BreadcrumbSizeProps & HTMLAttributes<HTMLLIElement>): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbEllipsis({ className, size, ...props }: BreadcrumbSizeProps & ComponentPropsWithoutRef<"span">): react_jsx_runtime.JSX.Element;
+type BreadcrumbTrailItem = {
+    current?: boolean;
+    href: string;
+    title: ReactNode;
+};
+type BreadcrumbTrailProps = {
+    className?: string;
+    collapseAfter?: number;
+    collapseBefore?: number;
+    collapsed?: boolean;
+    items: BreadcrumbTrailItem[];
+    menuLabel?: string;
+} & BreadcrumbSizeProps & BreadcrumbStyleProps;
+declare function BreadcrumbTrailEntry({ item, size, variant, }: {
+    item: BreadcrumbTrailItem;
+} & BreadcrumbSizeProps & BreadcrumbStyleProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbTrailMenu({ hidden, menuLabel, size, }: {
+    hidden: BreadcrumbTrailItem[];
+    menuLabel: string;
+} & BreadcrumbSizeProps & BreadcrumbStyleProps): react_jsx_runtime.JSX.Element;
+declare function BreadcrumbTrail({ className, collapsed, items, menuLabel, size, variant, }: BreadcrumbTrailProps): react_jsx_runtime.JSX.Element;
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BreadcrumbStyleVariant, BreadcrumbTrail, BreadcrumbTrailEntry, type BreadcrumbTrailItem, BreadcrumbTrailMenu, type BreadcrumbTrailProps, type BreadcrumbVariantProps, breadcrumbVariants };

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

@@ -0,0 +1,365 @@
+// src/kernel/components/ui/breadcrumb.tsx
+import { CollapsibleBreadcrumbTrail } from "./breadcrumb-trail.js";
+import { buttonVariants } from "./button.js";
+import {
+  linkVariants
+} from "./link.js";
+import {
+  Menu,
+  MenuLinkItem,
+  MenuPopup,
+  MenuPortal,
+  MenuPositioner,
+  MenuTrigger
+} from "./menu.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/breadcrumb.tsx
+import { cva } from "class-variance-authority";
+import NextLink from "next/link";
+import {
+  Fragment
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var breadcrumbVariants = cva(
+  "flex min-w-0 flex-wrap items-center text-foreground-3",
+  {
+    variants: {
+      size: {
+        xs: "gap-1 text-xs",
+        sm: "gap-1.5 text-sm",
+        md: "gap-1.5 text-sm",
+        lg: "gap-2 text-base",
+        xl: "gap-2 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var breadcrumbItemVariants = cva("inline-flex min-w-0 items-center", {
+  variants: {
+    size: {
+      xs: "gap-1",
+      sm: "gap-1.5",
+      md: "gap-1.5",
+      lg: "gap-2",
+      xl: "gap-2"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var breadcrumbTextVariants = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-base"
+    }
+  }
+});
+var breadcrumbDefaultVariants = cva(
+  [
+    "inline-flex min-w-0 max-w-full truncate rounded-button text-foreground-2 opacity-100 transition-[color,opacity] hover:text-foreground-1 hover:opacity-90",
+    "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+    "data-[state=path-active]:text-foreground-1 data-[state=path-active]:opacity-100"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-sm",
+        lg: "text-base",
+        xl: "text-base"
+      }
+    }
+  }
+);
+var breadcrumbPageVariants = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-base"
+    }
+  }
+});
+var breadcrumbEllipsisVariants = cva(
+  "inline-flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        xs: "size-5 text-xs",
+        sm: "size-6 text-sm",
+        md: "size-6 text-sm",
+        lg: "size-7 text-base",
+        xl: "size-7 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function resolveBreadcrumbVariant(variant) {
+  if (variant?.startsWith("button.")) {
+    return {
+      buttonVariant: variant.slice("button.".length),
+      linkVariant: null
+    };
+  }
+  if (variant?.startsWith("link.")) {
+    return {
+      buttonVariant: null,
+      linkVariant: variant.slice("link.".length)
+    };
+  }
+  return {
+    buttonVariant: null,
+    linkVariant: null
+  };
+}
+function breadcrumbLinkClasses({
+  active,
+  className,
+  size,
+  variant = "default"
+}) {
+  const { buttonVariant, linkVariant } = resolveBreadcrumbVariant(variant);
+  return cn(
+    buttonVariant ? buttonVariants({ size, variant: buttonVariant }) : linkVariant ? linkVariants({ color: "default", size, variant: linkVariant }) : breadcrumbDefaultVariants({ size }),
+    active ? "font-medium" : void 0,
+    className
+  );
+}
+function Breadcrumb({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className: cn("min-w-0", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbList({
+  className,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("ol", { className: cn(breadcrumbVariants({ size }), className), ...props });
+}
+function BreadcrumbItem({
+  className,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cn(breadcrumbItemVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({
+  active,
+  children,
+  className,
+  href,
+  size,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NextLink,
+    {
+      "aria-current": active ? "page" : void 0,
+      className: breadcrumbLinkClasses({ active, className, size, variant }),
+      "data-state": active ? "path-active" : void 0,
+      href,
+      ...props,
+      children
+    }
+  );
+}
+function BreadcrumbPage({
+  className,
+  size,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-current": "page",
+      className: cn(
+        variant ? breadcrumbLinkClasses({ active: true, size, variant }) : "max-w-full truncate font-medium text-foreground-1 opacity-100",
+        breadcrumbPageVariants({ size }),
+        className
+      ),
+      "data-state": "path-active",
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "text-stroke-1",
+        breadcrumbTextVariants({ size }),
+        className
+      ),
+      role: "presentation",
+      ...props,
+      children: children ?? "/"
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  className,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(breadcrumbEllipsisVariants({ size }), className),
+      role: "presentation",
+      ...props,
+      children: [
+        "...",
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+function BreadcrumbTrailEntry({
+  item,
+  size,
+  variant
+}) {
+  return /* @__PURE__ */ jsx(
+    BreadcrumbItem,
+    {
+      className: item.current ? "min-w-0 shrink" : "shrink-0",
+      size,
+      children: item.current ? /* @__PURE__ */ jsx(
+        BreadcrumbPage,
+        {
+          className: "block min-w-0 max-w-full truncate whitespace-nowrap",
+          size,
+          variant,
+          children: item.title
+        }
+      ) : /* @__PURE__ */ jsx(
+        BreadcrumbLink,
+        {
+          className: "whitespace-nowrap",
+          href: item.href,
+          size,
+          variant,
+          children: item.title
+        }
+      )
+    }
+  );
+}
+function BreadcrumbTrailMenu({
+  hidden,
+  menuLabel,
+  size
+}) {
+  return /* @__PURE__ */ jsx(BreadcrumbItem, { className: "shrink-0", size, children: /* @__PURE__ */ jsxs(Menu, { children: [
+    /* @__PURE__ */ jsx(
+      MenuTrigger,
+      {
+        "aria-label": menuLabel,
+        className: cn(
+          "inline-flex items-center justify-center text-foreground-3 transition-colors hover:text-foreground-1",
+          breadcrumbEllipsisVariants({ size })
+        ),
+        children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, { size })
+      }
+    ),
+    /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { align: "start", children: /* @__PURE__ */ jsx(MenuPopup, { children: hidden.map((item) => /* @__PURE__ */ jsx(MenuLinkItem, { href: item.href, children: item.title }, item.href)) }) }) })
+  ] }) });
+}
+function BreadcrumbTrail({
+  className,
+  collapsed = false,
+  items,
+  menuLabel = "Show hidden breadcrumb links",
+  size,
+  variant
+}) {
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      CollapsibleBreadcrumbTrail,
+      {
+        className,
+        items,
+        menuLabel,
+        size,
+        variant
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Breadcrumb, { className, children: /* @__PURE__ */ jsx(BreadcrumbList, { className: "flex-nowrap overflow-hidden", size, children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    index > 0 ? /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "shrink-0", size }) : null,
+    /* @__PURE__ */ jsx(BreadcrumbTrailEntry, { item, size, variant })
+  ] }, item.href)) }) });
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbTrail,
+  BreadcrumbTrailEntry,
+  BreadcrumbTrailMenu,
+  breadcrumbVariants
+};

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

@@ -0,0 +1,144 @@
+"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/button-group.tsx
+var button_group_exports = {};
+__export(button_group_exports, {
+  ButtonGroup: () => ButtonGroup,
+  ButtonGroupSeparator: () => ButtonGroupSeparator,
+  ButtonGroupText: () => ButtonGroupText,
+  buttonGroupVariants: () => buttonGroupVariants
+});
+module.exports = __toCommonJS(button_group_exports);
+var import_button = require("./button.js");
+var import_separator = require("./separator.js");
+
+// 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/button-group.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = (
+  // biome-ignore lint/a11y/useSemanticElements: ButtonGroup can wrap buttons, links, inputs, and composite triggers; fieldset semantics would be too narrow.
+  require("react/jsx-runtime")
+);
+var buttonGroupVariants = (0, import_class_variance_authority.cva)(
+  [
+    "inline-flex w-fit items-stretch",
+    "has-[>[data-slot=button-group]]:gap-2",
+    "[&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
+    "[&>input]:flex-1",
+    "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit"
+  ].join(" "),
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>*:has(+[data-slot=button-group-separator])]:border-r-0",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>*:has(+[data-slot=button-group-separator])]:border-b-0"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  const resolvedOrientation = orientation ?? "horizontal";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        buttonGroupVariants({ orientation: resolvedOrientation }),
+        className
+      ),
+      "data-orientation": resolvedOrientation,
+      "data-slot": "button-group",
+      role: "group",
+      ...props
+    }
+  );
+}
+function ButtonGroupText({
+  className,
+  color,
+  size,
+  variant = "secondary",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        (0, import_button.buttonVariants)({ color, iconOnly: false, size, variant }),
+        "pointer-events-none",
+        className
+      ),
+      "data-slot": "button-group-text",
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_separator.Separator,
+    {
+      className: cn(
+        "relative !m-0 shrink-0 self-stretch bg-stroke-3 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px",
+        className
+      ),
+      "data-slot": "button-group-separator",
+      orientation,
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants
+});

package/dist/kernel/components/ui/button-group.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ButtonVariantProps } from './button.cjs';
+import { SeparatorProps } from './separator.cjs';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithoutRef } from 'react';
+import '@base-ui/react/separator';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonGroupProps = ComponentPropsWithoutRef<"div"> & VariantProps<typeof buttonGroupVariants>;
+declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+type ButtonGroupTextProps = Omit<ComponentPropsWithoutRef<"div">, "color"> & Pick<ButtonVariantProps, "color" | "size" | "variant">;
+declare function ButtonGroupText({ className, color, size, variant, ...props }: ButtonGroupTextProps): react_jsx_runtime.JSX.Element;
+type ButtonGroupSeparatorProps = SeparatorProps;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ButtonGroupSeparatorProps): react_jsx_runtime.JSX.Element;
+
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, buttonGroupVariants };

package/dist/kernel/components/ui/button-group.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ButtonVariantProps } from './button.js';
+import { SeparatorProps } from './separator.js';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithoutRef } from 'react';
+import '@base-ui/react/separator';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonGroupProps = ComponentPropsWithoutRef<"div"> & VariantProps<typeof buttonGroupVariants>;
+declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+type ButtonGroupTextProps = Omit<ComponentPropsWithoutRef<"div">, "color"> & Pick<ButtonVariantProps, "color" | "size" | "variant">;
+declare function ButtonGroupText({ className, color, size, variant, ...props }: ButtonGroupTextProps): react_jsx_runtime.JSX.Element;
+type ButtonGroupSeparatorProps = SeparatorProps;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ButtonGroupSeparatorProps): react_jsx_runtime.JSX.Element;
+
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonGroupTextProps, buttonGroupVariants };