@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/Checkbox.es.js

@@ -0,0 +1,62 @@
+import { cls } from "../util/cls.es.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+//#region src/components/Checkbox.tsx
+var sizeClasses = {
+	large: "w-6 h-6 rounded flex items-center justify-center",
+	medium: "w-5 h-5 rounded flex items-center justify-center",
+	small: "w-4 h-4 rounded-sm flex items-center justify-center",
+	smallest: "w-4 h-4 rounded-sm flex items-center justify-center"
+};
+var outerSizeClasses = {
+	medium: "w-10 h-10",
+	small: "w-8 h-8",
+	large: "w-12 h-12 ",
+	smallest: "w-7 h-7"
+};
+var paddingClasses = {
+	medium: "p-2",
+	small: "p-2",
+	large: "p-2",
+	smallest: "p-2"
+};
+var colorClasses = {
+	primary: "bg-primary",
+	secondary: "bg-secondary"
+};
+var Checkbox = React.memo(({ id, checked, indeterminate = false, padding = true, disabled, size = "medium", onCheckedChange, color = "primary", "aria-label": ariaLabel }) => {
+	const isChecked = indeterminate ? false : checked;
+	const iconSize = size === "medium" ? 20 : size === "small" ? 16 : size === "smallest" ? 14 : 24;
+	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+		id,
+		checked: indeterminate || isChecked,
+		disabled,
+		"aria-label": ariaLabel,
+		"aria-checked": indeterminate ? "mixed" : isChecked,
+		className: "rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+		onCheckedChange: disabled ? void 0 : onCheckedChange,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cls(padding ? paddingClasses[size] : "", padding || onCheckedChange ? outerSizeClasses[size] : "", "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", onCheckedChange ? "rounded-full hover:bg-surface-hover" : "", onCheckedChange ? "cursor-pointer" : "cursor-default"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cls("border-2 shrink-0 relative transition-colors ease-in-out duration-150", sizeClasses[size], disabled ? "bg-surface-300 dark:bg-surface-600" : indeterminate || isChecked ? colorClasses[color] : "bg-surface-card", indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500"),
+				children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+					asChild: true,
+					children: indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {
+						size: iconSize,
+						className: "absolute"
+					}) : /* @__PURE__ */ jsx(CheckIcon, {
+						size: iconSize,
+						className: "absolute"
+					})
+				})
+			})
+		})
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.es.js.map

package/dist/components/Checkbox.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.es.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["\nimport React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\n\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\nimport { cls } from \"../util\";\n\nexport interface CheckboxProps {\n    checked: boolean;\n    id?: string;\n    disabled?: boolean;\n    indeterminate?: boolean;\n    onCheckedChange?: (checked: boolean) => void;\n    padding?: boolean;\n    size?: \"smallest\" | \"small\" | \"medium\" | \"large\";\n    color?: \"primary\" | \"secondary\";\n    \"aria-label\"?: string;\n}\n\n// Radius steps down with the box. `rounded-md` is 6px — on a 16-20px box that\n// is most of the edge, so the control reads as a squircle rather than a\n// checkbox. Box sizes match the icon glyph scale (16/16/20/24) so a Checkbox\n// sitting beside IconButtons in a table row is the same visual size.\nconst sizeClasses = {\n    large: \"w-6 h-6 rounded flex items-center justify-center\",\n    medium: \"w-5 h-5 rounded flex items-center justify-center\",\n    small: \"w-4 h-4 rounded-sm flex items-center justify-center\",\n    smallest: \"w-4 h-4 rounded-sm flex items-center justify-center\"\n};\n\n// Outer box is the hit area and sets the control's rendered height, so it\n// tracks the shared 28/32/40/48 scale. `smallest` used to reuse `small`'s\n// 32px box, which made the two sizes identical.\n//\n// A checkbox with no `onCheckedChange` is not a hit area — it is a tick mark\n// standing in for a value, as in `BooleanPreview`. There the box was 10px of\n// dead space on each side of a `medium` tick: on top of a read-only field's\n// own padding, it started the tick 10px further in than the text of the field\n// beside it. `padding={false}` reads as the request to drop it, and until now\n// did nothing at all, because it only removed `p-2` from a box whose size was\n// fixed regardless. Kept for anything clickable — the same box is the click\n// target for table row selection and for editor task items.\nconst outerSizeClasses = {\n    medium: \"w-10 h-10\",\n    small: \"w-8 h-8\",\n    large: \"w-12 h-12 \",\n    smallest: \"w-7 h-7\"\n}\n// Flat p-2, as it always was. `shrink-0` on the box below is what stops it\n// being squashed; changing the padding here only shifts the control's optical\n// weight relative to the icons beside it.\nconst paddingClasses = {\n    medium: \"p-2\",\n    small: \"p-2\",\n    large: \"p-2\",\n    smallest: \"p-2\"\n}\n\nconst colorClasses = {\n    primary: \"bg-primary\",\n    secondary: \"bg-secondary\"\n}\n\nexport const Checkbox = React.memo(({\n                             id,\n                             checked,\n                             indeterminate = false,\n                             padding = true,\n                             disabled,\n                             size = \"medium\",\n                             onCheckedChange,\n                             color = \"primary\",\n                             \"aria-label\": ariaLabel\n                         }: CheckboxProps) => {\n\n    const isChecked = indeterminate ? false : checked;\n\n    const iconSize = size === \"medium\"\n        ? 20\n        : size === \"small\"\n            ? 16\n            : size === \"smallest\"\n                ? 14\n                : 24;\n    return (\n        <CheckboxPrimitive.Root\n            id={id}\n            checked={indeterminate || isChecked}\n            disabled={disabled}\n            aria-label={ariaLabel}\n            aria-checked={indeterminate ? \"mixed\" : isChecked}\n            className=\"rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50\"\n            onCheckedChange={disabled ? undefined : onCheckedChange}>\n\n            <div className={cls(\n                padding ? paddingClasses[size] : \"\",\n                padding || onCheckedChange ? outerSizeClasses[size] : \"\",\n                \"inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150\",\n                onCheckedChange ? \"rounded-full hover:bg-surface-hover\" : \"\",\n                onCheckedChange ? \"cursor-pointer\" : \"cursor-default\"\n            )}>\n                <div\n                    className={cls(\n                        \"border-2 shrink-0 relative transition-colors ease-in-out duration-150\",\n                        sizeClasses[size],\n                        disabled\n                            ? \"bg-surface-300 dark:bg-surface-600\"\n                            : (indeterminate || isChecked ? colorClasses[color] : \"bg-surface-card\"),\n                        (indeterminate || isChecked) ? \"text-surface-accent-100 dark:text-surface-accent-900\" : \"\",\n                        disabled\n                            ? \"border-transparent\"\n                            : (indeterminate || isChecked ? \"border-transparent\" : \"border-surface-accent-800 dark:border-surface-accent-500\")\n                    )}>\n                    <CheckboxPrimitive.Indicator asChild>\n                        {indeterminate\n                            ? (\n                                <MinusIcon size={iconSize} className={\"absolute\"}/>\n                            )\n                            : (\n                                <CheckIcon size={iconSize} className={\"absolute\"}/>\n                            )}\n                    </CheckboxPrimitive.Indicator>\n                </div>\n            </div>\n        </CheckboxPrimitive.Root>\n    );\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";;;;;;AAuBA,IAAM,cAAc;CAChB,OAAO;CACP,QAAQ;CACR,OAAO;CACP,UAAU;AACd;AAcA,IAAM,mBAAmB;CACrB,QAAQ;CACR,OAAO;CACP,OAAO;CACP,UAAU;AACd;AAIA,IAAM,iBAAiB;CACnB,QAAQ;CACR,OAAO;CACP,OAAO;CACP,UAAU;AACd;AAEA,IAAM,eAAe;CACjB,SAAS;CACT,WAAW;AACf;AAEA,IAAa,WAAW,MAAM,MAAM,EACP,IACA,SACA,gBAAgB,OAChB,UAAU,MACV,UACA,OAAO,UACP,iBACA,QAAQ,WACR,cAAc,gBACG;CAE1C,MAAM,YAAY,gBAAgB,QAAQ;CAE1C,MAAM,WAAW,SAAS,WACpB,KACA,SAAS,UACL,KACA,SAAS,aACL,KACA;CACd,OACI,oBAAC,kBAAkB,MAAnB;EACQ;EACJ,SAAS,iBAAiB;EAChB;EACV,cAAY;EACZ,gBAAc,gBAAgB,UAAU;EACxC,WAAU;EACV,iBAAiB,WAAW,KAAA,IAAY;YAExC,oBAAC,OAAD;GAAK,WAAW,IACZ,UAAU,eAAe,QAAQ,IACjC,WAAW,kBAAkB,iBAAiB,QAAQ,IACtD,6HACA,kBAAkB,wCAAwC,IAC1D,kBAAkB,mBAAmB,gBACzC;aACI,oBAAC,OAAD;IACI,WAAW,IACP,yEACA,YAAY,OACZ,WACM,uCACC,iBAAiB,YAAY,aAAa,SAAS,mBACzD,iBAAiB,YAAa,yDAAyD,IACxF,WACM,uBACC,iBAAiB,YAAY,uBAAuB,0DAC/D;cACA,oBAAC,kBAAkB,WAAnB;KAA6B,SAAA;eACxB,gBAEO,oBAAC,WAAD;MAAW,MAAM;MAAU,WAAW;KAAY,CAAA,IAGlD,oBAAC,WAAD;MAAW,MAAM;MAAU,WAAW;KAAY,CAAA;IAEjC,CAAA;GAC5B,CAAA;EACJ,CAAA;CACe,CAAA;AAEhC,CAAC;AAED,SAAS,cAAc"}

package/dist/components/Chip.es.js

@@ -0,0 +1,72 @@
+import { cls } from "../util/cls.es.js";
+import { getColorSchemeForKey } from "../util/chip_colors.es.js";
+import { useIsDarkMode } from "../hooks/useIsDarkMode.es.js";
+import "react";
+import { jsxs } from "react/jsx-runtime";
+//#region src/components/Chip.tsx
+var sizeClassNames = {
+	smallest: "px-1.5 py-px text-[10px]",
+	small: "px-2 py-0.5 text-xs",
+	medium: "px-2.5 py-1 text-xs",
+	large: "px-3 py-1.5 text-sm"
+};
+/**
+* Helper to generate rgba from hex or standard colors.
+*/
+function getRgba(hex, alpha) {
+	if (!hex || !hex.startsWith("#")) return hex;
+	let color = hex.slice(1);
+	if (color.length === 3) color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+	return `rgba(${parseInt(color.slice(0, 2), 16)}, ${parseInt(color.slice(2, 4), 16)}, ${parseInt(color.slice(4, 6), 16)}, ${alpha})`;
+}
+/**
+* @group Preview components
+*/
+function Chip({ children, colorScheme, error, outlined, variant = "tinted", onClick, icon, size = "medium", className, style }) {
+	const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
+	const dark = useIsDarkMode();
+	const hasScheme = error || usedColorScheme;
+	let textColor = "";
+	let bgColor = "";
+	let border = "";
+	if (error) textColor = dark ? "#f87171" : "#dc2626";
+	else if (usedColorScheme) textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
+	if (hasScheme) {
+		if (outlined) {
+			if (!error && usedColorScheme) {
+				const outlineInk = dark ? usedColorScheme.darkOutlineText ?? usedColorScheme.darkText : usedColorScheme.outlineText;
+				if (outlineInk) textColor = outlineInk;
+			}
+			bgColor = getRgba(textColor, dark ? .1 : .06);
+			border = `1px solid ${getRgba(textColor, dark ? .2 : .14)}`;
+		} else if (error) {
+			bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
+			border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
+		} else if (usedColorScheme) {
+			const tintColor = dark ? usedColorScheme.darkTintColor : usedColorScheme.tintColor;
+			const tintText = dark ? usedColorScheme.darkTintText : usedColorScheme.tintText;
+			if (variant === "tinted" && tintColor && tintText) {
+				bgColor = tintColor;
+				textColor = tintText;
+			} else bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("rounded-md max-w-full w-max h-fit font-medium inline-flex gap-1", "text-ellipsis", "items-center", "transition-colors duration-150", !hasScheme && "bg-surface-raised text-text-secondary dark:text-text-secondary-dark", !hasScheme && outlined && "bg-transparent border border-hairline-strong", onClick ? "cursor-pointer hover:bg-surface-raised-hover" : "", sizeClassNames[size], className),
+		onClick,
+		style: {
+			...hasScheme ? {
+				backgroundColor: bgColor,
+				color: textColor,
+				border: border || void 0
+			} : {},
+			overflow: "hidden",
+			...style
+		},
+		children: [icon, children]
+	});
+}
+//#endregion
+export { Chip };
+
+//# sourceMappingURL=Chip.es.js.map

package/dist/components/Chip.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.es.js","names":[],"sources":["../../src/components/Chip.tsx"],"sourcesContent":["import React from \"react\";\nimport { CHIP_COLORS, cls, getColorSchemeForKey } from \"../util\";\nimport type { ChipColorKey, ChipColorScheme } from \"../util/chip_colors\";\nimport { useIsDarkMode } from \"../hooks/useIsDarkMode\";\n\nexport type { ChipColorKey, ChipColorScheme };\n\nexport interface ChipProps {\n    className?: string;\n    children: React.ReactNode;\n    size?: \"smallest\" | \"small\" | \"medium\" | \"large\";\n    colorScheme?: ChipColorScheme | ChipColorKey;\n    /**\n     * How a coloured chip paints its hue. `tinted` (the default) is the hue at\n     * low alpha behind hue-coloured ink: a label, not a block, and the rule the\n     * chrome follows for colour everywhere else (a dot, an icon, an outline, a\n     * tint — never a fill). `filled` is the palette's solid stop, for the few\n     * places that want a swatch: a colour picker, a legend. A custom scheme\n     * without tint values falls back to `filled`.\n     */\n    variant?: \"tinted\" | \"filled\";\n    error?: boolean;\n    outlined?: boolean;\n    onClick?: () => void;\n    icon?: React.ReactNode;\n    style?: React.CSSProperties;\n}\n\n// `small` and `medium` used to differ only in horizontal padding, so both\n// rendered at the same height and the step was invisible. Vertical rhythm now\n// increases across the whole scale.\nconst sizeClassNames = {\n    smallest: \"px-1.5 py-px text-[10px]\",\n    small: \"px-2 py-0.5 text-xs\",\n    medium: \"px-2.5 py-1 text-xs\",\n    large: \"px-3 py-1.5 text-sm\"\n}\n\n/**\n * Helper to generate rgba from hex or standard colors.\n */\nfunction getRgba(hex: string, alpha: number): string {\n    if (!hex || !hex.startsWith(\"#\")) return hex;\n    let color = hex.slice(1);\n    if (color.length === 3) {\n        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];\n    }\n    const r = parseInt(color.slice(0, 2), 16);\n    const g = parseInt(color.slice(2, 4), 16);\n    const b = parseInt(color.slice(4, 6), 16);\n    return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\n/**\n * @group Preview components\n */\nexport function Chip({\n                         children,\n                         colorScheme,\n                         error,\n                         outlined,\n                         variant = \"tinted\",\n                         onClick,\n                         icon,\n                         size = \"medium\",\n                         className,\n                         style\n                     }: ChipProps) {\n\n    const usedColorScheme = typeof colorScheme === \"string\" ? getColorSchemeForKey(colorScheme) : colorScheme;\n    // Live, not read once: the ink is chosen in JS per theme, so a theme switch\n    // has to reach every mounted chip (see useIsDarkMode).\n    const dark = useIsDarkMode();\n\n    const hasScheme = error || usedColorScheme;\n\n    let textColor = \"\";\n    let bgColor = \"\";\n    let border = \"\";\n\n    if (error) {\n        textColor = dark ? \"#f87171\" : \"#dc2626\";\n    } else if (usedColorScheme) {\n        textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;\n    }\n\n    if (hasScheme) {\n        if (outlined) {\n            // An outlined chip has no fill, so it needs the ink meant for the\n            // PAGE, not the ink meant for the fill it just dropped. Those are\n            // different colours for most hues — a bright `solid` chip carries\n            // dark ink, which on a near-black page would be invisible.\n            if (!error && usedColorScheme) {\n                const outlineInk = dark\n                    ? usedColorScheme.darkOutlineText ?? usedColorScheme.darkText\n                    : usedColorScheme.outlineText;\n                if (outlineInk) textColor = outlineInk;\n            }\n            bgColor = getRgba(textColor, dark ? 0.1 : 0.06);\n            border = `1px solid ${getRgba(textColor, dark ? 0.2 : 0.14)}`;\n        } else if (error) {\n            bgColor = dark ? \"rgba(220, 38, 38, 0.15)\" : \"rgba(239, 68, 68, 0.1)\";\n            border = `1px solid ${dark ? \"rgba(220, 38, 38, 0.3)\" : \"rgba(239, 68, 68, 0.2)\"}`;\n        } else if (usedColorScheme) {\n            const tintColor = dark ? usedColorScheme.darkTintColor : usedColorScheme.tintColor;\n            const tintText = dark ? usedColorScheme.darkTintText : usedColorScheme.tintText;\n            if (variant === \"tinted\" && tintColor && tintText) {\n                bgColor = tintColor;\n                textColor = tintText;\n            } else {\n                bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;\n            }\n        }\n    }\n\n    return (\n        <div\n            // `rounded-md`, not `lg`: a radius is proportional to the thing it\n            // rounds. At a chip's 20-24px height the control radius makes a pill,\n            // and a pill is a different object (a segment, a search field).\n            className={cls(\"rounded-md max-w-full w-max h-fit font-medium inline-flex gap-1\",\n                \"text-ellipsis\",\n                \"items-center\",\n                \"transition-colors duration-150\",\n                !hasScheme && \"bg-surface-raised text-text-secondary dark:text-text-secondary-dark\",\n                !hasScheme && outlined && \"bg-transparent border border-hairline-strong\",\n                onClick ? \"cursor-pointer hover:bg-surface-raised-hover\" : \"\",\n                sizeClassNames[size],\n                className)}\n            onClick={onClick}\n            style={{\n                ...(hasScheme ? {\n                    backgroundColor: bgColor,\n                    color: textColor,\n                    border: border || undefined,\n                } : {}),\n                overflow: \"hidden\",\n                ...style\n            }}\n        >\n            {icon}\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;;;AA+BA,IAAM,iBAAiB;CACnB,UAAU;CACV,OAAO;CACP,QAAQ;CACR,OAAO;AACX;;;;AAKA,SAAS,QAAQ,KAAa,OAAuB;CACjD,IAAI,CAAC,OAAO,CAAC,IAAI,WAAW,GAAG,GAAG,OAAO;CACzC,IAAI,QAAQ,IAAI,MAAM,CAAC;CACvB,IAAI,MAAM,WAAW,GACjB,QAAQ,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM;CAKzE,OAAO,QAHG,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG,EAGvB,EAAE,IAFP,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG,EAEjB,EAAE,IADb,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG,EACX,EAAE,IAAI,MAAM;AAC3C;;;;AAKA,SAAgB,KAAK,EACI,UACA,aACA,OACA,UACA,UAAU,UACV,SACA,MACA,OAAO,UACP,WACA,SACU;CAE/B,MAAM,kBAAkB,OAAO,gBAAgB,WAAW,qBAAqB,WAAW,IAAI;CAG9F,MAAM,OAAO,cAAc;CAE3B,MAAM,YAAY,SAAS;CAE3B,IAAI,YAAY;CAChB,IAAI,UAAU;CACd,IAAI,SAAS;CAEb,IAAI,OACA,YAAY,OAAO,YAAY;MAC5B,IAAI,iBACP,YAAY,QAAQ,gBAAgB,WAAW,gBAAgB,WAAW,gBAAgB;CAG9F,IAAI;MACI,UAAU;GAKV,IAAI,CAAC,SAAS,iBAAiB;IAC3B,MAAM,aAAa,OACb,gBAAgB,mBAAmB,gBAAgB,WACnD,gBAAgB;IACtB,IAAI,YAAY,YAAY;GAChC;GACA,UAAU,QAAQ,WAAW,OAAO,KAAM,GAAI;GAC9C,SAAS,aAAa,QAAQ,WAAW,OAAO,KAAM,GAAI;EAC9D,OAAO,IAAI,OAAO;GACd,UAAU,OAAO,4BAA4B;GAC7C,SAAS,aAAa,OAAO,2BAA2B;EAC5D,OAAO,IAAI,iBAAiB;GACxB,MAAM,YAAY,OAAO,gBAAgB,gBAAgB,gBAAgB;GACzE,MAAM,WAAW,OAAO,gBAAgB,eAAe,gBAAgB;GACvE,IAAI,YAAY,YAAY,aAAa,UAAU;IAC/C,UAAU;IACV,YAAY;GAChB,OACI,UAAU,QAAQ,gBAAgB,YAAY,gBAAgB,YAAY,gBAAgB;EAElG;;CAGJ,OACI,qBAAC,OAAD;EAII,WAAW,IAAI,mEACX,iBACA,gBACA,kCACA,CAAC,aAAa,uEACd,CAAC,aAAa,YAAY,gDAC1B,UAAU,iDAAiD,IAC3D,eAAe,OACf,SAAS;EACJ;EACT,OAAO;GACH,GAAI,YAAY;IACZ,iBAAiB;IACjB,OAAO;IACP,QAAQ,UAAU,KAAA;GACtB,IAAI,CAAC;GACL,UAAU;GACV,GAAG;EACP;YAtBJ,CAwBK,MACA,QACA;;AAEb"}

package/dist/components/CircularProgress.es.js

@@ -0,0 +1,28 @@
+import { cls } from "../util/cls.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/CircularProgress.tsx
+function CircularProgress({ size = "medium", className }) {
+	let sizeClasses = "";
+	if (size === "smallest") sizeClasses = "w-4 h-4";
+	else if (size === "small") sizeClasses = "w-6 h-6";
+	else if (size === "medium") sizeClasses = "w-8 h-8 m-1";
+	else sizeClasses = "w-10 h-10 m-1";
+	let borderClasses = "";
+	if (size === "smallest") borderClasses = "border-2";
+	else if (size === "small") borderClasses = "border-2";
+	else if (size === "medium") borderClasses = "border-[3px]";
+	else borderClasses = "border-4";
+	return /* @__PURE__ */ jsx("div", {
+		className: cls(sizeClasses, borderClasses, "inline-block shrink-0 rounded-full border-solid align-[-0.125em]", "animate-[spin_0.7s_linear_infinite] motion-reduce:animate-[spin_1.5s_linear_infinite]", "border-hairline-strong border-t-primary dark:border-t-primary", className),
+		role: "status",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "absolute! -m-px! h-px! w-px! overflow-hidden! whitespace-nowrap! border-0! p-0! [clip:rect(0,0,0,0)]!",
+			children: "Loading..."
+		})
+	});
+}
+//#endregion
+export { CircularProgress };
+
+//# sourceMappingURL=CircularProgress.es.js.map

package/dist/components/CircularProgress.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.es.js","names":[],"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["import React from \"react\";\nimport { cls } from \"../util\";\n\nexport type CircularProgressProps = {\n    size?: \"smallest\" | \"small\" | \"medium\" | \"large\",\n    className?: string\n}\n\nexport function CircularProgress({\n                                     size = \"medium\",\n                                     className\n                                 }: CircularProgressProps) {\n\n    let sizeClasses = \"\";\n    if (size === \"smallest\") {\n        sizeClasses = \"w-4 h-4\";\n    } else if (size === \"small\") {\n        sizeClasses = \"w-6 h-6\";\n    } else if (size === \"medium\") {\n        sizeClasses = \"w-8 h-8 m-1\";\n    } else {\n        sizeClasses = \"w-10 h-10 m-1\";\n    }\n\n    let borderClasses = \"\";\n    if (size === \"smallest\") {\n        borderClasses = \"border-2\";\n    } else if (size === \"small\") {\n        borderClasses = \"border-2\";\n    } else if (size === \"medium\") {\n        borderClasses = \"border-[3px]\";\n    } else {\n        borderClasses = \"border-4\";\n    }\n\n    return (\n        <div\n            className={cls(\n                sizeClasses,\n                borderClasses,\n                \"inline-block shrink-0 rounded-full border-solid align-[-0.125em]\",\n                \"animate-[spin_0.7s_linear_infinite] motion-reduce:animate-[spin_1.5s_linear_infinite]\",\n                \"border-hairline-strong border-t-primary dark:border-t-primary\",\n                className)}\n            role=\"status\">\n              <span\n                  className=\"absolute! -m-px! h-px! w-px! overflow-hidden! whitespace-nowrap! border-0! p-0! [clip:rect(0,0,0,0)]!\"\n              >\n                  Loading...\n              </span>\n        </div>\n    );\n}\n"],"mappings":";;;;AAQA,SAAgB,iBAAiB,EACI,OAAO,UACP,aACsB;CAEvD,IAAI,cAAc;CAClB,IAAI,SAAS,YACT,cAAc;MACX,IAAI,SAAS,SAChB,cAAc;MACX,IAAI,SAAS,UAChB,cAAc;MAEd,cAAc;CAGlB,IAAI,gBAAgB;CACpB,IAAI,SAAS,YACT,gBAAgB;MACb,IAAI,SAAS,SAChB,gBAAgB;MACb,IAAI,SAAS,UAChB,gBAAgB;MAEhB,gBAAgB;CAGpB,OACI,oBAAC,OAAD;EACI,WAAW,IACP,aACA,eACA,oEACA,yFACA,iEACA,SAAS;EACb,MAAK;YACH,oBAAC,QAAD;GACI,WAAU;aACb;EAEK,CAAA;CACP,CAAA;AAEb"}

package/dist/components/CircularProgressCenter.es.js

@@ -0,0 +1,30 @@
+import { CircularProgress } from "./CircularProgress.es.js";
+import { Typography } from "./Typography.es.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CircularProgressCenter.tsx
+/**
+*
+* @param text
+* @param props
+
+* @ignore
+*/
+function CircularProgressCenter({ text, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-full h-screen max-h-full max-w-full gap-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "m-auto flex flex-col gap-2 items-center",
+			children: [/* @__PURE__ */ jsx(CircularProgress, { ...props }), text && /* @__PURE__ */ jsx(Typography, {
+				color: "secondary",
+				variant: "caption",
+				className: "text-center",
+				children: text
+			})]
+		})
+	});
+}
+//#endregion
+export { CircularProgressCenter };
+
+//# sourceMappingURL=CircularProgressCenter.es.js.map

package/dist/components/CircularProgressCenter.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressCenter.es.js","names":[],"sources":["../../src/components/CircularProgressCenter.tsx"],"sourcesContent":["import React from \"react\";\nimport { CircularProgress, CircularProgressProps } from \"./CircularProgress\";\nimport { Typography } from \"./Typography\";\n\n/**\n *\n * @param text\n * @param props\n\n * @ignore\n */\nexport function CircularProgressCenter({ text, ...props }: CircularProgressProps & {\n    text?: string\n}) {\n    return (\n        <div\n            className=\"flex w-full h-screen max-h-full max-w-full gap-4\">\n            <div className=\"m-auto flex flex-col gap-2 items-center\">\n                <CircularProgress {...props}/>\n                {text && <Typography\n                    color={\"secondary\"}\n                    variant={\"caption\"}\n                    className=\"text-center\">{text}</Typography>}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,uBAAuB,EAAE,MAAM,GAAG,SAE/C;CACC,OACI,oBAAC,OAAD;EACI,WAAU;YACV,qBAAC,OAAD;GAAK,WAAU;aAAf,CACI,oBAAC,kBAAD,EAAkB,GAAI,MAAO,CAAA,GAC5B,QAAQ,oBAAC,YAAD;IACL,OAAO;IACP,SAAS;IACT,WAAU;cAAe;GAAiB,CAAA,CAC7C;;CACJ,CAAA;AAEb"}

package/dist/components/Collapse.es.js

@@ -0,0 +1,57 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import { useInjectStyles } from "../hooks/useInjectStyles.es.js";
+import React from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Collapse.tsx
+var Collapse = React.memo(({ children, className, in: isOpen = false, duration = 220 }) => {
+	useInjectStyles(`Collapse-${duration}`, `
+.CollapseContent-${duration} {
+  overflow: hidden;
+}
+.CollapseContent-${duration}[data-state='open'] {
+  animation: collapseSlideDown ${duration}ms ease-out;
+}
+.CollapseContent-${duration}[data-state='closed'] {
+  animation: collapseSlideUp ${duration}ms ease-in;
+}
+
+@keyframes collapseSlideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapseSlideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .CollapseContent-${duration}[data-state] {
+    animation: none;
+  }
+}
+`);
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		open: isOpen,
+		className,
+		children: /* @__PURE__ */ jsx(Collapsible.Content, {
+			className: cls(`CollapseContent-${duration}`),
+			children
+		})
+	});
+});
+Collapse.displayName = "Collapse";
+//#endregion
+export { Collapse };
+
+//# sourceMappingURL=Collapse.es.js.map

package/dist/components/Collapse.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.es.js","names":[],"sources":["../../src/components/Collapse.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport * as Collapsible from \"@radix-ui/react-collapsible\";\n\nimport { cls } from \"../util\";\nimport { useInjectStyles } from \"../hooks\";\n\ninterface CollapseProps {\n    children?: React.ReactNode;\n    className?: string;\n    in?: boolean;\n    duration?: number;\n}\n\nexport const Collapse = React.memo(({\n                             children,\n                             className,\n                             in: isOpen = false,\n                             duration = 220\n                         }: CollapseProps) => {\n\n    useInjectStyles(`Collapse-${duration}`, `\n.CollapseContent-${duration} {\n  overflow: hidden;\n}\n.CollapseContent-${duration}[data-state='open'] {\n  animation: collapseSlideDown ${duration}ms ease-out;\n}\n.CollapseContent-${duration}[data-state='closed'] {\n  animation: collapseSlideUp ${duration}ms ease-in;\n}\n\n@keyframes collapseSlideDown {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n}\n\n@keyframes collapseSlideUp {\n  from {\n    height: var(--radix-collapsible-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .CollapseContent-${duration}[data-state] {\n    animation: none;\n  }\n}\n`);\n\n    return (\n        <Collapsible.Root\n            open={isOpen}\n            className={className}>\n\n            <Collapsible.Content\n                className={cls(`CollapseContent-${duration}`)}\n            >\n                {children}\n            </Collapsible.Content>\n        </Collapsible.Root>\n    )\n});\n\nCollapse.displayName = \"Collapse\";\n"],"mappings":";;;;;;;AAcA,IAAa,WAAW,MAAM,MAAM,EACP,UACA,WACA,IAAI,SAAS,OACb,WAAW,UACM;CAE1C,gBAAgB,YAAY,YAAY;mBACzB,SAAS;;;mBAGT,SAAS;iCACK,SAAS;;mBAEvB,SAAS;+BACG,SAAS;;;;;;;;;;;;;;;;;;;;;;qBAsBnB,SAAS;;;;CAI7B;CAEG,OACI,oBAAC,YAAY,MAAb;EACI,MAAM;EACK;YAEX,oBAAC,YAAY,SAAb;GACI,WAAW,IAAI,mBAAmB,UAAU;GAE3C;EACgB,CAAA;CACP,CAAA;AAE1B,CAAC;AAED,SAAS,cAAc"}

package/dist/components/ColorPicker.es.js

@@ -0,0 +1,89 @@
+import { cls } from "../util/cls.es.js";
+import { CHIP_COLORS } from "../util/chip_colors.es.js";
+import { Tooltip } from "./Tooltip.es.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+//#region src/components/ColorPicker.tsx
+var BASE_COLORS = [
+	"blue",
+	"indigo",
+	"violet",
+	"purple",
+	"fuchsia",
+	"pink",
+	"rose",
+	"red",
+	"orange",
+	"yellow",
+	"green",
+	"emerald",
+	"teal",
+	"cyan",
+	"gray"
+];
+var TONES = [
+	"Lighter",
+	"Light",
+	"Dark",
+	"Darker"
+];
+function getColorDisplayName(hue, tone) {
+	const hueName = `${hue.charAt(0).toUpperCase()}${hue.slice(1)}`;
+	return tone === "Lighter" ? hueName : `${hueName} ${tone.toLowerCase()}`;
+}
+/**
+* A color picker component that displays a grid of predefined CHIP_COLORS.
+* Used for selecting colors for enum values, tags, and other chip-based UI elements.
+*
+* @group Form components
+*/
+function ColorPicker({ value, onChange, size = "medium", allowClear = true, disabled = false }) {
+	const swatchSize = size === "small" ? "w-5 h-5" : "w-6 h-6";
+	const checkSize = size === "small" ? 12 : 14;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [allowClear && /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			disabled,
+			onClick: () => onChange(void 0),
+			className: cls("flex items-center gap-2 px-2 py-1 rounded-lg text-sm transition-colors duration-150", "hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", disabled && "opacity-50 cursor-not-allowed", !value && "bg-surface-raised font-medium"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cls(swatchSize, "rounded-full border-2 border-dashed border-surface-accent-400 dark:border-surface-accent-600", "flex items-center justify-center"),
+				children: !value && /* @__PURE__ */ jsx(CheckIcon, { size: checkSize })
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-surface-accent-700 dark:text-surface-accent-300",
+				children: "Auto (based on ID)"
+			})]
+		}), TONES.map((tone) => /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap gap-1.5",
+			children: BASE_COLORS.map((base) => {
+				const colorKey = tone === "Lighter" ? base : `${base}${tone}`;
+				const colorScheme = CHIP_COLORS[colorKey];
+				const isSelected = value === colorKey;
+				const displayName = getColorDisplayName(base, tone);
+				return /* @__PURE__ */ jsx(Tooltip, {
+					title: displayName,
+					delayDuration: 300,
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled,
+						onClick: () => onChange(colorKey),
+						className: cls(swatchSize, "rounded-full transition-all flex items-center justify-center", "hover:scale-110 hover:shadow-md", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1", disabled && "opacity-50 cursor-not-allowed hover:scale-100", isSelected && "ring-2 ring-primary ring-offset-1"),
+						style: { backgroundColor: colorScheme.color },
+						"aria-label": displayName,
+						"aria-pressed": isSelected,
+						children: isSelected && /* @__PURE__ */ jsx(CheckIcon, {
+							size: checkSize,
+							style: { color: colorScheme.text }
+						})
+					})
+				}, colorKey);
+			})
+		}, tone))]
+	});
+}
+//#endregion
+export { ColorPicker };
+
+//# sourceMappingURL=ColorPicker.es.js.map

package/dist/components/ColorPicker.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.es.js","names":[],"sources":["../../src/components/ColorPicker.tsx"],"sourcesContent":["\nimport React from \"react\";\nimport { CHIP_COLORS, cls } from \"../util\";\nimport { ChipColorKey, ChipColorScheme } from \"./Chip\";\nimport type { ChipTone } from \"../util/chip_colors\";\nimport { CheckIcon } from \"lucide-react\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport interface ColorPickerProps {\n    /**\n     * Currently selected color key\n     */\n    value?: ChipColorKey;\n    /**\n     * Callback when color selection changes. Passes undefined when \"Auto\" is selected.\n     */\n    onChange: (colorKey: ChipColorKey | undefined) => void;\n    /**\n     * Size of the color swatches\n     */\n    size?: \"small\" | \"medium\";\n    /**\n     * Whether to show the \"Auto\" option that clears the selection\n     */\n    allowClear?: boolean;\n    /**\n     * Whether the picker is disabled\n     */\n    disabled?: boolean;\n}\n\n// Hues across, tones down — the arrangement the palette is built in.\nconst BASE_COLORS = [\"blue\", \"indigo\", \"violet\", \"purple\", \"fuchsia\", \"pink\", \"rose\", \"red\", \"orange\", \"yellow\", \"green\", \"emerald\", \"teal\", \"cyan\", \"gray\"] as const;\n\n// Lightest first, matching how the bare hue name reads.\nconst TONES: ChipTone[] = [\"Lighter\", \"Light\", \"Dark\", \"Darker\"];\n\n// Helper to get readable name from color key\nfunction getColorDisplayName(hue: string, tone: ChipTone): string {\n    const hueName = `${hue.charAt(0).toUpperCase()}${hue.slice(1)}`;\n    return tone === \"Lighter\" ? hueName : `${hueName} ${tone.toLowerCase()}`;\n}\n\n/**\n * A color picker component that displays a grid of predefined CHIP_COLORS.\n * Used for selecting colors for enum values, tags, and other chip-based UI elements.\n *\n * @group Form components\n */\nexport function ColorPicker({\n    value,\n    onChange,\n    size = \"medium\",\n    allowClear = true,\n    disabled = false\n}: ColorPickerProps) {\n\n    const swatchSize = size === \"small\" ? \"w-5 h-5\" : \"w-6 h-6\";\n    const checkSize = size === \"small\" ? 12 : 14;\n\n    return (\n        <div className=\"flex flex-col gap-2\">\n            {allowClear && (\n                <button\n                    type=\"button\"\n                    disabled={disabled}\n                    onClick={() => onChange(undefined)}\n                    className={cls(\n                        \"flex items-center gap-2 px-2 py-1 rounded-lg text-sm transition-colors duration-150\",\n                        \"hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary\",\n                        disabled && \"opacity-50 cursor-not-allowed\",\n                        !value && \"bg-surface-raised font-medium\"\n                    )}\n                >\n                    <div className={cls(\n                        swatchSize,\n                        \"rounded-full border-2 border-dashed border-surface-accent-400 dark:border-surface-accent-600\",\n                        \"flex items-center justify-center\"\n                    )}>\n                        {!value && <CheckIcon size={checkSize}/>}\n                    </div>\n                    <span className=\"text-surface-accent-700 dark:text-surface-accent-300\">\n                        Auto (based on ID)\n                    </span>\n                </button>\n            )}\n\n            {/* One row per tone. Wrapping rather than a fixed 15-column grid:\n                the picker also opens inside narrow property panels, where\n                fifteen tracks would shrink each swatch to a few pixels. */}\n            {TONES.map((tone) => (\n                <div key={tone} className=\"flex flex-wrap gap-1.5\">\n                    {BASE_COLORS.map((base) => {\n                        // The bare hue and its `Lighter` tone are the same\n                        // scheme; the picker offers the short name so configs\n                        // stay readable.\n                        const colorKey = (tone === \"Lighter\" ? base : `${base}${tone}`) as ChipColorKey;\n                        const colorScheme = CHIP_COLORS[colorKey] as ChipColorScheme;\n                        const isSelected = value === colorKey;\n                        const displayName = getColorDisplayName(base, tone);\n\n                        return (\n                            <Tooltip\n                                key={colorKey}\n                                title={displayName}\n                                delayDuration={300}\n                            >\n                                <button\n                                    type=\"button\"\n                                    disabled={disabled}\n                                    onClick={() => onChange(colorKey)}\n                                    className={cls(\n                                        swatchSize,\n                                        \"rounded-full transition-all flex items-center justify-center\",\n                                        \"hover:scale-110 hover:shadow-md\",\n                                        \"focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1\",\n                                        disabled && \"opacity-50 cursor-not-allowed hover:scale-100\",\n                                        isSelected && \"ring-2 ring-primary ring-offset-1\"\n                                    )}\n                                    style={{\n                                        backgroundColor: colorScheme.color\n                                    }}\n                                    aria-label={displayName}\n                                    aria-pressed={isSelected}\n                                >\n                                    {isSelected && (\n                                        <CheckIcon\n                                            size={checkSize}\n                                            style={{ color: colorScheme.text }}\n                                        />\n                                    )}\n                                </button>\n                            </Tooltip>\n                        );\n                    })}\n                </div>\n            ))}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAgCA,IAAM,cAAc;CAAC;CAAQ;CAAU;CAAU;CAAU;CAAW;CAAQ;CAAQ;CAAO;CAAU;CAAU;CAAS;CAAW;CAAQ;CAAQ;AAAM;AAG3J,IAAM,QAAoB;CAAC;CAAW;CAAS;CAAQ;AAAQ;AAG/D,SAAS,oBAAoB,KAAa,MAAwB;CAC9D,MAAM,UAAU,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI,MAAM,CAAC;CAC5D,OAAO,SAAS,YAAY,UAAU,GAAG,QAAQ,GAAG,KAAK,YAAY;AACzE;;;;;;;AAQA,SAAgB,YAAY,EACxB,OACA,UACA,OAAO,UACP,aAAa,MACb,WAAW,SACM;CAEjB,MAAM,aAAa,SAAS,UAAU,YAAY;CAClD,MAAM,YAAY,SAAS,UAAU,KAAK;CAE1C,OACI,qBAAC,OAAD;EAAK,WAAU;YAAf,CACK,cACG,qBAAC,UAAD;GACI,MAAK;GACK;GACV,eAAe,SAAS,KAAA,CAAS;GACjC,WAAW,IACP,uFACA,6FACA,YAAY,iCACZ,CAAC,SAAS,+BACd;aATJ,CAWI,oBAAC,OAAD;IAAK,WAAW,IACZ,YACA,gGACA,kCACJ;cACK,CAAC,SAAS,oBAAC,WAAD,EAAW,MAAM,UAAW,CAAA;GACtC,CAAA,GACL,oBAAC,QAAD;IAAM,WAAU;cAAuD;GAEjE,CAAA,CACF;MAMX,MAAM,KAAK,SACR,oBAAC,OAAD;GAAgB,WAAU;aACrB,YAAY,KAAK,SAAS;IAIvB,MAAM,WAAY,SAAS,YAAY,OAAO,GAAG,OAAO;IACxD,MAAM,cAAc,YAAY;IAChC,MAAM,aAAa,UAAU;IAC7B,MAAM,cAAc,oBAAoB,MAAM,IAAI;IAElD,OACI,oBAAC,SAAD;KAEI,OAAO;KACP,eAAe;eAEf,oBAAC,UAAD;MACI,MAAK;MACK;MACV,eAAe,SAAS,QAAQ;MAChC,WAAW,IACP,YACA,gEACA,mCACA,kGACA,YAAY,iDACZ,cAAc,mCAClB;MACA,OAAO,EACH,iBAAiB,YAAY,MACjC;MACA,cAAY;MACZ,gBAAc;gBAEb,cACG,oBAAC,WAAD;OACI,MAAM;OACN,OAAO,EAAE,OAAO,YAAY,KAAK;MACpC,CAAA;KAED,CAAA;IACH,GA7BA,QA6BA;GAEjB,CAAC;EACA,GA5CK,IA4CL,CACR,CACA;;AAEb"}

package/dist/components/Container.es.js

@@ -0,0 +1,31 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Container.tsx
+var containerMaxWidths = {
+	xs: "max-w-xs",
+	sm: "max-w-sm",
+	md: "max-w-md",
+	lg: "max-w-lg",
+	xl: "max-w-xl",
+	"2xl": "max-w-2xl",
+	"3xl": "max-w-3xl",
+	"4xl": "max-w-4xl",
+	"5xl": "max-w-5xl",
+	"6xl": "max-w-6xl",
+	"7xl": "max-w-7xl"
+};
+var ContainerInner = ({ children, className, style, maxWidth = "7xl" }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cls("mx-auto px-3 md:px-4 lg:px-6", maxWidth ? containerMaxWidths[maxWidth] : "", className),
+		style,
+		children
+	});
+};
+var Container = React.forwardRef(ContainerInner);
+//#endregion
+export { Container };
+
+//# sourceMappingURL=Container.es.js.map

package/dist/components/Container.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.es.js","names":[],"sources":["../../src/components/Container.tsx"],"sourcesContent":["\"use client\";\nimport React, { ForwardRefRenderFunction } from \"react\";\nimport { cls } from \"../util\";\n\nexport type ContainerProps = {\n    children: React.ReactNode;\n    style?: React.CSSProperties;\n    className?: string;\n    maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\";\n}\n\nconst containerMaxWidths = {\n    xs: \"max-w-xs\",\n    sm: \"max-w-sm\",\n    md: \"max-w-md\",\n    lg: \"max-w-lg\",\n    xl: \"max-w-xl\",\n    \"2xl\": \"max-w-2xl\",\n    \"3xl\": \"max-w-3xl\",\n    \"4xl\": \"max-w-4xl\",\n    \"5xl\": \"max-w-5xl\",\n    \"6xl\": \"max-w-6xl\",\n    \"7xl\": \"max-w-7xl\"\n}\n\nconst ContainerInner: ForwardRefRenderFunction<HTMLDivElement, ContainerProps> = (\n    {\n        children,\n        className,\n        style,\n        maxWidth = \"7xl\"\n    },\n    ref\n) => {\n\n    const classForMaxWidth = maxWidth ? containerMaxWidths[maxWidth] : \"\";\n\n    return (\n        <div\n            ref={ref}\n            className={cls(\"mx-auto px-3 md:px-4 lg:px-6\",\n                classForMaxWidth,\n                className)}\n            style={style}>\n            {children}\n        </div>\n    );\n}\n\nexport const Container = React.forwardRef(ContainerInner);\n\n"],"mappings":";;;;;AAWA,IAAM,qBAAqB;CACvB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AACX;AAEA,IAAM,kBACF,EACI,UACA,WACA,OACA,WAAW,SAEf,QACC;CAID,OACI,oBAAC,OAAD;EACS;EACL,WAAW,IAAI,gCALE,WAAW,mBAAmB,YAAY,IAOvD,SAAS;EACN;EACN;CACA,CAAA;AAEb;AAEA,IAAa,YAAY,MAAM,WAAW,cAAc"}

package/dist/components/DateTimeField.d.ts

@@ -1,8 +1,14 @@
 import React from "react";
+/**
+ * What the field picks: a day, a day and a time, or a time of day alone. A
+ * time of day is a `Date` on 1970-01-01 — how a `time` column travels — read
+ * and written in `timezone`.
+ */
+export type DateTimeFieldMode = "date" | "date_time" | "time";
 export type DateTimeFieldProps = {
     value?: Date | null;
     onChange?: (date: Date | null) => void;
-    mode?: "date" | "date_time";
+    mode?: DateTimeFieldMode;
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
@@ -20,6 +26,10 @@ export type DateTimeFieldProps = {
     pickerButton?: boolean;
     /** The native input, for a caller that opens the picker itself (`showPicker()`). */
     inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * BCP 47 locale, set as the input's `lang`. The browser still draws a
+     * native date input in its own UI language; this is the hint it may use.
+     */
     locale?: string;
     /**
      * IANA timezone string (e.g., "America/New_York", "Europe/London").