@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,159 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Custom separator to render between items.
+     * Defaults to a chevron-right icon.
+     */
+    separator?: ReactNode;
+    /**
+     * Accessible label for the breadcrumb navigation landmark.
+     * @default "Breadcrumb"
+     */
+    "aria-label"?: string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Breadcrumb — the root `<nav>` container for breadcrumb navigation.
+ *
+ * Wraps children in a semantic navigation landmark. Use with
+ * `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, etc.
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** List children. */
+    children?: ReactNode;
+}
+/**
+ * BreadcrumbList — an ordered list containing breadcrumb items.
+ */
+declare const BreadcrumbList: react.ForwardRefExoticComponent<BreadcrumbListProps & react.RefAttributes<HTMLOListElement>>;
+interface BreadcrumbItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbItem — a single item in the breadcrumb trail.
+ */
+declare const BreadcrumbItem: react.ForwardRefExoticComponent<BreadcrumbItemProps & react.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbLink — a navigable link within a breadcrumb item.
+ *
+ * Renders as an `<a>` element. For framework-specific link components
+ * (e.g. Next.js `Link`), wrap the framework component or pass it via
+ * composition:
+ *
+ * ```tsx
+ * <BreadcrumbItem>
+ *   <Link href="/docs" className="...breadcrumb link styles...">Docs</Link>
+ * </BreadcrumbItem>
+ * ```
+ */
+declare const BreadcrumbLink: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+interface BreadcrumbPageProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbPage — the current (non-linked) page in the breadcrumb trail.
+ *
+ * Rendered with `aria-current="page"` and a distinct foreground color
+ * to indicate the user's current location.
+ */
+declare const BreadcrumbPage: react.ForwardRefExoticComponent<BreadcrumbPageProps & react.RefAttributes<HTMLSpanElement>>;
+interface BreadcrumbSeparatorProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Custom separator content. Defaults to a chevron-right icon. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbSeparator — visual divider between breadcrumb items.
+ *
+ * Defaults to a chevron-right icon. Pass custom children (string or
+ * ReactNode) to use a different separator.
+ */
+declare const BreadcrumbSeparator: react.ForwardRefExoticComponent<BreadcrumbSeparatorProps & react.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbEllipsis — a "…" placeholder indicating truncated items.
+ *
+ * Used by `BreadcrumbNav` when items exceed `maxItems`. Can also be
+ * used manually in the composable API.
+ */
+declare const BreadcrumbEllipsis: react.ForwardRefExoticComponent<BreadcrumbEllipsisProps & react.RefAttributes<HTMLSpanElement>>;
+interface BreadcrumbNavItem {
+    /** Display label for the breadcrumb segment. */
+    label: ReactNode;
+    /**
+     * URL to navigate to. When omitted, the item is rendered as the
+     * current page (non-linked, last item).
+     */
+    href?: string;
+}
+interface BreadcrumbNavProps extends Omit<BreadcrumbProps, "children"> {
+    /** Breadcrumb items in order from root to current page. */
+    items: BreadcrumbNavItem[];
+    /**
+     * Maximum number of items to show before collapsing middle items
+     * into an ellipsis. Set to 0 or Infinity to disable truncation.
+     *
+     * When truncating, the first item and the last `maxItems - 2` items
+     * are always visible, with an ellipsis in between.
+     *
+     * @default Infinity (no truncation)
+     */
+    maxItems?: number;
+    /**
+     * Custom separator to use between items.
+     * @default <ChevronRightIcon /> (via BreadcrumbSeparator)
+     */
+    separator?: ReactNode;
+    /** Additional CSS classes on the root nav. */
+    className?: string;
+}
+/**
+ * BreadcrumbNav — a composed breadcrumb component that renders a full
+ * breadcrumb trail from an array of items.
+ *
+ * Handles separator insertion, truncation with ellipsis, and
+ * current-page detection automatically.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbNav
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Products", href: "/products" },
+ *     { label: "Electronics", href: "/products/electronics" },
+ *     { label: "Laptops", href: "/products/electronics/laptops" },
+ *     { label: "MacBook Pro" },
+ *   ]}
+ *   maxItems={4}
+ * />
+ * // Renders: Home > … > Laptops > MacBook Pro
+ *
+ * <BreadcrumbNav
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Docs", href: "/docs" },
+ *     { label: "Getting Started" },
+ *   ]}
+ * />
+ * // Renders: Home > Docs > Getting Started
+ * ```
+ */
+declare const BreadcrumbNav: react.ForwardRefExoticComponent<BreadcrumbNavProps & react.RefAttributes<HTMLElement>>;
+
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbNav, type BreadcrumbNavItem, type BreadcrumbNavProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };

package/dist/components/breadcrumb.mjs

@@ -0,0 +1,235 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { focusRingCompactClasses } from "../utils/focus-ring";
+import { forwardRef, useMemo } from "react";
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function MoreHorizontalIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+      ]
+    }
+  );
+}
+const Breadcrumb = forwardRef(
+  function Breadcrumb2({ "aria-label": ariaLabel = "Breadcrumb", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: cn("not-prose", className),
+        "data-ds": "",
+        "data-ds-component": "breadcrumb",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = forwardRef(
+  function BreadcrumbList2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        className: cn(
+          "flex flex-wrap items-center gap-1.5",
+          "text-xs leading-4 tracking-wide",
+          "text-muted-foreground",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "breadcrumb-list",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = forwardRef(
+  function BreadcrumbItem2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        className: cn("inline-flex items-center gap-1.5", className),
+        "data-ds": "",
+        "data-ds-component": "breadcrumb-item",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = forwardRef(function BreadcrumbLink2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref,
+      className: cn(
+        "no-underline",
+        "text-muted-foreground",
+        "transition-colors duration-fast",
+        "hover:text-foreground",
+        focusRingCompactClasses,
+        "rounded-sm",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "breadcrumb-link",
+      ...rest,
+      children
+    }
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = forwardRef(
+  function BreadcrumbPage2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-current": "page",
+        className: cn("font-medium", "text-foreground", className),
+        "data-ds": "",
+        "data-ds-component": "breadcrumb-page",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = forwardRef(function BreadcrumbSeparator2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex items-center",
+        "text-muted-foreground/60",
+        "[&>svg]:size-3",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "breadcrumb-separator",
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+    }
+  );
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = forwardRef(function BreadcrumbEllipsis2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex items-center justify-center size-5",
+        "text-muted-foreground",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "breadcrumb-ellipsis",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+const BreadcrumbNav = forwardRef(
+  function BreadcrumbNav2({
+    items,
+    maxItems = Number.POSITIVE_INFINITY,
+    separator,
+    className,
+    ...rest
+  }, ref) {
+    const visibleItems = useMemo(() => {
+      if (items.length <= maxItems || maxItems < 2 || !Number.isFinite(maxItems)) {
+        return { items, truncated: false };
+      }
+      const tailCount = maxItems - 2;
+      const first = items[0];
+      const tail = items.slice(items.length - Math.max(tailCount, 1));
+      return {
+        items: [first, ...tail],
+        truncated: true
+      };
+    }, [items, maxItems]);
+    return /* @__PURE__ */ jsx(Breadcrumb, { ref, className, ...rest, children: /* @__PURE__ */ jsx(BreadcrumbList, { children: visibleItems.items.flatMap((item, index) => {
+      const itemKey = item.href ?? `page-${index}`;
+      const isLast = index === visibleItems.items.length - 1;
+      const isFirst = index === 0;
+      const showEllipsis = visibleItems.truncated && isFirst;
+      const elements = [];
+      elements.push(
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: isLast && !item.href ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { href: item.href, children: item.label }) }, `item-${itemKey}`)
+      );
+      if (showEllipsis) {
+        elements.push(
+          /* @__PURE__ */ jsx(BreadcrumbSeparator, { children: separator }, "sep-ellipsis-before"),
+          /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }, "ellipsis")
+        );
+      }
+      if (!isLast) {
+        elements.push(
+          /* @__PURE__ */ jsx(BreadcrumbSeparator, { children: separator }, `sep-${itemKey}`)
+        );
+      }
+      return elements;
+    }) }) });
+  }
+);
+BreadcrumbNav.displayName = "BreadcrumbNav";
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbNav,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};

package/dist/components/button.cjs

@@ -0,0 +1,254 @@
+"use strict";
+"use client";
+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);
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button,
+  buttonVariants: () => buttonVariants
+});
+module.exports = __toCommonJS(button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_focus_ring = require("../utils/focus-ring");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("react");
+const buttonVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all variants and sizes
+  [
+    // Opt out of prose typography overrides (prevents underline on <a> buttons)
+    "not-prose no-underline",
+    // Layout
+    "inline-flex items-center justify-center gap-2",
+    // Typography
+    "text-sm font-medium leading-5",
+    // Shape
+    "rounded-md",
+    // Transition (uses design system motion tokens)
+    "transition-[color,background-color,border-color,box-shadow,opacity,transform]",
+    "duration-fast ease-standard",
+    // Focus ring — WCAG AA compliant, visible on keyboard navigation only
+    import_focus_ring.focusRingClasses,
+    // Disabled — consistent across all variants
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Cursor
+    "cursor-pointer disabled:cursor-not-allowed",
+    // Prevent text selection on rapid clicks
+    "select-none",
+    // Smooth press feedback
+    "active:scale-[0.98] disabled:active:scale-100"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Visual Variants
+      // -----------------------------------------------------------------
+      variant: {
+        /**
+         * Primary — the main call-to-action. Uses brand color.
+         * High visual prominence. Use sparingly (1–2 per view).
+         */
+        primary: [
+          "bg-primary text-primary-foreground",
+          "hover:bg-primary-hover",
+          "active:bg-primary-active"
+        ],
+        /**
+         * Secondary — for secondary actions. Uses muted surface color.
+         * Medium visual prominence. Pairs with primary buttons.
+         */
+        secondary: [
+          "bg-secondary text-secondary-foreground",
+          "border border-border",
+          "hover:bg-secondary-hover",
+          "active:bg-secondary-active"
+        ],
+        /**
+         * Ghost — minimal visual weight. No background until hover.
+         * Low visual prominence. Use for tertiary actions, toolbars, nav.
+         */
+        ghost: [
+          "bg-transparent text-foreground",
+          "hover:bg-muted hover:text-foreground",
+          "active:bg-secondary-active"
+        ],
+        /**
+         * Danger — destructive actions. Uses danger (red) color.
+         * High visual prominence. Use for delete, remove, revoke actions.
+         */
+        danger: [
+          "bg-danger text-danger-foreground",
+          "hover:bg-danger-hover",
+          "active:bg-danger-active"
+        ]
+      },
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — compact buttons for dense UIs, tables, toolbars.
+         * Height: 32px (h-8), Padding: 12px horizontal, Font: 12px
+         */
+        sm: "h-8 px-3 text-xs gap-1.5",
+        /**
+         * Medium — default size for most buttons.
+         * Height: var(--ds-control-height), Padding: var(--ds-padding-button-x), Font: 14px
+         */
+        md: "h-(--ds-control-height) px-(--ds-padding-button-x) text-sm gap-2",
+        /**
+         * Large — prominent buttons for hero sections, forms.
+         * Height: 40px (h-10), Padding: 20px horizontal, Font: 14px
+         */
+        lg: "h-10 px-5 text-sm gap-2"
+      },
+      // -----------------------------------------------------------------
+      // Width Variants
+      // -----------------------------------------------------------------
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      // -----------------------------------------------------------------
+      // Icon-Only Variant
+      // -----------------------------------------------------------------
+      iconOnly: {
+        true: "!px-0",
+        false: ""
+      }
+    },
+    // -------------------------------------------------------------------
+    // Compound Variants
+    // -------------------------------------------------------------------
+    // Handle special combinations that can't be expressed as individual
+    // variant values.
+    // -------------------------------------------------------------------
+    compoundVariants: [
+      // Icon-only buttons are square (width = height)
+      { iconOnly: true, size: "sm", className: "w-8" },
+      { iconOnly: true, size: "md", className: "w-9" },
+      { iconOnly: true, size: "lg", className: "w-10" }
+    ],
+    // -------------------------------------------------------------------
+    // Default Variants
+    // -------------------------------------------------------------------
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      fullWidth: false,
+      iconOnly: false
+    }
+  }
+);
+function ButtonSpinner({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className: (0, import_cn.cn)("animate-spin size-4", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+}
+const Button = (0, import_react.forwardRef)(
+  function Button2({
+    variant = "primary",
+    size = "md",
+    fullWidth = false,
+    loading = false,
+    loadingText,
+    iconLeft,
+    iconRight,
+    iconOnly = false,
+    disabled = false,
+    as: Component = "button",
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const isDisabled = disabled || loading;
+    const iconSizeClass = size === "sm" ? "[&>svg]:size-3.5" : "[&>svg]:size-4";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Component,
+      {
+        ref,
+        type: Component === "button" ? "button" : void 0,
+        disabled: isDisabled,
+        "aria-disabled": isDisabled || void 0,
+        "aria-busy": loading || void 0,
+        className: (0, import_cn.cn)(
+          buttonVariants({ variant, size, fullWidth, iconOnly }),
+          iconSizeClass,
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "button",
+        "data-ds-variant": variant,
+        "data-ds-size": size,
+        ...loading ? { "data-ds-loading": "" } : {},
+        ...rest,
+        children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonSpinner, { className: size === "sm" ? "size-3.5" : "size-4" }),
+          loading && loadingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: loadingText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            !loading && iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0", "aria-hidden": "true", children: iconLeft }),
+            children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: (0, import_cn.cn)(
+                  "inline-flex items-center gap-[inherit]",
+                  loading && !loadingText && "invisible"
+                ),
+                children
+              }
+            ),
+            !loading && iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0", "aria-hidden": "true", children: iconRight })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  buttonVariants
+});