@skygraph/react 0.5.1 → 0.5.3

package/dist/{chunk-FSV73JI4.js → chunk-PEX2UTNG.js}

@@ -1,7 +1,7 @@
 import {
   Spin,
   useConfig
-} from "./chunk-2OCEO636.js";
+} from "./chunk-VLRLCHEL.js";
 
 // src/components/ui/Checkbox.tsx
 import React from "react";
@@ -55,4 +55,4 @@ function Checkbox({
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-FSV73JI4.js.map
+//# sourceMappingURL=chunk-PEX2UTNG.js.map

package/dist/chunk-VLRLCHEL.js

@@ -0,0 +1,184 @@
+// src/components/ConfigProvider.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var SgConfigContext = createContext({});
+var TOKEN_TO_CSS_VAR = {
+  colorPrimary: "--sg-color-primary",
+  colorSuccess: "--sg-color-success",
+  colorWarning: "--sg-color-warning",
+  colorError: "--sg-color-error",
+  colorText: "--sg-color-text",
+  colorBg: "--sg-color-bg",
+  colorBorder: "--sg-color-border",
+  borderRadius: "--sg-border-radius",
+  fontSize: "--sg-font-size",
+  fontFamily: "--sg-font-sans"
+};
+var PX_TOKENS = /* @__PURE__ */ new Set(["borderRadius", "fontSize"]);
+function buildThemeVars(theme) {
+  const vars = {};
+  if (!theme) return vars;
+  if (theme.token) {
+    for (const key of Object.keys(theme.token)) {
+      const value = theme.token[key];
+      if (value == null) continue;
+      const cssVar = TOKEN_TO_CSS_VAR[key];
+      if (!cssVar) continue;
+      vars[cssVar] = typeof value === "number" && PX_TOKENS.has(key) ? `${value}px` : String(value);
+    }
+  }
+  if (theme.cssVars) {
+    for (const [name, value] of Object.entries(theme.cssVars)) {
+      if (value == null) continue;
+      vars[name.startsWith("--") ? name : `--${name}`] = String(value);
+    }
+  }
+  return vars;
+}
+function mergeTheme(parent, child) {
+  if (!parent) return child;
+  if (!child) return parent;
+  return {
+    mode: child.mode ?? parent.mode,
+    token: { ...parent.token, ...child.token },
+    cssVars: { ...parent.cssVars, ...child.cssVars }
+  };
+}
+function ConfigProvider({ children, ...config }) {
+  const parent = useContext(SgConfigContext);
+  const merged = useMemo(
+    () => ({
+      size: config.size ?? parent.size,
+      disabled: config.disabled ?? parent.disabled,
+      bordered: config.bordered ?? parent.bordered,
+      direction: config.direction ?? parent.direction,
+      locale: config.locale ? parent.locale ? { ...parent.locale, ...config.locale } : config.locale : parent.locale,
+      theme: mergeTheme(parent.theme, config.theme),
+      getPopupContainer: config.getPopupContainer ?? parent.getPopupContainer,
+      getTargetContainer: config.getTargetContainer ?? parent.getTargetContainer,
+      renderEmpty: config.renderEmpty ?? parent.renderEmpty,
+      csp: config.csp ?? parent.csp
+    }),
+    [
+      config.size,
+      config.disabled,
+      config.bordered,
+      config.direction,
+      config.locale,
+      config.theme,
+      config.getPopupContainer,
+      config.getTargetContainer,
+      config.renderEmpty,
+      config.csp,
+      parent
+    ]
+  );
+  const ownVars = useMemo(() => buildThemeVars(config.theme), [config.theme]);
+  const mode = config.theme?.mode;
+  const direction = config.direction;
+  const needsScope = Boolean(direction || mode || Object.keys(ownVars).length > 0);
+  const content = needsScope ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "sg-config-provider",
+      style: { display: "contents", ...ownVars },
+      dir: direction,
+      "data-sg-theme": mode,
+      children
+    }
+  ) : children;
+  return /* @__PURE__ */ jsx(SgConfigContext.Provider, { value: merged, children: content });
+}
+function useConfig() {
+  return useContext(SgConfigContext);
+}
+function useConfigWithDefaults(props, defaults) {
+  const config = useContext(SgConfigContext);
+  return useMemo(() => {
+    const resolvedSize = props.size ?? config.size ?? defaults.size ?? "middle";
+    const resolvedDisabled = props.disabled ?? config.disabled ?? defaults.disabled ?? false;
+    const resolvedDirection = props.direction ?? config.direction ?? defaults.direction ?? "ltr";
+    return { ...props, resolvedSize, resolvedDisabled, resolvedDirection };
+  }, [
+    props,
+    config.size,
+    config.disabled,
+    config.direction,
+    defaults.size,
+    defaults.disabled,
+    defaults.direction
+  ]);
+}
+
+// src/components/ui/Spin.tsx
+import React2 from "react";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Spin({
+  spinning = true,
+  size: sizeProp,
+  delay,
+  tip,
+  fullscreen,
+  indicator,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const resolvedSize = sizeProp ?? config.size ?? "middle";
+  const [visible, setVisible] = React2.useState(delay ? false : spinning);
+  React2.useEffect(() => {
+    if (!delay) {
+      setVisible(spinning);
+      return;
+    }
+    if (spinning) {
+      const timer = setTimeout(() => setVisible(true), delay);
+      return () => clearTimeout(timer);
+    }
+    setVisible(false);
+  }, [spinning, delay]);
+  if (!visible && !children) return null;
+  if (!visible && children) return /* @__PURE__ */ jsx2(Fragment, { children });
+  const spinSizeClass = resolvedSize === "middle" ? "default" : resolvedSize;
+  const spinClasses = unstyled ? className ?? "" : ["sg-spin", `sg-spin-${spinSizeClass}`, className].filter(Boolean).join(" ");
+  const spinElement = indicator ?? /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: spinClasses,
+      style,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": config.locale?.spin?.loading ?? "Loading"
+    }
+  );
+  if (fullscreen) {
+    return /* @__PURE__ */ jsx2("div", { className: unstyled ? "" : "sg-spin-fullscreen", children: /* @__PURE__ */ jsxs("div", { className: unstyled ? "" : "sg-spin-fullscreen-inner", children: [
+      spinElement,
+      tip && /* @__PURE__ */ jsx2("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }) });
+  }
+  if (!children) {
+    return /* @__PURE__ */ jsxs("span", { className: unstyled ? "" : "sg-spin-standalone", style, children: [
+      spinElement,
+      tip && /* @__PURE__ */ jsx2("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: unstyled ? "" : "sg-spin-container", style, children: [
+    /* @__PURE__ */ jsxs("div", { className: unstyled ? "" : "sg-spin-overlay", children: [
+      spinElement,
+      tip && /* @__PURE__ */ jsx2("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: visible ? unstyled ? "" : "sg-spin-blur" : "", children })
+  ] });
+}
+
+export {
+  buildThemeVars,
+  ConfigProvider,
+  useConfig,
+  useConfigWithDefaults,
+  Spin
+};
+//# sourceMappingURL=chunk-VLRLCHEL.js.map

package/dist/chunk-VLRLCHEL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ConfigProvider.tsx","../src/components/ui/Spin.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { SizeType, SgLocale } from '../types'\n\n/** Text/layout direction shared by descendant components. */\nexport type Direction = 'ltr' | 'rtl'\n\n/**\n * Friendly design-token overrides. Each entry is mapped to a `--sg-*` CSS\n * custom property and emitted onto a `display: contents` scope wrapper, so\n * overrides cascade to every descendant without affecting layout.\n *\n * Numeric values for length-like tokens (`borderRadius`, `fontSize`) are\n * suffixed with `px`; everything else is emitted verbatim.\n */\nexport interface SgThemeToken {\n  /** Brand / primary color → `--sg-color-primary`. */\n  colorPrimary?: string\n  /** Success color → `--sg-color-success`. */\n  colorSuccess?: string\n  /** Warning color → `--sg-color-warning`. */\n  colorWarning?: string\n  /** Error / danger color → `--sg-color-error`. */\n  colorError?: string\n  /** Base text color → `--sg-color-text`. */\n  colorText?: string\n  /** Base background color → `--sg-color-bg`. */\n  colorBg?: string\n  /** Base border color → `--sg-color-border`. */\n  colorBorder?: string\n  /** Base corner radius → `--sg-border-radius` (number ⇒ px). */\n  borderRadius?: number | string\n  /** Base font size → `--sg-font-size` (number ⇒ px). */\n  fontSize?: number | string\n  /** Base font family → `--sg-font-sans`. */\n  fontFamily?: string\n}\n\n/**\n * Theme configuration. Combines a built-in light/dark preset (`mode`),\n * friendly token overrides (`token`), and an escape hatch for raw CSS\n * variables (`cssVars`). All three are applied to a scope wrapper.\n */\nexport interface ThemeConfig {\n  /** Built-in palette preset applied via `data-sg-theme`. */\n  mode?: 'light' | 'dark'\n  /** Friendly token overrides mapped to `--sg-*` variables. */\n  token?: SgThemeToken\n  /** Raw CSS variable overrides (full names, e.g. `{ '--sg-color-link': '#f50' }`). */\n  cssVars?: Record<string, string>\n}\n\n/** Content-Security-Policy options for runtime-injected styles. */\nexport interface CSPConfig {\n  /** `nonce` attribute applied to dynamically created `<style>` tags. */\n  nonce?: string\n}\n\n/** Customizes the empty state rendered by data components (`Empty`, `Table`, …). */\nexport type RenderEmptyHandler = (componentName?: string) => React.ReactNode\n\n/**\n * Global Skygraph component configuration merged through React context.\n *\n * По `prefixCls`: сознательно НЕ входит в публичный API до реализации\n * (вариант A в `docs/styling-plan.md`, фаза 4). На практике все корневые классы\n * имеют стабильный префикс `.sg-*`; если нужна изоляция — используйте изолированный\n * скоуп на хосте (шадоу-рут/отдельный контейнер со своими токенами).\n */\nexport interface SgConfig {\n  /** Default size token for nested components. */\n  size?: SizeType\n  /** Disables interactions for nested components when true. */\n  disabled?: boolean\n  /** Enables bordered styling for nested components when true. */\n  bordered?: boolean\n  /** Text / layout direction (`ltr` by default) applied via the `dir` attribute. */\n  direction?: Direction\n  /** Locale messages shallow-merged with the parent provider when set. */\n  locale?: SgLocale\n  /** Theme preset + token overrides applied to a scope wrapper. */\n  theme?: ThemeConfig\n  /**\n   * Returns the mount node for popups (dropdowns, tooltips, pickers). Defaults\n   * to `document.body` in consumers. Useful to keep overlays inside a scrolling\n   * or scoped container.\n   */\n  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement\n  /** Returns the scroll/target container for affix-like positioning. */\n  getTargetContainer?: () => HTMLElement\n  /** Global override for the default empty state. */\n  renderEmpty?: RenderEmptyHandler\n  /** Content-Security-Policy options for injected styles. */\n  csp?: CSPConfig\n}\n\nconst SgConfigContext = createContext<SgConfig>({})\n\n/** Props for `ConfigProvider`, extending `SgConfig` with React children. */\nexport interface ConfigProviderProps extends SgConfig {\n  /** Tree of components that consume merged configuration from this provider. */\n  children: React.ReactNode\n}\n\n/** Maps friendly token names to their `--sg-*` CSS variable. */\nconst TOKEN_TO_CSS_VAR: Record<keyof SgThemeToken, string> = {\n  colorPrimary: '--sg-color-primary',\n  colorSuccess: '--sg-color-success',\n  colorWarning: '--sg-color-warning',\n  colorError: '--sg-color-error',\n  colorText: '--sg-color-text',\n  colorBg: '--sg-color-bg',\n  colorBorder: '--sg-color-border',\n  borderRadius: '--sg-border-radius',\n  fontSize: '--sg-font-size',\n  fontFamily: '--sg-font-sans',\n}\n\n/** Token keys whose numeric values should be emitted as `px` lengths. */\nconst PX_TOKENS = new Set<keyof SgThemeToken>(['borderRadius', 'fontSize'])\n\n/** Builds a CSS-variable map from a theme's `token` + `cssVars`. */\nexport function buildThemeVars(theme?: ThemeConfig): Record<string, string> {\n  const vars: Record<string, string> = {}\n  if (!theme) return vars\n  if (theme.token) {\n    for (const key of Object.keys(theme.token) as Array<keyof SgThemeToken>) {\n      const value = theme.token[key]\n      if (value == null) continue\n      const cssVar = TOKEN_TO_CSS_VAR[key]\n      if (!cssVar) continue\n      vars[cssVar] = typeof value === 'number' && PX_TOKENS.has(key) ? `${value}px` : String(value)\n    }\n  }\n  if (theme.cssVars) {\n    for (const [name, value] of Object.entries(theme.cssVars)) {\n      if (value == null) continue\n      vars[name.startsWith('--') ? name : `--${name}`] = String(value)\n    }\n  }\n  return vars\n}\n\n/** Shallow-merges a parent and child theme (`token` / `cssVars` merged key-wise). */\nfunction mergeTheme(parent?: ThemeConfig, child?: ThemeConfig): ThemeConfig | undefined {\n  if (!parent) return child\n  if (!child) return parent\n  return {\n    mode: child.mode ?? parent.mode,\n    token: { ...parent.token, ...child.token },\n    cssVars: { ...parent.cssVars, ...child.cssVars },\n  }\n}\n\n/**\n * Merges Skygraph configuration with any parent provider and exposes it via context.\n * Descendants read values through `useConfig` or `useConfigWithDefaults`.\n *\n * When `theme` or `direction` is set, children are wrapped in a `display: contents`\n * element that carries the `dir`/`data-sg-theme` attributes and CSS variables, so\n * the scope inherits without introducing an extra layout box.\n */\nexport function ConfigProvider({ children, ...config }: ConfigProviderProps) {\n  const parent = useContext(SgConfigContext)\n\n  const merged = useMemo<SgConfig>(\n    () => ({\n      size: config.size ?? parent.size,\n      disabled: config.disabled ?? parent.disabled,\n      bordered: config.bordered ?? parent.bordered,\n      direction: config.direction ?? parent.direction,\n      locale: config.locale\n        ? parent.locale\n          ? { ...parent.locale, ...config.locale }\n          : config.locale\n        : parent.locale,\n      theme: mergeTheme(parent.theme, config.theme),\n      getPopupContainer: config.getPopupContainer ?? parent.getPopupContainer,\n      getTargetContainer: config.getTargetContainer ?? parent.getTargetContainer,\n      renderEmpty: config.renderEmpty ?? parent.renderEmpty,\n      csp: config.csp ?? parent.csp,\n    }),\n    [\n      config.size,\n      config.disabled,\n      config.bordered,\n      config.direction,\n      config.locale,\n      config.theme,\n      config.getPopupContainer,\n      config.getTargetContainer,\n      config.renderEmpty,\n      config.csp,\n      parent,\n    ],\n  )\n\n  // Only the *own* props are emitted to the DOM scope; CSS variables and the\n  // `dir` attribute cascade to descendants, so nested providers stay correct.\n  const ownVars = useMemo(() => buildThemeVars(config.theme), [config.theme])\n  const mode = config.theme?.mode\n  const direction = config.direction\n  const needsScope = Boolean(direction || mode || Object.keys(ownVars).length > 0)\n\n  const content = needsScope ? (\n    <div\n      className=\"sg-config-provider\"\n      style={{ display: 'contents', ...ownVars } as React.CSSProperties}\n      dir={direction}\n      data-sg-theme={mode}\n    >\n      {children}\n    </div>\n  ) : (\n    children\n  )\n\n  return <SgConfigContext.Provider value={merged}>{content}</SgConfigContext.Provider>\n}\n\n/** Returns the merged `SgConfig` from the nearest ancestor `ConfigProvider`. */\nexport function useConfig(): SgConfig {\n  return useContext(SgConfigContext)\n}\n\n/**\n * Resolves effective `size`, `disabled`, and `direction` from props, context,\n * and explicit defaults. Returns the original props plus the resolved values.\n */\nexport function useConfigWithDefaults<T extends Record<string, unknown>>(\n  props: T,\n  defaults: { size?: SizeType; disabled?: boolean; bordered?: boolean; direction?: Direction },\n): T & { resolvedSize: SizeType; resolvedDisabled: boolean; resolvedDirection: Direction } {\n  const config = useContext(SgConfigContext)\n\n  return useMemo(() => {\n    const resolvedSize =\n      ((props as Record<string, unknown>).size as SizeType | undefined) ??\n      config.size ??\n      defaults.size ??\n      'middle'\n    const resolvedDisabled =\n      ((props as Record<string, unknown>).disabled as boolean | undefined) ??\n      config.disabled ??\n      defaults.disabled ??\n      false\n    const resolvedDirection =\n      ((props as Record<string, unknown>).direction as Direction | undefined) ??\n      config.direction ??\n      defaults.direction ??\n      'ltr'\n\n    return { ...props, resolvedSize, resolvedDisabled, resolvedDirection }\n  }, [\n    props,\n    config.size,\n    config.disabled,\n    config.direction,\n    defaults.size,\n    defaults.disabled,\n    defaults.direction,\n  ])\n}\n","import React from 'react'\nimport { useConfig } from '../ConfigProvider'\nimport type { BaseComponentProps, SizableProps } from '../../types'\n\n/** Props for loading spinner, overlay, and optional content blur. */\nexport interface SpinProps extends BaseComponentProps, SizableProps {\n  /** When `true`, shows the loading state (subject to `delay`). @default true */\n  spinning?: boolean\n  /** Milliseconds to wait before showing the spinner after `spinning` becomes true. */\n  delay?: number\n  /** Optional text below the indicator. */\n  tip?: string\n  /** When `true`, covers the viewport instead of inline or wrapping children. */\n  fullscreen?: boolean\n  /** Custom spinner node; defaults to a styled status element. */\n  indicator?: React.ReactNode\n  /** When set, shows an overlay with blur on this content while loading. */\n  children?: React.ReactNode\n}\n\n/**\n * Loading indicator with optional delay, tip, fullscreen mode, and child overlay.\n */\nexport function Spin({\n  spinning = true,\n  size: sizeProp,\n  delay,\n  tip,\n  fullscreen,\n  indicator,\n  children,\n  className,\n  style,\n  unstyled,\n}: SpinProps) {\n  const config = useConfig()\n  const resolvedSize = sizeProp ?? config.size ?? 'middle'\n\n  const [visible, setVisible] = React.useState(delay ? false : spinning)\n\n  React.useEffect(() => {\n    if (!delay) {\n      setVisible(spinning)\n      return\n    }\n\n    if (spinning) {\n      const timer = setTimeout(() => setVisible(true), delay)\n      return () => clearTimeout(timer)\n    }\n\n    setVisible(false)\n  }, [spinning, delay])\n\n  if (!visible && !children) return null\n  if (!visible && children) return <>{children}</>\n\n  const spinSizeClass = resolvedSize === 'middle' ? 'default' : resolvedSize\n  const spinClasses = unstyled\n    ? (className ?? '')\n    : ['sg-spin', `sg-spin-${spinSizeClass}`, className].filter(Boolean).join(' ')\n\n  const spinElement = indicator ?? (\n    <span\n      className={spinClasses}\n      style={style}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-label={config.locale?.spin?.loading ?? 'Loading'}\n    />\n  )\n\n  if (fullscreen) {\n    return (\n      <div className={unstyled ? '' : 'sg-spin-fullscreen'}>\n        <div className={unstyled ? '' : 'sg-spin-fullscreen-inner'}>\n          {spinElement}\n          {tip && <div className={unstyled ? '' : 'sg-spin-tip'}>{tip}</div>}\n        </div>\n      </div>\n    )\n  }\n\n  if (!children) {\n    return (\n      <span className={unstyled ? '' : 'sg-spin-standalone'} style={style}>\n        {spinElement}\n        {tip && <div className={unstyled ? '' : 'sg-spin-tip'}>{tip}</div>}\n      </span>\n    )\n  }\n\n  return (\n    <div className={unstyled ? '' : 'sg-spin-container'} style={style}>\n      <div className={unstyled ? '' : 'sg-spin-overlay'}>\n        {spinElement}\n        {tip && <div className={unstyled ? '' : 'sg-spin-tip'}>{tip}</div>}\n      </div>\n      <div className={visible ? (unstyled ? '' : 'sg-spin-blur') : ''}>{children}</div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["React","jsx","React"]}

package/dist/{chunk-MLEBVELO.js → chunk-YTPUWPWA.js}

@@ -2,11 +2,11 @@ import {
   Button,
   Input,
   Transition
-} from "./chunk-ZJF6SJLP.js";
+} from "./chunk-45YW5VSP.js";
 import {
   Spin,
   useConfig
-} from "./chunk-2OCEO636.js";
+} from "./chunk-VLRLCHEL.js";
 
 // src/hooks/useField.ts
 import { useEffect, useState, useCallback, useRef } from "react";
@@ -876,20 +876,10 @@ function AutoField(props) {
   const errorId = `${name}-error`;
   const hasErrors = meta.errors.length > 0;
   const hasWarnings = meta.warnings.length > 0;
-  const wrapperStyle = {
-    display: "flex",
-    flexDirection: "column",
-    gap: 4,
-    ...style
-  };
-  const inputStyle = {
-    padding: "6px 12px",
-    border: `1px solid ${hasErrors ? "var(--sg-error, #ff4d4f)" : hasWarnings ? "var(--sg-warning, #faad14)" : "var(--sg-border, #d9d9d9)"}`,
-    borderRadius: "var(--sg-radius, 6px)",
-    fontSize: 14,
-    outline: "none",
-    background: disabled ? "var(--sg-bg-disabled, #f5f5f5)" : "var(--sg-bg, #fff)"
-  };
+  const inputClass = [
+    "sg-autofield-input",
+    hasErrors ? "sg-autofield-input-error" : hasWarnings ? "sg-autofield-input-warning" : ""
+  ].filter(Boolean).join(" ");
   function renderInput() {
     switch (inferredType) {
       case "boolean":
@@ -920,7 +910,7 @@ function AutoField(props) {
             min,
             max,
             step,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -934,7 +924,7 @@ function AutoField(props) {
             onBlur: () => form.onFieldBlur(name),
             placeholder,
             disabled,
-            style: { ...inputStyle, minHeight: 80, resize: "vertical" },
+            className: `${inputClass} sg-autofield-input-textarea`,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -946,7 +936,7 @@ function AutoField(props) {
             value: value == null ? "" : String(value),
             onChange: (e) => handleChange(e.target.value),
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0,
             children: [
@@ -966,27 +956,34 @@ function AutoField(props) {
               handleChange(selected);
             },
             disabled,
-            style: { ...inputStyle, minHeight: 80 },
+            className: `${inputClass} sg-autofield-input-multiple`,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0,
             children: options?.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
           }
         );
       case "radio":
-        return /* @__PURE__ */ jsx8("div", { role: "radiogroup", style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: options?.map((opt) => /* @__PURE__ */ jsxs4("label", { style: { display: "flex", alignItems: "center", gap: 4, cursor: "pointer" }, children: [
-          /* @__PURE__ */ jsx8(
-            "input",
-            {
-              type: "radio",
-              name,
-              value: opt.value,
-              checked: value === opt.value,
-              onChange: () => handleChange(opt.value),
-              disabled
-            }
-          ),
-          opt.label
-        ] }, opt.value)) });
+        return /* @__PURE__ */ jsx8("div", { role: "radiogroup", style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: options?.map((opt) => /* @__PURE__ */ jsxs4(
+          "label",
+          {
+            style: { display: "flex", alignItems: "center", gap: 4, cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx8(
+                "input",
+                {
+                  type: "radio",
+                  name,
+                  value: opt.value,
+                  checked: value === opt.value,
+                  onChange: () => handleChange(opt.value),
+                  disabled
+                }
+              ),
+              opt.label
+            ]
+          },
+          opt.value
+        )) });
       case "date":
         return /* @__PURE__ */ jsx8(
           "input",
@@ -995,7 +992,7 @@ function AutoField(props) {
             value: value == null ? "" : String(value),
             onChange: (e) => handleChange(e.target.value),
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1008,7 +1005,7 @@ function AutoField(props) {
             value: value == null ? "" : String(value),
             onChange: (e) => handleChange(e.target.value),
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1023,7 +1020,7 @@ function AutoField(props) {
             onBlur: () => form.onFieldBlur(name),
             placeholder,
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1036,7 +1033,7 @@ function AutoField(props) {
             value: value == null ? "#000000" : String(value),
             onChange: (e) => handleChange(e.target.value),
             disabled,
-            style: { ...inputStyle, padding: 2, width: 48, height: 32 }
+            className: `${inputClass} sg-autofield-input-color`
           }
         );
       case "slider":
@@ -1070,7 +1067,7 @@ function AutoField(props) {
               border: "none",
               cursor: disabled ? "default" : "pointer",
               fontSize: 20,
-              color: i < currentRate ? "var(--sg-warning, #faad14)" : "var(--sg-border, #d9d9d9)",
+              color: i < currentRate ? "var(--sg-color-warning, #faad14)" : "var(--sg-color-border, #d9d9d9)",
               padding: 0
             },
             "aria-label": `${i + 1} star${i !== 0 ? "s" : ""}`,
@@ -1091,7 +1088,7 @@ function AutoField(props) {
               if (files) handleChange(multiple ? Array.from(files) : files[0] ?? null);
             },
             disabled,
-            style: inputStyle
+            className: inputClass
           }
         );
       case "email":
@@ -1107,18 +1104,26 @@ function AutoField(props) {
             onBlur: () => form.onFieldBlur(name),
             placeholder,
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
         );
     }
   }
-  return /* @__PURE__ */ jsxs4("div", { className: `sg-autofield ${className ?? ""}`, style: wrapperStyle, children: [
-    inferredType !== "boolean" && inferredType !== "switch" && label && /* @__PURE__ */ jsx8("label", { style: { fontWeight: 500, fontSize: 14 }, children: label }),
+  return /* @__PURE__ */ jsxs4("div", { className: `sg-autofield ${className ?? ""}`, style, children: [
+    inferredType !== "boolean" && inferredType !== "switch" && label && /* @__PURE__ */ jsx8("label", { className: "sg-autofield-label", children: label }),
     renderInput(),
-    hasErrors && /* @__PURE__ */ jsx8("span", { id: errorId, role: "alert", style: { color: "var(--sg-error, #ff4d4f)", fontSize: 12 }, children: meta.errors.join("; ") }),
-    hasWarnings && !hasErrors && /* @__PURE__ */ jsx8("span", { style: { color: "var(--sg-warning, #faad14)", fontSize: 12 }, children: meta.warnings.join("; ") })
+    hasErrors && /* @__PURE__ */ jsx8(
+      "span",
+      {
+        id: errorId,
+        role: "alert",
+        style: { color: "var(--sg-color-error, #ff4d4f)", fontSize: 12 },
+        children: meta.errors.join("; ")
+      }
+    ),
+    hasWarnings && !hasErrors && /* @__PURE__ */ jsx8("span", { style: { color: "var(--sg-color-warning, #faad14)", fontSize: 12 }, children: meta.warnings.join("; ") })
   ] });
 }
 
@@ -1409,4 +1414,4 @@ export {
   jsonSchemaToDefaults,
   SchemaForm
 };
-//# sourceMappingURL=chunk-MLEBVELO.js.map
+//# sourceMappingURL=chunk-YTPUWPWA.js.map