@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/primitives/Kbd/Kbd.d.ts

@@ -0,0 +1,81 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+import { Messages } from '../../../i18n/types';
+/** Visual style of a key cap. All variants use verified neutral token pairs. */
+export type KbdVariant = "outline" | "soft" | "solid";
+/** Operating system used to pick key symbols and names. */
+export type KbdPlatform = "mac" | "windows" | "linux";
+/** Separator between keys in a `KbdShortcut`: `"+"` for chords pressed together, `"then"` for sequences. */
+export type KbdSeparator = "+" | "then";
+/**
+ * Platform-aware key tokens understood by `keyName` and `KbdShortcut`.
+ * Any other string is rendered as-is (single letters are uppercased).
+ */
+export type KbdKeyToken = "mod" | "cmd" | "meta" | "ctrl" | "alt" | "option" | "shift" | "enter" | "return" | "esc" | "tab" | "space" | "backspace" | "delete" | "capslock" | "up" | "down" | "left" | "right" | "pageup" | "pagedown" | "home" | "end";
+/** How a key is shown (`symbol`) and announced (`label`). */
+export interface KbdKeyDisplay {
+    /** Visible text or symbol, e.g. `"⌘"` or `"Ctrl"`. */
+    symbol: string;
+    /** Full name announced to assistive tech, e.g. `"Command"`. */
+    label: string;
+}
+/** Spoken key names, from a locale's `kbd.keys` messages. */
+type KeyNames = Messages["kbd"]["keys"];
+/**
+ * Resolves a key token (`"mod"`, `"shift"`, `"up"`, ...) to its visible symbol
+ * and accessible name for a platform. Tokens are case-insensitive. Unknown
+ * strings are returned unchanged, with single letters uppercased.
+ */
+export declare function getKeyDisplay(key: string, platform: KbdPlatform, names?: KeyNames): KbdKeyDisplay;
+/**
+ * Returns the viewer's platform for keyboard labels. Renders `"windows"` on the
+ * server and during hydration, then updates to the detected platform on the
+ * client, so markup never mismatches.
+ */
+export declare function useKbdPlatform(override?: KbdPlatform): KbdPlatform;
+/** Props for `Kbd`. */
+export interface KbdProps extends ComponentPropsWithRef<"kbd"> {
+    /** Key cap size. */
+    size?: Size;
+    /** Visual style. `outline` is a light key with a strong edge, `soft` a tinted key, `solid` a dark key. */
+    variant?: KbdVariant;
+    /**
+     * A platform-aware key token (`"mod"`, `"shift"`, `"enter"`, `"up"`, ...).
+     * When set, the key shows the platform symbol and screen readers hear the
+     * full name (e.g. "Command" instead of "place of interest sign"). Takes
+     * precedence over `children`. Unknown strings render as-is.
+     */
+    keyName?: KbdKeyToken | (string & {});
+    /** Force a platform instead of detecting it. Only affects `keyName`. */
+    platform?: KbdPlatform;
+    /** Key label. Use `keyName` instead for modifier and special keys. */
+    children?: ReactNode;
+}
+/**
+ * A single keyboard key, rendered as a native `<kbd>` styled like a physical
+ * key cap. Labels use the display font (`--font-display`) for the brand's
+ * bold, athletic look; tabular numerals keep digits aligned.
+ */
+export declare function Kbd({ size, variant, keyName, platform, className, children, ...rest }: KbdProps): import("react").JSX.Element;
+/** Props for `KbdShortcut`. */
+export interface KbdShortcutProps extends Omit<ComponentPropsWithRef<"kbd">, "children"> {
+    /** Keys in order. Accepts platform tokens (`"mod"`, `"alt"`, `"shift"`, `"enter"`, arrows, ...) or literal labels (`"K"`, `"/"`). */
+    keys: Array<KbdKeyToken | (string & {})>;
+    /** `"+"` for keys pressed together (default), `"then"` for a sequence pressed one after another. */
+    separator?: KbdSeparator;
+    /** Word shown between keys when `separator="then"`. Override to localize. */
+    thenLabel?: string;
+    /** Key cap size, applied to every key. */
+    size?: Size;
+    /** Visual style, applied to every key. */
+    variant?: KbdVariant;
+    /** Force a platform instead of detecting it. */
+    platform?: KbdPlatform;
+}
+/**
+ * A key combination or sequence. Follows the HTML spec pattern for key
+ * combos: an outer `<kbd>` wrapping one nested `<kbd>` per key, with the
+ * separator as text between them (read as "plus" or "then").
+ */
+export declare function KbdShortcut({ keys, separator, thenLabel: thenLabelProp, size, variant, platform, className, ...rest }: KbdShortcutProps): import("react").JSX.Element;
+export {};

package/dist/components/primitives/Kbd/Kbd.mjs

@@ -0,0 +1,175 @@
+import { en as e } from "../../../i18n/en.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import i from "./Kbd.module.css.mjs";
+import { Fragment as a, useSyncExternalStore as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/primitives/Kbd/Kbd.tsx
+var u = (e, t) => ({
+	symbol: e,
+	name: t
+}), d = {
+	mod: {
+		mac: u("⌘", "command"),
+		other: u("Ctrl", "control")
+	},
+	cmd: {
+		mac: u("⌘", "command"),
+		other: u("Win", "windows")
+	},
+	meta: {
+		mac: u("⌘", "command"),
+		other: u("Win", "windows"),
+		linux: u("Super", "super")
+	},
+	ctrl: {
+		mac: u("⌃", "control"),
+		other: u("Ctrl", "control")
+	},
+	alt: {
+		mac: u("⌥", "option"),
+		other: u("Alt", "alt")
+	},
+	option: {
+		mac: u("⌥", "option"),
+		other: u("Alt", "alt")
+	},
+	shift: {
+		mac: u("⇧", "shift"),
+		other: u("Shift", "shift")
+	},
+	enter: {
+		mac: u("↩", "return"),
+		other: u("Enter", "enter")
+	},
+	return: {
+		mac: u("↩", "return"),
+		other: u("Enter", "enter")
+	},
+	esc: {
+		mac: u("esc", "escape"),
+		other: u("Esc", "escape")
+	},
+	tab: {
+		mac: u("⇥", "tab"),
+		other: u("Tab", "tab")
+	},
+	space: {
+		mac: u("Space", "space"),
+		other: u("Space", "space")
+	},
+	backspace: {
+		mac: u("⌫", "delete"),
+		other: u("Backspace", "backspace")
+	},
+	delete: {
+		mac: u("⌦", "forwardDelete"),
+		other: u("Del", "delete")
+	},
+	capslock: {
+		mac: u("⇪", "capsLock"),
+		other: u("Caps Lock", "capsLock")
+	},
+	up: {
+		mac: u("↑", "up"),
+		other: u("↑", "up")
+	},
+	down: {
+		mac: u("↓", "down"),
+		other: u("↓", "down")
+	},
+	left: {
+		mac: u("←", "left"),
+		other: u("←", "left")
+	},
+	right: {
+		mac: u("→", "right"),
+		other: u("→", "right")
+	},
+	pageup: {
+		mac: u("⇞", "pageUp"),
+		other: u("PgUp", "pageUp")
+	},
+	pagedown: {
+		mac: u("⇟", "pageDown"),
+		other: u("PgDn", "pageDown")
+	},
+	home: {
+		mac: u("↖", "home"),
+		other: u("Home", "home")
+	},
+	end: {
+		mac: u("↘", "end"),
+		other: u("End", "end")
+	}
+}, f = (e) => Object.prototype.hasOwnProperty.call(d, e);
+function p(t, n, r = e.kbd.keys) {
+	let i = t.toLowerCase();
+	if (f(i)) {
+		let e = d[i], t = n === "mac" ? e.mac : n === "linux" && e.linux ? e.linux : e.other;
+		return {
+			symbol: t.symbol,
+			label: r[t.name]
+		};
+	}
+	let a = t.length === 1 ? t.toUpperCase() : t;
+	return {
+		symbol: a,
+		label: a
+	};
+}
+var m = "windows";
+function h() {
+	if (typeof navigator > "u") return m;
+	let e = navigator, t = e.userAgentData?.platform || e.platform || e.userAgent || "";
+	return /mac|iphone|ipad|ipod/i.test(t) ? "mac" : /linux|cros|x11/i.test(t) && !/android/i.test(t) ? "linux" : "windows";
+}
+var g = () => () => {};
+function _(e) {
+	let t = o(g, h, () => m);
+	return e ?? t;
+}
+var v = {
+	sm: i.sm,
+	md: i.md,
+	lg: i.lg
+}, y = {
+	outline: i.outline,
+	soft: i.soft,
+	solid: i.solid
+};
+function b({ display: e }) {
+	return e.symbol === e.label ? /* @__PURE__ */ c(s, { children: e.symbol }) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+		"aria-hidden": "true",
+		title: e.label,
+		className: i.symbol,
+		children: e.symbol
+	}), /* @__PURE__ */ c(r, { children: e.label })] });
+}
+function x({ size: e = "md", variant: r = "outline", keyName: a, platform: o, className: s, children: l, ...u }) {
+	let d = t(), f = _(o);
+	return /* @__PURE__ */ c("kbd", {
+		...u,
+		className: n(i.key, v[e], y[r], s),
+		children: a === void 0 ? l : /* @__PURE__ */ c(b, { display: p(a, f, d.kbd.keys) })
+	});
+}
+function S({ keys: e, separator: r = "+", thenLabel: o, size: s = "md", variant: u = "outline", platform: d, className: f, ...p }) {
+	let m = t(), h = o ?? m.kbd.then, g = _(d), y = r === "then";
+	return /* @__PURE__ */ c("kbd", {
+		...p,
+		className: n(i.combo, v[s], y && i.sequence, f),
+		children: e.map((e, t) => /* @__PURE__ */ l(a, { children: [t > 0 && /* @__PURE__ */ c("span", {
+			className: i.separator,
+			children: y ? ` ${h} ` : "+"
+		}), /* @__PURE__ */ c(x, {
+			size: s,
+			variant: u,
+			keyName: e,
+			platform: g
+		})] }, `${t}-${e}`))
+	});
+}
+//#endregion
+export { x as Kbd, S as KbdShortcut, p as getKeyDisplay, _ as useKbdPlatform };

package/dist/components/primitives/Kbd/Kbd.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_key_dcs0k_31`,t=`_symbol_dcs0k_85`,n=`_sm_dcs0k_97`,r=`_md_dcs0k_111`,i=`_lg_dcs0k_125`,a=`_outline_dcs0k_145`,o=`_soft_dcs0k_159`,s=`_solid_dcs0k_173`,c=`_combo_dcs0k_95`,l=`_separator_dcs0k_217`,u=`_sequence_dcs0k_225`,d={key:e,symbol:t,sm:n,md:r,lg:i,outline:a,soft:o,solid:s,combo:c,separator:l,sequence:u};exports.combo=c,exports.default=d,exports.key=e,exports.lg=i,exports.md=r,exports.outline=a,exports.separator=l,exports.sequence=u,exports.sm=n,exports.soft=o,exports.solid=s,exports.symbol=t;

package/dist/components/primitives/Kbd/Kbd.module.css.mjs

@@ -0,0 +1,16 @@
+//#region src/components/primitives/Kbd/Kbd.module.css
+var e = "_key_dcs0k_31", t = "_symbol_dcs0k_85", n = "_sm_dcs0k_97", r = "_md_dcs0k_111", i = "_lg_dcs0k_125", a = "_outline_dcs0k_145", o = "_soft_dcs0k_159", s = "_solid_dcs0k_173", c = "_combo_dcs0k_95", l = "_separator_dcs0k_217", u = "_sequence_dcs0k_225", d = {
+	key: e,
+	symbol: t,
+	sm: n,
+	md: r,
+	lg: i,
+	outline: a,
+	soft: o,
+	solid: s,
+	combo: c,
+	separator: l,
+	sequence: u
+};
+//#endregion
+export { c as combo, d as default, e as key, i as lg, r as md, a as outline, l as separator, u as sequence, n as sm, o as soft, s as solid, t as symbol };

package/dist/components/primitives/Kbd/index.d.ts

@@ -0,0 +1 @@
+export * from './Kbd';

package/dist/components/primitives/Typography/Typography.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("./Typography.module.css.cjs.js");let n=require("react"),r=require("react/jsx-runtime");var i={xs:t.default.sizeXs,sm:t.default.sizeSm,md:t.default.sizeMd,lg:t.default.sizeLg,xl:t.default.sizeXl,"2xl":t.default.size2xl,"3xl":t.default.size3xl,"4xl":t.default.size4xl,"5xl":t.default.size5xl,"6xl":t.default.size6xl},a={regular:t.default.weightRegular,medium:t.default.weightMedium,semibold:t.default.weightSemibold,bold:t.default.weightBold,black:t.default.weightBlack},o={default:t.default.toneDefault,muted:t.default.toneMuted,primary:t.default.tonePrimary,accent:t.default.toneAccent,success:t.default.toneSuccess,warning:t.default.toneWarning,danger:t.default.toneDanger,info:t.default.toneInfo,inherit:void 0},s={start:t.default.alignStart,center:t.default.alignCenter,end:t.default.alignEnd,justify:t.default.alignJustify},c={tight:t.default.leadingTight,snug:t.default.leadingSnug,normal:t.default.leadingNormal,relaxed:t.default.leadingRelaxed},l={wrap:t.default.wrapWrap,nowrap:t.default.wrapNowrap,balance:t.default.wrapBalance,pretty:t.default.wrapPretty},u={1:`4xl`,2:`3xl`,3:`2xl`,4:`xl`,5:`lg`,6:`md`},d=new Set([`span`,`strong`,`em`,`b`,`i`,`small`,`code`,`kbd`,`samp`,`mark`,`abbr`,`cite`,`q`,`s`,`del`,`ins`,`sub`,`sup`,`time`,`label`]);function f(e,t){return e===void 0||e<1?t:{WebkitLineClamp:Math.floor(e),...t}}function p({weight:e,tone:n,align:r,caps:i,truncate:c,lineClamp:l}){return[e&&a[e],n&&o[n],r&&s[r],i&&t.default.caps,c&&t.default.truncate,!c&&l!==void 0&&l>=1&&t.default.clamp]}function m({as:r,level:a=2,size:o,weight:s=`bold`,tone:c=`default`,align:l,caps:d=!1,truncate:m=!1,lineClamp:h,balance:g=!0,className:_,style:v,...y}){let b=typeof r==`string`?r:void 0,x=b!==void 0&&!/^h[1-6]$|^legend$/.test(b);return(0,n.createElement)(r??`h${a}`,{...x?{role:`heading`,"aria-level":a}:null,...y,className:e.cx(t.default.heading,i[o??u[a]],...p({weight:s,tone:c,align:l,caps:d,truncate:m,lineClamp:h}),g&&t.default.wrapBalance,_),style:m?v:f(h,v)})}function h({level:n=1,size:i=`6xl`,weight:a=`black`,className:o,...s}){return(0,r.jsx)(m,{...s,level:n,size:i,weight:a,className:e.cx(t.default.display,o)})}function g({as:r,size:a,weight:o,tone:s,align:u,leading:m,italic:h=!1,caps:g=!1,mono:_=!1,truncate:v=!1,lineClamp:y,wrap:b,className:x,style:S,...C}){let w=r??`p`,T=d.has(w),E=a??(T?`inherit`:`md`),D=s??(T?`inherit`:`default`),O=m??(T?void 0:`normal`);return(0,n.createElement)(w,{...C,className:e.cx(t.default.text,E!==`inherit`&&i[E],O&&c[O],...p({weight:o,tone:D,align:u,caps:g,truncate:v,lineClamp:y}),h&&t.default.italic,_&&t.default.mono,b&&l[b],x),style:v?S:f(y,S)})}function _({size:n=`sm`,weight:i=`bold`,tone:a=`primary`,caps:o=!0,className:s,...c}){return(0,r.jsx)(g,{...c,size:n,weight:i,tone:a,caps:o,className:e.cx(t.default.eyebrow,s)})}exports.Display=h,exports.Eyebrow=_,exports.Heading=m,exports.Text=g;

package/dist/components/primitives/Typography/Typography.d.ts

@@ -0,0 +1,111 @@
+import { ComponentPropsWithRef, CSSProperties, ElementType } from 'react';
+/** Font size step. Maps to the --font-size-* tokens. */
+export type TypographySize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl";
+/** Body text sizes (a subset of the full scale). */
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/** Font weight. Maps to the --font-weight-* tokens. */
+export type TypographyWeight = "regular" | "medium" | "semibold" | "bold" | "black";
+/**
+ * Text color. Every value is a token pair verified against `--color-bg` by
+ * `scripts/check-contrast.mjs`. `inherit` takes the parent's color.
+ */
+export type TypographyTone = "default" | "muted" | "primary" | "accent" | "success" | "warning" | "danger" | "info" | "inherit";
+/** Horizontal text alignment. `start`/`end` follow the writing direction. */
+export type TypographyAlign = "start" | "center" | "end" | "justify";
+/** Line height. Maps to the --line-height-* tokens. */
+export type TypographyLeading = "tight" | "snug" | "normal" | "relaxed";
+/** How lines wrap. `balance` evens out line lengths; `pretty` avoids orphans. */
+export type TypographyWrap = "wrap" | "nowrap" | "balance" | "pretty";
+/** Heading level, rendered as `h1`-`h6`. */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** Elements a `Heading` may render as. */
+export type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "legend";
+/** Elements a `Text` may render as. */
+export type TextElement = "p" | "span" | "div" | "label" | "strong" | "em" | "b" | "i" | "small" | "code" | "kbd" | "samp" | "pre" | "mark" | "abbr" | "cite" | "q" | "s" | "del" | "ins" | "sub" | "sup" | "time" | "blockquote" | "figcaption" | "legend" | "caption" | "address" | "dt" | "dd" | "li";
+/**
+ * Polymorphic props: the component's own props, plus every native prop of the
+ * element chosen with `as` (including `ref`). Own props win on name clashes.
+ */
+type PolymorphicProps<E extends ElementType, OwnProps> = OwnProps & {
+    /** The element to render. */
+    as?: E;
+} & Omit<ComponentPropsWithRef<E>, keyof OwnProps | "as">;
+interface SharedOwnProps {
+    /** Font weight. */
+    weight?: TypographyWeight;
+    /** Text color, from contrast-verified tokens. */
+    tone?: TypographyTone;
+    /** Horizontal alignment. */
+    align?: TypographyAlign;
+    /** Uppercase with wide `--letter-spacing-caps` tracking. */
+    caps?: boolean;
+    /**
+     * Keep to one line and cut off with an ellipsis. The full text stays in the
+     * DOM for screen readers; give sighted users a way to see it (e.g. `title`).
+     */
+    truncate?: boolean;
+    /** Clamp to this many lines, ending in an ellipsis. */
+    lineClamp?: number;
+    /** Additional class names, merged with the component's own. */
+    className?: string;
+    /** Inline styles, merged with the dynamic `lineClamp` style. */
+    style?: CSSProperties;
+}
+interface HeadingOwnProps extends SharedOwnProps {
+    /** Semantic level; renders `h1`-`h6`. Choose it by document outline, not looks. */
+    level?: HeadingLevel;
+    /** Visual size, independent of `level`. Defaults by level: 1 `4xl`, 2 `3xl`, 3 `2xl`, 4 `xl`, 5 `lg`, 6 `md`. */
+    size?: TypographySize;
+    /** Balance line lengths (`text-wrap: balance`). */
+    balance?: boolean;
+}
+export type HeadingProps<E extends HeadingElement = "h2"> = PolymorphicProps<E, HeadingOwnProps>;
+/**
+ * Athletic display heading in `--font-display`: bold, tight, high contrast.
+ * `level` sets the semantics; `size` sets the look.
+ */
+export declare function Heading<E extends HeadingElement = "h2">({ as, level, size, weight, tone, align, caps, truncate, lineClamp, balance, className, style, ...props }: HeadingProps<E>): import('react').DetailedReactHTMLElement<{
+    role?: "heading" | undefined;
+    "aria-level"?: HeadingLevel | undefined;
+} & Omit<HeadingProps<E>, "style" | "align" | "tone" | "className" | "size" | "balance" | "weight" | "as" | "caps" | "truncate" | "lineClamp" | "level"> & {
+    className: string;
+    style: CSSProperties | undefined;
+}, HTMLSpanElement>;
+/**
+ * Hero-sized heading: `Heading` with `level={1}`, `size="6xl"`, and
+ * `weight="black"` by default. Every `Heading` prop still applies.
+ */
+export declare function Display<E extends HeadingElement = "h1">({ level, size, weight, className, ...props }: HeadingProps<E>): import("react").JSX.Element;
+interface TextOwnProps extends SharedOwnProps {
+    /**
+     * Font size. Block elements default to `md`; inline elements (`span`,
+     * `strong`, `em`, `code`, ...) default to `inherit` so they fit their parent.
+     */
+    size?: TextSize | "inherit";
+    /**
+     * Text color. Block elements default to `default`; inline elements default
+     * to `inherit`.
+     */
+    tone?: TypographyTone;
+    /** Line height. Defaults to `normal` on block elements; inherited otherwise. */
+    leading?: TypographyLeading;
+    /** Italic style. */
+    italic?: boolean;
+    /** Use the monospace font (`--font-mono`). */
+    mono?: boolean;
+    /** Line wrapping behavior. */
+    wrap?: TypographyWrap;
+}
+export type TextProps<E extends TextElement = "p"> = PolymorphicProps<E, TextOwnProps>;
+/** Friendly body text in `--font-body`. Renders a `p` by default. */
+export declare function Text<E extends TextElement = "p">({ as, size, weight, tone, align, leading, italic, caps, mono, truncate, lineClamp, wrap, className, style, ...props }: TextProps<E>): import('react').DetailedReactHTMLElement<Omit<TextProps<E>, "style" | "align" | "tone" | "className" | "size" | "leading" | "wrap" | "italic" | "weight" | "as" | "caps" | "truncate" | "lineClamp" | "mono"> & {
+    className: string;
+    style: CSSProperties | undefined;
+}, HTMLSpanElement>;
+/**
+ * Short uppercase overline above a heading, in the display font. `Text` with
+ * `caps`, `weight="bold"`, `size="sm"`, and `tone="primary"` by default.
+ * Renders a `p` by default; it is not a heading, so it is not in the outline.
+ */
+export declare function Eyebrow<E extends TextElement = "p">({ size, weight, tone, caps, className, ...props }: TextProps<E>): import("react").JSX.Element;
+export {};

package/dist/components/primitives/Typography/Typography.mjs

@@ -0,0 +1,147 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import t from "./Typography.module.css.mjs";
+import { createElement as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/primitives/Typography/Typography.tsx
+var i = {
+	xs: t.sizeXs,
+	sm: t.sizeSm,
+	md: t.sizeMd,
+	lg: t.sizeLg,
+	xl: t.sizeXl,
+	"2xl": t.size2xl,
+	"3xl": t.size3xl,
+	"4xl": t.size4xl,
+	"5xl": t.size5xl,
+	"6xl": t.size6xl
+}, a = {
+	regular: t.weightRegular,
+	medium: t.weightMedium,
+	semibold: t.weightSemibold,
+	bold: t.weightBold,
+	black: t.weightBlack
+}, o = {
+	default: t.toneDefault,
+	muted: t.toneMuted,
+	primary: t.tonePrimary,
+	accent: t.toneAccent,
+	success: t.toneSuccess,
+	warning: t.toneWarning,
+	danger: t.toneDanger,
+	info: t.toneInfo,
+	inherit: void 0
+}, s = {
+	start: t.alignStart,
+	center: t.alignCenter,
+	end: t.alignEnd,
+	justify: t.alignJustify
+}, c = {
+	tight: t.leadingTight,
+	snug: t.leadingSnug,
+	normal: t.leadingNormal,
+	relaxed: t.leadingRelaxed
+}, l = {
+	wrap: t.wrapWrap,
+	nowrap: t.wrapNowrap,
+	balance: t.wrapBalance,
+	pretty: t.wrapPretty
+}, u = {
+	1: "4xl",
+	2: "3xl",
+	3: "2xl",
+	4: "xl",
+	5: "lg",
+	6: "md"
+}, d = /* @__PURE__ */ new Set([
+	"span",
+	"strong",
+	"em",
+	"b",
+	"i",
+	"small",
+	"code",
+	"kbd",
+	"samp",
+	"mark",
+	"abbr",
+	"cite",
+	"q",
+	"s",
+	"del",
+	"ins",
+	"sub",
+	"sup",
+	"time",
+	"label"
+]);
+function f(e, t) {
+	return e === void 0 || e < 1 ? t : {
+		WebkitLineClamp: Math.floor(e),
+		...t
+	};
+}
+function p({ weight: e, tone: n, align: r, caps: i, truncate: c, lineClamp: l }) {
+	return [
+		e && a[e],
+		n && o[n],
+		r && s[r],
+		i && t.caps,
+		c && t.truncate,
+		!c && l !== void 0 && l >= 1 && t.clamp
+	];
+}
+function m({ as: r, level: a = 2, size: o, weight: s = "bold", tone: c = "default", align: l, caps: d = !1, truncate: m = !1, lineClamp: h, balance: g = !0, className: _, style: v, ...y }) {
+	let b = typeof r == "string" ? r : void 0, x = b !== void 0 && !/^h[1-6]$|^legend$/.test(b);
+	return n(r ?? `h${a}`, {
+		...x ? {
+			role: "heading",
+			"aria-level": a
+		} : null,
+		...y,
+		className: e(t.heading, i[o ?? u[a]], ...p({
+			weight: s,
+			tone: c,
+			align: l,
+			caps: d,
+			truncate: m,
+			lineClamp: h
+		}), g && t.wrapBalance, _),
+		style: m ? v : f(h, v)
+	});
+}
+function h({ level: n = 1, size: i = "6xl", weight: a = "black", className: o, ...s }) {
+	return /* @__PURE__ */ r(m, {
+		...s,
+		level: n,
+		size: i,
+		weight: a,
+		className: e(t.display, o)
+	});
+}
+function g({ as: r, size: a, weight: o, tone: s, align: u, leading: m, italic: h = !1, caps: g = !1, mono: _ = !1, truncate: v = !1, lineClamp: y, wrap: b, className: x, style: S, ...C }) {
+	let w = r ?? "p", T = d.has(w), E = a ?? (T ? "inherit" : "md"), D = s ?? (T ? "inherit" : "default"), O = m ?? (T ? void 0 : "normal");
+	return n(w, {
+		...C,
+		className: e(t.text, E !== "inherit" && i[E], O && c[O], ...p({
+			weight: o,
+			tone: D,
+			align: u,
+			caps: g,
+			truncate: v,
+			lineClamp: y
+		}), h && t.italic, _ && t.mono, b && l[b], x),
+		style: v ? S : f(y, S)
+	});
+}
+function _({ size: n = "sm", weight: i = "bold", tone: a = "primary", caps: o = !0, className: s, ...c }) {
+	return /* @__PURE__ */ r(g, {
+		...c,
+		size: n,
+		weight: i,
+		tone: a,
+		caps: o,
+		className: e(t.eyebrow, s)
+	});
+}
+//#endregion
+export { h as Display, _ as Eyebrow, m as Heading, g as Text };

package/dist/components/primitives/Typography/Typography.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_heading_1407f_19`,t=`_display_1407f_33`,n=`_text_1407f_41`,r=`_eyebrow_1407f_51`,i=`_sizeXs_1407f_65`,a=`_sizeSm_1407f_71`,o=`_sizeMd_1407f_77`,s=`_sizeLg_1407f_83`,c=`_sizeXl_1407f_89`,l=`_size2xl_1407f_95`,u=`_size3xl_1407f_101`,d=`_size4xl_1407f_107`,f=`_size5xl_1407f_113`,p=`_size6xl_1407f_119`,m=`_leadingTight_1407f_141`,h=`_leadingSnug_1407f_147`,g=`_leadingNormal_1407f_153`,_=`_leadingRelaxed_1407f_159`,v=`_weightRegular_1407f_171`,y=`_weightMedium_1407f_177`,b=`_weightSemibold_1407f_183`,x=`_weightBold_1407f_189`,S=`_weightBlack_1407f_195`,C=`_toneDefault_1407f_207`,w=`_toneMuted_1407f_213`,T=`_tonePrimary_1407f_219`,E=`_toneAccent_1407f_225`,D=`_toneSuccess_1407f_231`,O=`_toneWarning_1407f_237`,k=`_toneDanger_1407f_243`,A=`_toneInfo_1407f_249`,j=`_alignStart_1407f_261`,M=`_alignCenter_1407f_267`,N=`_alignEnd_1407f_273`,P=`_alignJustify_1407f_279`,F=`_wrapWrap_1407f_291`,I=`_wrapNowrap_1407f_297`,L=`_wrapBalance_1407f_303`,R=`_wrapPretty_1407f_309`,z=`_italic_1407f_321`,B=`_mono_1407f_329`,V=`_caps_1407f_339`,H=`_truncate_1407f_357`,U=`_clamp_1407f_429`,W={heading:e,display:t,text:n,eyebrow:r,sizeXs:i,sizeSm:a,sizeMd:o,sizeLg:s,sizeXl:c,size2xl:l,size3xl:u,size4xl:d,size5xl:f,size6xl:p,leadingTight:m,leadingSnug:h,leadingNormal:g,leadingRelaxed:_,weightRegular:v,weightMedium:y,weightSemibold:b,weightBold:x,weightBlack:S,toneDefault:C,toneMuted:w,tonePrimary:T,toneAccent:E,toneSuccess:D,toneWarning:O,toneDanger:k,toneInfo:A,alignStart:j,alignCenter:M,alignEnd:N,alignJustify:P,wrapWrap:F,wrapNowrap:I,wrapBalance:L,wrapPretty:R,italic:z,mono:B,caps:V,truncate:H,clamp:U};exports.alignCenter=M,exports.alignEnd=N,exports.alignJustify=P,exports.alignStart=j,exports.caps=V,exports.clamp=U,exports.default=W,exports.display=t,exports.eyebrow=r,exports.heading=e,exports.italic=z,exports.leadingNormal=g,exports.leadingRelaxed=_,exports.leadingSnug=h,exports.leadingTight=m,exports.mono=B,exports.size2xl=l,exports.size3xl=u,exports.size4xl=d,exports.size5xl=f,exports.size6xl=p,exports.sizeLg=s,exports.sizeMd=o,exports.sizeSm=a,exports.sizeXl=c,exports.sizeXs=i,exports.text=n,exports.toneAccent=E,exports.toneDanger=k,exports.toneDefault=C,exports.toneInfo=A,exports.toneMuted=w,exports.tonePrimary=T,exports.toneSuccess=D,exports.toneWarning=O,exports.truncate=H,exports.weightBlack=S,exports.weightBold=x,exports.weightMedium=y,exports.weightRegular=v,exports.weightSemibold=b,exports.wrapBalance=L,exports.wrapNowrap=I,exports.wrapPretty=R,exports.wrapWrap=F;

package/dist/components/primitives/Typography/Typography.module.css.mjs

@@ -0,0 +1,49 @@
+//#region src/components/primitives/Typography/Typography.module.css
+var e = "_heading_1407f_19", t = "_display_1407f_33", n = "_text_1407f_41", r = "_eyebrow_1407f_51", i = "_sizeXs_1407f_65", a = "_sizeSm_1407f_71", o = "_sizeMd_1407f_77", s = "_sizeLg_1407f_83", c = "_sizeXl_1407f_89", l = "_size2xl_1407f_95", u = "_size3xl_1407f_101", d = "_size4xl_1407f_107", f = "_size5xl_1407f_113", p = "_size6xl_1407f_119", m = "_leadingTight_1407f_141", h = "_leadingSnug_1407f_147", g = "_leadingNormal_1407f_153", _ = "_leadingRelaxed_1407f_159", v = "_weightRegular_1407f_171", y = "_weightMedium_1407f_177", b = "_weightSemibold_1407f_183", x = "_weightBold_1407f_189", S = "_weightBlack_1407f_195", C = "_toneDefault_1407f_207", w = "_toneMuted_1407f_213", T = "_tonePrimary_1407f_219", E = "_toneAccent_1407f_225", D = "_toneSuccess_1407f_231", O = "_toneWarning_1407f_237", k = "_toneDanger_1407f_243", A = "_toneInfo_1407f_249", j = "_alignStart_1407f_261", M = "_alignCenter_1407f_267", N = "_alignEnd_1407f_273", P = "_alignJustify_1407f_279", F = "_wrapWrap_1407f_291", I = "_wrapNowrap_1407f_297", L = "_wrapBalance_1407f_303", R = "_wrapPretty_1407f_309", z = "_italic_1407f_321", B = "_mono_1407f_329", V = "_caps_1407f_339", H = "_truncate_1407f_357", U = "_clamp_1407f_429", W = {
+	heading: e,
+	display: t,
+	text: n,
+	eyebrow: r,
+	sizeXs: i,
+	sizeSm: a,
+	sizeMd: o,
+	sizeLg: s,
+	sizeXl: c,
+	size2xl: l,
+	size3xl: u,
+	size4xl: d,
+	size5xl: f,
+	size6xl: p,
+	leadingTight: m,
+	leadingSnug: h,
+	leadingNormal: g,
+	leadingRelaxed: _,
+	weightRegular: v,
+	weightMedium: y,
+	weightSemibold: b,
+	weightBold: x,
+	weightBlack: S,
+	toneDefault: C,
+	toneMuted: w,
+	tonePrimary: T,
+	toneAccent: E,
+	toneSuccess: D,
+	toneWarning: O,
+	toneDanger: k,
+	toneInfo: A,
+	alignStart: j,
+	alignCenter: M,
+	alignEnd: N,
+	alignJustify: P,
+	wrapWrap: F,
+	wrapNowrap: I,
+	wrapBalance: L,
+	wrapPretty: R,
+	italic: z,
+	mono: B,
+	caps: V,
+	truncate: H,
+	clamp: U
+};
+//#endregion
+export { M as alignCenter, N as alignEnd, P as alignJustify, j as alignStart, V as caps, U as clamp, W as default, t as display, r as eyebrow, e as heading, z as italic, g as leadingNormal, _ as leadingRelaxed, h as leadingSnug, m as leadingTight, B as mono, l as size2xl, u as size3xl, d as size4xl, f as size5xl, p as size6xl, s as sizeLg, o as sizeMd, a as sizeSm, c as sizeXl, i as sizeXs, n as text, E as toneAccent, k as toneDanger, C as toneDefault, A as toneInfo, w as toneMuted, T as tonePrimary, D as toneSuccess, O as toneWarning, H as truncate, S as weightBlack, x as weightBold, y as weightMedium, v as weightRegular, b as weightSemibold, L as wrapBalance, I as wrapNowrap, R as wrapPretty, F as wrapWrap };

package/dist/components/primitives/Typography/index.d.ts

@@ -0,0 +1 @@
+export * from './Typography';

package/dist/components/utilities/LocaleProvider/LocaleProvider.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../i18n/plural.cjs.js"),t=require("../../../i18n/en.cjs.js"),n=require("../../../i18n/merge.cjs.js"),r=require("./LocaleProvider.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o=(0,i.createContext)({locale:void 0,dir:void 0,messages:t.en});function s(){return(0,i.useContext)(o)}function c(){return(0,i.useContext)(o).messages}var l=({locale:t,messages:s,dir:c,children:l})=>{let u=(0,i.useContext)(o),d=c??e.getLocaleDirection(t),f=(0,i.useMemo)(()=>n.mergeMessages(u.messages,s),[u.messages,s]),p=(0,i.useMemo)(()=>({locale:t,dir:d,messages:f}),[t,d,f]);return(0,a.jsx)(o.Provider,{value:p,children:(0,a.jsx)(`div`,{lang:t,dir:d,className:r.default.root,children:l})})};exports.LocaleProvider=l,exports.useLocale=s,exports.useMessages=c;

package/dist/components/utilities/LocaleProvider/LocaleProvider.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { Messages, PartialMessages } from '../../../i18n/types';
+/** The language settings in effect for a part of the tree. */
+export interface LocaleValue {
+    /**
+     * BCP 47 locale set by the nearest `LocaleProvider`, or `undefined` when
+     * there is none (components then use the browser's locale for dates and
+     * numbers).
+     */
+    locale: string | undefined;
+    /** Writing direction set by the nearest `LocaleProvider`. */
+    dir: "ltr" | "rtl" | undefined;
+    /** Built-in strings for every component (English without a provider). */
+    messages: Messages;
+}
+/** The locale, direction, and messages from the nearest `LocaleProvider`. */
+export declare function useLocale(): LocaleValue;
+/** Built-in strings for every component, from the nearest `LocaleProvider`. */
+export declare function useMessages(): Messages;
+export interface LocaleProviderProps {
+    /**
+     * BCP 47 language tag, e.g. `"es"`, `"pt-BR"`, `"ar"`. Sets `lang` on the
+     * wrapper and the locale for dates, numbers, and plurals in every component.
+     */
+    locale: string;
+    /**
+     * Built-in strings for the language, e.g. `import es from
+     * "@vjdesigns/vjdesigns-ui/locales/es"`. Partial messages are merged over
+     * the outer provider's (English at the top), so you can also override just
+     * a few strings. Leave unset to keep the outer messages.
+     */
+    messages?: PartialMessages;
+    /**
+     * Writing direction. Defaults to the locale's: `"rtl"` for Arabic, Hebrew,
+     * Persian, Urdu, and other right-to-left languages.
+     */
+    dir?: "ltr" | "rtl";
+    children?: ReactNode;
+}
+/**
+ * Sets the language of every component inside: built-in labels and
+ * screen-reader text, date and number formats, plurals, and writing
+ * direction. Wraps its children in an element with `lang` and `dir`
+ * (`display: contents`, so layout is unaffected); overlays opened inside
+ * keep the language.
+ *
+ * ```tsx
+ * import es from "@vjdesigns/vjdesigns-ui/locales/es";
+ *
+ * <LocaleProvider locale="es" messages={es}>
+ *   <App />
+ * </LocaleProvider>
+ * ```
+ *
+ * Providers nest: an inner provider changes the locale for its subtree and
+ * merges its `messages` over the outer ones.
+ */
+export declare const LocaleProvider: ({ locale, messages, dir, children }: LocaleProviderProps) => import("react").JSX.Element;