@firecms/ui 3.0.0-beta.12 → 3.0.0-beta.14

package/dist/components/Autocomplete.d.ts

@@ -3,6 +3,7 @@ export type AutocompleteProps = {
     children: React.ReactNode;
     open: boolean;
     setOpen: (open: boolean) => void;
+    className?: string;
 };
 export declare const useAutoComplete: ({ ref }: {
     ref: React.MutableRefObject<HTMLDivElement | null>;
@@ -11,9 +12,10 @@ export declare const useAutoComplete: ({ ref }: {
     autoCompleteOpen: boolean;
     setAutoCompleteOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
-export declare function Autocomplete({ children, open, setOpen }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete({ children, open, setOpen, className }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
 export type AutocompleteItemProps = {
     children: React.ReactNode;
     onClick?: () => void;
+    className?: string;
 };
-export declare function AutocompleteItem({ children, onClick }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AutocompleteItem({ children, onClick, className }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BooleanSwitch.d.ts

@@ -3,7 +3,7 @@ export type BooleanSwitchProps = {
     value: boolean | null;
     className?: string;
     disabled?: boolean;
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
 } & ({
     allowIndeterminate: true;
     onValueChange?: (newValue: boolean | null) => void;

package/dist/components/BooleanSwitchWithLabel.d.ts

@@ -14,4 +14,4 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
  * Simple boolean switch.
  *
  */
-export declare const BooleanSwitchWithLabel: ({ value, position, invisible, onValueChange, error, label, autoFocus, disabled, size, className, fullWidth, inputClassName, ...props }: BooleanSwitchWithLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, ...props }: BooleanSwitchWithLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button.d.ts

@@ -1,12 +1,14 @@
 import React from "react";
-export type ButtonProps<P extends React.ElementType> = Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick"> & {
-    variant?: "filled" | "neutral" | "outlined" | "text";
+export type ButtonProps<C extends React.ElementType = "button"> = {
+    children?: React.ReactNode;
+    variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
-    color?: "primary" | "secondary" | "text" | "error";
+    color?: "primary" | "secondary" | "text" | "error" | "neutral";
     size?: "small" | "medium" | "large" | "xl" | "2xl";
     startIcon?: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
+    component?: C;
     onClick?: React.MouseEventHandler<any>;
-};
+} & React.ComponentPropsWithoutRef<C>;
 export declare const Button: React.FC<ButtonProps<any>>;

package/dist/components/DateTimeField.d.ts

@@ -6,7 +6,7 @@ export type DateTimeFieldProps = {
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
-    size?: "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     label?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;

package/dist/components/Dialog.d.ts

@@ -4,6 +4,7 @@ export type DialogProps = {
     onOpenChange?: (open: boolean) => void;
     children: React.ReactNode;
     className?: string;
+    containerClassName?: string;
     fullWidth?: boolean;
     fullHeight?: boolean;
     fullScreen?: boolean;
@@ -29,5 +30,5 @@ declare const widthClasses: {
     "7xl": string;
     full: string;
 };
-export declare const Dialog: ({ open, onOpenChange, children, className, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MultiSelect.d.ts

@@ -1,35 +1,27 @@
 import * as React from "react";
 import { ChangeEvent } from "react";
-interface MultiSelectContextProps {
-    fieldValue?: string[];
-    onItemClick: (v: string) => void;
+export type MultiSelectValue = string | number | boolean;
+interface MultiSelectContextProps<T extends MultiSelectValue = string> {
+    fieldValue?: T[];
+    onItemClick: (v: T) => void;
 }
-export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
+export declare const MultiSelectContext: React.Context<MultiSelectContextProps<any>>;
 /**
  * Props for MultiSelect component
  */
-interface MultiSelectProps {
-    /**
-     * The modality of the popover. When set to true, interaction with outside elements
-     * will be disabled and only popover content will be visible to screen readers.
-     * Optional, defaults to false.
-     */
+interface MultiSelectProps<T extends MultiSelectValue = string> {
     modalPopover?: boolean;
-    /**
-     * Additional class names to apply custom styles to the multi-select component.
-     * Optional, can be used to add custom styles.
-     */
     className?: string;
     open?: boolean;
     name?: string;
     id?: string;
     onOpenChange?: (open: boolean) => void;
-    value?: string[];
+    value?: T[];
     inputClassName?: string;
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
-    onValueChange?: (updatedValue: string[]) => void;
+    onValueChange?: (updatedValue: T[]) => void;
     placeholder?: React.ReactNode;
-    size?: "small" | "medium";
+    size?: "smallest" | "small" | "medium" | "large";
     useChips?: boolean;
     label?: React.ReactNode | string;
     disabled?: boolean;
@@ -43,13 +35,13 @@ interface MultiSelectProps {
     padding?: boolean;
     invisible?: boolean;
     children: React.ReactNode;
-    renderValues?: (values: string[]) => React.ReactNode;
+    renderValues?: (values: T[]) => React.ReactNode;
 }
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
-export interface MultiSelectItemProps {
-    value: string;
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<string> & React.RefAttributes<HTMLButtonElement>>;
+export interface MultiSelectItemProps<T extends MultiSelectValue = string> {
+    value: T;
     children?: React.ReactNode;
     className?: string;
 }
-export declare function MultiSelectItem({ children, value, className }: MultiSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectItem<T extends MultiSelectValue = string>({ children, value, className }: MultiSelectItemProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Select.d.ts

@@ -1,18 +1,19 @@
 import React, { ChangeEvent } from "react";
-export type SelectProps = {
+export type SelectValue = string | number | boolean;
+export type SelectProps<T extends SelectValue = string> = {
     open?: boolean;
     name?: string;
     fullWidth?: boolean;
     id?: string;
     onOpenChange?: (open: boolean) => void;
-    value?: string;
+    value?: T;
     className?: string;
     inputClassName?: string;
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
-    onValueChange?: (updatedValue: string) => void;
+    onValueChange?: (updatedValue: T) => void;
     placeholder?: React.ReactNode;
-    renderValue?: (value: string) => React.ReactNode;
-    size?: "small" | "medium" | "large";
+    renderValue?: (value: T) => React.ReactNode;
+    size?: "smallest" | "small" | "medium" | "large";
     label?: React.ReactNode | string;
     disabled?: boolean;
     error?: boolean;
@@ -22,15 +23,16 @@ export type SelectProps = {
     padding?: boolean;
     invisible?: boolean;
     children?: React.ReactNode;
+    dataType?: "string" | "number" | "boolean";
 };
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
-export type SelectItemProps = {
-    value: string;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<HTMLDivElement>>;
+export type SelectItemProps<T extends SelectValue = string> = {
+    value: T;
     children?: React.ReactNode;
     disabled?: boolean;
     className?: string;
 };
-export declare function SelectItem({ value, children, disabled, className }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectItem<T extends SelectValue = string>({ value, children, disabled, className }: SelectItemProps<T>): import("react/jsx-runtime").JSX.Element;
 export type SelectGroupProps = {
     label: React.ReactNode;
     children: React.ReactNode;

package/dist/components/TextField.d.ts

@@ -6,19 +6,27 @@ export type TextFieldProps<T extends string | number> = {
     onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     label?: React.ReactNode;
     multiline?: boolean;
-    rows?: number;
     disabled?: boolean;
     invisible?: boolean;
     error?: boolean;
     endAdornment?: React.ReactNode;
     autoFocus?: boolean;
     placeholder?: string;
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     className?: string;
     style?: React.CSSProperties;
     inputClassName?: string;
     inputStyle?: React.CSSProperties;
     inputRef?: React.ForwardedRef<any>;
+    /**
+     * Maximum number of rows to display.
+     */
+    maxRows?: number | string;
+    /**
+     * Minimum number of rows to display.
+     * @default 1
+     */
+    minRows?: number | string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 export declare const TextField: React.ForwardRefExoticComponent<{
     type?: InputType;
@@ -26,17 +34,25 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     label?: React.ReactNode;
     multiline?: boolean;
-    rows?: number;
     disabled?: boolean;
     invisible?: boolean;
     error?: boolean;
     endAdornment?: React.ReactNode;
     autoFocus?: boolean;
     placeholder?: string;
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     className?: string;
     style?: React.CSSProperties;
     inputClassName?: string;
     inputStyle?: React.CSSProperties;
     inputRef?: React.ForwardedRef<any>;
+    /**
+     * Maximum number of rows to display.
+     */
+    maxRows?: number | string;
+    /**
+     * Minimum number of rows to display.
+     * @default 1
+     */
+    minRows?: number | string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLDivElement>>;

package/dist/index.css

@@ -71,3 +71,4 @@
 a {
     @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
 }
+