@cube-dev/ui-kit 0.0.0-canary-1e090a8 → 0.0.0-canary-2397690

package/types/components/content/Item/Item.d.ts

@@ -1,11 +1,35 @@
 import { ReactNode, RefObject } from 'react';
 import { OverlayProps } from 'react-aria';
-import { ItemVariant } from '../../../data/item-themes';
-import { BaseProps, ContainerStyleProps, Props, Styles } from '../../../tasty';
+import { BaseProps, ContainerStyleProps, Mods, Props, Styles } from '../../../tasty';
+import { DynamicIcon } from '../../../utils/react';
 import { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';
+/** Known modifiers for Item component */
+export type ItemMods = Mods<{
+    'has-icon'?: boolean;
+    'has-start-content'?: boolean;
+    'has-end-content'?: boolean;
+    'has-right-icon'?: boolean;
+    'has-label'?: boolean;
+    'has-prefix'?: boolean;
+    'has-suffix'?: boolean;
+    'has-description'?: boolean;
+    'has-actions'?: boolean;
+    'has-actions-content'?: boolean;
+    'show-actions-on-hover'?: boolean;
+    checkbox?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    loading?: boolean;
+    card?: boolean;
+    size?: string;
+    description?: string;
+    type?: string;
+    theme?: string;
+    shape?: string;
+}>;
 export interface CubeItemProps extends BaseProps, ContainerStyleProps {
-    icon?: ReactNode | 'checkbox';
-    rightIcon?: ReactNode;
+    icon?: DynamicIcon<ItemMods> | 'checkbox';
+    rightIcon?: DynamicIcon<ItemMods>;
     prefix?: ReactNode;
     suffix?: ReactNode;
     description?: ReactNode;
@@ -32,9 +56,8 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      */
     disableActionsFocus?: boolean;
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number | (string & {});
-    type?: 'item' | 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link' | (string & {});
-    theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
-    variant?: ItemVariant;
+    type?: 'item' | 'title' | 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link' | 'alert' | (string & {});
+    theme?: 'default' | 'danger' | 'success' | 'special' | 'note' | (string & {});
     /** Keyboard shortcut that triggers the element when pressed */
     hotkeys?: string;
     /**
@@ -70,10 +93,6 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
      * When true, applies card styling with increased border radius.
      */
     isCard?: boolean;
-    /**
-     * When true, adds button modifier to the component styling.
-     */
-    isButton?: boolean;
     /**
      * Shape of the item's border radius.
      * - `card` - Card shape with larger border radius (`1cr`)

package/types/components/content/Layout/Layout.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps, BlockStyleProps, ColorStyleProps, FlowStyleProps, OuterStyleProps, Styles } from '../../../tasty';
 export interface CubeLayoutProps extends BaseProps, OuterStyleProps, BlockStyleProps, ColorStyleProps, FlowStyleProps {
     /** Switch to grid display mode */
@@ -16,6 +16,10 @@ export interface CubeLayoutProps extends BaseProps, OuterStyleProps, BlockStyleP
     /** Styles for wrapper and Inner sub-element */
     styles?: Styles;
     children?: ReactNode;
+    /** Ref for the inner content element */
+    innerRef?: ForwardedRef<HTMLDivElement>;
+    /** Props to spread on the Inner sub-element */
+    innerProps?: HTMLAttributes<HTMLDivElement>;
     /**
      * @internal Force show dev warning even in production (for storybook testing)
      */

package/types/components/content/Layout/LayoutContainer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 export interface CubeLayoutContainerProps extends BaseProps, ContainerStyleProps {
     children?: ReactNode;
@@ -6,6 +6,10 @@ export interface CubeLayoutContainerProps extends BaseProps, ContainerStyleProps
     styles?: Styles;
     /** Custom styles for the inner element */
     innerStyles?: Styles;
+    /** Ref for the inner content element */
+    innerRef?: ForwardedRef<HTMLDivElement>;
+    /** Props to spread on the Inner sub-element */
+    innerProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const _LayoutContainer: import("react").ForwardRefExoticComponent<CubeLayoutContainerProps & import("react").RefAttributes<HTMLDivElement>>;
 export { _LayoutContainer as LayoutContainer };

package/types/components/content/Layout/LayoutContent.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps, Mods } from '../../../tasty';
 export type ScrollbarType = 'default' | 'thin' | 'tiny' | 'none';
 export interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {
@@ -7,6 +7,10 @@ export interface CubeLayoutContentProps extends BaseProps, ContainerStyleProps {
     children?: ReactNode;
     /** Additional modifiers to apply */
     mods?: Mods;
+    /** Ref for the inner content element */
+    innerRef?: ForwardedRef<HTMLDivElement>;
+    /** Props to spread on the Inner sub-element */
+    innerProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const _LayoutContent: import("react").ForwardRefExoticComponent<CubeLayoutContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export { _LayoutContent as LayoutContent };

package/types/components/content/Layout/LayoutPane.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { ScrollbarType } from './LayoutContent';
 export type ResizeEdge = 'right' | 'bottom';
@@ -22,6 +22,10 @@ export interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {
     /** Custom styles */
     styles?: Styles;
     children?: ReactNode;
+    /** Ref for the inner content element */
+    innerRef?: ForwardedRef<HTMLDivElement>;
+    /** Props to spread on the Inner sub-element */
+    innerProps?: HTMLAttributes<HTMLDivElement>;
 }
 declare const _LayoutPane: import("react").ForwardRefExoticComponent<CubeLayoutPaneProps & import("react").RefAttributes<HTMLDivElement>>;
 export { _LayoutPane as LayoutPane };

package/types/components/content/Layout/LayoutPanelHeader.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { BaseProps, ContainerStyleProps } from '../../../tasty';
-export interface CubeLayoutPanelHeaderProps extends BaseProps, ContainerStyleProps {
+import { CubeItemProps } from '../Item/Item';
+export interface CubeLayoutPanelHeaderProps extends Omit<BaseProps, 'theme'>, ContainerStyleProps, CubeItemProps {
     /** Panel title */
     title?: ReactNode;
     /** Title heading level (affects semantics, not visual) */
@@ -9,9 +10,6 @@ export interface CubeLayoutPanelHeaderProps extends BaseProps, ContainerStylePro
     isClosable?: boolean;
     /** Close button click handler */
     onClose?: () => void;
-    /** Custom actions to display (overrides default close button) */
-    actions?: ReactNode;
-    children?: ReactNode;
 }
 declare const _LayoutPanelHeader: import("react").ForwardRefExoticComponent<CubeLayoutPanelHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
 export { _LayoutPanelHeader as LayoutPanelHeader };

package/types/components/content/List/SectionHeading.d.ts

@@ -61,14 +61,16 @@ export declare const SectionHeading: import("react").ComponentType<{
     justify?: import("../../../tasty").ResponsiveStyleValue<"stretch" | "initial" | (string & {}) | "left" | "right" | "-moz-initial" | "inherit" | "revert" | "revert-layer" | "unset" | "normal" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     block?: boolean | undefined;
     style?: import("react").CSSProperties | (import("react").CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     open?: boolean | undefined;
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
-    mods?: import("../../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -95,7 +97,8 @@ export declare const SectionHeading: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -213,7 +216,7 @@ export declare const SectionHeading: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -229,7 +232,7 @@ export declare const SectionHeading: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/types/components/content/Text.d.ts

@@ -49,7 +49,7 @@ declare const MinorText: import("react").ComponentType<{
     ellipsis?: boolean | undefined;
     block?: boolean | undefined;
     style?: CSSProperties | (CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     italic?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
@@ -58,7 +58,9 @@ declare const MinorText: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../tasty").Styles | undefined;
-    mods?: import("../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -85,7 +87,8 @@ declare const MinorText: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -203,7 +206,7 @@ declare const MinorText: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -219,7 +222,7 @@ declare const MinorText: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -456,7 +459,7 @@ declare const DangerText: import("react").ComponentType<{
     ellipsis?: boolean | undefined;
     block?: boolean | undefined;
     style?: CSSProperties | (CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     italic?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
@@ -465,7 +468,9 @@ declare const DangerText: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../tasty").Styles | undefined;
-    mods?: import("../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -492,7 +497,8 @@ declare const DangerText: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -610,7 +616,7 @@ declare const DangerText: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -626,7 +632,7 @@ declare const DangerText: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -863,7 +869,7 @@ declare const SuccessText: import("react").ComponentType<{
     ellipsis?: boolean | undefined;
     block?: boolean | undefined;
     style?: CSSProperties | (CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     italic?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
@@ -872,7 +878,9 @@ declare const SuccessText: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../tasty").Styles | undefined;
-    mods?: import("../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -899,7 +907,8 @@ declare const SuccessText: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -1017,7 +1026,7 @@ declare const SuccessText: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -1033,7 +1042,7 @@ declare const SuccessText: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -1270,7 +1279,7 @@ declare const StrongText: import("react").ComponentType<{
     ellipsis?: boolean | undefined;
     block?: boolean | undefined;
     style?: CSSProperties | (CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     italic?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
@@ -1279,7 +1288,9 @@ declare const StrongText: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../tasty").Styles | undefined;
-    mods?: import("../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -1306,7 +1317,8 @@ declare const StrongText: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -1424,7 +1436,7 @@ declare const StrongText: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -1440,7 +1452,7 @@ declare const StrongText: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -1677,7 +1689,7 @@ declare const EmphasisText: import("react").ComponentType<{
     ellipsis?: boolean | undefined;
     block?: boolean | undefined;
     style?: CSSProperties | (CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     italic?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
@@ -1686,7 +1698,9 @@ declare const EmphasisText: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../tasty").Styles | undefined;
-    mods?: import("../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -1713,7 +1727,8 @@ declare const EmphasisText: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -1831,7 +1846,7 @@ declare const EmphasisText: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -1847,7 +1862,7 @@ declare const EmphasisText: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -2084,7 +2099,7 @@ declare const PlaceholderText: import("react").ComponentType<{
     ellipsis?: boolean | undefined;
     block?: boolean | undefined;
     style?: CSSProperties | (CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     italic?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
@@ -2093,7 +2108,9 @@ declare const PlaceholderText: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../tasty").Styles | undefined;
-    mods?: import("../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -2120,7 +2137,8 @@ declare const PlaceholderText: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -2238,7 +2256,7 @@ declare const PlaceholderText: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -2254,7 +2272,7 @@ declare const PlaceholderText: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -2491,7 +2509,7 @@ declare const HighlightText: import("react").ComponentType<{
     ellipsis?: boolean | undefined;
     block?: boolean | undefined;
     style?: CSSProperties | (CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     italic?: ResponsiveStyleValue<import("csstype").Property.FontStyle | undefined>;
@@ -2500,7 +2518,9 @@ declare const HighlightText: import("react").ComponentType<{
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../tasty").Styles | undefined;
-    mods?: import("../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -2527,7 +2547,8 @@ declare const HighlightText: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -2645,7 +2666,7 @@ declare const HighlightText: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -2661,7 +2682,7 @@ declare const HighlightText: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/types/components/fields/DatePicker/DatePickerElement.d.ts

@@ -61,14 +61,16 @@ export declare const DatePickerElement: import("react").ComponentType<{
     justify?: import("../../../tasty").ResponsiveStyleValue<"stretch" | "initial" | (string & {}) | "left" | "right" | "-moz-initial" | "inherit" | "revert" | "revert-layer" | "unset" | "normal" | "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start" | "baseline" | "space-around" | "space-between" | "space-evenly" | "legacy" | undefined>;
     block?: boolean | undefined;
     style?: import("react").CSSProperties | (import("react").CSSProperties & {
-        [key: string]: string | number | null;
+        [key: string]: string | number | null | undefined;
     }) | undefined;
     inline?: boolean | undefined;
     open?: boolean | undefined;
     element?: `A${string}` | `B${string}` | `C${string}` | `D${string}` | `E${string}` | `F${string}` | `G${string}` | `H${string}` | `I${string}` | `J${string}` | `K${string}` | `L${string}` | `M${string}` | `N${string}` | `O${string}` | `P${string}` | `Q${string}` | `R${string}` | `S${string}` | `T${string}` | `U${string}` | `V${string}` | `W${string}` | `X${string}` | `Y${string}` | `Z${string}` | undefined;
     multiple?: boolean | undefined;
     styles?: import("../../../tasty").Styles | undefined;
-    mods?: import("../../../tasty").Mods | undefined;
+    mods?: {
+        [key: string]: import("../../../tasty").ModValue;
+    } | undefined;
     min?: string | number | undefined;
     max?: string | number | undefined;
     css?: string | undefined;
@@ -95,7 +97,8 @@ export declare const DatePickerElement: import("react").ComponentType<{
     breakpoints?: number[] | undefined;
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
-    theme?: "danger" | "success" | (string & {}) | "default" | "special" | undefined;
+    theme?: "danger" | "success" | "note" | (string & {}) | "default" | "special" | undefined;
+    tokens?: import("../../../tasty").Tokens | undefined;
     accept?: string | undefined;
     acceptCharset?: string | undefined;
     action?: string | ((formData: FormData) => void | Promise<void>) | undefined;
@@ -213,7 +216,7 @@ export declare const DatePickerElement: import("react").ComponentType<{
     popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
     popoverTarget?: string | undefined;
     inert?: boolean | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "text" | "none" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -229,7 +232,7 @@ export declare const DatePickerElement: import("react").ComponentType<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "page" | "false" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;