@hewnui/ui 0.0.0-stage → 0.1.0

package/dist/providers/motion-provider.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { coerceMotionMode, loadMotionFeatures, motionConfigReduced, parseMotionPreference, resolveMotionMode, } from "@hewnui/motion";
+import { LazyMotion, MotionConfig } from "motion/react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+const HewnMotionContext = createContext(null);
+const STORAGE_KEY = "kp-motion";
+export function MotionProvider({ children, defaultMotion = "full", }) {
+    const [motion, setMotionState] = useState(() => coerceMotionMode(defaultMotion));
+    const [reducedMotion, setReducedMotion] = useState(false);
+    useEffect(() => {
+        const stored = parseMotionPreference(localStorage.getItem(STORAGE_KEY));
+        if (stored)
+            setMotionState(stored);
+        const query = matchMedia("(prefers-reduced-motion: reduce)");
+        const sync = () => setReducedMotion(query.matches);
+        sync();
+        query.addEventListener("change", sync);
+        return () => query.removeEventListener("change", sync);
+    }, []);
+    const effectiveMode = resolveMotionMode(motion, reducedMotion);
+    const motionEnabled = effectiveMode === "full";
+    useEffect(() => {
+        document.documentElement.dataset.motion = effectiveMode;
+        localStorage.setItem(STORAGE_KEY, motion);
+    }, [motion, effectiveMode]);
+    const setMotion = useCallback((next) => {
+        setMotionState(next);
+    }, []);
+    const value = useMemo(() => ({
+        motion,
+        effectiveMode,
+        motionEnabled,
+        reducedMotion,
+        setMotion,
+    }), [motion, effectiveMode, motionEnabled, reducedMotion, setMotion]);
+    return (_jsx(HewnMotionContext.Provider, { value: value, children: _jsx(LazyMotion, { features: loadMotionFeatures, strict: true, children: _jsx(MotionConfig, { reducedMotion: motionConfigReduced(effectiveMode), children: children }) }) }));
+}
+export function useMotionMode() {
+    const value = useContext(HewnMotionContext);
+    if (!value) {
+        throw new Error("useMotionMode must be used within MotionProvider");
+    }
+    return value;
+}

package/dist/providers/radius-provider.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export declare const radiusScales: readonly ["sharp", "soft", "rounded", "pill"];
+export type RadiusScale = (typeof radiusScales)[number];
+type RadiusContextValue = {
+    radius: RadiusScale;
+    setRadius: (radius: RadiusScale) => void;
+};
+export declare function RadiusProvider({ children, defaultRadius, }: {
+    children: ReactNode;
+    defaultRadius?: RadiusScale;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useRadius(): RadiusContextValue;
+export {};

package/dist/providers/radius-provider.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+export const radiusScales = ["sharp", "soft", "rounded", "pill"];
+const radiusTokens = {
+    sharp: {
+        sm: "0.125rem",
+        md: "0.2rem",
+        lg: "0.3rem",
+        panel: "0.25rem",
+    },
+    rounded: {
+        sm: "0.85rem",
+        md: "1.15rem",
+        lg: "1.5rem",
+        panel: "1.25rem",
+    },
+    pill: {
+        sm: "9999px",
+        md: "9999px",
+        lg: "1.5rem",
+        panel: "1.15rem",
+    },
+};
+const radiusVars = [
+    "--kp-radius-sm",
+    "--kp-radius-md",
+    "--kp-radius-lg",
+    "--kp-radius-panel",
+];
+const RadiusContext = createContext(null);
+const STORAGE_KEY = "kp-radius";
+function isRadius(value) {
+    return radiusScales.includes(value);
+}
+function applyRadiusTokens(radius) {
+    const root = document.documentElement;
+    root.dataset.radius = radius;
+    if (radius === "soft") {
+        for (const key of radiusVars)
+            root.style.removeProperty(key);
+        return;
+    }
+    const tokens = radiusTokens[radius];
+    root.style.setProperty("--kp-radius-sm", tokens.sm);
+    root.style.setProperty("--kp-radius-md", tokens.md);
+    root.style.setProperty("--kp-radius-lg", tokens.lg);
+    root.style.setProperty("--kp-radius-panel", tokens.panel);
+}
+export function RadiusProvider({ children, defaultRadius = "soft", }) {
+    const [radius, setRadiusState] = useState(defaultRadius);
+    useEffect(() => {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored && isRadius(stored))
+            setRadiusState(stored);
+    }, []);
+    useEffect(() => {
+        applyRadiusTokens(radius);
+        localStorage.setItem(STORAGE_KEY, radius);
+    }, [radius]);
+    const setRadius = useCallback((next) => {
+        setRadiusState(next);
+    }, []);
+    const value = useMemo(() => ({ radius, setRadius }), [radius, setRadius]);
+    return (_jsx(RadiusContext.Provider, { value: value, children: children }));
+}
+export function useRadius() {
+    const value = useContext(RadiusContext);
+    if (!value) {
+        throw new Error("useRadius must be used within RadiusProvider");
+    }
+    return value;
+}

package/dist/providers/theme-provider.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+export declare const themePacks: {
+    readonly forest: readonly ["light", "dark"];
+    readonly tide: readonly ["light", "dark"];
+    readonly graphite: readonly ["light", "dark"];
+    readonly dune: readonly ["light"];
+    readonly clay: readonly ["light"];
+    readonly ember: readonly ["dark"];
+};
+export type ThemeName = keyof typeof themePacks;
+export type ThemeMode = "light" | "dark";
+type ThemeContextValue = {
+    theme: ThemeName;
+    mode: ThemeMode;
+    supportedModes: readonly ThemeMode[];
+    setTheme: (theme: ThemeName) => void;
+    setMode: (mode: ThemeMode) => void;
+};
+export declare function ThemeProvider({ children, defaultTheme, defaultMode, }: {
+    children: ReactNode;
+    defaultTheme?: ThemeName;
+    defaultMode?: ThemeMode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/providers/theme-provider.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+export const themePacks = {
+    forest: ["light", "dark"],
+    tide: ["light", "dark"],
+    graphite: ["light", "dark"],
+    dune: ["light"],
+    clay: ["light"],
+    ember: ["dark"],
+};
+const ThemeContext = createContext(null);
+const THEME_KEY = "kp-theme";
+const MODE_KEY = "kp-mode";
+function isTheme(value) {
+    return value in themePacks;
+}
+function normalizeMode(theme, mode) {
+    const modes = themePacks[theme];
+    return modes.includes(mode) ? mode : modes[0];
+}
+export function ThemeProvider({ children, defaultTheme = "forest", defaultMode = "light", }) {
+    const [theme, setThemeState] = useState(defaultTheme);
+    const [mode, setModeState] = useState(normalizeMode(defaultTheme, defaultMode));
+    useEffect(() => {
+        const storedTheme = localStorage.getItem(THEME_KEY);
+        const storedMode = localStorage.getItem(MODE_KEY);
+        const nextTheme = storedTheme && isTheme(storedTheme) ? storedTheme : defaultTheme;
+        const parsedMode = storedMode === "dark" || storedMode === "light"
+            ? storedMode
+            : defaultMode;
+        const nextMode = normalizeMode(nextTheme, parsedMode);
+        setThemeState(nextTheme);
+        setModeState(nextMode);
+    }, [defaultMode, defaultTheme]);
+    useEffect(() => {
+        const root = document.documentElement;
+        root.dataset.theme = theme;
+        root.dataset.mode = mode;
+        root.classList.toggle("dark", mode === "dark");
+        root.style.colorScheme = mode;
+        localStorage.setItem(THEME_KEY, theme);
+        localStorage.setItem(MODE_KEY, mode);
+    }, [mode, theme]);
+    const setTheme = useCallback((nextTheme) => {
+        setThemeState(nextTheme);
+        setModeState((current) => normalizeMode(nextTheme, current));
+    }, []);
+    const setMode = useCallback((nextMode) => {
+        setModeState(normalizeMode(theme, nextMode));
+    }, [theme]);
+    const value = useMemo(() => ({
+        theme,
+        mode,
+        supportedModes: themePacks[theme],
+        setTheme,
+        setMode,
+    }), [mode, setMode, setTheme, theme]);
+    return (_jsx(ThemeContext.Provider, { value: value, children: children }));
+}
+export function useTheme() {
+    const value = useContext(ThemeContext);
+    if (!value)
+        throw new Error("useTheme must be used within ThemeProvider");
+    return value;
+}

package/dist/styles/field.d.ts

@@ -0,0 +1,24 @@
+export type FieldVariant = "outline" | "filled" | "flushed" | "glass";
+export type FieldSize = "sm" | "md" | "lg";
+export declare const fieldRootClass = "flex w-full max-w-sm flex-col gap-1.5 text-sm text-foreground";
+export declare const fieldLabelClass = "font-medium tracking-tight text-foreground";
+export declare const fieldDescriptionClass = "text-xs leading-relaxed text-muted-foreground";
+export declare const fieldErrorClass = "text-xs leading-relaxed text-danger";
+export declare function inputSurfaceClassName({ className, size, variant, }?: {
+    className?: string | undefined;
+    size?: FieldSize | undefined;
+    variant?: FieldVariant | undefined;
+}): string;
+/** @deprecated Prefer inputSurfaceClassName — kept for TextField call sites */
+export declare const inputClassName: typeof inputSurfaceClassName;
+/**
+ * Under glass material, boxed field variants inherit panel glass.
+ * Flushed stays underline-only and must never receive the panel inset ring.
+ */
+export declare function fieldSurfaceProps(variant?: FieldVariant): {
+    readonly "data-kp-field": "flushed";
+    readonly "data-kp-surface"?: never;
+} | {
+    readonly "data-kp-surface": true;
+    readonly "data-kp-field"?: never;
+};

package/dist/styles/field.js

@@ -0,0 +1,36 @@
+import { cn } from "../utils/cn";
+export const fieldRootClass = "flex w-full max-w-sm flex-col gap-1.5 text-sm text-foreground";
+export const fieldLabelClass = "font-medium tracking-tight text-foreground";
+export const fieldDescriptionClass = "text-xs leading-relaxed text-muted-foreground";
+export const fieldErrorClass = "text-xs leading-relaxed text-danger";
+const variants = {
+    outline: cn("border border-[color-mix(in_oklch,var(--kp-foreground)_16%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_88%,var(--kp-foreground)_4%)]", "shadow-[var(--kp-shadow-surface),inset_0_1px_0_oklch(1_0_0/35%)]", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"),
+    filled: cn("border border-transparent", "bg-[color-mix(in_oklch,var(--kp-muted)_72%,transparent)]", "shadow-[inset_0_1px_0_oklch(1_0_0/18%)]", "hover:bg-[color-mix(in_oklch,var(--kp-muted)_88%,transparent)]", "focus-visible:border-ring focus-visible:bg-surface focus-visible:ring-2 focus-visible:ring-ring/30", "focus-within:border-ring focus-within:bg-surface focus-within:ring-2 focus-within:ring-ring/30"),
+    flushed: cn("rounded-none border-0 border-b-2 border-solid bg-transparent px-0", "border-b-[color-mix(in_oklch,var(--kp-foreground)_32%,transparent)]", "shadow-none", "focus-visible:border-b-ring focus-visible:ring-0", "focus-within:border-b-ring focus-within:ring-0", "focus-within:shadow-[0_1px_0_0_color-mix(in_oklch,var(--kp-ring)_55%,transparent)]"),
+    glass: cn("border border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_42%,transparent)]", "backdrop-blur-md backdrop-saturate-150", "shadow-[inset_0_1px_0_oklch(1_0_0/42%),inset_0_0_0_1px_oklch(1_0_0/8%),0_8px_24px_-14px_oklch(0_0_0/28%)]", "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30", "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30"),
+};
+const sizes = {
+    sm: "min-h-9 px-2.5 text-xs rounded-[var(--kp-radius-sm)]",
+    md: "min-h-11 px-3 text-sm rounded-[var(--kp-radius-md)]",
+    lg: "min-h-12 px-4 text-base rounded-[var(--kp-radius-md)]",
+};
+export function inputSurfaceClassName({ className, size = "md", variant = "outline", } = {}) {
+    return cn("w-full text-foreground outline-none", "transition-[border-color,box-shadow,background-color,backdrop-filter]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-45", "invalid:border-danger", variants[variant], variant !== "flushed"
+        ? sizes[size]
+        : size === "sm"
+            ? "min-h-8 text-xs"
+            : size === "lg"
+                ? "min-h-11 text-base"
+                : "min-h-10 text-sm", className);
+}
+/** @deprecated Prefer inputSurfaceClassName — kept for TextField call sites */
+export const inputClassName = inputSurfaceClassName;
+/**
+ * Under glass material, boxed field variants inherit panel glass.
+ * Flushed stays underline-only and must never receive the panel inset ring.
+ */
+export function fieldSurfaceProps(variant = "outline") {
+    return variant === "flushed"
+        ? { "data-kp-field": "flushed" }
+        : { "data-kp-surface": true };
+}

package/dist/styles/overlays.d.ts

@@ -0,0 +1,3 @@
+export declare const popoverSurfaceClass: string;
+export declare const menuItemClass: string;
+export declare const fieldTriggerClass: string;

package/dist/styles/overlays.js

@@ -0,0 +1,4 @@
+import { cn } from "../utils/cn";
+export const popoverSurfaceClass = cn("overflow-auto rounded-[var(--kp-radius-panel)] border bg-surface-raised p-1", "shadow-[var(--kp-shadow-surface)] outline-none");
+export const menuItemClass = cn("flex cursor-default items-center gap-2 rounded-[var(--kp-radius-sm)]", "px-3 py-2 text-sm outline-none", "data-[focused]:bg-muted data-[disabled]:opacity-45");
+export const fieldTriggerClass = cn("inline-flex min-h-11 w-full max-w-sm items-center justify-between gap-2", "rounded-[var(--kp-radius-md)] border bg-surface px-3 text-sm", "shadow-[var(--kp-shadow-surface)] outline-none", "transition-[transform,background-color,border-color]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "data-[pressed]:scale-[0.96] data-[disabled]:opacity-45", "data-[focus-within]:ring-2 data-[focus-within]:ring-ring", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring");

package/dist/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare function cn(...parts: Array<string | false | null | undefined>): string;

package/dist/utils/cn.js

@@ -0,0 +1,3 @@
+export function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}