@skygraph/react 0.5.2 → 0.5.4

package/dist/devtools.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/devtools.ts","../src/hooks/useHistory.ts","../src/components/devtools/HistoryPanel.tsx"],"sourcesContent":["export { useHistory } from './hooks/useHistory'\nexport type { UseHistoryReturn } from './hooks/useHistory'\nexport { HistoryPanel } from './components/devtools/HistoryPanel'\nexport type { HistoryPanelProps } from './components/devtools/HistoryPanel'\n","import { useState, useCallback, useEffect, useRef, useMemo } from 'react'\nimport type { Core } from '@skygraph/core'\nimport { createHistory } from '@skygraph/core'\nimport type { HistoryPlugin, HistoryOptions } from '@skygraph/core'\n\nexport interface UseHistoryReturn {\n  history: HistoryPlugin\n  canUndo: boolean\n  canRedo: boolean\n  cursor: number\n  entries: HistoryPlugin['entries']\n  undo: () => void\n  redo: () => void\n  jumpTo: (index: number) => void\n  clear: () => void\n}\n\nexport function useHistory(core: Core, options?: HistoryOptions): UseHistoryReturn {\n  const [, forceUpdate] = useState(0)\n  const historyRef = useRef<HistoryPlugin | null>(null)\n  const optionsRef = useRef(options)\n\n  if (!historyRef.current) {\n    historyRef.current = createHistory(core, optionsRef.current)\n  }\n\n  const tick = useCallback(() => forceUpdate((n) => n + 1), [])\n\n  const undo = useCallback(() => {\n    historyRef.current!.undo()\n    tick()\n  }, [tick])\n\n  const redo = useCallback(() => {\n    historyRef.current!.redo()\n    tick()\n  }, [tick])\n\n  const jumpTo = useCallback(\n    (index: number) => {\n      historyRef.current!.jumpTo(index)\n      tick()\n    },\n    [tick],\n  )\n\n  const clear = useCallback(() => {\n    historyRef.current!.clear()\n    tick()\n  }, [tick])\n\n  useEffect(() => {\n    return () => {\n      historyRef.current?.destroy()\n    }\n  }, [])\n\n  const h = historyRef.current\n\n  return useMemo(\n    () => ({\n      history: h,\n      canUndo: h.canUndo,\n      canRedo: h.canRedo,\n      cursor: h.cursor,\n      entries: h.entries,\n      undo,\n      redo,\n      jumpTo,\n      clear,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [h, h.cursor, h.entries.length, undo, redo, jumpTo, clear],\n  )\n}\n","import React, { useState } from 'react'\nimport type { UseHistoryReturn } from '../../hooks/useHistory'\nimport type { BaseComponentProps } from '../../types'\n\n/** Props for the devtools time-travel history panel (base layout props come from `BaseComponentProps`). */\nexport interface HistoryPanelProps extends BaseComponentProps {\n  /** History controller from `useHistory` (entries, cursor, undo/redo, jump, clear). */\n  history: UseHistoryReturn\n}\n\nconst styles: Record<string, React.CSSProperties> = {\n  root: {\n    fontFamily: 'ui-monospace, \"Cascadia Code\", \"Fira Code\", monospace',\n    fontSize: 12,\n    border: '1px solid var(--sg-border, #d9d9d9)',\n    borderRadius: 8,\n    background: 'var(--sg-bg-elevated, #fff)',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '8px 12px',\n    borderBottom: '1px solid var(--sg-border, #d9d9d9)',\n    fontWeight: 600,\n    fontSize: 13,\n  },\n  controls: {\n    display: 'flex',\n    gap: 4,\n  },\n  btn: {\n    padding: '2px 8px',\n    border: '1px solid var(--sg-border, #d9d9d9)',\n    borderRadius: 4,\n    background: 'var(--sg-bg, #fafafa)',\n    cursor: 'pointer',\n    fontSize: 11,\n  },\n  btnDisabled: {\n    opacity: 0.4,\n    cursor: 'not-allowed',\n  },\n  list: {\n    maxHeight: 300,\n    overflowY: 'auto' as const,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  entry: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    padding: '4px 12px',\n    cursor: 'pointer',\n    borderBottom: '1px solid var(--sg-border-light, #f0f0f0)',\n    transition: 'background 0.15s',\n  },\n  entryActive: {\n    background: 'var(--sg-primary-bg, #e6f4ff)',\n    fontWeight: 600,\n  },\n  entryFuture: {\n    opacity: 0.5,\n  },\n  badge: {\n    display: 'inline-block',\n    padding: '1px 6px',\n    borderRadius: 4,\n    fontSize: 10,\n    background: 'var(--sg-primary-bg, #e6f4ff)',\n    color: 'var(--sg-primary, #1677ff)',\n  },\n  patches: {\n    padding: '4px 12px 8px 32px',\n    background: 'var(--sg-bg-subtle, #fafafa)',\n    fontSize: 11,\n    lineHeight: 1.6,\n  },\n  empty: {\n    padding: '24px 12px',\n    textAlign: 'center' as const,\n    color: 'var(--sg-text-tertiary, #999)',\n  },\n}\n\n/**\n * Time-travel UI listing history entries with undo/redo controls and expandable patch details.\n */\nexport function HistoryPanel({ history, className, style }: HistoryPanelProps) {\n  const { entries, cursor, canUndo, canRedo, undo, redo, jumpTo, clear } = history\n  const [expanded, setExpanded] = useState<number | null>(null)\n\n  return (\n    <div className={className} style={{ ...styles.root, ...style }}>\n      <div style={styles.header}>\n        <span>Time-Travel ({entries.length})</span>\n        <div style={styles.controls}>\n          <button\n            style={{ ...styles.btn, ...(canUndo ? {} : styles.btnDisabled) }}\n            disabled={!canUndo}\n            onClick={undo}\n          >\n            Undo\n          </button>\n          <button\n            style={{ ...styles.btn, ...(canRedo ? {} : styles.btnDisabled) }}\n            disabled={!canRedo}\n            onClick={redo}\n          >\n            Redo\n          </button>\n          <button style={styles.btn} onClick={clear}>\n            Clear\n          </button>\n        </div>\n      </div>\n\n      {entries.length === 0 ? (\n        <div style={styles.empty}>No history yet</div>\n      ) : (\n        <ul style={styles.list}>\n          {entries.map((entry, i) => {\n            const isCurrent = i === cursor\n            const isFuture = i > cursor\n\n            return (\n              <li key={i}>\n                <div\n                  style={{\n                    ...styles.entry,\n                    ...(isCurrent ? styles.entryActive : {}),\n                    ...(isFuture ? styles.entryFuture : {}),\n                  }}\n                  onClick={() => jumpTo(i)}\n                  onDoubleClick={() => setExpanded(expanded === i ? null : i)}\n                >\n                  <span style={styles.badge}>{i}</span>\n                  <span>\n                    {entry.patches.length} write{entry.patches.length !== 1 ? 's' : ''}\n                  </span>\n                  <span style={{ marginLeft: 'auto', fontSize: 10, opacity: 0.6 }}>\n                    {formatTime(entry.timestamp)}\n                  </span>\n                </div>\n\n                {expanded === i && (\n                  <div style={styles.patches}>\n                    {entry.patches.map((p, pi) => (\n                      <div key={pi}>\n                        <code>{p.path}</code>:{' '}\n                        <span style={{ opacity: 0.5 }}>{formatValue(p.oldValue)}</span>\n                        {' → '}\n                        <span>{formatValue(p.value)}</span>\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      )}\n    </div>\n  )\n}\n\nfunction formatTime(ts: number): string {\n  const d = new Date(ts)\n  return d.toLocaleTimeString(undefined, {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n  })\n}\n\nfunction formatValue(v: unknown): string {\n  if (v === undefined) return 'undefined'\n  if (v === null) return 'null'\n  if (typeof v === 'string') return `\"${v}\"`\n  try {\n    return JSON.stringify(v)\n  } catch {\n    return String(v)\n  }\n}\n"],"mappings":"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","names":["import_react"]}
+{"version":3,"sources":["../src/devtools.ts","../src/hooks/useHistory.ts","../src/components/devtools/HistoryPanel.tsx"],"sourcesContent":["export { useHistory } from './hooks/useHistory'\nexport type { UseHistoryReturn } from './hooks/useHistory'\nexport { HistoryPanel } from './components/devtools/HistoryPanel'\nexport type { HistoryPanelProps } from './components/devtools/HistoryPanel'\n","import { useState, useCallback, useEffect, useRef, useMemo } from 'react'\nimport type { Core } from '@skygraph/core'\nimport { createHistory } from '@skygraph/core'\nimport type { HistoryPlugin, HistoryOptions } from '@skygraph/core'\n\nexport interface UseHistoryReturn {\n  history: HistoryPlugin\n  canUndo: boolean\n  canRedo: boolean\n  cursor: number\n  entries: HistoryPlugin['entries']\n  undo: () => void\n  redo: () => void\n  jumpTo: (index: number) => void\n  clear: () => void\n}\n\nexport function useHistory(core: Core, options?: HistoryOptions): UseHistoryReturn {\n  const [, forceUpdate] = useState(0)\n  const historyRef = useRef<HistoryPlugin | null>(null)\n  const optionsRef = useRef(options)\n\n  if (!historyRef.current) {\n    historyRef.current = createHistory(core, optionsRef.current)\n  }\n\n  const tick = useCallback(() => forceUpdate((n) => n + 1), [])\n\n  const undo = useCallback(() => {\n    historyRef.current!.undo()\n    tick()\n  }, [tick])\n\n  const redo = useCallback(() => {\n    historyRef.current!.redo()\n    tick()\n  }, [tick])\n\n  const jumpTo = useCallback(\n    (index: number) => {\n      historyRef.current!.jumpTo(index)\n      tick()\n    },\n    [tick],\n  )\n\n  const clear = useCallback(() => {\n    historyRef.current!.clear()\n    tick()\n  }, [tick])\n\n  useEffect(() => {\n    return () => {\n      historyRef.current?.destroy()\n    }\n  }, [])\n\n  const h = historyRef.current\n\n  return useMemo(\n    () => ({\n      history: h,\n      canUndo: h.canUndo,\n      canRedo: h.canRedo,\n      cursor: h.cursor,\n      entries: h.entries,\n      undo,\n      redo,\n      jumpTo,\n      clear,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [h, h.cursor, h.entries.length, undo, redo, jumpTo, clear],\n  )\n}\n","import React, { useState } from 'react'\nimport type { UseHistoryReturn } from '../../hooks/useHistory'\nimport type { BaseComponentProps } from '../../types'\n\n/** Props for the devtools time-travel history panel (base layout props come from `BaseComponentProps`). */\nexport interface HistoryPanelProps extends BaseComponentProps {\n  /** History controller from `useHistory` (entries, cursor, undo/redo, jump, clear). */\n  history: UseHistoryReturn\n}\n\nconst styles: Record<string, React.CSSProperties> = {\n  root: {\n    fontFamily: 'ui-monospace, \"Cascadia Code\", \"Fira Code\", monospace',\n    fontSize: 12,\n    border: '1px solid var(--sg-color-border, #d9d9d9)',\n    borderRadius: 8,\n    background: 'var(--sg-color-bg-elevated, #fff)',\n    overflow: 'hidden',\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '8px 12px',\n    borderBottom: '1px solid var(--sg-color-border, #d9d9d9)',\n    fontWeight: 600,\n    fontSize: 13,\n  },\n  controls: {\n    display: 'flex',\n    gap: 4,\n  },\n  btn: {\n    padding: '2px 8px',\n    border: '1px solid var(--sg-color-border, #d9d9d9)',\n    borderRadius: 4,\n    background: 'var(--sg-color-bg-secondary, #fafafa)',\n    cursor: 'pointer',\n    fontSize: 11,\n  },\n  btnDisabled: {\n    opacity: 0.4,\n    cursor: 'not-allowed',\n  },\n  list: {\n    maxHeight: 300,\n    overflowY: 'auto' as const,\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n  },\n  entry: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    padding: '4px 12px',\n    cursor: 'pointer',\n    borderBottom: '1px solid var(--sg-color-border-secondary, #f0f0f0)',\n    transition: 'background 0.15s',\n  },\n  entryActive: {\n    background: 'var(--sg-color-primary-bg, #e6f4ff)',\n    fontWeight: 600,\n  },\n  entryFuture: {\n    opacity: 0.5,\n  },\n  badge: {\n    display: 'inline-block',\n    padding: '1px 6px',\n    borderRadius: 4,\n    fontSize: 10,\n    background: 'var(--sg-color-primary-bg, #e6f4ff)',\n    color: 'var(--sg-color-primary, #1677ff)',\n  },\n  patches: {\n    padding: '4px 12px 8px 32px',\n    background: 'var(--sg-color-bg-secondary, #fafafa)',\n    fontSize: 11,\n    lineHeight: 1.6,\n  },\n  empty: {\n    padding: '24px 12px',\n    textAlign: 'center' as const,\n    color: 'var(--sg-color-text-tertiary, #999)',\n  },\n}\n\n/**\n * Time-travel UI listing history entries with undo/redo controls and expandable patch details.\n */\nexport function HistoryPanel({ history, className, style }: HistoryPanelProps) {\n  const { entries, cursor, canUndo, canRedo, undo, redo, jumpTo, clear } = history\n  const [expanded, setExpanded] = useState<number | null>(null)\n\n  return (\n    <div className={className} style={{ ...styles.root, ...style }}>\n      <div style={styles.header}>\n        <span>Time-Travel ({entries.length})</span>\n        <div style={styles.controls}>\n          <button\n            style={{ ...styles.btn, ...(canUndo ? {} : styles.btnDisabled) }}\n            disabled={!canUndo}\n            onClick={undo}\n          >\n            Undo\n          </button>\n          <button\n            style={{ ...styles.btn, ...(canRedo ? {} : styles.btnDisabled) }}\n            disabled={!canRedo}\n            onClick={redo}\n          >\n            Redo\n          </button>\n          <button style={styles.btn} onClick={clear}>\n            Clear\n          </button>\n        </div>\n      </div>\n\n      {entries.length === 0 ? (\n        <div style={styles.empty}>No history yet</div>\n      ) : (\n        <ul style={styles.list}>\n          {entries.map((entry, i) => {\n            const isCurrent = i === cursor\n            const isFuture = i > cursor\n\n            return (\n              <li key={i}>\n                <div\n                  style={{\n                    ...styles.entry,\n                    ...(isCurrent ? styles.entryActive : {}),\n                    ...(isFuture ? styles.entryFuture : {}),\n                  }}\n                  onClick={() => jumpTo(i)}\n                  onDoubleClick={() => setExpanded(expanded === i ? null : i)}\n                >\n                  <span style={styles.badge}>{i}</span>\n                  <span>\n                    {entry.patches.length} write{entry.patches.length !== 1 ? 's' : ''}\n                  </span>\n                  <span style={{ marginLeft: 'auto', fontSize: 10, opacity: 0.6 }}>\n                    {formatTime(entry.timestamp)}\n                  </span>\n                </div>\n\n                {expanded === i && (\n                  <div style={styles.patches}>\n                    {entry.patches.map((p, pi) => (\n                      <div key={pi}>\n                        <code>{p.path}</code>:{' '}\n                        <span style={{ opacity: 0.5 }}>{formatValue(p.oldValue)}</span>\n                        {' → '}\n                        <span>{formatValue(p.value)}</span>\n                      </div>\n                    ))}\n                  </div>\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      )}\n    </div>\n  )\n}\n\nfunction formatTime(ts: number): string {\n  const d = new Date(ts)\n  return d.toLocaleTimeString(undefined, {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n  })\n}\n\nfunction formatValue(v: unknown): string {\n  if (v === undefined) return 'undefined'\n  if (v === null) return 'null'\n  if (typeof v === 'string') return `\"${v}\"`\n  try {\n    return JSON.stringify(v)\n  } catch {\n    return String(v)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkE;AAElE,kBAA8B;AAevB,SAAS,WAAW,MAAY,SAA4C;AACjF,QAAM,CAAC,EAAE,WAAW,QAAI,uBAAS,CAAC;AAClC,QAAM,iBAAa,qBAA6B,IAAI;AACpD,QAAM,iBAAa,qBAAO,OAAO;AAEjC,MAAI,CAAC,WAAW,SAAS;AACvB,eAAW,cAAU,2BAAc,MAAM,WAAW,OAAO;AAAA,EAC7D;AAEA,QAAM,WAAO,0BAAY,MAAM,YAAY,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5D,QAAM,WAAO,0BAAY,MAAM;AAC7B,eAAW,QAAS,KAAK;AACzB,SAAK;AAAA,EACP,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,WAAO,0BAAY,MAAM;AAC7B,eAAW,QAAS,KAAK;AACzB,SAAK;AAAA,EACP,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAS;AAAA,IACb,CAAC,UAAkB;AACjB,iBAAW,QAAS,OAAO,KAAK;AAChC,WAAK;AAAA,IACP;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,YAAQ,0BAAY,MAAM;AAC9B,eAAW,QAAS,MAAM;AAC1B,SAAK;AAAA,EACP,GAAG,CAAC,IAAI,CAAC;AAET,8BAAU,MAAM;AACd,WAAO,MAAM;AACX,iBAAW,SAAS,QAAQ;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,IAAI,WAAW;AAErB,aAAO;AAAA,IACL,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,EAAE;AAAA,MACX,SAAS,EAAE;AAAA,MACX,QAAQ,EAAE;AAAA,MACV,SAAS,EAAE;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,QAAQ,MAAM,MAAM,QAAQ,KAAK;AAAA,EAC3D;AACF;;;AC1EA,IAAAA,gBAAgC;AAkGxB;AAxFR,IAAM,SAA8C;AAAA,EAClD,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AAAA,EACA,KAAK;AAAA,IACH,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF;AAKO,SAAS,aAAa,EAAE,SAAS,WAAW,MAAM,GAAsB;AAC7E,QAAM,EAAE,SAAS,QAAQ,SAAS,SAAS,MAAM,MAAM,QAAQ,MAAM,IAAI;AACzE,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAwB,IAAI;AAE5D,SACE,6CAAC,SAAI,WAAsB,OAAO,EAAE,GAAG,OAAO,MAAM,GAAG,MAAM,GAC3D;AAAA,iDAAC,SAAI,OAAO,OAAO,QACjB;AAAA,mDAAC,UAAK;AAAA;AAAA,QAAc,QAAQ;AAAA,QAAO;AAAA,SAAC;AAAA,MACpC,6CAAC,SAAI,OAAO,OAAO,UACjB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,EAAE,GAAG,OAAO,KAAK,GAAI,UAAU,CAAC,IAAI,OAAO,YAAa;AAAA,YAC/D,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YACV;AAAA;AAAA,QAED;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,EAAE,GAAG,OAAO,KAAK,GAAI,UAAU,CAAC,IAAI,OAAO,YAAa;AAAA,YAC/D,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YACV;AAAA;AAAA,QAED;AAAA,QACA,4CAAC,YAAO,OAAO,OAAO,KAAK,SAAS,OAAO,mBAE3C;AAAA,SACF;AAAA,OACF;AAAA,IAEC,QAAQ,WAAW,IAClB,4CAAC,SAAI,OAAO,OAAO,OAAO,4BAAc,IAExC,4CAAC,QAAG,OAAO,OAAO,MACf,kBAAQ,IAAI,CAAC,OAAO,MAAM;AACzB,YAAM,YAAY,MAAM;AACxB,YAAM,WAAW,IAAI;AAErB,aACE,6CAAC,QACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,GAAG,OAAO;AAAA,cACV,GAAI,YAAY,OAAO,cAAc,CAAC;AAAA,cACtC,GAAI,WAAW,OAAO,cAAc,CAAC;AAAA,YACvC;AAAA,YACA,SAAS,MAAM,OAAO,CAAC;AAAA,YACvB,eAAe,MAAM,YAAY,aAAa,IAAI,OAAO,CAAC;AAAA,YAE1D;AAAA,0DAAC,UAAK,OAAO,OAAO,OAAQ,aAAE;AAAA,cAC9B,6CAAC,UACE;AAAA,sBAAM,QAAQ;AAAA,gBAAO;AAAA,gBAAO,MAAM,QAAQ,WAAW,IAAI,MAAM;AAAA,iBAClE;AAAA,cACA,4CAAC,UAAK,OAAO,EAAE,YAAY,QAAQ,UAAU,IAAI,SAAS,IAAI,GAC3D,qBAAW,MAAM,SAAS,GAC7B;AAAA;AAAA;AAAA,QACF;AAAA,QAEC,aAAa,KACZ,4CAAC,SAAI,OAAO,OAAO,SAChB,gBAAM,QAAQ,IAAI,CAAC,GAAG,OACrB,6CAAC,SACC;AAAA,sDAAC,UAAM,YAAE,MAAK;AAAA,UAAO;AAAA,UAAE;AAAA,UACvB,4CAAC,UAAK,OAAO,EAAE,SAAS,IAAI,GAAI,sBAAY,EAAE,QAAQ,GAAE;AAAA,UACvD;AAAA,UACD,4CAAC,UAAM,sBAAY,EAAE,KAAK,GAAE;AAAA,aAJpB,EAKV,CACD,GACH;AAAA,WA7BK,CA+BT;AAAA,IAEJ,CAAC,GACH;AAAA,KAEJ;AAEJ;AAEA,SAAS,WAAW,IAAoB;AACtC,QAAM,IAAI,IAAI,KAAK,EAAE;AACrB,SAAO,EAAE,mBAAmB,QAAW;AAAA,IACrC,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AACH;AAEA,SAAS,YAAY,GAAoB;AACvC,MAAI,MAAM,OAAW,QAAO;AAC5B,MAAI,MAAM,KAAM,QAAO;AACvB,MAAI,OAAO,MAAM,SAAU,QAAO,IAAI,CAAC;AACvC,MAAI;AACF,WAAO,KAAK,UAAU,CAAC;AAAA,EACzB,QAAQ;AACN,WAAO,OAAO,CAAC;AAAA,EACjB;AACF;","names":["import_react"]}

package/dist/devtools.js

@@ -1,7 +1,7 @@
 import {
   HistoryPanel,
   useHistory
-} from "./chunk-GJDDPZH7.js";
+} from "./chunk-ZJC2QUWA.js";
 export {
   HistoryPanel,
   useHistory

package/dist/form.cjs

@@ -421,7 +421,10 @@ function Form({
 }
 
 // src/components/complex/Field.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
+
+// src/components/ui/Input.tsx
+var import_react10 = __toESM(require("react"), 1);
 
 // src/components/ui/Spin.tsx
 var import_react9 = __toESM(require("react"), 1);
@@ -498,9 +501,14 @@ function Input({
   size: sizeProp,
   disabled: disabledProp,
   loading,
+  allowClear = false,
+  status,
+  prefix,
+  suffix,
   onChange,
   onBlur,
   onFocus,
+  onClear,
   "aria-invalid": ariaInvalid,
   "aria-required": ariaRequired,
   "aria-describedby": ariaDescribedBy,
@@ -512,45 +520,73 @@ function Input({
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
+  const [internalValue, setInternalValue] = import_react10.default.useState(defaultValue ?? "");
+  const currentValue = value ?? internalValue;
+  const isControlled = value !== void 0;
   const wrapperClasses = unstyled ? className ?? "" : [
     "sg-input-wrapper",
     `sg-input-wrapper-${size}`,
     loading ? "sg-input-wrapper-loading" : "",
     readOnly ? "sg-input-wrapper-readonly" : "",
+    status ? `sg-input-wrapper-status-${status}` : "",
     className
   ].filter(Boolean).join(" ");
   const inputClasses = unstyled ? "" : [
     "sg-input",
     `sg-input-${size}`,
-    readOnly ? "sg-input-readonly" : ""
+    readOnly ? "sg-input-readonly" : "",
+    status ? `sg-input-status-${status}` : ""
   ].filter(Boolean).join(" ");
+  const clearLabel = config.locale?.input?.clear ?? "Clear";
+  const showClear = allowClear && !disabled && !readOnly && !loading && currentValue !== "";
+  const handleChange = (e) => {
+    if (!isControlled) setInternalValue(e.target.value);
+    onChange?.(e.target.value);
+  };
+  const handleClear = () => {
+    if (!isControlled) setInternalValue("");
+    onChange?.("");
+    onClear?.();
+  };
+  const resolvedAriaInvalid = ariaInvalid ?? (status === "error" ? true : void 0);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: wrapperClasses, style, children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sg-input-prefix", children: prefix }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "input",
       {
         id,
         type,
         className: inputClasses,
-        value,
-        defaultValue,
+        value: currentValue,
         placeholder,
         disabled: disabled || loading,
         readOnly,
-        "aria-invalid": ariaInvalid,
+        "aria-invalid": resolvedAriaInvalid,
         "aria-required": ariaRequired,
         "aria-readonly": readOnly || void 0,
         "aria-describedby": ariaDescribedBy,
-        onChange: (e) => onChange?.(e.target.value),
+        onChange: handleChange,
         onBlur,
         onFocus
       }
     ),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spin, { size: "small", unstyled })
+    showClear && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "sg-input-clear",
+        "aria-label": clearLabel,
+        onClick: handleClear,
+        children: "\xD7"
+      }
+    ),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spin, { size: "small", unstyled }),
+    suffix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sg-input-suffix", children: suffix })
   ] });
 }
 
 // src/components/ui/Textarea.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Textarea({
   value,
@@ -576,7 +612,7 @@ function Textarea({
   const config = useConfig();
   const disabled = disabledProp ?? config.disabled;
   const size = sizeProp ?? config.size ?? "middle";
-  const [internalValue, setInternalValue] = import_react10.default.useState(value ?? defaultValue ?? "");
+  const [internalValue, setInternalValue] = import_react11.default.useState(value ?? defaultValue ?? "");
   const currentValue = value ?? internalValue;
   const handleChange = (e) => {
     const v = e.target.value;
@@ -613,10 +649,10 @@ function Textarea({
 }
 
 // src/components/ui/Tooltip.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/ui/Transition.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 function Transition({
   visible,
   name = "sg-fade",
@@ -630,20 +666,20 @@ function Transition({
   children,
   unmountOnExit = true
 }) {
-  const [mounted, setMounted] = (0, import_react11.useState)(visible);
-  const [phase, setPhase] = (0, import_react11.useState)(visible ? "idle" : "idle");
-  const nodeRef = (0, import_react11.useRef)(null);
-  const timerRef = (0, import_react11.useRef)(void 0);
-  const prevVisible = (0, import_react11.useRef)(visible);
-  const getEnterClasses = (0, import_react11.useCallback)(() => {
+  const [mounted, setMounted] = (0, import_react12.useState)(visible);
+  const [phase, setPhase] = (0, import_react12.useState)(visible ? "idle" : "idle");
+  const nodeRef = (0, import_react12.useRef)(null);
+  const timerRef = (0, import_react12.useRef)(void 0);
+  const prevVisible = (0, import_react12.useRef)(visible);
+  const getEnterClasses = (0, import_react12.useCallback)(() => {
     if (enterFrom && enterTo) return { from: enterFrom, active: `${name}-enter-active`, to: enterTo };
     return { from: `${name}-enter-from`, active: `${name}-enter-active`, to: `${name}-enter-to` };
   }, [name, enterFrom, enterTo]);
-  const getLeaveClasses = (0, import_react11.useCallback)(() => {
+  const getLeaveClasses = (0, import_react12.useCallback)(() => {
     if (leaveFrom && leaveTo) return { from: leaveFrom, active: `${name}-leave-active`, to: leaveTo };
     return { from: `${name}-leave-from`, active: `${name}-leave-active`, to: `${name}-leave-to` };
   }, [name, leaveFrom, leaveTo]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (visible === prevVisible.current) return;
     prevVisible.current = visible;
     clearTimeout(timerRef.current);
@@ -669,7 +705,7 @@ function Transition({
       }, duration);
     }
   }, [visible, duration, unmountOnExit, onAfterEnter, onAfterLeave]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return () => clearTimeout(timerRef.current);
   }, []);
   if (!mounted && unmountOnExit) return null;
@@ -690,7 +726,7 @@ function Transition({
       transitionClass = `${leaveC.to} ${leaveC.active}`;
       break;
   }
-  return import_react11.default.cloneElement(children, {
+  return import_react12.default.cloneElement(children, {
     ref: nodeRef,
     className: [children.props.className, transitionClass].filter(Boolean).join(" ")
   });
@@ -705,10 +741,10 @@ function Tooltip({
   className,
   unstyled
 }) {
-  const [visible, setVisible] = (0, import_react12.useState)(false);
-  const ref = (0, import_react12.useRef)(null);
-  const tooltipId = (0, import_react12.useId)();
-  const triggerWithAria = (0, import_react12.isValidElement)(children) ? (0, import_react12.cloneElement)(children, {
+  const [visible, setVisible] = (0, import_react13.useState)(false);
+  const ref = (0, import_react13.useRef)(null);
+  const tooltipId = (0, import_react13.useId)();
+  const triggerWithAria = (0, import_react13.isValidElement)(children) ? (0, import_react13.cloneElement)(children, {
     "aria-describedby": visible ? [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ") : children.props["aria-describedby"],
     onFocus: (e) => {
       setVisible(true);
@@ -786,6 +822,7 @@ function Field({
   noStyle,
   normalize,
   getValueFromEvent: _getValueFromEvent,
+  valuePropName,
   validateFirst,
   validateStatus: manualStatus,
   hasFeedback,
@@ -800,12 +837,12 @@ function Field({
   const formLocale = useConfig().locale?.form;
   const requiredMarker = formLocale?.required ?? "*";
   const optionalMarker = formLocale?.optional ?? "(optional)";
-  const autoId = (0, import_react13.useId)();
+  const autoId = (0, import_react14.useId)();
   const fieldId = `sg-field-${autoId.replace(/:/g, "")}-${name.replace(/\./g, "-")}`;
   const helpId = `${fieldId}-help`;
   const field = useField(core, form, name);
-  const prevValueRef = (0, import_react13.useRef)(field.value);
-  (0, import_react13.useEffect)(() => {
+  const prevValueRef = (0, import_react14.useRef)(field.value);
+  (0, import_react14.useEffect)(() => {
     const allRules = [...rules];
     if (required) {
       allRules.unshift({ required: true });
@@ -826,6 +863,18 @@ function Field({
     prevValueRef.current = normalized;
     field.onChange(normalized);
   } : field.onChange;
+  const valueProp = valuePropName ?? "value";
+  const extractValue = (...args) => {
+    if (_getValueFromEvent) return _getValueFromEvent(...args);
+    const first = args[0];
+    if (first !== null && typeof first === "object" && "target" in first) {
+      const target = first.target;
+      if (target && typeof target === "object" && "value" in target) {
+        return valueProp === "checked" ? target.checked : target.value;
+      }
+    }
+    return first;
+  };
   const effectiveStatus = manualStatus ?? field.status;
   const hasErrors = field.errors.length > 0;
   const hasWarnings = field.warnings.length > 0;
@@ -861,6 +910,34 @@ function Field({
       ] });
     }
     if (children) {
+      if ((0, import_react14.isValidElement)(children)) {
+        const childProps = children.props;
+        const childOnChange = childProps.onChange;
+        const childOnBlur = childProps.onBlur;
+        const injected = {
+          [valueProp]: field.value,
+          onChange: (...args) => {
+            wrappedOnChange(extractValue(...args));
+            childOnChange?.(...args);
+          },
+          onBlur: (...args) => {
+            field.onBlur();
+            childOnBlur?.(...args);
+          }
+        };
+        if (childProps.id === void 0) injected.id = fieldId;
+        if (childProps.disabled === void 0 && disabled) injected.disabled = true;
+        if (childProps["aria-describedby"] === void 0 && describedBy) {
+          injected["aria-describedby"] = describedBy;
+        }
+        if (childProps["aria-invalid"] === void 0 && hasErrors) {
+          injected["aria-invalid"] = true;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          (0, import_react14.cloneElement)(children, injected),
+          feedbackIcon
+        ] });
+      }
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         children,
         feedbackIcon
@@ -1035,7 +1112,7 @@ function SubmitButton({
 }
 
 // src/components/complex/FormList.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var listUid = 0;
 function genKey() {
@@ -1043,15 +1120,15 @@ function genKey() {
 }
 function FormList({ name, initialValue, draggable, children }) {
   const { core, form } = useFormContext();
-  import_react14.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     if (initialValue && !Array.isArray(core.get(name))) {
       core.set(name, initialValue);
     }
   }, []);
   const listValue = useWatch(core, name);
   const items = Array.isArray(listValue) ? listValue : [];
-  const [keys, setKeys] = (0, import_react14.useState)(() => items.map(() => genKey()));
-  import_react14.default.useEffect(() => {
+  const [keys, setKeys] = (0, import_react15.useState)(() => items.map(() => genKey()));
+  import_react15.default.useEffect(() => {
     setKeys((prev) => {
       if (prev.length === items.length) return prev;
       if (items.length > prev.length) {
@@ -1060,11 +1137,11 @@ function FormList({ name, initialValue, draggable, children }) {
       return prev.slice(0, items.length);
     });
   }, [items.length]);
-  const fields = (0, import_react14.useMemo)(
+  const fields = (0, import_react15.useMemo)(
     () => keys.slice(0, items.length).map((key, index) => ({ key, index })),
     [keys, items.length]
   );
-  const add = (0, import_react14.useCallback)(
+  const add = (0, import_react15.useCallback)(
     (defaultValue, insertIndex) => {
       form.listAdd(name, defaultValue, insertIndex);
       setKeys((prev) => {
@@ -1079,7 +1156,7 @@ function FormList({ name, initialValue, draggable, children }) {
     },
     [form, name]
   );
-  const remove = (0, import_react14.useCallback)(
+  const remove = (0, import_react15.useCallback)(
     (index) => {
       form.listRemove(name, index);
       setKeys((prev) => {
@@ -1092,7 +1169,7 @@ function FormList({ name, initialValue, draggable, children }) {
     },
     [form, name]
   );
-  const move = (0, import_react14.useCallback)(
+  const move = (0, import_react15.useCallback)(
     (from, to) => {
       form.listMove(name, from, to);
       setKeys((prev) => {
@@ -1104,20 +1181,20 @@ function FormList({ name, initialValue, draggable, children }) {
     },
     [form, name]
   );
-  const replace = (0, import_react14.useCallback)(
+  const replace = (0, import_react15.useCallback)(
     (values) => {
       form.listReplace(name, values);
       setKeys(values.map(() => genKey()));
     },
     [form, name]
   );
-  const operation = (0, import_react14.useMemo)(
+  const operation = (0, import_react15.useMemo)(
     () => ({ add, remove, move, replace }),
     [add, remove, move, replace]
   );
-  const meta = (0, import_react14.useMemo)(() => ({ errors: form.getFieldErrors(name) }), [form, name]);
-  const dragIdx = (0, import_react14.useRef)(-1);
-  const dragOverIdx = (0, import_react14.useRef)(-1);
+  const meta = (0, import_react15.useMemo)(() => ({ errors: form.getFieldErrors(name) }), [form, name]);
+  const dragIdx = (0, import_react15.useRef)(-1);
+  const dragOverIdx = (0, import_react15.useRef)(-1);
   if (!draggable) {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: children(fields, operation, meta) });
   }
@@ -1149,7 +1226,7 @@ function FormList({ name, initialValue, draggable, children }) {
 }
 
 // src/components/complex/AutoField/AutoField.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function AutoField(props) {
   const {
@@ -1172,7 +1249,7 @@ function AutoField(props) {
   const { form } = useFormContext();
   const value = form.getValue(name);
   const meta = form.getFieldState(name);
-  const inferredType = (0, import_react15.useMemo)(() => {
+  const inferredType = (0, import_react16.useMemo)(() => {
     if (forcedType) return forcedType;
     if (options && options.length > 0) return "select";
     if (typeof value === "boolean") return "boolean";
@@ -1189,20 +1266,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":
@@ -1233,7 +1300,7 @@ function AutoField(props) {
             min,
             max,
             step,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1247,7 +1314,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
           }
@@ -1259,7 +1326,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: [
@@ -1279,27 +1346,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__ */ (0, import_jsx_runtime12.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
           }
         );
       case "radio":
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "radiogroup", style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 4, cursor: "pointer" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "input",
-            {
-              type: "radio",
-              name,
-              value: opt.value,
-              checked: value === opt.value,
-              onChange: () => handleChange(opt.value),
-              disabled
-            }
-          ),
-          opt.label
-        ] }, opt.value)) });
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "radiogroup", style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "label",
+          {
+            style: { display: "flex", alignItems: "center", gap: 4, cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "input",
+                {
+                  type: "radio",
+                  name,
+                  value: opt.value,
+                  checked: value === opt.value,
+                  onChange: () => handleChange(opt.value),
+                  disabled
+                }
+              ),
+              opt.label
+            ]
+          },
+          opt.value
+        )) });
       case "date":
         return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
@@ -1308,7 +1382,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
           }
@@ -1321,7 +1395,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
           }
@@ -1336,7 +1410,7 @@ function AutoField(props) {
             onBlur: () => form.onFieldBlur(name),
             placeholder,
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1349,7 +1423,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":
@@ -1383,7 +1457,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" : ""}`,
@@ -1404,7 +1478,7 @@ function AutoField(props) {
               if (files) handleChange(multiple ? Array.from(files) : files[0] ?? null);
             },
             disabled,
-            style: inputStyle
+            className: inputClass
           }
         );
       case "email":
@@ -1420,18 +1494,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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `sg-autofield ${className ?? ""}`, style: wrapperStyle, children: [
-    inferredType !== "boolean" && inferredType !== "switch" && label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { style: { fontWeight: 500, fontSize: 14 }, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `sg-autofield ${className ?? ""}`, style, children: [
+    inferredType !== "boolean" && inferredType !== "switch" && label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "sg-autofield-label", children: label }),
     renderInput(),
-    hasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: errorId, role: "alert", style: { color: "var(--sg-error, #ff4d4f)", fontSize: 12 }, children: meta.errors.join("; ") }),
-    hasWarnings && !hasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { color: "var(--sg-warning, #faad14)", fontSize: 12 }, children: meta.warnings.join("; ") })
+    hasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "span",
+      {
+        id: errorId,
+        role: "alert",
+        style: { color: "var(--sg-color-error, #ff4d4f)", fontSize: 12 },
+        children: meta.errors.join("; ")
+      }
+    ),
+    hasWarnings && !hasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { color: "var(--sg-color-warning, #faad14)", fontSize: 12 }, children: meta.warnings.join("; ") })
   ] });
 }