@echojs-ecosystem/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1604 @@
+import { h } from '@echojs-ecosystem/hyperdom';
+
+// 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
+  };
+};
+var runWithUIContext = (value, fn) => {
+  stack.push(value);
+  try {
+    return fn();
+  } finally {
+    stack.pop();
+  }
+};
+var resetUIContextStack = () => {
+  stack.length = 0;
+};
+
+// src/providers/UIProvider.ts
+var resolveChildren = (children) => {
+  if (typeof children === "function") {
+    return children();
+  }
+  return children;
+};
+var UIProvider = (props) => {
+  const value = createUIContextValue({
+    theme: props.theme,
+    headless: props.headless
+  });
+  return runWithUIContext(value, () => resolveChildren(props.children));
+};
+
+// src/plugin/ui-plugin.ts
+var createUiProvider = (options = {}) => ({
+  name: "ui",
+  wrapRoot(inner) {
+    return () => UIProvider({ ...options, children: inner });
+  }
+});
+var createUiPlugin = createUiProvider;
+var uiPlugin = createUiProvider;
+
+// 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 createComponentVariants = tv;
+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 setClassNameMerger = (merger) => {
+  classNameMerger = merger;
+};
+var resetClassNameMerger = () => {
+  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 = (defaultProps2, providerProps, componentProps) => {
+  const merged = {};
+  mergePair(merged, defaultProps2);
+  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/merge-refs.ts
+var mergeRefs = (...refs) => {
+  const filtered = refs.filter(Boolean);
+  if (filtered.length === 0) return void 0;
+  if (filtered.length === 1) return filtered[0];
+  return (instance) => {
+    for (const ref of filtered) ref(instance);
+  };
+};
+
+// src/utils/data-attributes.ts
+var dataState = (value) => ({
+  "data-state": value
+});
+var dataDisabled = (disabled) => disabled ? { "data-disabled": "" } : {};
+var dataInvalid = (invalid) => invalid ? { "data-invalid": "" } : {};
+var dataPending = (pending) => pending ? { "data-pending": "" } : {};
+
+// src/core/aria.ts
+var ariaBool = (value) => value ? "true" : "false";
+
+// src/core/ids.ts
+var idCounter = 0;
+var createId = (prefix) => {
+  const ctx = getUIContextOrDefault();
+  const base = prefix ?? ctx.theme.prefix ?? "echo";
+  idCounter += 1;
+  return `${base}-${idCounter}`;
+};
+var useId = (prefix) => createId(prefix);
+
+// src/core/slots.ts
+var renderSlot = (props) => props.children;
+var defaultProps = {
+  as: "span"
+};
+var VisuallyHidden = createUIComponent({
+  name: "VisuallyHidden",
+  defaultTag: "span",
+  defaultProps: {
+    ...defaultProps,
+    className: "sr-only"
+  },
+  render: ({ props, headless, className }) => {
+    const { as = "span", children, ...rest } = props;
+    const classes = headless ? void 0 : className ?? "sr-only";
+    return h(as, { ...rest, className: classes, class: classes }, children);
+  }
+});
+
+// src/primitives/portal.ts
+var appendChild = (host, child) => {
+  if (child == null || child === false || child === true) return;
+  if (typeof child === "string" || typeof child === "number") {
+    host.appendChild(document.createTextNode(String(child)));
+    return;
+  }
+  if (child instanceof Node) {
+    host.appendChild(child);
+    return;
+  }
+  if (Array.isArray(child)) {
+    for (const item of child) appendChild(host, item);
+  }
+};
+var Portal = (props) => {
+  const container = props.container ?? document.body;
+  const host = document.createElement("div");
+  container.appendChild(host);
+  if (props.children !== void 0) {
+    appendChild(host, props.children);
+  }
+  return host;
+};
+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
+    );
+  }
+});
+
+// src/components/icon-button/icon-button.styles.ts
+var iconButtonStyles = tv({
+  base: "shrink-0 p-0",
+  variants: {
+    size: {
+      xs: "h-7 w-7",
+      sm: "h-8 w-8",
+      md: "h-10 w-10",
+      lg: "h-12 w-12"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/icon-button/icon-button.ts
+var isDev = () => {
+  const env = globalThis.process?.env?.NODE_ENV;
+  return env !== "production";
+};
+var IconButton = createUIComponent({
+  name: "IconButton",
+  defaultTag: "button",
+  defaultProps: {
+    variant: "ghost",
+    size: "md"
+  },
+  variants: (options) => iconButtonStyles(options),
+  render: ({ props, className, headless }) => {
+    const ariaLabel = props["aria-label"];
+    if (isDev() && (!ariaLabel || String(ariaLabel).trim().length === 0)) {
+      throw new Error(
+        'IconButton: prop "aria-label" is required (e.g. IconButton({ "aria-label": "Close", children: ... })).'
+      );
+    }
+    const { size: _iconSize, children, ...rest } = props;
+    return Button({
+      ...rest,
+      headless,
+      size: "md",
+      className,
+      children
+    });
+  }
+});
+
+// src/components/input-shared/input.styles.ts
+var inputStyles = tv({
+  slots: {
+    wrapper: [
+      "flex items-center gap-2",
+      "transition-colors",
+      "focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-zinc-400",
+      "data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
+      "data-[invalid]:ring-2 data-[invalid]:ring-red-500 data-[invalid]:ring-offset-2"
+    ].join(" "),
+    input: [
+      "w-full bg-transparent outline-none",
+      "placeholder:text-zinc-400",
+      "disabled:cursor-not-allowed"
+    ].join(" "),
+    start: "text-zinc-500",
+    end: "text-zinc-500"
+  },
+  variants: {
+    variant: {
+      outline: "border border-zinc-300 bg-white text-zinc-900",
+      filled: "bg-zinc-100 text-zinc-900",
+      ghost: "bg-transparent text-zinc-900"
+    },
+    size: {
+      sm: "h-8 px-3 text-sm rounded-md",
+      md: "h-10 px-3 text-sm rounded-md",
+      lg: "h-12 px-4 text-base rounded-md"
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    size: "md"
+  }
+});
+var INPUT_INTERNAL_KEYS = /* @__PURE__ */ new Set([
+  "variant",
+  "size",
+  "startContent",
+  "endContent",
+  "invalid",
+  "disabled",
+  "readonly",
+  "readOnly",
+  "required",
+  "headless",
+  "children",
+  "className",
+  "class"
+]);
+var pickInputDomProps = (props) => {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (!INPUT_INTERNAL_KEYS.has(key)) out[key] = value;
+  }
+  return out;
+};
+var renderInputField = (options) => {
+  const {
+    headless,
+    className,
+    variant = "outline",
+    size = "md",
+    disabled,
+    invalid,
+    readonly,
+    required,
+    describedBy,
+    startContent,
+    endContent,
+    inputProps,
+    wrapperProps,
+    inputRef
+  } = options;
+  const ariaInvalid = invalid ? "true" : inputProps["aria-invalid"];
+  const dataReadonly = readonly ? { "data-readonly": "" } : {};
+  const slotOptions = { variant, size };
+  const slots = inputStyles;
+  const nativeInputProps = {
+    ...inputProps,
+    disabled,
+    readonly,
+    required,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": describedBy ?? inputProps["aria-describedby"],
+    ref: inputRef ?? inputProps.ref
+  };
+  if (!startContent && !endContent) {
+    const visualClass = headless ? void 0 : className;
+    return h("input", {
+      ...nativeInputProps,
+      ...dataDisabled(Boolean(disabled)),
+      ...dataInvalid(Boolean(invalid)),
+      ...dataReadonly,
+      className: visualClass,
+      class: visualClass
+    });
+  }
+  const wrapperClass = headless ? void 0 : cn(slots.wrapper(slotOptions), className);
+  const inputClass = headless ? void 0 : slots.input(slotOptions);
+  return h(
+    "div",
+    {
+      ...wrapperProps,
+      className: wrapperClass,
+      class: wrapperClass,
+      ...dataDisabled(Boolean(disabled)),
+      ...dataInvalid(Boolean(invalid)),
+      ...dataReadonly
+    },
+    [
+      startContent ? h(
+        "span",
+        { "data-input-slot": "start", className: headless ? void 0 : slots.start() },
+        startContent
+      ) : null,
+      h("input", {
+        ...nativeInputProps,
+        className: inputClass,
+        class: inputClass
+      }),
+      endContent ? h("span", { "data-input-slot": "end", className: headless ? void 0 : slots.end() }, endContent) : null
+    ]
+  );
+};
+
+// src/components/input/input.ts
+var Input = createUIComponent({
+  name: "Input",
+  defaultTag: "input",
+  defaultProps: {
+    type: "text",
+    variant: "outline",
+    size: "md"
+  },
+  variants: (options) => inputStyles.wrapper(options),
+  render: ({ props, headless, className }) => {
+    const {
+      startContent,
+      endContent,
+      invalid,
+      disabled,
+      readonly: readonlyProp,
+      readOnly,
+      required,
+      variant,
+      size,
+      ...rest
+    } = props;
+    const readonly = readonlyProp ?? readOnly;
+    const domProps = pickInputDomProps(rest);
+    return renderInputField({
+      headless,
+      className,
+      variant,
+      size,
+      disabled,
+      invalid,
+      readonly,
+      required,
+      startContent,
+      endContent,
+      inputProps: domProps
+    });
+  }
+});
+
+// src/utils/input-mask/format-mask.ts
+var slotPattern = (kind) => {
+  switch (kind.kind) {
+    case "9":
+      return /\d/;
+    case "a":
+      return /[A-Za-z]/;
+    case "*":
+      return /[A-Za-z0-9]/;
+  }
+};
+var extractSlotChars = (raw, tokens) => {
+  const slots = tokens.filter((t) => t.type === "slot");
+  const out = [];
+  for (const char of raw) {
+    if (out.length >= slots.length) break;
+    const slot = slots[out.length];
+    if (slotPattern(slot).test(char)) out.push(char);
+  }
+  return out;
+};
+var formatMaskedValue = (raw, tokens) => {
+  const slotChars = extractSlotChars(raw, tokens);
+  let slotIndex = 0;
+  let masked = "";
+  const unmaskedParts = [];
+  for (const token of tokens) {
+    if (token.type === "literal") {
+      masked += token.char;
+      continue;
+    }
+    const char = slotChars[slotIndex];
+    if (char === void 0) break;
+    masked += char;
+    unmaskedParts.push(char);
+    slotIndex += 1;
+  }
+  return {
+    masked,
+    unmasked: unmaskedParts.join("")
+  };
+};
+
+// src/utils/input-mask/parse-mask.ts
+var SLOT_KINDS = /* @__PURE__ */ new Set(["9", "a", "*"]);
+var parseMaskPattern = (pattern) => {
+  const tokens = [];
+  for (const char of pattern) {
+    if (SLOT_KINDS.has(char)) {
+      tokens.push({ type: "slot", kind: char });
+      continue;
+    }
+    tokens.push({ type: "literal", char });
+  }
+  return tokens;
+};
+
+// src/utils/input-mask/presets.ts
+var MASK_PRESETS = {
+  phone: "(99) 99999-9999",
+  cpf: "999.999.999-99",
+  cnpj: "99.999.999/9999-99",
+  date: "99/99/9999",
+  cep: "99999-999",
+  time: "99:99",
+  "credit-card": "9999 9999 9999 9999"
+};
+var resolveMaskPattern = (mask) => mask in MASK_PRESETS ? MASK_PRESETS[mask] : mask;
+
+// src/utils/input-mask/attach-input-mask.ts
+var attachInputMask = (input, options) => {
+  const pattern = resolveMaskPattern(options.mask);
+  const tokens = parseMaskPattern(pattern);
+  const apply = (raw, notify = true) => {
+    const result = formatMaskedValue(raw, tokens);
+    if (input.value !== result.masked) {
+      input.value = result.masked;
+    }
+    if (notify) options.onValueChange?.(result);
+  };
+  const onInput = () => apply(input.value);
+  const onBlur = () => apply(input.value);
+  input.addEventListener("input", onInput);
+  input.addEventListener("blur", onBlur);
+  if (input.value) apply(input.value, true);
+  return () => {
+    input.removeEventListener("input", onInput);
+    input.removeEventListener("blur", onBlur);
+  };
+};
+
+// src/components/input-mask/input-mask.ts
+var InputMask = createUIComponent({
+  name: "InputMask",
+  defaultTag: "input",
+  defaultProps: {
+    mask: "phone",
+    variant: "outline",
+    size: "md"
+  },
+  variants: (options) => inputStyles.wrapper(options),
+  render: ({ props, headless, className }) => {
+    const p = props;
+    const mask = p.mask;
+    const onMaskValueChange = p.onMaskValueChange;
+    const onInput = p.onInput;
+    const domProps = pickInputDomProps(p);
+    const readonly = Boolean(p.readonly ?? p.readOnly);
+    let disposeMask;
+    const inputRef = (element) => {
+      disposeMask?.();
+      disposeMask = void 0;
+      if (!element) return;
+      disposeMask = attachInputMask(element, {
+        mask,
+        onValueChange: onMaskValueChange
+      });
+      const userRef = domProps.ref;
+      if (typeof userRef === "function") userRef(element);
+    };
+    const { ref: _ref, ...inputRest } = domProps;
+    return renderInputField({
+      headless,
+      className,
+      variant: p.variant,
+      size: p.size,
+      disabled: p.disabled,
+      invalid: p.invalid,
+      readonly,
+      required: p.required,
+      startContent: p.startContent,
+      endContent: p.endContent,
+      inputRef,
+      inputProps: {
+        ...inputRest,
+        type: "text",
+        inputMode: "numeric",
+        onInput
+      }
+    });
+  }
+});
+var OTP_PROP_KEYS = /* @__PURE__ */ new Set(["length", "onValueChange", "value", "defaultValue"]);
+var pickOtpDomProps = (props) => {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (OTP_PROP_KEYS.has(key)) continue;
+    out[key] = value;
+  }
+  return pickInputDomProps(out);
+};
+var normalizeOtp = (value, length) => value.replace(/\D/g, "").slice(0, length);
+var InputOtp = createUIComponent({
+  name: "InputOtp",
+  defaultTag: "div",
+  defaultProps: {
+    length: 6,
+    variant: "outline",
+    size: "md",
+    autocomplete: "one-time-code"
+  },
+  variants: (options) => inputStyles.wrapper(options),
+  render: ({ props, headless, className }) => {
+    const {
+      length = 6,
+      value = "",
+      invalid,
+      disabled,
+      readonly: readonlyProp,
+      readOnly,
+      required,
+      variant = "outline",
+      size = "md",
+      autocomplete = "one-time-code",
+      onValueChange,
+      onInput,
+      ...rest
+    } = props;
+    const readonly = readonlyProp ?? readOnly;
+    const domProps = pickOtpDomProps(rest);
+    const digits = normalizeOtp(String(value), length);
+    const slotOptions = { variant, size };
+    const cellClass = headless ? void 0 : cn(
+      inputStyles.input(slotOptions),
+      "w-10 text-center px-0",
+      size === "sm" && "w-8",
+      size === "lg" && "w-12"
+    );
+    const groupClass = headless ? "flex gap-2" : cn("flex gap-2", inputStyles.wrapper(slotOptions), className);
+    const emitChange = (next, input) => {
+      const normalized = normalizeOtp(next, length);
+      onValueChange?.(normalized);
+      if (input) {
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+    };
+    const cells = Array.from({ length }, (_, index) => {
+      const char = digits[index] ?? "";
+      return h("input", {
+        type: "text",
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        maxlength: 1,
+        value: char,
+        disabled,
+        readonly,
+        required,
+        autocomplete: index === 0 ? autocomplete : "off",
+        "aria-label": `Digit ${index + 1} of ${length}`,
+        className: cellClass,
+        class: cellClass,
+        onInput: (event) => {
+          const input = event.currentTarget;
+          const digit = normalizeOtp(input.value, 1).slice(-1);
+          input.value = digit;
+          const chars = [...digits];
+          while (chars.length < length) chars.push("");
+          chars[index] = digit;
+          emitChange(chars.join(""), input);
+          if (digit && index < length - 1) {
+            const group = input.parentElement;
+            const nextInput = group?.querySelectorAll("input")[index + 1];
+            nextInput?.focus();
+          }
+          onInput?.(event);
+        },
+        onKeyDown: (event) => {
+          const input = event.currentTarget;
+          if (event.key === "Backspace" && !input.value && index > 0) {
+            const group = input.parentElement;
+            const prevInput = group?.querySelectorAll("input")[index - 1];
+            prevInput?.focus();
+            const chars = digits.split("");
+            chars[index - 1] = "";
+            emitChange(chars.join(""), input);
+          }
+        },
+        onPaste: (event) => {
+          event.preventDefault();
+          const text = event.clipboardData?.getData("text") ?? "";
+          emitChange(text, event.currentTarget);
+        }
+      });
+    });
+    return h(
+      "div",
+      {
+        ...domProps,
+        role: "group",
+        "aria-label": domProps["aria-label"] ?? "One-time code",
+        className: groupClass,
+        class: groupClass,
+        ...dataDisabled(Boolean(disabled)),
+        ...dataInvalid(Boolean(invalid)),
+        ...readonly ? { "data-readonly": "" } : {}
+      },
+      cells
+    );
+  }
+});
+var TAG_PROP_KEYS = /* @__PURE__ */ new Set(["value", "onValueChange", "separators", "allowDuplicates", "maxTags"]);
+var pickTagsDomProps = (props) => {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (TAG_PROP_KEYS.has(key)) continue;
+    out[key] = value;
+  }
+  return pickInputDomProps(out);
+};
+var normalizeTag = (raw) => raw.trim();
+var canAddTag = (tags, tag, options) => {
+  if (!tag) return false;
+  if (options.maxTags !== void 0 && tags.length >= options.maxTags) return false;
+  if (!options.allowDuplicates && tags.includes(tag)) return false;
+  return true;
+};
+var InputTags = createUIComponent({
+  name: "InputTags",
+  defaultTag: "div",
+  defaultProps: {
+    value: [],
+    separators: [",", "Enter"],
+    allowDuplicates: false,
+    variant: "outline",
+    size: "md",
+    placeholder: "Add tag\u2026"
+  },
+  variants: (options) => inputStyles.wrapper(options),
+  render: ({ props, headless, className }) => {
+    const {
+      value = [],
+      separators = [",", "Enter"],
+      allowDuplicates = false,
+      maxTags,
+      startContent,
+      endContent,
+      invalid,
+      disabled,
+      readonly: readonlyProp,
+      readOnly,
+      required,
+      variant = "outline",
+      size = "md",
+      placeholder,
+      onValueChange,
+      onInput,
+      ...rest
+    } = props;
+    const readonly = readonlyProp ?? readOnly;
+    const domProps = pickTagsDomProps(rest);
+    const tags = Array.isArray(value) ? value : [];
+    const slotOptions = { variant, size };
+    const addTag = (draft, input) => {
+      const tag = normalizeTag(draft);
+      if (!canAddTag(tags, tag, { allowDuplicates, maxTags })) return;
+      onValueChange?.([...tags, tag]);
+      input.value = "";
+    };
+    const removeTag = (index) => {
+      onValueChange?.(tags.filter((_, i) => i !== index));
+    };
+    const tagChips = tags.map(
+      (tag, index) => h(
+        "span",
+        {
+          "data-tag": "",
+          className: headless ? void 0 : "inline-flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-0.5 text-sm text-zinc-800"
+        },
+        [
+          tag,
+          readonly || disabled ? null : h(
+            "button",
+            {
+              type: "button",
+              className: "text-zinc-500 hover:text-zinc-800",
+              "aria-label": `Remove ${tag}`,
+              onClick: () => removeTag(index)
+            },
+            "\xD7"
+          )
+        ]
+      )
+    );
+    const innerInput = renderInputField({
+      headless: true,
+      variant,
+      size,
+      disabled,
+      invalid,
+      readonly,
+      required,
+      inputProps: {
+        type: "text",
+        className: "min-w-24 flex-1 border-0 bg-transparent shadow-none outline-none",
+        placeholder: tags.length === 0 ? placeholder : void 0,
+        onInput,
+        onKeyDown: (event) => {
+          const input = event.currentTarget;
+          if (separators.includes(event.key)) {
+            event.preventDefault();
+            addTag(input.value, input);
+            return;
+          }
+          if (event.key === "Backspace" && input.value === "" && tags.length > 0) {
+            removeTag(tags.length - 1);
+          }
+        }
+      }
+    });
+    const wrapperClass = headless ? cn("flex min-w-0 flex-1 flex-wrap items-center gap-1.5") : cn(inputStyles.wrapper(slotOptions), "min-h-10 flex-wrap items-center gap-1.5 py-1", className);
+    return h(
+      "div",
+      {
+        ...domProps,
+        className: wrapperClass,
+        class: wrapperClass,
+        ...dataDisabled(Boolean(disabled)),
+        ...dataInvalid(Boolean(invalid)),
+        ...readonly ? { "data-readonly": "" } : {}
+      },
+      [
+        startContent ? h(
+          "span",
+          { "data-input-slot": "start", className: headless ? void 0 : inputStyles.start() },
+          startContent
+        ) : null,
+        ...tagChips,
+        innerInput,
+        endContent ? h("span", { "data-input-slot": "end", className: headless ? void 0 : inputStyles.end() }, endContent) : null
+      ]
+    );
+  }
+});
+
+// src/components/textarea/textarea.styles.ts
+var textareaStyles = tv({
+  base: [
+    "w-full",
+    "transition-colors",
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-400",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "data-[invalid]:ring-2 data-[invalid]:ring-red-500 data-[invalid]:ring-offset-2"
+  ].join(" "),
+  variants: {
+    variant: {
+      outline: "border border-zinc-300 bg-white text-zinc-900",
+      filled: "bg-zinc-100 text-zinc-900",
+      ghost: "bg-transparent text-zinc-900"
+    },
+    size: {
+      sm: "min-h-20 px-3 py-2 text-sm rounded-md",
+      md: "min-h-24 px-3 py-2 text-sm rounded-md",
+      lg: "min-h-28 px-4 py-3 text-base rounded-md"
+    },
+    resize: {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize"
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    size: "md",
+    resize: "vertical"
+  }
+});
+
+// src/components/textarea/textarea.ts
+var Textarea = createUIComponent({
+  name: "Textarea",
+  defaultTag: "textarea",
+  defaultProps: {
+    variant: "outline",
+    size: "md",
+    resize: "vertical"
+  },
+  variants: (options) => textareaStyles(options),
+  render: ({ props, headless, className }) => {
+    const { invalid, disabled, readonly, required, ...rest } = props;
+    const ariaInvalid = invalid ? "true" : rest["aria-invalid"];
+    const dataReadonly = readonly ? { "data-readonly": "" } : {};
+    return h("textarea", {
+      ...rest,
+      disabled,
+      readonly,
+      required,
+      "aria-invalid": ariaInvalid,
+      ...dataDisabled(Boolean(disabled)),
+      ...dataInvalid(Boolean(invalid)),
+      ...dataReadonly,
+      className: headless ? void 0 : className,
+      class: headless ? void 0 : className
+    });
+  }
+});
+
+// src/components/label/label.styles.ts
+var labelStyles = tv({
+  base: [
+    "text-sm font-medium leading-none",
+    "data-[disabled]:opacity-50",
+    "data-[invalid]:text-red-700"
+  ].join(" ")
+});
+
+// src/components/label/label.ts
+var Label = createUIComponent({
+  name: "Label",
+  defaultTag: "label",
+  defaultProps: {
+    requiredIndicator: "*"
+  },
+  variants: () => labelStyles({}),
+  render: ({ props, headless, className }) => {
+    const {
+      for: htmlFor,
+      required,
+      disabled,
+      invalid,
+      requiredIndicator,
+      optionalIndicator,
+      children,
+      ...rest
+    } = props;
+    const indicator = required === true ? requiredIndicator : required === false && optionalIndicator ? optionalIndicator : null;
+    const visualClass = headless ? void 0 : cn(className);
+    return h(
+      "label",
+      {
+        ...rest,
+        for: htmlFor,
+        ...dataDisabled(Boolean(disabled)),
+        ...dataInvalid(Boolean(invalid)),
+        className: visualClass,
+        class: visualClass
+      },
+      [
+        children,
+        indicator ? h("span", { "aria-hidden": "true", className: headless ? void 0 : "ml-1" }, indicator) : null
+      ]
+    );
+  }
+});
+
+// src/components/field/field.styles.ts
+var fieldStyles = tv({
+  slots: {
+    root: "grid gap-1.5",
+    label: "",
+    description: "text-sm text-zinc-500",
+    error: "text-sm text-red-600"
+  }
+});
+
+// src/components/field/field-context.ts
+var stack2 = [];
+var getFieldContext = () => stack2[stack2.length - 1];
+var runWithFieldContext = (value, fn) => {
+  stack2.push(value);
+  try {
+    return fn();
+  } finally {
+    stack2.pop();
+  }
+};
+
+// src/components/field/field.ts
+var isFnChild = (children) => typeof children === "function";
+var Field = (props) => {
+  const ui = getUIContextOrDefault();
+  const slice = ui.theme.components?.field;
+  const headless = props.headless ?? ui.headless ?? ui.theme.headless ?? false;
+  const themeDefaults = {
+    ...slice?.defaultProps
+  };
+  if (!headless) {
+    if (slice?.baseClass) themeDefaults.className = cn(themeDefaults.className, slice.baseClass);
+    if (slice?.className) themeDefaults.className = cn(themeDefaults.className, slice.className);
+  }
+  const merged = mergeProps(void 0, themeDefaults, props);
+  const id = merged.id ?? createId("field");
+  const inputId = createId(`${id}-input`);
+  const labelId = createId(`${id}-label`);
+  const descriptionId = merged.description ? createId(`${id}-description`) : void 0;
+  const errorId = merged.error ? createId(`${id}-error`) : void 0;
+  const invalid = Boolean(merged.invalid || merged.error);
+  const disabled = Boolean(merged.disabled);
+  const required = Boolean(merged.required);
+  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
+  const ctx = {
+    id,
+    inputId,
+    labelId,
+    descriptionId,
+    errorId,
+    invalid,
+    disabled,
+    required,
+    inputProps: {
+      id: inputId,
+      "aria-labelledby": labelId,
+      "aria-describedby": describedBy,
+      "aria-invalid": invalid ? "true" : void 0,
+      "aria-required": required ? "true" : void 0,
+      required: required || void 0,
+      disabled: disabled || void 0,
+      invalid: invalid || void 0
+    },
+    labelProps: {
+      id: labelId,
+      for: inputId,
+      required: required || void 0,
+      disabled: disabled || void 0,
+      invalid: invalid || void 0
+    },
+    descriptionProps: descriptionId ? { id: descriptionId } : void 0,
+    errorProps: errorId ? { id: errorId, role: "alert" } : void 0
+  };
+  const rootClass = headless ? void 0 : cn(fieldStyles.root(), merged.className, merged.class);
+  const content = isFnChild(merged.children) ? merged.children(ctx) : merged.children;
+  return runWithFieldContext(
+    ctx,
+    () => h(
+      "div",
+      {
+        className: rootClass,
+        class: rootClass,
+        ...dataInvalid(invalid),
+        ...dataDisabled(disabled),
+        ...required ? { "data-required": "" } : {}
+      },
+      [
+        merged.label ? Label({
+          ...ctx.labelProps,
+          headless,
+          children: merged.label
+        }) : null,
+        content,
+        merged.description ? h(
+          "div",
+          {
+            id: descriptionId,
+            className: headless ? void 0 : fieldStyles.description()
+          },
+          merged.description
+        ) : null,
+        merged.error ? h(
+          "div",
+          {
+            id: errorId,
+            role: "alert",
+            className: headless ? void 0 : fieldStyles.error()
+          },
+          merged.error
+        ) : null
+      ]
+    )
+  );
+};
+
+// src/components/field/merge-field-control-props.ts
+var mergeFieldControlProps = (base, overrides) => {
+  const ctx = getFieldContext();
+  if (!ctx) {
+    return mergeProps(void 0, base, overrides ?? {});
+  }
+  return mergeProps(ctx.inputProps, base, overrides ?? {});
+};
+
+// src/components/checkbox/checkbox.styles.ts
+var checkboxStyles = tv({
+  base: [
+    "shrink-0 cursor-pointer appearance-none rounded border border-zinc-400 bg-white",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-500",
+    "checked:border-zinc-900 checked:bg-zinc-900",
+    "indeterminate:border-zinc-500 indeterminate:bg-zinc-500",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+    "data-[invalid]:border-red-500 data-[invalid]:ring-red-500",
+    "data-[indeterminate]:border-zinc-500 data-[indeterminate]:bg-zinc-500"
+  ].join(" "),
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/checkbox/checkbox.ts
+var INTERNAL_KEYS2 = /* @__PURE__ */ new Set([
+  "size",
+  "indeterminate",
+  "invalid",
+  "disabled",
+  "checked",
+  "defaultChecked",
+  "required",
+  "headless",
+  "children",
+  "className",
+  "class"
+]);
+var pickDomProps2 = (props) => {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (!INTERNAL_KEYS2.has(key)) out[key] = value;
+  }
+  return out;
+};
+var Checkbox = createUIComponent({
+  name: "Checkbox",
+  defaultTag: "input",
+  defaultProps: {
+    size: "md"
+  },
+  variants: checkboxStyles,
+  render: ({ props, headless, className }) => {
+    const {
+      checked,
+      defaultChecked,
+      indeterminate = false,
+      disabled,
+      invalid,
+      required,
+      ...rest
+    } = props;
+    const domProps = pickDomProps2(rest);
+    const visualClass = headless ? void 0 : className;
+    return h(
+      "input",
+      {
+        ...domProps,
+        type: "checkbox",
+        checked,
+        defaultChecked,
+        disabled,
+        required,
+        indeterminate,
+        "aria-checked": indeterminate ? "mixed" : checked !== void 0 ? ariaBool(Boolean(checked)) : void 0,
+        "aria-invalid": invalid ? "true" : void 0,
+        "aria-required": required ? "true" : void 0,
+        ...dataDisabled(Boolean(disabled)),
+        ...dataInvalid(Boolean(invalid)),
+        ...indeterminate ? { "data-indeterminate": "" } : {},
+        className: visualClass,
+        class: visualClass
+      }
+    );
+  }
+});
+
+export { Button, Checkbox, Field, IconButton, Input, InputMask, InputOtp, InputTags, Label, MASK_PRESETS, Portal, Textarea, UIProvider, VisuallyHidden, ariaBool, attachInputMask, buttonStyles, cn, composeEventHandlers, createComponentVariants, createId, createTheme, createUIComponent, createUIContextValue, createUiPlugin, createUiProvider, dataDisabled, dataInvalid, dataState, defaultButtonSpinner, defaultTheme, formatMaskedValue, getFieldContext, getUIContext, getUIContextOrDefault, inputStyles, mergeFieldControlProps, mergeProps, mergeRefs, parseMaskPattern, renderSlot, resetClassNameMerger, resetUIContextStack, resolveMaskPattern, resolveVariantClasses, runWithUIContext, setClassNameMerger, uiPlugin, useId };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map