@stll/ui 0.18.0 → 0.20.0

package/dist/components/button-variants.d.ts

@@ -10,8 +10,8 @@
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
+  size?: "xs" | "sm" | "icon" | "default" | "lg" | "icon-sm" | "chip" | "icon-lg" | "icon-xl" | "icon-xs" | "xl" | null | undefined;
+  variant?: "link" | "destructive" | "outline" | "default" | "destructive-outline" | "ghost" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/composer.d.ts

@@ -0,0 +1,108 @@
+import { ReactNode } from "react";
+//#region src/components/composer.d.ts
+/**
+ * The tokens every composer box shares: the chat hero, the chat follow-up
+ * bar, the docked bar over documents (inspector chat, file overlay,
+ * Template Studio) and the law home's entry box all render one shell from
+ * these, so they restyle together. A surface that needs the look imports
+ * these rather than copying the classes; a copy is how the boxes drifted
+ * apart the first time (44px / `rounded-lg` / 14px in the chat, 38px /
+ * `rounded-2xl` / 13px in the inspector).
+ */
+/** Shared responsive size for the two round controls flanking a composer. */
+declare const COMPOSER_CONTROL_BUTTON_SIZE: "icon-sm";
+/** The bordered box: background, radius, border, colour transition. The
+ *  radius is the docked bar's original `rounded-2xl`: at the compact row's
+ *  stature it reads as a soft pill, which is the shape the composers were
+ *  meant to unify on. */
+declare const COMPOSER_BOX_CLASS = "bg-background rounded-2xl border transition-colors";
+/** The box's focus ring in its default (non-anonymized) treatment. */
+declare const COMPOSER_BOX_FOCUS_CLASS = "focus-within:border-ring";
+/**
+ * The box's "shield active" treatment when the next send is anonymized: a
+ * blue ring replaces the default focus border (both together read as a
+ * double ring on click).
+ */
+declare const COMPOSER_BOX_ANONYMIZED_CLASS = "ring-info/40 border-info/40 focus-within:border-info/60 shadow-[0_0_0_4px_rgb(from_var(--color-info)_r_g_b_/_0.08)] ring-1";
+/**
+ * The compact (one-line) bar row: its stature, end alignment, control gap
+ * and inset. The surface supplies the layout (`grid` for the chat bar's
+ * three fixed columns, `flex` for the docked bar's variable leading
+ * controls); the row grows with the editor.
+ */
+declare const COMPOSER_COMPACT_ROW_CLASS = "min-h-11 items-end gap-1 px-1.5 py-px";
+/**
+ * The compact text cell: one `text-sm` line at `leading-5` plus the
+ * vertical inset that makes a single line exactly as tall as the row's
+ * inner height (44px row, 1px inset each side ⇒ 42px), so text and controls
+ * share one centre. The editable element itself takes `min-h-0` so an empty
+ * composer collapses to this one line and grows from there.
+ */
+declare const COMPOSER_COMPACT_TEXT_CELL_CLASS = "relative min-w-0 py-[11px]";
+/** Text stature of the editor and every placeholder painted over it. */
+declare const COMPOSER_TEXT_CLASS = "text-sm leading-5";
+/**
+ * The `large` (hero) text well: the padding around the editor. The editor's
+ * own stature is `COMPOSER_LARGE_EDITOR_CLASS` (~3 lines of `text-sm` at
+ * `leading-5`), applied on the editable element by each surface because the
+ * chat editor targets its `.ProseMirror` node while a plain textarea takes
+ * it directly.
+ */
+declare const COMPOSER_LARGE_TEXT_WELL_CLASS = "ps-3 pe-3 pt-2 pb-1";
+/** The `large` editable element's stature: three lines before it grows. */
+declare const COMPOSER_LARGE_EDITOR_CLASS = "min-h-15";
+/** The placeholder painted over an empty editor, in either stature. */
+declare const COMPOSER_PLACEHOLDER_CLASS = "text-foreground-placeholder pointer-events-none absolute truncate text-sm";
+/** The `large` action row under the text well: leading controls, trailing send. */
+declare const COMPOSER_LARGE_ACTION_ROW_CLASS = "flex items-center justify-end gap-0.5 px-1.5 pb-1.5";
+/** The leading group of the action row (the (+) menu, or a scope control). */
+declare const COMPOSER_LEADING_GROUP_CLASS = "flex min-w-0 items-center gap-0.5";
+/**
+ * The round, foreground-filled primary control at the action row's end:
+ * the chat's send/stop/retry button and the law home's submit. `size-7`
+ * pins the circle to the (+) trigger's diameter at every breakpoint
+ * (`icon-sm` alone is 32px below `sm`), so a row's two round ends match.
+ */
+declare const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background hover:bg-foreground/90 size-7 shrink-0 rounded-full";
+/**
+ * A picker in the status row under the box (the chat's matter picker, the
+ * law home's scope and jurisdiction): quiet text with a hover surface, so
+ * the row stays subordinate to the box above it.
+ */
+declare const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] transition-colors";
+type ComposerStatusRowProps = {
+  /** Left cluster: matter picker, web-search / anonymize toggles, ... */
+  start?: ReactNode | undefined;
+  /** End slot, pinned to the far edge (e.g. the context meter). */
+  end?: ReactNode | undefined;
+  className?: string | undefined;
+};
+/**
+ * The slim status row rendered beneath a composer box: a `text-xs` row with
+ * a start cluster and an end slot pinned to the far edge. Shared by every
+ * surface so the shell can never drift. Renders nothing when both slots are
+ * empty, so a surface with no per-send controls shows no row.
+ */
+declare const ComposerStatusRow: ({ start, end, className }: ComposerStatusRowProps) => import("react").JSX.Element | null;
+type ComposerPickerOption<Value extends string> = {
+  label: string;
+  value: Value;
+};
+type ComposerPickerProps<Value extends string> = {
+  /** The accessible name of the choice, e.g. "Jurisdiction". */
+  ariaLabel: string;
+  /** The glyph before the current choice, sized `size-3` by the trigger. */
+  icon: ReactNode;
+  onChange: (value: Value) => void;
+  options: readonly ComposerPickerOption<Value>[];
+  value: Value;
+};
+/**
+ * One choice among a few in the status row under a composer box: the
+ * trigger the chat's matter picker renders, with a radio menu behind it.
+ * Every picker under a box renders through this so the row reads as one
+ * kind of control.
+ */
+declare const ComposerPicker: <Value extends string>({ ariaLabel, icon, onChange, options, value }: ComposerPickerProps<Value>) => import("react").JSX.Element;
+//#endregion
+export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS, ComposerPicker, ComposerPickerOption, ComposerStatusRow };

package/dist/components/composer.js

@@ -0,0 +1,132 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { DropdownMenu as Menu, DropdownMenuContent as MenuPopup, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuTrigger as MenuTrigger } from "./menu.js";
+import { ChevronDownIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/composer.tsx
+/**
+* The tokens every composer box shares: the chat hero, the chat follow-up
+* bar, the docked bar over documents (inspector chat, file overlay,
+* Template Studio) and the law home's entry box all render one shell from
+* these, so they restyle together. A surface that needs the look imports
+* these rather than copying the classes; a copy is how the boxes drifted
+* apart the first time (44px / `rounded-lg` / 14px in the chat, 38px /
+* `rounded-2xl` / 13px in the inspector).
+*/
+/** Shared responsive size for the two round controls flanking a composer. */
+const COMPOSER_CONTROL_BUTTON_SIZE = "icon-sm";
+/** The bordered box: background, radius, border, colour transition. The
+*  radius is the docked bar's original `rounded-2xl`: at the compact row's
+*  stature it reads as a soft pill, which is the shape the composers were
+*  meant to unify on. */
+const COMPOSER_BOX_CLASS = "bg-background rounded-2xl border transition-colors";
+/** The box's focus ring in its default (non-anonymized) treatment. */
+const COMPOSER_BOX_FOCUS_CLASS = "focus-within:border-ring";
+/**
+* The box's "shield active" treatment when the next send is anonymized: a
+* blue ring replaces the default focus border (both together read as a
+* double ring on click).
+*/
+const COMPOSER_BOX_ANONYMIZED_CLASS = "ring-info/40 border-info/40 focus-within:border-info/60 shadow-[0_0_0_4px_rgb(from_var(--color-info)_r_g_b_/_0.08)] ring-1";
+/**
+* The compact (one-line) bar row: its stature, end alignment, control gap
+* and inset. The surface supplies the layout (`grid` for the chat bar's
+* three fixed columns, `flex` for the docked bar's variable leading
+* controls); the row grows with the editor.
+*/
+const COMPOSER_COMPACT_ROW_CLASS = "min-h-11 items-end gap-1 px-1.5 py-px";
+/**
+* The compact text cell: one `text-sm` line at `leading-5` plus the
+* vertical inset that makes a single line exactly as tall as the row's
+* inner height (44px row, 1px inset each side ⇒ 42px), so text and controls
+* share one centre. The editable element itself takes `min-h-0` so an empty
+* composer collapses to this one line and grows from there.
+*/
+const COMPOSER_COMPACT_TEXT_CELL_CLASS = "relative min-w-0 py-[11px]";
+/** Text stature of the editor and every placeholder painted over it. */
+const COMPOSER_TEXT_CLASS = "text-sm leading-5";
+/**
+* The `large` (hero) text well: the padding around the editor. The editor's
+* own stature is `COMPOSER_LARGE_EDITOR_CLASS` (~3 lines of `text-sm` at
+* `leading-5`), applied on the editable element by each surface because the
+* chat editor targets its `.ProseMirror` node while a plain textarea takes
+* it directly.
+*/
+const COMPOSER_LARGE_TEXT_WELL_CLASS = "ps-3 pe-3 pt-2 pb-1";
+/** The `large` editable element's stature: three lines before it grows. */
+const COMPOSER_LARGE_EDITOR_CLASS = "min-h-15";
+/** The placeholder painted over an empty editor, in either stature. */
+const COMPOSER_PLACEHOLDER_CLASS = "text-foreground-placeholder pointer-events-none absolute truncate text-sm";
+/** The `large` action row under the text well: leading controls, trailing send. */
+const COMPOSER_LARGE_ACTION_ROW_CLASS = "flex items-center justify-end gap-0.5 px-1.5 pb-1.5";
+/** The leading group of the action row (the (+) menu, or a scope control). */
+const COMPOSER_LEADING_GROUP_CLASS = "flex min-w-0 items-center gap-0.5";
+/**
+* The round, foreground-filled primary control at the action row's end:
+* the chat's send/stop/retry button and the law home's submit. `size-7`
+* pins the circle to the (+) trigger's diameter at every breakpoint
+* (`icon-sm` alone is 32px below `sm`), so a row's two round ends match.
+*/
+const COMPOSER_SEND_BUTTON_CLASS = "bg-foreground text-background hover:bg-foreground/90 size-7 shrink-0 rounded-full";
+/**
+* A picker in the status row under the box (the chat's matter picker, the
+* law home's scope and jurisdiction): quiet text with a hover surface, so
+* the row stays subordinate to the box above it.
+*/
+const COMPOSER_PICKER_TRIGGER_CLASS = "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex min-w-0 shrink items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] transition-colors";
+/**
+* The slim status row rendered beneath a composer box: a `text-xs` row with
+* a start cluster and an end slot pinned to the far edge. Shared by every
+* surface so the shell can never drift. Renders nothing when both slots are
+* empty, so a surface with no per-send controls shows no row.
+*/
+const ComposerStatusRow = ({ start, end, className }) => {
+	if (start === void 0 && end === void 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("text-muted-foreground mt-1.5 flex items-center justify-between gap-2 px-1 text-xs", className),
+		children: [start, end !== void 0 && /* @__PURE__ */ jsx("div", {
+			className: "ms-auto",
+			children: end
+		})]
+	});
+};
+/**
+* One choice among a few in the status row under a composer box: the
+* trigger the chat's matter picker renders, with a radio menu behind it.
+* Every picker under a box renders through this so the row reads as one
+* kind of control.
+*/
+const ComposerPicker = ({ ariaLabel, icon, onChange, options, value }) => {
+	const current = options.find((option) => option.value === value);
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+		"aria-label": ariaLabel,
+		className: COMPOSER_PICKER_TRIGGER_CLASS,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "flex size-3 shrink-0 items-center justify-center [&>svg]:size-3",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: current?.label ?? value
+			}),
+			/* @__PURE__ */ jsx(ChevronDownIcon, {
+				"aria-hidden": "true",
+				className: "size-3 shrink-0 opacity-70"
+			})
+		]
+	}), /* @__PURE__ */ jsx(MenuPopup, {
+		align: "start",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsx(MenuRadioGroup, {
+			value,
+			children: options.map((option) => /* @__PURE__ */ jsx(MenuRadioItem, {
+				onClick: () => onChange(option.value),
+				value: option.value,
+				children: option.label
+			}, option.value))
+		})
+	})] });
+};
+//#endregion
+export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS, ComposerPicker, ComposerStatusRow };

package/dist/components/landing.d.ts

@@ -0,0 +1,61 @@
+import { ReactElement, ReactNode } from "react";
+//#region src/components/landing.d.ts
+/**
+ * A home screen's one shape: a greeting and a box in the upper fold, three
+ * columns of what the reader reaches from it below. The chat home and the
+ * law home render from these, so a reader who has learned one has learned
+ * the other, and the two cannot drift apart.
+ */
+type LandingLayoutProps = {
+  /** Header-slot actions that belong to the page rather than the fold. */
+  actions?: ReactNode | undefined;
+  /** The greeting and the box; centred in the upper fold. */
+  hero: ReactNode;
+  /** The columns; take the rest of the height, each scrolling on its own. */
+  children: ReactNode;
+  /** Below the columns, in its own bounded scroll: crawlable navigation. */
+  footer?: ReactNode | undefined;
+};
+declare const LandingLayout: ({ actions, hero, children, footer }: LandingLayoutProps) => import("react").JSX.Element;
+type LandingGreetingProps = {
+  /** The mark in the tile: the product mark, or the section's icon. */
+  icon: ReactNode;
+  /** The one line under the tile, as the page's heading. */
+  children: ReactNode;
+};
+declare const LandingGreeting: ({ icon, children }: LandingGreetingProps) => import("react").JSX.Element;
+/** A column's heading: an icon and an uppercase label, as a link or a trigger. */
+declare const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase transition-colors outline-none focus-visible:ring-2";
+/** A row of a column, as a link or a button. */
+declare const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start transition-colors outline-none focus-visible:ring-2";
+type LandingSectionProps = {
+  children: ReactNode;
+  heading: ReactNode;
+};
+/** A column: its heading stays put, its rows scroll beneath it. */
+declare const LandingSection: ({ children, heading }: LandingSectionProps) => import("react").JSX.Element;
+type LandingButtonProps = {
+  icon?: ReactElement;
+  meta?: ReactNode | undefined;
+  onClick: () => void;
+  title: ReactNode;
+};
+declare const LandingButton: ({ icon, meta, onClick, title }: LandingButtonProps) => import("react").JSX.Element;
+type LandingItemTextProps = {
+  icon?: ReactElement;
+  iconTone?: "muted" | "matter" | undefined;
+  meta?: ReactNode | undefined;
+  title: ReactNode;
+};
+declare const LandingItemText: ({ icon, iconTone, meta, title }: LandingItemTextProps) => import("react").JSX.Element;
+type LandingRowIconProps = {
+  children: ReactElement;
+  tone?: "muted" | "matter" | undefined;
+};
+declare const LandingRowIcon: ({ children, tone }: LandingRowIconProps) => import("react").JSX.Element;
+type LandingEmptyProps = {
+  children: ReactNode;
+};
+declare const LandingEmpty: ({ children }: LandingEmptyProps) => import("react").JSX.Element;
+//#endregion
+export { LANDING_ROW_CLASS, LANDING_SECTION_HEADING_CLASS, LandingButton, LandingEmpty, LandingGreeting, LandingItemText, LandingLayout, LandingRowIcon, LandingSection };

package/dist/components/landing.js

@@ -0,0 +1,97 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { ScrollArea } from "./scroll-area.js";
+import { BidiText } from "./bidi-text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/landing.tsx
+const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ jsxs("div", {
+	className: "mx-auto flex h-full w-full max-w-5xl flex-1 flex-col overflow-hidden",
+	children: [actions, /* @__PURE__ */ jsxs("div", {
+		className: "@container flex min-h-0 flex-1 flex-col items-center overflow-hidden px-4",
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea, {
+				className: "min-h-72 w-full max-w-2xl shrink basis-[22rem]",
+				scrollFade: true,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex min-h-full w-full flex-col items-center justify-center gap-8",
+					children: hero
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "grid min-h-0 w-full flex-1 auto-rows-fr gap-8 pb-6 @2xl:grid-cols-3",
+				children
+			}),
+			footer !== void 0 && /* @__PURE__ */ jsx(ScrollArea, {
+				className: "h-auto max-h-[40vh] w-full shrink-0",
+				scrollFade: true,
+				children: footer
+			})
+		]
+	})]
+});
+const LandingGreeting = ({ icon, children }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex w-full flex-col items-center gap-4 text-center",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "border-border bg-background text-foreground flex size-12 items-center justify-center rounded-lg border shadow-sm",
+		children: icon
+	}), /* @__PURE__ */ jsx("h1", {
+		className: "text-foreground max-w-md text-center text-lg font-medium",
+		children
+	})]
+});
+/** A column's heading: an icon and an uppercase label, as a link or a trigger. */
+const LANDING_SECTION_HEADING_CLASS = "text-muted-foreground hover:text-foreground focus-visible:ring-ring flex items-center gap-2 rounded-md px-1 text-xs font-semibold tracking-widest uppercase transition-colors outline-none focus-visible:ring-2";
+/** A row of a column, as a link or a button. */
+const LANDING_ROW_CLASS = "group hover:bg-accent/50 focus-visible:ring-ring rounded-md px-2 py-1.5 text-start transition-colors outline-none focus-visible:ring-2";
+/** A column: its heading stays put, its rows scroll beneath it. */
+const LandingSection = ({ children, heading }) => /* @__PURE__ */ jsxs("section", {
+	className: "flex min-h-0 min-w-0 flex-col",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: "mb-3 shrink-0",
+		children: heading
+	}), /* @__PURE__ */ jsx(ScrollArea, {
+		className: "min-h-0 flex-1",
+		scrollFade: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-1 pb-4",
+			children
+		})
+	})]
+});
+const LandingButton = ({ icon, meta, onClick, title }) => /* @__PURE__ */ jsx("button", {
+	className: LANDING_ROW_CLASS,
+	onClick,
+	type: "button",
+	children: /* @__PURE__ */ jsx(LandingItemText, {
+		...icon === void 0 ? {} : { icon },
+		meta,
+		title
+	})
+});
+const LandingItemText = ({ icon, iconTone = "muted", meta, title }) => /* @__PURE__ */ jsxs("span", {
+	className: "flex min-w-0 items-start gap-2",
+	children: [icon !== void 0 && /* @__PURE__ */ jsx(LandingRowIcon, {
+		tone: iconTone,
+		children: icon
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx(BidiText, {
+			as: "span",
+			className: "text-foreground block truncate text-sm font-medium",
+			children: title
+		}), meta !== void 0 && meta !== null ? /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground block truncate text-xs",
+			children: meta
+		}) : null]
+	})]
+});
+const LandingRowIcon = ({ children, tone = "muted" }) => /* @__PURE__ */ jsx("span", {
+	className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center transition-colors", tone === "muted" && "text-foreground-muted group-hover:text-muted-foreground"),
+	children
+});
+const LandingEmpty = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "border-border text-muted-foreground rounded-md border border-dashed px-3 py-3 text-sm",
+	children
+});
+//#endregion
+export { LANDING_ROW_CLASS, LANDING_SECTION_HEADING_CLASS, LandingButton, LandingEmpty, LandingGreeting, LandingItemText, LandingLayout, LandingRowIcon, LandingSection };

package/dist/components/sidebar.d.ts

@@ -0,0 +1,109 @@
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Separator } from "./separator.js";
+import { TooltipContent as TooltipPopup } from "./tooltip.js";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/sidebar.d.ts
+/**
+ * Inline size the sidebar takes out of the layout row when expanded, in CSS
+ * pixels. Kept equal across the two rail-shaped primitives in this package:
+ * `SIDE_RAIL_WIDTH` (inspector) and `APPLICATION_RAIL_WIDTH` are both `w-12`
+ * (48px), the same as {@link SIDEBAR_WIDTH_ICON_PX} below, so a collapsed
+ * sidebar lines up with either rail.
+ */
+declare const SIDEBAR_WIDTH_PX = 256;
+/** Inline size of the collapsed ("icon") rail, in CSS pixels. See above. */
+declare const SIDEBAR_WIDTH_ICON_PX = 48;
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+/**
+ * Inline size the sidebar takes out of the layout row, in CSS pixels. Panes
+ * docked to the opposite edge need this to know how much room is actually
+ * left for the content column. Mobile reports 0: there the sidebar is an
+ * overlay sheet and occupies no layout width.
+ */
+declare function useSidebarInlineSize(): 0 | 256 | 48;
+declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  forceCollapsed?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) => import("react").JSX.Element;
+declare const Sidebar: ({ side, variant, collapsible, mobileTitle, mobileDescription, className, children, ...props }: React.ComponentProps<"div"> & {
+  /**
+   * Which edge the sidebar docks to. Despite the physical name, this is
+   * applied as a *logical* position: `"left"` docks at the CSS inline-start
+   * edge and `"right"` docks at the inline-end edge (see the `start-0` /
+   * `end-0` classes below, keyed off `data-side`). Under `dir="rtl"` a
+   * `side="left"` sidebar therefore renders on the visual right, mirroring
+   * the reading direction rather than a fixed screen edge. `SidebarRail`
+   * derives its content-facing offset from `data-side` using the same
+   * left→end / right→start mapping so it keeps tracking the boundary
+   * between the sidebar and the content pane in both directions.
+   */
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  /** Screen-reader title for the mobile sheet. Override to localize. */
+  mobileTitle?: string;
+  /** Screen-reader description for the mobile sheet. Override to localize. */
+  mobileDescription?: string;
+}) => import("react").JSX.Element;
+declare const SidebarTrigger: ({ className, onClick, label, "aria-label": ariaLabel, ...props }: React.ComponentProps<typeof Button> & {
+  /** Accessible name for the trigger. Override to localize. */
+  label?: string;
+}) => import("react").JSX.Element;
+declare const SidebarRail: ({ className, label, "aria-label": ariaLabel, ...props }: React.ComponentProps<"button"> & {
+  /** Accessible name for the rail. Override to localize. */
+  label?: string;
+}) => import("react").JSX.Element;
+declare const SidebarInset: ({ className, ...props }: React.ComponentProps<"main">) => import("react").JSX.Element;
+declare const SidebarInput: ({ className, ...props }: React.ComponentProps<typeof Input>) => import("react").JSX.Element;
+declare const SidebarHeader: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarFooter: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarSeparator: ({ className, ...props }: React.ComponentProps<typeof Separator>) => import("react").JSX.Element;
+declare const SidebarContent: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarGroup: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarGroupLabel: ({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) => import("react").JSX.Element;
+declare const SidebarGroupAction: ({ className, asChild, ...props }: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+}) => import("react").JSX.Element;
+declare const SidebarGroupContent: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">) => import("react").JSX.Element;
+declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+  variant?: "outline" | "default" | null | undefined;
+  size?: "sm" | "default" | "lg" | "rail" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipPopup>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) => import("react").JSX.Element;
+declare const SidebarMenuAction: ({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) => import("react").JSX.Element;
+declare const SidebarMenuBadge: ({ className, ...props }: React.ComponentProps<"div">) => import("react").JSX.Element;
+declare const SidebarMenuSkeleton: ({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) => import("react").JSX.Element;
+declare const SidebarMenuSub: ({ className, ...props }: React.ComponentProps<"ul">) => import("react").JSX.Element;
+declare const SidebarMenuSubItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
+declare const SidebarMenuSubButton: ({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) => import("react").JSX.Element;
+//#endregion
+export { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, useSidebarInlineSize };