@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/dialog/close-icon.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/dialog/close-icon.tsx
+/** Local close icon so overlay components stay self-contained. */
+function CloseIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+//#endregion
+export { CloseIcon };

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,21 @@
+import { DialogVariants } from "./dialog.styles.js";
+import { Dialog } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/dialog/dialog.d.ts
+/** A modal window. Focus is trapped inside and returns to the trigger on close. */
+declare const Dialog$1: import("react").FC<Dialog.DialogProps>;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<Dialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<Dialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface DialogContentProps extends ComponentProps<typeof Dialog.Content>, DialogVariants {
+  /** Show the close button in the corner. Default true. */
+  showClose?: boolean;
+  overlayClassName?: string;
+}
+export declare function DialogContent(inProps: DialogContentProps): import("react").JSX.Element;
+export declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function DialogTitle({ className, ...props }: ComponentProps<typeof Dialog.Title>): import("react").JSX.Element;
+export declare function DialogDescription({ className, ...props }: ComponentProps<typeof Dialog.Description>): import("react").JSX.Element;
+export declare function DialogBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { Dialog$1 as Dialog };

package/dist/components/dialog/dialog.js

@@ -0,0 +1,79 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { CloseIcon } from "./close-icon.js";
+import { dialogStyles } from "./dialog.styles.js";
+import { Dialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dialog/dialog.tsx
+function useParts() {
+	const [, slots] = useComponentConfig("Dialog", {});
+	return {
+		s: dialogStyles(),
+		slots
+	};
+}
+/** A modal window. Focus is trapped inside and returns to the trigger on close. */
+const Dialog$1 = Dialog.Root;
+const DialogTrigger = Dialog.Trigger;
+const DialogClose = Dialog.Close;
+function DialogContent(inProps) {
+	const [props, slots] = useComponentConfig("Dialog", inProps);
+	const { size, showClose = true, overlayClassName, className, children, ...rest } = props;
+	const s = dialogStyles({ size });
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: s.overlay({ class: [slots.overlay, overlayClassName] })
+	}), /* @__PURE__ */ jsxs(Dialog.Content, {
+		"data-slot": "dialog-content",
+		className: s.content({ class: [slots.content, className] }),
+		...rest,
+		children: [children, showClose && /* @__PURE__ */ jsx(Dialog.Close, {
+			"data-slot": "dialog-close",
+			"aria-label": "Close",
+			className: s.close({ class: slots.close }),
+			children: /* @__PURE__ */ jsx(CloseIcon, {})
+		})]
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function DialogTitle({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: s.title({ class: [slots.title, className] }),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: s.description({ class: [slots.description, className] }),
+		...props
+	});
+}
+function DialogBody({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function DialogFooter({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+//#endregion
+export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/components/dialog/dialog.styles.d.ts

@@ -0,0 +1,83 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/dialog/dialog.styles.d.ts
+export declare const dialogStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      content: string;
+    };
+    md: {
+      content: string;
+    };
+    lg: {
+      content: string;
+    };
+    xl: {
+      content: string;
+    };
+  };
+}, {
+  overlay: string[];
+  content: string[];
+  close: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}, undefined, {
+  size: {
+    sm: {
+      content: string;
+    };
+    md: {
+      content: string;
+    };
+    lg: {
+      content: string;
+    };
+    xl: {
+      content: string;
+    };
+  };
+}, {
+  overlay: string[];
+  content: string[];
+  close: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      content: string;
+    };
+    md: {
+      content: string;
+    };
+    lg: {
+      content: string;
+    };
+    xl: {
+      content: string;
+    };
+  };
+}, {
+  overlay: string[];
+  content: string[];
+  close: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}>>;
+export type DialogVariants = VariantProps<typeof dialogStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Dialog: StylesEntry<typeof dialogStyles>;
+  }
+}
+//#endregion

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,34 @@
+"use client";
+import { dialogMotion, focusRing, overlayMotion, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/dialog/dialog.styles.ts
+const dialogStyles = /* @__PURE__ */ tv({
+	slots: {
+		overlay: ["fixed inset-0 z-50 bg-overlay", overlayMotion],
+		content: [
+			"fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-y-auto",
+			"rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none",
+			dialogMotion,
+			themedBorder
+		],
+		close: [
+			"absolute top-4 right-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4",
+			transition,
+			focusRing
+		],
+		header: "flex flex-col gap-1.5 pr-8",
+		title: "font-display text-h4 text-foreground",
+		description: "text-small text-muted-foreground",
+		body: "min-w-0 text-small text-foreground",
+		footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+	},
+	variants: { size: {
+		sm: { content: "max-w-sm" },
+		md: { content: "max-w-lg" },
+		lg: { content: "max-w-2xl" },
+		xl: { content: "max-w-4xl" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { dialogStyles };

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

@@ -0,0 +1,3 @@
+import { DialogVariants, dialogStyles } from "./dialog.styles.js";
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
+export { Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, type DialogVariants, dialogStyles };

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,34 @@
+import { DropdownMenu } from "radix-ui";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/dropdown-menu/dropdown-menu.d.ts
+/** A menu of actions opened from a button: row actions, account menus, "more" buttons. */
+declare const DropdownMenu$1: import("react").FC<DropdownMenu.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSub: import("react").FC<DropdownMenu.DropdownMenuSubProps>;
+export declare function DropdownMenuContent(inProps: ComponentProps<typeof DropdownMenu.Content>): import("react").JSX.Element;
+export interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+  icon?: ReactNode;
+  /** Keyboard hint shown at the end, e.g. "⌘D". Display only. */
+  shortcut?: ReactNode;
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger';
+  /** Indent to line up with checkbox and radio items. */
+  inset?: boolean;
+}
+export declare function DropdownMenuItem({ icon, shortcut, tone, inset, className, children, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+export declare function DropdownMenuCheckboxItem({ className, children, ...props }: ComponentProps<typeof DropdownMenu.CheckboxItem>): import("react").JSX.Element;
+export declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof DropdownMenu.RadioItem>): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ inset, className, ...props }: ComponentProps<typeof DropdownMenu.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+export declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof DropdownMenu.Separator>): import("react").JSX.Element;
+export declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export interface DropdownMenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+  icon?: ReactNode;
+}
+export declare function DropdownMenuSubTrigger({ icon, className, children, ...props }: DropdownMenuSubTriggerProps): import("react").JSX.Element;
+export declare function DropdownMenuSubContent({ sideOffset, className, ...props }: ComponentProps<typeof DropdownMenu.SubContent>): import("react").JSX.Element;
+//#endregion
+export { DropdownMenu$1 as DropdownMenu };

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,160 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { dropdownMenuStyles } from "./dropdown-menu.styles.js";
+import { DropdownMenu } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/dropdown-menu/dropdown-menu.tsx
+function useParts(tone, inset) {
+	const [, slots] = useComponentConfig("DropdownMenu", {});
+	return {
+		s: dropdownMenuStyles({
+			tone,
+			inset
+		}),
+		slots
+	};
+}
+const svg = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const DotIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "4",
+		fill: "currentColor"
+	})
+});
+const ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	...svg,
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+/** A menu of actions opened from a button: row actions, account menus, "more" buttons. */
+const DropdownMenu$1 = DropdownMenu.Root;
+const DropdownMenuTrigger = DropdownMenu.Trigger;
+const DropdownMenuGroup = DropdownMenu.Group;
+const DropdownMenuRadioGroup = DropdownMenu.RadioGroup;
+const DropdownMenuSub = DropdownMenu.Sub;
+function DropdownMenuContent(inProps) {
+	const [props, slots] = useComponentConfig("DropdownMenu", inProps);
+	const { sideOffset = 6, align = "start", className, ...rest } = props;
+	const s = dropdownMenuStyles();
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		align,
+		className: s.content({ class: [slots.content, className] }),
+		...rest
+	}) });
+}
+function DropdownMenuItem({ icon, shortcut, tone, inset, className, children, ...props }) {
+	const { s, slots } = useParts(tone, inset);
+	return /* @__PURE__ */ jsxs(DropdownMenu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-tone": tone ?? "default",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			children,
+			shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: shortcut })
+		]
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	const { s, slots } = useParts(void 0, true);
+	return /* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	const { s, slots } = useParts(void 0, true);
+	return /* @__PURE__ */ jsxs(DropdownMenu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(DotIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuLabel({ inset, className, ...props }) {
+	const { s, slots } = useParts(void 0, inset);
+	return /* @__PURE__ */ jsx(DropdownMenu.Label, {
+		"data-slot": "dropdown-menu-label",
+		className: s.label({ class: [slots.label, className] }),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(DropdownMenu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: s.separator({ class: [slots.separator, className] }),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: s.shortcut({ class: [slots.shortcut, className] }),
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ icon, className, children, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		className: s.subTrigger({ class: [slots.subTrigger, className] }),
+		...props,
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: s.icon({ class: slots.icon }),
+				"aria-hidden": "true",
+				children: icon
+			}),
+			children,
+			/* @__PURE__ */ jsx("span", {
+				className: "ml-auto flex text-faint-foreground",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})
+		]
+	});
+}
+function DropdownMenuSubContent({ sideOffset = 4, className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		sideOffset,
+		className: s.subContent({ class: [slots.subContent, className] }),
+		...props
+	}) });
+}
+//#endregion
+export { DropdownMenu$1 as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/dropdown-menu/dropdown-menu.styles.d.ts

@@ -0,0 +1,83 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/dropdown-menu/dropdown-menu.styles.d.ts
+export declare const dropdownMenuStyles: import("tailwind-variants").TVReturnType<{
+  tone: {
+    default: {};
+    danger: {
+      item: string;
+      icon: string;
+    };
+  };
+  inset: {
+    true: {
+      item: string;
+      label: string;
+    };
+  };
+}, {
+  content: string[];
+  item: string[];
+  icon: string;
+  indicator: string;
+  label: string;
+  separator: string;
+  shortcut: string;
+  subTrigger: string[];
+  subContent: string[];
+}, undefined, {
+  tone: {
+    default: {};
+    danger: {
+      item: string;
+      icon: string;
+    };
+  };
+  inset: {
+    true: {
+      item: string;
+      label: string;
+    };
+  };
+}, {
+  content: string[];
+  item: string[];
+  icon: string;
+  indicator: string;
+  label: string;
+  separator: string;
+  shortcut: string;
+  subTrigger: string[];
+  subContent: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    default: {};
+    danger: {
+      item: string;
+      icon: string;
+    };
+  };
+  inset: {
+    true: {
+      item: string;
+      label: string;
+    };
+  };
+}, {
+  content: string[];
+  item: string[];
+  icon: string;
+  indicator: string;
+  label: string;
+  separator: string;
+  shortcut: string;
+  subTrigger: string[];
+  subContent: string[];
+}>>;
+export type DropdownMenuVariants = VariantProps<typeof dropdownMenuStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DropdownMenu: StylesEntry<typeof dropdownMenuStyles>;
+  }
+}
+//#endregion

package/dist/components/dropdown-menu/dropdown-menu.styles.js

@@ -0,0 +1,38 @@
+"use client";
+import { popover } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/dropdown-menu/dropdown-menu.styles.ts
+const item = [
+	"relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-sm px-2 text-small text-foreground outline-none",
+	"data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50",
+	"[&_svg]:size-4 [&_svg]:shrink-0"
+];
+const dropdownMenuStyles = /* @__PURE__ */ tv({
+	slots: {
+		content: [popover, "origin-(--radix-dropdown-menu-content-transform-origin) min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1"],
+		item,
+		icon: "flex size-4 shrink-0 items-center justify-center text-muted-foreground",
+		indicator: "absolute left-2 flex size-4 items-center justify-center text-primary",
+		label: "px-2 pt-1.5 pb-1 text-caption font-medium text-faint-foreground",
+		separator: "-mx-1 my-1 h-px bg-border",
+		shortcut: "ml-auto pl-4 font-mono text-caption tracking-wider text-faint-foreground",
+		subTrigger: [...item, "data-[state=open]:bg-muted"],
+		subContent: [popover, "origin-(--radix-dropdown-menu-content-transform-origin) min-w-40 p-1"]
+	},
+	variants: {
+		tone: {
+			default: {},
+			danger: {
+				item: "text-danger-text data-highlighted:bg-danger/10",
+				icon: "text-danger-text"
+			}
+		},
+		inset: { true: {
+			item: "pl-8",
+			label: "pl-8"
+		} }
+	},
+	defaultVariants: { tone: "default" }
+});
+//#endregion
+export { dropdownMenuStyles };

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,3 @@
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { DropdownMenuVariants, dropdownMenuStyles } from "./dropdown-menu.styles.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuVariants, dropdownMenuStyles };

package/dist/components/eyebrow/eyebrow.d.ts

@@ -0,0 +1,9 @@
+import { EyebrowVariants } from "./eyebrow.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/eyebrow/eyebrow.d.ts
+export interface EyebrowProps extends ComponentProps<'p'>, EyebrowVariants {
+  asChild?: boolean;
+}
+/** Small uppercase label that sits above a heading. */
+export declare function Eyebrow(inProps: EyebrowProps): import("react").JSX.Element;
+//#endregion

package/dist/components/eyebrow/eyebrow.js

@@ -0,0 +1,20 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { eyebrowStyles } from "./eyebrow.styles.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/eyebrow/eyebrow.tsx
+/** Small uppercase label that sits above a heading. */
+function Eyebrow(inProps) {
+	const [props, slots] = useComponentConfig("Eyebrow", inProps);
+	const { tone, asChild, className, ...rest } = props;
+	const s = eyebrowStyles({ tone });
+	const Comp = asChild ? Slot.Root : "p";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "eyebrow",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Eyebrow };

package/dist/components/eyebrow/eyebrow.styles.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/eyebrow/eyebrow.styles.d.ts
+export declare const eyebrowStyles: import("tailwind-variants").TVReturnType<{
+  tone: {
+    muted: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, undefined, {
+  tone: {
+    muted: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    muted: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+}>>;
+export type EyebrowVariants = VariantProps<typeof eyebrowStyles>;
+//#endregion

package/dist/components/eyebrow/eyebrow.styles.js

@@ -0,0 +1,13 @@
+"use client";
+import { tv } from "../../utils/tv.js";
+//#region src/components/eyebrow/eyebrow.styles.ts
+const eyebrowStyles = /* @__PURE__ */ tv({
+	slots: { base: "font-mono text-caption uppercase tracking-[0.12em]" },
+	variants: { tone: {
+		muted: { base: "text-muted-foreground" },
+		primary: { base: "text-primary-text" }
+	} },
+	defaultVariants: { tone: "muted" }
+});
+//#endregion
+export { eyebrowStyles };

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

@@ -0,0 +1,3 @@
+import { EyebrowVariants, eyebrowStyles } from "./eyebrow.styles.js";
+import { Eyebrow, EyebrowProps } from "./eyebrow.js";
+export { Eyebrow, type EyebrowProps, type EyebrowVariants, eyebrowStyles };