@nocoo/basalt 2.0.0-rc.1

package/dist/components/segment-control.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { ToggleGroup as t, ToggleGroupItem as n } from "./toggle-group.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/segment-control.tsx
+var o = r.forwardRef(({ allOption: o, className: s, disabled: c = !1, legend: l, onValueChange: u, options: d, value: f, ...p }, m) => {
+	let h = r.useId(), g = o ? [{
+		...o,
+		label: o.label ?? "All"
+	}, ...d] : d;
+	return /* @__PURE__ */ a("fieldset", {
+		ref: m,
+		disabled: c,
+		className: e("min-w-0 border-0 p-0", s),
+		...p,
+		children: [/* @__PURE__ */ i("legend", {
+			id: h,
+			className: "mb-2 block text-xs font-medium text-basalt-muted-foreground",
+			children: l
+		}), /* @__PURE__ */ i("div", {
+			"data-slot": "segment-control-viewport",
+			className: "max-w-full overflow-x-auto pb-1",
+			children: /* @__PURE__ */ i(t, {
+				type: "single",
+				value: f,
+				disabled: c,
+				onValueChange: (e) => {
+					e && u(e);
+				},
+				"aria-labelledby": h,
+				className: "w-max",
+				children: g.map((e) => /* @__PURE__ */ i(n, {
+					value: e.value,
+					disabled: e.disabled,
+					children: e.label
+				}, e.value))
+			})
+		})]
+	});
+});
+o.displayName = "SegmentControl";
+//#endregion
+export { o as SegmentControl };
+
+//# sourceMappingURL=segment-control.js.map

package/dist/components/segment-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-control.js","names":[],"sources":["../../src/components/segment-control.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { ToggleGroup, ToggleGroupItem } from \"./toggle-group\";\n\nexport interface SegmentControlOption {\n\t/** The value selected when this segment is activated. */\n\tvalue: string;\n\t/** The visible label for the segment. */\n\tlabel: React.ReactNode;\n\t/** Disable only this segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlAllOption {\n\t/** The value representing the unfiltered selection. */\n\tvalue: string;\n\t/** The visible label for the leading segment. */\n\tlabel?: React.ReactNode;\n\t/** Disable only the leading segment. */\n\tdisabled?: boolean;\n}\n\nexport interface SegmentControlProps\n\textends Omit<React.HTMLAttributes<HTMLFieldSetElement>, \"children\" | \"onChange\"> {\n\t/** The currently selected value. */\n\tvalue: string;\n\t/** Called when the user selects a different segment. */\n\tonValueChange: (value: string) => void;\n\t/** The visible legend that names the control. */\n\tlegend: React.ReactNode;\n\t/** The selectable segments shown after the optional All segment. */\n\toptions: readonly SegmentControlOption[];\n\t/** Add a leading unfiltered segment, labelled All by default. */\n\tallOption?: SegmentControlAllOption;\n\t/**\n\t * Disable every segment.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n}\n\nexport const SegmentControl = React.forwardRef<HTMLFieldSetElement, SegmentControlProps>(\n\t(\n\t\t{ allOption, className, disabled = false, legend, onValueChange, options, value, ...props },\n\t\tref,\n\t) => {\n\t\tconst legendId = React.useId();\n\t\tconst items: readonly SegmentControlOption[] = allOption\n\t\t\t? [{ ...allOption, label: allOption.label ?? \"All\" }, ...options]\n\t\t\t: options;\n\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\tref={ref}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={cn(\"min-w-0 border-0 p-0\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<legend\n\t\t\t\t\tid={legendId}\n\t\t\t\t\tclassName=\"mb-2 block text-xs font-medium text-basalt-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\t{legend}\n\t\t\t\t</legend>\n\t\t\t\t<div data-slot=\"segment-control-viewport\" className=\"max-w-full overflow-x-auto pb-1\">\n\t\t\t\t\t<ToggleGroup\n\t\t\t\t\t\ttype=\"single\"\n\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonValueChange={(nextValue) => {\n\t\t\t\t\t\t\tif (nextValue) {\n\t\t\t\t\t\t\t\tonValueChange(nextValue);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taria-labelledby={legendId}\n\t\t\t\t\t\tclassName=\"w-max\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => (\n\t\t\t\t\t\t\t<ToggleGroupItem key={item.value} value={item.value} disabled={item.disabled}>\n\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t</ToggleGroupItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ToggleGroup>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t);\n\t},\n);\nSegmentControl.displayName = \"SegmentControl\";\n"],"mappings":";;;;;;AAyCA,IAAa,IAAiB,EAAM,YAElC,EAAE,cAAW,cAAW,cAAW,IAAO,WAAQ,kBAAe,YAAS,UAAO,GAAG,KACpF,MACI;CACJ,IAAM,IAAW,EAAM,MAAM,GACvB,IAAyC,IAC5C,CAAC;EAAE,GAAG;EAAW,OAAO,EAAU,SAAS;CAAM,GAAG,GAAG,CAAO,IAC9D;CAEH,OACC,kBAAC,YAAD;EACM;EACK;EACV,WAAW,EAAG,wBAAwB,CAAS;EAC/C,GAAI;EAJL,UAAA,CAMC,kBAAC,UAAD;GACC,IAAI;GACJ,WAAU;GAET,UAAA;EACM,CAAA,GACR,kBAAC,OAAD;GAAK,aAAU;GAA2B,WAAU;GACnD,UAAA,kBAAC,GAAD;IACC,MAAK;IACE;IACG;IACV,gBAAgB,MAAc;KAC7B,AAAI,KACH,EAAc,CAAS;IAEzB;IACA,mBAAiB;IACjB,WAAU;IAET,UAAA,EAAM,KAAK,MACX,kBAAC,GAAD;KAAkC,OAAO,EAAK;KAAO,UAAU,EAAK;KAClE,UAAA,EAAK;IACU,GAFK,EAAK,KAEV,CACjB;GACW,CAAA;EACT,CAAA,CACI;;AAEZ,CACD;AACA,EAAe,cAAc"}

package/dist/components/select.d.ts

@@ -0,0 +1,99 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+export type SelectProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, "value" | "defaultValue" | "onValueChange"> & {
+    /**
+     * The controlled value of the select.
+     */
+    value?: string;
+    /**
+     * The uncontrolled initial value of the select.
+     */
+    defaultValue?: string;
+    /**
+     * Called when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+};
+export declare const Select: React.FC<SelectProps>;
+export type SelectValueProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>, "placeholder"> & {
+    /**
+     * Content shown when no value is selected.
+     */
+    placeholder?: React.ReactNode;
+};
+export declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Value>>>;
+export type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;
+export declare const SelectGroup: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Group>>>;
+export type SelectSize = "sm" | "default" | "lg";
+export type SelectTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, "disabled"> & {
+    /**
+     * The visual size of the trigger.
+     * @default default
+     */
+    size?: SelectSize;
+    /**
+     * Disable the trigger and mark it busy.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disable the trigger.
+     * @default false
+     */
+    disabled?: boolean;
+};
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref">, "disabled"> & {
+    /**
+     * The visual size of the trigger.
+     * @default default
+     */
+    size?: SelectSize;
+    /**
+     * Disable the trigger and mark it busy.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disable the trigger.
+     * @default false
+     */
+    disabled?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type SelectContentProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, "position" | "sideOffset"> & {
+    /**
+     * The positioning mode for the select content.
+     * @default popper
+     */
+    position?: "item-aligned" | "popper";
+    /**
+     * The distance between the trigger and the select content.
+     * @default 4
+     */
+    sideOffset?: number;
+};
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref">, "position" | "sideOffset"> & {
+    /**
+     * The positioning mode for the select content.
+     * @default popper
+     */
+    position?: "item-aligned" | "popper";
+    /**
+     * The distance between the trigger and the select content.
+     * @default 4
+     */
+    sideOffset?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export type SelectItemProps = Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, "value"> & {
+    /**
+     * The value associated with the select item.
+     */
+    value: string;
+};
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
+    /**
+     * The value associated with the select item.
+     */
+    value: string;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/select.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { FOCUS_BORDER as t, overlayItemClass as n, overlayPanelClass as r } from "./overlay.js";
+import { controlSurfaceClass as i } from "../utils/control-surface.js";
+import * as a from "react";
+import { Check as o, ChevronDown as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-select";
+//#region src/components/select.tsx
+var d = u.Root, f = u.Value, p = u.Group, m = {
+	sm: "h-8 px-2.5 text-xs",
+	default: "h-9 px-3 text-sm",
+	lg: "h-10 px-4 text-base"
+}, h = a.forwardRef(({ className: n, children: r, size: a = "default", loading: o = !1, disabled: d = !1, ...f }, p) => /* @__PURE__ */ l(u.Trigger, {
+	ref: p,
+	...f,
+	disabled: d || o,
+	"aria-busy": o || void 0,
+	className: i(e("flex w-full items-center justify-between", m[a], t, "aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive", n)),
+	children: [r, /* @__PURE__ */ c(s, { className: "h-4 w-4 opacity-50" })]
+}));
+h.displayName = u.Trigger.displayName;
+var g = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Label, {
+	ref: r,
+	className: e("px-2 py-1.5 text-xs text-basalt-muted-foreground", t),
+	...n
+}));
+g.displayName = u.Label.displayName;
+var _ = a.forwardRef(({ className: t, children: n, position: i = "popper", sideOffset: a = 4, ...o }, s) => /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.Content, {
+	ref: s,
+	position: i,
+	sideOffset: a,
+	className: r(e(i === "popper" && "w-[var(--radix-select-trigger-width)]", t)),
+	...o,
+	children: /* @__PURE__ */ c(u.Viewport, { children: n })
+}) }));
+_.displayName = u.Content.displayName;
+var v = a.forwardRef(({ className: t, children: r, ...i }, a) => /* @__PURE__ */ l(u.Item, {
+	ref: a,
+	className: n(e("relative pr-8 outline-hidden hover:bg-basalt-accent focus-visible:bg-basalt-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent", t)),
+	...i,
+	children: [/* @__PURE__ */ c(u.ItemText, { children: r }), /* @__PURE__ */ c(u.ItemIndicator, {
+		className: "absolute right-2",
+		children: /* @__PURE__ */ c(o, { className: "h-3.5 w-3.5" })
+	})]
+}));
+v.displayName = u.Item.displayName;
+//#endregion
+export { d as Select, _ as SelectContent, p as SelectGroup, v as SelectItem, g as SelectLabel, h as SelectTrigger, f as SelectValue };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../../src/components/select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { controlSurfaceClass } from \"../utils/control-surface\";\nimport { FOCUS_BORDER, OVERLAY_GAP, overlayItemClass, overlayPanelClass } from \"./overlay\";\n\nexport type SelectProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,\n\t\"value\" | \"defaultValue\" | \"onValueChange\"\n> & {\n\t/**\n\t * The controlled value of the select.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value of the select.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the selected value changes.\n\t */\n\tonValueChange?: (value: string) => void;\n};\nexport const Select: React.FC<SelectProps> = SelectPrimitive.Root;\n\nexport type SelectValueProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>,\n\t\"placeholder\"\n> & {\n\t/**\n\t * Content shown when no value is selected.\n\t */\n\tplaceholder?: React.ReactNode;\n};\nexport const SelectValue: React.ForwardRefExoticComponent<\n\tSelectValueProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Value>>\n> = SelectPrimitive.Value;\n\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\nexport const SelectGroup: React.ForwardRefExoticComponent<\n\tSelectGroupProps & React.RefAttributes<React.ElementRef<typeof SelectPrimitive.Group>>\n> = SelectPrimitive.Group;\n\nexport type SelectSize = \"sm\" | \"default\" | \"lg\";\n\nconst SELECT_SIZE_CLASS: Record<SelectSize, string> = {\n\tsm: \"h-8 px-2.5 text-xs\",\n\tdefault: \"h-9 px-3 text-sm\",\n\tlg: \"h-10 px-4 text-base\",\n};\n\nexport type SelectTriggerProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,\n\t\"disabled\"\n> & {\n\t/**\n\t * The visual size of the trigger.\n\t * @default default\n\t */\n\tsize?: SelectSize;\n\t/**\n\t * Disable the trigger and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Disable the trigger.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const SelectTrigger = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(({ className, children, size = \"default\", loading = false, disabled = false, ...props }, ref) => (\n\t<SelectPrimitive.Trigger\n\t\tref={ref}\n\t\t{...props}\n\t\tdisabled={disabled || loading}\n\t\taria-busy={loading || undefined}\n\t\tclassName={controlSurfaceClass(\n\t\t\tcn(\n\t\t\t\t\"flex w-full items-center justify-between\",\n\t\t\t\tSELECT_SIZE_CLASS[size],\n\t\t\t\tFOCUS_BORDER,\n\t\t\t\t\"aria-invalid:border-basalt-destructive aria-invalid:focus-visible:border-basalt-destructive\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t>\n\t\t{children}\n\t\t<ChevronDown className=\"h-4 w-4 opacity-50\" />\n\t</SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nexport type SelectLabelProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;\n\nexport const SelectLabel = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Label>,\n\tSelectLabelProps\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\"px-2 py-1.5 text-xs text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nexport type SelectContentProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>,\n\t\"position\" | \"sideOffset\"\n> & {\n\t/**\n\t * The positioning mode for the select content.\n\t * @default popper\n\t */\n\tposition?: \"item-aligned\" | \"popper\";\n\t/**\n\t * The distance between the trigger and the select content.\n\t * @default 4\n\t */\n\tsideOffset?: number;\n};\n\nexport const SelectContent = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = OVERLAY_GAP, ...props }, ref) => (\n\t<SelectPrimitive.Portal>\n\t\t<SelectPrimitive.Content\n\t\t\tref={ref}\n\t\t\tposition={position}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={overlayPanelClass(\n\t\t\t\tcn(position === \"popper\" && \"w-[var(--radix-select-trigger-width)]\", className),\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>\n\t\t</SelectPrimitive.Content>\n\t</SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport type SelectItemProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,\n\t\"value\"\n> & {\n\t/**\n\t * The value associated with the select item.\n\t */\n\tvalue: string;\n};\n\nexport const SelectItem = React.forwardRef<\n\tReact.ElementRef<typeof SelectPrimitive.Item>,\n\tSelectItemProps\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={overlayItemClass(\n\t\t\tcn(\n\t\t\t\t\"relative pr-8 outline-hidden hover:bg-basalt-accent focus-visible:bg-basalt-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:hover:bg-transparent\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2\">\n\t\t\t<Check className=\"h-3.5 w-3.5\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;AAwBA,IAAa,IAAgC,EAAgB,MAWhD,IAET,EAAgB,OAGP,IAET,EAAgB,OAId,IAAgD;CACrD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBa,IAAgB,EAAM,YAGhC,EAAE,cAAW,aAAU,UAAO,WAAW,aAAU,IAAO,cAAW,IAAO,GAAG,KAAS,MAC1F,kBAAC,EAAgB,SAAjB;CACM;CACL,GAAI;CACJ,UAAU,KAAY;CACtB,aAAW,KAAW,KAAA;CACtB,WAAW,EACV,EACC,4CACA,EAAkB,IAClB,GACA,+FACA,CACD,CACD;CAbD,UAAA,CAeE,GACD,kBAAC,GAAD,EAAa,WAAU,qBAAsB,CAAA,CACrB;AACzB,CAAA,CAAA;AACD,EAAc,cAAc,EAAgB,QAAQ;AAIpD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,oDAAoD,CAAS;CAC3E,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAkBhD,IAAa,IAAgB,EAAM,YAGhC,EAAE,cAAW,aAAU,cAAW,UAAU,gBAAA,GAA0B,GAAG,KAAS,MACpF,kBAAC,EAAgB,QAAjB,EAAA,UACC,kBAAC,EAAgB,SAAjB;CACM;CACK;CACE;CACZ,WAAW,EACV,EAAG,MAAa,YAAY,yCAAyC,CAAS,CAC/E;CACA,GAAI;CAEJ,UAAA,kBAAC,EAAgB,UAAjB,EAA2B,YAAmC,CAAA;AACtC,CAAA,EACF,CAAA,CACxB;AACD,EAAc,cAAc,EAAgB,QAAQ;AAYpD,IAAa,IAAa,EAAM,YAG7B,EAAE,cAAW,aAAU,GAAG,KAAS,MACrC,kBAAC,EAAgB,MAAjB;CACM;CACL,WAAW,EACV,EACC,0LACA,CACD,CACD;CACA,GAAI;CARL,UAAA,CAUC,kBAAC,EAAgB,UAAjB,EAA2B,YAAmC,CAAA,GAC9D,kBAAC,EAAgB,eAAjB;EAA+B,WAAU;EACxC,UAAA,kBAAC,GAAD,EAAO,WAAU,cAAe,CAAA;CACF,CAAA,CACV;AACtB,CAAA,CAAA;AACD,EAAW,cAAc,EAAgB,KAAK"}

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type InputSize } from "./input.js";
+export type SensitiveInputProps = Omit<React.ComponentProps<"input">, "type" | "size"> & {
+    /**
+     * Accessible label for the reveal action.
+     */
+    revealLabel: string;
+    /**
+     * Accessible label for the hide action.
+     */
+    hideLabel: string;
+    /**
+     * The visual size of the field.
+     * @default default
+     */
+    size?: InputSize;
+    /**
+     * Ignore password managers on this field.
+     * @default false
+     */
+    passwordManagerIgnore?: boolean;
+};
+export declare const SensitiveInput: React.ForwardRefExoticComponent<Omit<SensitiveInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/sensitive-input.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { Input as n } from "./input.js";
+import * as r from "react";
+import { Eye as i, EyeOff as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/sensitive-input.tsx
+var c = {
+	sm: "h-8 w-8",
+	default: "h-9 w-9",
+	lg: "h-10 w-10"
+}, l = r.forwardRef(({ className: l, revealLabel: u, hideLabel: d, disabled: f, size: p = "default", passwordManagerIgnore: m = !1, ...h }, g) => {
+	let [_, v] = r.useState(!1);
+	return /* @__PURE__ */ s("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ o(n, {
+			ref: g,
+			type: _ ? "text" : "password",
+			size: p,
+			passwordManagerIgnore: m,
+			className: e("pr-10", l),
+			disabled: f,
+			...h
+		}), /* @__PURE__ */ o(t, {
+			type: "button",
+			variant: "ghost",
+			className: e("absolute right-0 top-0", c[p]),
+			"aria-label": _ ? d : u,
+			disabled: f,
+			onClick: () => v((e) => !e),
+			children: o(_ ? a : i, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			})
+		})]
+	});
+});
+l.displayName = "SensitiveInput";
+//#endregion
+export { l as SensitiveInput };
+
+//# sourceMappingURL=sensitive-input.js.map

package/dist/components/sensitive-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sensitive-input.js","names":[],"sources":["../../src/components/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeOff } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button } from \"./button\";\nimport { Input, type InputSize } from \"./input\";\n\nconst TOGGLE_SIZE_CLASS: Record<InputSize, string> = {\n\tsm: \"h-8 w-8\",\n\tdefault: \"h-9 w-9\",\n\tlg: \"h-10 w-10\",\n};\n\nexport type SensitiveInputProps = Omit<React.ComponentProps<\"input\">, \"type\" | \"size\"> & {\n\t/**\n\t * Accessible label for the reveal action.\n\t */\n\trevealLabel: string;\n\t/**\n\t * Accessible label for the hide action.\n\t */\n\thideLabel: string;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n\t/**\n\t * Ignore password managers on this field.\n\t * @default false\n\t */\n\tpasswordManagerIgnore?: boolean;\n};\n\nexport const SensitiveInput = React.forwardRef<HTMLInputElement, SensitiveInputProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\trevealLabel,\n\t\t\thideLabel,\n\t\t\tdisabled,\n\t\t\tsize = \"default\",\n\t\t\tpasswordManagerIgnore = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [revealed, setRevealed] = React.useState(false);\n\t\treturn (\n\t\t\t<div className=\"relative\">\n\t\t\t\t<Input\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={revealed ? \"text\" : \"password\"}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tpasswordManagerIgnore={passwordManagerIgnore}\n\t\t\t\t\tclassName={cn(\"pr-10\", className)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\tclassName={cn(\"absolute right-0 top-0\", TOGGLE_SIZE_CLASS[size])}\n\t\t\t\t\taria-label={revealed ? hideLabel : revealLabel}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => setRevealed((value) => !value)}\n\t\t\t\t>\n\t\t\t\t\t{revealed ? (\n\t\t\t\t\t\t<EyeOff className=\"h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Eye className=\"h-4 w-4\" aria-hidden=\"true\" />\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t);\n\t},\n);\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"mappings":";;;;;;;;AAMA,IAAM,IAA+C;CACpD,IAAI;CACJ,SAAS;CACT,IAAI;AACL,GAuBa,IAAiB,EAAM,YAElC,EACC,cACA,gBACA,cACA,aACA,UAAO,WACP,2BAAwB,IACxB,GAAG,KAEJ,MACI;CACJ,IAAM,CAAC,GAAU,KAAe,EAAM,SAAS,EAAK;CACpD,OACC,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,kBAAC,GAAD;GACM;GACL,MAAM,IAAW,SAAS;GACpB;GACiB;GACvB,WAAW,EAAG,SAAS,CAAS;GACtB;GACV,GAAI;EACJ,CAAA,GACD,kBAAC,GAAD;GACC,MAAK;GACL,SAAQ;GACR,WAAW,EAAG,0BAA0B,EAAkB,EAAK;GAC/D,cAAY,IAAW,IAAY;GACzB;GACV,eAAe,GAAa,MAAU,CAAC,CAAK;GAE3C,UACA,EADA,IACC,IAEA,GAFD;IAAQ,WAAU;IAAU,eAAY;GAAQ,CAEH;EAEvC,CAAA,CACJ;;AAEP,CACD;AACA,EAAe,cAAc"}

package/dist/components/separator.d.ts

@@ -0,0 +1,26 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, "orientation" | "decorative"> & {
+    /**
+     * The orientation of the separator.
+     * @default horizontal
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Whether the separator is purely decorative.
+     * @default true
+     */
+    decorative?: boolean;
+};
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "decorative" | "orientation"> & {
+    /**
+     * The orientation of the separator.
+     * @default horizontal
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Whether the separator is purely decorative.
+     * @default true
+     */
+    decorative?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/separator.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-separator";
+//#region src/components/separator.tsx
+var i = t.forwardRef(({ className: t, orientation: i = "horizontal", decorative: a = !0, ...o }, s) => /* @__PURE__ */ n(r.Root, {
+	ref: s,
+	decorative: a,
+	orientation: i,
+	className: e("shrink-0 bg-basalt-border", i === "horizontal" ? "h-px w-full" : "h-full w-px", t),
+	...o
+}));
+i.displayName = r.Root.displayName;
+//#endregion
+export { i as Separator };
+
+//# sourceMappingURL=separator.js.map

package/dist/components/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type SeparatorProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>,\n\t\"orientation\" | \"decorative\"\n> & {\n\t/**\n\t * The orientation of the separator.\n\t * @default horizontal\n\t */\n\torientation?: \"horizontal\" | \"vertical\";\n\t/**\n\t * Whether the separator is purely decorative.\n\t * @default true\n\t */\n\tdecorative?: boolean;\n};\n\nexport const Separator = React.forwardRef<\n\tReact.ElementRef<typeof SeparatorPrimitive.Root>,\n\tSeparatorProps\n>(({ className, orientation = \"horizontal\", decorative = true, ...props }, ref) => (\n\t<SeparatorPrimitive.Root\n\t\tref={ref}\n\t\tdecorative={decorative}\n\t\torientation={orientation}\n\t\tclassName={cn(\n\t\t\t\"shrink-0 bg-basalt-border\",\n\t\t\torientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nSeparator.displayName = SeparatorPrimitive.Root.displayName;\n"],"mappings":";;;;;;AAoBA,IAAa,IAAY,EAAM,YAG5B,EAAE,cAAW,iBAAc,cAAc,gBAAa,IAAM,GAAG,KAAS,MAC1E,kBAAC,EAAmB,MAApB;CACM;CACO;CACC;CACb,WAAW,EACV,6BACA,MAAgB,eAAe,gBAAgB,eAC/C,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAU,cAAc,EAAmB,KAAK"}

package/dist/components/sheet.d.ts

@@ -0,0 +1,26 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+export declare const Sheet: React.FC<DialogPrimitive.DialogProps>;
+export declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SIDE: {
+    readonly right: "fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg";
+    readonly left: "fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg";
+    readonly top: "fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg";
+    readonly bottom: "fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg";
+};
+export type SheetSide = keyof typeof SIDE;
+export declare const SheetContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    side?: SheetSide;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace SheetHeader {
+    var displayName: string;
+}
+export declare function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace SheetFooter {
+    var displayName: string;
+}
+export {};

package/dist/components/sheet.js

@@ -0,0 +1,49 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { OVERLAY_LAYER as t, OVERLAY_MOTION as n } from "./overlay.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-dialog";
+//#region src/components/sheet.tsx
+var s = o.Root, c = o.Trigger, l = o.Close, u = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i(o.Title, {
+	ref: r,
+	className: e("text-lg font-semibold leading-none tracking-tight", t),
+	...n
+}));
+u.displayName = o.Title.displayName;
+var d = r.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ i(o.Description, {
+	ref: r,
+	className: e("text-sm text-basalt-muted-foreground", t),
+	...n
+}));
+d.displayName = o.Description.displayName;
+var f = {
+	right: "fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg",
+	left: "fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg",
+	top: "fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg",
+	bottom: "fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg"
+}, p = r.forwardRef(({ className: r, side: s = "right", children: c, ...l }, u) => /* @__PURE__ */ a(o.Portal, { children: [/* @__PURE__ */ i(o.Overlay, { className: e("fixed inset-0 bg-black/50 backdrop-blur-xs", t, n) }), /* @__PURE__ */ i(o.Content, {
+	ref: u,
+	className: e(t, n, f[s], r),
+	...l,
+	style: {
+		boxSizing: "border-box",
+		...l.style
+	},
+	children: c
+})] }));
+p.displayName = "SheetContent";
+var m = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
+	className: e("flex flex-col space-y-2 text-left", t),
+	...n
+});
+m.displayName = "SheetHeader";
+var h = ({ className: t, ...n }) => /* @__PURE__ */ i("div", {
+	className: e("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+	...n
+});
+h.displayName = "SheetFooter";
+//#endregion
+export { s as Sheet, l as SheetClose, p as SheetContent, d as SheetDescription, h as SheetFooter, m as SheetHeader, u as SheetTitle, c as SheetTrigger };
+
+//# sourceMappingURL=sheet.js.map

package/dist/components/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":[],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\nexport const Sheet = DialogPrimitive.Root;\nexport const SheetTrigger = DialogPrimitive.Trigger;\nexport const SheetClose = DialogPrimitive.Close;\nexport const SheetTitle = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = DialogPrimitive.Title.displayName;\n\nexport const SheetDescription = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-sm text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = DialogPrimitive.Description.displayName;\n\nconst SIDE = {\n\tright:\n\t\t\"fixed inset-y-0 right-0 box-border flex h-full w-80 flex-col gap-3 border-l border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg\",\n\tleft: \"fixed inset-y-0 left-0 box-border flex h-full w-80 flex-col gap-3 border-r border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg\",\n\ttop: \"fixed inset-x-0 top-0 box-border flex h-80 w-full flex-col gap-3 border-b border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg\",\n\tbottom:\n\t\t\"fixed inset-x-0 bottom-0 box-border flex h-80 w-full flex-col gap-3 border-t border-basalt-border bg-basalt-popover p-6 text-sm text-basalt-popover-foreground shadow-lg\",\n} as const;\n\nexport type SheetSide = keyof typeof SIDE;\n\nexport const SheetContent = React.forwardRef<\n\tReact.ElementRef<typeof DialogPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { side?: SheetSide }\n>(({ className, side = \"right\", children, ...props }, ref) => (\n\t<DialogPrimitive.Portal>\n\t\t<DialogPrimitive.Overlay\n\t\t\tclassName={cn(\"fixed inset-0 bg-black/50 backdrop-blur-xs\", OVERLAY_LAYER, OVERLAY_MOTION)}\n\t\t/>\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(OVERLAY_LAYER, OVERLAY_MOTION, SIDE[side], className)}\n\t\t\t{...props}\n\t\t\tstyle={{ boxSizing: \"border-box\", ...props.style }}\n\t\t>\n\t\t\t{children}\n\t\t</DialogPrimitive.Content>\n\t</DialogPrimitive.Portal>\n));\nSheetContent.displayName = \"SheetContent\";\n\nexport const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nexport const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nSheetFooter.displayName = \"SheetFooter\";\n"],"mappings":";;;;;;;AAKA,IAAa,IAAQ,EAAgB,MACxB,IAAe,EAAgB,SAC/B,IAAa,EAAgB,OAC7B,IAAa,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,qDAAqD,CAAS;CAC5E,GAAI;AACJ,CAAA,CACD;AACD,EAAW,cAAc,EAAgB,MAAM;AAE/C,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,aAAjB;CACM;CACL,WAAW,EAAG,wCAAwC,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAgB,YAAY;AAE3D,IAAM,IAAO;CACZ,OACC;CACD,MAAM;CACN,KAAK;CACL,QACC;AACF,GAIa,IAAe,EAAM,YAG/B,EAAE,cAAW,UAAO,SAAS,aAAU,GAAG,KAAS,MACrD,kBAAC,EAAgB,QAAjB,EAAA,UAAA,CACC,kBAAC,EAAgB,SAAjB,EACC,WAAW,EAAG,8CAA8C,GAAe,CAAc,EACzF,CAAA,GACD,kBAAC,EAAgB,SAAjB;CACM;CACL,WAAW,EAAG,GAAe,GAAgB,EAAK,IAAO,CAAS;CAClE,GAAI;CACJ,OAAO;EAAE,WAAW;EAAc,GAAG,EAAM;CAAM;CAEhD;AACuB,CAAA,CACF,EAAA,CAAA,CACxB;AACD,EAAa,cAAc;AAE3B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAY,cAAc;AAE1B,IAAa,KAAe,EAAE,cAAW,GAAG,QAC3C,kBAAC,OAAD;CACC,WAAW,EAAG,0DAA0D,CAAS;CACjF,GAAI;AACJ,CAAA;AAEF,EAAY,cAAc"}

package/dist/components/sidebar.d.ts

@@ -0,0 +1,101 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode, type RefObject } from "react";
+export type SidebarSide = "left" | "right";
+type SidebarContextValue = {
+    collapsed: boolean;
+    setCollapsed: (next: boolean) => void;
+    side: SidebarSide;
+    loading: boolean;
+    peek: boolean;
+    peeking: boolean;
+    setPeeking: (next: boolean) => void;
+    overlay: boolean;
+    width: number;
+    setWidth: (next: number) => void;
+    lastFocusRef: RefObject<HTMLElement | null>;
+};
+export declare function useSidebar(): SidebarContextValue;
+export type SidebarProviderProps = {
+    /**
+     * The controlled collapsed state.
+     */
+    collapsed?: boolean;
+    /**
+     * The uncontrolled initial collapsed state.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Called when the collapsed state changes.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Which edge the sidebar occupies.
+     * @default left
+     */
+    side?: SidebarSide;
+    /**
+     * Replace the nav with a loading skeleton.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Expand the collapsed rail on hover.
+     * @default false
+     */
+    peek?: boolean;
+    /**
+     * Render as an overlay instead of in-flow chrome.
+     * @default false
+     */
+    overlay?: boolean;
+    /**
+     * Expanded width in pixels.
+     * @default 260
+     */
+    defaultWidth?: number;
+    /**
+     * Sidebar chrome and page content.
+     */
+    children: ReactNode;
+};
+export declare function SidebarProvider({ collapsed, defaultCollapsed, onCollapsedChange, side, loading, peek, overlay, defaultWidth, children, }: SidebarProviderProps): import("react").JSX.Element;
+export type SidebarProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * Collapse the rail when no provider is present.
+     * @default false
+     */
+    collapsed?: boolean;
+};
+export declare function Sidebar({ collapsed: collapsedProp, className, children, onMouseEnter, onMouseLeave, style, ...props }: SidebarProps): import("react").JSX.Element;
+export declare function SidebarHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function SidebarSearch({ shortcut, className, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    shortcut?: string;
+}): import("react").JSX.Element;
+export declare function SidebarNav({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+export declare function SidebarPartition({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export type SidebarItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Mark the item as the current page.
+     * @default false
+     */
+    active?: boolean;
+};
+export declare function SidebarItem({ active, className, ...props }: SidebarItemProps): import("react").JSX.Element;
+export declare function SidebarIconItem({ active, className, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    active?: boolean;
+}): import("react").JSX.Element;
+export declare function SidebarGroup({ label, defaultOpen, children, }: {
+    label: ReactNode;
+    defaultOpen?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SidebarFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function SidebarUser({ name, email, avatar, action, className, }: {
+    name: ReactNode;
+    email?: ReactNode;
+    avatar?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function ContentIsland({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export {};