@cube-dev/ui-kit 0.97.0 → 0.98.0

package/types/components/form/FieldWrapper/types.d.ts

@@ -3,7 +3,7 @@ import { LabelPosition, NecessityIndicator, ValidationState } from '../../../sha
 import { Props, Styles } from '../../../tasty/index';
 import { CubeLabelProps } from '../Label';
 export type CubeFieldWrapperProps = {
-    as?: string;
+    as?: keyof HTMLElementTagNameMap;
     validationState?: ValidationState;
     styles?: Styles;
     /** Whether the input is required */

package/types/components/helpers/DisplayTransition/DisplayTransition.d.ts

@@ -17,6 +17,8 @@ export type DisplayTransitionProps = {
     animateOnMount?: boolean;
     /** Respect prefers-reduced-motion by collapsing duration to 0. */
     respectReducedMotion?: boolean;
+    /** Preserve children content during exit transition. When true, uses stored children from when content was visible. @default true */
+    preserveContent?: boolean;
     /** Render-prop gets { phase, isShown, ref }. Bind ref to the transitioned element for native event detection. */
     children: (props: {
         phase: ReportedPhase;
@@ -24,5 +26,5 @@ export type DisplayTransitionProps = {
         ref: RefCallback<HTMLElement>;
     }) => ReactNode;
 };
-export declare function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted, animateOnMount, respectReducedMotion, children, }: DisplayTransitionProps): ReactNode;
+export declare function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted, animateOnMount, respectReducedMotion, preserveContent, children, }: DisplayTransitionProps): ReactNode;
 export {};

package/types/components/helpers/DisplayTransition/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DisplayTransition';
+export type { DisplayTransitionProps } from './DisplayTransition';

package/types/components/helpers/IconSwitch/IconSwitch.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../../../tasty';
+export interface CubeIconSwitchProps extends BaseProps {
+    /** The icon to display */
+    children: ReactNode;
+    /** Override the default key derivation for detecting icon changes */
+    contentKey?: string | number;
+    /** When true, renders without wrapper element, expecting parent to provide grid context */
+    noWrapper?: boolean;
+}
+/**
+ * A component that cross-fades between icons when children change.
+ * Useful for animated icon transitions in buttons, items, etc.
+ *
+ * When `contentKey` changes, a transition is triggered.
+ * When only `children` changes (same `contentKey`), content is updated in-place
+ * without transition, allowing self-animating icons (like DirectionIcon) to work.
+ */
+export declare function IconSwitch(props: CubeIconSwitchProps): import("react/jsx-runtime").JSX.Element;
+export type { CubeIconSwitchProps as IconSwitchProps };

package/types/components/helpers/index.d.ts

@@ -1 +1,2 @@
 export * from './DisplayTransition/DisplayTransition';
+export * from './IconSwitch/IconSwitch';

package/types/data/item-themes.d.ts

@@ -29,4 +29,8 @@ export declare const SPECIAL_NEUTRAL_STYLES: Styles;
 export declare const SPECIAL_CLEAR_STYLES: Styles;
 export declare const SPECIAL_LINK_STYLES: Styles;
 export declare const SPECIAL_ITEM_STYLES: Styles;
-export type ItemVariant = 'default.primary' | 'default.secondary' | 'default.outline' | 'default.neutral' | 'default.clear' | 'default.link' | 'default.item' | 'danger.primary' | 'danger.secondary' | 'danger.outline' | 'danger.neutral' | 'danger.clear' | 'danger.link' | 'danger.item' | 'success.primary' | 'success.secondary' | 'success.outline' | 'success.neutral' | 'success.clear' | 'success.link' | 'success.item' | 'special.primary' | 'special.secondary' | 'special.outline' | 'special.neutral' | 'special.clear' | 'special.link' | 'special.item';
+export declare const DEFAULT_CARD_STYLES: Styles;
+export declare const SUCCESS_CARD_STYLES: Styles;
+export declare const DANGER_CARD_STYLES: Styles;
+export declare const NOTE_CARD_STYLES: Styles;
+export type ItemVariant = 'default.primary' | 'default.secondary' | 'default.outline' | 'default.neutral' | 'default.clear' | 'default.link' | 'default.item' | 'default.card' | 'danger.primary' | 'danger.secondary' | 'danger.outline' | 'danger.neutral' | 'danger.clear' | 'danger.link' | 'danger.item' | 'danger.card' | 'success.primary' | 'success.secondary' | 'success.outline' | 'success.neutral' | 'success.clear' | 'success.link' | 'success.item' | 'success.card' | 'special.primary' | 'special.secondary' | 'special.outline' | 'special.neutral' | 'special.clear' | 'special.link' | 'special.item' | 'note.card';

package/types/tasty/index.d.ts

@@ -11,8 +11,9 @@ export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
 export * from './utils/getDisplayName';
+export * from './utils/processTokens';
 export * from './injector';
 export * from './debug';
-export type { TastyProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
-export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, Mods, } from './types';
+export type { TastyProps, TastyElementOptions, TastyElementProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
+export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, Mods, ModValue, Tokens, TokenValue, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

package/types/tasty/styles/list.d.ts

@@ -1,12 +1,12 @@
-export declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace"];
+export declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition"];
 export declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position"];
 export declare const BLOCK_INNER_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign"];
-export declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "opacity", "outline"];
-export declare const BLOCK_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "opacity", "outline"];
+export declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "outline"];
+export declare const BLOCK_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline"];
 export declare const COLOR_STYLES: readonly ["color", "fill", "fade"];
 export declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
 export declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
 export declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "color", "fill", "fade", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "opacity", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-export declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "opacity", "outline"];
-export declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "color", "fill", "fade", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "outline"];
+export declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];