@echojs-ecosystem/ui 0.1.0

package/README.md

@@ -0,0 +1,102 @@
+<div align="center">
+
+# @echojs-ecosystem/ui
+
+**Accessible UI primitives for HyperDOM — theme, variants, and headless mode.**
+
+[![npm](https://img.shields.io/npm/v/@echojs-ecosystem/ui)](https://www.npmjs.com/package/@echojs-ecosystem/ui)
+[![docs](https://img.shields.io/badge/docs-echojs.dev-blue)](https://echojs.dev/docs/packages/ui)
+
+</div>
+
+---
+
+Component library for [`@echojs-ecosystem/hyperdom`](https://www.npmjs.com/package/@echojs-ecosystem/hyperdom). No React, no VDOM — real DOM nodes with **ARIA-first** semantics, **Tailwind** styling, and **tailwind-variants**.
+
+## Features
+
+- **Subpath exports** — `@echojs-ecosystem/ui/button` for tree-shaking
+- **`UIProvider`** — global theme, default variants, overrides
+- **Headless mode** — behavior & a11y without visual classes
+- **Components** — Button, Input, Textarea, Field, Checkbox, Label, …
+- **Storybook** — component catalog in `packages/ui`
+
+## Install
+
+```bash
+npm install @echojs-ecosystem/ui @echojs-ecosystem/hyperdom
+```
+
+## Quick start
+
+```ts
+import { UIProvider } from "@echojs-ecosystem/ui/provider";
+import { createTheme } from "@echojs-ecosystem/ui/theme";
+import { Button } from "@echojs-ecosystem/ui/button";
+import { h, render } from "@echojs-ecosystem/hyperdom";
+
+const theme = createTheme({
+  prefix: "echo",
+  components: {
+    button: { defaultVariants: { variant: "primary", size: "md" } },
+  },
+});
+
+render(
+  UIProvider({
+    theme,
+    children: () => Button({ children: "Save", variant: "primary" }),
+  }),
+  document.getElementById("app")!,
+);
+```
+
+## Subpath imports
+
+| Subpath | Components |
+|---------|------------|
+| `@echojs-ecosystem/ui/button` | Button |
+| `@echojs-ecosystem/ui/input` | Input |
+| `@echojs-ecosystem/ui/textarea` | Textarea |
+| `@echojs-ecosystem/ui/field` | Field, `mergeFieldControlProps` |
+| `@echojs-ecosystem/ui/checkbox` | Checkbox |
+| `@echojs-ecosystem/ui/provider` | UIProvider |
+| `@echojs-ecosystem/ui/theme` | `createTheme`, variants |
+| `@echojs-ecosystem/ui/utils` | `cn`, `mergeProps`, … |
+
+## Field + Input pattern
+
+```ts
+import { Field, mergeFieldControlProps } from "@echojs-ecosystem/ui/field";
+import { Input } from "@echojs-ecosystem/ui/input";
+
+Field({
+  label: "Email",
+  error: emailError.value(),
+  children: (ctx) =>
+    Input(
+      mergeFieldControlProps(ctx.inputProps, {
+        value: email.value(),
+        onInput: (e) => email.set(e.currentTarget.value),
+      }),
+    ),
+});
+```
+
+## Headless mode
+
+```ts
+UIProvider({ headless: true, children: () => App() });
+Button({ headless: true, children: "Save" }); // a11y only, no theme classes
+```
+
+## Storybook
+
+```bash
+bun run storybook        # from packages/ui
+bun run storybook:build  # static catalog
+```
+
+## Documentation
+
+[echojs.dev/docs/packages/ui](https://echojs.dev/docs/packages/ui)

package/dist/button.d.ts

@@ -0,0 +1,20 @@
+import { Child } from '@echojs-ecosystem/hyperdom';
+import { B as ButtonProps, a as ButtonSize } from './button.types-B0SrEYRV.js';
+export { b as ButtonRadius, c as ButtonVariant } from './button.types-B0SrEYRV.js';
+import { T as TVConfig, V as VariantProps } from './variants-Bj38CFcH.js';
+import './types-CSHcGa_F.js';
+import './cn-rGlUI2mx.js';
+
+declare const Button: (props: ButtonProps) => Child;
+
+/** Default spinner for {@link Button} pending state (`data-slot="spinner"`). */
+declare const defaultButtonSpinner: (size?: ButtonSize) => Child;
+
+/** HeroUI v3–inspired button styles (Tailwind + CSS variables). */
+declare const buttonStyles: ((options?: Record<string, unknown>) => string) & {
+    _config: TVConfig;
+};
+
+type ButtonVariantProps = VariantProps<typeof buttonStyles>;
+
+export { Button, ButtonProps, ButtonSize, type ButtonVariantProps, buttonStyles, defaultButtonSpinner };

package/dist/button.js

@@ -0,0 +1,559 @@
+import { h } from '@echojs-ecosystem/hyperdom';
+
+// src/components/button/button.ts
+
+// src/theme/default-theme.ts
+var defaultTheme = {
+  prefix: "echo",
+  headless: false,
+  components: {
+    button: {
+      defaultVariants: {
+        variant: "primary",
+        size: "md",
+        radius: "full"
+      }
+    },
+    input: {
+      defaultVariants: {
+        variant: "outline",
+        size: "md"
+      }
+    },
+    inputMask: {
+      defaultVariants: {
+        variant: "outline",
+        size: "md"
+      }
+    },
+    inputOtp: {
+      defaultVariants: {
+        variant: "outline",
+        size: "md"
+      }
+    },
+    inputTags: {
+      defaultVariants: {
+        variant: "outline",
+        size: "md"
+      }
+    },
+    textarea: {
+      defaultVariants: {
+        variant: "outline",
+        size: "md",
+        resize: "vertical"
+      }
+    },
+    checkbox: {
+      defaultVariants: {
+        size: "md"
+      }
+    },
+    iconButton: {
+      defaultVariants: {
+        variant: "ghost",
+        size: "md"
+      }
+    }
+  }
+};
+
+// src/theme/create-theme.ts
+var mergeComponentConfig = (base, next) => {
+  if (!base && !next) return void 0;
+  if (!base) return next ? { ...next } : void 0;
+  if (!next) return { ...base };
+  return {
+    baseClass: next.baseClass ?? base.baseClass,
+    className: next.className ?? base.className,
+    defaultProps: { ...base.defaultProps, ...next.defaultProps },
+    defaultVariants: { ...base.defaultVariants, ...next.defaultVariants },
+    variants: { ...base.variants, ...next.variants }
+  };
+};
+var mergeComponents = (base, next) => {
+  const keys = /* @__PURE__ */ new Set([...Object.keys(base ?? {}), ...Object.keys(next ?? {})]);
+  const merged = {};
+  for (const key of keys) {
+    const slice = mergeComponentConfig(base?.[key], next?.[key]);
+    if (slice) merged[key] = slice;
+  }
+  return merged;
+};
+var createTheme = (input, base = defaultTheme) => ({
+  prefix: input.prefix ?? base.prefix,
+  headless: input.headless ?? base.headless,
+  components: mergeComponents(base.components, input.components)
+});
+
+// src/theme/theme-context.ts
+var stack = [];
+var getUIContext = () => stack[stack.length - 1];
+var getUIContextOrDefault = () => getUIContext() ?? createUIContextValue({});
+var createUIContextValue = (input, parent = getUIContext()) => {
+  const parentTheme = parent?.theme ?? defaultTheme;
+  const theme = createTheme(input.theme ?? {}, parentTheme);
+  const headless = input.headless ?? theme.headless ?? parent?.headless ?? false;
+  return {
+    theme: { ...theme, headless },
+    headless
+  };
+};
+
+// src/theme/variants.ts
+var tv = (config) => {
+  const resolve = (options) => {
+    const parts = [];
+    if (config.base) parts.push(config.base);
+    const resolved = { ...config.defaultVariants ?? {}, ...options ?? {} };
+    const variants = config.variants ?? {};
+    for (const [variantName, map] of Object.entries(variants)) {
+      const value = resolved[variantName];
+      if (value === void 0) continue;
+      const key = typeof value === "boolean" ? value ? "true" : "false" : String(value);
+      const cls = map[key];
+      if (cls) parts.push(cls);
+    }
+    for (const compound of config.compoundVariants ?? []) {
+      const { class: compoundClass, ...conditions } = compound;
+      const matches = Object.entries(conditions).every(([name, value]) => resolved[name] === value);
+      if (matches && compoundClass) parts.push(compoundClass);
+    }
+    return parts.filter(Boolean).join(" ");
+  };
+  if (config.slots) {
+    const slotFns = {};
+    for (const [slot, slotBase] of Object.entries(config.slots)) {
+      slotFns[slot] = (slotOptions) => {
+        const composed = [slotBase, resolve(slotOptions)].filter(Boolean).join(" ");
+        return composed.trim();
+      };
+    }
+    slotFns._config = config;
+    return slotFns;
+  }
+  const fn = (options) => resolve(options);
+  fn._config = config;
+  return fn;
+};
+var resolveVariantClasses = (variantFn, options, headless) => {
+  if (headless || !variantFn) return void 0;
+  return variantFn(options);
+};
+
+// src/core/variant-keys.ts
+var getVariantKeysFromFn = (variantsFn) => {
+  const variants = variantsFn?._config?.variants;
+  if (!variants) return [];
+  return Object.keys(variants);
+};
+var resolveVariantOptions = (variantsFn, themeDefaults, props) => {
+  const keys = [
+    .../* @__PURE__ */ new Set([
+      ...getVariantKeysFromFn(variantsFn),
+      ...Object.keys(variantsFn?._config?.defaultVariants ?? {}),
+      ...Object.keys(themeDefaults ?? {})
+    ])
+  ];
+  const picked = {};
+  for (const key of keys) {
+    if (props[key] !== void 0) picked[key] = props[key];
+  }
+  return {
+    ...variantsFn?._config?.defaultVariants,
+    ...themeDefaults,
+    ...picked
+  };
+};
+
+// src/utils/cn.ts
+var defaultClassNameMerger = (...values) => {
+  const out = [];
+  const walk = (value) => {
+    if (value == null || value === false) return;
+    if (typeof value === "string") {
+      if (value) out.push(value);
+      return;
+    }
+    if (Array.isArray(value)) {
+      for (const item of value) walk(item);
+      return;
+    }
+    for (const [key, enabled] of Object.entries(value)) {
+      if (enabled) out.push(key);
+    }
+  };
+  for (const value of values) walk(value);
+  return out.join(" ");
+};
+var classNameMerger = defaultClassNameMerger;
+var cn = (...values) => classNameMerger(...values);
+
+// src/utils/compose-event-handlers.ts
+var composeEventHandlers = (userHandler, internalHandler, options = {}) => {
+  if (!userHandler && !internalHandler) return void 0;
+  if (!userHandler) return internalHandler;
+  if (!internalHandler) return userHandler;
+  const { checkDefaultPrevented = false } = options;
+  return (event) => {
+    userHandler(event);
+    if (checkDefaultPrevented && event?.defaultPrevented) return;
+    internalHandler(event);
+  };
+};
+
+// src/utils/merge-props.ts
+var CLASS_KEYS = /* @__PURE__ */ new Set(["class", "className"]);
+var isEventHandlerKey = (key) => key.startsWith("on") || key.startsWith("on:");
+var mergeClassValues = (...values) => {
+  const merged = cn(...values);
+  return merged || void 0;
+};
+var mergePair = (target, source) => {
+  if (!source) return;
+  for (const [key, value] of Object.entries(source)) {
+    if (value === void 0) continue;
+    if (CLASS_KEYS.has(key)) {
+      const mergedClass = mergeClassValues(target.className, value);
+      if (mergedClass !== void 0) {
+        target.className = mergedClass;
+        target.class = mergedClass;
+      }
+      continue;
+    }
+    if (isEventHandlerKey(key)) {
+      const existing = target[key];
+      target[key] = composeEventHandlers(
+        value,
+        existing,
+        { checkDefaultPrevented: true }
+      );
+      continue;
+    }
+    target[key] = value;
+  }
+};
+var mergeProps = (defaultProps, providerProps, componentProps) => {
+  const merged = {};
+  mergePair(merged, defaultProps);
+  mergePair(merged, providerProps);
+  mergePair(merged, componentProps);
+  return merged;
+};
+
+// src/core/component.ts
+var themeKeyFromName = (name) => name.charAt(0).toLowerCase() + name.slice(1);
+var createUIComponent = (config) => {
+  const themeKey = themeKeyFromName(config.name);
+  return (props) => {
+    const ctx = getUIContextOrDefault();
+    const themeSlice = ctx.theme.components?.[themeKey];
+    const headless = props.headless ?? ctx.headless ?? ctx.theme.headless ?? false;
+    const providerProps = {
+      ...themeSlice?.defaultProps,
+      ...themeSlice?.defaultVariants
+    };
+    if (themeSlice?.className) {
+      providerProps.className = themeSlice.className;
+    }
+    const merged = mergeProps(
+      config.defaultProps,
+      providerProps,
+      props
+    );
+    const variantOptions = resolveVariantOptions(
+      config.variants,
+      themeSlice?.defaultVariants,
+      merged
+    );
+    const variantClass = resolveVariantClasses(config.variants, variantOptions, headless);
+    const visualClass = headless ? void 0 : cn(themeSlice?.baseClass, themeSlice?.className, variantClass, merged.className, merged.class);
+    const finalProps = {
+      ...merged,
+      className: visualClass,
+      class: visualClass
+    };
+    if (config.render) {
+      return config.render({
+        props: finalProps,
+        headless,
+        className: visualClass,
+        ctx
+      });
+    }
+    const { children, as, ...rest } = finalProps;
+    const tag = as ?? config.defaultTag;
+    return h(tag, rest, children);
+  };
+};
+
+// src/utils/data-attributes.ts
+var dataDisabled = (disabled) => disabled ? { "data-disabled": "" } : {};
+var dataPending = (pending) => pending ? { "data-pending": "" } : {};
+var spinnerSizeClass = {
+  xs: "size-3.5 border",
+  sm: "size-4 border",
+  md: "size-4 border-2",
+  lg: "size-5 border-2",
+  xl: "size-5 border-2"
+};
+var defaultButtonSpinner = (size = "md") => h(
+  "span",
+  {
+    "data-slot": "spinner",
+    "data-btn-icon": "",
+    className: [
+      "inline-block shrink-0 animate-spin rounded-full border-current border-t-transparent",
+      spinnerSizeClass[size]
+    ].join(" "),
+    "aria-hidden": "true"
+  }
+);
+
+// src/components/button/button.styles.ts
+var buttonStyles = tv({
+  base: [
+    "relative isolate inline-flex w-fit origin-center items-center justify-center gap-2",
+    "font-medium whitespace-nowrap select-none outline-none",
+    "rounded-3xl",
+    "transition-[transform,background-color,box-shadow,color] duration-200 ease-out",
+    "motion-reduce:transition-none",
+    "cursor-pointer",
+    "bg-[var(--button-bg)] text-[var(--button-fg)]",
+    "hover:bg-[var(--button-bg-hover)]",
+    "active:scale-[0.97] active:bg-[var(--button-bg-pressed)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-400",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+    "data-[pending]:pointer-events-none data-[pending]:cursor-wait",
+    "[&_svg:not([data-slot=spinner]_svg)]:pointer-events-none [&_svg:not([data-slot=spinner]_svg)]:shrink-0",
+    "[&_[data-btn-icon]]:inline-flex [&_[data-btn-icon]]:shrink-0"
+  ].join(" "),
+  variants: {
+    variant: {
+      primary: [
+        "[--button-bg:var(--color-accent)]",
+        "[--button-bg-hover:var(--color-accent-hover)]",
+        "[--button-bg-pressed:var(--color-accent-hover)]",
+        "[--button-fg:var(--color-accent-foreground)]",
+        "focus-visible:ring-zinc-900"
+      ].join(" "),
+      secondary: [
+        "[--button-bg:var(--color-default)]",
+        "[--button-bg-hover:var(--color-default-hover)]",
+        "[--button-bg-pressed:var(--color-default-hover)]",
+        "[--button-fg:var(--color-default-foreground)]"
+      ].join(" "),
+      tertiary: [
+        "[--button-bg:var(--color-default)]",
+        "[--button-bg-hover:var(--color-default-hover)]",
+        "[--button-bg-pressed:var(--color-default-hover)]",
+        "[--button-fg:var(--color-zinc-700)]"
+      ].join(" "),
+      outline: [
+        "border border-[var(--color-border)]",
+        "[--button-bg:transparent]",
+        "[--button-bg-hover:color-mix(in_srgb,var(--color-default)_60%,transparent)]",
+        "[--button-bg-pressed:var(--color-default)]",
+        "[--button-fg:var(--color-default-foreground)]"
+      ].join(" "),
+      ghost: [
+        "[--button-bg:transparent]",
+        "[--button-bg-hover:var(--color-default)]",
+        "[--button-bg-pressed:var(--color-default)]",
+        "[--button-fg:var(--color-default-foreground)]"
+      ].join(" "),
+      danger: [
+        "[--button-bg:var(--color-danger)]",
+        "[--button-bg-hover:var(--color-danger-hover)]",
+        "[--button-bg-pressed:var(--color-danger-hover)]",
+        "[--button-fg:var(--color-danger-foreground)]",
+        "focus-visible:ring-red-600"
+      ].join(" "),
+      dangerSoft: [
+        "[--button-bg:var(--color-danger-soft)]",
+        "[--button-bg-hover:var(--color-danger-soft-hover)]",
+        "[--button-bg-pressed:var(--color-danger-soft-hover)]",
+        "[--button-fg:var(--color-danger-soft-foreground)]",
+        "focus-visible:ring-red-400"
+      ].join(" "),
+      /** @deprecated Use `danger`. */
+      destructive: [
+        "[--button-bg:var(--color-danger)]",
+        "[--button-bg-hover:var(--color-danger-hover)]",
+        "[--button-bg-pressed:var(--color-danger-hover)]",
+        "[--button-fg:var(--color-danger-foreground)]",
+        "focus-visible:ring-red-600"
+      ].join(" "),
+      link: [
+        "h-auto min-h-0 w-auto gap-1 rounded-none px-0",
+        "[--button-bg:transparent] [--button-bg-hover:transparent] [--button-bg-pressed:transparent]",
+        "[--button-fg:var(--color-zinc-900)]",
+        "underline-offset-4 hover:underline active:scale-100"
+      ].join(" ")
+    },
+    size: {
+      xs: "h-8 gap-1.5 px-2.5 text-xs md:h-7 [&_[data-btn-icon]]:size-3.5 active:scale-[0.98]",
+      sm: "h-9 gap-2 px-3 text-sm md:h-8 [&_[data-btn-icon]]:size-4 active:scale-[0.98]",
+      md: "h-10 gap-2 px-4 text-sm md:h-9 [&_[data-btn-icon]]:size-4",
+      lg: "h-11 gap-2 px-4 text-base md:h-10 [&_[data-btn-icon]]:size-5 active:scale-[0.96]",
+      xl: "h-12 gap-2.5 px-5 text-base [&_[data-btn-icon]]:size-5 active:scale-[0.96]"
+    },
+    radius: {
+      none: "!rounded-none",
+      sm: "!rounded-sm",
+      md: "!rounded-md",
+      lg: "!rounded-lg",
+      full: "!rounded-full"
+    },
+    fullWidth: {
+      true: "w-full",
+      false: ""
+    },
+    iconOnly: {
+      true: "aspect-square p-0 [&_[data-btn-icon]]:mx-0",
+      false: ""
+    },
+    pending: {
+      true: "",
+      false: ""
+    },
+    /** @deprecated Alias for `pending` (variant key resolution). */
+    loading: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    { iconOnly: true, size: "xs", class: "size-8 md:size-7" },
+    { iconOnly: true, size: "sm", class: "size-9 md:size-8" },
+    { iconOnly: true, size: "md", class: "size-10 md:size-9" },
+    { iconOnly: true, size: "lg", class: "size-11 md:size-10" },
+    { iconOnly: true, size: "xl", class: "size-12" },
+    { variant: "link", iconOnly: true, class: "size-auto aspect-auto p-0" }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+    radius: "full",
+    fullWidth: false,
+    iconOnly: false,
+    pending: false
+  }
+});
+
+// src/components/button/button.ts
+var INTERNAL_KEYS = /* @__PURE__ */ new Set([
+  "variant",
+  "size",
+  "radius",
+  "fullWidth",
+  "iconOnly",
+  "pending",
+  "loading",
+  "disabled",
+  "leftIcon",
+  "rightIcon",
+  "spinner",
+  "headless",
+  "children",
+  "onClick"
+]);
+var pickDomProps = (props) => {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (!INTERNAL_KEYS.has(key)) out[key] = value;
+  }
+  return out;
+};
+var wrapIcon = (node) => h(
+  "span",
+  { "data-btn-icon": "", className: "inline-flex shrink-0", "aria-hidden": "true" },
+  node
+);
+var buildContent = (options) => {
+  const { pending, size, leftIcon, rightIcon, spinner, children } = options;
+  const parts = [];
+  if (pending) {
+    parts.push(spinner ?? defaultButtonSpinner(size));
+  } else if (leftIcon) {
+    parts.push(wrapIcon(leftIcon));
+  }
+  if (children !== void 0 && children !== null && children !== false) {
+    parts.push(children);
+  }
+  if (!pending && rightIcon) {
+    parts.push(wrapIcon(rightIcon));
+  }
+  if (parts.length === 1) return parts[0];
+  return parts;
+};
+var Button = createUIComponent({
+  name: "Button",
+  defaultTag: "button",
+  defaultProps: {
+    variant: "primary",
+    size: "md",
+    radius: "full",
+    type: "button",
+    fullWidth: false,
+    iconOnly: false,
+    pending: false,
+    loading: false,
+    disabled: false
+  },
+  variants: buttonStyles,
+  render: ({ props, className, headless }) => {
+    const {
+      pending: pendingProp,
+      loading: loadingProp = false,
+      disabled: disabledProp = false,
+      type,
+      leftIcon,
+      rightIcon,
+      spinner,
+      children,
+      size = "md",
+      onClick,
+      ...rest
+    } = props;
+    const pending = Boolean(pendingProp || loadingProp);
+    const inactive = Boolean(disabledProp || pending);
+    const content = buildContent({
+      pending,
+      size,
+      leftIcon,
+      rightIcon,
+      spinner,
+      children
+    });
+    const domProps = pickDomProps(rest);
+    const visualClass = headless ? void 0 : className;
+    const handleClick = composeEventHandlers(
+      onClick,
+      inactive ? (event) => event.preventDefault() : void 0,
+      { checkDefaultPrevented: true }
+    );
+    return h(
+      "button",
+      {
+        ...domProps,
+        type: type ?? "button",
+        disabled: inactive,
+        className: visualClass,
+        class: visualClass,
+        ...dataDisabled(inactive),
+        ...dataPending(pending),
+        "aria-disabled": inactive ? "true" : void 0,
+        "aria-busy": pending ? "true" : void 0,
+        onClick: inactive ? handleClick : onClick
+      },
+      content
+    );
+  }
+});
+
+export { Button, buttonStyles, defaultButtonSpinner };
+//# sourceMappingURL=button.js.map
+//# sourceMappingURL=button.js.map