@imdz/react 0.0.0-stage → 0.1.0

package/dist/progress.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as progressCss } from "./styles/progress.js";
+function ProgressBase({ value, max = 100, label, className, }) {
+    const ratio = max > 0 ? value / max : 0;
+    const percent = Math.round(Math.min(Math.max(ratio, 0), 1) * 100);
+    return (_jsxs("div", { className: cx("imdz-progress", className), children: [label && (_jsxs("div", { className: "imdz-progress-header", children: [_jsx("span", { children: label }), _jsxs("span", { children: [percent, "%"] })] })), _jsx("div", { className: "imdz-progress-track", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, children: _jsx("div", { className: "imdz-progress-bar", style: { "--imdz-progress-value": `${percent}%` } }) })] }));
+}
+export function Progress(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "progress", css: progressCss }), _jsx(ProgressBase, { ...props })] }));
+}

package/dist/select.d.ts

@@ -0,0 +1,7 @@
+import { type SelectHTMLAttributes } from "react";
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    label?: string;
+    hint?: string;
+    error?: string;
+};
+export declare function Select(props: SelectProps): import("react").JSX.Element;

package/dist/select.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as fieldCss } from "./styles/field.js";
+import { css as selectCss } from "./styles/select.js";
+/** Options go as children: regular option elements. */
+function SelectBase({ label, hint, error, id, className, children, ...props }) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const message = error || hint;
+    const messageId = `${inputId}-message`;
+    return (_jsxs("div", { className: "imdz-field", children: [label && (_jsx("label", { className: "imdz-field-label", htmlFor: inputId, children: label })), _jsx("select", { id: inputId, className: cx("imdz-field-input", "imdz-select", className), "aria-invalid": error ? true : undefined, "aria-describedby": message ? messageId : undefined, ...props, children: children }), message && (_jsx("p", { id: messageId, className: error ? "imdz-field-error" : "imdz-field-hint", children: message }))] }));
+}
+export function Select(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "field", css: fieldCss }), _jsx(Style, { id: "select", css: selectCss }), _jsx(SelectBase, { ...props })] }));
+}

package/dist/skeleton.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from "react";
+export type SkeletonProps = {
+    width?: CSSProperties["width"];
+    height?: CSSProperties["height"];
+    className?: string;
+};
+export declare function Skeleton(props: SkeletonProps): import("react").JSX.Element;

package/dist/skeleton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as skeletonCss } from "./styles/skeleton.js";
+/** Loading placeholder. */
+function SkeletonBase({ width, height, className }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cx("imdz-skeleton", className), style: { width, height } }));
+}
+export function Skeleton(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "skeleton", css: skeletonCss }), _jsx(SkeletonBase, { ...props })] }));
+}

package/dist/spinner.d.ts

@@ -0,0 +1,7 @@
+export type SpinnerProps = {
+    /** Text for screen readers. */
+    label?: string;
+    size?: "md" | "lg";
+    className?: string;
+};
+export declare function Spinner(props: SpinnerProps): import("react").JSX.Element;

package/dist/spinner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as spinnerCss } from "./styles/spinner.js";
+function SpinnerBase({ label = "Loading", size = "md", className, }) {
+    return (_jsx("span", { role: "status", "aria-label": label, className: cx("imdz-spinner", size === "lg" && "imdz-spinner-lg", className) }));
+}
+export function Spinner(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "spinner", css: spinnerCss }), _jsx(SpinnerBase, { ...props })] }));
+}

package/dist/style.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare function Style({ id, css }: {
+    id: string;
+    css: string;
+}): React.JSX.Element | null;

package/dist/style.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Puts a component's CSS on the page. Copied into the package by build.mjs.
+//
+// React 19 hoists <style href precedence> to <head> and renders it once per
+// href, on the server too, so styles are there from the first paint. React 18
+// doesn't: there the CSS is added to <head> on the client when the component
+// mounts.
+import * as React from "react";
+const hoists = Number.parseInt(React.version, 10) >= 19;
+// Read through the namespace: React Server Components bundlers reject named
+// imports of client hooks, and this one only runs on React 18.
+const useInsertionEffect = React["useInsertionEffect"];
+export function Style({ id, css }) {
+    if (hoists) {
+        return (_jsx("style", { href: `imdz-${id}`, precedence: "imdz", children: css }));
+    }
+    useInsertionEffect(() => {
+        if (document.querySelector(`style[data-imdz="${id}"]`))
+            return;
+        const style = document.createElement("style");
+        style.dataset.imdz = id;
+        style.textContent = css;
+        document.head.prepend(style);
+    }, [id, css]);
+    return null;
+}

package/dist/styles/accordion.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-accordion {\n  border-top: 1px solid var(--imdz-border, #c4c4c4);\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-accordion-item {\n  border-bottom: 1px solid var(--imdz-border, #c4c4c4);\n}\n\n.imdz-accordion-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.875rem 0;\n  color: var(--imdz-text, #000000);\n  font: 600 0.75rem/1.3 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n  list-style: none;\n  cursor: pointer;\n}\n\n.imdz-accordion-summary::-webkit-details-marker {\n  display: none;\n}\n\n.imdz-accordion-summary::after {\n  content: \"+\";\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 1rem;\n  line-height: 1;\n}\n\n.imdz-accordion-item[open] > .imdz-accordion-summary::after {\n  content: \"\\2212\";\n}\n\n.imdz-accordion-summary:hover::after {\n  color: var(--imdz-text, #000000);\n}\n\n.imdz-accordion-summary:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 2px;\n}\n\n.imdz-accordion-content {\n  padding-bottom: 1rem;\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}";

package/dist/styles/accordion.js

@@ -0,0 +1 @@
+export const css = ".imdz-accordion {\n  border-top: 1px solid var(--imdz-border, #c4c4c4);\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-accordion-item {\n  border-bottom: 1px solid var(--imdz-border, #c4c4c4);\n}\n\n.imdz-accordion-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.875rem 0;\n  color: var(--imdz-text, #000000);\n  font: 600 0.75rem/1.3 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n  list-style: none;\n  cursor: pointer;\n}\n\n.imdz-accordion-summary::-webkit-details-marker {\n  display: none;\n}\n\n.imdz-accordion-summary::after {\n  content: \"+\";\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 1rem;\n  line-height: 1;\n}\n\n.imdz-accordion-item[open] > .imdz-accordion-summary::after {\n  content: \"\\2212\";\n}\n\n.imdz-accordion-summary:hover::after {\n  color: var(--imdz-text, #000000);\n}\n\n.imdz-accordion-summary:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 2px;\n}\n\n.imdz-accordion-content {\n  padding-bottom: 1rem;\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}";

package/dist/styles/alert.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-alert {\n  --imdz-alert-color: var(--imdz-text, #000000);\n\n  display: grid;\n  gap: 0.375rem;\n  box-sizing: border-box;\n  padding: 0.875rem 1rem;\n  border: 1px solid color-mix(in srgb, var(--imdz-alert-color) 45%, transparent);\n  border-left: 3px solid var(--imdz-alert-color);\n  border-radius: var(--imdz-radius, 0px);\n  background: color-mix(in srgb, var(--imdz-alert-color) 6%, transparent);\n  color: var(--imdz-text, #000000);\n  font: 400 0.875rem/1.5 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-alert-title {\n  margin: 0;\n  color: var(--imdz-alert-color);\n  font: 600 0.75rem/1.3 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-alert-success {\n  --imdz-alert-color: var(--imdz-success, #0f7a3d);\n}\n\n.imdz-alert-warning {\n  --imdz-alert-color: var(--imdz-warning, #8f5a00);\n}\n\n.imdz-alert-danger {\n  --imdz-alert-color: var(--imdz-danger, #c4001a);\n}";

package/dist/styles/alert.js

@@ -0,0 +1 @@
+export const css = ".imdz-alert {\n  --imdz-alert-color: var(--imdz-text, #000000);\n\n  display: grid;\n  gap: 0.375rem;\n  box-sizing: border-box;\n  padding: 0.875rem 1rem;\n  border: 1px solid color-mix(in srgb, var(--imdz-alert-color) 45%, transparent);\n  border-left: 3px solid var(--imdz-alert-color);\n  border-radius: var(--imdz-radius, 0px);\n  background: color-mix(in srgb, var(--imdz-alert-color) 6%, transparent);\n  color: var(--imdz-text, #000000);\n  font: 400 0.875rem/1.5 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-alert-title {\n  margin: 0;\n  color: var(--imdz-alert-color);\n  font: 600 0.75rem/1.3 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-alert-success {\n  --imdz-alert-color: var(--imdz-success, #0f7a3d);\n}\n\n.imdz-alert-warning {\n  --imdz-alert-color: var(--imdz-warning, #8f5a00);\n}\n\n.imdz-alert-danger {\n  --imdz-alert-color: var(--imdz-danger, #c4001a);\n}";

package/dist/styles/avatar.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-avatar {\n  display: inline-grid;\n  place-items: center;\n  box-sizing: border-box;\n  width: 2.5rem;\n  height: 2.5rem;\n  overflow: hidden;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-surface, #f2f2f2);\n  color: var(--imdz-text, #000000);\n  font: 600 0.75rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n/* Photos are turned black and white to keep the palette. */\n.imdz-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  filter: grayscale(1);\n}\n\n.imdz-avatar-lg {\n  width: 3.5rem;\n  height: 3.5rem;\n  font-size: 1rem;\n}";

package/dist/styles/avatar.js

@@ -0,0 +1 @@
+export const css = ".imdz-avatar {\n  display: inline-grid;\n  place-items: center;\n  box-sizing: border-box;\n  width: 2.5rem;\n  height: 2.5rem;\n  overflow: hidden;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-surface, #f2f2f2);\n  color: var(--imdz-text, #000000);\n  font: 600 0.75rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n/* Photos are turned black and white to keep the palette. */\n.imdz-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  filter: grayscale(1);\n}\n\n.imdz-avatar-lg {\n  width: 3.5rem;\n  height: 3.5rem;\n  font-size: 1rem;\n}";

package/dist/styles/badge.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-badge {\n  --imdz-badge-color: var(--imdz-muted, #5e5e5e);\n\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.5rem;\n  border: 1px solid var(--imdz-badge-color);\n  border-radius: var(--imdz-radius, 0px);\n  color: var(--imdz-badge-color);\n  font: 600 0.6875rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.imdz-badge::before {\n  content: \"\";\n  width: 0.375rem;\n  height: 0.375rem;\n  background: currentColor;\n}\n\n.imdz-badge-primary {\n  --imdz-badge-color: var(--imdz-text, #000000);\n\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n}\n\n.imdz-badge-success {\n  --imdz-badge-color: var(--imdz-success, #0f7a3d);\n}\n\n.imdz-badge-warning {\n  --imdz-badge-color: var(--imdz-warning, #8f5a00);\n}\n\n.imdz-badge-danger {\n  --imdz-badge-color: var(--imdz-danger, #c4001a);\n}";

package/dist/styles/badge.js

@@ -0,0 +1 @@
+export const css = ".imdz-badge {\n  --imdz-badge-color: var(--imdz-muted, #5e5e5e);\n\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.5rem;\n  border: 1px solid var(--imdz-badge-color);\n  border-radius: var(--imdz-radius, 0px);\n  color: var(--imdz-badge-color);\n  font: 600 0.6875rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.imdz-badge::before {\n  content: \"\";\n  width: 0.375rem;\n  height: 0.375rem;\n  background: currentColor;\n}\n\n.imdz-badge-primary {\n  --imdz-badge-color: var(--imdz-text, #000000);\n\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n}\n\n.imdz-badge-success {\n  --imdz-badge-color: var(--imdz-success, #0f7a3d);\n}\n\n.imdz-badge-warning {\n  --imdz-badge-color: var(--imdz-warning, #8f5a00);\n}\n\n.imdz-badge-danger {\n  --imdz-badge-color: var(--imdz-danger, #c4001a);\n}";

package/dist/styles/button.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-button {\n  --imdz-button-color: var(--imdz-primary, var(--imdz-text, #000000));\n  --imdz-button-on: var(--imdz-on-primary, var(--imdz-bg, #ffffff));\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  height: 2.5rem;\n  padding: 0 1.125rem;\n  border: 1px solid var(--imdz-button-color);\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-button-color);\n  color: var(--imdz-button-on);\n  font: 600 0.75rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-decoration: none;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color 150ms, color 150ms, border-color 150ms,\n    box-shadow 150ms;\n}\n\n/* On hover it inverts: just the outline with a glow. */\n.imdz-button:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  background: transparent;\n  color: var(--imdz-button-color);\n  box-shadow: 0 0 18px\n    color-mix(in srgb, var(--imdz-button-color) 40%, transparent);\n}\n\n.imdz-button:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 3px;\n}\n\n.imdz-button:disabled,\n.imdz-button[aria-disabled=\"true\"] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.imdz-button-secondary {\n  border-color: var(--imdz-border, #c4c4c4);\n  background: transparent;\n  color: var(--imdz-text, #000000);\n}\n\n.imdz-button-secondary:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  border-color: var(--imdz-text, #000000);\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n  box-shadow: none;\n}\n\n.imdz-button-ghost {\n  border-color: transparent;\n  background: transparent;\n  color: var(--imdz-text, #000000);\n}\n\n.imdz-button-ghost:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  border-color: var(--imdz-border, #c4c4c4);\n  background: var(--imdz-surface, #f2f2f2);\n  color: var(--imdz-text, #000000);\n  box-shadow: none;\n}\n\n.imdz-button-danger {\n  --imdz-button-color: var(--imdz-danger, #c4001a);\n  --imdz-button-on: var(--imdz-on-danger, #ffffff);\n}\n\n.imdz-button-sm {\n  height: 2rem;\n  padding: 0 0.75rem;\n  font-size: 0.6875rem;\n}\n\n.imdz-button-lg {\n  height: 3rem;\n  padding: 0 1.5rem;\n  font-size: 0.8125rem;\n}";

package/dist/styles/button.js

@@ -0,0 +1 @@
+export const css = ".imdz-button {\n  --imdz-button-color: var(--imdz-primary, var(--imdz-text, #000000));\n  --imdz-button-on: var(--imdz-on-primary, var(--imdz-bg, #ffffff));\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  height: 2.5rem;\n  padding: 0 1.125rem;\n  border: 1px solid var(--imdz-button-color);\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-button-color);\n  color: var(--imdz-button-on);\n  font: 600 0.75rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-decoration: none;\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color 150ms, color 150ms, border-color 150ms,\n    box-shadow 150ms;\n}\n\n/* On hover it inverts: just the outline with a glow. */\n.imdz-button:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  background: transparent;\n  color: var(--imdz-button-color);\n  box-shadow: 0 0 18px\n    color-mix(in srgb, var(--imdz-button-color) 40%, transparent);\n}\n\n.imdz-button:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 3px;\n}\n\n.imdz-button:disabled,\n.imdz-button[aria-disabled=\"true\"] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.imdz-button-secondary {\n  border-color: var(--imdz-border, #c4c4c4);\n  background: transparent;\n  color: var(--imdz-text, #000000);\n}\n\n.imdz-button-secondary:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  border-color: var(--imdz-text, #000000);\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n  box-shadow: none;\n}\n\n.imdz-button-ghost {\n  border-color: transparent;\n  background: transparent;\n  color: var(--imdz-text, #000000);\n}\n\n.imdz-button-ghost:hover:not(:disabled, [aria-disabled=\"true\"]) {\n  border-color: var(--imdz-border, #c4c4c4);\n  background: var(--imdz-surface, #f2f2f2);\n  color: var(--imdz-text, #000000);\n  box-shadow: none;\n}\n\n.imdz-button-danger {\n  --imdz-button-color: var(--imdz-danger, #c4001a);\n  --imdz-button-on: var(--imdz-on-danger, #ffffff);\n}\n\n.imdz-button-sm {\n  height: 2rem;\n  padding: 0 0.75rem;\n  font-size: 0.6875rem;\n}\n\n.imdz-button-lg {\n  height: 3rem;\n  padding: 0 1.5rem;\n  font-size: 0.8125rem;\n}";

package/dist/styles/card.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-card {\n  position: relative;\n  display: grid;\n  gap: 0.75rem;\n  box-sizing: border-box;\n  padding: 1.25rem;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-surface, #f2f2f2);\n  color: var(--imdz-text, #000000);\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n/* Corner brackets on two opposite corners. */\n.imdz-card::before,\n.imdz-card::after {\n  content: \"\";\n  position: absolute;\n  width: 0.625rem;\n  height: 0.625rem;\n  border: 0 solid var(--imdz-text, #000000);\n  pointer-events: none;\n}\n\n.imdz-card::before {\n  top: -1px;\n  left: -1px;\n  border-top-width: 1px;\n  border-left-width: 1px;\n}\n\n.imdz-card::after {\n  right: -1px;\n  bottom: -1px;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.imdz-card-title {\n  margin: 0;\n  font: 600 0.8125rem/1.3 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-card-body {\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n.imdz-card-body > :first-child {\n  margin-top: 0;\n}\n\n.imdz-card-body > :last-child {\n  margin-bottom: 0;\n}\n\n.imdz-card-footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}";

package/dist/styles/card.js

@@ -0,0 +1 @@
+export const css = ".imdz-card {\n  position: relative;\n  display: grid;\n  gap: 0.75rem;\n  box-sizing: border-box;\n  padding: 1.25rem;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-surface, #f2f2f2);\n  color: var(--imdz-text, #000000);\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n/* Corner brackets on two opposite corners. */\n.imdz-card::before,\n.imdz-card::after {\n  content: \"\";\n  position: absolute;\n  width: 0.625rem;\n  height: 0.625rem;\n  border: 0 solid var(--imdz-text, #000000);\n  pointer-events: none;\n}\n\n.imdz-card::before {\n  top: -1px;\n  left: -1px;\n  border-top-width: 1px;\n  border-left-width: 1px;\n}\n\n.imdz-card::after {\n  right: -1px;\n  bottom: -1px;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.imdz-card-title {\n  margin: 0;\n  font: 600 0.8125rem/1.3 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-card-body {\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n.imdz-card-body > :first-child {\n  margin-top: 0;\n}\n\n.imdz-card-body > :last-child {\n  margin-bottom: 0;\n}\n\n.imdz-card-footer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-top: 0.25rem;\n}";

package/dist/styles/checkbox.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  color: var(--imdz-text, #000000);\n  font: 400 0.875rem/1.4 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  cursor: pointer;\n}\n\n.imdz-checkbox-input {\n  display: grid;\n  flex: none;\n  place-content: center;\n  box-sizing: border-box;\n  width: 1.125rem;\n  height: 1.125rem;\n  margin: 0;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: transparent;\n  appearance: none;\n  cursor: pointer;\n  transition: border-color 150ms;\n}\n\n.imdz-checkbox-input::before {\n  content: \"\";\n  width: 0.5rem;\n  height: 0.5rem;\n  background: var(--imdz-text, #000000);\n  transform: scale(0);\n  transition: transform 120ms;\n}\n\n.imdz-checkbox-input:hover,\n.imdz-checkbox-input:checked {\n  border-color: var(--imdz-text, #000000);\n}\n\n.imdz-checkbox-input:checked::before {\n  transform: scale(1);\n}\n\n.imdz-checkbox-input:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 3px;\n}\n\n.imdz-checkbox:has(.imdz-checkbox-input:disabled) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}";

package/dist/styles/checkbox.js

@@ -0,0 +1 @@
+export const css = ".imdz-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  color: var(--imdz-text, #000000);\n  font: 400 0.875rem/1.4 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  cursor: pointer;\n}\n\n.imdz-checkbox-input {\n  display: grid;\n  flex: none;\n  place-content: center;\n  box-sizing: border-box;\n  width: 1.125rem;\n  height: 1.125rem;\n  margin: 0;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: transparent;\n  appearance: none;\n  cursor: pointer;\n  transition: border-color 150ms;\n}\n\n.imdz-checkbox-input::before {\n  content: \"\";\n  width: 0.5rem;\n  height: 0.5rem;\n  background: var(--imdz-text, #000000);\n  transform: scale(0);\n  transition: transform 120ms;\n}\n\n.imdz-checkbox-input:hover,\n.imdz-checkbox-input:checked {\n  border-color: var(--imdz-text, #000000);\n}\n\n.imdz-checkbox-input:checked::before {\n  transform: scale(1);\n}\n\n.imdz-checkbox-input:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 3px;\n}\n\n.imdz-checkbox:has(.imdz-checkbox-input:disabled) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}";

package/dist/styles/dialog.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-dialog {\n  box-sizing: border-box;\n  width: min(28rem, calc(100vw - 2rem));\n  /* Explicit: some resets (e.g. Tailwind) undo the native centering. */\n  margin: auto;\n  padding: 1.25rem;\n  border: 1px solid var(--imdz-text, #000000);\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-bg, #ffffff);\n  color: var(--imdz-text, #000000);\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  box-shadow: 0 0 48px color-mix(in srgb, var(--imdz-text, #000000) 18%, transparent);\n}\n\n.imdz-dialog::backdrop {\n  background: rgb(0 0 0 / 0.7);\n  backdrop-filter: blur(4px);\n}\n\n.imdz-dialog-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.imdz-dialog-title {\n  margin: 0;\n  font: 600 0.875rem/1.4 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-dialog-close {\n  display: grid;\n  place-items: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: transparent;\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 1.125rem;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 150ms, color 150ms, border-color 150ms;\n}\n\n.imdz-dialog-close:hover {\n  border-color: var(--imdz-text, #000000);\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n}\n\n.imdz-dialog-close:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 2px;\n}\n\n.imdz-dialog-body {\n  margin-top: 0.75rem;\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n.imdz-dialog-body > :first-child {\n  margin-top: 0;\n}\n\n.imdz-dialog-body > :last-child {\n  margin-bottom: 0;\n}\n\n.imdz-dialog-footer {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 1.25rem;\n}";

package/dist/styles/dialog.js

@@ -0,0 +1 @@
+export const css = ".imdz-dialog {\n  box-sizing: border-box;\n  width: min(28rem, calc(100vw - 2rem));\n  /* Explicit: some resets (e.g. Tailwind) undo the native centering. */\n  margin: auto;\n  padding: 1.25rem;\n  border: 1px solid var(--imdz-text, #000000);\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-bg, #ffffff);\n  color: var(--imdz-text, #000000);\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  box-shadow: 0 0 48px color-mix(in srgb, var(--imdz-text, #000000) 18%, transparent);\n}\n\n.imdz-dialog::backdrop {\n  background: rgb(0 0 0 / 0.7);\n  backdrop-filter: blur(4px);\n}\n\n.imdz-dialog-header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.imdz-dialog-title {\n  margin: 0;\n  font: 600 0.875rem/1.4 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-dialog-close {\n  display: grid;\n  place-items: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  padding: 0;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: transparent;\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 1.125rem;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 150ms, color 150ms, border-color 150ms;\n}\n\n.imdz-dialog-close:hover {\n  border-color: var(--imdz-text, #000000);\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n}\n\n.imdz-dialog-close:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 2px;\n}\n\n.imdz-dialog-body {\n  margin-top: 0.75rem;\n  color: var(--imdz-muted, #5e5e5e);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n.imdz-dialog-body > :first-child {\n  margin-top: 0;\n}\n\n.imdz-dialog-body > :last-child {\n  margin-bottom: 0;\n}\n\n.imdz-dialog-footer {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 1.25rem;\n}";

package/dist/styles/field.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-field {\n  display: grid;\n  gap: 0.5rem;\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-field-label {\n  color: var(--imdz-muted, #5e5e5e);\n  font: 600 0.6875rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-field-hint,\n.imdz-field-error {\n  margin: 0;\n  font-size: 0.8125rem;\n}\n\n.imdz-field-hint {\n  color: var(--imdz-muted, #5e5e5e);\n}\n\n.imdz-field-error {\n  color: var(--imdz-danger, #c4001a);\n}\n\n/* Base shared by input, textarea and select. */\n.imdz-field-input {\n  box-sizing: border-box;\n  width: 100%;\n  height: 2.5rem;\n  padding: 0 0.75rem;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: transparent;\n  color: var(--imdz-text, #000000);\n  font: 400 0.875rem/1.4 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  transition: border-color 150ms, box-shadow 150ms;\n}\n\n.imdz-field-input::placeholder {\n  color: var(--imdz-muted, #5e5e5e);\n}\n\n.imdz-field-input:hover {\n  border-color: var(--imdz-muted, #5e5e5e);\n}\n\n.imdz-field-input:focus-visible {\n  border-color: var(--imdz-focus, var(--imdz-text, #000000));\n  outline: 1px solid var(--imdz-focus, var(--imdz-text, #000000));\n  box-shadow: 0 0 18px color-mix(in srgb, var(--imdz-focus, var(--imdz-text, #000000)) 25%, transparent);\n}\n\n.imdz-field-input[aria-invalid=\"true\"] {\n  border-color: var(--imdz-danger, #c4001a);\n}\n\n.imdz-field-input:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}";

package/dist/styles/field.js

@@ -0,0 +1 @@
+export const css = ".imdz-field {\n  display: grid;\n  gap: 0.5rem;\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-field-label {\n  color: var(--imdz-muted, #5e5e5e);\n  font: 600 0.6875rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-field-hint,\n.imdz-field-error {\n  margin: 0;\n  font-size: 0.8125rem;\n}\n\n.imdz-field-hint {\n  color: var(--imdz-muted, #5e5e5e);\n}\n\n.imdz-field-error {\n  color: var(--imdz-danger, #c4001a);\n}\n\n/* Base shared by input, textarea and select. */\n.imdz-field-input {\n  box-sizing: border-box;\n  width: 100%;\n  height: 2.5rem;\n  padding: 0 0.75rem;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: transparent;\n  color: var(--imdz-text, #000000);\n  font: 400 0.875rem/1.4 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  transition: border-color 150ms, box-shadow 150ms;\n}\n\n.imdz-field-input::placeholder {\n  color: var(--imdz-muted, #5e5e5e);\n}\n\n.imdz-field-input:hover {\n  border-color: var(--imdz-muted, #5e5e5e);\n}\n\n.imdz-field-input:focus-visible {\n  border-color: var(--imdz-focus, var(--imdz-text, #000000));\n  outline: 1px solid var(--imdz-focus, var(--imdz-text, #000000));\n  box-shadow: 0 0 18px color-mix(in srgb, var(--imdz-focus, var(--imdz-text, #000000)) 25%, transparent);\n}\n\n.imdz-field-input[aria-invalid=\"true\"] {\n  border-color: var(--imdz-danger, #c4001a);\n}\n\n.imdz-field-input:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}";

package/dist/styles/fonts.d.ts

@@ -0,0 +1 @@
+export declare const css = "@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/inter-latin-400-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/inter-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz JetBrains Mono\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/jetbrains-mono-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}";

package/dist/styles/fonts.js

@@ -0,0 +1 @@
+export const css = "@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/inter-latin-400-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/inter-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz JetBrains Mono\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/jetbrains-mono-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}";

package/dist/styles/progress.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-progress {\n  display: grid;\n  gap: 0.5rem;\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-progress-header {\n  display: flex;\n  justify-content: space-between;\n  gap: 1rem;\n  color: var(--imdz-muted, #5e5e5e);\n  font: 600 0.6875rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-progress-track {\n  box-sizing: border-box;\n  height: 0.75rem;\n  padding: 2px;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n}\n\n/* Segmented bar. The width comes from the --imdz-progress-value variable. */\n.imdz-progress-bar {\n  width: var(--imdz-progress-value, 0%);\n  height: 100%;\n  background: repeating-linear-gradient(\n    90deg,\n    var(--imdz-text, #000000) 0 6px,\n    transparent 6px 8px\n  );\n  transition: width 300ms;\n}";

package/dist/styles/progress.js

@@ -0,0 +1 @@
+export const css = ".imdz-progress {\n  display: grid;\n  gap: 0.5rem;\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-progress-header {\n  display: flex;\n  justify-content: space-between;\n  gap: 1rem;\n  color: var(--imdz-muted, #5e5e5e);\n  font: 600 0.6875rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n}\n\n.imdz-progress-track {\n  box-sizing: border-box;\n  height: 0.75rem;\n  padding: 2px;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n}\n\n/* Segmented bar. The width comes from the --imdz-progress-value variable. */\n.imdz-progress-bar {\n  width: var(--imdz-progress-value, 0%);\n  height: 100%;\n  background: repeating-linear-gradient(\n    90deg,\n    var(--imdz-text, #000000) 0 6px,\n    transparent 6px 8px\n  );\n  transition: width 300ms;\n}";

package/dist/styles/select.d.ts

@@ -0,0 +1 @@
+export declare const css = "/* Used together with .input from field.css. */\n.imdz-select {\n  appearance: none;\n  padding-right: 2.25rem;\n  /* Arrow drawn with two gradients, so it inherits the text color. */\n  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position: right 1rem center, right 0.6875rem center;\n  background-size: 0.3125rem 0.3125rem;\n  background-repeat: no-repeat;\n  cursor: pointer;\n}\n\n.imdz-select option {\n  background: var(--imdz-bg, #ffffff);\n  color: var(--imdz-text, #000000);\n}\n\n/*\n * Custom dropdown, no JavaScript, using CSS customizable select\n * (appearance: base-select). Where the browser doesn't support it, you get\n * the system's native list and the field above.\n */\n@supports (appearance: base-select) {\n  .imdz-select,\n  .imdz-select::picker(select) {\n    appearance: base-select;\n  }\n\n  .imdz-select {\n    align-items: center;\n    padding-right: 0.75rem;\n    background-image: none;\n  }\n\n  .imdz-select::picker-icon {\n    color: var(--imdz-muted, #5e5e5e);\n    transition: rotate 150ms;\n  }\n\n  .imdz-select:open::picker-icon {\n    rotate: 180deg;\n  }\n\n  .imdz-select::picker(select) {\n    margin: 0.25rem 0;\n    padding: 0;\n    border: 1px solid var(--imdz-text, #000000);\n    border-radius: var(--imdz-radius, 0px);\n    background: var(--imdz-bg, #ffffff);\n    box-shadow: 0 0 32px color-mix(in srgb, var(--imdz-text, #000000) 18%, transparent);\n  }\n\n  .imdz-select option {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 0.625rem 0.75rem;\n    font: 400 0.875rem/1.4 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n    cursor: pointer;\n  }\n\n  .imdz-select option:not(:last-child) {\n    border-bottom: 1px solid var(--imdz-border, #c4c4c4);\n  }\n\n  /* The option under the pointer or focus inverts, like the buttons. */\n  .imdz-select option:hover,\n  .imdz-select option:focus-visible {\n    outline: none;\n    background: var(--imdz-text, #000000);\n    color: var(--imdz-bg, #ffffff);\n  }\n\n  .imdz-select option:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  /* The selected option's mark is a square on the right. */\n  .imdz-select option::checkmark {\n    content: \"\";\n    order: 1;\n    width: 0.375rem;\n    height: 0.375rem;\n    background: currentColor;\n  }\n}";

package/dist/styles/select.js

@@ -0,0 +1 @@
+export const css = "/* Used together with .input from field.css. */\n.imdz-select {\n  appearance: none;\n  padding-right: 2.25rem;\n  /* Arrow drawn with two gradients, so it inherits the text color. */\n  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),\n    linear-gradient(135deg, currentColor 50%, transparent 50%);\n  background-position: right 1rem center, right 0.6875rem center;\n  background-size: 0.3125rem 0.3125rem;\n  background-repeat: no-repeat;\n  cursor: pointer;\n}\n\n.imdz-select option {\n  background: var(--imdz-bg, #ffffff);\n  color: var(--imdz-text, #000000);\n}\n\n/*\n * Custom dropdown, no JavaScript, using CSS customizable select\n * (appearance: base-select). Where the browser doesn't support it, you get\n * the system's native list and the field above.\n */\n@supports (appearance: base-select) {\n  .imdz-select,\n  .imdz-select::picker(select) {\n    appearance: base-select;\n  }\n\n  .imdz-select {\n    align-items: center;\n    padding-right: 0.75rem;\n    background-image: none;\n  }\n\n  .imdz-select::picker-icon {\n    color: var(--imdz-muted, #5e5e5e);\n    transition: rotate 150ms;\n  }\n\n  .imdz-select:open::picker-icon {\n    rotate: 180deg;\n  }\n\n  .imdz-select::picker(select) {\n    margin: 0.25rem 0;\n    padding: 0;\n    border: 1px solid var(--imdz-text, #000000);\n    border-radius: var(--imdz-radius, 0px);\n    background: var(--imdz-bg, #ffffff);\n    box-shadow: 0 0 32px color-mix(in srgb, var(--imdz-text, #000000) 18%, transparent);\n  }\n\n  .imdz-select option {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 0.625rem 0.75rem;\n    font: 400 0.875rem/1.4 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n    cursor: pointer;\n  }\n\n  .imdz-select option:not(:last-child) {\n    border-bottom: 1px solid var(--imdz-border, #c4c4c4);\n  }\n\n  /* The option under the pointer or focus inverts, like the buttons. */\n  .imdz-select option:hover,\n  .imdz-select option:focus-visible {\n    outline: none;\n    background: var(--imdz-text, #000000);\n    color: var(--imdz-bg, #ffffff);\n  }\n\n  .imdz-select option:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  /* The selected option's mark is a square on the right. */\n  .imdz-select option::checkmark {\n    content: \"\";\n    order: 1;\n    width: 0.375rem;\n    height: 0.375rem;\n    background: currentColor;\n  }\n}";

package/dist/styles/skeleton.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-skeleton {\n  display: block;\n  height: 1rem;\n  border-radius: var(--imdz-radius, 0px);\n  background: linear-gradient(\n    90deg,\n    var(--imdz-surface, #f2f2f2) 25%,\n    var(--imdz-border, #c4c4c4) 50%,\n    var(--imdz-surface, #f2f2f2) 75%\n  );\n  background-size: 200% 100%;\n  animation: imdz-shimmer 1.4s linear infinite;\n}\n\n@keyframes imdz-shimmer {\n  from {\n    background-position: 200% 0;\n  }\n  to {\n    background-position: -200% 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .imdz-skeleton {\n    animation: none;\n  }\n}";

package/dist/styles/skeleton.js

@@ -0,0 +1 @@
+export const css = ".imdz-skeleton {\n  display: block;\n  height: 1rem;\n  border-radius: var(--imdz-radius, 0px);\n  background: linear-gradient(\n    90deg,\n    var(--imdz-surface, #f2f2f2) 25%,\n    var(--imdz-border, #c4c4c4) 50%,\n    var(--imdz-surface, #f2f2f2) 75%\n  );\n  background-size: 200% 100%;\n  animation: imdz-shimmer 1.4s linear infinite;\n}\n\n@keyframes imdz-shimmer {\n  from {\n    background-position: 200% 0;\n  }\n  to {\n    background-position: -200% 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .imdz-skeleton {\n    animation: none;\n  }\n}";

package/dist/styles/spinner.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-spinner {\n  display: inline-block;\n  box-sizing: border-box;\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 2px solid var(--imdz-border, #c4c4c4);\n  border-top-color: var(--imdz-text, #000000);\n  border-radius: 50%;\n  animation: imdz-spin 700ms linear infinite;\n}\n\n.imdz-spinner-lg {\n  width: 2rem;\n  height: 2rem;\n}\n\n@keyframes imdz-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .imdz-spinner {\n    animation-duration: 2.4s;\n  }\n}";

package/dist/styles/spinner.js

@@ -0,0 +1 @@
+export const css = ".imdz-spinner {\n  display: inline-block;\n  box-sizing: border-box;\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 2px solid var(--imdz-border, #c4c4c4);\n  border-top-color: var(--imdz-text, #000000);\n  border-radius: 50%;\n  animation: imdz-spin 700ms linear infinite;\n}\n\n.imdz-spinner-lg {\n  width: 2rem;\n  height: 2rem;\n}\n\n@keyframes imdz-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .imdz-spinner {\n    animation-duration: 2.4s;\n  }\n}";

package/dist/styles/switch.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-switch {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  color: var(--imdz-text, #000000);\n  font: 400 0.875rem/1.4 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  cursor: pointer;\n}\n\n.imdz-switch-input {\n  position: relative;\n  flex: none;\n  box-sizing: border-box;\n  width: 2.5rem;\n  height: 1.25rem;\n  margin: 0;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: transparent;\n  appearance: none;\n  cursor: pointer;\n  transition: border-color 150ms, background-color 150ms;\n}\n\n.imdz-switch-input::before {\n  content: \"\";\n  position: absolute;\n  top: 0.1875rem;\n  left: 0.1875rem;\n  width: 0.75rem;\n  height: 0.75rem;\n  background: var(--imdz-muted, #5e5e5e);\n  transition: transform 150ms, background-color 150ms;\n}\n\n.imdz-switch-input:hover {\n  border-color: var(--imdz-text, #000000);\n}\n\n.imdz-switch-input:checked {\n  border-color: var(--imdz-text, #000000);\n  background: var(--imdz-text, #000000);\n}\n\n.imdz-switch-input:checked::before {\n  background: var(--imdz-bg, #ffffff);\n  transform: translateX(1.25rem);\n}\n\n.imdz-switch-input:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 3px;\n}\n\n.imdz-switch:has(.imdz-switch-input:disabled) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}";

package/dist/styles/switch.js

@@ -0,0 +1 @@
+export const css = ".imdz-switch {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  color: var(--imdz-text, #000000);\n  font: 400 0.875rem/1.4 var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  cursor: pointer;\n}\n\n.imdz-switch-input {\n  position: relative;\n  flex: none;\n  box-sizing: border-box;\n  width: 2.5rem;\n  height: 1.25rem;\n  margin: 0;\n  border: 1px solid var(--imdz-border, #c4c4c4);\n  border-radius: var(--imdz-radius, 0px);\n  background: transparent;\n  appearance: none;\n  cursor: pointer;\n  transition: border-color 150ms, background-color 150ms;\n}\n\n.imdz-switch-input::before {\n  content: \"\";\n  position: absolute;\n  top: 0.1875rem;\n  left: 0.1875rem;\n  width: 0.75rem;\n  height: 0.75rem;\n  background: var(--imdz-muted, #5e5e5e);\n  transition: transform 150ms, background-color 150ms;\n}\n\n.imdz-switch-input:hover {\n  border-color: var(--imdz-text, #000000);\n}\n\n.imdz-switch-input:checked {\n  border-color: var(--imdz-text, #000000);\n  background: var(--imdz-text, #000000);\n}\n\n.imdz-switch-input:checked::before {\n  background: var(--imdz-bg, #ffffff);\n  transform: translateX(1.25rem);\n}\n\n.imdz-switch-input:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: 3px;\n}\n\n.imdz-switch:has(.imdz-switch-input:disabled) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}";

package/dist/styles/tabs.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-tabs {\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-tabs-list {\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--imdz-border, #c4c4c4);\n}\n\n.imdz-tabs-tab {\n  padding: 0.75rem 1rem;\n  border: 0;\n  background: transparent;\n  color: var(--imdz-muted, #5e5e5e);\n  font: 600 0.6875rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color 150ms, color 150ms;\n}\n\n.imdz-tabs-tab:hover {\n  color: var(--imdz-text, #000000);\n}\n\n.imdz-tabs-tab:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: -4px;\n}\n\n/* The active tab is an inverted block. */\n.imdz-tabs-tab[aria-selected=\"true\"] {\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n}\n\n.imdz-tabs-tab[aria-selected=\"true\"]:focus-visible {\n  outline-color: var(--imdz-bg, #ffffff);\n}\n\n.imdz-tabs-panel {\n  padding-top: 1rem;\n  color: var(--imdz-text, #000000);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}";

package/dist/styles/tabs.js

@@ -0,0 +1 @@
+export const css = ".imdz-tabs {\n  font-family: var(--imdz-font, \"imdz Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n}\n\n.imdz-tabs-list {\n  display: flex;\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--imdz-border, #c4c4c4);\n}\n\n.imdz-tabs-tab {\n  padding: 0.75rem 1rem;\n  border: 0;\n  background: transparent;\n  color: var(--imdz-muted, #5e5e5e);\n  font: 600 0.6875rem/1 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: background-color 150ms, color 150ms;\n}\n\n.imdz-tabs-tab:hover {\n  color: var(--imdz-text, #000000);\n}\n\n.imdz-tabs-tab:focus-visible {\n  outline: 2px solid var(--imdz-focus, var(--imdz-text, #000000));\n  outline-offset: -4px;\n}\n\n/* The active tab is an inverted block. */\n.imdz-tabs-tab[aria-selected=\"true\"] {\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n}\n\n.imdz-tabs-tab[aria-selected=\"true\"]:focus-visible {\n  outline-color: var(--imdz-bg, #ffffff);\n}\n\n.imdz-tabs-panel {\n  padding-top: 1rem;\n  color: var(--imdz-text, #000000);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}";

package/dist/styles/textarea.d.ts

@@ -0,0 +1 @@
+export declare const css = "/* Used together with .input from field.css. */\n.imdz-textarea {\n  display: block;\n  height: auto;\n  min-height: 6rem;\n  padding: 0.625rem 0.75rem;\n  resize: vertical;\n}";

package/dist/styles/textarea.js

@@ -0,0 +1 @@
+export const css = "/* Used together with .input from field.css. */\n.imdz-textarea {\n  display: block;\n  height: auto;\n  min-height: 6rem;\n  padding: 0.625rem 0.75rem;\n  resize: vertical;\n}";

package/dist/styles/tooltip.d.ts

@@ -0,0 +1 @@
+export declare const css = ".imdz-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n\n.imdz-tooltip-bubble {\n  position: absolute;\n  bottom: calc(100% + 0.5rem);\n  left: 50%;\n  z-index: 10;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n  font: 600 0.6875rem/1.2 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  translate: -50% 0.25rem;\n  transition: opacity 120ms, translate 120ms, visibility 120ms;\n}\n\n/* Shows on hover and also on keyboard focus. */\n.imdz-tooltip:hover .imdz-tooltip-bubble,\n.imdz-tooltip:focus-within .imdz-tooltip-bubble {\n  opacity: 1;\n  visibility: visible;\n  translate: -50% 0;\n}";

package/dist/styles/tooltip.js

@@ -0,0 +1 @@
+export const css = ".imdz-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n\n.imdz-tooltip-bubble {\n  position: absolute;\n  bottom: calc(100% + 0.5rem);\n  left: 50%;\n  z-index: 10;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--imdz-radius, 0px);\n  background: var(--imdz-text, #000000);\n  color: var(--imdz-bg, #ffffff);\n  font: 600 0.6875rem/1.2 var(--imdz-font-mono, \"imdz JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace);\n  letter-spacing: var(--imdz-tracking, 0.08em);\n  text-transform: uppercase;\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  translate: -50% 0.25rem;\n  transition: opacity 120ms, translate 120ms, visibility 120ms;\n}\n\n/* Shows on hover and also on keyboard focus. */\n.imdz-tooltip:hover .imdz-tooltip-bubble,\n.imdz-tooltip:focus-within .imdz-tooltip-bubble {\n  opacity: 1;\n  visibility: visible;\n  translate: -50% 0;\n}";