fancy-ui-react 0.2.0

package/dist/components/book/index.d.ts

@@ -0,0 +1,132 @@
+export declare const BOOK_RADIUS_MAP: {
+    readonly sm: "rounded-sm";
+    readonly md: "rounded-md";
+    readonly lg: "rounded-lg";
+    readonly xl: "rounded-xl";
+};
+export declare const BOOK_SIZE_MAP: {
+    readonly sm: {
+        readonly width: "180px";
+        readonly spineTranslation: "152px";
+    };
+    readonly md: {
+        readonly width: "220px";
+        readonly spineTranslation: "192px";
+    };
+    readonly lg: {
+        readonly width: "260px";
+        readonly spineTranslation: "232px";
+    };
+    readonly xl: {
+        readonly width: "300px";
+        readonly spineTranslation: "272px";
+    };
+};
+export declare const BOOK_SHADOW_SIZE_MAP: {
+    readonly sm: "-5px 0 15px 5px var(--shadowColor)";
+    readonly md: "-7px 0 25px 7px var(--shadowColor)";
+    readonly lg: "-10px 0 35px 10px var(--shadowColor)";
+    readonly xl: "-12px 0 45px 12px var(--shadowColor)";
+};
+export declare const BOOK_COLOR_MAP: {
+    readonly slate: {
+        readonly from: "from-slate-900";
+        readonly to: "to-slate-700";
+    };
+    readonly gray: {
+        readonly from: "from-gray-900";
+        readonly to: "to-gray-700";
+    };
+    readonly zinc: {
+        readonly from: "from-zinc-900";
+        readonly to: "to-zinc-700";
+    };
+    readonly neutral: {
+        readonly from: "from-neutral-900";
+        readonly to: "to-neutral-700";
+    };
+    readonly stone: {
+        readonly from: "from-stone-900";
+        readonly to: "to-stone-700";
+    };
+    readonly red: {
+        readonly from: "from-red-900";
+        readonly to: "to-red-700";
+    };
+    readonly orange: {
+        readonly from: "from-orange-900";
+        readonly to: "to-orange-700";
+    };
+    readonly amber: {
+        readonly from: "from-amber-900";
+        readonly to: "to-amber-700";
+    };
+    readonly yellow: {
+        readonly from: "from-yellow-900";
+        readonly to: "to-yellow-700";
+    };
+    readonly lime: {
+        readonly from: "from-lime-900";
+        readonly to: "to-lime-700";
+    };
+    readonly green: {
+        readonly from: "from-green-900";
+        readonly to: "to-green-700";
+    };
+    readonly emerald: {
+        readonly from: "from-emerald-900";
+        readonly to: "to-emerald-700";
+    };
+    readonly teal: {
+        readonly from: "from-teal-900";
+        readonly to: "to-teal-700";
+    };
+    readonly cyan: {
+        readonly from: "from-cyan-900";
+        readonly to: "to-cyan-700";
+    };
+    readonly sky: {
+        readonly from: "from-sky-900";
+        readonly to: "to-sky-700";
+    };
+    readonly blue: {
+        readonly from: "from-blue-900";
+        readonly to: "to-blue-700";
+    };
+    readonly indigo: {
+        readonly from: "from-indigo-900";
+        readonly to: "to-indigo-700";
+    };
+    readonly violet: {
+        readonly from: "from-violet-900";
+        readonly to: "to-violet-700";
+    };
+    readonly purple: {
+        readonly from: "from-purple-900";
+        readonly to: "to-purple-700";
+    };
+    readonly fuchsia: {
+        readonly from: "from-fuchsia-900";
+        readonly to: "to-fuchsia-700";
+    };
+    readonly pink: {
+        readonly from: "from-pink-900";
+        readonly to: "to-pink-700";
+    };
+    readonly rose: {
+        readonly from: "from-rose-900";
+        readonly to: "to-rose-700";
+    };
+};
+export type BookColor = keyof typeof BOOK_COLOR_MAP;
+export type BookSize = keyof typeof BOOK_SIZE_MAP;
+export type BookRadius = keyof typeof BOOK_RADIUS_MAP;
+export type BookShadowSize = keyof typeof BOOK_SHADOW_SIZE_MAP;
+export { Book } from "./Book.js";
+export type { BookProps } from "./Book.js";
+export { BookHeader } from "./BookHeader.js";
+export type { BookHeaderProps } from "./BookHeader.js";
+export { BookTitle } from "./BookTitle.js";
+export type { BookTitleProps } from "./BookTitle.js";
+export { BookDescription } from "./BookDescription.js";
+export type { BookDescriptionProps } from "./BookDescription.js";

package/dist/components/book/index.js

@@ -0,0 +1,48 @@
+const BOOK_RADIUS_MAP = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl"
+};
+const BOOK_SIZE_MAP = {
+  sm: { width: "180px", spineTranslation: "152px" },
+  md: { width: "220px", spineTranslation: "192px" },
+  lg: { width: "260px", spineTranslation: "232px" },
+  xl: { width: "300px", spineTranslation: "272px" }
+};
+const BOOK_SHADOW_SIZE_MAP = {
+  sm: "-5px 0 15px 5px var(--shadowColor)",
+  md: "-7px 0 25px 7px var(--shadowColor)",
+  lg: "-10px 0 35px 10px var(--shadowColor)",
+  xl: "-12px 0 45px 12px var(--shadowColor)"
+};
+const BOOK_COLOR_MAP = {
+  slate: { from: "from-slate-900", to: "to-slate-700" },
+  gray: { from: "from-gray-900", to: "to-gray-700" },
+  zinc: { from: "from-zinc-900", to: "to-zinc-700" },
+  neutral: { from: "from-neutral-900", to: "to-neutral-700" },
+  stone: { from: "from-stone-900", to: "to-stone-700" },
+  red: { from: "from-red-900", to: "to-red-700" },
+  orange: { from: "from-orange-900", to: "to-orange-700" },
+  amber: { from: "from-amber-900", to: "to-amber-700" },
+  yellow: { from: "from-yellow-900", to: "to-yellow-700" },
+  lime: { from: "from-lime-900", to: "to-lime-700" },
+  green: { from: "from-green-900", to: "to-green-700" },
+  emerald: { from: "from-emerald-900", to: "to-emerald-700" },
+  teal: { from: "from-teal-900", to: "to-teal-700" },
+  cyan: { from: "from-cyan-900", to: "to-cyan-700" },
+  sky: { from: "from-sky-900", to: "to-sky-700" },
+  blue: { from: "from-blue-900", to: "to-blue-700" },
+  indigo: { from: "from-indigo-900", to: "to-indigo-700" },
+  violet: { from: "from-violet-900", to: "to-violet-700" },
+  purple: { from: "from-purple-900", to: "to-purple-700" },
+  fuchsia: { from: "from-fuchsia-900", to: "to-fuchsia-700" },
+  pink: { from: "from-pink-900", to: "to-pink-700" },
+  rose: { from: "from-rose-900", to: "to-rose-700" }
+};
+export {
+  BOOK_COLOR_MAP,
+  BOOK_RADIUS_MAP,
+  BOOK_SHADOW_SIZE_MAP,
+  BOOK_SIZE_MAP
+};

package/dist/components/border-beam/BorderBeam.d.ts

@@ -0,0 +1,25 @@
+/**
+ * BorderBeam - Animated beam effect that travels around the border
+ *
+ * Place inside a container with `position: relative` and `overflow: hidden`.
+ * The beam will animate around the container's border.
+ */
+export interface BorderBeamProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Size of the beam in pixels */
+    size?: number;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Border width in pixels */
+    borderWidth?: number;
+    /** Anchor position (0-100) */
+    anchor?: number;
+    /** Gradient start color */
+    colorFrom?: string;
+    /** Gradient end color */
+    colorTo?: string;
+    /** Animation delay in seconds */
+    delay?: number;
+}
+export declare function BorderBeam({ className, size, duration, borderWidth, anchor, colorFrom, colorTo, delay, }: BorderBeamProps): import("react").JSX.Element;

package/dist/components/border-beam/BorderBeam.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css                */
+function BorderBeam({
+  className,
+  size = 200,
+  duration = 15,
+  borderWidth = 1.5,
+  anchor = 90,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  delay = 0
+}) {
+  const style = {
+    "--border-beam-size": size,
+    "--border-beam-duration": `${duration}s`,
+    "--border-beam-anchor": anchor,
+    "--border-beam-border-width": borderWidth,
+    "--border-beam-color-from": colorFrom,
+    "--border-beam-color-to": colorTo,
+    "--border-beam-delay": `${delay}s`
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "border-beam",
+        "pointer-events-none absolute inset-0 rounded-[inherit]",
+        "[border:calc(var(--border-beam-border-width)*1px)_solid_transparent]",
+        "![mask-composite:intersect] ![mask-clip:padding-box,border-box] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
+        "after:absolute after:aspect-square after:w-[calc(var(--border-beam-size)*1px)]",
+        "after:[animation-delay:var(--border-beam-delay)]",
+        "after:[background:linear-gradient(to_left,var(--border-beam-color-from),var(--border-beam-color-to),transparent)]",
+        "after:[offset-anchor:calc(var(--border-beam-anchor)*1%)_50%]",
+        "after:[offset-path:rect(0_auto_auto_0_round_calc(var(--border-beam-size)*1px))]",
+        className
+      ),
+      style
+    }
+  );
+}
+export {
+  BorderBeam
+};

package/dist/components/border-beam/index.d.ts

@@ -0,0 +1,2 @@
+export { BorderBeam } from "./BorderBeam.js";
+export type { BorderBeamProps } from "./BorderBeam.js";

package/dist/components/box-reveal/BoxReveal.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * BoxReveal - Sliding box reveal animation
+ *
+ * Content fades up while a colored box slides from left to right,
+ * revealing the content underneath. Triggers when entering viewport
+ * via IntersectionObserver.
+ */
+export interface BoxRevealProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "children"> {
+    /** Color of the reveal box */
+    color?: string;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Delay before animation starts (seconds) */
+    delay?: number;
+    /** Additional CSS classes */
+    className?: string;
+    children: ReactNode;
+}
+export declare function BoxReveal({ color, duration, delay, className, children, ...props }: BoxRevealProps): import("react").JSX.Element;

package/dist/components/box-reveal/BoxReveal.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+function BoxReveal({
+  color = "#5046e6",
+  duration = 0.5,
+  delay = 0.25,
+  className,
+  children,
+  ...props
+}) {
+  const containerRef = useRef(null);
+  const [isInView, setIsInView] = useState(false);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("box-reveal relative overflow-hidden", className), ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "box-reveal-content",
+        style: {
+          opacity: isInView ? 1 : 0,
+          transform: `translateY(${isInView ? 0 : 25}px)`,
+          transition: `opacity ${duration}s ease ${delay * 2}s,transform ${duration}s ease ${delay * 2}s`
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "box-reveal-overlay absolute inset-0 z-20",
+        style: {
+          background: color,
+          left: isInView ? "100%" : "0%",
+          transition: `left ${duration}s ease-in ${delay}s`
+        }
+      }
+    )
+  ] });
+}
+export {
+  BoxReveal
+};

package/dist/components/box-reveal/index.d.ts

@@ -0,0 +1,2 @@
+export { BoxReveal } from "./BoxReveal.js";
+export type { BoxRevealProps } from "./BoxReveal.js";

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+export interface BreadcrumbItem {
+    /** The crumb's visible text. */
+    label: string;
+    /** Link target. Ignored on the last item — it is always the current page and never a link. */
+    href?: string;
+}
+export interface BreadcrumbProps {
+    /** The full trail, first to last. The last entry is always the current page. Required. */
+    items: BreadcrumbItem[];
+    /** Collapse the trail once it holds more than this many items. `0` (the default) never collapses. */
+    maxItems?: number;
+    /** How many leading items stay visible once collapsed. */
+    itemsBeforeCollapse?: number;
+    /**
+     * How many trailing items stay visible once collapsed. Floored at `1`
+     * even if given `0` — the last item is the current page, and it is
+     * never hidden.
+     */
+    itemsAfterCollapse?: number;
+    /** Separator glyph rendered between crumbs. Decorative — never read by a screen reader. */
+    separator?: string;
+    /** Accessible name for the `<nav>`. */
+    label?: string;
+    /**
+     * Custom rendering for one crumb, given the item and its index in
+     * `items`. Overriding this hands you the whole crumb, including
+     * deciding whether it is a link and whether it carries
+     * `aria-current` — see the README.
+     */
+    item?: (item: BreadcrumbItem, index: number) => ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Plays the select cue through the sound controller when a crumb
+     * rendered by the default (non-`item`-prop) markup is activated.
+     * Off by default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+/**
+ * The root element arrives through the ref channel rather than a `ref`
+ * prop, per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ *
+ * Rest props are not spread: the Svelte source reads only these props off
+ * `$props()` and has no `...restProps`, so the port carries no wider
+ * attribute surface than the component it mirrors.
+ */
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+function toCrumb(entry, index) {
+  return { key: `${index}-${entry.label}`, item: entry, index };
+}
+const Breadcrumb = forwardRef(function Breadcrumb2({
+  items,
+  maxItems = 0,
+  itemsBeforeCollapse = 1,
+  itemsAfterCollapse = 1,
+  separator = "/",
+  label = "Breadcrumb",
+  item,
+  className,
+  sound = false
+}, ref) {
+  const playCue = useSoundCue(sound);
+  function handleCrumbClick() {
+    playCue("select");
+  }
+  const rows = (() => {
+    const total = items.length;
+    const before = Math.max(0, itemsBeforeCollapse);
+    const after = Math.max(1, itemsAfterCollapse);
+    const shouldCollapse = maxItems > 0 && total > maxItems && before + after < total;
+    if (!shouldCollapse) {
+      return items.map(toCrumb);
+    }
+    const leading = items.slice(0, before).map(toCrumb);
+    const trailing = items.slice(total - after).map((entry, offset) => toCrumb(entry, total - after + offset));
+    return [...leading, { kind: "ellipsis", key: "ellipsis" }, ...trailing];
+  })();
+  const lastIndex = items.length - 1;
+  return /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, className: cn("ft-breadcrumb", className), children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1.5 text-[13px]", children: rows.map((row, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    i > 0 && // Purely decorative: never focusable, never read by a screen reader.
+    /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "text-muted-foreground/50 select-none", children: separator }),
+    "kind" in row ? (
+      /*
+       * The collapsed middle items are omitted from the accessible tree,
+       * not tucked behind a disclosure — see the README's "Truncation"
+       * section for the consequence and the alternative if that is not
+       * acceptable for a given trail.
+       */
+      /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "text-muted-foreground select-none", children: "…" })
+    ) : /* @__PURE__ */ jsx("li", { className: "flex items-center", children: item ? item(row.item, row.index) : row.index === lastIndex ? /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-foreground font-medium", children: row.item.label }) : row.item.href ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: row.item.href,
+        className: "text-muted-foreground hover:text-foreground transition-colors",
+        onClick: handleCrumbClick,
+        children: row.item.label
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: row.item.label }) })
+  ] }, row.key)) }) });
+});
+export {
+  Breadcrumb
+};

package/dist/components/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from "./Breadcrumb.js";
+export type { BreadcrumbProps, BreadcrumbItem } from "./Breadcrumb.js";

package/dist/components/button/Button.d.ts

@@ -0,0 +1,44 @@
+import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from "react";
+import type { ButtonVariant, ButtonSize } from "./types.js";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "className" | "type"> {
+    /** Visual treatment. */
+    variant?: ButtonVariant;
+    /** Padding / font-size / radius scale. */
+    size?: ButtonSize;
+    /** Native `type`. Ignored once `href` is set — an anchor has no `type`. */
+    type?: "button" | "submit" | "reset";
+    /** Greys the button out and makes it inert to pointer and keyboard activation. */
+    disabled?: boolean;
+    /**
+     * Swaps `iconStart` for a spinner and marks the control `aria-busy`, without
+     * dimming it the way `disabled` does — the button still reads as "working",
+     * not "unavailable". Activation is blocked exactly like `disabled`.
+     */
+    loading?: boolean;
+    /** Renders an `<a>` instead of a `<button>` when set. */
+    href?: string;
+    /** Anchor `target`. `"_blank"` forces a safe `rel` regardless of what `rel` says. */
+    target?: string;
+    /** Anchor `rel`. Widened, never narrowed — see `target`. */
+    rel?: string;
+    /** Stretches the button to fill its container's width. */
+    fullWidth?: boolean;
+    /** Accessible name for a button whose content is icon-only. */
+    label?: string;
+    /** Fires on activation. Never called while `disabled` or `loading`. */
+    onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** Rendered before the label. Replaced by the spinner while `loading`. */
+    iconStart?: ReactNode;
+    /** Rendered after the label. */
+    iconEnd?: ReactNode;
+    /** The button's label / content. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+    /**
+     * Plays the matching interface cue through the sound controller. Off by
+     * default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/button/Button.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { sound } from "../../sound/sound.js";
+/* empty css           */
+const SIZE_CLASSES = {
+  sm: "rounded-[6px] px-[12px] py-[5px] text-[12px]",
+  md: "rounded-[8px] px-[18px] py-[9px] text-[13px]",
+  lg: "rounded-[10px] px-[24px] py-[12px] text-[14px]"
+};
+const VARIANT_CLASSES = {
+  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  outline: "border border-border text-foreground hover:bg-accent hover:text-accent-foreground",
+  ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
+  // Colour lives in the colocated CSS: the brand purple has no semantic
+  // Tailwind token, so it is a family-level CSS custom property instead.
+  accent: "ft-btn--accent",
+  destructive: "border border-destructive/35 bg-destructive/10 text-destructive hover:bg-destructive/20"
+};
+const Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    type = "button",
+    disabled = false,
+    loading = false,
+    href = void 0,
+    target = void 0,
+    rel = void 0,
+    fullWidth = false,
+    label = void 0,
+    onClick,
+    iconStart,
+    iconEnd,
+    children,
+    className,
+    sound: sound$1 = false,
+    ...restProps
+  }, ref) => {
+    const classes = cn(
+      "ft-btn",
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium",
+      "cursor-pointer transition-colors",
+      "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ft-btn-accent)]/35",
+      // `data-disabled` covers the anchor branch, which has no native `:disabled`
+      // pseudo-class to hang the same dimmed treatment off. It tracks `disabled`
+      // alone, never `loading` — `aria-disabled` also goes true while loading (see
+      // `anchorInert` below), but the mockup's loading swatch is explicitly not
+      // dimmed, so the visual hook and the a11y attribute must stay two different
+      // things even though they overlap when `disabled` is set.
+      "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+      "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      SIZE_CLASSES[size],
+      VARIANT_CLASSES[variant],
+      fullWidth && "w-full",
+      className
+    );
+    const resolvedRel = (() => {
+      if (target !== "_blank") return rel;
+      const tokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+      tokens.add("noopener");
+      tokens.add("noreferrer");
+      return [...tokens].join(" ");
+    })();
+    const anchorInert = disabled || loading;
+    function handleClick(event) {
+      if (disabled || loading) {
+        event.preventDefault();
+        return;
+      }
+      if (sound$1) sound.play("press");
+      onClick?.(event);
+    }
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      loading ? /* @__PURE__ */ jsx("span", { className: "ft-btn-spinner", "aria-hidden": "true" }) : iconStart,
+      children,
+      iconEnd
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          className: classes,
+          href: anchorInert ? void 0 : href,
+          target: anchorInert ? void 0 : target,
+          rel: resolvedRel,
+          "aria-label": label,
+          "data-disabled": disabled ? "true" : void 0,
+          "aria-disabled": anchorInert ? "true" : void 0,
+          "aria-busy": loading ? "true" : void 0,
+          tabIndex: anchorInert ? -1 : void 0,
+          onClick: handleClick,
+          ...restProps,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: classes,
+        type,
+        disabled,
+        "aria-label": label,
+        "aria-busy": loading ? "true" : void 0,
+        onClick: handleClick,
+        ...restProps,
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button
+};

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button, type ButtonProps } from "./Button.js";
+export type { ButtonVariant, ButtonSize } from "./types.js";

package/dist/components/button/types.d.ts

@@ -0,0 +1,4 @@
+/** Visual treatment of a {@link import("./Button.js").Button | Button}. */
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "accent" | "destructive";
+/** Padding / font-size / radius scale of a Button. */
+export type ButtonSize = "sm" | "md" | "lg";

package/dist/components/button-group/ButtonGroup.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { ButtonGroupOrientation } from "./types.js";
+export interface ButtonGroupProps {
+    /** Stacking axis for the joined items. Defaults to a row. */
+    orientation?: ButtonGroupOrientation;
+    /** Accessible name for the group, exposed as `aria-label`. */
+    label?: string;
+    /** The adjacent actions to join into one seamless control. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Joins a row (or a stack) of adjacent actions into one seamless control.
+ *
+ * The root element arrives through the ref channel rather than a `ref` prop,
+ * per PORTING.md — the Svelte source declares `ref = $bindable(null)`.
+ *
+ * Rest props are not spread: the Svelte source reads only these props off
+ * `$props()` and has no `...restProps`, so the port carries no wider
+ * attribute surface than the component it mirrors.
+ */
+export declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;