@glyphui/ui 0.3.0 → 0.5.0

package/dist/components/scroll-area/scroll-area.js

@@ -0,0 +1,70 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { focusRing } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { ScrollArea } from "radix-ui";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/scroll-area/scroll-area.tsx
+const scrollAreaStyles = /* @__PURE__ */ tv({ slots: {
+	root: "relative overflow-hidden",
+	viewport: ["size-full rounded-[inherit]", focusRing],
+	scrollbar: [
+		"flex touch-none select-none p-px transition-colors duration-(--glyph-duration-fast)",
+		"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent",
+		"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent"
+	],
+	thumb: "relative flex-1 rounded-pill bg-border-strong hover:bg-faint-foreground",
+	corner: "bg-transparent"
+} });
+/** True while the element's content overflows it, so keyboard users need to reach it. */
+function useOverflowing() {
+	const ref = useRef(null);
+	const [overflowing, setOverflowing] = useState(false);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const measure = () => setOverflowing(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		if (el.firstElementChild) observer.observe(el.firstElementChild);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, overflowing];
+}
+/**
+* A scrollable region with slim, theme-colored scrollbars. Give it a height (or width)
+* with `className`, e.g. `h-72`.
+*/
+function ScrollArea$1(inProps) {
+	const [props, slots] = useComponentConfig("ScrollArea", inProps);
+	const { orientation = "vertical", viewportClassName, className, children, ...rest } = props;
+	const s = scrollAreaStyles();
+	const [viewportRef, overflowing] = useOverflowing();
+	const bar = (o) => /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation: o,
+		className: s.scrollbar({ class: slots.scrollbar }),
+		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: s.thumb({ class: slots.thumb }) })
+	});
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		"data-slot": "scroll-area",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				ref: viewportRef,
+				"data-slot": "scroll-area-viewport",
+				tabIndex: overflowing ? 0 : void 0,
+				className: s.viewport({ class: [slots.viewport, viewportClassName] }),
+				children
+			}),
+			orientation !== "horizontal" && bar("vertical"),
+			orientation !== "vertical" && bar("horizontal"),
+			/* @__PURE__ */ jsx(ScrollArea.Corner, { className: s.corner({ class: slots.corner }) })
+		]
+	});
+}
+//#endregion
+export { ScrollArea$1 as ScrollArea, scrollAreaStyles };

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

@@ -0,0 +1,2 @@
+import { Section, SectionProps, sectionStyles } from "./section.js";
+export { Section, type SectionProps, sectionStyles };

package/dist/components/section/section.d.ts

@@ -0,0 +1,52 @@
+import { VariantProps } from "../../utils/tv.js";
+import { ComponentProps } from "react";
+//#region src/components/section/section.d.ts
+export declare const sectionStyles: import("tailwind-variants").TVReturnType<{
+  spacing: {
+    none: "py-0";
+    sm: "py-10 sm:py-12";
+    md: "py-16 sm:py-20";
+    lg: "py-20 sm:py-28";
+  };
+  tone: {
+    default: "";
+    subtle: "bg-subtle";
+  };
+  divided: {
+    true: "border-t-(length:--glyph-border-width) border-border";
+  };
+}, undefined, "w-full", {
+  spacing: {
+    none: "py-0";
+    sm: "py-10 sm:py-12";
+    md: "py-16 sm:py-20";
+    lg: "py-20 sm:py-28";
+  };
+  tone: {
+    default: "";
+    subtle: "bg-subtle";
+  };
+  divided: {
+    true: "border-t-(length:--glyph-border-width) border-border";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  spacing: {
+    none: "py-0";
+    sm: "py-10 sm:py-12";
+    md: "py-16 sm:py-20";
+    lg: "py-20 sm:py-28";
+  };
+  tone: {
+    default: "";
+    subtle: "bg-subtle";
+  };
+  divided: {
+    true: "border-t-(length:--glyph-border-width) border-border";
+  };
+}, undefined>>;
+export interface SectionProps extends ComponentProps<'section'>, VariantProps<typeof sectionStyles> {
+  asChild?: boolean;
+}
+/** A full-width page band with consistent vertical rhythm. Put a Container inside. */
+export declare function Section({ spacing, tone, divided, asChild, className, ...props }: SectionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/section/section.js

@@ -0,0 +1,41 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/section/section.tsx
+const sectionStyles = /* @__PURE__ */ tv({
+	base: "w-full",
+	variants: {
+		spacing: {
+			none: "py-0",
+			sm: "py-10 sm:py-12",
+			md: "py-16 sm:py-20",
+			lg: "py-20 sm:py-28"
+		},
+		tone: {
+			default: "",
+			subtle: "bg-subtle"
+		},
+		divided: { true: "border-t-(length:--glyph-border-width) border-border" }
+	},
+	defaultVariants: {
+		spacing: "md",
+		tone: "default"
+	}
+});
+/** A full-width page band with consistent vertical rhythm. Put a Container inside. */
+function Section({ spacing, tone, divided, asChild, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "section";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "section",
+		className: sectionStyles({
+			spacing,
+			tone,
+			divided,
+			class: className
+		}),
+		...props
+	});
+}
+//#endregion
+export { Section, sectionStyles };

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+import { SegmentedControl, SegmentedControlProps, SegmentedOption, segmentedControlStyles } from "./segmented-control.js";
+export { SegmentedControl, type SegmentedControlProps, type SegmentedOption, segmentedControlStyles };

package/dist/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,92 @@
+import { VariantProps } from "../../utils/tv.js";
+import { ReactNode } from "react";
+//#region src/components/segmented-control/segmented-control.d.ts
+export declare const segmentedControlStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      item: string;
+    };
+    md: {
+      root: string;
+      item: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      root: string;
+      item: string;
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  /** The raised thumb that slides to the selected option. */
+  indicator: string;
+}, undefined, {
+  size: {
+    sm: {
+      root: string;
+      item: string;
+    };
+    md: {
+      root: string;
+      item: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      root: string;
+      item: string;
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  /** The raised thumb that slides to the selected option. */
+  indicator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string;
+      item: string;
+    };
+    md: {
+      root: string;
+      item: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      root: string;
+      item: string;
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  /** The raised thumb that slides to the selected option. */
+  indicator: string;
+}>>;
+export interface SegmentedOption<T extends string> {
+  value: T;
+  label: ReactNode;
+  disabled?: boolean;
+}
+export interface SegmentedControlProps<T extends string> extends VariantProps<typeof segmentedControlStyles> {
+  options: readonly SegmentedOption<T>[];
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+  /** Required unless the control sits in a `<Field label>`, which labels it. */
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Pick exactly one of a few options. `T` is inferred from `options`, so `onValueChange`
+ * receives your union type, not `string`.
+ */
+export declare function SegmentedControl<T extends string>(inProps: SegmentedControlProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,86 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { FieldContext } from "../field/field-context.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { ActiveIndicator } from "../../motion/active-indicator.js";
+import { warnOnce } from "../../internal/dev.js";
+import { ToggleGroup } from "radix-ui";
+import { useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/segmented-control/segmented-control.tsx
+const segmentedControlStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: ["isolate inline-flex items-center gap-0.5 rounded-md border-border bg-muted p-0.5", themedBorder],
+		item: [
+			"relative inline-flex h-full cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-md)-2px)] px-3 font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground data-[state=on]:text-foreground",
+			"disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4"
+		],
+		/** The raised thumb that slides to the selected option. */
+		indicator: "pointer-events-none absolute inset-0 -z-10 rounded-[calc(var(--radius-md)-2px)] bg-raised shadow-xs"
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "h-(--glyph-control-sm)",
+				item: "px-2.5 text-caption"
+			},
+			md: {
+				root: "h-(--glyph-control-md)",
+				item: "text-small"
+			}
+		},
+		fullWidth: { true: {
+			root: "flex w-full",
+			item: "flex-1"
+		} }
+	},
+	defaultVariants: { size: "md" }
+});
+/**
+* Pick exactly one of a few options. `T` is inferred from `options`, so `onValueChange`
+* receives your union type, not `string`.
+*/
+function SegmentedControl(inProps) {
+	const [props, slots] = useComponentConfig("SegmentedControl", inProps);
+	const { options, value, defaultValue, onValueChange, size, fullWidth, className, ...rest } = props;
+	const field = useContext(FieldContext);
+	const s = segmentedControlStyles({
+		size,
+		fullWidth
+	});
+	const [selected, setSelected] = useControllableState({
+		value,
+		defaultValue,
+		onChange: (next) => next !== void 0 && onValueChange?.(next)
+	});
+	const indicatorId = `${useId()}-segmented-indicator`;
+	const labelledBy = rest["aria-labelledby"] ?? (rest["aria-label"] ? void 0 : field?.labelId);
+	if (!rest["aria-label"] && !labelledBy) warnOnce("segmented-control-label", "SegmentedControl needs a label: pass aria-label, or place it in a <Field label=\"…\">.");
+	const describedBy = [field?.descriptionId, field?.errorId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
+		type: "single",
+		"data-slot": "segmented-control",
+		value: selected ?? "",
+		onValueChange: (next) => next && setSelected(next),
+		className: s.root({ class: [slots.root, className] }),
+		"aria-labelledby": labelledBy,
+		"aria-describedby": describedBy || void 0,
+		...rest,
+		children: options.map((option) => /* @__PURE__ */ jsxs(ToggleGroup.Item, {
+			value: option.value,
+			disabled: option.disabled,
+			className: s.item({ class: slots.item }),
+			children: [option.label, option.value === selected && /* @__PURE__ */ jsx(ActiveIndicator, {
+				layoutId: indicatorId,
+				className: s.indicator({ class: slots.indicator })
+			})]
+		}, option.value))
+	});
+}
+//#endregion
+export { SegmentedControl, segmentedControlStyles };

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

@@ -0,0 +1,2 @@
+import { Select, SelectItem, SelectItemProps, SelectProps, selectStyles } from "./select.js";
+export { Select, SelectItem, type SelectItemProps, type SelectProps, selectStyles };

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

@@ -0,0 +1,85 @@
+import { VariantProps } from "../../utils/tv.js";
+import { Select } from "radix-ui";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/select/select.d.ts
+export declare const selectStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+}, {
+  trigger: string[];
+  icon: string;
+  content: string[];
+  viewport: string;
+  item: string[];
+  indicator: string;
+}, undefined, {
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+}, {
+  trigger: string[];
+  icon: string;
+  content: string[];
+  viewport: string;
+  item: string[];
+  indicator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+}, {
+  trigger: string[];
+  icon: string;
+  content: string[];
+  viewport: string;
+  item: string[];
+  indicator: string;
+}>>;
+type RootProps<T extends string> = Omit<ComponentProps<typeof Select.Root>, 'value' | 'defaultValue' | 'onValueChange'> & {
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+};
+export interface SelectProps<T extends string = string> extends RootProps<T>, VariantProps<typeof selectStyles> {
+  placeholder?: ReactNode;
+  id?: string;
+  className?: string;
+  contentClassName?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+}
+/**
+ * A dropdown select. `value` is typed by the `T` you use:
+ * `<Select<Plan> value={plan} onValueChange={setPlan}>` only accepts `Plan` values.
+ */
+declare function Select$1<T extends string = string>(inProps: SelectProps<T>): import("react").JSX.Element;
+export interface SelectItemProps extends ComponentProps<typeof Select.Item> {}
+export declare function SelectItem({ className, children, ...props }: SelectItemProps): import("react").JSX.Element;
+//#endregion
+export { Select$1 as Select };

package/dist/components/select/select.js

@@ -0,0 +1,81 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { CheckIcon, ChevronDownIcon } from "../../internal/icons.js";
+import { popover } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { useFieldControl } from "../field/field-context.js";
+import { fieldControl } from "../input/input.styles.js";
+import { Select } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select/select.tsx
+const selectStyles = /* @__PURE__ */ tv({
+	slots: {
+		trigger: [
+			...fieldControl,
+			"flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none",
+			"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20",
+			"data-placeholder:text-faint-foreground disabled:cursor-not-allowed disabled:opacity-50",
+			"[&>span]:truncate"
+		],
+		icon: "size-4 shrink-0 text-faint-foreground",
+		content: [popover, "origin-(--radix-select-content-transform-origin) max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width)"],
+		viewport: "p-1",
+		item: ["relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-sm pr-8 pl-2 text-small outline-none", "data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50"],
+		indicator: "absolute right-2 flex items-center text-primary [&>svg]:size-4"
+	},
+	variants: { size: {
+		sm: { trigger: "h-(--glyph-control-sm) text-small" },
+		md: { trigger: "h-(--glyph-control-md) text-small" },
+		lg: { trigger: "h-(--glyph-control-lg) text-body" }
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* A dropdown select. `value` is typed by the `T` you use:
+* `<Select<Plan> value={plan} onValueChange={setPlan}>` only accepts `Plan` values.
+*/
+function Select$1(inProps) {
+	const [props, slots] = useComponentConfig("Select", useFieldControl(inProps));
+	const { size, placeholder, id, className, contentClassName, children, onValueChange, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps } = props;
+	const s = selectStyles({ size });
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		...rootProps,
+		...onValueChange && { onValueChange: (v) => onValueChange(v) },
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			id,
+			"data-slot": "select-trigger",
+			"aria-label": ariaLabel,
+			"aria-describedby": ariaDescribedBy,
+			"aria-invalid": ariaInvalid,
+			className: s.trigger({ class: [slots.trigger, className] }),
+			children: [/* @__PURE__ */ jsx(Select.Value, { placeholder }), /* @__PURE__ */ jsx(Select.Icon, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: s.icon({ class: slots.icon }) })
+			})]
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Content, {
+			position: "popper",
+			sideOffset: 4,
+			"data-slot": "select-content",
+			className: s.content({ class: [slots.content, contentClassName] }),
+			children: /* @__PURE__ */ jsx(Select.Viewport, {
+				className: s.viewport({ class: slots.viewport }),
+				children
+			})
+		}) })]
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	const [, slots] = useComponentConfig("Select", {});
+	const s = selectStyles();
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, { children }), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})]
+	});
+}
+//#endregion
+export { Select$1 as Select, SelectItem, selectStyles };

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

@@ -0,0 +1,2 @@
+import { Separator, separatorStyles } from "./separator.js";
+export { Separator, separatorStyles };

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,40 @@
+import { Separator } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/separator/separator.d.ts
+export declare const separatorStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      base: string;
+    };
+    vertical: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, undefined, {
+  orientation: {
+    horizontal: {
+      base: string;
+    };
+    vertical: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    horizontal: {
+      base: string;
+    };
+    vertical: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}>>;
+declare function Separator$1(inProps: ComponentProps<typeof Separator.Root>): import("react").JSX.Element;
+//#endregion
+export { Separator$1 as Separator };

package/dist/components/separator/separator.js

@@ -0,0 +1,27 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { Separator } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/separator/separator.tsx
+const separatorStyles = /* @__PURE__ */ tv({
+	slots: { base: "shrink-0 bg-border" },
+	variants: { orientation: {
+		horizontal: { base: "h-px w-full" },
+		vertical: { base: "h-full w-px self-stretch" }
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+function Separator$1(inProps) {
+	const [props, slots] = useComponentConfig("Separator", inProps);
+	const { orientation = "horizontal", decorative = true, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Separator.Root, {
+		"data-slot": "separator",
+		orientation,
+		decorative,
+		className: separatorStyles({ orientation }).base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Separator$1 as Separator, separatorStyles };

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

@@ -0,0 +1,3 @@
+import { SheetVariants, sheetStyles } from "./sheet.styles.js";
+import { Sheet, SheetBody, SheetClose, SheetContent, SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./sheet.js";
+export { Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, type SheetVariants, sheetStyles };

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

@@ -0,0 +1,20 @@
+import { SheetVariants } from "./sheet.styles.js";
+import { Dialog } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/sheet/sheet.d.ts
+/** A panel that slides in from an edge: filters, details, settings, mobile navigation. */
+export declare const Sheet: import("react").FC<Dialog.DialogProps>;
+export declare const SheetTrigger: import("react").ForwardRefExoticComponent<Dialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SheetClose: import("react").ForwardRefExoticComponent<Dialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface SheetContentProps extends ComponentProps<typeof Dialog.Content>, SheetVariants {
+  /** Show the close button in the corner. Default true. */
+  showClose?: boolean;
+  overlayClassName?: string;
+}
+export declare function SheetContent(inProps: SheetContentProps): import("react").JSX.Element;
+export declare function SheetHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title>): import("react").JSX.Element;
+export declare function SheetDescription({ className, ...props }: ComponentProps<typeof Dialog.Description>): import("react").JSX.Element;
+export declare function SheetBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function SheetFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion