adjacent-ui 0.1.0

package/dist/radio/radio.css

@@ -0,0 +1,108 @@
+@layer components {
+  .adj-radio-group {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  .adj-radio-group[data-variant="plain"] {
+    gap: 0.25rem;
+  }
+
+  .adj-radio {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.75rem;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 2rem;
+    color: var(--adj-radio-label-color, var(--foreground, CanvasText));
+    font: inherit;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* Sits on the same height as a text field, so a form of both lines up. */
+  .adj-radio-group[data-variant="card"] .adj-radio {
+    min-height: var(--adj-control-height, 2.5rem);
+    padding-block: 0.375rem;
+    padding-inline: 0.75rem;
+    border: 1px solid var(--adj-radio-outline, var(--border, color-mix(in srgb, currentColor 24%, transparent)));
+    border-radius: var(--radius, 0.625rem);
+    transition: border-color 140ms ease, background-color 140ms ease;
+  }
+
+  .adj-radio-group[data-variant="card"] .adj-radio:hover[data-disabled="false"] {
+    background: color-mix(in srgb, currentColor 4%, transparent);
+  }
+
+  .adj-radio-group[data-variant="card"] .adj-radio[data-selected="true"] {
+    border-color: var(--adj-radio-selected-color, var(--primary, currentColor));
+  }
+
+  .adj-radio[data-disabled="true"] {
+    cursor: default;
+    opacity: 0.38;
+  }
+
+  .adj-radio__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .adj-radio__control {
+    display: grid;
+    width: 1.125rem;
+    height: 1.125rem;
+    flex: none;
+    border: 2px solid var(--adj-radio-outline-color, color-mix(in srgb, currentColor 48%, transparent));
+    border-radius: 50%;
+    place-items: center;
+    transition: border-color 140ms ease;
+  }
+
+  .adj-radio__control::after {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: var(--adj-radio-selected-color, var(--primary, currentColor));
+    border-radius: 50%;
+    content: "";
+    transform: scale(0);
+    transition: transform 140ms ease;
+  }
+
+  .adj-radio[data-selected="true"] .adj-radio__control {
+    border-color: var(--adj-radio-selected-color, var(--primary, currentColor));
+  }
+
+  .adj-radio[data-selected="true"] .adj-radio__control::after {
+    transform: scale(1);
+  }
+
+  .adj-radio__input:focus-visible + .adj-radio__control {
+    outline: 2px solid var(--ring, currentColor);
+    outline-offset: 2px;
+  }
+
+  .adj-radio__body {
+    display: grid;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .adj-radio__description {
+    color: var(--adj-radio-description-color, var(--muted-foreground, currentColor));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .adj-radio,
+    .adj-radio__control,
+    .adj-radio__control::after {
+      transition: none;
+    }
+  }
+}

package/dist/radio/radio.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+import "../text-field/text-field.css";
+import "./radio.css";
+export type RadioVariant = "plain" | "card";
+export interface RadioOption {
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+    readonly label: ReactNode;
+    readonly value: string;
+}
+export interface RadioGroupProps {
+    /** The accessible name. Falls back to `label` when that is plain text. */
+    readonly "aria-label"?: string;
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly error?: ReactNode;
+    /** Keeps the label for assistive technology and takes it out of the layout. */
+    readonly hideLabel?: boolean;
+    /** Names the group, above the choices, on the same rhythm as a TextField. */
+    readonly label?: ReactNode;
+    readonly name?: string;
+    readonly onValueChange: (value: string) => void;
+    readonly options: readonly RadioOption[];
+    readonly value: string;
+    readonly variant?: RadioVariant;
+}
+/** One choice from a short, visible list. A long list belongs in a MenuSelect. */
+export declare function RadioGroup({ "aria-label": ariaLabel, className, disabled, error, hideLabel, label, name, onValueChange, options, value, variant, }: RadioGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=radio.d.ts.map

package/dist/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio/radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9C,OAAO,8BAA8B,CAAC;AACtC,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,0EAA0E;IAC1E,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,+EAA+E;IAC/E,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,6EAA6E;IAC7E,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;CACjC;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,SAAiB,EACjB,KAAK,EACL,IAAI,EACJ,aAAa,EACb,OAAO,EACP,KAAK,EACL,OAAiB,GAClB,EAAE,eAAe,+BAiFjB"}

package/dist/radio/radio.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Text } from "../text/text.js";
+import "../text-field/text-field.css";
+import "./radio.css";
+/** One choice from a short, visible list. A long list belongs in a MenuSelect. */
+export function RadioGroup({ "aria-label": ariaLabel, className, disabled = false, error, hideLabel = false, label, name, onValueChange, options, value, variant = "plain", }) {
+    const generatedName = useId();
+    const groupName = name ?? `adj-radio-${generatedName}`;
+    const classes = ["adj-radio-group", className].filter(Boolean).join(" ");
+    const accessibleName = ariaLabel ?? (typeof label === "string" ? label : undefined);
+    const hasError = error !== undefined && error !== null && error !== false;
+    const choices = (_jsx("div", { "aria-label": accessibleName, className: classes, "data-variant": variant, role: "radiogroup", children: options.map((option) => {
+            const selected = option.value === value;
+            const optionDisabled = disabled || option.disabled === true;
+            return (_jsxs("label", { className: "adj-radio", "data-disabled": optionDisabled ? "true" : "false", "data-selected": selected ? "true" : "false", children: [_jsx("input", { checked: selected, className: "adj-radio__input", disabled: optionDisabled, name: groupName, onChange: () => onValueChange(option.value), type: "radio", value: option.value }), _jsx("span", { "aria-hidden": "true", className: "adj-radio__control" }), _jsxs("span", { className: "adj-radio__body", children: [_jsx(Text, { className: "adj-radio__label", variant: "body-large", children: option.label }), option.description === undefined ? null : (_jsx(Text, { className: "adj-radio__description", variant: "body-small", children: option.description }))] })] }, option.value));
+        }) }));
+    if (label === undefined)
+        return choices;
+    return (_jsxs("div", { className: "adj-text-field", "data-error": hasError ? "true" : "false", children: [_jsx(Text, { as: "span", className: "adj-text-field__label", "data-hidden": hideLabel ? "true" : "false", variant: "label-large", children: label }), choices, hasError ? (_jsx("div", { className: "adj-text-field__supporting", children: _jsx(Text, { "aria-live": "polite", className: "adj-text-field__supporting-text", variant: "body-small", children: error }) })) : null] }));
+}
+//# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.tsx"],"names":[],"mappings":"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"}

package/dist/runtime/use-display-mode.d.ts

@@ -0,0 +1,9 @@
+export type DisplayMode = "browser" | "fullscreen" | "minimal-ui" | "standalone" | "twa";
+export interface DisplayModeSource {
+    readonly matches: (mode: string) => boolean;
+    readonly referrer: string;
+    readonly legacyStandalone?: boolean | undefined;
+}
+export declare function displayModeFrom(source: DisplayModeSource): DisplayMode;
+export declare function useDisplayMode(): DisplayMode;
+//# sourceMappingURL=use-display-mode.d.ts.map

package/dist/runtime/use-display-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-display-mode.d.ts","sourceRoot":"","sources":["../../src/runtime/use-display-mode.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,KAAK,CAAC;AAIV,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACjD;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,iBAAiB,GAAG,WAAW,CAQtE;AAqBD,wBAAgB,cAAc,IAAI,WAAW,CAE5C"}

package/dist/runtime/use-display-mode.js

@@ -0,0 +1,33 @@
+"use client";
+import { useSyncExternalStore } from "react";
+const MEDIA_MODES = ["fullscreen", "standalone", "minimal-ui"];
+export function displayModeFrom(source) {
+    if (source.referrer.startsWith("android-app://"))
+        return "twa";
+    if (source.legacyStandalone === true)
+        return "standalone";
+    for (const mode of MEDIA_MODES) {
+        if (source.matches(mode))
+            return mode;
+    }
+    return "browser";
+}
+function readDisplayMode() {
+    const legacy = navigator;
+    return displayModeFrom({
+        legacyStandalone: legacy.standalone,
+        matches: (mode) => window.matchMedia(`(display-mode: ${mode})`).matches,
+        referrer: document.referrer,
+    });
+}
+function subscribe(onChange) {
+    const queries = MEDIA_MODES.map((mode) => window.matchMedia(`(display-mode: ${mode})`));
+    queries.forEach((query) => query.addEventListener("change", onChange));
+    return () => {
+        queries.forEach((query) => query.removeEventListener("change", onChange));
+    };
+}
+export function useDisplayMode() {
+    return useSyncExternalStore(subscribe, readDisplayMode, () => "browser");
+}
+//# sourceMappingURL=use-display-mode.js.map

package/dist/runtime/use-display-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-display-mode.js","sourceRoot":"","sources":["../../src/runtime/use-display-mode.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAS7C,MAAM,WAAW,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,CAAU,CAAC;AAQxE,MAAM,UAAU,eAAe,CAAC,MAAyB;IACvD,IAAI,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,gBAAgB,CAAC;QAAE,OAAO,KAAK,CAAC;IAC/D,IAAI,MAAM,CAAC,gBAAgB,KAAK,IAAI;QAAE,OAAO,YAAY,CAAC;IAE1D,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE,CAAC;QAC/B,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;IACxC,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,eAAe;IACtB,MAAM,MAAM,GAAG,SAA0D,CAAC;IAC1E,OAAO,eAAe,CAAC;QACrB,gBAAgB,EAAE,MAAM,CAAC,UAAU;QACnC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,IAAI,GAAG,CAAC,CAAC,OAAO;QACvE,QAAQ,EAAE,QAAQ,CAAC,QAAQ;KAC5B,CAAC,CAAC;AACL,CAAC;AAED,SAAS,SAAS,CAAC,QAAoB;IACrC,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACvC,MAAM,CAAC,UAAU,CAAC,kBAAkB,IAAI,GAAG,CAAC,CAC7C,CAAC;IACF,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvE,OAAO,GAAG,EAAE;QACV,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC5E,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,OAAO,oBAAoB,CAAC,SAAS,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAC3E,CAAC"}

package/dist/runtime/use-keyboard.d.ts

@@ -0,0 +1,8 @@
+export interface KeyboardState {
+    readonly inset: number;
+    readonly open: boolean;
+}
+export declare const KEYBOARD_THRESHOLD_PX = 120;
+export declare function keyboardStateFrom(innerHeight: number, visualHeight: number, visualOffsetTop: number): KeyboardState;
+export declare function useKeyboard(): KeyboardState;
+//# sourceMappingURL=use-keyboard.d.ts.map

package/dist/runtime/use-keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard.d.ts","sourceRoot":"","sources":["../../src/runtime/use-keyboard.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB;AAGD,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,eAAe,EAAE,MAAM,GACtB,aAAa,CAGf;AA+BD,wBAAgB,WAAW,IAAI,aAAa,CAE3C"}

package/dist/runtime/use-keyboard.js

@@ -0,0 +1,34 @@
+"use client";
+import { useSyncExternalStore } from "react";
+const CLOSED = { inset: 0, open: false };
+export const KEYBOARD_THRESHOLD_PX = 120;
+export function keyboardStateFrom(innerHeight, visualHeight, visualOffsetTop) {
+    const inset = Math.max(0, innerHeight - visualHeight - visualOffsetTop);
+    return inset > KEYBOARD_THRESHOLD_PX ? { inset, open: true } : CLOSED;
+}
+let snapshot = CLOSED;
+function readKeyboard() {
+    const viewport = window.visualViewport;
+    if (!viewport)
+        return CLOSED;
+    const next = keyboardStateFrom(window.innerHeight, viewport.height, viewport.offsetTop);
+    if (next.inset !== snapshot.inset || next.open !== snapshot.open) {
+        snapshot = next;
+    }
+    return snapshot;
+}
+function subscribe(onChange) {
+    const viewport = window.visualViewport;
+    if (!viewport)
+        return () => undefined;
+    viewport.addEventListener("resize", onChange);
+    viewport.addEventListener("scroll", onChange);
+    return () => {
+        viewport.removeEventListener("resize", onChange);
+        viewport.removeEventListener("scroll", onChange);
+    };
+}
+export function useKeyboard() {
+    return useSyncExternalStore(subscribe, readKeyboard, () => CLOSED);
+}
+//# sourceMappingURL=use-keyboard.js.map

package/dist/runtime/use-keyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-keyboard.js","sourceRoot":"","sources":["../../src/runtime/use-keyboard.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAO7C,MAAM,MAAM,GAAkB,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AACxD,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAEzC,MAAM,UAAU,iBAAiB,CAC/B,WAAmB,EACnB,YAAoB,EACpB,eAAuB;IAEvB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,eAAe,CAAC,CAAC;IACxE,OAAO,KAAK,GAAG,qBAAqB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;AACxE,CAAC;AAED,IAAI,QAAQ,GAAkB,MAAM,CAAC;AAErC,SAAS,YAAY;IACnB,MAAM,QAAQ,GAAG,MAAM,CAAC,cAAc,CAAC;IACvC,IAAI,CAAC,QAAQ;QAAE,OAAO,MAAM,CAAC;IAE7B,MAAM,IAAI,GAAG,iBAAiB,CAC5B,MAAM,CAAC,WAAW,EAClB,QAAQ,CAAC,MAAM,EACf,QAAQ,CAAC,SAAS,CACnB,CAAC;IACF,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,EAAE,CAAC;QACjE,QAAQ,GAAG,IAAI,CAAC;IAClB,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,SAAS,CAAC,QAAoB;IACrC,MAAM,QAAQ,GAAG,MAAM,CAAC,cAAc,CAAC;IACvC,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC;IAEtC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9C,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9C,OAAO,GAAG,EAAE;QACV,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW;IACzB,OAAO,oBAAoB,CAAC,SAAS,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC;AACrE,CAAC"}

package/dist/runtime/use-viewport-tier.d.ts

@@ -0,0 +1,10 @@
+export type ViewportTier = "lg" | "md" | "sm" | "xs";
+export declare const TIER_MIN_WIDTH: {
+    readonly lg: 1440;
+    readonly md: 1128;
+    readonly sm: 768;
+    readonly xs: 0;
+};
+export declare function tierForWidth(width: number): ViewportTier;
+export declare function useViewportTier(): ViewportTier;
+//# sourceMappingURL=use-viewport-tier.d.ts.map

package/dist/runtime/use-viewport-tier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewport-tier.d.ts","sourceRoot":"","sources":["../../src/runtime/use-viewport-tier.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,eAAO,MAAM,cAAc;;;;;CAAkD,CAAC;AAE9E,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,CAKxD;AAcD,wBAAgB,eAAe,IAAI,YAAY,CAM9C"}

package/dist/runtime/use-viewport-tier.js

@@ -0,0 +1,24 @@
+"use client";
+import { useSyncExternalStore } from "react";
+export const TIER_MIN_WIDTH = { lg: 1440, md: 1128, sm: 768, xs: 0 };
+export function tierForWidth(width) {
+    if (width >= TIER_MIN_WIDTH.lg)
+        return "lg";
+    if (width >= TIER_MIN_WIDTH.md)
+        return "md";
+    if (width >= TIER_MIN_WIDTH.sm)
+        return "sm";
+    return "xs";
+}
+const BREAKPOINTS = [TIER_MIN_WIDTH.sm, TIER_MIN_WIDTH.md, TIER_MIN_WIDTH.lg];
+function subscribe(onChange) {
+    const queries = BREAKPOINTS.map((min) => window.matchMedia(`(min-width: ${min}px)`));
+    queries.forEach((query) => query.addEventListener("change", onChange));
+    return () => {
+        queries.forEach((query) => query.removeEventListener("change", onChange));
+    };
+}
+export function useViewportTier() {
+    return useSyncExternalStore(subscribe, () => tierForWidth(window.innerWidth), () => "xs");
+}
+//# sourceMappingURL=use-viewport-tier.js.map

package/dist/runtime/use-viewport-tier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-viewport-tier.js","sourceRoot":"","sources":["../../src/runtime/use-viewport-tier.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI7C,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAW,CAAC;AAE9E,MAAM,UAAU,YAAY,CAAC,KAAa;IACxC,IAAI,KAAK,IAAI,cAAc,CAAC,EAAE;QAAE,OAAO,IAAI,CAAC;IAC5C,IAAI,KAAK,IAAI,cAAc,CAAC,EAAE;QAAE,OAAO,IAAI,CAAC;IAC5C,IAAI,KAAK,IAAI,cAAc,CAAC,EAAE;QAAE,OAAO,IAAI,CAAC;IAC5C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,cAAc,CAAC,EAAE,EAAE,cAAc,CAAC,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC;AAE9E,SAAS,SAAS,CAAC,QAAoB;IACrC,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACtC,MAAM,CAAC,UAAU,CAAC,eAAe,GAAG,KAAK,CAAC,CAC3C,CAAC;IACF,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvE,OAAO,GAAG,EAAE;QACV,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC5E,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO,oBAAoB,CACzB,SAAS,EACT,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,EACrC,GAAG,EAAE,CAAC,IAAI,CACX,CAAC;AACJ,CAAC"}

package/dist/snackbar/snackbar.css

@@ -0,0 +1,95 @@
+@layer components {
+  .adj-snackbar {
+    position: fixed;
+    inset-inline: max(0.5rem, env(safe-area-inset-left, 0)) max(0.5rem, env(safe-area-inset-right, 0));
+    inset-block-end: calc(var(--adj-snackbar-offset, 0.5rem) + env(safe-area-inset-bottom, 0));
+    z-index: var(--adj-snackbar-z-index, 60);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: 0.25rem;
+    align-items: center;
+    box-sizing: border-box;
+    width: auto;
+    max-width: var(--adj-snackbar-max-width, 36rem);
+    min-height: 3rem;
+    padding: 0.25rem 0.5rem 0.25rem 1rem;
+    margin-inline: auto;
+    color: var(--adj-snackbar-color, var(--background, Canvas));
+    background: var(--adj-snackbar-background, var(--foreground, CanvasText));
+    border: 1px solid var(--adj-snackbar-border, color-mix(in srgb, currentColor 20%, transparent));
+    border-radius: var(--radius-sm, max(0px, calc(var(--radius, 0.625rem) - 4px)));
+    animation: adj-snackbar-in 160ms ease-out;
+  }
+
+  body:has(.adj-navigation-tabs) .adj-snackbar {
+    --adj-snackbar-offset: 4.5rem;
+  }
+
+  .adj-snackbar__message {
+    min-width: 0;
+    padding-block: 0.625rem;
+    overflow-wrap: anywhere;
+  }
+
+  .adj-snackbar__action,
+  .adj-snackbar__close {
+    min-width: 3rem;
+    min-height: 3rem;
+    color: var(--adj-snackbar-action-color, var(--primary, currentColor));
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  }
+
+  .adj-snackbar__action {
+    padding-inline: 0.75rem;
+  }
+
+  .adj-snackbar__close {
+    display: grid;
+    width: 3rem;
+    padding: 0;
+    color: var(--adj-snackbar-close-color, currentColor);
+    place-items: center;
+  }
+
+  .adj-snackbar__close > svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: currentColor;
+  }
+
+  .adj-snackbar__action:hover,
+  .adj-snackbar__close:hover {
+    background: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .adj-snackbar__action:focus-visible,
+  .adj-snackbar__close:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+  }
+
+  @media (min-width: 48rem) {
+    body:has(.adj-navigation-tabs) .adj-snackbar {
+      --adj-snackbar-offset: 0.5rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .adj-snackbar {
+      animation: none;
+    }
+  }
+}
+
+@keyframes adj-snackbar-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/dist/snackbar/snackbar.d.ts

@@ -0,0 +1,15 @@
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
+import "./snackbar.css";
+export type SnackbarDuration = "short" | "long" | "indefinite" | number;
+export interface SnackbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    readonly actionLabel?: ReactNode;
+    readonly closeButton?: boolean;
+    readonly closeLabel?: string;
+    readonly duration?: SnackbarDuration;
+    readonly message: ReactNode;
+    readonly onAction?: (event: MouseEvent<HTMLButtonElement>) => void;
+    readonly onOpenChange?: (open: boolean) => void;
+    readonly open: boolean;
+}
+export declare function Snackbar({ actionLabel, className, closeButton, closeLabel, duration, message, onAction, onOpenChange, open, role, ...props }: SnackbarProps): import("react").JSX.Element | null;
+//# sourceMappingURL=snackbar.d.ts.map

package/dist/snackbar/snackbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;AAExE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IACrC,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB;AASD,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,SAAS,EACT,WAAmB,EACnB,UAA8B,EAC9B,QAAkB,EAClB,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,IAAI,EACJ,IAAe,EACf,GAAG,KAAK,EACT,EAAE,aAAa,sCAmDf"}

package/dist/snackbar/snackbar.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, } from "react";
+import { Text } from "../text/text.js";
+import "./snackbar.css";
+function durationInMilliseconds(duration) {
+    if (typeof duration === "number")
+        return Math.max(0, duration);
+    if (duration === "short")
+        return 4_000;
+    if (duration === "long")
+        return 10_000;
+    return undefined;
+}
+export function Snackbar({ actionLabel, className, closeButton = false, closeLabel = "Dismiss message", duration = "short", message, onAction, onOpenChange, open, role = "status", ...props }) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const timeoutDuration = durationInMilliseconds(duration);
+        if (timeoutDuration === undefined || onOpenChange === undefined)
+            return;
+        const timeout = window.setTimeout(() => {
+            onOpenChange(false);
+        }, timeoutDuration);
+        return () => window.clearTimeout(timeout);
+    }, [duration, onOpenChange, open]);
+    if (!open)
+        return null;
+    const classes = ["adj-snackbar", className].filter(Boolean).join(" ");
+    return (_jsxs("div", { "aria-live": "polite", className: classes, role: role, ...props, children: [_jsx(Text, { className: "adj-snackbar__message", variant: "body-medium", children: message }), actionLabel !== undefined ? (_jsx("button", { className: "adj-snackbar__action", onClick: (event) => {
+                    onAction?.(event);
+                    if (!event.defaultPrevented)
+                        onOpenChange?.(false);
+                }, type: "button", children: _jsx(Text, { variant: "label-large", children: actionLabel }) })) : null, closeButton ? (_jsx("button", { "aria-label": closeLabel, className: "adj-snackbar__close", onClick: () => onOpenChange?.(false), type: "button", children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: _jsx("path", { d: "M6.7 5.3 12 10.6l5.3-5.3 1.4 1.4-5.3 5.3 5.3 5.3-1.4 1.4-5.3-5.3-5.3 5.3-1.4-1.4 5.3-5.3-5.3-5.3z" }) }) })) : null] }));
+}
+//# sourceMappingURL=snackbar.js.map

package/dist/snackbar/snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,SAAS,GAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,gBAAgB,CAAC;AAgBxB,SAAS,sBAAsB,CAAC,QAA0B;IACxD,IAAI,OAAO,QAAQ,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC/D,IAAI,QAAQ,KAAK,OAAO;QAAE,OAAO,KAAK,CAAC;IACvC,IAAI,QAAQ,KAAK,MAAM;QAAE,OAAO,MAAM,CAAC;IACvC,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,EACvB,WAAW,EACX,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,UAAU,GAAG,iBAAiB,EAC9B,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,IAAI,EACJ,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACM;IACd,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,eAAe,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;QACzD,IAAI,eAAe,KAAK,SAAS,IAAI,YAAY,KAAK,SAAS;YAAE,OAAO;QAExE,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrC,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC,EAAE,eAAe,CAAC,CAAC;QAEpB,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,OAAO,GAAG,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtE,OAAO,CACL,4BAAe,QAAQ,EAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,KAAM,KAAK,aAC/D,KAAC,IAAI,IAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAC,aAAa,YAC1D,OAAO,GACH,EAEN,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,iBACE,SAAS,EAAC,sBAAsB,EAChC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACjB,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;oBAClB,IAAI,CAAC,KAAK,CAAC,gBAAgB;wBAAE,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC;gBACrD,CAAC,EACD,IAAI,EAAC,QAAQ,YAEb,KAAC,IAAI,IAAC,OAAO,EAAC,aAAa,YAAE,WAAW,GAAQ,GACzC,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,WAAW,CAAC,CAAC,CAAC,CACb,+BACc,UAAU,EACtB,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,EACpC,IAAI,EAAC,QAAQ,YAEb,6BAAiB,MAAM,EAAC,OAAO,EAAC,WAAW,YACzC,eAAM,CAAC,EAAC,mGAAmG,GAAG,GAC1G,GACC,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/switch/switch.css

@@ -0,0 +1,164 @@
+@layer components {
+.adj-switch {
+  position: relative;
+  display: inline-flex;
+  gap: 0.75rem;
+  align-items: center;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  color: var(--adj-switch-label-color, var(--foreground, CanvasText));
+  font: inherit;
+  cursor: pointer;
+  user-select: none;
+}
+
+.adj-switch[data-labeled="false"] {
+  justify-content: center;
+  width: 2.75rem;
+}
+
+.adj-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.adj-switch__track {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  width: 2.75rem;
+  height: 1.5rem;
+  flex: none;
+  overflow: hidden;
+  background: var(
+    --adj-switch-track-background,
+    var(--muted, color-mix(in srgb, CanvasText 10%, Canvas))
+  );
+  border: 2px solid var(--adj-switch-track-outline, var(--border, CanvasText));
+  border-radius: var(--adj-switch-radius, var(--radius-lg, var(--radius, 0.625rem)));
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
+}
+
+.adj-switch__track::after {
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  content: "";
+  pointer-events: none;
+  transition: background-color 120ms ease;
+}
+
+.adj-switch__handle {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 0.125rem;
+  display: grid;
+  width: 1rem;
+  height: 1rem;
+  color: var(--adj-switch-handle-icon-color, var(--muted-foreground, CanvasText));
+  background: var(--adj-switch-handle-background, var(--background, Canvas));
+  border-radius: var(
+    --adj-switch-handle-radius,
+    var(--radius-lg, var(--radius, 0.625rem))
+  );
+  transform: translateY(-50%);
+  transition:
+    inset-inline-start 160ms ease,
+    background-color 160ms ease;
+  place-items: center;
+  z-index: 1;
+}
+
+.adj-switch__checked-icon,
+.adj-switch__unchecked-icon {
+  display: grid;
+  width: 0.625rem;
+  height: 0.625rem;
+  place-items: center;
+}
+
+.adj-switch__checked-icon,
+.adj-switch__checked-icon:empty,
+.adj-switch__unchecked-icon:empty {
+  display: none;
+}
+
+.adj-switch__input:checked + .adj-switch__track {
+  background: var(--adj-switch-selected-track, var(--primary, CanvasText));
+  border-color: var(--adj-switch-selected-track, var(--primary, CanvasText));
+}
+
+.adj-switch__input:checked + .adj-switch__track .adj-switch__handle {
+  inset-inline-start: 1.375rem;
+  color: var(--adj-switch-selected-icon-color, var(--primary, CanvasText));
+  background: var(--adj-switch-selected-handle, var(--primary-foreground, Canvas));
+}
+
+.adj-switch__input:checked + .adj-switch__track .adj-switch__unchecked-icon {
+  display: none;
+}
+
+.adj-switch__input:checked + .adj-switch__track .adj-switch__checked-icon:not(:empty) {
+  display: grid;
+}
+
+.adj-switch:hover .adj-switch__track::after {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.adj-switch:active .adj-switch__track::after {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.adj-switch__input:focus-visible + .adj-switch__track {
+  outline: 2px solid var(--ring, currentColor);
+  outline-offset: 3px;
+}
+
+.adj-switch:has(.adj-switch__input:disabled) {
+  cursor: default;
+  opacity: 0.38;
+}
+
+.adj-switch:has(.adj-switch__input:disabled) .adj-switch__track::after {
+  display: none;
+}
+
+.adj-switch__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .adj-switch__track,
+  .adj-switch__handle {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .adj-switch__track {
+    forced-color-adjust: none;
+  }
+
+  .adj-switch__input:checked + .adj-switch__track {
+    color: HighlightText;
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  .adj-switch__input:checked + .adj-switch__track .adj-switch__handle {
+    color: Highlight;
+    background: HighlightText;
+  }
+}
+}

package/dist/switch/switch.d.ts

@@ -0,0 +1,11 @@
+import type { ChangeEvent, ComponentPropsWithRef, ReactNode } from "react";
+import "./switch.css";
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"input">, "children" | "onChange" | "type"> {
+    readonly checkedIcon?: ReactNode;
+    readonly label?: ReactNode;
+    readonly onCheckedChange?: (checked: boolean) => void;
+    readonly onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    readonly uncheckedIcon?: ReactNode;
+}
+export declare function Switch({ checkedIcon, className, label, onChange, onCheckedChange, uncheckedIcon, ...props }: SwitchProps): import("react").JSX.Element;
+//# sourceMappingURL=switch.d.ts.map