@tulipfarm/sprout 0.3.1 → 0.4.0

package/dist/components/separator.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps, ReactNode } from "react";
-import { Separator as BaseSeparator } from "@base-ui/react/separator";
-import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactNode } from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
 export declare const separatorVariantNames: readonly ["line", "fade", "marker", "marker-border"];
 export declare const separatorOrientationNames: readonly ["horizontal", "vertical"];
 export declare const separatorToneNames: readonly ["default", "input"];
@@ -8,15 +8,15 @@ export type SeparatorVariant = (typeof separatorVariantNames)[number];
 export type SeparatorOrientation = (typeof separatorOrientationNames)[number];
 export type SeparatorTone = (typeof separatorToneNames)[number];
 /** A bare 1px rule, horizontal or vertical. */
-export interface SeparatorLineProps extends Omit<BaseSeparator.Props, "children"> {
-    variant?: "line" | undefined;
+export interface SeparatorLineProps extends Omit<BaseSeparator.Props, 'children'> {
+    variant?: 'line' | undefined;
     /** `"input"` matches control borders, for dividers inside grouped buttons. */
     tone?: SeparatorTone | undefined;
     children?: undefined;
 }
 /** A horizontal rule with centered content, such as "or". */
-export interface SeparatorLabelProps extends Omit<ComponentProps<"div">, "children"> {
-    variant?: "line" | undefined;
+export interface SeparatorLabelProps extends Omit<ComponentProps<'div'>, 'children'> {
+    variant?: 'line' | undefined;
     /**
      * Short content centered on the line. Content that renders nothing, such
      * as `false`, leaves a spaced plain line.
@@ -24,25 +24,25 @@ export interface SeparatorLabelProps extends Omit<ComponentProps<"div">, "childr
     children: ReactNode;
 }
 /** A horizontal rule with faded ends and a centered text label. */
-export interface SeparatorFadeProps extends Omit<BaseSeparator.Props, "children" | "orientation"> {
-    variant: "fade";
+export interface SeparatorFadeProps extends Omit<BaseSeparator.Props, 'children' | 'orientation'> {
+    variant: 'fade';
     /** The label. It also names the separator for assistive technology. */
     children: string;
 }
 export interface SeparatorMarkerState extends Record<string, unknown> {
-    slot: "separator";
-    variant: "marker" | "marker-border";
+    slot: 'separator';
+    variant: 'marker' | 'marker-border';
 }
 /** A quiet, full-width timeline note, such as "Used skill" or "Today". */
-export interface SeparatorMarkerProps extends useRender.ComponentProps<"div", SeparatorMarkerState> {
+export interface SeparatorMarkerProps extends useRender.ComponentProps<'div', SeparatorMarkerState> {
     /** `"marker-border"` adds a line under the row. */
-    variant: "marker" | "marker-border";
+    variant: 'marker' | 'marker-border';
 }
 export type SeparatorProps = SeparatorLineProps | SeparatorLabelProps | SeparatorFadeProps | SeparatorMarkerProps;
 export declare function Separator(props: SeparatorProps): import("react").JSX.Element;
-export type SeparatorIconProps = ComponentProps<"span">;
+export type SeparatorIconProps = ComponentProps<'span'>;
 /** A 16px decorative icon slot. It is hidden from assistive technology. */
 export declare function SeparatorIcon({ className, ...props }: SeparatorIconProps): import("react").JSX.Element;
-export type SeparatorContentProps = ComponentProps<"span">;
+export type SeparatorContentProps = ComponentProps<'span'>;
 /** Marker text. Long words wrap instead of overflowing. */
 export declare function SeparatorContent({ className, ...props }: SeparatorContentProps): import("react").JSX.Element;

package/dist/components/separator.js

@@ -1,54 +1,49 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { Separator as BaseSeparator } from "@base-ui/react/separator";
-import { useRender } from "@base-ui/react/use-render";
-import { cn, stateClassName } from "../internal/classes.js";
-export const separatorVariantNames = [
-    "line",
-    "fade",
-    "marker",
-    "marker-border",
-];
-export const separatorOrientationNames = ["horizontal", "vertical"];
-export const separatorToneNames = ["default", "input"];
+import { mergeProps } from '@base-ui/react/merge-props';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
+import { cn, stateClassName } from '../internal/classes.js';
+export const separatorVariantNames = ['line', 'fade', 'marker', 'marker-border'];
+export const separatorOrientationNames = ['horizontal', 'vertical'];
+export const separatorToneNames = ['default', 'input'];
 export function Separator(props) {
-    if (props.variant === "fade")
+    if (props.variant === 'fade')
         return _jsx(Fade, { ...props });
-    if (props.variant === "marker" || props.variant === "marker-border")
+    if (props.variant === 'marker' || props.variant === 'marker-border')
         return _jsx(Marker, { ...props });
     if (props.children !== undefined)
         return _jsx(Labeled, { ...props });
     return _jsx(Line, { ...props });
 }
-function Line({ className, orientation = "horizontal", tone = "default", variant: _variant, ...props }) {
-    return (_jsx(BaseSeparator, { "data-slot": "separator", "data-variant": "line", "data-tone": tone, orientation: orientation, className: stateClassName("sprout-separator", className), ...props }));
+function Line({ className, orientation = 'horizontal', tone = 'default', variant: _variant, ...props }) {
+    return (_jsx(BaseSeparator, { "data-slot": "separator", "data-variant": "line", "data-tone": tone, orientation: orientation, className: stateClassName('sprout-separator', className), ...props }));
 }
 function Labeled({ children, className, variant: _variant, ...props }) {
-    const content = children !== null && children !== false && children !== "";
-    return (_jsxs("div", { "data-slot": "separator", "data-variant": "label", "data-content": content, className: cn("sprout-separator-label", className), ...props, children: [_jsx(Line, { className: "sprout-separator-label-line" }), content && (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "separator-label-content", className: "sprout-separator-label-content", children: children }), _jsx("span", { "aria-hidden": "true", className: "sprout-separator sprout-separator-label-line", "data-orientation": "horizontal" })] }))] }));
+    const content = children !== null && children !== false && children !== '';
+    return (_jsxs("div", { "data-slot": "separator", "data-variant": "label", "data-content": content, className: cn('sprout-separator-label', className), ...props, children: [_jsx(Line, { className: "sprout-separator-label-line" }), content && (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "separator-label-content", className: "sprout-separator-label-content", children: children }), _jsx("span", { "aria-hidden": "true", className: "sprout-separator sprout-separator-label-line", "data-orientation": "horizontal" })] }))] }));
 }
 function Fade({ children, className, variant: _variant, ...props }) {
-    return (_jsxs(BaseSeparator, { "aria-label": children, "data-slot": "separator", "data-variant": "fade", orientation: "horizontal", className: stateClassName("sprout-separator-fade", className), ...props, children: [_jsx("span", { className: "sprout-separator-fade-label", children: children }), _jsx("span", { "aria-hidden": "true", className: "sprout-separator-fade-shine", children: _jsx("span", { className: "sprout-separator-fade-label", children: children }) })] }));
+    return (_jsxs(BaseSeparator, { "aria-label": children, "data-slot": "separator", "data-variant": "fade", orientation: "horizontal", className: stateClassName('sprout-separator-fade', className), ...props, children: [_jsx("span", { className: "sprout-separator-fade-label", children: children }), _jsx("span", { "aria-hidden": "true", className: "sprout-separator-fade-shine", children: _jsx("span", { className: "sprout-separator-fade-label", children: children }) })] }));
 }
 function Marker({ className, variant, render, ref, ...props }) {
     return useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         ref,
         render,
         props: mergeProps({
-            "data-slot": "separator",
-            "data-variant": variant,
-            className: cn("sprout-separator-marker", variant === "marker-border" && "sprout-separator-marker-border", className),
+            'data-slot': 'separator',
+            'data-variant': variant,
+            className: cn('sprout-separator-marker', variant === 'marker-border' && 'sprout-separator-marker-border', className),
         }, props),
-        state: { slot: "separator", variant },
+        state: { slot: 'separator', variant },
     });
 }
 /** A 16px decorative icon slot. It is hidden from assistive technology. */
 export function SeparatorIcon({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "separator-icon", "aria-hidden": "true", className: cn("sprout-separator-icon", className), ...props }));
+    return (_jsx("span", { "data-slot": "separator-icon", "aria-hidden": "true", className: cn('sprout-separator-icon', className), ...props }));
 }
 /** Marker text. Long words wrap instead of overflowing. */
 export function SeparatorContent({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "separator-content", className: cn("sprout-separator-content", className), ...props }));
+    return _jsx("span", { "data-slot": "separator-content", className: cn('sprout-separator-content', className), ...props });
 }

package/dist/components/settings-list.d.ts

@@ -1,7 +1,7 @@
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from 'react';
 export declare const settingsGroupHeadingNames: readonly ["h2", "h3", "h4"];
 export type SettingsGroupHeading = (typeof settingsGroupHeadingNames)[number];
-export interface SettingsGroupProps extends Omit<ComponentProps<"section">, "title"> {
+export interface SettingsGroupProps extends Omit<ComponentProps<'section'>, 'title'> {
     title: ReactNode;
     /** Id for the title. When set, the section is named by its title. */
     titleId?: string;
@@ -12,7 +12,7 @@ export interface SettingsGroupProps extends Omit<ComponentProps<"section">, "tit
  * between them; rows, notes, forms, and alerts can sit side by side.
  */
 export declare function SettingsGroup({ title, titleId, heading: Heading, className, children, ...props }: SettingsGroupProps): import("react").JSX.Element;
-export interface SettingsRowProps extends Omit<ComponentProps<"div">, "children"> {
+export interface SettingsRowProps extends Omit<ComponentProps<'div'>, 'children'> {
     label: ReactNode;
     description?: ReactNode;
     /** Renders the label as a `<label>` for this control id. */

package/dist/components/settings-list.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../internal/classes.js";
-export const settingsGroupHeadingNames = ["h2", "h3", "h4"];
+import { cn } from '../internal/classes.js';
+export const settingsGroupHeadingNames = ['h2', 'h3', 'h4'];
 /**
  * A titled panel of settings rows. Children are stacked with a divider
  * between them; rows, notes, forms, and alerts can sit side by side.
  */
-export function SettingsGroup({ title, titleId, heading: Heading = "h2", className, children, ...props }) {
-    return (_jsxs("section", { "data-slot": "settings-group", "aria-labelledby": titleId, className: cn("sprout-settings-group", className), ...props, children: [_jsx(Heading, { id: titleId, className: "sprout-settings-group-title", children: title }), _jsx("div", { "data-slot": "settings-group-content", className: "sprout-settings-group-content", children: children })] }));
+export function SettingsGroup({ title, titleId, heading: Heading = 'h2', className, children, ...props }) {
+    return (_jsxs("section", { "data-slot": "settings-group", "aria-labelledby": titleId, className: cn('sprout-settings-group', className), ...props, children: [_jsx(Heading, { id: titleId, className: "sprout-settings-group-title", children: title }), _jsx("div", { "data-slot": "settings-group-content", className: "sprout-settings-group-content", children: children })] }));
 }
 /**
  * One setting: a label and description, with its value or control beside
  * them from 36rem of group width and below them on narrower groups.
  */
 export function SettingsRow({ label, description, htmlFor, className, children, ...props }) {
-    return (_jsxs("div", { "data-slot": "settings-row", className: cn("sprout-settings-row", className), ...props, children: [_jsxs("div", { className: "sprout-settings-row-text", children: [htmlFor ? (_jsx("label", { htmlFor: htmlFor, className: "sprout-settings-row-label", children: label })) : (_jsx("p", { className: "sprout-settings-row-label", children: label })), description != null && description !== false && description !== "" && (_jsx("div", { className: "sprout-settings-row-description", children: description }))] }), children != null && children !== false && (_jsx("div", { "data-slot": "settings-row-control", className: "sprout-settings-row-control", children: children }))] }));
+    return (_jsxs("div", { "data-slot": "settings-row", className: cn('sprout-settings-row', className), ...props, children: [_jsxs("div", { className: "sprout-settings-row-text", children: [htmlFor ? (_jsx("label", { htmlFor: htmlFor, className: "sprout-settings-row-label", children: label })) : (_jsx("p", { className: "sprout-settings-row-label", children: label })), description != null && description !== false && description !== '' && (_jsx("div", { className: "sprout-settings-row-description", children: description }))] }), children != null && children !== false && (_jsx("div", { "data-slot": "settings-row-control", className: "sprout-settings-row-control", children: children }))] }));
 }

package/dist/components/sheet.d.ts

@@ -1,12 +1,12 @@
-import { Drawer as SheetPrimitive } from "@base-ui/react/drawer";
-import { useRender } from "@base-ui/react/use-render";
+import { Drawer as SheetPrimitive } from '@base-ui/react/drawer';
+import { useRender } from '@base-ui/react/use-render';
 export declare const sheetSideNames: readonly ["top", "right", "bottom", "left"];
 export declare const sheetSizeNames: readonly ["default", "lg", "xl", "full"];
 export declare const sheetTitleSizeNames: readonly ["default", "lg"];
 export type SheetSide = (typeof sheetSideNames)[number];
 export type SheetSize = (typeof sheetSizeNames)[number];
 export type SheetTitleSize = (typeof sheetTitleSizeNames)[number];
-export type SheetProps = Omit<SheetPrimitive.Root.Props, "swipeDirection" | "snapPoints" | "snapPoint" | "defaultSnapPoint" | "onSnapPointChange" | "snapToSequentialPoints">;
+export type SheetProps = Omit<SheetPrimitive.Root.Props, 'swipeDirection' | 'snapPoints' | 'snapPoint' | 'defaultSnapPoint' | 'onSnapPointChange' | 'snapToSequentialPoints'>;
 /**
  * Groups the parts of a sheet. Touch users can swipe it closed toward the
  * edge set by `SheetContent`'s `side`.
@@ -35,7 +35,7 @@ export interface SheetContentProps extends SheetPrimitive.Popup.Props {
     /** Keeps the sheet in the DOM while closed, so drafts and scroll survive. */
     keepMounted?: boolean;
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: SheetPrimitive.Portal.Props["container"];
+    container?: SheetPrimitive.Portal.Props['container'];
     /** Shows a grab bar on the edge facing the page. Defaults to `false`. */
     showSwipeHandle?: boolean;
 }
@@ -46,11 +46,11 @@ export interface SheetContentProps extends SheetPrimitive.Popup.Props {
  * and form fields work as usual.
  */
 export declare function SheetContent({ className, children, side, size, showCloseButton, closeLabel, keepMounted, container, showSwipeHandle, ...props }: SheetContentProps): import("react").JSX.Element;
-type PartSlot = "sheet-header" | "sheet-body" | "sheet-footer";
+type PartSlot = 'sheet-header' | 'sheet-body' | 'sheet-footer';
 export interface SheetPartState extends Record<string, unknown> {
     slot: PartSlot;
 }
-export type SheetPartProps = useRender.ComponentProps<"div", SheetPartState>;
+export type SheetPartProps = useRender.ComponentProps<'div', SheetPartState>;
 /** Stacks the title and description with 16px padding. */
 export declare const SheetHeader: ({ className, render, ref, ...props }: SheetPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /** The scrolling middle. It fills the space between header and footer. */

package/dist/components/sheet.js

@@ -1,20 +1,20 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useLayoutEffect, useState, } from "react";
-import { Drawer as SheetPrimitive } from "@base-ui/react/drawer";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { X } from "reicon-react/icons/X";
-import { cn, stateClassName } from "../internal/classes.js";
-import { Button } from "./button.js";
-export const sheetSideNames = ["top", "right", "bottom", "left"];
-export const sheetSizeNames = ["default", "lg", "xl", "full"];
-export const sheetTitleSizeNames = ["default", "lg"];
+import { createContext, useContext, useLayoutEffect, useState } from 'react';
+import { Drawer as SheetPrimitive } from '@base-ui/react/drawer';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { X } from 'reicon-react/icons/X';
+import { cn, stateClassName } from '../internal/classes.js';
+import { Button } from './button.js';
+export const sheetSideNames = ['top', 'right', 'bottom', 'left'];
+export const sheetSizeNames = ['default', 'lg', 'xl', 'full'];
+export const sheetTitleSizeNames = ['default', 'lg'];
 const swipeDirections = {
-    top: "up",
-    right: "right",
-    bottom: "down",
-    left: "left",
+    top: 'up',
+    right: 'right',
+    bottom: 'down',
+    left: 'left',
 };
 const SheetSideContext = createContext(null);
 /**
@@ -22,7 +22,7 @@ const SheetSideContext = createContext(null);
  * edge set by `SheetContent`'s `side`.
  */
 export function Sheet(props) {
-    const [side, setSide] = useState("right");
+    const [side, setSide] = useState('right');
     return (_jsx(SheetSideContext.Provider, { value: setSide, children: _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props, swipeDirection: swipeDirections[side] }) }));
 }
 export function SheetTrigger(props) {
@@ -35,7 +35,7 @@ export function SheetPortal(props) {
     return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 export function SheetOverlay({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", ...props, className: stateClassName("sprout-sheet-overlay", className) }));
+    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", ...props, className: stateClassName('sprout-sheet-overlay', className) }));
 }
 /**
  * The sliding panel. It renders its own portal and overlay, so place it
@@ -43,35 +43,35 @@ export function SheetOverlay({ className, ...props }) {
  * drags only move it from the handle or empty panel space, so text selection
  * and form fields work as usual.
  */
-export function SheetContent({ className, children, side = "right", size = "default", showCloseButton = true, closeLabel = "Close", keepMounted = false, container, showSwipeHandle = false, ...props }) {
+export function SheetContent({ className, children, side = 'right', size = 'default', showCloseButton = true, closeLabel = 'Close', keepMounted = false, container, showSwipeHandle = false, ...props }) {
     const setSide = useContext(SheetSideContext);
     // Base UI reads the swipe direction from the root, but `side` lives here.
     useLayoutEffect(() => setSide?.(side), [setSide, side]);
-    return (_jsxs(SheetPortal, { keepMounted: keepMounted, container: container, children: [_jsx(SheetOverlay, {}), _jsx(SheetPrimitive.Viewport, { "data-slot": "sheet-viewport", className: "sprout-sheet-viewport", children: _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, "data-size": size, ...props, className: stateClassName("sprout-sheet-content", className), children: [showSwipeHandle && (_jsx("div", { "data-slot": "sheet-swipe-handle", "aria-hidden": "true", className: "sprout-sheet-swipe-handle" })), _jsx(SheetPrimitive.Content, { className: "sprout-sheet-inner", children: children }), showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", className: "sprout-sheet-close", "aria-label": closeLabel, render: _jsx(Button, { variant: "ghost", size: "icon-sm" }), children: _jsx(X, { size: 16, "aria-hidden": "true" }) }))] }) })] }));
+    return (_jsxs(SheetPortal, { keepMounted: keepMounted, container: container, children: [_jsx(SheetOverlay, {}), _jsx(SheetPrimitive.Viewport, { "data-slot": "sheet-viewport", className: "sprout-sheet-viewport", children: _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, "data-size": size, ...props, className: stateClassName('sprout-sheet-content', className), children: [showSwipeHandle && (_jsx("div", { "data-slot": "sheet-swipe-handle", "aria-hidden": "true", className: "sprout-sheet-swipe-handle" })), _jsx(SheetPrimitive.Content, { className: "sprout-sheet-inner", children: children }), showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", className: "sprout-sheet-close", "aria-label": closeLabel, render: _jsx(Button, { variant: "ghost", size: "icon-sm" }), children: _jsx(X, { size: 16, "aria-hidden": "true" }) }))] }) })] }));
 }
 function part(slot, base) {
     return function SheetPart({ className, render, ref, ...props }) {
         return useRender({
-            defaultTagName: "div",
+            defaultTagName: 'div',
             ref,
             render,
-            props: mergeProps({ "data-slot": slot, className: cn(base, className) }, props),
+            props: mergeProps({ 'data-slot': slot, className: cn(base, className) }, props),
             state: { slot },
         });
     };
 }
 /** Stacks the title and description with 16px padding. */
-export const SheetHeader = part("sheet-header", "sprout-sheet-header");
+export const SheetHeader = part('sheet-header', 'sprout-sheet-header');
 /** The scrolling middle. It fills the space between header and footer. */
-export const SheetBody = part("sheet-body", "sprout-sheet-body");
+export const SheetBody = part('sheet-body', 'sprout-sheet-body');
 /**
  * Actions pinned to the bottom edge. They stack full width in side sheets and
  * align right in wide top and bottom sheets.
  */
-export const SheetFooter = part("sheet-footer", "sprout-sheet-footer");
-export function SheetTitle({ className, size = "default", ...props }) {
-    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", "data-size": size, ...props, className: stateClassName("sprout-sheet-title", className) }));
+export const SheetFooter = part('sheet-footer', 'sprout-sheet-footer');
+export function SheetTitle({ className, size = 'default', ...props }) {
+    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", "data-size": size, ...props, className: stateClassName('sprout-sheet-title', className) }));
 }
 export function SheetDescription({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", ...props, className: stateClassName("sprout-sheet-description", className) }));
+    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", ...props, className: stateClassName('sprout-sheet-description', className) }));
 }

package/dist/components/sidebar.d.ts

@@ -1,22 +1,22 @@
-import { type ComponentProps, type ReactNode, type RefObject, type SetStateAction } from "react";
-import { Button } from "@base-ui/react/button";
-import { Dialog } from "@base-ui/react/dialog";
-import { type TooltipContentProps } from "./tooltip.js";
-import { type InputProps } from "./input.js";
-import { type SeparatorLineProps } from "./separator.js";
+import { type ComponentProps, type ReactNode, type RefObject, type SetStateAction } from 'react';
+import { Button } from '@base-ui/react/button';
+import { Dialog } from '@base-ui/react/dialog';
+import { type TooltipContentProps } from './tooltip.js';
+import { type InputProps } from './input.js';
+import { type SeparatorLineProps } from './separator.js';
 interface SidebarContextValue {
     open: boolean;
     setOpen: (open: SetStateAction<boolean>) => void;
     openMobile: boolean;
     setOpenMobile: (open: SetStateAction<boolean>) => void;
     isMobile: boolean;
-    state: "expanded" | "collapsed";
+    state: 'expanded' | 'collapsed';
     toggleSidebar: () => void;
     panelId: string;
     triggerRef: RefObject<HTMLElement | null>;
 }
 export declare function useSidebar(): SidebarContextValue;
-export interface SidebarProviderProps extends Omit<ComponentProps<"div">, "ref"> {
+export interface SidebarProviderProps extends Omit<ComponentProps<'div'>, 'ref'> {
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -25,24 +25,24 @@ export interface SidebarProviderProps extends Omit<ComponentProps<"div">, "ref">
     keyboardShortcut?: boolean;
 }
 export declare function SidebarProvider({ defaultOpen, open: controlledOpen, onOpenChange, openMobile: controlledMobile, onOpenMobileChange, keyboardShortcut, className, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
-export interface SidebarProps extends ComponentProps<"aside"> {
-    side?: "left" | "right";
-    collapsible?: "icon" | "offcanvas" | "none";
+export interface SidebarProps extends ComponentProps<'aside'> {
+    side?: 'left' | 'right';
+    collapsible?: 'icon' | 'offcanvas' | 'none';
     label?: string;
-    portalContainer?: Dialog.Portal.Props["container"];
+    portalContainer?: Dialog.Portal.Props['container'];
 }
 export declare function Sidebar({ side, collapsible, label, portalContainer, className, children, ...props }: SidebarProps): import("react").JSX.Element;
 export declare function SidebarTrigger({ className, onClick, children, ...props }: Button.Props): import("react").JSX.Element;
-export declare function SidebarHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SidebarHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 /** A 32px search or filter field for the sidebar header, on the canvas color. */
 export declare function SidebarInput({ className, ...props }: InputProps): import("react").JSX.Element;
-export declare function SidebarFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SidebarFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 export declare function SidebarSeparator({ className, ...props }: SeparatorLineProps): import("react").JSX.Element;
-export declare function SidebarContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-export declare function SidebarGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-export declare function SidebarGroupLabel({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-export declare function SidebarMenu({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
-export declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li">): import("react").JSX.Element;
+export declare function SidebarContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SidebarGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SidebarGroupLabel({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SidebarMenu({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
+export declare function SidebarMenuItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
 export interface SidebarMenuButtonProps extends Button.Props {
     icon?: ReactNode;
     badge?: ReactNode;
@@ -55,10 +55,10 @@ export interface SidebarMenuButtonProps extends Button.Props {
 }
 export declare function SidebarMenuButton({ icon, badge, isActive, tooltip, className, children, onClick, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
 export declare function SidebarMenuAction({ className, ...props }: Button.Props): import("react").JSX.Element;
-export declare function SidebarMenuSub({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export declare function SidebarMenuSub({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
 export declare const SidebarMenuSubItem: typeof SidebarMenuItem;
 export declare function SidebarMenuSubButton({ className, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
-export interface SidebarSectionProps extends Omit<SidebarMenuButtonProps, "onChange"> {
+export interface SidebarSectionProps extends Omit<SidebarMenuButtonProps, 'onChange'> {
     label: string;
     children: ReactNode;
     open?: boolean;
@@ -66,5 +66,5 @@ export interface SidebarSectionProps extends Omit<SidebarMenuButtonProps, "onCha
     onOpenChange?: (open: boolean) => void;
 }
 export declare function SidebarSection({ label, children, open: controlledOpen, defaultOpen, onOpenChange, ...props }: SidebarSectionProps): import("react").JSX.Element;
-export declare function SidebarMenuSkeleton({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function SidebarMenuSkeleton({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 export {};