@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/copy-button/copy-button.js

@@ -0,0 +1,79 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { Button } from "../button/button.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/copy-button/copy-button.tsx
+const copyButtonStyles = /* @__PURE__ */ tv({ slots: {
+	base: "",
+	icon: "size-4",
+	status: "sr-only"
+} });
+const icon = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const CopyIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	...icon,
+	className,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "13",
+		height: "13",
+		x: "9",
+		y: "9",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+});
+const CheckIcon = ({ className }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...icon,
+	className,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+/** Copies a value to the clipboard and confirms it visually and to screen readers. */
+function CopyButton(inProps) {
+	const [props, slots] = useComponentConfig("CopyButton", inProps);
+	const { value, children, copiedLabel = "Copied", timeout = 1500, onCopy, variant = "outline", className, "aria-label": ariaLabel, ...rest } = props;
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	const s = copyButtonStyles();
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(value);
+		} catch {
+			return;
+		}
+		setCopied(true);
+		onCopy?.(value);
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => setCopied(false), timeout);
+	};
+	const glyph = copied ? /* @__PURE__ */ jsx(CheckIcon, { className: s.icon({ class: slots.icon }) }) : /* @__PURE__ */ jsx(CopyIcon, { className: s.icon({ class: slots.icon }) });
+	const iconOnly = children === void 0;
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-slot": "copy-button",
+		"data-copied": copied || void 0,
+		variant,
+		iconOnly,
+		onClick: copy,
+		className: s.base({ class: [slots.base, className] }),
+		"aria-label": iconOnly ? copied ? copiedLabel : ariaLabel ?? "Copy" : ariaLabel,
+		...!iconOnly && { leftIcon: glyph },
+		...rest,
+		children: [iconOnly ? glyph : copied ? copiedLabel : children, /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: s.status({ class: slots.status }),
+			children: copied ? copiedLabel : ""
+		})]
+	});
+}
+//#endregion
+export { CopyButton, copyButtonStyles };

package/dist/components/copy-button/index.d.ts

@@ -0,0 +1,2 @@
+import { CopyButton, CopyButtonProps, copyButtonStyles } from "./copy-button.js";
+export { CopyButton, type CopyButtonProps, copyButtonStyles };

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,51 @@
+import { DatePickerVariants } from "./date-picker.styles.js";
+import { ReactNode } from "react";
+import { DateRange, Matcher } from "react-day-picker";
+//#region src/components/date-picker/date-picker.d.ts
+interface SharedProps extends DatePickerVariants {
+  placeholder?: ReactNode;
+  /** date-fns format string for the trigger. Default `"MMM d, yyyy"`. */
+  format?: string;
+  /** Earliest selectable date. */
+  minDate?: Date;
+  /** Latest selectable date. */
+  maxDate?: Date;
+  /** Extra disabled dates, in react-day-picker matcher form. */
+  disabledDates?: Matcher | Matcher[];
+  /** Show a button that clears the value. */
+  clearable?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  /** Submits the ISO date (yyyy-MM-dd) with a native form. */
+  name?: string;
+  id?: string;
+  className?: string;
+  contentClassName?: string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+}
+export interface DatePickerProps extends SharedProps {
+  value?: Date | undefined;
+  defaultValue?: Date | undefined;
+  onValueChange?: (date: Date | undefined) => void;
+}
+/** A date field that opens a calendar. Works with Field and with `Form` (`value` + `onValueChange`). */
+export declare function DatePicker(inProps: DatePickerProps): import("react").JSX.Element;
+export interface DateRangePreset {
+  label: string;
+  /** Called when chosen, so relative ranges ("Last 7 days") are computed at that moment. */
+  range: () => DateRange;
+}
+export interface DateRangePickerProps extends SharedProps {
+  value?: DateRange | undefined;
+  defaultValue?: DateRange | undefined;
+  onValueChange?: (range: DateRange | undefined) => void;
+  /** Quick picks shown beside the calendar. */
+  presets?: readonly DateRangePreset[];
+  /** Months shown side by side. Default 2. */
+  numberOfMonths?: number;
+}
+/** A date-range field with a two-month calendar and optional presets. */
+export declare function DateRangePicker(inProps: DateRangePickerProps): import("react").JSX.Element;
+//#endregion

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,235 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { Calendar } from "../calendar/calendar.js";
+import { useFieldControl } from "../field/field-context.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { datePickerStyles } from "./date-picker.styles.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { format, isSameDay } from "date-fns";
+//#region src/components/date-picker/date-picker.tsx
+function CalendarIcon({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "4",
+			width: "18",
+			height: "18",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })]
+	});
+}
+function ClearIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+function disabledMatchers({ minDate, maxDate, disabledDates }) {
+	const list = [];
+	if (minDate) list.push({ before: minDate });
+	if (maxDate) list.push({ after: maxDate });
+	if (disabledDates) list.push(...Array.isArray(disabledDates) ? disabledDates : [disabledDates]);
+	return list;
+}
+const iso = (date) => format(date, "yyyy-MM-dd");
+/** A date field that opens a calendar. Works with Field and with `Form` (`value` + `onValueChange`). */
+function DatePicker(inProps) {
+	const [props, slots] = useComponentConfig("DatePicker", useFieldControl(inProps));
+	const { value: valueProp, defaultValue, onValueChange, placeholder = "Pick a date", format: format$1 = "MMM d, yyyy", clearable = false, size, disabled, name, id, className, contentClassName, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [open, setOpen] = useState(false);
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const current = "value" in inProps ? valueProp : value;
+	const s = datePickerStyles({ size });
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					id,
+					"data-slot": "date-picker",
+					disabled,
+					"aria-label": ariaLabel,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					className: s.trigger({ class: [slots.trigger, className] }),
+					children: [
+						/* @__PURE__ */ jsx(CalendarIcon, { className: s.icon({ class: slots.icon }) }),
+						current ? /* @__PURE__ */ jsx("span", {
+							className: s.value({ class: slots.value }),
+							children: format(current, format$1)
+						}) : /* @__PURE__ */ jsx("span", {
+							className: s.placeholder({ class: slots.placeholder }),
+							children: placeholder
+						}),
+						clearable && current && !disabled && /* @__PURE__ */ jsx("span", {
+							role: "button",
+							tabIndex: 0,
+							"aria-label": "Clear date",
+							className: s.clear({ class: slots.clear }),
+							onPointerDown: (event) => event.stopPropagation(),
+							onClick: (event) => {
+								event.stopPropagation();
+								setValue(void 0);
+							},
+							onKeyDown: (event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									event.preventDefault();
+									event.stopPropagation();
+									setValue(void 0);
+								}
+							},
+							children: /* @__PURE__ */ jsx(ClearIcon, {})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: s.content({ class: [slots.content, contentClassName] }),
+				children: /* @__PURE__ */ jsx(Calendar, {
+					mode: "single",
+					selected: current,
+					defaultMonth: current,
+					disabled: disabledMatchers(props),
+					onSelect: (date) => {
+						setValue(date);
+						if (date) setOpen(false);
+					},
+					autoFocus: true
+				})
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: current ? iso(current) : ""
+			})
+		]
+	});
+}
+function formatRange(range, format$2) {
+	if (!range.from) return "";
+	if (!range.to || isSameDay(range.from, range.to)) return format(range.from, format$2);
+	return `${format(range.from, format$2)} – ${format(range.to, format$2)}`;
+}
+/** A date-range field with a two-month calendar and optional presets. */
+function DateRangePicker(inProps) {
+	const [props, slots] = useComponentConfig("DatePicker", useFieldControl(inProps));
+	const { value: valueProp, defaultValue, onValueChange, presets, numberOfMonths = 2, placeholder = "Pick a date range", format = "MMM d, yyyy", clearable = false, size, disabled, name, id, className, contentClassName, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const [open, setOpen] = useState(false);
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange: onValueChange
+	});
+	const current = "value" in inProps ? valueProp : value;
+	const s = datePickerStyles({ size });
+	const label = current ? formatRange(current, format) : "";
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [
+			/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					id,
+					"data-slot": "date-range-picker",
+					disabled,
+					"aria-label": ariaLabel,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					className: s.trigger({ class: [slots.trigger, className] }),
+					children: [
+						/* @__PURE__ */ jsx(CalendarIcon, { className: s.icon({ class: slots.icon }) }),
+						label ? /* @__PURE__ */ jsx("span", {
+							className: s.value({ class: slots.value }),
+							children: label
+						}) : /* @__PURE__ */ jsx("span", {
+							className: s.placeholder({ class: slots.placeholder }),
+							children: placeholder
+						}),
+						clearable && current?.from && !disabled && /* @__PURE__ */ jsx("span", {
+							role: "button",
+							tabIndex: 0,
+							"aria-label": "Clear dates",
+							className: s.clear({ class: slots.clear }),
+							onPointerDown: (event) => event.stopPropagation(),
+							onClick: (event) => {
+								event.stopPropagation();
+								setValue(void 0);
+							},
+							onKeyDown: (event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									event.preventDefault();
+									event.stopPropagation();
+									setValue(void 0);
+								}
+							},
+							children: /* @__PURE__ */ jsx(ClearIcon, {})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: s.content({ class: [slots.content, contentClassName] }),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: s.layout({ class: slots.layout }),
+					children: [presets && presets.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: s.presets({ class: slots.presets }),
+						children: presets.map((preset) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: s.preset({ class: slots.preset }),
+							onClick: () => {
+								setValue(preset.range());
+								setOpen(false);
+							},
+							children: preset.label
+						}, preset.label))
+					}), /* @__PURE__ */ jsx(Calendar, {
+						mode: "range",
+						selected: current,
+						defaultMonth: current?.from,
+						numberOfMonths,
+						disabled: disabledMatchers(props),
+						onSelect: (range) => setValue(range),
+						autoFocus: true
+					})]
+				})
+			}),
+			name && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}.from`,
+				value: current?.from ? iso(current.from) : ""
+			}), /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}.to`,
+				value: current?.to ? iso(current.to) : ""
+			})] })
+		]
+	});
+}
+//#endregion
+export { DatePicker, DateRangePicker };

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -0,0 +1,77 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/date-picker/date-picker.styles.d.ts
+export declare const datePickerStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+}, {
+  trigger: string[];
+  icon: string;
+  value: string;
+  placeholder: string;
+  clear: string;
+  content: string[];
+  layout: string;
+  presets: string;
+  preset: string;
+}, undefined, {
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+}, {
+  trigger: string[];
+  icon: string;
+  value: string;
+  placeholder: string;
+  clear: string;
+  content: string[];
+  layout: string;
+  presets: string;
+  preset: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+}, {
+  trigger: string[];
+  icon: string;
+  value: string;
+  placeholder: string;
+  clear: string;
+  content: string[];
+  layout: string;
+  presets: string;
+  preset: string;
+}>>;
+export type DatePickerVariants = VariantProps<typeof datePickerStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DatePicker: StylesEntry<typeof datePickerStyles>;
+  }
+}
+//#endregion

package/dist/components/date-picker/date-picker.styles.js

@@ -0,0 +1,31 @@
+"use client";
+import { popover } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+import { fieldControl } from "../input/input.styles.js";
+//#region src/components/date-picker/date-picker.styles.ts
+const datePickerStyles = /* @__PURE__ */ tv({
+	slots: {
+		trigger: [
+			...fieldControl,
+			"flex cursor-pointer items-center gap-2 px-3 text-left outline-none",
+			"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20",
+			"disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		icon: "size-4 shrink-0 text-faint-foreground",
+		value: "min-w-0 flex-1 truncate",
+		placeholder: "min-w-0 flex-1 truncate text-faint-foreground",
+		clear: "inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-xs text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-3.5",
+		content: [popover, "origin-(--radix-popover-content-transform-origin) w-auto p-0"],
+		layout: "flex flex-col sm:flex-row",
+		presets: "flex gap-1 overflow-x-auto border-b border-border p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0",
+		preset: "shrink-0 cursor-pointer rounded-sm px-2 py-1.5 text-left text-small whitespace-nowrap text-muted-foreground hover:bg-muted hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground"
+	},
+	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" }
+});
+//#endregion
+export { datePickerStyles };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerVariants, datePickerStyles } from "./date-picker.styles.js";
+import { DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, DateRangePreset } from "./date-picker.js";
+export { DatePicker, type DatePickerProps, type DatePickerVariants, DateRangePicker, type DateRangePickerProps, type DateRangePreset, datePickerStyles };

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

@@ -0,0 +1,15 @@
+import { DescriptionListVariants } from "./description-list.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/description-list/description-list.d.ts
+export interface DescriptionListProps extends ComponentProps<'dl'>, DescriptionListVariants {}
+/**
+ * Label–value pairs, such as account details or order metadata.
+ * `layout="inline"` puts terms and details side by side from the `sm` breakpoint.
+ */
+export declare function DescriptionList(inProps: DescriptionListProps): import("react").JSX.Element;
+export interface DescriptionItemProps extends Omit<ComponentProps<'div'>, 'children'> {
+  term: ReactNode;
+  children: ReactNode;
+}
+export declare function DescriptionItem({ term, children, className, ...props }: DescriptionItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/description-list/description-list.js

@@ -0,0 +1,51 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { descriptionListStyles } from "./description-list.styles.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/description-list/description-list.tsx
+const DescriptionListContext = createContext(null);
+/**
+* Label–value pairs, such as account details or order metadata.
+* `layout="inline"` puts terms and details side by side from the `sm` breakpoint.
+*/
+function DescriptionList(inProps) {
+	const [props, slots] = useComponentConfig("DescriptionList", inProps);
+	const { layout, dividers, className, ...rest } = props;
+	const s = descriptionListStyles({
+		layout,
+		dividers
+	});
+	return /* @__PURE__ */ jsx(DescriptionListContext.Provider, {
+		value: {
+			s,
+			slots
+		},
+		children: /* @__PURE__ */ jsx("dl", {
+			"data-slot": "description-list",
+			className: s.root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function DescriptionItem({ term, children, className, ...props }) {
+	const ctx = useContext(DescriptionListContext);
+	const s = ctx?.s ?? descriptionListStyles();
+	const slots = ctx?.slots ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "description-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("dt", {
+			"data-slot": "description-term",
+			className: s.term({ class: slots.term }),
+			children: term
+		}), /* @__PURE__ */ jsx("dd", {
+			"data-slot": "description-details",
+			className: s.details({ class: slots.details }),
+			children
+		})]
+	});
+}
+//#endregion
+export { DescriptionItem, DescriptionList };

package/dist/components/description-list/description-list.styles.d.ts

@@ -0,0 +1,74 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/description-list/description-list.styles.d.ts
+export declare const descriptionListStyles: import("tailwind-variants").TVReturnType<{
+  layout: {
+    stacked: {
+      root: string;
+    };
+    inline: {
+      item: string;
+    };
+  };
+  dividers: {
+    true: {
+      root: string;
+      item: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  item: string;
+  term: string;
+  details: string;
+}, undefined, {
+  layout: {
+    stacked: {
+      root: string;
+    };
+    inline: {
+      item: string;
+    };
+  };
+  dividers: {
+    true: {
+      root: string;
+      item: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  item: string;
+  term: string;
+  details: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  layout: {
+    stacked: {
+      root: string;
+    };
+    inline: {
+      item: string;
+    };
+  };
+  dividers: {
+    true: {
+      root: string;
+      item: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  item: string;
+  term: string;
+  details: string;
+}>>;
+export type DescriptionListVariants = VariantProps<typeof descriptionListStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DescriptionList: StylesEntry<typeof descriptionListStyles>;
+  }
+}
+//#endregion

package/dist/components/description-list/description-list.styles.js

@@ -0,0 +1,35 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/description-list/description-list.styles.ts
+const descriptionListStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid w-full",
+		item: "grid min-w-0 gap-1",
+		term: "text-small text-muted-foreground",
+		details: "min-w-0 break-words text-small text-foreground"
+	},
+	variants: {
+		layout: {
+			stacked: { root: "gap-4" },
+			inline: { item: "sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4" }
+		},
+		dividers: {
+			true: {
+				root: "gap-0 divide-y divide-border",
+				item: "py-3 first:pt-0 last:pb-0"
+			},
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		layout: "inline",
+		dividers: false,
+		class: { root: "gap-3" }
+	}],
+	defaultVariants: {
+		layout: "stacked",
+		dividers: false
+	}
+});
+//#endregion
+export { descriptionListStyles };

package/dist/components/description-list/index.d.ts

@@ -0,0 +1,3 @@
+import { DescriptionListVariants, descriptionListStyles } from "./description-list.styles.js";
+import { DescriptionItem, DescriptionItemProps, DescriptionList, DescriptionListProps } from "./description-list.js";
+export { DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, type DescriptionListVariants, descriptionListStyles };