@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/input-otp/index.js

@@ -0,0 +1,5 @@
+"use client";
+import { inputOtpStyles } from "./input-otp.styles.js";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "./input-otp.js";
+import { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, inputOtpStyles };

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

@@ -0,0 +1,23 @@
+import { InputOTPVariants } from "./input-otp.styles.js";
+import { ComponentProps, ReactNode } from "react";
+import { OTPInputProps } from "input-otp";
+//#region src/components/input-otp/input-otp.d.ts
+export type InputOTPProps = Omit<OTPInputProps, 'render' | 'children' | 'maxLength'> & InputOTPVariants & {
+  /** Number of characters. Default 6. */
+  length?: number;
+  /** Custom slot layout (InputOTPGroup, InputOTPSlot, InputOTPSeparator). Defaults to one group of `length` slots. */
+  children?: ReactNode;
+};
+/**
+ * One-time code input: one box per character, paste support, and autofill from SMS on
+ * mobile. Built on input-otp. Restrict characters with `pattern`, e.g. `REGEXP_ONLY_DIGITS`.
+ */
+export declare function InputOTP(inProps: InputOTPProps): import("react").JSX.Element;
+export declare function InputOTPGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export interface InputOTPSlotProps extends ComponentProps<'div'> {
+  /** Position of the character this box shows, starting at 0. */
+  index: number;
+}
+export declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): import("react").JSX.Element;
+export declare function InputOTPSeparator({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion

package/dist/components/input-otp/input-otp.js

@@ -0,0 +1,86 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useFieldControl } from "../field/field-context.js";
+import { inputOtpStyles } from "./input-otp.styles.js";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, OTPInputContext } from "input-otp";
+//#region src/components/input-otp/input-otp.tsx
+const PartsContext = createContext(null);
+function useParts() {
+	return useContext(PartsContext) ?? {
+		s: inputOtpStyles(),
+		slots: {},
+		invalid: false
+	};
+}
+/**
+* One-time code input: one box per character, paste support, and autofill from SMS on
+* mobile. Built on input-otp. Restrict characters with `pattern`, e.g. `REGEXP_ONLY_DIGITS`.
+*/
+function InputOTP(inProps) {
+	const [props, slots] = useComponentConfig("InputOTP", useFieldControl(inProps));
+	const { length = 6, size, children, className, containerClassName, ...rest } = props;
+	const s = inputOtpStyles({ size });
+	const invalid = rest["aria-invalid"] === true || rest["aria-invalid"] === "true";
+	return /* @__PURE__ */ jsx(PartsContext.Provider, {
+		value: {
+			s,
+			slots,
+			invalid
+		},
+		children: /* @__PURE__ */ jsx(OTPInput, {
+			"data-slot": "input-otp",
+			maxLength: length,
+			autoComplete: "one-time-code",
+			inputMode: "numeric",
+			containerClassName: s.root({ class: [slots.root, containerClassName] }),
+			className: s.input({ class: [slots.input, className] }),
+			...rest,
+			children: children ?? /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(InputOTPSlot, { index }, index)) })
+		})
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: s.group({ class: [slots.group, className] }),
+		...props
+	});
+}
+function InputOTPSlot({ index, className, ...props }) {
+	const { s, slots, invalid } = useParts();
+	const slot = useContext(OTPInputContext).slots[index];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": slot?.isActive ?? false,
+		"aria-invalid": invalid || void 0,
+		className: s.slot({ class: [slots.slot, className] }),
+		...props,
+		children: [slot?.char ?? slot?.placeholderChar, slot?.hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: s.caret({ class: slots.caret }),
+			children: /* @__PURE__ */ jsx("div", { className: s.caretBar({ class: slots.caretBar }) })
+		})]
+	});
+}
+function InputOTPSeparator({ className, ...props }) {
+	const { s, slots } = useParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		"aria-hidden": "true",
+		className: s.separator({ class: [slots.separator, className] }),
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M6 12h12" })
+		})
+	});
+}
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp/input-otp.styles.d.ts

@@ -0,0 +1,71 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/input-otp/input-otp.styles.d.ts
+export declare const inputOtpStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      slot: string;
+    };
+    md: {
+      slot: string;
+    };
+    lg: {
+      slot: string;
+    };
+  };
+}, {
+  root: string;
+  input: string;
+  group: string;
+  slot: string[];
+  caret: string;
+  caretBar: string;
+  separator: string;
+}, undefined, {
+  size: {
+    sm: {
+      slot: string;
+    };
+    md: {
+      slot: string;
+    };
+    lg: {
+      slot: string;
+    };
+  };
+}, {
+  root: string;
+  input: string;
+  group: string;
+  slot: string[];
+  caret: string;
+  caretBar: string;
+  separator: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: {
+    sm: {
+      slot: string;
+    };
+    md: {
+      slot: string;
+    };
+    lg: {
+      slot: string;
+    };
+  };
+}, {
+  root: string;
+  input: string;
+  group: string;
+  slot: string[];
+  caret: string;
+  caretBar: string;
+  separator: string;
+}>>;
+export type InputOTPVariants = VariantProps<typeof inputOtpStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    InputOTP: StylesEntry<typeof inputOtpStyles>;
+  }
+}
+//#endregion

package/dist/components/input-otp/input-otp.styles.js

@@ -0,0 +1,30 @@
+"use client";
+import { transition } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/input-otp/input-otp.styles.ts
+const inputOtpStyles = /* @__PURE__ */ tv({
+	slots: {
+		root: "flex items-center gap-2 has-disabled:opacity-50",
+		input: "disabled:cursor-not-allowed",
+		group: "flex items-center",
+		slot: [
+			"relative flex items-center justify-center border-input bg-surface font-medium tabular-nums text-foreground shadow-xs",
+			"border-y-(length:--glyph-border-width) border-r-(length:--glyph-border-width)",
+			"first:rounded-l-md first:border-l-(length:--glyph-border-width) last:rounded-r-md",
+			"data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/20",
+			"aria-invalid:border-danger",
+			transition
+		],
+		caret: "pointer-events-none absolute inset-0 flex items-center justify-center",
+		caretBar: "h-4 w-px animate-pulse bg-foreground",
+		separator: "flex items-center text-faint-foreground [&>svg]:size-4"
+	},
+	variants: { size: {
+		sm: { slot: "size-8 text-small" },
+		md: { slot: "size-10 text-body" },
+		lg: { slot: "size-12 text-h4" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { inputOtpStyles };

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

@@ -0,0 +1,2 @@
+import { Kbd, kbdStyles } from "./kbd.js";
+export { Kbd, kbdStyles };

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps } from "react";
+//#region src/components/kbd/kbd.d.ts
+export declare const kbdStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string;
+}>>;
+/** A keyboard key, e.g. `<Kbd>⌘K</Kbd>`. */
+export declare function Kbd(inProps: ComponentProps<'kbd'>): import("react").JSX.Element;
+//#endregion

package/dist/components/kbd/kbd.js

@@ -0,0 +1,17 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/kbd/kbd.tsx
+const kbdStyles = /* @__PURE__ */ tv({ slots: { base: "inline-flex h-5 min-w-5 items-center justify-center rounded-xs border border-border bg-muted px-1 font-mono text-[0.6875rem] font-medium text-muted-foreground shadow-xs" } });
+/** A keyboard key, e.g. `<Kbd>⌘K</Kbd>`. */
+function Kbd(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Kbd", inProps);
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: kbdStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Kbd, kbdStyles };

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

@@ -0,0 +1,2 @@
+import { Label, labelStyles } from "./label.js";
+export { Label, labelStyles };

package/dist/components/label/label.d.ts

@@ -0,0 +1,31 @@
+import { Label } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/label/label.d.ts
+export declare const labelStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string;
+}>>;
+declare function Label$1(inProps: ComponentProps<typeof Label.Root>): import("react").JSX.Element;
+//#endregion
+export { Label$1 as Label };

package/dist/components/label/label.js

@@ -0,0 +1,17 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { tv } from "../../utils/tv.js";
+import { Label } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/label/label.tsx
+const labelStyles = /* @__PURE__ */ tv({ slots: { base: "inline-flex select-none items-center gap-1 text-small font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-60" } });
+function Label$1(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Label", inProps);
+	return /* @__PURE__ */ jsx(Label.Root, {
+		"data-slot": "label",
+		className: labelStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+export { Label$1 as Label, labelStyles };

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

@@ -0,0 +1,3 @@
+import { LinkVariants, linkStyles } from "./link.styles.js";
+import { Link, LinkProps } from "./link.js";
+export { Link, type LinkProps, type LinkVariants, linkStyles };

package/dist/components/link/link.d.ts

@@ -0,0 +1,14 @@
+import { LinkVariants } from "./link.styles.js";
+import { ComponentProps } from "react";
+//#region src/components/link/link.d.ts
+export interface LinkProps extends Omit<ComponentProps<'a'>, 'href'>, LinkVariants {
+  href: string;
+  /** Opens in a new tab with `rel="noopener noreferrer"`, shows an arrow and announces it. */
+  external?: boolean;
+}
+/**
+ * A text link with an animated underline. Internal links go through the provider's
+ * `linkComponent` (your router); external links render a plain `<a>`.
+ */
+export declare function Link(inProps: LinkProps): import("react").JSX.Element;
+//#endregion

package/dist/components/link/link.js

@@ -0,0 +1,57 @@
+"use client";
+import { useLinkComponent } from "../../provider/glyph-context.js";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { linkStyles } from "./link.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/link/link.tsx
+const ExternalIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M7 7h10v10" })
+});
+/**
+* A text link with an animated underline. Internal links go through the provider's
+* `linkComponent` (your router); external links render a plain `<a>`.
+*/
+function Link(inProps) {
+	const [props, slots] = useComponentConfig("Link", inProps);
+	const { href, external = false, tone, underline, className, children, ...rest } = props;
+	const RouterLink = useLinkComponent();
+	const s = linkStyles({
+		tone,
+		underline
+	});
+	const classes = s.base({ class: [slots.base, className] });
+	if (external) return /* @__PURE__ */ jsxs("a", {
+		"data-slot": "link",
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: classes,
+		...rest,
+		children: [
+			children,
+			/* @__PURE__ */ jsx(ExternalIcon, { className: s.icon({ class: slots.icon }) }),
+			" ",
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "(opens in a new tab)"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(RouterLink, {
+		"data-slot": "link",
+		href,
+		className: classes,
+		...rest,
+		children
+	});
+}
+//#endregion
+export { Link };

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

@@ -0,0 +1,89 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#region src/components/link/link.styles.d.ts
+export declare const linkStyles: import("tailwind-variants").TVReturnType<{
+  tone: {
+    default: {
+      base: string;
+    };
+    muted: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+  };
+  underline: {
+    hover: {
+      base: string;
+    };
+    always: {
+      base: string;
+    };
+    none: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  icon: string;
+}, undefined, {
+  tone: {
+    default: {
+      base: string;
+    };
+    muted: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+  };
+  underline: {
+    hover: {
+      base: string;
+    };
+    always: {
+      base: string;
+    };
+    none: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    default: {
+      base: string;
+    };
+    muted: {
+      base: string;
+    };
+    primary: {
+      base: string;
+    };
+  };
+  underline: {
+    hover: {
+      base: string;
+    };
+    always: {
+      base: string;
+    };
+    none: {
+      base: string;
+    };
+  };
+}, {
+  base: string[];
+  icon: string;
+}>>;
+export type LinkVariants = VariantProps<typeof linkStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Link: StylesEntry<typeof linkStyles>;
+  }
+}
+//#endregion

package/dist/components/link/link.styles.js

@@ -0,0 +1,33 @@
+"use client";
+import { focusRing } from "../../utils/styles.js";
+import { tv } from "../../utils/tv.js";
+//#region src/components/link/link.styles.ts
+const linkStyles = /* @__PURE__ */ tv({
+	slots: {
+		base: [
+			"inline-flex items-baseline gap-1 rounded-xs font-medium",
+			"bg-[linear-gradient(currentColor,currentColor)] bg-[position:0_100%] bg-no-repeat",
+			"transition-[background-size,color] duration-(--glyph-duration-base) ease-standard",
+			focusRing
+		],
+		icon: "size-3 shrink-0 self-center opacity-70"
+	},
+	variants: {
+		tone: {
+			default: { base: "text-foreground" },
+			muted: { base: "text-muted-foreground hover:text-foreground" },
+			primary: { base: "text-primary-text" }
+		},
+		underline: {
+			hover: { base: "bg-[length:0%_1px] hover:bg-[length:100%_1px] focus-visible:bg-[length:100%_1px]" },
+			always: { base: "bg-[length:100%_1px] hover:bg-[length:100%_2px]" },
+			none: { base: "bg-none" }
+		}
+	},
+	defaultVariants: {
+		tone: "primary",
+		underline: "hover"
+	}
+});
+//#endregion
+export { linkStyles };

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

@@ -0,0 +1,3 @@
+import { Modal, ModalClose, ModalProps } from "./modal.js";
+import { modalStyles } from "./modal.styles.js";
+export { Modal, ModalClose, type ModalProps, modalStyles };

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,33 @@
+import { DialogClose, DialogContentProps } from "../dialog/dialog.js";
+import "../dialog/index.js";
+import { FormEvent, ReactNode } from "react";
+//#region src/components/modal/modal.d.ts
+export interface ModalProps extends Omit<DialogContentProps, 'title' | 'children' | 'onSubmit'> {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Heading of the modal. Also its accessible name. */
+  title: ReactNode;
+  description?: ReactNode;
+  /** Element that opens the modal, e.g. a Button. Optional when you control `open`. */
+  trigger?: ReactNode;
+  /** Actions at the bottom. Wrap a button in `ModalClose` to close on click. */
+  footer?: ReactNode;
+  /** Close when the backdrop is clicked. Default true. */
+  closeOnOverlayClick?: boolean;
+  /**
+   * Turns the body and footer into one `<form>`, so a `type="submit"` button in the footer
+   * submits the fields in the body. The page does not reload. With `@glyphui/ui/form`, use
+   * `<Form>` in the body and `<FormSubmit form={form}>` in the footer instead.
+   */
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+  children?: ReactNode;
+}
+/**
+ * The everyday modal in one component: title, description, body and footer as props.
+ * For custom layouts use the Dialog parts; for yes/no decisions use `useConfirm()`.
+ */
+export declare function Modal(inProps: ModalProps): import("react").JSX.Element;
+/** Closes the surrounding Modal. Use with `asChild` around a button. */
+export declare const ModalClose: typeof DialogClose;
+//#endregion

package/dist/components/modal/modal.js

@@ -0,0 +1,56 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../dialog/dialog.js";
+import { modalStyles } from "./modal.styles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/modal/modal.tsx
+/**
+* The everyday modal in one component: title, description, body and footer as props.
+* For custom layouts use the Dialog parts; for yes/no decisions use `useConfirm()`.
+*/
+function Modal(inProps) {
+	const [props, slots] = useComponentConfig("Modal", inProps);
+	const { open, defaultOpen, onOpenChange, title, description, trigger, footer, closeOnOverlayClick = true, onSubmit, onPointerDownOutside, className, children, ...rest } = props;
+	const s = modalStyles();
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [children && /* @__PURE__ */ jsx(DialogBody, {
+		className: s.body({ class: slots.body }),
+		children
+	}), footer && /* @__PURE__ */ jsx(DialogFooter, {
+		className: s.footer({ class: slots.footer }),
+		children: footer
+	})] });
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...open !== void 0 && { open },
+		...defaultOpen !== void 0 && { defaultOpen },
+		...onOpenChange && { onOpenChange },
+		children: [trigger && /* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			"data-slot": "modal",
+			className: s.content({ class: [slots.content, className] }),
+			onPointerDownOutside: (event) => {
+				onPointerDownOutside?.(event);
+				if (!closeOnOverlayClick) event.preventDefault();
+			},
+			...!description && { "aria-describedby": void 0 },
+			...rest,
+			children: [/* @__PURE__ */ jsxs(DialogHeader, {
+				className: s.header({ class: slots.header }),
+				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+			}), onSubmit ? /* @__PURE__ */ jsx("form", {
+				"data-slot": "modal-form",
+				className: s.form({ class: slots.form }),
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(event);
+				},
+				children: content
+			}) : content]
+		})]
+	});
+}
+/** Closes the surrounding Modal. Use with `asChild` around a button. */
+const ModalClose = DialogClose;
+//#endregion
+export { Modal, ModalClose };