@cube-dev/ui-kit 0.1.5 → 0.2.0

package/dist/cjs/styles/color.d.ts

@@ -1,8 +1,6 @@
 export declare function colorStyle({ color }: {
     color: any;
-}): "" | {
-    color: any;
-};
+}): any[] | "";
 export declare namespace colorStyle {
     var __lookupStyles: string[];
 }

package/dist/cjs/styles/list.d.ts

@@ -1,9 +1,9 @@
-export declare const BASE_STYLES: readonly ["display", "size", "font"];
+export declare const BASE_STYLES: readonly ["display", "size", "font", "preset"];
 export declare const POSITION_STYLES: readonly ["gridArea", "flexGrow", "flexShrink", "order", "gridColumn", "gridRow", "placeSelf", "zIndex", "margin"];
-export declare const BLOCK_STYLES: readonly ["reset", "padding", "shadow", "border", "radius", "opacity", "overflow", "styledScrollbar", "hide", "outline"];
+export declare const BLOCK_STYLES: readonly ["reset", "padding", "shadow", "border", "radius", "opacity", "overflow", "styledScrollbar", "hide", "outline", "textAlign"];
 export declare const COLOR_STYLES: readonly ["color", "fill"];
-export declare const TEXT_STYLES: readonly ["textAlign", "textTransform", "fontWeight", "fontStyle"];
+export declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
 export declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis"];
 export declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "gap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-export declare const CONTAINER_STYLES: readonly ["display", "size", "font", "color", "fill", "width", "height", "flexBasis", "gridArea", "flexGrow", "flexShrink", "order", "gridColumn", "gridRow", "placeSelf", "zIndex", "margin", "reset", "padding", "shadow", "border", "radius", "opacity", "overflow", "styledScrollbar", "hide", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "gap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const CONTAINER_STYLES: readonly ["display", "size", "font", "preset", "color", "fill", "width", "height", "flexBasis", "gridArea", "flexGrow", "flexShrink", "order", "gridColumn", "gridRow", "placeSelf", "zIndex", "margin", "reset", "padding", "shadow", "border", "radius", "opacity", "overflow", "styledScrollbar", "hide", "outline", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "gap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
 export declare const OUTER_STYLES: readonly ["gridArea", "flexGrow", "flexShrink", "order", "gridColumn", "gridRow", "placeSelf", "zIndex", "margin", "width", "height", "flexBasis"];

package/dist/cjs/styles/preset.d.ts

@@ -0,0 +1,17 @@
+export declare function presetStyle({ preset }: {
+    preset: any;
+}): "" | {
+    'font-size': any;
+    'line-height': any;
+    'letter-spacing': any;
+    'font-weight': any;
+    'text-transform': any;
+    '--font-size': any;
+    '--line-height': any;
+    '--letter-spacing': any;
+    '--font-weight': any;
+    '--text-transform': any;
+};
+export declare namespace presetStyle {
+    var __lookupStyles: string[];
+}

package/dist/cjs/styles/size.d.ts

@@ -4,6 +4,9 @@ export declare function sizeStyle({ size }: {
     'font-size': any;
     'line-height': any;
     'letter-spacing': any;
+    '--font-size': any;
+    '--line-height': any;
+    '--letter-spacing': any;
 };
 export declare namespace sizeStyle {
     var __lookupStyles: string[];

package/dist/cjs/styles/types.d.ts

@@ -92,6 +92,10 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * Syntax: <value> 'inset'?
      */
     outline?: CSSProperties['fontFamily'] | boolean;
+    /**
+     * The preset style sets the base text settings according to the names preset. Affected styles: `font-size`, `line-height`, `letter-spacing`, `font-weight` and `text-transform`.
+     */
+    preset?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h5s' | 'h5m' | 'h6' | 't1' | 't2' | 't3' | 't4' | 't4m' | 'p1' | 'p2' | 'p3' | 'p4' | 'tag' | 'default' | string;
 }
 export declare type Styles = {
     [key in keyof StylesInterface]?: ResponsiveStyleValue<StylesInterface[key]>;

package/dist/cjs/utils/react/Slots.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { Props } from '../../components/types';
-export declare function useSlotProps(props: Props, defaultSlot: any): Props;
+export declare function useSlotProps(props: Record<string, any>, defaultSlot: any): Record<string, any>;
 export declare function SlotProvider(props: any): JSX.Element;
 export declare function ClearSlots(props: any): JSX.Element;

package/dist/mjs/components/actions/Action.d.ts

@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react';
-import { BaseProps, ContainerStyleProps, TagNameProps, TextStyleProps } from '../types';
+import { BaseProps, BaseStyleProps, ContainerStyleProps, TagNameProps, TextStyleProps } from '../types';
 import { AriaButtonProps } from '@react-types/button';
-export interface CubeActionProps extends BaseProps, TagNameProps, ContainerStyleProps, TextStyleProps, Omit<AriaButtonProps, 'type'> {
+export interface CubeActionProps extends BaseProps, TagNameProps, BaseStyleProps, ContainerStyleProps, TextStyleProps, Omit<AriaButtonProps, 'type'> {
     to?: string;
     label?: string;
     skipWarnings?: boolean;

package/dist/mjs/components/content/Tag/Tag.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import THEMES from '../../../data/themes';
+import { BaseProps, ContainerStyleProps } from '../../types';
+export interface CubeTagProps extends BaseProps, ContainerStyleProps {
+    type?: keyof typeof THEMES;
+    isClosable?: boolean;
+    onClose?: () => void;
+}
+declare const _Tag: import("react").ForwardRefExoticComponent<CubeTagProps & import("react").RefAttributes<unknown>>;
+export { _Tag as Tag };

package/dist/mjs/components/content/Text.d.ts

@@ -18,7 +18,7 @@ export interface CubeTextProps extends BaseProps, TagNameProps, TextStyleProps,
      * Whether the text has italic style
      */
     italic?: ResponsiveStyleValue<CSSProperties['fontStyle']>;
-    weight?: ResponsiveStyleValue<CSSProperties['fontWeight']>;
+    weight?: string | number;
     align?: ResponsiveStyleValue<CSSProperties['textAlign']>;
     transform?: ResponsiveStyleValue<CSSProperties['textTransform']>;
 }

package/dist/mjs/components/content/Title.d.ts

@@ -1,12 +1,9 @@
 /// <reference types="react" />
 import { CubeTextProps } from './Text';
-import { ResponsiveStyleValue } from '../../utils/styles';
-import { BlockStyleProps, PositionStyleProps, TagNameProps } from '../types';
-export interface CubeTitleProps extends CubeTextProps, TagNameProps, BlockStyleProps, PositionStyleProps {
+import { BaseProps, BlockStyleProps, PositionStyleProps, TagNameProps } from '../types';
+export interface CubeTitleProps extends BaseProps, CubeTextProps, TagNameProps, BlockStyleProps, PositionStyleProps {
     /** The level of the heading **/
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** The size style for the heading **/
-    size?: ResponsiveStyleValue<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | string>;
 }
 declare const Title: import("react").ForwardRefExoticComponent<CubeTitleProps & import("react").RefAttributes<unknown>> & {
     Danger: import("react").ForwardRefExoticComponent<CubeTitleProps & import("react").RefAttributes<unknown>>;

package/dist/mjs/components/types.d.ts

@@ -1,4 +1,4 @@
-import { AllHTMLAttributes, CSSProperties, JSXElementConstructor, ReactElement, ReactNodeArray, ReactPortal } from 'react';
+import { AllHTMLAttributes, CSSProperties } from 'react';
 import { Styles } from '../styles/types';
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from '../styles/list';
 export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
@@ -34,11 +34,10 @@ export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLEle
         [key: string]: string | number | null;
     });
 }
-export interface BaseProps extends BasePropsWithoutChildren {
-    children?: ReactElement<any, string | JSXElementConstructor<any>> | string | number | {} | ReactNodeArray | ReactPortal | boolean | null | undefined;
+export interface BaseProps extends BasePropsWithoutChildren, Pick<AllHTMLAttributes<HTMLElementTagNameMap['div']>, 'children'> {
 }
 export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'> extends BaseProps, Omit<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'style'> {
-    as?: K;
+    as?: string;
 }
 export declare type BaseStyleProps = Pick<Styles, typeof BASE_STYLES[number]>;
 export declare type PositionStyleProps = Pick<Styles, typeof POSITION_STYLES[number]>;

package/dist/mjs/css-properties.d.ts

@@ -17,6 +17,7 @@ declare const PROPS: {
     'minor-color': string;
     'success-bg-color': string;
     'note-bg-color': string;
+    'note-text-color': string;
     'danger-bg-color': string;
     'danger-bg-hover-color': string;
     'primary-1': string;
@@ -64,15 +65,76 @@ declare const PROPS: {
     'h1-font-size': string;
     'h1-line-height': string;
     'h1-letter-spacing': string;
+    'h1-font-weight': string;
     'h2-font-size': string;
     'h2-line-height': string;
+    'h2-letter-spacing': string;
+    'h2-font-weight': string;
     'h3-font-size': string;
     'h3-line-height': string;
+    'h3-letter-spacing': string;
+    'h3-font-weight': string;
     'h4-font-size': string;
     'h4-line-height': string;
+    'h4-letter-spacing': string;
+    'h4-font-weight': string;
     'h5-font-size': string;
     'h5-line-height': string;
+    'h5-letter-spacing': string;
+    'h5-font-weight': string;
+    'h5s-font-size': string;
+    'h5s-line-height': string;
+    'h5s-letter-spacing': string;
+    'h5s-font-weight': string;
+    'h5m-font-size': string;
+    'h5m-line-height': string;
+    'h5m-letter-spacing': string;
+    'h5m-font-weight': string;
     'h6-font-size': string;
     'h6-line-height': string;
+    't1-font-size': string;
+    't1-line-height': string;
+    't1-letter-spacing': string;
+    't1-font-weight': string;
+    't2-font-size': string;
+    't2-line-height': string;
+    't2-letter-spacing': string;
+    't2-font-weight': string;
+    't3-font-size': string;
+    't3-line-height': string;
+    't3-letter-spacing': string;
+    't3-font-weight': string;
+    't4-font-size': string;
+    't4-line-height': string;
+    't4-letter-spacing': string;
+    't4-font-weight': string;
+    't4m-font-size': string;
+    't4m-line-height': string;
+    't4m-letter-spacing': string;
+    't4m-font-weight': string;
+    'p1-font-size': string;
+    'p1-line-height': string;
+    'p1-letter-spacing': string;
+    'p1-font-weight': string;
+    'p2-font-size': string;
+    'p2-line-height': string;
+    'p2-letter-spacing': string;
+    'p2-font-weight': string;
+    'p3-font-size': string;
+    'p3-line-height': string;
+    'p3-letter-spacing': string;
+    'p3-font-weight': string;
+    'p4-font-size': string;
+    'p4-line-height': string;
+    'p4-letter-spacing': string;
+    'p4-font-weight': string;
+    'tag-font-size': string;
+    'tag-line-height': string;
+    'tag-letter-spacing': string;
+    'tag-font-weight': string;
+    'default-font-size': string;
+    'default-line-height': string;
+    'default-letter-spacing': string;
+    'default-font-weight': string;
 };
 export default PROPS;

package/dist/mjs/data/themes.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
     };
     readonly note: {
         readonly fill: "#note-bg";
-        readonly color: "#note";
+        readonly color: "#note-text";
         readonly border: "#note.40";
     };
     readonly disabled: {

package/dist/mjs/index.d.ts

@@ -64,6 +64,8 @@ export type { CubeSkeletonProps } from './components/content/Skeleton/Skeleton';
 export { CloudLogo } from './components/other/CloudLogo/CloudLogo';
 export { Badge } from './components/content/Badge/Badge';
 export type { CubeBadgeProps } from './components/content/Badge/Badge';
+export { Tag } from './components/content/Tag/Tag';
+export type { CubeTagProps } from './components/content/Tag/Tag';
 export { SearchInput } from './components/forms/SearchInput/SearchInput';
 export type { CubeSearchInputProps } from './components/forms/SearchInput/SearchInput';
 export { Submit } from './components/actions/Button/Submit';