@skygraph/react 0.5.2 → 0.5.3

package/README.md

@@ -1,70 +1,70 @@
-# @skygraph/react
-
-React adapter for [SkyGraph](https://skygraph.ruslansinkevich.ru/) — 78+ components, hooks and `ConfigProvider` built on the framework-agnostic [`@skygraph/core`](../core) engine. Shares the `.sg-*` CSS contract with the Vue and Angular adapters via [`@skygraph/styles`](../styles).
-
-> **Easier path — the meta-package:**
->
-> ```bash
-> npm install skygraph-react
-> ```
->
-> The meta-package re-exports everything below and auto-loads the CSS as a side effect. No separate `@skygraph/core` install, no manual `import '@skygraph/styles'`. Use this package directly only when you need fine-grained control over the install set.
-
-## Install (direct)
-
-```bash
-npm install @skygraph/react @skygraph/core
-```
-
-```ts
-import '@skygraph/styles'
-import { Form, Field, SubmitButton } from '@skygraph/react'
-
-export function App() {
-  return (
-    <Form
-      defaultValues={{ email: '' }}
-      onSubmit={(values) => console.log(values)}
-    >
-      <Field name="email" label="Email" rules={[{ type: 'email' }]} />
-      <SubmitButton>Submit</SubmitButton>
-    </Form>
-  )
-}
-```
-
-## Components (78+)
-
-**Data entry:** Button, Input, InputNumber, Textarea, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, AutoComplete, Rate, Upload, ColorPicker, Cascader, TreeSelect, Mentions
-
-**Data display:** Table, DataGrid, Tree, List, Tabs, Collapse, Descriptions, Badge, Tag, Avatar, Calendar, Carousel, Timeline, Steps, Segmented, Skeleton, Diagram
-
-**Visualization:** LineChart, BarChart, AreaChart, PieChart, Dashboard, DashboardEditor, Gantt, EventTimeline, ResourceCalendar
-
-**Feedback:** Modal, Drawer, Notification, Popconfirm, Tooltip, Progress, Spin, Result, Empty
-
-**Navigation:** Menu, Breadcrumb, Dropdown, Pagination, Transfer
-
-**Form:** Form, Field, FormList, FormProvider, SchemaForm, SchemaFormEditor, AutoField, SubmitButton
-
-**Utility:** Transition (CSS-class-based animations)
-
-## Subpath exports
-
-| Subpath | Use |
-|---|---|
-| `@skygraph/react` | Full bundle |
-| `@skygraph/react/form` | Form primitives only |
-| `@skygraph/react/table` | Table primitives only |
-| `@skygraph/react/tree` | Tree primitives only |
-| `@skygraph/react/virtual` | Virtual-scroll helpers |
-| `@skygraph/react/datagrid` | DataGrid |
-| `@skygraph/react/devtools` | Optional devtools panel |
-
-## Repository
-
-[github.com/RuslanSinkevich/skygraph-public](https://github.com/RuslanSinkevich/skygraph-public)
-
-## License
-
-MIT
+# @skygraph/react
+
+React adapter for [SkyGraph](https://skygraph.ruslansinkevich.ru/) — 50+ components, hooks and `ConfigProvider` built on the framework-agnostic [`@skygraph/core`](../core) engine. Shares the `.sg-*` CSS contract with the Vue and Angular adapters via [`@skygraph/styles`](../styles).
+
+> **Easier path — the meta-package:**
+>
+> ```bash
+> npm install skygraph-react
+> ```
+>
+> The meta-package re-exports everything below and auto-loads the CSS as a side effect. No separate `@skygraph/core` install, no manual `import '@skygraph/styles'`. Use this package directly only when you need fine-grained control over the install set.
+
+## Install (direct)
+
+```bash
+npm install @skygraph/react @skygraph/core
+```
+
+```ts
+import '@skygraph/styles'
+import { Form, Field, SubmitButton } from '@skygraph/react'
+
+export function App() {
+  return (
+    <Form
+      defaultValues={{ email: '' }}
+      onSubmit={(values) => console.log(values)}
+    >
+      <Field name="email" label="Email" rules={[{ type: 'email' }]} />
+      <SubmitButton>Submit</SubmitButton>
+    </Form>
+  )
+}
+```
+
+## Components (53 documented)
+
+**Data entry:** Button, Input, InputNumber, Textarea, Select, Checkbox, Radio, Switch, Slider, DatePicker, TimePicker, AutoComplete, Rate, Upload, ColorPicker, Cascader, TreeSelect, Mentions
+
+**Data display:** Table, DataGrid, Tree, List, Tabs, Collapse, Descriptions, Badge, Tag, Avatar, Calendar, Carousel, Timeline, Steps, Segmented, Skeleton, Diagram
+
+**Visualization:** LineChart, BarChart, AreaChart, PieChart, Dashboard, DashboardEditor, Gantt, EventTimeline, ResourceCalendar
+
+**Feedback:** Modal, Drawer, Notification, Popconfirm, Tooltip, Progress, Spin, Result, Empty
+
+**Navigation:** Menu, Breadcrumb, Dropdown, Pagination, Transfer
+
+**Form:** Form, Field, FormList, FormProvider, SchemaForm, SchemaFormEditor, AutoField, SubmitButton
+
+**Utility:** Transition (CSS-class-based animations)
+
+## Subpath exports
+
+| Subpath | Use |
+|---|---|
+| `@skygraph/react` | Full bundle |
+| `@skygraph/react/form` | Form primitives only |
+| `@skygraph/react/table` | Table primitives only |
+| `@skygraph/react/tree` | Tree primitives only |
+| `@skygraph/react/virtual` | Virtual-scroll helpers |
+| `@skygraph/react/datagrid` | DataGrid |
+| `@skygraph/react/devtools` | Optional devtools panel |
+
+## Repository
+
+[github.com/RuslanSinkevich/skygraph-public](https://github.com/RuslanSinkevich/skygraph-public)
+
+## License
+
+MIT

package/dist/{Table-BmesoMje.d.ts → Table-CAay8MmA.d.ts}

@@ -224,6 +224,11 @@ interface CalendarLocale {
     /** Tooltip on the "next month" navigation button. */
     nextMonth?: string;
 }
+/** Locale strings shared by Input-family `clear` (×) buttons. */
+interface InputLocale {
+    /** Accessible label for the clear (×) button. */
+    clear?: string;
+}
 /** Locale strings for the InputPassword component. */
 interface InputPasswordLocale {
     /** Accessible label for the visibility toggle when password is hidden. */
@@ -416,6 +421,8 @@ interface SgLocale {
     transfer?: TransferLocale;
     /** Calendar locale overrides. */
     calendar?: CalendarLocale;
+    /** Input locale overrides (clear button label). */
+    input?: InputLocale;
     /** InputPassword locale overrides. */
     inputPassword?: InputPasswordLocale;
     /** SearchInput locale overrides. */
@@ -1014,4 +1021,4 @@ interface TableRef {
  */
 declare const Table: React__default.ForwardRefExoticComponent<TableProps & React__default.RefAttributes<TableRef>>;
 
-export { type TreeSelectLocale as $, type AggregateType as A, type BreadcrumbLocale as B, type CellSpan as C, type DashboardLocale as D, type ExpandableConfig as E, type FilterDropdownProps as F, type GroupRow as G, type HeaderCell as H, type InlineEditLocale as I, type RateLocale as J, type ResourceCalendarLocale as K, type SchemaFormEditorLocale as L, type ModalLocale as M, type NotificationLocale as N, type SearchInputLocale as O, type PinnedRowsConfig as P, type SkeletonLocale as Q, type RowNumberConfig as R, type SelectionSummaryAction as S, Table as T, type UseTableOptions as U, type SpinLocale as V, type TableRef as W, type TagInputLocale as X, type TagLocale as Y, type TimelineLocale as Z, type TransferLocale as _, type FlatRow as a, type UploadLocale as a0, type RowSelectionConfig as b, type SummaryCell as c, type TableColumn as d, type TableLocale as e, type TableProps as f, type TreeConfig as g, type UseTableReturn as h, type SgLocale as i, type PrintOptions as j, type CalendarLocale as k, type PrintableProp as l, type SlotClassNames as m, type SlotStyles as n, type CarouselLocale as o, type CascaderLocale as p, type ChartsLocale as q, type DatePickerLocale as r, type DrawerLocale as s, type EmptyLocale as t, useTable as u, type FormLocale as v, type GanttLocale as w, type InputPasswordLocale as x, type PaginationLocale as y, type PopconfirmLocale as z };
+export { type TransferLocale as $, type AggregateType as A, type BreadcrumbLocale as B, type CellSpan as C, type DashboardLocale as D, type ExpandableConfig as E, type FilterDropdownProps as F, type GroupRow as G, type HeaderCell as H, type InlineEditLocale as I, type PopconfirmLocale as J, type RateLocale as K, type ResourceCalendarLocale as L, type ModalLocale as M, type NotificationLocale as N, type SchemaFormEditorLocale as O, type PinnedRowsConfig as P, type SearchInputLocale as Q, type RowNumberConfig as R, type SelectionSummaryAction as S, Table as T, type UseTableOptions as U, type SkeletonLocale as V, type SpinLocale as W, type TableRef as X, type TagInputLocale as Y, type TagLocale as Z, type TimelineLocale as _, type FlatRow as a, type TreeSelectLocale as a0, type UploadLocale as a1, type RowSelectionConfig as b, type SummaryCell as c, type TableColumn as d, type TableLocale as e, type TableProps as f, type TreeConfig as g, type UseTableReturn as h, type SgLocale as i, type PrintOptions as j, type CalendarLocale as k, type PrintableProp as l, type SlotClassNames as m, type SlotStyles as n, type CarouselLocale as o, type CascaderLocale as p, type ChartsLocale as q, type DatePickerLocale as r, type DrawerLocale as s, type EmptyLocale as t, useTable as u, type FormLocale as v, type GanttLocale as w, type InputLocale as x, type InputPasswordLocale as y, type PaginationLocale as z };

package/dist/{Table-CpKMOH2x.d.cts → Table-CMKo6Pc3.d.cts}

@@ -224,6 +224,11 @@ interface CalendarLocale {
     /** Tooltip on the "next month" navigation button. */
     nextMonth?: string;
 }
+/** Locale strings shared by Input-family `clear` (×) buttons. */
+interface InputLocale {
+    /** Accessible label for the clear (×) button. */
+    clear?: string;
+}
 /** Locale strings for the InputPassword component. */
 interface InputPasswordLocale {
     /** Accessible label for the visibility toggle when password is hidden. */
@@ -416,6 +421,8 @@ interface SgLocale {
     transfer?: TransferLocale;
     /** Calendar locale overrides. */
     calendar?: CalendarLocale;
+    /** Input locale overrides (clear button label). */
+    input?: InputLocale;
     /** InputPassword locale overrides. */
     inputPassword?: InputPasswordLocale;
     /** SearchInput locale overrides. */
@@ -1014,4 +1021,4 @@ interface TableRef {
  */
 declare const Table: React__default.ForwardRefExoticComponent<TableProps & React__default.RefAttributes<TableRef>>;
 
-export { type TreeSelectLocale as $, type AggregateType as A, type BreadcrumbLocale as B, type CellSpan as C, type DashboardLocale as D, type ExpandableConfig as E, type FilterDropdownProps as F, type GroupRow as G, type HeaderCell as H, type InlineEditLocale as I, type RateLocale as J, type ResourceCalendarLocale as K, type SchemaFormEditorLocale as L, type ModalLocale as M, type NotificationLocale as N, type SearchInputLocale as O, type PinnedRowsConfig as P, type SkeletonLocale as Q, type RowNumberConfig as R, type SelectionSummaryAction as S, Table as T, type UseTableOptions as U, type SpinLocale as V, type TableRef as W, type TagInputLocale as X, type TagLocale as Y, type TimelineLocale as Z, type TransferLocale as _, type FlatRow as a, type UploadLocale as a0, type RowSelectionConfig as b, type SummaryCell as c, type TableColumn as d, type TableLocale as e, type TableProps as f, type TreeConfig as g, type UseTableReturn as h, type SgLocale as i, type PrintOptions as j, type CalendarLocale as k, type PrintableProp as l, type SlotClassNames as m, type SlotStyles as n, type CarouselLocale as o, type CascaderLocale as p, type ChartsLocale as q, type DatePickerLocale as r, type DrawerLocale as s, type EmptyLocale as t, useTable as u, type FormLocale as v, type GanttLocale as w, type InputPasswordLocale as x, type PaginationLocale as y, type PopconfirmLocale as z };
+export { type TransferLocale as $, type AggregateType as A, type BreadcrumbLocale as B, type CellSpan as C, type DashboardLocale as D, type ExpandableConfig as E, type FilterDropdownProps as F, type GroupRow as G, type HeaderCell as H, type InlineEditLocale as I, type PopconfirmLocale as J, type RateLocale as K, type ResourceCalendarLocale as L, type ModalLocale as M, type NotificationLocale as N, type SchemaFormEditorLocale as O, type PinnedRowsConfig as P, type SearchInputLocale as Q, type RowNumberConfig as R, type SelectionSummaryAction as S, Table as T, type UseTableOptions as U, type SkeletonLocale as V, type SpinLocale as W, type TableRef as X, type TagInputLocale as Y, type TagLocale as Z, type TimelineLocale as _, type FlatRow as a, type TreeSelectLocale as a0, type UploadLocale as a1, type RowSelectionConfig as b, type SummaryCell as c, type TableColumn as d, type TableLocale as e, type TableProps as f, type TreeConfig as g, type UseTableReturn as h, type SgLocale as i, type PrintOptions as j, type CalendarLocale as k, type PrintableProp as l, type SlotClassNames as m, type SlotStyles as n, type CarouselLocale as o, type CascaderLocale as p, type ChartsLocale as q, type DatePickerLocale as r, type DrawerLocale as s, type EmptyLocale as t, useTable as u, type FormLocale as v, type GanttLocale as w, type InputLocale as x, type InputPasswordLocale as y, type PaginationLocale as z };

package/dist/{chunk-ZJF6SJLP.js → chunk-45YW5VSP.js}

@@ -1,9 +1,10 @@
 import {
   Spin,
   useConfig
-} from "./chunk-2OCEO636.js";
+} from "./chunk-VLRLCHEL.js";
 
 // src/components/ui/Input.tsx
+import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Input({
   value,
@@ -14,9 +15,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,
@@ -28,45 +34,73 @@ function Input({
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
+  const [internalValue, setInternalValue] = React.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__ */ jsxs("span", { className: wrapperClasses, style, children: [
+    prefix && /* @__PURE__ */ jsx("span", { className: "sg-input-prefix", children: prefix }),
     /* @__PURE__ */ 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__ */ jsx(Spin, { size: "small", unstyled })
+    showClear && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sg-input-clear",
+        "aria-label": clearLabel,
+        onClick: handleClear,
+        children: "\xD7"
+      }
+    ),
+    loading && /* @__PURE__ */ jsx(Spin, { size: "small", unstyled }),
+    suffix && /* @__PURE__ */ jsx("span", { className: "sg-input-suffix", children: suffix })
   ] });
 }
 
 // src/components/ui/Transition.tsx
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React2, { useState, useEffect, useRef, useCallback } from "react";
 function Transition({
   visible,
   name = "sg-fade",
@@ -140,7 +174,7 @@ function Transition({
       transitionClass = `${leaveC.to} ${leaveC.active}`;
       break;
   }
-  return React.cloneElement(children, {
+  return React2.cloneElement(children, {
     ref: nodeRef,
     className: [children.props.className, transitionClass].filter(Boolean).join(" ")
   });
@@ -197,4 +231,4 @@ export {
   Transition,
   Button
 };
-//# sourceMappingURL=chunk-ZJF6SJLP.js.map
+//# sourceMappingURL=chunk-45YW5VSP.js.map

package/dist/chunk-45YW5VSP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/Input.tsx","../src/components/ui/Transition.tsx","../src/components/ui/Button.tsx"],"sourcesContent":["import React from 'react'\nimport { useConfig } from '../ConfigProvider'\nimport type { BaseComponentProps, InteractiveProps, SizableProps } from '../../types'\nimport { Spin } from './Spin'\n\n/** Props for the Input component. */\nexport interface InputProps extends BaseComponentProps, InteractiveProps, SizableProps {\n  /** Controlled input value. */\n  value?: string\n  /** Uncontrolled initial value. */\n  defaultValue?: string\n  /** Placeholder text when the field is empty. */\n  placeholder?: string\n  /** Native HTML input type. @default 'text' */\n  type?: 'text' | 'email' | 'password' | 'number'\n  /**\n   * Marks the field as read-only. The value is selectable and submitted\n   * but cannot be edited. Sets the HTML `readonly` attribute,\n   * `aria-readonly=\"true\"`, and adds the `sg-input-readonly` modifier class.\n   * @default false\n   */\n  readOnly?: boolean\n  /** DOM id forwarded to the underlying `<input>`. */\n  id?: string\n  /**\n   * When true, renders a clear (×) button while the field has a value.\n   * Disabled and read-only fields hide the button. @default false\n   */\n  allowClear?: boolean\n  /**\n   * Validation status badge. Adds `sg-input-wrapper-status-{status}` and\n   * `sg-input-status-{status}` modifier classes and sets `aria-invalid` when\n   * `error`.\n   */\n  status?: 'error' | 'warning'\n  /** Optional content rendered before the `<input>` (e.g. icon). */\n  prefix?: React.ReactNode\n  /** Optional content rendered after the `<input>` (e.g. icon, unit). */\n  suffix?: React.ReactNode\n  /** Exposes invalid state to assistive technologies. */\n  'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling'\n  /** Marks the field as required for assistive technologies. */\n  'aria-required'?: boolean | 'false' | 'true'\n  /** Connects the input to description / error nodes for assistive technologies. */\n  'aria-describedby'?: string\n  /** Called when the text value changes. */\n  onChange?: (value: string) => void\n  /** Called when the input loses focus. */\n  onBlur?: () => void\n  /** Called when the input gains focus. */\n  onFocus?: () => void\n  /** Called when the user activates the built-in clear button. */\n  onClear?: () => void\n}\n\n/** Single-line text input with optional loading indicator and configurable HTML type. */\nexport function Input({\n  value,\n  defaultValue,\n  placeholder,\n  type = 'text',\n  readOnly = false,\n  size: sizeProp,\n  disabled: disabledProp,\n  loading,\n  allowClear = false,\n  status,\n  prefix,\n  suffix,\n  onChange,\n  onBlur,\n  onFocus,\n  onClear,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-describedby': ariaDescribedBy,\n  id,\n  className,\n  style,\n  unstyled,\n}: InputProps) {\n  const config = useConfig()\n  const size = sizeProp ?? config.size ?? 'middle'\n  const disabled = disabledProp ?? config.disabled ?? false\n\n  const [internalValue, setInternalValue] = React.useState<string>(defaultValue ?? '')\n  const currentValue = value ?? internalValue\n  const isControlled = value !== undefined\n\n  const wrapperClasses = unstyled\n    ? (className ?? '')\n    : [\n        'sg-input-wrapper',\n        `sg-input-wrapper-${size}`,\n        loading ? 'sg-input-wrapper-loading' : '',\n        readOnly ? 'sg-input-wrapper-readonly' : '',\n        status ? `sg-input-wrapper-status-${status}` : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n  const inputClasses = unstyled\n    ? ''\n    : [\n        'sg-input',\n        `sg-input-${size}`,\n        readOnly ? 'sg-input-readonly' : '',\n        status ? `sg-input-status-${status}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n  const clearLabel = config.locale?.input?.clear ?? 'Clear'\n  const showClear = allowClear && !disabled && !readOnly && !loading && currentValue !== ''\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setInternalValue(e.target.value)\n    onChange?.(e.target.value)\n  }\n\n  const handleClear = () => {\n    if (!isControlled) setInternalValue('')\n    onChange?.('')\n    onClear?.()\n  }\n\n  const resolvedAriaInvalid = ariaInvalid ?? (status === 'error' ? true : undefined)\n\n  return (\n    <span className={wrapperClasses} style={style}>\n      {prefix && <span className=\"sg-input-prefix\">{prefix}</span>}\n      <input\n        id={id}\n        type={type}\n        className={inputClasses}\n        value={currentValue}\n        placeholder={placeholder}\n        disabled={disabled || loading}\n        readOnly={readOnly}\n        aria-invalid={resolvedAriaInvalid}\n        aria-required={ariaRequired}\n        aria-readonly={readOnly || undefined}\n        aria-describedby={ariaDescribedBy}\n        onChange={handleChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n      />\n      {showClear && (\n        <button\n          type=\"button\"\n          className=\"sg-input-clear\"\n          aria-label={clearLabel}\n          onClick={handleClear}\n        >\n          ×\n        </button>\n      )}\n      {loading && <Spin size=\"small\" unstyled={unstyled} />}\n      {suffix && <span className=\"sg-input-suffix\">{suffix}</span>}\n    </span>\n  )\n}\n","import React, { useState, useEffect, useRef, useCallback } from 'react'\n\n/** Props for class-based enter/leave animation on a single child element. */\nexport interface TransitionProps {\n  /** When `true`, runs enter; when `false`, runs leave (and may unmount). */\n  visible: boolean\n  /** Base class name prefix for default enter/leave classes (e.g. `sg-fade-enter-from`). @default 'sg-fade' */\n  name?: string\n  /** Animation length in ms before idle phase and after callbacks. @default 200 */\n  duration?: number\n  /** Custom initial class for the enter frame (with `-enter-active`). */\n  enterFrom?: string\n  /** Custom final class for the enter-active frame. */\n  enterTo?: string\n  /** Custom initial class for the leave frame (with `-leave-active`). */\n  leaveFrom?: string\n  /** Custom final class for the leave-active frame. */\n  leaveTo?: string\n  /** Fires once the enter transition timer completes. */\n  onAfterEnter?: () => void\n  /** Fires once the leave transition timer completes. */\n  onAfterLeave?: () => void\n  /** Single React element whose `className` will be merged with transition classes. */\n  children: React.ReactElement<{ className?: string; ref?: React.Ref<HTMLElement> }>\n  /** When `true`, removes the child from the tree after leave; when `false`, keeps it mounted. @default true */\n  unmountOnExit?: boolean\n}\n\ntype Phase = 'idle' | 'enter' | 'enter-active' | 'leave' | 'leave-active'\n\n/**\n * Clones a single child and toggles CSS classes over `duration` when `visible` changes, optionally unmounting after leave.\n */\nexport function Transition({\n  visible,\n  name = 'sg-fade',\n  duration = 200,\n  enterFrom,\n  enterTo,\n  leaveFrom,\n  leaveTo,\n  onAfterEnter,\n  onAfterLeave,\n  children,\n  unmountOnExit = true,\n}: TransitionProps) {\n  const [mounted, setMounted] = useState(visible)\n  const [phase, setPhase] = useState<Phase>(visible ? 'idle' : 'idle')\n  const nodeRef = useRef<HTMLElement | null>(null)\n  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const prevVisible = useRef(visible)\n\n  const getEnterClasses = useCallback(() => {\n    if (enterFrom && enterTo) return { from: enterFrom, active: `${name}-enter-active`, to: enterTo }\n    return { from: `${name}-enter-from`, active: `${name}-enter-active`, to: `${name}-enter-to` }\n  }, [name, enterFrom, enterTo])\n\n  const getLeaveClasses = useCallback(() => {\n    if (leaveFrom && leaveTo) return { from: leaveFrom, active: `${name}-leave-active`, to: leaveTo }\n    return { from: `${name}-leave-from`, active: `${name}-leave-active`, to: `${name}-leave-to` }\n  }, [name, leaveFrom, leaveTo])\n\n  useEffect(() => {\n    if (visible === prevVisible.current) return\n    prevVisible.current = visible\n    clearTimeout(timerRef.current)\n\n    if (visible) {\n      setMounted(true)\n      setPhase('enter')\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => setPhase('enter-active'))\n      })\n      timerRef.current = setTimeout(() => {\n        setPhase('idle')\n        onAfterEnter?.()\n      }, duration)\n    } else {\n      setPhase('leave')\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => setPhase('leave-active'))\n      })\n      timerRef.current = setTimeout(() => {\n        setPhase('idle')\n        if (unmountOnExit) setMounted(false)\n        onAfterLeave?.()\n      }, duration)\n    }\n  }, [visible, duration, unmountOnExit, onAfterEnter, onAfterLeave])\n\n  useEffect(() => {\n    return () => clearTimeout(timerRef.current)\n  }, [])\n\n  if (!mounted && unmountOnExit) return null\n\n  const enterC = getEnterClasses()\n  const leaveC = getLeaveClasses()\n\n  let transitionClass = ''\n  switch (phase) {\n    case 'enter':\n      transitionClass = `${enterC.from} ${enterC.active}`\n      break\n    case 'enter-active':\n      transitionClass = `${enterC.to} ${enterC.active}`\n      break\n    case 'leave':\n      transitionClass = `${leaveC.from} ${leaveC.active}`\n      break\n    case 'leave-active':\n      transitionClass = `${leaveC.to} ${leaveC.active}`\n      break\n  }\n\n  return React.cloneElement(children, {\n    ref: nodeRef,\n    className: [children.props.className, transitionClass].filter(Boolean).join(' '),\n  })\n}\n","import React from 'react'\nimport { Spin } from './Spin'\nimport { useConfig } from '../ConfigProvider'\nimport type { BaseComponentProps, InteractiveProps, SizableProps } from '../../types'\n\n/** Props for the Button component. */\nexport interface ButtonProps extends BaseComponentProps, InteractiveProps, SizableProps {\n  /** Visual style variant. @default 'default' */\n  type?: 'default' | 'primary' | 'dashed' | 'text' | 'link'\n  /** Native HTML button type attribute. @default 'button' */\n  htmlType?: 'button' | 'submit' | 'reset'\n  /**\n   * Visually flags a destructive action. Combines with `type` (e.g. a\n   * `danger` `primary` button is solid red, a `danger` `text` is red text).\n   * Adds the `sg-button-danger` modifier class.\n   * @default false\n   */\n  danger?: boolean\n  /** Stretches the button to fill its parent container. @default false */\n  block?: boolean\n  /** Click event handler. */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Button content. */\n  children?: React.ReactNode\n}\n\n/** General-purpose button with multiple visual variants, sizes, and loading state. */\nexport function Button({\n  type = 'default',\n  size: sizeProp,\n  disabled: disabledProp,\n  loading,\n  htmlType = 'button',\n  danger = false,\n  block = false,\n  onClick,\n  children,\n  className,\n  style,\n  unstyled,\n}: ButtonProps) {\n  const config = useConfig()\n  const size = sizeProp ?? config.size ?? 'middle'\n  const disabled = disabledProp ?? config.disabled ?? false\n\n  const classes = unstyled\n    ? className ?? ''\n    : [\n        'sg-button',\n        `sg-button-${type}`,\n        `sg-button-${size}`,\n        danger ? 'sg-button-danger' : '',\n        block ? 'sg-button-block' : '',\n        loading ? 'sg-button-loading' : '',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')\n\n  return (\n    <button\n      type={htmlType}\n      className={classes}\n      style={style}\n      disabled={disabled || loading}\n      aria-disabled={disabled || loading}\n      aria-busy={loading}\n      onClick={onClick}\n    >\n      {loading && <Spin size=\"small\" unstyled={unstyled} />}\n      {children}\n    </button>\n  )\n}\n"],"mappings":"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","names":["React","jsx","jsxs"]}

package/dist/{chunk-Z5UGF7EO.js → chunk-EFDB2ENB.js}

@@ -1,15 +1,22 @@
 import {
   Checkbox
-} from "./chunk-FSV73JI4.js";
+} from "./chunk-PEX2UTNG.js";
 import {
   Spin
-} from "./chunk-2OCEO636.js";
+} from "./chunk-VLRLCHEL.js";
 import {
   useVirtualScroll
 } from "./chunk-SEQI65CF.js";
 
 // src/components/complex/DataGrid/DataGrid.tsx
-import React, { forwardRef, useImperativeHandle, useCallback as useCallback2, useRef as useRef2, useMemo, useState as useState2 } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useCallback as useCallback2,
+  useRef as useRef2,
+  useMemo,
+  useState as useState2
+} from "react";
 
 // src/components/complex/DataGrid/useDataGridState.ts
 import { useState, useCallback, useRef } from "react";
@@ -289,7 +296,11 @@ function DataGridInner(props, ref) {
   } = state;
   const [ctxMenu, setCtxMenu] = useState2(null);
   const [dragOverCol, setDragOverCol] = useState2(null);
-  const { range, containerRef: scrollRef, scrollToIndex } = useVirtualScroll({
+  const {
+    range,
+    containerRef: scrollRef,
+    scrollToIndex
+  } = useVirtualScroll({
     itemCount: data.length,
     itemHeight: rowHeight,
     overscan
@@ -301,18 +312,9 @@ function DataGridInner(props, ref) {
     },
     [rowKey]
   );
-  const frozenLeft = useMemo(
-    () => columns.filter((c) => c.frozen === "left"),
-    [columns]
-  );
-  const frozenRight = useMemo(
-    () => columns.filter((c) => c.frozen === "right"),
-    [columns]
-  );
-  const scrollable = useMemo(
-    () => columns.filter((c) => !c.frozen),
-    [columns]
-  );
+  const frozenLeft = useMemo(() => columns.filter((c) => c.frozen === "left"), [columns]);
+  const frozenRight = useMemo(() => columns.filter((c) => c.frozen === "right"), [columns]);
+  const scrollable = useMemo(() => columns.filter((c) => !c.frozen), [columns]);
   const orderedColumns = useMemo(() => {
     const base = [...frozenLeft, ...scrollable, ...frozenRight];
     if (!columnOrder) return base;
@@ -624,7 +626,14 @@ function DataGridInner(props, ref) {
     {
       ref: containerRef,
       className: rootCls,
-      style: { width, height, display: "flex", flexDirection: "column", position: "relative", ...style },
+      style: {
+        width,
+        height,
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        ...style
+      },
       onKeyDown: handleKeyDown,
       tabIndex: 0,
       role: "grid",
@@ -647,7 +656,13 @@ function DataGridInner(props, ref) {
                 "div",
                 {
                   className: `${cls.headerCell} ${cls.selectionCell}`,
-                  style: { width: SELECTION_COL_WIDTH, minWidth: SELECTION_COL_WIDTH, display: "flex", alignItems: "center", justifyContent: "center" },
+                  style: {
+                    width: SELECTION_COL_WIDTH,
+                    minWidth: SELECTION_COL_WIDTH,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
                   role: "columnheader",
                   children: /* @__PURE__ */ jsx(
                     Checkbox,
@@ -663,7 +678,14 @@ function DataGridInner(props, ref) {
                 "div",
                 {
                   className: `${cls.headerCell} ${cls.rowNumberCell}`,
-                  style: { width: ROW_NUMBER_COL_WIDTH, minWidth: ROW_NUMBER_COL_WIDTH, display: "flex", alignItems: "center", justifyContent: "center", userSelect: "none" },
+                  style: {
+                    width: ROW_NUMBER_COL_WIDTH,
+                    minWidth: ROW_NUMBER_COL_WIDTH,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    userSelect: "none"
+                  },
                   role: "columnheader",
                   children: "#"
                 }
@@ -774,7 +796,13 @@ function DataGridInner(props, ref) {
                       "div",
                       {
                         className: `${cls.cell} ${cls.selectionCell}`,
-                        style: { width: SELECTION_COL_WIDTH, minWidth: SELECTION_COL_WIDTH, display: "flex", alignItems: "center", justifyContent: "center" },
+                        style: {
+                          width: SELECTION_COL_WIDTH,
+                          minWidth: SELECTION_COL_WIDTH,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        },
                         onClick: (e) => e.stopPropagation(),
                         children: /* @__PURE__ */ jsx(
                           Checkbox,
@@ -789,7 +817,14 @@ function DataGridInner(props, ref) {
                       "div",
                       {
                         className: `${cls.cell} ${cls.rowNumberCell}`,
-                        style: { width: ROW_NUMBER_COL_WIDTH, minWidth: ROW_NUMBER_COL_WIDTH, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--sg-text-tertiary, #999)" },
+                        style: {
+                          width: ROW_NUMBER_COL_WIDTH,
+                          minWidth: ROW_NUMBER_COL_WIDTH,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "var(--sg-color-text-tertiary, #999)"
+                        },
                         children: vi.index + 1
                       }
                     ),
@@ -807,8 +842,20 @@ function DataGridInner(props, ref) {
             className: `${cls.summaryRow} ${sr.className ?? ""}`,
             style: { display: "flex", height: rowHeight },
             children: [
-              rowSelection && /* @__PURE__ */ jsx("div", { className: `${cls.summaryCell}`, style: { width: SELECTION_COL_WIDTH, minWidth: SELECTION_COL_WIDTH } }),
-              showRowNumber && /* @__PURE__ */ jsx("div", { className: `${cls.summaryCell}`, style: { width: ROW_NUMBER_COL_WIDTH, minWidth: ROW_NUMBER_COL_WIDTH } }),
+              rowSelection && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${cls.summaryCell}`,
+                  style: { width: SELECTION_COL_WIDTH, minWidth: SELECTION_COL_WIDTH }
+                }
+              ),
+              showRowNumber && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `${cls.summaryCell}`,
+                  style: { width: ROW_NUMBER_COL_WIDTH, minWidth: ROW_NUMBER_COL_WIDTH }
+                }
+              ),
               orderedColumns.map((col) => /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -834,7 +881,22 @@ function DataGridInner(props, ref) {
             onClose: () => setCtxMenu(null)
           }
         ),
-        loading && /* @__PURE__ */ jsx("div", { className: cls.loading, style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,0.6)", zIndex: 10 }, children: /* @__PURE__ */ jsx(Spin, { size: "large" }) })
+        loading && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cls.loading,
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(255,255,255,0.6)",
+              zIndex: 10
+            },
+            children: /* @__PURE__ */ jsx(Spin, { size: "large" })
+          }
+        )
       ]
     }
   );
@@ -844,4 +906,4 @@ var DataGrid = forwardRef(DataGridInner);
 export {
   DataGrid
 };
-//# sourceMappingURL=chunk-Z5UGF7EO.js.map
+//# sourceMappingURL=chunk-EFDB2ENB.js.map