@refineui/react 0.1.1 → 0.2.0

package/dist/index.d.cts

@@ -2072,10 +2072,21 @@ declare const componentTypographyTokens: {
             type: "semantic-text";
             name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
         }>;
-        readonly item: Readonly<{
-            type: "semantic-text";
-            name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
-        }>;
+        /** Row text follows the Command size, like Tree rows. */
+        readonly item: {
+            readonly sm: Readonly<{
+                type: "semantic-text";
+                name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+            }>;
+            readonly md: Readonly<{
+                type: "semantic-text";
+                name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+            }>;
+            readonly lg: Readonly<{
+                type: "semantic-text";
+                name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+            }>;
+        };
         readonly empty: Readonly<{
             type: "semantic-text";
             name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
@@ -4492,10 +4503,20 @@ declare const componentTokens: {
                 type: "semantic-text";
                 name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
             }>;
-            readonly item: Readonly<{
-                type: "semantic-text";
-                name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
-            }>;
+            readonly item: {
+                readonly sm: Readonly<{
+                    type: "semantic-text";
+                    name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+                }>;
+                readonly md: Readonly<{
+                    type: "semantic-text";
+                    name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+                }>;
+                readonly lg: Readonly<{
+                    type: "semantic-text";
+                    name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+                }>;
+            };
             readonly empty: Readonly<{
                 type: "semantic-text";
                 name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
@@ -5943,7 +5964,7 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
 
 declare function Input({ error, success, fullWidth, size: sizeProp, disabled, className, ...props }: InputProps): react.JSX.Element;
 
-/** Shared sm / md / lg tiers for Input, SpinButton — keep in sync. */
+/** Shared sm / md / lg tiers for Input, SpinButton, SearchField — keep in sync. */
 
 type FormControlSize = ControlSize;
 
@@ -5992,6 +6013,12 @@ interface SearchFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChang
      * @default "filled"
      */
     appearance?: "filled" | "plain";
+    /**
+     * Control size — same tiers as Input. Inherits from `Field` when omitted.
+     * `plain` only takes the size's typography and icon sizes.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
     /** Forwarded to the inner input. */
     id?: string;
     /** Accessible name for the search input. */
@@ -6007,7 +6034,7 @@ type SearchFieldClearProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type
     children?: ReactNode;
 };
 
-declare function SearchField({ value, defaultValue, onValueChange, disabled, appearance, className, children, id, onPointerDown, "aria-label": ariaLabel, ...props }: SearchFieldProps): react.JSX.Element;
+declare function SearchField({ value, defaultValue, onValueChange, disabled, appearance, size: sizeProp, className, children, id, onPointerDown, "aria-label": ariaLabel, ...props }: SearchFieldProps): react.JSX.Element;
 declare function SearchFieldIcon({ children, className, ...props }: SearchFieldIconProps): react.JSX.Element;
 declare const SearchFieldInput: react.ForwardRefExoticComponent<SearchFieldInputProps & react.RefAttributes<HTMLInputElement>>;
 declare function SearchFieldClear({ className, children, disabled: disabledProp, onClick, "aria-label": ariaLabel, ...props }: SearchFieldClearProps): react.JSX.Element | null;
@@ -6224,7 +6251,13 @@ declare function DialogDescription({ className, id, children, ...props }: Dialog
 declare function DialogClose({ className, onClick, type, ...props }: DialogCloseProps): react.JSX.Element;
 
 type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
+type CommandSize = "sm" | "md" | "lg";
 interface CommandProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Density of the search field, results panel radius, and item rows — same tiers as SearchField.
+     * @default "md" (`CommandDialog` defaults to `"lg"`)
+     */
+    size?: CommandSize;
     /** Controlled search query */
     value?: string;
     /** Uncontrolled initial search query */
@@ -6271,7 +6304,7 @@ interface CommandItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 type CommandShortcutProps = HTMLAttributes<HTMLSpanElement>;
 
 declare const defaultCommandFilter: CommandFilter;
-declare function Command({ children, className, value, defaultValue, onValueChange, shouldFilter, filter, selectedValue: selectedValueProp, defaultSelectedValue, onSelectedValueChange, label, onKeyDown, ...props }: CommandProps): react.JSX.Element;
+declare function Command({ children, className, size, value, defaultValue, onValueChange, shouldFilter, filter, selectedValue: selectedValueProp, defaultSelectedValue, onSelectedValueChange, label, onKeyDown, ...props }: CommandProps): react.JSX.Element;
 declare function CommandDialog({ children, commandProps, size, ...dialogProps }: CommandDialogProps): react.JSX.Element;
 declare const CommandInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> & {
     startIcon?: ReactNode;
@@ -6948,7 +6981,7 @@ interface SidebarLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 declare function Sidebar({ className, ...props }: SidebarProps): react.JSX.Element;
 declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): react.JSX.Element;
 declare function SidebarBrand({ className, ...props }: SidebarBrandProps): react.JSX.Element;
-declare function SidebarContent({ className, ...props }: SidebarContentProps): react.JSX.Element;
+declare function SidebarContent({ className, children, ...props }: SidebarContentProps): react.JSX.Element;
 declare function SidebarNav({ className, "aria-label": ariaLabel, ...props }: SidebarNavProps): react.JSX.Element;
 declare function SidebarGroup({ className, ...props }: SidebarGroupProps): react.JSX.Element;
 declare function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps): react.JSX.Element;
@@ -7206,6 +7239,11 @@ declare function ResizableHandle({ className, style, withHandle, disabled, onKey
 type ScrollAreaOrientation = "vertical" | "horizontal";
 /** When the custom scrollbar is visible. */
 type ScrollAreaType = "hover" | "always";
+/**
+ * Rows marked `data-scroll-edge-item` always blur as they cross an edge that hides more content
+ * (picker-style); see the ScrollArea docs. Elements between the viewport and those rows must
+ * not be scroll containers (`overflow: hidden`) — use `overflow: clip`.
+ */
 interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     type?: ScrollAreaType;
 }

package/dist/index.d.ts

@@ -2072,10 +2072,21 @@ declare const componentTypographyTokens: {
             type: "semantic-text";
             name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
         }>;
-        readonly item: Readonly<{
-            type: "semantic-text";
-            name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
-        }>;
+        /** Row text follows the Command size, like Tree rows. */
+        readonly item: {
+            readonly sm: Readonly<{
+                type: "semantic-text";
+                name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+            }>;
+            readonly md: Readonly<{
+                type: "semantic-text";
+                name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+            }>;
+            readonly lg: Readonly<{
+                type: "semantic-text";
+                name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+            }>;
+        };
         readonly empty: Readonly<{
             type: "semantic-text";
             name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
@@ -4492,10 +4503,20 @@ declare const componentTokens: {
                 type: "semantic-text";
                 name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
             }>;
-            readonly item: Readonly<{
-                type: "semantic-text";
-                name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
-            }>;
+            readonly item: {
+                readonly sm: Readonly<{
+                    type: "semantic-text";
+                    name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+                }>;
+                readonly md: Readonly<{
+                    type: "semantic-text";
+                    name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+                }>;
+                readonly lg: Readonly<{
+                    type: "semantic-text";
+                    name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
+                }>;
+            };
             readonly empty: Readonly<{
                 type: "semantic-text";
                 name: "displayLg" | "displayMd" | "displaySm" | "headingLg" | "headingMd" | "headingSm" | "titleLg" | "titleMd" | "titleSm" | "subtitleLg" | "subtitleMd" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "labelLg" | "labelMd" | "labelSm" | "captionLg" | "captionMd" | "captionSm";
@@ -5943,7 +5964,7 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
 
 declare function Input({ error, success, fullWidth, size: sizeProp, disabled, className, ...props }: InputProps): react.JSX.Element;
 
-/** Shared sm / md / lg tiers for Input, SpinButton — keep in sync. */
+/** Shared sm / md / lg tiers for Input, SpinButton, SearchField — keep in sync. */
 
 type FormControlSize = ControlSize;
 
@@ -5992,6 +6013,12 @@ interface SearchFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChang
      * @default "filled"
      */
     appearance?: "filled" | "plain";
+    /**
+     * Control size — same tiers as Input. Inherits from `Field` when omitted.
+     * `plain` only takes the size's typography and icon sizes.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
     /** Forwarded to the inner input. */
     id?: string;
     /** Accessible name for the search input. */
@@ -6007,7 +6034,7 @@ type SearchFieldClearProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type
     children?: ReactNode;
 };
 
-declare function SearchField({ value, defaultValue, onValueChange, disabled, appearance, className, children, id, onPointerDown, "aria-label": ariaLabel, ...props }: SearchFieldProps): react.JSX.Element;
+declare function SearchField({ value, defaultValue, onValueChange, disabled, appearance, size: sizeProp, className, children, id, onPointerDown, "aria-label": ariaLabel, ...props }: SearchFieldProps): react.JSX.Element;
 declare function SearchFieldIcon({ children, className, ...props }: SearchFieldIconProps): react.JSX.Element;
 declare const SearchFieldInput: react.ForwardRefExoticComponent<SearchFieldInputProps & react.RefAttributes<HTMLInputElement>>;
 declare function SearchFieldClear({ className, children, disabled: disabledProp, onClick, "aria-label": ariaLabel, ...props }: SearchFieldClearProps): react.JSX.Element | null;
@@ -6224,7 +6251,13 @@ declare function DialogDescription({ className, id, children, ...props }: Dialog
 declare function DialogClose({ className, onClick, type, ...props }: DialogCloseProps): react.JSX.Element;
 
 type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
+type CommandSize = "sm" | "md" | "lg";
 interface CommandProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Density of the search field, results panel radius, and item rows — same tiers as SearchField.
+     * @default "md" (`CommandDialog` defaults to `"lg"`)
+     */
+    size?: CommandSize;
     /** Controlled search query */
     value?: string;
     /** Uncontrolled initial search query */
@@ -6271,7 +6304,7 @@ interface CommandItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
 type CommandShortcutProps = HTMLAttributes<HTMLSpanElement>;
 
 declare const defaultCommandFilter: CommandFilter;
-declare function Command({ children, className, value, defaultValue, onValueChange, shouldFilter, filter, selectedValue: selectedValueProp, defaultSelectedValue, onSelectedValueChange, label, onKeyDown, ...props }: CommandProps): react.JSX.Element;
+declare function Command({ children, className, size, value, defaultValue, onValueChange, shouldFilter, filter, selectedValue: selectedValueProp, defaultSelectedValue, onSelectedValueChange, label, onKeyDown, ...props }: CommandProps): react.JSX.Element;
 declare function CommandDialog({ children, commandProps, size, ...dialogProps }: CommandDialogProps): react.JSX.Element;
 declare const CommandInput: react.ForwardRefExoticComponent<Omit<react.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> & {
     startIcon?: ReactNode;
@@ -6948,7 +6981,7 @@ interface SidebarLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 declare function Sidebar({ className, ...props }: SidebarProps): react.JSX.Element;
 declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): react.JSX.Element;
 declare function SidebarBrand({ className, ...props }: SidebarBrandProps): react.JSX.Element;
-declare function SidebarContent({ className, ...props }: SidebarContentProps): react.JSX.Element;
+declare function SidebarContent({ className, children, ...props }: SidebarContentProps): react.JSX.Element;
 declare function SidebarNav({ className, "aria-label": ariaLabel, ...props }: SidebarNavProps): react.JSX.Element;
 declare function SidebarGroup({ className, ...props }: SidebarGroupProps): react.JSX.Element;
 declare function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps): react.JSX.Element;
@@ -7206,6 +7239,11 @@ declare function ResizableHandle({ className, style, withHandle, disabled, onKey
 type ScrollAreaOrientation = "vertical" | "horizontal";
 /** When the custom scrollbar is visible. */
 type ScrollAreaType = "hover" | "always";
+/**
+ * Rows marked `data-scroll-edge-item` always blur as they cross an edge that hides more content
+ * (picker-style); see the ScrollArea docs. Elements between the viewport and those rows must
+ * not be scroll containers (`overflow: hidden`) — use `overflow: clip`.
+ */
 interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
     type?: ScrollAreaType;
 }