@signalflare-ai/ui 0.5.0

package/dist/src/components/sensitive-input/sensitive-input.d.ts

@@ -0,0 +1,94 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { FieldErrorMatch } from '../field/field';
+import { SFInputSize, SFInputVariant } from '../input/input';
+export declare const SF_SENSITIVE_INPUT_VARIANTS: {
+    readonly size: {
+        readonly xs: {
+            readonly classes: "h-5 gap-1 rounded-sm px-1.5 text-xs";
+            readonly description: "Extra small input for compact UIs";
+        };
+        readonly sm: {
+            readonly classes: "h-6.5 gap-1 rounded-md px-2 text-xs";
+            readonly description: "Small input for secondary fields";
+        };
+        readonly base: {
+            readonly classes: "h-9 gap-1.5 rounded-lg px-3 text-base";
+            readonly description: "Default input size";
+        };
+        readonly lg: {
+            readonly classes: "h-10 gap-2 rounded-lg px-4 text-base";
+            readonly description: "Large input for prominent fields";
+        };
+    };
+    readonly variant: {
+        readonly default: {
+            readonly classes: "focus:ring-sf-ring";
+            readonly description: "Default input appearance";
+        };
+        readonly error: {
+            readonly classes: "!ring-sf-danger focus:ring-sf-danger";
+            readonly description: "Error state for validation failures";
+        };
+    };
+};
+export declare const SF_SENSITIVE_INPUT_DEFAULT_VARIANTS: {
+    readonly size: "base";
+    readonly variant: "default";
+};
+/**
+ * SensitiveInput component props.
+ *
+ * @example
+ * ```tsx
+ * <SensitiveInput label="API Key" defaultValue="sk_live_abc123xyz789" />
+ * <SensitiveInput label="Secret" value={secret} onValueChange={setSecret} />
+ * ```
+ */
+export interface SensitiveInputProps extends Omit<ComponentPropsWithoutRef<"input">, "size" | "type" | "value" | "defaultValue"> {
+    /** Controlled value */
+    value?: string;
+    /** Uncontrolled default value */
+    defaultValue?: string;
+    /** Simplified change handler receiving just the value */
+    onValueChange?: (value: string) => void;
+    /** Callback fired after value is copied to clipboard */
+    onCopy?: () => void;
+    /**
+     * Size of the input.
+     * - `"xs"` — Extra small for compact UIs
+     * - `"sm"` — Small for secondary fields
+     * - `"base"` — Default input size
+     * - `"lg"` — Large for prominent fields
+     * @default "base"
+     */
+    size?: SFInputSize;
+    /**
+     * Style variant of the input.
+     * - `"default"` — Default input appearance
+     * - `"error"` — Error state for validation failures
+     * @default "default"
+     */
+    variant?: SFInputVariant;
+    /** Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node */
+    label?: ReactNode;
+    /** Tooltip content to display next to the label via an info icon */
+    labelTooltip?: ReactNode;
+    /** Helper text displayed below the input */
+    description?: ReactNode;
+    /** Error message or validation error object */
+    error?: string | {
+        message: ReactNode;
+        match: FieldErrorMatch;
+    };
+}
+/**
+ * Password/secret input that masks its value by default and reveals on click.
+ * Includes a built-in copy-to-clipboard button on hover.
+ *
+ * @example
+ * ```tsx
+ * <SensitiveInput label="API Key" defaultValue="sk_live_abc123xyz789" />
+ * ```
+ */
+export declare const SensitiveInput: import('react').ForwardRefExoticComponent<SensitiveInputProps & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=sensitive-input.d.ts.map

package/dist/src/components/sensitive-input/sensitive-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sensitive-input.d.ts","sourceRoot":"","sources":["../../../../src/components/sensitive-input/sensitive-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,wBAAwB,EAC7B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAoB,CAAC;AAE7D,eAAO,MAAM,mCAAmC;;;CAGtC,CAAC;AAIX;;;;;;;;GAQG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,wBAAwB,CAAC,OAAO,CAAC,EACjC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,CAC3C;IACC,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,0HAA0H;IAC1H,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,eAAe,CAAA;KAAE,CAAC;CACjE;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,kHAkZ1B,CAAC"}

package/dist/src/components/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { Sidebar, SidebarProvider, SidebarRoot, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarMenuBadge, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarSeparator, SidebarInput, SidebarTrigger, SidebarRail, SidebarResizeHandle, SidebarMenuChevron, SidebarCollapsible, SidebarCollapsibleTrigger, SidebarCollapsibleContent, useSidebar, SF_SIDEBAR_VARIANTS, SF_SIDEBAR_DEFAULT_VARIANTS, SF_SIDEBAR_STYLING, type SidebarSide, type SidebarVariant, type SidebarCollapsible as SidebarCollapsibleType, type SidebarContextValue, type SidebarProviderProps, type SidebarRootProps, type SidebarMenuButtonSize, type SidebarMenuButtonProps, type SidebarMenuSubButtonProps, type SidebarGroupProps, type SidebarInputProps, } from './sidebar';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,eAAe,EACf,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,EACzB,UAAU,EACV,mBAAmB,EACnB,2BAA2B,EAC3B,kBAAkB,EAClB,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,kBAAkB,IAAI,sBAAsB,EACjD,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,GACvB,MAAM,WAAW,CAAC"}

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

@@ -0,0 +1,556 @@
+import { default as React, ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+/** Sidebar variant definitions mapping layout, collapse, and side options. */
+export declare const SF_SIDEBAR_VARIANTS: {
+    readonly variant: {
+        readonly sidebar: {
+            readonly classes: "";
+            readonly description: "Standard sidebar with border separator";
+        };
+        readonly floating: {
+            readonly classes: "";
+            readonly description: "Floating sidebar with shadow and rounded corners";
+        };
+        readonly inset: {
+            readonly classes: "";
+            readonly description: "Inset sidebar within the content area";
+        };
+    };
+    readonly collapsible: {
+        readonly icon: {
+            readonly classes: "";
+            readonly description: "Collapses to show icons only";
+        };
+        readonly offcanvas: {
+            readonly classes: "";
+            readonly description: "Slides off screen when collapsed";
+        };
+        readonly none: {
+            readonly classes: "";
+            readonly description: "Cannot be collapsed";
+        };
+    };
+    readonly side: {
+        readonly left: {
+            readonly classes: "";
+            readonly description: "Left-aligned sidebar";
+        };
+        readonly right: {
+            readonly classes: "";
+            readonly description: "Right-aligned sidebar";
+        };
+    };
+};
+export declare const SF_SIDEBAR_DEFAULT_VARIANTS: {
+    readonly variant: "sidebar";
+    readonly collapsible: "icon";
+    readonly side: "left";
+};
+export declare const SF_SIDEBAR_STYLING: {
+    readonly width: {
+        readonly expanded: "16rem";
+        readonly icon: "3rem";
+    };
+    readonly mobile: {
+        readonly breakpoint: 768;
+    };
+};
+export type SidebarSide = "left" | "right";
+export type SidebarVariant = "sidebar" | "floating" | "inset";
+export type SidebarCollapsible = "icon" | "offcanvas" | "none";
+export interface SidebarContextValue {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+    variant: "sidebar" | "floating" | "inset";
+    side: "left" | "right";
+    collapsible: "icon" | "offcanvas" | "none";
+    width: number;
+    resizable: boolean;
+    minWidth: number;
+    maxWidth: number;
+    isResizing: boolean;
+    setIsResizing: (resizing: boolean) => void;
+    setWidth: (width: number) => void;
+}
+/**
+ * Hook to access sidebar state and actions from any descendant component.
+ *
+ * @example
+ * ```tsx
+ * const { state, open, toggleSidebar, isMobile } = useSidebar();
+ * ```
+ *
+ * @throws Error if used outside a `Sidebar.Provider`.
+ */
+export declare function useSidebar(): SidebarContextValue;
+export interface SidebarProviderProps {
+    /** Initial open state when uncontrolled. @default true */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open state changes (controlled mode). */
+    onOpenChange?: (open: boolean) => void;
+    /** Sidebar layout variant. @default "sidebar" */
+    variant?: SidebarVariant;
+    /** Which side the sidebar is on. @default "left" */
+    side?: SidebarSide;
+    collapsible?: "icon" | "offcanvas" | "none";
+    /** Enable drag-to-resize on the sidebar edge. @default false */
+    resizable?: boolean;
+    /** Initial width in pixels when resizable. @default 256 */
+    defaultWidth?: number;
+    /** Minimum width in pixels when resizing. @default 200 */
+    minWidth?: number;
+    /** Maximum width in pixels when resizing. @default 480 */
+    maxWidth?: number;
+    /** Callback when width changes during resize. */
+    onWidthChange?: (width: number) => void;
+    /** Content — typically `<Sidebar>` + main content. */
+    children: ReactNode;
+    /** Additional CSS classes for the wrapper div. */
+    className?: string;
+    /** Inline styles for the wrapper div. */
+    style?: CSSProperties;
+}
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, variant, side, collapsible, resizable, defaultWidth, minWidth, maxWidth, onWidthChange, children, className, style, }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarProvider {
+    var displayName: string;
+}
+export interface SidebarRootProps extends ComponentPropsWithoutRef<"aside"> {
+    /** Additional CSS classes for the sidebar element. */
+    className?: string;
+    /** Sidebar content — Header, Content, Footer, etc. */
+    children: ReactNode;
+}
+/**
+ * Main sidebar container. Renders as `<aside>` on desktop, Dialog sheet on mobile.
+ * Must be used inside `Sidebar.Provider`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Provider>
+ *   <Sidebar>
+ *     <Sidebar.Header>...</Sidebar.Header>
+ *     <Sidebar.Content>...</Sidebar.Content>
+ *     <Sidebar.Footer>...</Sidebar.Footer>
+ *   </Sidebar>
+ * </Sidebar.Provider>
+ * ```
+ */
+declare const SidebarRoot: React.ForwardRefExoticComponent<SidebarRootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Top section of the sidebar. Typically contains a logo, title, and action button.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Header>
+ *   <CloudflareLogo />
+ *   <span>Design Engineering</span>
+ *   <Button shape="square" icon={CaretUpDownIcon} aria-label="Switch" />
+ * </Sidebar.Header>
+ * ```
+ */
+declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Scrollable middle section of the sidebar. Contains nav groups and menus.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Content>
+ *   <Sidebar.Group>...</Sidebar.Group>
+ * </Sidebar.Content>
+ * ```
+ */
+declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Bottom-pinned section of the sidebar. Typically contains toggle button and help actions.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Footer>
+ *   <Sidebar.Trigger />
+ *   <Button shape="square" icon={InfoIcon} aria-label="Help" />
+ * </Sidebar.Footer>
+ * ```
+ */
+declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /** When true, the group can be expanded/collapsed via its label. @default false */
+    collapsible?: boolean;
+    /** Initial open state when collapsible and uncontrolled. @default true */
+    defaultOpen?: boolean;
+    /** Controlled open state (collapsible mode only). */
+    open?: boolean;
+    /** Callback when open state changes (collapsible mode only). */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Groups related menu items with an optional label.
+ * When `collapsible` is set, wraps content with Base UI Collapsible for
+ * animated expand/collapse via the group label.
+ *
+ * @example Non-collapsible group
+ * ```tsx
+ * <Sidebar.Group>
+ *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+ *   <Sidebar.Menu>...</Sidebar.Menu>
+ * </Sidebar.Group>
+ * ```
+ *
+ * @example Collapsible group (requires GroupContent for animation)
+ * ```tsx
+ * <Sidebar.Group collapsible defaultOpen>
+ *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+ *   <Sidebar.GroupContent>
+ *     <Sidebar.Menu>...</Sidebar.Menu>
+ *   </Sidebar.GroupContent>
+ * </Sidebar.Group>
+ * ```
+ */
+declare const SidebarGroup: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Section label for a sidebar group (e.g., "Build", "Protect & Connect").
+ * Hidden when the sidebar is collapsed to icon-only mode.
+ *
+ * When used inside a collapsible `Sidebar.Group`, renders as a
+ * `Collapsible.Trigger` with an auto-rotating chevron.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+ * ```
+ */
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Animation wrapper for collapsible group content. Uses CSS grid-rows
+ * for smooth height transitions when the group is expanded/collapsed.
+ *
+ * **Only needed for collapsible groups.** For non-collapsible groups,
+ * place `Menu` directly inside `Group` — no wrapper required.
+ *
+ * @example Collapsible group (GroupContent required)
+ * ```tsx
+ * <Sidebar.Group collapsible defaultOpen>
+ *   <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>
+ *   <Sidebar.GroupContent>
+ *     <Sidebar.Menu>...</Sidebar.Menu>
+ *   </Sidebar.GroupContent>
+ * </Sidebar.Group>
+ * ```
+ *
+ * @example Non-collapsible group (no GroupContent needed)
+ * ```tsx
+ * <Sidebar.Group>
+ *   <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
+ *   <Sidebar.Menu>...</Sidebar.Menu>
+ * </Sidebar.Group>
+ * ```
+ */
+declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Navigation menu list. Renders as `<ul>`.
+ *
+ * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.
+ *
+ * @example Simple usage
+ * ```tsx
+ * <Sidebar.Menu>
+ *   <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>
+ *   <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>
+ * </Sidebar.Menu>
+ * ```
+ *
+ * @example With explicit MenuItem (needed for MenuAction sibling)
+ * ```tsx
+ * <Sidebar.Menu>
+ *   <Sidebar.MenuItem>
+ *     <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>
+ *     <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>
+ *   </Sidebar.MenuItem>
+ * </Sidebar.Menu>
+ * ```
+ */
+declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+/**
+ * Individual menu list item. Renders as `<li>`.
+ *
+ * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps
+ * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`
+ * explicitly when you need to place siblings (e.g., `MenuAction`) alongside
+ * a `MenuButton`.
+ *
+ * @example Explicit usage (needed for MenuAction sibling)
+ * ```tsx
+ * <Sidebar.MenuItem>
+ *   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>
+ *   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>
+ * </Sidebar.MenuItem>
+ * ```
+ */
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export type SidebarMenuButtonSize = "base" | "sm";
+export interface SidebarMenuButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children"> {
+    icon?: React.ComponentType<{
+        className?: string;
+    }> | React.ReactNode;
+    active?: boolean;
+    /**
+     * Button size.
+     * - `"base"` — Standard nav item
+     * - `"sm"` — Compact nav item
+     * @default "base"
+     */
+    size?: SidebarMenuButtonSize;
+    href?: string;
+    tooltip?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Primary interactive element inside a menu item. Renders as a `<button>` or link.
+ * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.
+ *
+ * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.
+ * Use `MenuItem` explicitly only when you need siblings (e.g., `MenuAction`).
+ *
+ * When used as a `Collapsible.Trigger` via `render` prop, the expand/collapse chevron
+ * auto-rotates thanks to Base UI's `data-panel-open` attribute combined with
+ * `group/menu-button` CSS grouping.
+ *
+ * @example Simple usage (auto-wrapped in `<li>`)
+ * ```tsx
+ * <Sidebar.Menu>
+ *   <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>
+ *   <Sidebar.MenuButton icon={ClockIcon} href="/recents">Recents</Sidebar.MenuButton>
+ * </Sidebar.Menu>
+ * ```
+ *
+ * @example With MenuAction sibling (explicit MenuItem needed)
+ * ```tsx
+ * <Sidebar.MenuItem>
+ *   <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>
+ *   <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>
+ * </Sidebar.MenuItem>
+ * ```
+ */
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<SidebarMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Right-aligned action button inside a menu item (e.g., settings gear, plus icon).
+ * Positioned absolutely so it overlays the menu button.
+ * Hidden when the sidebar is collapsed.
+ */
+declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Badge pill displayed inside a menu button (e.g., "Beta", "New").
+ * Uses dashed border styling matching the Cloudflare design system.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.MenuSubButton>
+ *   Containers
+ *   <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>
+ * </Sidebar.MenuSubButton>
+ * ```
+ */
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Indented sub-menu container for child navigation items. Renders as `<ul>` with
+ * a left border accent for visual hierarchy.
+ *
+ * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.MenuSub>
+ *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>
+ *   <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>
+ * </Sidebar.MenuSub>
+ * ```
+ */
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+/**
+ * Individual item inside a sub-menu. Renders as `<li>`.
+ *
+ * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps
+ * itself in a `<li>` when not already inside a `MenuSubItem`.
+ */
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export interface SidebarMenuSubButtonProps extends ComponentPropsWithoutRef<"button"> {
+    /** Marks this sub-item as currently active/selected. @default false */
+    active?: boolean;
+    /** Navigation URL. When set, renders as a link via LinkProvider. */
+    href?: string;
+}
+/**
+ * Button inside a sub-menu item. Does not render an icon (sub-items are
+ * indented instead). Supports active state and link rendering.
+ *
+ * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.
+ *
+ * @example Simple usage (auto-wrapped in `<li>`)
+ * ```tsx
+ * <Sidebar.MenuSub>
+ *   <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>
+ *   <Sidebar.MenuSubButton href="/observability">Observability</Sidebar.MenuSubButton>
+ * </Sidebar.MenuSub>
+ * ```
+ */
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<SidebarMenuSubButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Horizontal divider line between sidebar sections.
+ */
+declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & React.RefAttributes<HTMLHRElement>>;
+export interface SidebarInputProps extends ComponentPropsWithoutRef<"button"> {
+    /** Placeholder text displayed inside the search trigger. @default "Search..." */
+    placeholder?: string;
+    /** Keyboard shortcut hint (e.g., "⌘K"). */
+    shortcut?: string;
+}
+/**
+ * Search trigger button styled as an input. Typically opens a command palette.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Input placeholder="Quick search..." shortcut="⌘K" onClick={openSearch} />
+ * ```
+ */
+declare const SidebarInput: React.ForwardRefExoticComponent<SidebarInputProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.
+ * Defaults to a `SidebarSimpleIcon`, left-aligned.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Trigger />
+ * <Sidebar.Trigger><PanelLeftIcon className="size-5" /></Sidebar.Trigger>
+ * ```
+ */
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Invisible interaction strip at the sidebar edge for click-to-toggle.
+ * Renders a thin hover-sensitive area between the sidebar and main content.
+ */
+declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Drag handle for resizing the sidebar. Renders when `resizable` is true in
+ * both expanded and collapsed states.
+ *
+ * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.
+ * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins
+ *   tracking width from `minWidth`.
+ */
+declare const SidebarResizeHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Auto-rotating chevron for collapsible menu items. When the parent
+ * `MenuButton` is used as a `Collapsible.Trigger`, Base UI sets
+ * `data-panel-open` on the trigger — the chevron rotates automatically via CSS.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={ComputeIcon} />}>
+ *   Compute
+ *   <Sidebar.MenuChevron />
+ * </Sidebar.CollapsibleTrigger>
+ * ```
+ */
+declare function SidebarMenuChevron({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarMenuChevron {
+    var displayName: string;
+}
+/**
+ * Base UI Collapsible.Root for sidebar sub-menu expand/collapse.
+ * @see https://base-ui.com/react/components/collapsible
+ */
+declare const SidebarCollapsible: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Base UI Collapsible.Trigger for sidebar sub-menu toggle.
+ * Use `render` prop to compose with `Sidebar.MenuButton`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={DiamondIcon} />}>
+ *   Compute
+ *   <Sidebar.MenuChevron />
+ * </Sidebar.CollapsibleTrigger>
+ * ```
+ */
+declare const SidebarCollapsibleTrigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Animated collapsible panel for sidebar sub-menu content.
+ * Wraps Base UI `Collapsible.Panel` with a height transition driven by the
+ * `--collapsible-panel-height` CSS variable that Base UI measures automatically.
+ *
+ * Uses `keepMounted` by default so the exit animation plays before removal.
+ *
+ * Animation flow:
+ * - **Opening**: `data-starting-style` (h=0) → `data-open` (h=measured) — transition up
+ * - **Closing**: `data-open` removed + `data-ending-style` (h=0) — transition down
+ * - **Closed**: `data-closed` (h=0) — stays collapsed while mounted
+ */
+declare const SidebarCollapsibleContent: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Sidebar — responsive navigation panel with expand/collapse support.
+ *
+ * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,
+ * `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`,
+ * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`,
+ * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,
+ * `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`,
+ * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.
+ *
+ * Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Provider defaultOpen>
+ *   <Sidebar>
+ *     <Sidebar.Content>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>
+ *         <Sidebar.Menu>
+ *           <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>
+ *           <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>
+ *         </Sidebar.Menu>
+ *       </Sidebar.Group>
+ *     </Sidebar.Content>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Trigger />
+ *     </Sidebar.Footer>
+ *   </Sidebar>
+ * </Sidebar.Provider>
+ * ```
+ */
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarRootProps & React.RefAttributes<HTMLElement>> & {
+    Provider: typeof SidebarProvider;
+    Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
+    GroupLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    GroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Menu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    MenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    MenuButton: React.ForwardRefExoticComponent<SidebarMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    MenuAction: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    MenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    MenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+    MenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+    MenuSubButton: React.ForwardRefExoticComponent<SidebarMenuSubButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & React.RefAttributes<HTMLHRElement>>;
+    Input: React.ForwardRefExoticComponent<SidebarInputProps & React.RefAttributes<HTMLButtonElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Rail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    ResizeHandle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    MenuChevron: typeof SidebarMenuChevron;
+    Collapsible: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    CollapsibleContent: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { SidebarProvider, SidebarRoot, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarMenuBadge, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarSeparator, SidebarInput, SidebarTrigger, SidebarRail, SidebarResizeHandle, SidebarMenuChevron, SidebarCollapsible, SidebarCollapsibleTrigger, SidebarCollapsibleContent, };
+//# sourceMappingURL=sidebar.d.ts.map