@chellaa/react 0.2.0

package/dist/index.node.mjs

@@ -0,0 +1,494 @@
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/theme/ThemeProvider.tsx
+var ThemeContext = React.createContext(
+  void 0
+);
+var COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "chellaa-theme",
+  enableSystem = true,
+  tokens,
+  attribute = "data-theme"
+}) {
+  const parentContext = React.useContext(ThemeContext);
+  const [theme, setThemeState] = React.useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    try {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    } catch {
+      return defaultTheme;
+    }
+  });
+  const [systemTheme, setSystemTheme] = React.useState(() => {
+    if (typeof window === "undefined" || !enableSystem || typeof window.matchMedia !== "function") {
+      return void 0;
+    }
+    return window.matchMedia(COLOR_SCHEME_QUERY).matches ? "dark" : "light";
+  });
+  const resolvedTheme = React.useMemo(() => {
+    if (theme === "system") {
+      return systemTheme ?? "light";
+    }
+    return theme === "dark" ? "dark" : "light";
+  }, [theme, systemTheme]);
+  React.useEffect(() => {
+    if (!enableSystem || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY);
+    const handleChange = (e) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    } else if (typeof mediaQuery.addListener === "function") {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, [enableSystem]);
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (!parentContext) {
+      const root = document.documentElement;
+      root.setAttribute(attribute, resolvedTheme);
+      if (tokens) {
+        for (const [key, value2] of Object.entries(tokens)) {
+          root.style.setProperty(key, value2);
+        }
+      }
+    }
+  }, [resolvedTheme, parentContext, attribute, tokens]);
+  const setTheme = React.useCallback(
+    (newTheme) => {
+      setThemeState(newTheme);
+      try {
+        localStorage.setItem(storageKey, newTheme);
+      } catch {
+      }
+    },
+    [storageKey]
+  );
+  const value = React.useMemo(
+    () => ({
+      theme,
+      setTheme,
+      resolvedTheme,
+      systemTheme
+    }),
+    [theme, setTheme, resolvedTheme, systemTheme]
+  );
+  if (parentContext) {
+    const styleObj = tokens ? tokens : void 0;
+    return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{ [attribute]: resolvedTheme },
+        style: styleObj,
+        className: "cl-theme-scope",
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error(
+      "useTheme must be used within a <ThemeProvider>. Wrap your application root in <ThemeProvider>."
+    );
+  }
+  return context;
+}
+
+// src/theme/createTheme.ts
+function createTheme(config) {
+  const { name, tokens } = config;
+  const declarations = Object.entries(tokens).map(([property, value]) => `  ${property}: ${value};`).join("\n");
+  const cssText = `[data-theme="${name}"] {
+${declarations}
+}`;
+  return {
+    name,
+    tokens,
+    cssText
+  };
+}
+function ThemeScript({
+  storageKey = "chellaa-theme",
+  defaultTheme = "system",
+  attribute = "data-theme",
+  nonce
+}) {
+  const scriptContent = `(function() {
+  try {
+    var key = '${storageKey}';
+    var def = '${defaultTheme}';
+    var attr = '${attribute}';
+    var stored = localStorage.getItem(key);
+    var theme = stored || def;
+    var resolved = theme;
+    if (theme === 'system') {
+      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    document.documentElement.setAttribute(attr, resolved);
+  } catch (e) {}
+})();`;
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      nonce,
+      dangerouslySetInnerHTML: { __html: scriptContent },
+      suppressHydrationWarning: true
+    }
+  );
+}
+
+// src/utils/classNames.ts
+function classNames(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input && input !== 0) continue;
+    if (typeof input === "string" || typeof input === "number") {
+      const trimmed = String(input).trim();
+      if (trimmed) classes.push(trimmed);
+    } else if (Array.isArray(input)) {
+      const nested = classNames(...input);
+      if (nested) classes.push(nested);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value && key.trim()) {
+          classes.push(key.trim());
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+
+// src/utils/composeEventHandlers.ts
+function composeEventHandlers(originalHandler, ourHandler, {
+  checkForDefaultPrevented = true
+} = {}) {
+  return function handleEvent(event) {
+    originalHandler?.(event);
+    if (!checkForDefaultPrevented || !event.defaultPrevented) {
+      ourHandler?.(event);
+    }
+  };
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+
+// src/primitives/Slot.tsx
+var Slot = React.forwardRef(
+  function Slot2(props, forwardedRef) {
+    const { children, ...slotProps } = props;
+    if (React.isValidElement(children)) {
+      return React.cloneElement(
+        children,
+        mergeProps(
+          slotProps,
+          children.props,
+          forwardedRef,
+          getElementRef(children)
+        )
+      );
+    }
+    if (React.Children.count(children) > 1) {
+      React.Children.only(null);
+    }
+    return null;
+  }
+);
+Slot.displayName = "Slot";
+function getElementRef(element) {
+  const elementRef = element?.ref;
+  if (elementRef !== void 0) {
+    return elementRef;
+  }
+  return element.props?.ref;
+}
+function mergeProps(slotProps, childProps, slotRef, childRef) {
+  const overrideProps = { ...childProps };
+  for (const propName in slotProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isEventHandler = /^on[A-Z]/.test(propName);
+    if (isEventHandler) {
+      if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+        overrideProps[propName] = composeEventHandlers(
+          childPropValue,
+          slotPropValue
+        );
+      } else if (typeof slotPropValue === "function") {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "className") {
+      overrideProps[propName] = classNames(
+        slotPropValue,
+        childPropValue
+      );
+    } else if (propName === "style") {
+      overrideProps[propName] = {
+        ...slotPropValue,
+        ...childPropValue
+      };
+    } else {
+      overrideProps[propName] = slotPropValue !== void 0 ? slotPropValue : childPropValue;
+    }
+  }
+  overrideProps.ref = (node) => {
+    setRef(childRef, node);
+    setRef(slotRef, node);
+  };
+  return overrideProps;
+}
+var ButtonGroupContext = React.createContext(void 0);
+function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
+}
+function ButtonSpinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "cl-button__spinner",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeOpacity: "0.25"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 3a9 9 0 0 1 9 9",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var Button = React.forwardRef(
+  function Button2(props, forwardedRef) {
+    const {
+      asChild = false,
+      variant: variantProp,
+      size: sizeProp,
+      colorScheme: colorSchemeProp,
+      isLoading = false,
+      loadingText,
+      loadingPosition = "start",
+      isDisabled: isDisabledProp,
+      isFullWidth = false,
+      startIcon,
+      endIcon,
+      className,
+      children,
+      disabled: disabledProp,
+      type = "button",
+      onClick,
+      onKeyDown,
+      ...restProps
+    } = props;
+    const buttonGroup = useButtonGroupContext();
+    const variant = variantProp ?? buttonGroup?.variant ?? "solid";
+    const size = sizeProp ?? buttonGroup?.size ?? "md";
+    const colorScheme = colorSchemeProp ?? buttonGroup?.colorScheme ?? "primary";
+    const isDisabled = isDisabledProp ?? disabledProp ?? buttonGroup?.isDisabled ?? false;
+    const isEffectivelyDisabled = isDisabled || isLoading;
+    const handleClick = (event) => {
+      if (isEffectivelyDisabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onClick?.(event);
+    };
+    const handleKeyDown = (event) => {
+      if (isEffectivelyDisabled) {
+        if (event.key === " " || event.key === "Enter") {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+      onKeyDown?.(event);
+    };
+    const buttonClassName = classNames(
+      "cl-button",
+      `cl-button--${variant}`,
+      `cl-button--${size}`,
+      `cl-button--${colorScheme}`,
+      isLoading && "cl-button--loading",
+      isDisabled && "cl-button--disabled",
+      isFullWidth && "cl-button--full-width",
+      className
+    );
+    const spinner = /* @__PURE__ */ jsx(ButtonSpinner, {});
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref: forwardedRef,
+          className: buttonClassName,
+          "aria-disabled": isEffectivelyDisabled ? true : void 0,
+          "aria-busy": isLoading ? true : void 0,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          ...restProps,
+          children
+        }
+      );
+    }
+    const isCenterLoading = isLoading && loadingPosition === "center";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: forwardedRef,
+        type,
+        disabled: isEffectivelyDisabled ? true : void 0,
+        "aria-disabled": isEffectivelyDisabled ? true : void 0,
+        "aria-busy": isLoading ? true : void 0,
+        className: buttonClassName,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...restProps,
+        children: isCenterLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "cl-button__spinner-wrapper--center", children: spinner }),
+          /* @__PURE__ */ jsxs("span", { className: "cl-button__content--hidden", children: [
+            startIcon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "cl-button__icon cl-button__icon--start",
+                "aria-hidden": "true",
+                children: startIcon
+              }
+            ),
+            children !== void 0 && /* @__PURE__ */ jsx("span", { className: "cl-button__label", children }),
+            endIcon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "cl-button__icon cl-button__icon--end",
+                "aria-hidden": "true",
+                children: endIcon
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          isLoading && loadingPosition === "start" && spinner,
+          !isLoading && startIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "cl-button__icon cl-button__icon--start",
+              "aria-hidden": "true",
+              children: startIcon
+            }
+          ),
+          isLoading && loadingText ? /* @__PURE__ */ jsx("span", { className: "cl-button__label", children: loadingText }) : children !== void 0 ? /* @__PURE__ */ jsx("span", { className: "cl-button__label", children }) : null,
+          isLoading && loadingPosition === "end" && spinner,
+          !isLoading && endIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "cl-button__icon cl-button__icon--end",
+              "aria-hidden": "true",
+              children: endIcon
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var ButtonGroup = React.forwardRef(
+  function ButtonGroup2(props, forwardedRef) {
+    const {
+      asChild = false,
+      size,
+      variant,
+      colorScheme,
+      isDisabled,
+      isAttached = false,
+      orientation = "horizontal",
+      spacing,
+      className,
+      style,
+      children,
+      role: roleProp,
+      ...restProps
+    } = props;
+    const role = roleProp !== void 0 ? roleProp : asChild ? void 0 : "group";
+    const contextValue = React.useMemo(
+      () => ({
+        size,
+        variant,
+        colorScheme,
+        isDisabled
+      }),
+      [size, variant, colorScheme, isDisabled]
+    );
+    const groupClassName = classNames(
+      "cl-button-group",
+      `cl-button-group--${orientation}`,
+      isAttached && "cl-button-group--attached",
+      className
+    );
+    const groupStyle = {
+      ...style,
+      ...spacing !== void 0 && !isAttached ? { gap: typeof spacing === "number" ? `${spacing}px` : spacing } : {}
+    };
+    if (asChild) {
+      return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref: forwardedRef,
+          role,
+          className: groupClassName,
+          style: groupStyle,
+          ...restProps,
+          children
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: forwardedRef,
+        role,
+        className: groupClassName,
+        style: groupStyle,
+        ...restProps,
+        children
+      }
+    ) });
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export { Button, ButtonGroup, ButtonGroupContext, ThemeProvider, ThemeScript, createTheme, useButtonGroupContext, useTheme };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/styles.css

@@ -0,0 +1 @@
+@layer cl-tokens{:root{--cl-palette-slate-50:#f8fafc;--cl-palette-slate-100:#f1f5f9;--cl-palette-slate-200:#e2e8f0;--cl-palette-slate-300:#cbd5e1;--cl-palette-slate-400:#94a3b8;--cl-palette-slate-500:#64748b;--cl-palette-slate-600:#475569;--cl-palette-slate-700:#334155;--cl-palette-slate-800:#1e293b;--cl-palette-slate-900:#0f172a;--cl-palette-slate-950:#090d16;--cl-palette-indigo-50:#eef2ff;--cl-palette-indigo-100:#e0e7ff;--cl-palette-indigo-200:#c7d2fe;--cl-palette-indigo-300:#a5b4fc;--cl-palette-indigo-400:#818cf8;--cl-palette-indigo-500:#6366f1;--cl-palette-indigo-600:#4f46e5;--cl-palette-indigo-700:#4338ca;--cl-palette-indigo-800:#3730a3;--cl-palette-indigo-900:#312e81;--cl-palette-indigo-950:#1e1b4b;--cl-palette-violet-50:#f5f3ff;--cl-palette-violet-100:#ede9fe;--cl-palette-violet-200:#ddd6fe;--cl-palette-violet-300:#c4b5fd;--cl-palette-violet-400:#a78bfa;--cl-palette-violet-500:#8b5cf6;--cl-palette-violet-600:#7c3aed;--cl-palette-violet-700:#6d28d9;--cl-palette-violet-800:#5b21b6;--cl-palette-violet-900:#4c1d95;--cl-palette-violet-950:#2e1065;--cl-palette-emerald-50:#ecfdf5;--cl-palette-emerald-100:#d1fae5;--cl-palette-emerald-200:#a7f3d0;--cl-palette-emerald-300:#6ee7b7;--cl-palette-emerald-400:#34d399;--cl-palette-emerald-500:#10b981;--cl-palette-emerald-600:#059669;--cl-palette-emerald-700:#047857;--cl-palette-emerald-800:#065f46;--cl-palette-emerald-900:#064e3b;--cl-palette-emerald-950:#022c22;--cl-palette-amber-50:#fffbeb;--cl-palette-amber-100:#fef3c7;--cl-palette-amber-200:#fde68a;--cl-palette-amber-300:#fcd34d;--cl-palette-amber-400:#fbbf24;--cl-palette-amber-500:#f59e0b;--cl-palette-amber-600:#d97706;--cl-palette-amber-700:#b45309;--cl-palette-amber-800:#92400e;--cl-palette-amber-900:#78350f;--cl-palette-amber-950:#451a03;--cl-palette-rose-50:#fff1f2;--cl-palette-rose-100:#ffe4e6;--cl-palette-rose-200:#fecdd3;--cl-palette-rose-300:#fda4af;--cl-palette-rose-400:#fb7185;--cl-palette-rose-500:#f43f5e;--cl-palette-rose-600:#e11d48;--cl-palette-rose-700:#be123c;--cl-palette-rose-800:#9f1239;--cl-palette-rose-900:#881337;--cl-palette-rose-950:#4c0519;--cl-palette-sky-50:#f0f9ff;--cl-palette-sky-100:#e0f2fe;--cl-palette-sky-200:#bae6fd;--cl-palette-sky-300:#7dd3fc;--cl-palette-sky-400:#38bdf8;--cl-palette-sky-500:#0ea5e9;--cl-palette-sky-600:#0284c7;--cl-palette-sky-700:#0369a1;--cl-palette-sky-800:#075985;--cl-palette-sky-900:#0c4a6e;--cl-palette-sky-950:#082f49;--cl-palette-white:#fff;--cl-palette-black:#000;--cl-space-0:0rem;--cl-space-1:.25rem;--cl-space-2:.5rem;--cl-space-3:.75rem;--cl-space-4:1rem;--cl-space-5:1.25rem;--cl-space-6:1.5rem;--cl-space-8:2rem;--cl-space-10:2.5rem;--cl-space-12:3rem;--cl-space-16:4rem;--cl-font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--cl-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--cl-font-xs:.75rem;--cl-line-height-xs:1rem;--cl-letter-spacing-xs:.01em;--cl-font-sm:.875rem;--cl-line-height-sm:1.25rem;--cl-letter-spacing-sm:0;--cl-font-base:1rem;--cl-line-height-base:1.5rem;--cl-letter-spacing-base:0;--cl-font-lg:1.125rem;--cl-line-height-lg:1.75rem;--cl-letter-spacing-lg:-.01em;--cl-font-xl:1.25rem;--cl-line-height-xl:1.75rem;--cl-letter-spacing-xl:-.015em;--cl-font-2xl:1.5rem;--cl-line-height-2xl:2rem;--cl-letter-spacing-2xl:-.02em;--cl-font-3xl:1.875rem;--cl-line-height-3xl:2.25rem;--cl-letter-spacing-3xl:-.025em;--cl-font-4xl:2.25rem;--cl-line-height-4xl:2.5rem;--cl-letter-spacing-4xl:-.03em;--cl-font-5xl:3rem;--cl-line-height-5xl:1.15;--cl-letter-spacing-5xl:-.035em;--cl-font-weight-regular:400;--cl-font-weight-medium:500;--cl-font-weight-semibold:600;--cl-font-weight-bold:700;--cl-rad-none:0px;--cl-rad-xs:2px;--cl-rad-sm:4px;--cl-rad-md:6px;--cl-rad-lg:8px;--cl-rad-xl:12px;--cl-rad-2xl:16px;--cl-rad-full:9999px;--cl-shadow-sm:0 1px 2px 0 #0000000d;--cl-shadow-md:0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000d;--cl-shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000a;--cl-shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000000a;--cl-z-deep:-1;--cl-z-base:0;--cl-z-raised:10;--cl-z-dropdown:1000;--cl-z-sticky:1100;--cl-z-backdrop:1200;--cl-z-modal:1300;--cl-z-popover:1400;--cl-z-toast:1500;--cl-z-tooltip:1600;--cl-duration-fast:.15s;--cl-duration-normal:.25s;--cl-duration-slow:.35s;--cl-ease-default:cubic-bezier(.4, 0, .2, 1);--cl-ease-out:cubic-bezier(0, 0, .2, 1);--cl-ease-in:cubic-bezier(.4, 0, 1, 1);--cl-ease-spring:cubic-bezier(.34, 1.56, .64, 1);--cl-transition-colors:color var(--cl-duration-fast) var(--cl-ease-default), background-color var(--cl-duration-fast) var(--cl-ease-default), border-color var(--cl-duration-fast) var(--cl-ease-default);--cl-transition-transform:transform var(--cl-duration-fast) var(--cl-ease-default);--cl-transition-opacity:opacity var(--cl-duration-fast) var(--cl-ease-default)}@media (prefers-reduced-motion:reduce){:root{--cl-duration-fast:0s!important;--cl-duration-normal:0s!important;--cl-duration-slow:0s!important;--cl-transition-colors:none!important;--cl-transition-transform:none!important;--cl-transition-opacity:none!important}}}@layer cl-theme{:root,[data-theme=light]{--cl-color-bg-canvas:var(--cl-palette-white);--cl-color-bg-surface:var(--cl-palette-slate-50);--cl-color-bg-elev:var(--cl-palette-white);--cl-color-bg-muted:var(--cl-palette-slate-100);--cl-color-fg-primary:var(--cl-palette-slate-900);--cl-color-fg-secondary:var(--cl-palette-slate-700);--cl-color-fg-muted:var(--cl-palette-slate-500);--cl-color-fg-inverse:var(--cl-palette-white);--cl-color-border-subtle:var(--cl-palette-slate-200);--cl-color-border-default:var(--cl-palette-slate-300);--cl-color-border-strong:var(--cl-palette-slate-400);--cl-color-primary-base:var(--cl-palette-indigo-600);--cl-color-primary-hover:var(--cl-palette-indigo-700);--cl-color-primary-active:var(--cl-palette-indigo-800);--cl-color-primary-fg:var(--cl-palette-white);--cl-color-primary-subtle:var(--cl-palette-indigo-50);--cl-color-secondary-base:var(--cl-palette-violet-600);--cl-color-secondary-hover:var(--cl-palette-violet-700);--cl-color-secondary-active:var(--cl-palette-violet-800);--cl-color-secondary-fg:var(--cl-palette-white);--cl-color-secondary-subtle:var(--cl-palette-violet-50);--cl-color-neutral-base:var(--cl-palette-slate-700);--cl-color-neutral-hover:var(--cl-palette-slate-800);--cl-color-neutral-active:var(--cl-palette-slate-900);--cl-color-neutral-fg:var(--cl-palette-white);--cl-color-neutral-subtle:var(--cl-palette-slate-100);--cl-color-success-base:var(--cl-palette-emerald-600);--cl-color-success-hover:var(--cl-palette-emerald-700);--cl-color-success-active:var(--cl-palette-emerald-800);--cl-color-success-fg:var(--cl-palette-white);--cl-color-success-subtle:var(--cl-palette-emerald-50);--cl-color-warning-base:var(--cl-palette-amber-600);--cl-color-warning-hover:var(--cl-palette-amber-700);--cl-color-warning-active:var(--cl-palette-amber-800);--cl-color-warning-fg:var(--cl-palette-white);--cl-color-warning-subtle:var(--cl-palette-amber-50);--cl-color-danger-base:var(--cl-palette-rose-600);--cl-color-danger-hover:var(--cl-palette-rose-700);--cl-color-danger-active:var(--cl-palette-rose-800);--cl-color-danger-fg:var(--cl-palette-white);--cl-color-danger-subtle:var(--cl-palette-rose-50);--cl-color-info-base:var(--cl-palette-sky-600);--cl-color-info-hover:var(--cl-palette-sky-700);--cl-color-info-active:var(--cl-palette-sky-800);--cl-color-info-fg:var(--cl-palette-white);--cl-color-info-subtle:var(--cl-palette-sky-50);--cl-color-focus-ring:#6366f173;--cl-color-backdrop:#0f172a80;--cl-button-primary-bg:var(--cl-color-primary-base);--cl-button-primary-fg:var(--cl-color-primary-fg);--cl-button-primary-hover-bg:var(--cl-color-primary-hover);--cl-button-primary-active-bg:var(--cl-color-primary-active);--cl-button-neutral-bg:var(--cl-color-neutral-base);--cl-button-neutral-fg:var(--cl-color-neutral-fg);--cl-button-neutral-hover-bg:var(--cl-color-neutral-hover);--cl-button-neutral-active-bg:var(--cl-color-neutral-active);--cl-button-danger-bg:var(--cl-color-danger-base);--cl-button-danger-fg:var(--cl-color-danger-fg);--cl-button-danger-hover-bg:var(--cl-color-danger-hover);--cl-button-danger-active-bg:var(--cl-color-danger-active);--cl-input-bg:var(--cl-color-bg-canvas);--cl-input-fg:var(--cl-color-fg-primary);--cl-input-border:var(--cl-color-border-default);--cl-input-focus-border:var(--cl-color-primary-base);--cl-input-invalid-border:var(--cl-color-danger-base);--cl-input-placeholder:var(--cl-color-fg-muted);--cl-card-bg:var(--cl-color-bg-canvas);--cl-card-border:var(--cl-color-border-subtle);--cl-card-elevated-bg:var(--cl-color-bg-elev);--cl-dialog-bg:var(--cl-color-bg-elev);--cl-dialog-border:var(--cl-color-border-subtle);--cl-dialog-backdrop:var(--cl-color-backdrop);--cl-badge-default-bg:var(--cl-color-primary-subtle);--cl-badge-default-fg:var(--cl-color-primary-base);--cl-table-border:var(--cl-color-border-subtle);--cl-table-header-bg:var(--cl-color-bg-surface);--cl-table-row-hover-bg:var(--cl-color-bg-muted)}[data-theme=dark]{--cl-color-bg-canvas:var(--cl-palette-slate-950);--cl-color-bg-surface:#131b2e;--cl-color-bg-elev:var(--cl-palette-slate-800);--cl-color-bg-muted:var(--cl-palette-slate-800);--cl-color-fg-primary:var(--cl-palette-slate-50);--cl-color-fg-secondary:var(--cl-palette-slate-300);--cl-color-fg-muted:var(--cl-palette-slate-400);--cl-color-fg-inverse:var(--cl-palette-slate-900);--cl-color-border-subtle:var(--cl-palette-slate-800);--cl-color-border-default:var(--cl-palette-slate-700);--cl-color-border-strong:var(--cl-palette-slate-600);--cl-color-primary-base:var(--cl-palette-indigo-500);--cl-color-primary-hover:var(--cl-palette-indigo-400);--cl-color-primary-active:var(--cl-palette-indigo-600);--cl-color-primary-fg:var(--cl-palette-white);--cl-color-primary-subtle:#6366f126;--cl-color-secondary-base:var(--cl-palette-violet-500);--cl-color-secondary-hover:var(--cl-palette-violet-400);--cl-color-secondary-active:var(--cl-palette-violet-600);--cl-color-secondary-fg:var(--cl-palette-white);--cl-color-secondary-subtle:#8b5cf626;--cl-color-neutral-base:var(--cl-palette-slate-600);--cl-color-neutral-hover:var(--cl-palette-slate-500);--cl-color-neutral-active:var(--cl-palette-slate-400);--cl-color-neutral-fg:var(--cl-palette-white);--cl-color-neutral-subtle:#ffffff14;--cl-color-success-base:var(--cl-palette-emerald-500);--cl-color-success-hover:var(--cl-palette-emerald-400);--cl-color-success-active:var(--cl-palette-emerald-600);--cl-color-success-fg:var(--cl-palette-white);--cl-color-success-subtle:#10b98126;--cl-color-warning-base:var(--cl-palette-amber-500);--cl-color-warning-hover:var(--cl-palette-amber-400);--cl-color-warning-active:var(--cl-palette-amber-600);--cl-color-warning-fg:var(--cl-palette-white);--cl-color-warning-subtle:#f59e0b26;--cl-color-danger-base:var(--cl-palette-rose-500);--cl-color-danger-hover:var(--cl-palette-rose-400);--cl-color-danger-active:var(--cl-palette-rose-600);--cl-color-danger-fg:var(--cl-palette-white);--cl-color-danger-subtle:#f43f5e26;--cl-color-info-base:var(--cl-palette-sky-500);--cl-color-info-hover:var(--cl-palette-sky-400);--cl-color-info-active:var(--cl-palette-sky-600);--cl-color-info-fg:var(--cl-palette-white);--cl-color-info-subtle:#0ea5e926;--cl-color-focus-ring:#818cf88c;--cl-color-backdrop:#000000b3;--cl-shadow-sm:0 1px 2px 0 #0000004d;--cl-shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;--cl-shadow-lg:0 10px 15px -3px #00000080, 0 4px 6px -4px #0006;--cl-shadow-xl:0 20px 25px -5px #0009, 0 8px 10px -6px #0006;--cl-input-bg:var(--cl-palette-slate-900);--cl-card-bg:var(--cl-palette-slate-900);--cl-card-elevated-bg:var(--cl-palette-slate-800);--cl-dialog-bg:var(--cl-palette-slate-900);--cl-dialog-border:var(--cl-palette-slate-800)}}@layer cl-reset{[class^=cl-],[class*=\ cl-],[class^=cl-] *,[class*=\ cl-] *,[class^=cl-] :before,[class*=\ cl-] :before,[class^=cl-] :after,[class*=\ cl-] :after{box-sizing:border-box;border:0 solid}[class^=cl-],[class*=\ cl-]{font-family:var(--cl-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@layer cl-components{.cl-button{box-sizing:border-box;user-select:none;vertical-align:middle;white-space:nowrap;font-family:var(--cl-font-sans);font-weight:var(--cl-font-weight-medium);cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--cl-duration-fast) var(--cl-ease-default), border-color var(--cl-duration-fast) var(--cl-ease-default), color var(--cl-duration-fast) var(--cl-ease-default), box-shadow var(--cl-duration-fast) var(--cl-ease-default), transform var(--cl-duration-fast) var(--cl-ease-default), opacity var(--cl-duration-fast) var(--cl-ease-default);border:1px solid #0000;outline:none;justify-content:center;align-items:center;margin:0;text-decoration:none;display:inline-flex;position:relative}.cl-button:focus-visible{outline:2px solid var(--cl-color-focus-ring);outline-offset:2px}.cl-button--full-width{width:100%;display:flex}.cl-button--disabled,.cl-button:disabled{opacity:.6;cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none!important}.cl-button--loading{cursor:wait;pointer-events:none}.cl-button--xs{height:1.75rem;padding:0 var(--cl-space-2);font-size:var(--cl-font-xs);line-height:var(--cl-line-height-xs);gap:var(--cl-space-1);border-radius:var(--cl-rad-sm)}.cl-button--xs .cl-button__icon,.cl-button--xs .cl-button__spinner{width:14px;height:14px}.cl-button--sm{height:2rem;padding:0 var(--cl-space-3);font-size:var(--cl-font-sm);line-height:var(--cl-line-height-sm);border-radius:var(--cl-rad-md);gap:6px}.cl-button--sm .cl-button__icon,.cl-button--sm .cl-button__spinner{width:16px;height:16px}.cl-button--md{height:2.5rem;padding:0 var(--cl-space-4);font-size:var(--cl-font-sm);line-height:var(--cl-line-height-sm);gap:var(--cl-space-2);border-radius:var(--cl-rad-md)}.cl-button--md .cl-button__icon,.cl-button--md .cl-button__spinner{width:18px;height:18px}.cl-button--lg{height:3rem;padding:0 var(--cl-space-5);font-size:var(--cl-font-base);line-height:var(--cl-line-height-base);border-radius:var(--cl-rad-lg);gap:10px}.cl-button--lg .cl-button__icon,.cl-button--lg .cl-button__spinner{width:20px;height:20px}.cl-button--xl{height:3.5rem;padding:0 var(--cl-space-6);font-size:var(--cl-font-lg);line-height:var(--cl-line-height-lg);gap:var(--cl-space-3);border-radius:var(--cl-rad-lg)}.cl-button--xl .cl-button__icon,.cl-button--xl .cl-button__spinner{width:24px;height:24px}.cl-button--primary{--cl-button-bg:var(--cl-color-primary-base);--cl-button-fg:var(--cl-color-primary-fg);--cl-button-hover-bg:var(--cl-color-primary-hover);--cl-button-active-bg:var(--cl-color-primary-active);--cl-button-subtle-bg:var(--cl-color-primary-subtle)}.cl-button--secondary{--cl-button-bg:var(--cl-color-secondary-base);--cl-button-fg:var(--cl-color-secondary-fg);--cl-button-hover-bg:var(--cl-color-secondary-hover);--cl-button-active-bg:var(--cl-color-secondary-active);--cl-button-subtle-bg:var(--cl-color-secondary-subtle)}.cl-button--neutral{--cl-button-bg:var(--cl-color-neutral-base);--cl-button-fg:var(--cl-color-neutral-fg);--cl-button-hover-bg:var(--cl-color-neutral-hover);--cl-button-active-bg:var(--cl-color-neutral-active);--cl-button-subtle-bg:var(--cl-color-neutral-subtle)}.cl-button--success{--cl-button-bg:var(--cl-color-success-base);--cl-button-fg:var(--cl-color-success-fg);--cl-button-hover-bg:var(--cl-color-success-hover);--cl-button-active-bg:var(--cl-color-success-active);--cl-button-subtle-bg:var(--cl-color-success-subtle)}.cl-button--warning{--cl-button-bg:var(--cl-color-warning-base);--cl-button-fg:var(--cl-color-warning-fg);--cl-button-hover-bg:var(--cl-color-warning-hover);--cl-button-active-bg:var(--cl-color-warning-active);--cl-button-subtle-bg:var(--cl-color-warning-subtle)}.cl-button--danger{--cl-button-bg:var(--cl-color-danger-base);--cl-button-fg:var(--cl-color-danger-fg);--cl-button-hover-bg:var(--cl-color-danger-hover);--cl-button-active-bg:var(--cl-color-danger-active);--cl-button-subtle-bg:var(--cl-color-danger-subtle)}.cl-button--info{--cl-button-bg:var(--cl-color-info-base);--cl-button-fg:var(--cl-color-info-fg);--cl-button-hover-bg:var(--cl-color-info-hover);--cl-button-active-bg:var(--cl-color-info-active);--cl-button-subtle-bg:var(--cl-color-info-subtle)}.cl-button--solid{background-color:var(--cl-button-bg);color:var(--cl-button-fg);border-color:#0000}.cl-button--solid:hover:not(:disabled):not(.cl-button--disabled){background-color:var(--cl-button-hover-bg)}.cl-button--solid:active:not(:disabled):not(.cl-button--disabled){background-color:var(--cl-button-active-bg);transform:scale(.98)}.cl-button--outline{color:var(--cl-button-bg);border-color:var(--cl-button-bg);background-color:#0000}.cl-button--outline:hover:not(:disabled):not(.cl-button--disabled){background-color:var(--cl-button-subtle-bg)}.cl-button--outline:active:not(:disabled):not(.cl-button--disabled){background-color:var(--cl-button-subtle-bg);transform:scale(.98)}.cl-button--ghost{color:var(--cl-button-bg);background-color:#0000;border-color:#0000}.cl-button--ghost:hover:not(:disabled):not(.cl-button--disabled){background-color:var(--cl-button-subtle-bg)}.cl-button--ghost:active:not(:disabled):not(.cl-button--disabled){background-color:var(--cl-button-subtle-bg);transform:scale(.98)}.cl-button--subtle{background-color:var(--cl-button-subtle-bg);color:var(--cl-button-bg);border-color:#0000}.cl-button--subtle:hover:not(:disabled):not(.cl-button--disabled){background-color:var(--cl-button-subtle-bg);filter:brightness(.94)}.cl-button--subtle:active:not(:disabled):not(.cl-button--disabled){transform:scale(.98)}.cl-button--link{color:var(--cl-button-bg);height:auto;min-height:unset;box-shadow:none;background-color:#0000;border-color:#0000;border-radius:0;padding:0}.cl-button--link:hover:not(:disabled):not(.cl-button--disabled){text-decoration:underline}.cl-button--link:active:not(:disabled):not(.cl-button--disabled){transform:none}.cl-button__icon{flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex}.cl-button__spinner{flex-shrink:0;line-height:1;animation:.75s linear infinite cl-button-spin;display:inline-block}.cl-button__spinner-wrapper--center{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.cl-button__content--hidden{opacity:0;visibility:hidden}.cl-button__label{line-height:inherit;justify-content:center;align-items:center;display:inline-flex}@keyframes cl-button-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.cl-button,.cl-button__spinner{transition-duration:.01ms!important;animation-duration:.01ms!important}}.cl-button-group{box-sizing:border-box;display:inline-flex;position:relative}.cl-button-group--horizontal{flex-direction:row;align-items:center}.cl-button-group--vertical{flex-direction:column;align-items:stretch}.cl-button-group:not(.cl-button-group--attached){gap:var(--cl-space-2)}.cl-button-group--attached.cl-button-group--horizontal>.cl-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.cl-button-group--attached.cl-button-group--horizontal>.cl-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.cl-button-group--attached.cl-button-group--vertical>.cl-button:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}.cl-button-group--attached.cl-button-group--vertical>.cl-button:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.cl-button-group--attached>.cl-button:hover,.cl-button-group--attached>.cl-button:focus-visible,.cl-button-group--attached>.cl-button:active{z-index:1}}

package/dist/styles.css.d.cts

@@ -0,0 +1,2 @@
+declare const styles: string;
+export default styles;

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: string;
+export default styles;

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@chellaa/react",
+  "version": "0.2.0",
+  "description": "Production-grade, accessible, high-performance React component library and design system engine built with zero-runtime CSS custom properties.",
+  "keywords": [
+    "react",
+    "react-components",
+    "component-library",
+    "design-system",
+    "accessibility",
+    "wcag",
+    "wai-aria",
+    "zero-runtime",
+    "css-variables",
+    "typescript"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chellaa/chellaa-react.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://chellaa.dev",
+  "bugs": {
+    "url": "https://github.com/chellaa/chellaa-react/issues"
+  },
+  "author": "Chellaa React Contributors",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "browser": {
+        "import": "./dist/index.mjs",
+        "require": "./dist/index.cjs"
+      },
+      "node": {
+        "import": "./dist/index.node.mjs",
+        "require": "./dist/index.cjs"
+      },
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    },
+    "./styles.css": {
+      "import": {
+        "types": "./dist/styles.css.d.ts",
+        "default": "./dist/styles.css"
+      },
+      "require": {
+        "types": "./dist/styles.css.d.cts",
+        "default": "./dist/styles.css"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "styles.css",
+    "styles.css.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/build-css.mjs",
+    "dev": "tsup --watch",
+    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "size": "size-limit"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.15.4",
+    "@size-limit/preset-small-lib": "^11.1.4",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "jsdom": "^25.0.1",
+    "lightningcss": "^1.26.0",
+    "publint": "^0.2.11",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "size-limit": "^11.1.4",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.2",
+    "vitest-axe": "^0.1.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/styles.css

@@ -0,0 +1 @@
+@import "./dist/styles.css";

package/styles.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: string;
+export default styles;