@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/blockquote/blockquote.d.ts

@@ -0,0 +1,72 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/blockquote/blockquote.d.ts
+export declare const blockquoteStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      quote: string;
+    };
+    md: {
+      quote: string;
+    };
+    lg: {
+      quote: string;
+    };
+  };
+}, {
+  root: string;
+  quote: string;
+  caption: string;
+  author: string;
+}, undefined, {
+  size: {
+    sm: {
+      quote: string;
+    };
+    md: {
+      quote: string;
+    };
+    lg: {
+      quote: string;
+    };
+  };
+}, {
+  root: string;
+  quote: string;
+  caption: string;
+  author: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      quote: string;
+    };
+    md: {
+      quote: string;
+    };
+    lg: {
+      quote: string;
+    };
+  };
+}, {
+  root: string;
+  quote: string;
+  caption: string;
+  author: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Blockquote: StylesEntry<typeof blockquoteStyles>;
+  }
+}
+export interface BlockquoteProps extends ComponentProps<'figure'>, VariantProps<typeof blockquoteStyles> {
+  /** Who said it. */
+  author?: ReactNode;
+  /** Their role or the work it's from, shown after the author. */
+  source?: ReactNode;
+  /** URL of the quoted source, set as the `cite` attribute. */
+  citeUrl?: string;
+}
+/** A quotation with an optional attribution. */
+export declare function Blockquote(inProps: BlockquoteProps): import("react").JSX.Element;
+//#endregion

package/dist/components/blockquote/blockquote.js

@@ -0,0 +1,47 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/blockquote/blockquote.tsx
+const blockquoteStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "grid gap-3 border-l-2 border-primary pl-5",
+		quote: "font-display text-pretty text-foreground",
+		caption: "text-small text-muted-foreground",
+		author: "font-medium text-foreground not-italic"
+	},
+	variants: { size: {
+		sm: { quote: "text-body" },
+		md: { quote: "text-lead" },
+		lg: { quote: "text-h3" }
+	} },
+	defaultVariants: { size: "md" }
+});
+/** A quotation with an optional attribution. */
+function Blockquote(inProps) {
+	const [props, slots] = useComponentConfig("Blockquote", inProps);
+	const { author, source, citeUrl, size, className, children, ...rest } = props;
+	const s = blockquoteStyles({ size });
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "blockquote",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsx("blockquote", {
+			cite: citeUrl,
+			className: s.quote({ class: slots.quote }),
+			children
+		}), (author || source) && /* @__PURE__ */ jsxs("figcaption", {
+			className: s.caption({ class: slots.caption }),
+			children: [
+				author && /* @__PURE__ */ jsx("cite", {
+					className: s.author({ class: slots.author }),
+					children: author
+				}),
+				author && source && ", ",
+				source
+			]
+		})]
+	});
+}
+//#endregion
+export { Blockquote, blockquoteStyles };

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

@@ -0,0 +1,2 @@
+import { Blockquote, BlockquoteProps, blockquoteStyles } from "./blockquote.js";
+export { Blockquote, type BlockquoteProps, blockquoteStyles };

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/breadcrumb/breadcrumb.d.ts
+export interface BreadcrumbItemData {
+  label: ReactNode;
+  /** Omit for the current page (normally the last item). */
+  href?: string;
+}
+export interface BreadcrumbProps extends ComponentProps<'nav'> {
+  /** Data-driven trail. The last item is the current page. Omit to compose the parts yourself. */
+  items?: readonly BreadcrumbItemData[];
+  /** Custom separator between items. A chevron by default. */
+  separator?: ReactNode;
+}
+/** Shows where the current page sits in the hierarchy. */
+export declare function Breadcrumb({ items, separator, className, children, ...props }: BreadcrumbProps): import("react").JSX.Element;
+export declare function BreadcrumbList({ className, ...props }: ComponentProps<'ol'>): import("react").JSX.Element;
+export declare function BreadcrumbItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+export interface BreadcrumbLinkProps {
+  href: string;
+  className?: string;
+  children?: ReactNode;
+  /** Render your own element (e.g. a router link) with breadcrumb link styles. */
+  asChild?: boolean;
+}
+export declare function BreadcrumbLink({ href, className, children, asChild }: BreadcrumbLinkProps): import("react").JSX.Element;
+export declare function BreadcrumbPage({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export declare function BreadcrumbSeparator({ className, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,85 @@
+"use client";
+import { useLinkComponent } from "../../provider/glyph-context.js";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { ChevronRightIcon } from "../../internal/icons.js";
+import { breadcrumbStyles } from "./breadcrumb.styles.js";
+import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/breadcrumb/breadcrumb.tsx
+const s = breadcrumbStyles();
+function useSlots() {
+	return useComponentConfig("Breadcrumb", {})[1];
+}
+/** Shows where the current page sits in the hierarchy. */
+function Breadcrumb({ items, separator, className, children, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Breadcrumb",
+		"data-slot": "breadcrumb",
+		className: s.root({ class: [slots.root, className] }),
+		...props,
+		children: items ? /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => {
+			const last = index === items.length - 1;
+			return /* @__PURE__ */ jsxs(BreadcrumbItem, { children: [last || !item.href ? /* @__PURE__ */ jsx(BreadcrumbPage, {
+				"aria-current": last ? "page" : void 0,
+				children: item.label
+			}) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+				href: item.href,
+				children: item.label
+			}), !last && /* @__PURE__ */ jsx(BreadcrumbSeparator, { children: separator })] }, index);
+		}) }) : children
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: s.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props
+	});
+}
+function BreadcrumbLink({ href, className, children, asChild }) {
+	const Link = useLinkComponent();
+	const slots = useSlots();
+	const classes = s.link({ class: [slots.link, className] });
+	if (asChild) return /* @__PURE__ */ jsx(Slot.Root, {
+		"data-slot": "breadcrumb-link",
+		className: classes,
+		children
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		href,
+		className: classes,
+		children
+	});
+}
+function BreadcrumbPage({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		"aria-current": "page",
+		className: s.page({ class: [slots.page, className] }),
+		...props
+	});
+}
+function BreadcrumbSeparator({ className, children, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: s.separator({ class: [slots.separator, className] }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+	});
+}
+//#endregion
+export { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

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

@@ -0,0 +1,63 @@
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/breadcrumb/breadcrumb.styles.d.ts
+export declare const breadcrumbStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      link?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      page?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      link?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      page?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  list: string;
+  item: string;
+  link: string[];
+  page: string;
+  separator: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      link?: import("tailwind-variants").ClassValue;
+      item?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      page?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  list: string;
+  item: string;
+  link: string[];
+  page: string;
+  separator: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  list: string;
+  item: string;
+  link: string[];
+  page: string;
+  separator: string;
+}>>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Breadcrumb: StylesEntry<typeof breadcrumbStyles>;
+  }
+}
+//#endregion

package/dist/components/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,18 @@
+"use client";
+import { focusRing, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/breadcrumb/breadcrumb.styles.ts
+const breadcrumbStyles = /* @__PURE__ */ tv({ slots: {
+	root: "min-w-0",
+	list: "flex flex-wrap items-center gap-1.5 text-small text-muted-foreground",
+	item: "inline-flex min-w-0 items-center gap-1.5",
+	link: [
+		"truncate rounded-xs hover:text-foreground",
+		transition,
+		focusRing
+	],
+	page: "truncate font-medium text-foreground",
+	separator: "flex items-center text-faint-foreground [&>svg]:size-3.5"
+} });
+//#endregion
+export { breadcrumbStyles };

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

@@ -0,0 +1,3 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbItemData, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbProps, BreadcrumbSeparator } from "./breadcrumb.js";
+import { breadcrumbStyles } from "./breadcrumb.styles.js";
+export { Breadcrumb, BreadcrumbItem, type BreadcrumbItemData, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, breadcrumbStyles };

package/dist/components/button/button.d.ts

@@ -0,0 +1,20 @@
+import { ButtonVariants } from "./button.styles.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/button/button.d.ts
+export interface ButtonProps extends ComponentProps<'button'>, ButtonVariants {
+  /** Render the child element (e.g. a router link) with button styles instead of a `<button>`. */
+  asChild?: boolean;
+  /** Shows a spinner, disables the button and sets `aria-busy`. */
+  loading?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+}
+export declare function Button(inProps: ButtonProps): import("react").JSX.Element;
+export interface IconButtonProps extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'iconOnly' | 'fullWidth' | 'children'> {
+  icon: ReactNode;
+  /** Required: an icon-only button has no visible text. */
+  'aria-label': string;
+}
+/** A square button holding one icon. Shares Button's variants and theme overrides. */
+export declare function IconButton({ icon, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/button/button.js

@@ -0,0 +1,52 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { Spinner } from "../spinner/spinner.js";
+import { buttonStyles } from "./button.styles.js";
+import { Slot } from "radix-ui";
+import { Fragment } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button/button.tsx
+function Button(inProps) {
+	const [props, slots] = useComponentConfig("Button", inProps);
+	const { variant, size, iconOnly, fullWidth, asChild = false, loading = false, leftIcon, rightIcon, disabled, type, className, children, ...rest } = props;
+	const s = buttonStyles({
+		variant,
+		size,
+		iconOnly,
+		fullWidth
+	});
+	const Comp = asChild ? Slot.Root : "button";
+	const icon = (node) => node ? /* @__PURE__ */ jsx("span", {
+		"data-slot": "button-icon",
+		className: s.icon({ class: slots.icon }),
+		"aria-hidden": "true",
+		children: node
+	}) : null;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "button",
+		"data-variant": variant ?? "primary",
+		className: s.base({ class: [slots.base, className] }),
+		"aria-busy": loading || void 0,
+		...!asChild && {
+			type: type ?? "button",
+			disabled: disabled || loading
+		},
+		...rest,
+		children: iconOnly && asChild ? children : iconOnly ? icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : children) : [
+			/* @__PURE__ */ jsx(Fragment, { children: icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : leftIcon) }, "start"),
+			/* @__PURE__ */ jsx(Slot.Slottable, { children }, "content"),
+			/* @__PURE__ */ jsx(Fragment, { children: icon(rightIcon) }, "end")
+		]
+	});
+}
+/** A square button holding one icon. Shares Button's variants and theme overrides. */
+function IconButton({ icon, variant = "ghost", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		...props,
+		iconOnly: true,
+		children: icon
+	});
+}
+//#endregion
+export { Button, IconButton };

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

@@ -0,0 +1,146 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/button/button.styles.d.ts
+export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    primary: {
+      base: string;
+    };
+    secondary: {
+      base: string;
+    };
+    outline: {
+      base: string;
+    };
+    ghost: {
+      base: string;
+    };
+    danger: {
+      base: string;
+    };
+    link: {
+      base: string;
+    };
+  };
+  size: {
+    sm: {
+      base: string;
+      icon: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+      icon: string;
+    };
+  };
+  iconOnly: {
+    true: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  icon: string;
+}, undefined, {
+  variant: {
+    primary: {
+      base: string;
+    };
+    secondary: {
+      base: string;
+    };
+    outline: {
+      base: string;
+    };
+    ghost: {
+      base: string;
+    };
+    danger: {
+      base: string;
+    };
+    link: {
+      base: string;
+    };
+  };
+  size: {
+    sm: {
+      base: string;
+      icon: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+      icon: string;
+    };
+  };
+  iconOnly: {
+    true: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    primary: {
+      base: string;
+    };
+    secondary: {
+      base: string;
+    };
+    outline: {
+      base: string;
+    };
+    ghost: {
+      base: string;
+    };
+    danger: {
+      base: string;
+    };
+    link: {
+      base: string;
+    };
+  };
+  size: {
+    sm: {
+      base: string;
+      icon: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+      icon: string;
+    };
+  };
+  iconOnly: {
+    true: {
+      base: string;
+    };
+  };
+  fullWidth: {
+    true: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  icon: string;
+}>>;
+export type ButtonVariants = VariantProps<typeof buttonStyles>;
+//#endregion

package/dist/components/button/button.styles.js

@@ -0,0 +1,64 @@
+"use client";
+import { focusRing, themedBorder, transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/button/button.styles.ts
+const buttonStyles = /* @__PURE__ */ tv({
+	slots: {
+		base: [
+			"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap",
+			"rounded-md border-transparent font-medium",
+			themedBorder,
+			transition,
+			focusRing,
+			"disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress",
+			"active:scale-[0.98] motion-expressive:active:scale-[0.95]"
+		],
+		icon: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-full"
+	},
+	variants: {
+		variant: {
+			primary: { base: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/88" },
+			secondary: { base: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/88" },
+			outline: { base: "border-border bg-surface text-foreground shadow-xs hover:border-border-strong hover:bg-muted" },
+			ghost: { base: "text-muted-foreground hover:bg-muted hover:text-foreground" },
+			danger: { base: "bg-danger text-danger-foreground shadow-sm hover:bg-danger/88" },
+			link: { base: "h-auto px-0 text-primary-text underline-offset-4 shadow-none hover:underline active:scale-100 motion-expressive:active:scale-100" }
+		},
+		size: {
+			sm: {
+				base: "h-(--glyph-control-sm) px-3 text-small",
+				icon: "size-3.5"
+			},
+			md: { base: "h-(--glyph-control-md) px-4 text-small" },
+			lg: {
+				base: "h-(--glyph-control-lg) px-5 text-body",
+				icon: "size-[1.125rem]"
+			}
+		},
+		iconOnly: { true: { base: "px-0" } },
+		fullWidth: { true: { base: "w-full" } }
+	},
+	compoundVariants: [
+		{
+			iconOnly: true,
+			size: "sm",
+			class: { base: "w-(--glyph-control-sm)" }
+		},
+		{
+			iconOnly: true,
+			size: "md",
+			class: { base: "w-(--glyph-control-md)" }
+		},
+		{
+			iconOnly: true,
+			size: "lg",
+			class: { base: "w-(--glyph-control-lg)" }
+		}
+	],
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+//#endregion
+export { buttonStyles };

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

@@ -0,0 +1,3 @@
+import { ButtonVariants, buttonStyles } from "./button.styles.js";
+import { Button, ButtonProps, IconButton, IconButtonProps } from "./button.js";
+export { Button, type ButtonProps, type ButtonVariants, IconButton, type IconButtonProps, buttonStyles };

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,9 @@
+import { DayPickerProps } from "react-day-picker";
+//#region src/components/calendar/calendar.d.ts
+export type CalendarProps = DayPickerProps;
+/**
+ * A month grid for picking dates, built on react-day-picker and styled by the theme.
+ * Supports `mode="single" | "multiple" | "range"`, disabled dates and several months.
+ */
+export declare function Calendar(inProps: CalendarProps): import("react").JSX.Element;
+//#endregion