fancy-ui-react 0.2.0

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

@@ -0,0 +1,83 @@
+import type { Side, Align } from "../../internals/anchor-position.js";
+/**
+ * One selectable entry in a `Select`'s option list.
+ *
+ * A plain data shape, not a child component: `Select`'s whole API is driven
+ * off an `options` array (closer to a native `<select>`'s `<option>` list
+ * than to `RadioGroup`'s caller-composed items), so there is no
+ * `SelectOption` component to import alongside it.
+ */
+export interface SelectOption {
+    /** The value this option represents — what `Select`'s own `value` becomes when it is picked. */
+    value: string;
+    /** Visible text for this option, both in the trigger once selected and as a row in the panel. */
+    label: string;
+    /** Skips this option in keyboard navigation, typeahead, and pointer selection. */
+    disabled?: boolean;
+}
+/**
+ * The contract between the `Select` trigger and its portalled listbox panel.
+ *
+ * `Select` owns the value, the option list, and where the active (highlighted)
+ * index sits — everything the panel only ever reads or reports back through
+ * `setActive`/`commit`. The panel never assigns `value` itself; `commit`
+ * routes back through the root so `onValueChange` and the closing of the
+ * panel stay in the one place that already handles both for every other way
+ * a selection can be made (Enter, Tab, closed-state typeahead).
+ */
+export interface SelectContext {
+    /** Whether the panel is open. Read by the panel's own presence clock, which
+     *  needs it to tell an entrance from a departure, and by the panel's
+     *  dismissable `active` gate: the instant this flips false the layer stops
+     *  answering Escape, so a second Escape during the fade reaches whatever is
+     *  underneath instead of being swallowed by a panel that is already
+     *  leaving. */
+    readonly open: boolean;
+    /** The panel's own id — also what the trigger's `aria-controls` points at while open. */
+    readonly panelId: string;
+    /** The options to render as rows, in order. */
+    readonly options: SelectOption[];
+    /** The current value, `""` when nothing is selected. */
+    readonly value: string;
+    /** The trigger's own accessible name (the `label` prop), so the portalled
+     *  panel can carry the same name as `aria-label` — without this, a screen
+     *  reader announces the listbox as unnamed the instant it expands, even
+     *  though the combobox itself is named. `undefined` renders no attribute at
+     *  all, matching the trigger's own `aria-label={label}`. */
+    readonly label: string | undefined;
+    /** Index of the highlighted option, or -1 when nothing is active. */
+    readonly activeIndex: number;
+    /** Side of the trigger to place the panel on. */
+    readonly side: Side;
+    /** Alignment along the trigger's cross axis. */
+    readonly align: Align;
+    /** The real trigger button — what the panel anchors against and excludes from its own outside-click check. */
+    readonly triggerRef: HTMLElement | null;
+    /** The id a given option row must carry — also what `aria-activedescendant` points at while it's active. */
+    optionId(index: number): string;
+    /** Whether the option at `index` is the current selection. */
+    isSelected(index: number): boolean;
+    /** Whether the option at `index` is the highlighted (`aria-activedescendant`) one. */
+    isActive(index: number): boolean;
+    /** Highlights `index` without selecting it — a pointer hover, not a commit. */
+    setActive(index: number): void;
+    /** Selects the option at `index` and closes the panel, the same way Enter does. */
+    commit(index: number): void;
+    /** Closes the panel without changing the value — what Escape and an outside click do. */
+    close(): void;
+}
+/**
+ * The React counterpart of the source's `SELECT_KEY` symbol: a context object
+ * plus its two readers, per the internals contract's naming table
+ * (`FOO_KEY` → `FooReactContext` + `useFoo()`).
+ *
+ * Not re-exported from this folder's `index.ts`, because the source barrel
+ * does not export `SELECT_KEY` either — the trigger/panel wiring is private to
+ * the pair.
+ */
+export declare const SelectReactContext: import("../../internals/dom/context.js").InternalContext<SelectContext>;
+/** Reads the surrounding `Select`'s context. Throws outside one, which is the
+ *  compound-component contract: `SelectPanel` is only ever rendered by
+ *  `Select`, so there is no standalone-usage fallback to design for — the same
+ *  as the source's `getContext(SELECT_KEY)` with no fallback branch. */
+export declare const useSelectContext: () => SelectContext;

package/dist/components/select/types.js

@@ -0,0 +1,8 @@
+"use client";
+import { createInternalContext } from "../../internals/dom/context.js";
+const SelectReactContext = createInternalContext("Select context");
+const useSelectContext = SelectReactContext.useRequired;
+export {
+  SelectReactContext,
+  useSelectContext
+};

package/dist/components/sheet/Sheet.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+export type SheetSide = "left" | "right" | "top" | "bottom";
+export type SheetSize = "sm" | "md" | "lg";
+export interface SheetProps {
+    /** Whether the sheet is open. Controlled when given; the component keeps its own copy either way. */
+    open?: boolean;
+    /** Called with the new value whenever the sheet opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Edge of the viewport the panel slides in from. */
+    side?: SheetSide;
+    /** Heading rendered in the header and wired to `aria-labelledby`. */
+    title?: string;
+    /** Supporting text under the title, wired to `aria-describedby`. */
+    description?: string;
+    /** Whether Escape, the scrim and the close button can close the sheet. */
+    dismissible?: boolean;
+    /** Panel width (left/right sides) or height (top/bottom sides). */
+    size?: SheetSize;
+    /** Panel body content. */
+    children?: ReactNode;
+    /** Content pinned below the body, e.g. actions. */
+    footer?: ReactNode;
+    /** Additional CSS classes merged onto the panel. */
+    className?: string;
+    /**
+     * Accessible name for the panel when there is no `title`. A modal dialog
+     * must be named, and `aria-labelledby` can only point at a rendered
+     * heading — pass this when the header is built from `children` instead.
+     * Ignored once `title` is set, since `aria-labelledby` already supplies
+     * the name.
+     */
+    ariaLabel?: string;
+    /**
+     * Plays the `close` cue through the sound controller when the sheet is
+     * dismissed. Off by default; only audible once the user has enabled
+     * sound.
+     */
+    sound?: boolean;
+}
+export declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/sheet/Sheet.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { cn } from "../../utils.js";
+import { Portal } from "../../internals/Portal.js";
+import { useDismissable } from "../../internals/dismissable.js";
+import { useFocusTrap } from "../../internals/focus-trap.js";
+import { useScrollLock } from "../../internals/scroll-lock.js";
+import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { anchored, prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { DURATIONS, JS_EASINGS } from "../../internals/motion/tokens.js";
+import { usePresence } from "../../internals/motion/presence.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+function edgeSlide(_node, params) {
+  const reduced = prefersReducedMotion();
+  const entering = params?.entering ?? false;
+  const side = params?.side ?? "right";
+  const axis = side === "left" || side === "right" ? "X" : "Y";
+  const sign = side === "left" || side === "top" ? -1 : 1;
+  return {
+    delay: 0,
+    // Reduced motion collapses this to 0, which makes `runTransition`
+    // finish synchronously and never touch `element.animate()` — so the
+    // close is exactly as synchronous as it was before the sheet animated
+    // out at all.
+    duration: reduced ? 0 : entering ? DURATIONS.base : DURATIONS.exit,
+    easing: entering ? JS_EASINGS.out : JS_EASINGS.in,
+    // `u = 1 - t`: fully out at t=0, resting at t=1. No opacity term — a
+    // sheet leaves by travelling, and fading it as well reads as two
+    // gestures fighting.
+    css: (_t, u) => `transform: translate${axis}(${sign * 100 * u}%)`
+  };
+}
+const POSITION_CLASSES = {
+  left: "inset-y-0 left-0 border-r border-border",
+  right: "inset-y-0 right-0 border-l border-border",
+  top: "inset-x-0 top-0 border-b border-border",
+  bottom: "inset-x-0 bottom-0 border-t border-border"
+};
+const WIDTH_CLASSES = {
+  sm: "w-[20rem] max-w-[90vw] h-dvh",
+  md: "w-[24rem] max-w-[90vw] h-dvh",
+  lg: "w-[32rem] max-w-[90vw] h-dvh"
+};
+const HEIGHT_CLASSES = {
+  sm: "h-[14rem] max-h-[85vh] w-full",
+  md: "h-[18rem] max-h-[85vh] w-full",
+  lg: "h-[24rem] max-h-[85vh] w-full"
+};
+const Sheet = forwardRef(function Sheet2({
+  open: openProp,
+  onOpenChange,
+  side = "right",
+  title,
+  description,
+  dismissible = true,
+  size = "md",
+  children,
+  footer,
+  className,
+  ariaLabel,
+  sound = false
+}, forwardedRef) {
+  const [open, setOpenState] = useState(openProp ?? false);
+  const [lastOpenProp, setLastOpenProp] = useState(openProp);
+  if (lastOpenProp !== openProp) {
+    setLastOpenProp(openProp);
+    setOpenState(openProp ?? false);
+  }
+  const playCue = useSoundCue(sound);
+  function close() {
+    if (!open) return;
+    setOpenState(false);
+    playCue("close");
+    onOpenChange?.(false);
+  }
+  const uid = useFancyId();
+  const titleId = title ? `${uid}-title` : void 0;
+  const descriptionId = description ? `${uid}-description` : void 0;
+  const [panel, setPanelNode] = useElementRef();
+  const trap = useFocusTrap(panel);
+  const presence = usePresence(open, {
+    // The two halves of the focus handshake, at the two moments the
+    // source puts them: `onintrostart` → rearm, `onoutrostart` →
+    // returnFocusNow.
+    //
+    // `returnFocusNow` at the dismiss instant is the whole point: it is
+    // called on EVERY close path (Escape, the scrim, the close button, a
+    // caller's own `open` write). Waiting for the trap's own destroy
+    // would leave a keyboard user on `<body>` for the whole length of the
+    // slide-out, because the closing panel is made inert the instant the
+    // exit starts.
+    //
+    // `rearm` is the other half. A sheet reopened DURING its exit
+    // reverses instead of remounting, so the trap is never re-created:
+    // without this the panel would come back `aria-modal` and interactive
+    // with focus left on the trigger behind it, and the eager return
+    // already spent for the life of the instance.
+    onEnterStart: () => trap.rearm(),
+    onExitStart: () => trap.returnFocusNow()
+  });
+  useScrollLock(presence.mounted);
+  useDismissable(panel, {
+    onDismiss: close,
+    escape: dismissible,
+    outsideClick: dismissible,
+    active: open
+  });
+  const panelRef = useComposedRefs(
+    setPanelNode,
+    forwardedRef,
+    presence.register("panel", edgeSlide, (entering) => ({ side, entering }))
+  );
+  const scrimRef = presence.register("scrim", anchored, (entering) => ({
+    entering,
+    scale: false,
+    duration: DURATIONS.base,
+    exitDuration: DURATIONS.exit
+  }));
+  const isHorizontal = side === "left" || side === "right";
+  const dimensionClasses = isHorizontal ? WIDTH_CLASSES[size] : HEIGHT_CLASSES[size];
+  const panelClasses = cn(
+    "ft-sheet-panel bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 p-4 shadow-2xl",
+    POSITION_CLASSES[side],
+    dimensionClasses,
+    className
+  );
+  return /* @__PURE__ */ jsx(Portal, { children: presence.mounted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrimRef,
+        className: "ft-sheet-scrim fixed inset-0 z-50 bg-black/60",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: panelClasses,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": titleId ? void 0 : ariaLabel,
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        "data-state": presence.surfaceState,
+        "data-side": side,
+        children: [
+          title || dismissible ? /* @__PURE__ */ jsxs("div", { className: "ft-sheet-header flex items-start justify-between gap-4", children: [
+            title ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-[15px] font-semibold", children: title }) : null,
+            dismissible ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ft-sheet-close text-muted-foreground hover:text-foreground cursor-pointer text-[13px] leading-none",
+                "aria-label": "Close",
+                onClick: close,
+                children: "✕"
+              }
+            ) : null
+          ] }) : null,
+          description ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: descriptionId,
+              className: "text-muted-foreground text-[12.5px] leading-relaxed",
+              children: description
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "ft-sheet-body flex flex-1 flex-col gap-3 overflow-y-auto", children }),
+          footer ? /* @__PURE__ */ jsx("div", { className: "ft-sheet-footer flex justify-end gap-2", children: footer }) : null
+        ]
+      }
+    )
+  ] }) : null });
+});
+Sheet.displayName = "Sheet";
+export {
+  Sheet
+};

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

@@ -0,0 +1,2 @@
+export { Sheet } from "./Sheet.js";
+export type { SheetProps, SheetSide, SheetSize } from "./Sheet.js";

package/dist/components/shimmer-button/ShimmerButton.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+type BaseProps = {
+    /** Shimmer highlight color */
+    shimmerColor?: string;
+    /** Thickness of the shimmer border */
+    shimmerSize?: string;
+    /** Button border radius */
+    borderRadius?: string;
+    /** Duration of the shimmer animation cycle */
+    shimmerDuration?: string;
+    /** Button background color */
+    background?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Button content */
+    children?: ReactNode;
+    /**
+     * Plays the matching interface cue through the sound controller. Off
+     * by default; only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+};
+export interface ShimmerButtonProps extends BaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {
+}
+export declare const ShimmerButton: import("react").ForwardRefExoticComponent<ShimmerButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/shimmer-button/ShimmerButton.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+/* empty css                   */
+const ShimmerButton = forwardRef(
+  ({
+    className,
+    shimmerColor = "#ffffff",
+    shimmerSize = "0.05em",
+    borderRadius = "100px",
+    shimmerDuration = "3s",
+    background = "rgba(0, 0, 0, 1)",
+    children,
+    sound = false,
+    onClick,
+    ...restProps
+  }, ref) => {
+    const styleVars = {
+      "--spread": "90deg",
+      "--shimmer-color": shimmerColor,
+      "--radius": borderRadius,
+      "--speed": shimmerDuration,
+      "--cut": shimmerSize,
+      "--bg": background
+    };
+    const playCue = useSoundCue(sound);
+    function handleClick(event) {
+      if (sound && !restProps.disabled) playCue("press");
+      onClick?.(event);
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: cn(
+          "shimmer-button group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)]",
+          "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
+          className
+        ),
+        style: styleVars,
+        onClick: handleClick,
+        ...restProps,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "[container-type:size] absolute inset-0 -z-30 overflow-visible blur-[2px]", children: /* @__PURE__ */ jsx("div", { className: "shimmer-slide absolute inset-0 [aspect-ratio:1] h-[100cqh] [border-radius:0] [mask:none]", children: /* @__PURE__ */ jsx("div", { className: "spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]" }) }) }),
+          children,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "insert-0 absolute size-full",
+                "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
+                "transform-gpu transition-all duration-300 ease-in-out",
+                "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
+                "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute [inset:var(--cut)] -z-20 [border-radius:var(--radius)] [background:var(--bg)]" })
+        ]
+      }
+    );
+  }
+);
+ShimmerButton.displayName = "ShimmerButton";
+export {
+  ShimmerButton
+};

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

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

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface SidebarProps {
+    /** Accessible name for the `<nav>` landmark. Defaults to `"Sidebar"`. */
+    label?: string;
+    /**
+     * Whether the sidebar is collapsed to an icon-only rail. A plain prop —
+     * `Sidebar` has no internal control of its own that ever changes this, so
+     * there is nothing for a controlled/uncontrolled split to round-trip. Own
+     * the state yourself and pass it down.
+     */
+    collapsed?: boolean;
+    /** `SidebarGroup`, `SidebarSeparator` and `SidebarFooter`. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Sidebar: import("react").ForwardRefExoticComponent<SidebarProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { cn } from "../../utils.js";
+import { SIDEBAR_KEY } from "./types.js";
+/* empty css            */
+const Sidebar = forwardRef(function Sidebar2({ label = "Sidebar", collapsed = false, children, className }, ref) {
+  const context = useMemo(() => ({ collapsed }), [collapsed]);
+  return /* @__PURE__ */ jsx(SIDEBAR_KEY.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      "aria-label": label,
+      "data-collapsed": collapsed,
+      className: cn(
+        "ft-sidebar bg-background flex h-full flex-col gap-3 p-3",
+        collapsed ? "w-[64px] items-center px-2" : "w-[240px]",
+        className
+      ),
+      children
+    }
+  ) });
+});
+Sidebar.displayName = "Sidebar";
+export {
+  Sidebar
+};

package/dist/components/sidebar/SidebarFooter.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface SidebarFooterProps {
+    /** A decorative avatar, shown even when the sidebar is collapsed. */
+    avatar?: ReactNode;
+    /** The name / text next to the avatar. Moves to `sr-only` while collapsed — never removed. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const SidebarFooter: import("react").ForwardRefExoticComponent<SidebarFooterProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/sidebar/SidebarFooter.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import { cn } from "../../utils.js";
+import { SidebarSeparator } from "./SidebarSeparator.js";
+import { SIDEBAR_KEY } from "./types.js";
+const SidebarFooter = forwardRef(function SidebarFooter2({ avatar, children, className }, ref) {
+  const sidebar = useContext(SIDEBAR_KEY);
+  const collapsed = sidebar?.collapsed ?? false;
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("ft-sidebar-footer mt-auto flex w-full flex-col", className), children: [
+    /* @__PURE__ */ jsx(SidebarSeparator, {}),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2.5 px-2 py-[7px] text-[12px]",
+          "text-muted-foreground",
+          collapsed && "justify-center"
+        ),
+        children: [
+          avatar ? /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: avatar }) : null,
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 truncate", collapsed && "sr-only"), children })
+        ]
+      }
+    )
+  ] });
+});
+SidebarFooter.displayName = "SidebarFooter";
+export {
+  SidebarFooter
+};

package/dist/components/sidebar/SidebarGroup.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface SidebarGroupProps {
+    /** The section heading, e.g. `"General"`. Required — read by `aria-labelledby`, not decorative. */
+    label: string;
+    /** The `SidebarItem`s in this section. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function SidebarGroup({ label, children, className }: SidebarGroupProps): import("react").JSX.Element;

package/dist/components/sidebar/SidebarGroup.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../../utils.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { SIDEBAR_KEY } from "./types.js";
+function SidebarGroup({ label, children, className }) {
+  const sidebar = useContext(SIDEBAR_KEY);
+  const collapsed = sidebar?.collapsed ?? false;
+  const headingId = useFancyId();
+  return /* @__PURE__ */ jsxs("div", { className: cn("ft-sidebar-group flex w-full flex-col gap-0.5", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: headingId,
+        className: cn(
+          "text-muted-foreground/70 px-2 py-1 text-[10px] font-semibold tracking-[0.08em] uppercase",
+          collapsed && "sr-only"
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-0.5 p-0", "aria-labelledby": headingId, children })
+  ] });
+}
+export {
+  SidebarGroup
+};

package/dist/components/sidebar/SidebarItem.d.ts

@@ -0,0 +1,33 @@
+import type { MouseEvent, ReactNode } from "react";
+export interface SidebarItemProps {
+    /** Renders an `<a>` when set; a `<button type="button">` otherwise. */
+    href?: string;
+    /**
+     * Marks this as the current item: `aria-current="page"` plus the
+     * accent left bar — current is never conveyed by colour alone.
+     */
+    current?: boolean;
+    /** A count or short flag, e.g. `4` — rendered as a pill and folded into the accessible name. */
+    badge?: string | number;
+    /**
+     * What the badge means, read alongside its value in the accessible
+     * name (`"Inbox, 4 unread"`). Defaults to just the badge value if not given.
+     */
+    badgeLabel?: string;
+    /** Disables both the click and keyboard-activation paths. */
+    disabled?: boolean;
+    /** Click handler, for the `<button>` branch. Never called while `disabled`. */
+    onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    /** A decorative glyph or icon, shown even when the sidebar is collapsed. */
+    icon?: ReactNode;
+    /** The item's label. Moves to `sr-only` text while the sidebar is collapsed — never removed. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Plays the select cue through the sound controller. Off by default;
+     * only audible once the user has enabled sound.
+     */
+    sound?: boolean;
+}
+export declare const SidebarItem: import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/sidebar/SidebarItem.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import { cn } from "../../utils.js";
+import { useSoundCue } from "../../sound/use-sound.js";
+import { SIDEBAR_KEY } from "./types.js";
+/* empty css                 */
+const SidebarItem = forwardRef(
+  function SidebarItem2({
+    href,
+    current = false,
+    badge,
+    badgeLabel,
+    disabled = false,
+    onClick,
+    icon,
+    children,
+    className,
+    sound = false
+  }, ref) {
+    const sidebar = useContext(SIDEBAR_KEY);
+    const collapsed = sidebar?.collapsed ?? false;
+    const playCue = useSoundCue(sound);
+    const hasBadge = badge !== void 0 && badge !== null && badge !== "";
+    const classes = cn(
+      "ft-sidebar-item flex w-full items-center gap-2.5 rounded-[6px] px-2 py-[7px] text-[13px] transition-colors",
+      "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+      collapsed && "justify-center",
+      current ? "ft-sidebar-item--current bg-accent text-accent-foreground font-medium" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+      disabled && "pointer-events-none opacity-50",
+      className
+    );
+    function handleClick(event) {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (!current) playCue("select");
+      onClick?.(event);
+    }
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon ? /* @__PURE__ */ jsx("span", { className: "ft-sidebar-item-icon shrink-0", "aria-hidden": "true", children: icon }) : null,
+      /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate text-left", collapsed && "sr-only"), children }),
+      hasBadge ? /* @__PURE__ */ jsxs("span", { className: cn("ft-sidebar-item-badge shrink-0", collapsed && "sr-only"), children: [
+        badge,
+        badgeLabel ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          " ",
+          badgeLabel
+        ] }) : null
+      ] }) : null
+    ] });
+    return /* @__PURE__ */ jsx("li", { className: "ft-sidebar-item-wrapper w-full list-none", children: href ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href: disabled ? void 0 : href,
+        "aria-current": current ? "page" : void 0,
+        "aria-disabled": disabled ? "true" : void 0,
+        tabIndex: disabled ? -1 : void 0,
+        className: classes,
+        onClick: handleClick,
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        "aria-current": current ? "page" : void 0,
+        className: classes,
+        onClick: handleClick,
+        children: content
+      }
+    ) });
+  }
+);
+SidebarItem.displayName = "SidebarItem";
+export {
+  SidebarItem
+};