@firecms/ui 3.0.0-beta.7 → 3.0.0-beta.9

package/dist/components/BooleanSwitch.d.ts

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

package/dist/components/Checkbox.d.ts

@@ -5,7 +5,7 @@ export interface CheckboxProps {
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     padding?: boolean;
-    size?: "tiny" | "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
 export declare const Checkbox: ({ id, checked, indeterminate, padding, disabled, size, onCheckedChange, color }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chip.d.ts

@@ -8,14 +8,15 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "tiny" | "small" | "medium";
+    size?: "smallest" | "small" | "medium";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;
     onClick?: () => void;
     icon?: React.ReactNode;
+    style?: React.CSSProperties;
 }
 /**
  * @group Preview components
  */
-export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className, style }: ChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DateTimeField.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface DateTimeFieldProps {
-    value?: Date;
-    onChange: (date: Date | undefined) => void;
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
     mode?: "date" | "date_time";
     disabled?: boolean;
     clearable?: boolean;
@@ -12,7 +12,6 @@ interface DateTimeFieldProps {
     style?: React.CSSProperties;
     inputClassName?: string;
     invisible?: boolean;
-    preventOpenOnFocus?: boolean;
     locale?: string;
 }
 export declare const DateTimeField: React.FC<DateTimeFieldProps>;

package/dist/components/Dialog.d.ts

@@ -11,6 +11,9 @@ export type DialogProps = {
     maxWidth?: keyof typeof widthClasses;
     modal?: boolean;
     onOpenAutoFocus?: (e: Event) => void;
+    onEscapeKeyDown?: (e: KeyboardEvent) => void;
+    onPointerDownOutside?: (e: Event) => void;
+    onInteractOutside?: (e: Event) => void;
 };
 declare const widthClasses: {
     xs: string;
@@ -26,5 +29,5 @@ declare const widthClasses: {
     "7xl": string;
     full: string;
 };
-export declare const Dialog: ({ open, onOpenChange, children, className, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+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 {};

package/dist/components/InputLabel.d.ts

@@ -6,6 +6,6 @@ export type InputLabelProps = {
 } & React.LabelHTMLAttributes<HTMLLabelElement>;
 export declare const InputLabel: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
-    className?: string | undefined;
-    shrink?: boolean | undefined;
+    className?: string;
+    shrink?: boolean;
 } & React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/Label.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
-    border?: boolean | undefined;
-    onClick?: React.MouseEventHandler<HTMLLabelElement> | undefined;
+    border?: boolean;
+    onClick?: React.MouseEventHandler<HTMLLabelElement>;
 } & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/components/Menu.d.ts

@@ -6,8 +6,11 @@ export type MenuProps = {
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
     portalContainer?: HTMLElement | null;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
 };
-export declare function Menu({ children, trigger, open, defaultOpen, onOpenChange, portalContainer }: MenuProps): import("react/jsx-runtime").JSX.Element;
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;
+export { Menu };
 export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;

package/dist/components/Menubar.d.ts

@@ -1,26 +1,31 @@
-export declare function Menubar({ children, className }: {
+import * as React from "react";
+export declare function Menubar({ children, onSelect, className }: {
     children: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function MenubarMenu({ children, }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarTrigger({ children, className }: {
+export declare function MenubarTrigger({ children, onSelect, className }: {
     children: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function MenubarPortal({ children, }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarContent({ children, className, align, sideOffset, alignOffset, ...rest }: {
+export declare function MenubarContent({ children, className, align, sideOffset, alignOffset, onSelect, ...rest }: {
     children: React.ReactNode;
     className?: string;
+    onSelect?: (event: React.SyntheticEvent) => void;
     align?: "start" | "center" | "end";
     sideOffset?: number;
     alignOffset?: number;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarItem({ children, leftPadding, className, disabled, ...rest }: {
+export declare function MenubarItem({ children, leftPadding, className, disabled, onSelect, ...rest }: {
     children: React.ReactNode;
+    onSelect?: (event: Event) => void;
     leftPadding?: boolean;
     className?: string;
     disabled?: boolean;
@@ -32,17 +37,20 @@ export declare function MenubarSeparator({ children, className, ...rest }: {
 export declare function MenubarSub({ children, ...rest }: {
     children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarSubTrigger({ children, className, ...rest }: {
+export declare function MenubarSubTrigger({ children, className, onSelect, ...rest }: {
     children?: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarSubContent({ children, alignOffset, className, ...rest }: {
+export declare function MenubarSubContent({ children, alignOffset, className, onSelect, ...rest }: {
     children?: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
     alignOffset?: number;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarCheckboxItem({ children, checked, onCheckedChange, className, ...rest }: {
+export declare function MenubarCheckboxItem({ children, checked, onCheckedChange, className, onSelect, ...rest }: {
     children?: React.ReactNode;
+    onSelect?: (event: Event) => void;
     checked?: boolean;
     onCheckedChange?: () => void;
     className?: string;
@@ -51,14 +59,16 @@ export declare function MenubarItemIndicator({ children, className, ...rest }: {
     children?: React.ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarRadioGroup({ children, className, value, onValueChange, ...rest }: {
+export declare function MenubarRadioGroup({ children, className, value, onValueChange, onSelect, ...rest }: {
     children?: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
     value?: string;
     onValueChange?: (value: string) => void;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarRadioItem({ children, className, value, ...rest }: {
+export declare function MenubarRadioItem({ children, className, value, onSelect, ...rest }: {
     children?: React.ReactNode;
+    onSelect?: (event: Event) => void;
     value: string;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect.d.ts

@@ -1,35 +1,50 @@
 import * as React from "react";
-export type MultiSelectProps = {
+import { ChangeEvent } from "react";
+interface MultiSelectContextProps {
+    fieldValue?: string[];
+    onItemClick: (v: string) => void;
+}
+export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
+/**
+ * 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.
+     */
+    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[];
-    containerClassName?: string;
-    className?: string;
     inputClassName?: string;
-    onMultiValueChange?: (updatedValue: string[]) => void;
+    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
+    onValueChange?: (updatedValue: string[]) => void;
     placeholder?: React.ReactNode;
-    renderValue?: (values: string, index: number) => React.ReactNode;
-    renderValues?: (values: string[]) => React.ReactNode;
     size?: "small" | "medium";
-    label?: React.ReactNode;
+    useChips?: boolean;
+    label?: React.ReactNode | string;
     disabled?: boolean;
     error?: boolean;
     position?: "item-aligned" | "popper";
     endAdornment?: React.ReactNode;
+    multiple?: boolean;
+    includeClear?: boolean;
     inputRef?: React.RefObject<HTMLButtonElement>;
     padding?: boolean;
-    includeFocusOutline?: boolean;
-    children?: React.ReactNode;
-};
-interface MultiSelectContextProps {
-    fieldValue?: string[];
-    setInputValue: (v: string) => void;
-    onValueChangeInternal: (v: string) => void;
+    invisible?: boolean;
+    children: React.ReactNode;
+    renderValues?: (values: string[]) => React.ReactNode;
 }
-export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
-export declare function MultiSelect({ value, open, onMultiValueChange, size, label, disabled, renderValue, renderValues, includeFocusOutline, containerClassName, className, children, error }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
 export interface MultiSelectItemProps {
     value: string;
     children?: React.ReactNode;

package/dist/components/Popover.d.ts

@@ -17,5 +17,6 @@ export interface PopoverProps {
     enabled?: boolean;
     modal?: boolean;
     className?: string;
+    portalContainer?: HTMLElement | null;
 }
-export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, className }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, portalContainer, className }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/RadioGroup.d.ts

@@ -22,6 +22,7 @@ export interface RadioGroupItemProps {
     checked?: boolean;
     required?: boolean;
     className?: string;
+    disabled?: boolean;
 }
 declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
 export { RadioGroup, RadioGroupItem };

package/dist/components/Select.d.ts

@@ -1,32 +1,28 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 export type SelectProps = {
     open?: boolean;
     name?: string;
     id?: string;
     onOpenChange?: (open: boolean) => void;
-    value?: string | string[];
+    value?: string;
     className?: string;
     inputClassName?: string;
-    onChange?: React.EventHandler<React.ChangeEvent<HTMLSelectElement>>;
+    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
     onValueChange?: (updatedValue: string) => void;
-    onMultiValueChange?: (updatedValue: string[]) => void;
     placeholder?: React.ReactNode;
-    renderValue?: (value: string, index: number) => React.ReactNode;
-    renderValues?: (values: string[]) => React.ReactNode;
+    renderValue?: (value: string) => React.ReactNode;
     size?: "small" | "medium";
     label?: React.ReactNode | string;
     disabled?: boolean;
     error?: boolean;
     position?: "item-aligned" | "popper";
     endAdornment?: React.ReactNode;
-    multiple?: boolean;
     inputRef?: React.RefObject<HTMLButtonElement>;
     padding?: boolean;
-    includeFocusOutline?: boolean;
     invisible?: boolean;
     children?: React.ReactNode;
 };
-export declare function Select({ inputRef, open, name, id, onOpenChange, value, onChange, onValueChange, onMultiValueChange, className, inputClassName, placeholder, renderValue, renderValues, label, size, includeFocusOutline, error, disabled, padding, position, endAdornment, multiple, invisible, children, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
 export type SelectItemProps = {
     value: string;
     children?: React.ReactNode;

package/dist/components/Separator.d.ts

@@ -1,4 +1,5 @@
-export declare function Separator({ orientation, decorative }: {
+export declare function Separator({ orientation, decorative, className }: {
     orientation: "horizontal" | "vertical";
     decorative?: boolean;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sheet.d.ts

@@ -2,9 +2,13 @@ import React from "react";
 interface SheetProps {
     children: React.ReactNode;
     open: boolean;
+    title?: string;
     side?: "top" | "bottom" | "left" | "right";
+    darkBackground?: boolean;
     transparent?: boolean;
     onOpenChange?: (open: boolean) => void;
+    className?: string;
+    overlayClassName?: string;
 }
 export declare const Sheet: React.FC<SheetProps>;
 export {};

package/dist/components/Table.d.ts

@@ -3,25 +3,25 @@ export type TableProps = {
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-};
-export declare const Table: ({ children, className, style }: TableProps) => import("react/jsx-runtime").JSX.Element;
+} & React.TableHTMLAttributes<HTMLTableElement>;
+export declare const Table: ({ children, className, style, ...rest }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export type TableBodyProps = {
     children?: React.ReactNode;
     className?: string;
-};
-export declare const TableBody: ({ children, className }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+} & React.HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableBody: ({ children, className, ...rest }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
 export type TableHeaderProps = {
     children?: React.ReactNode;
     className?: string;
-};
-export declare const TableHeader: ({ children, className }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+} & React.HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableHeader: ({ children, className, ...rest }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export type TableRowProps = {
     children?: React.ReactNode;
     className?: string;
     onClick?: React.MouseEventHandler<any>;
     style?: React.CSSProperties;
-};
-export declare const TableRow: ({ children, className, onClick, style }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+} & React.HTMLAttributes<HTMLTableRowElement>;
+export declare const TableRow: ({ children, className, onClick, style, ...rest }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
 export type TableCellProps = {
     children?: React.ReactNode;
     header?: boolean;
@@ -30,5 +30,5 @@ export type TableCellProps = {
     style?: React.CSSProperties;
     align?: "left" | "center" | "right";
     colspan?: number;
-};
-export declare const TableCell: ({ children, header, scope, align, className, style, colspan }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+} & React.HTMLAttributes<HTMLTableCellElement>;
+export declare const TableCell: ({ children, header, scope, align, className, style, colspan, ...rest }: TableCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextareaAutosize.d.ts

@@ -3,41 +3,8 @@ type State = {
     outerHeightStyle: number;
     overflow?: boolean | undefined;
 };
-export declare const TextareaAutosize: React.FC<Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
-    className?: string | undefined;
-    shadowClassName?: string | undefined;
-    /**
-     * Maximum number of rows to display.
-     */
-    maxRows?: string | number | undefined;
-    /**
-     * Minimum number of rows to display.
-     * @default 1
-     */
-    minRows?: string | number | undefined;
-    /**
-     * @ignore
-     */
-    onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
-    /**
-     * @ignore
-     */
-    placeholder?: string | undefined;
-    /**
-     * @ignore
-     */
-    style?: object | undefined;
-    /**
-     * @ignore
-     */
-    value?: string | number | string[] | undefined;
-    sizeRef?: React.RefObject<HTMLDivElement> | undefined;
-    onScroll?: ((event: React.UIEvent<HTMLTextAreaElement>) => void) | undefined;
-    onResize?: ((state: State) => void) | undefined;
-    autoFocus?: boolean | undefined;
-    ignoreBoxSizing?: boolean | undefined;
-} & {
-    ref?: React.ForwardedRef<Element> | undefined;
+export declare const TextareaAutosize: React.FC<TextareaAutosizeProps & {
+    ref?: React.ForwardedRef<Element>;
 }>;
 export type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
     className?: string;

package/dist/components/Tooltip.d.ts

@@ -1,15 +1,19 @@
 import React from "react";
 export type TooltipProps = {
     open?: boolean;
+    defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
     sideOffset?: number;
     title?: string | React.ReactNode;
     delayDuration?: number;
-    className?: string;
+    asChild?: boolean;
     tooltipClassName?: string;
+    tooltipStyle?: React.CSSProperties;
     children: React.ReactNode;
+    className?: string;
+    container?: HTMLElement;
     style?: React.CSSProperties;
 };
-export declare const Tooltip: ({ open, side, delayDuration, sideOffset, align, onOpenChange, title, className, style, tooltipClassName, children }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ open, defaultOpen, side, delayDuration, sideOffset, align, onOpenChange, title, tooltipClassName, tooltipStyle, children, asChild, container, className, style }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/Icon.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import "@material-design-icons/font/filled.css";
+import 'material-icons/iconfont/filled.css';
 export type IconColor = "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning";
 export type IconProps = {
     size?: "smallest" | "small" | "medium" | "large" | number;

package/dist/index.css

@@ -0,0 +1,77 @@
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+.typography-h1 {
+    @apply text-6xl font-headers font-light;
+}
+
+.typography-h2 {
+    @apply text-5xl font-headers font-light;
+}
+
+.typography-h3 {
+    @apply text-4xl font-headers font-normal;
+}
+
+.typography-h4 {
+    @apply text-3xl font-headers font-normal;
+}
+
+.typography-h5 {
+    @apply text-2xl font-headers font-normal;
+}
+
+.typography-h6 {
+    @apply text-xl font-headers font-medium;
+}
+
+.typography-subtitle1 {
+    @apply text-lg font-headers font-medium;
+}
+
+.typography-subtitle2 {
+    @apply text-base font-headers font-medium;
+}
+
+.typography-body1 {
+}
+
+.typography-body2 {
+    @apply text-sm;
+}
+
+.typography-caption {
+    @apply text-xs;
+}
+
+.typography-label {
+    @apply text-sm font-medium;
+}
+
+.typography-inherit {
+    @apply text-inherit;
+}
+
+.typography-button {
+    @apply text-sm font-medium;
+}
+
+
+:focus-visible {
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent
+}
+
+a {
+    @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
+}
+
+body {
+    @apply w-full min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center;
+}