magneto365.ui 2.70.4 → 2.71.0

package/dist/cjs/types/components/UI/atoms/Typography/Typography.component.d.ts

@@ -3,8 +3,8 @@
  * Atom UI of typography. It includes titles, paragraphs, texts and links.
  */
 export declare const Typography: {
-    Link: import("react").FC<import("./children").ITypographyLink>;
-    Paragraph: import("react").FC<import("./children").TTypographyParagraph>;
-    Text: import("react").FC<import("./children").ITypographyText>;
-    Title: import("react").FC<import("./children").ITypographyTitle>;
+    Link: import("react").ForwardRefExoticComponent<import("./Typography.interface").ITypographyBase & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+    Paragraph: import("react").ForwardRefExoticComponent<import("./Typography.interface").ITypographyBase & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Text: import("react").ForwardRefExoticComponent<import("./Typography.interface").ITypographyBase & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Title: import("react").ForwardRefExoticComponent<import("./children").ITypographyTitle & import("react").RefAttributes<HTMLHeadingElement>>;
 };

package/dist/cjs/types/components/UI/atoms/Typography/Typography.interface.d.ts

@@ -1,15 +1,17 @@
 /// <reference types="react" />
+import { MagnetoUIColor, MagnetoUIText } from 'magneto-ui';
 export interface ITypographyBase extends Pick<React.HTMLAttributes<HTMLElement>, 'className' | 'style'> {
     /** If `true`, the text is rendered in a monospaced font like code. */
     code?: boolean;
     /**
-     * Text color. This is in beta and might change in the future.
+     * Text color.
      *
-     * @beta
      * @default "black"
-     * @example "gray" | "black" | "white" | "green" | "blue"
+     * @example "transparent" | "green-50" | "grey-200" | "red-100"
+     * @see MagnetoUIColor
+     * @inheritdoc
      */
-    color?: TTypographyFontColor;
+    color?: MagnetoUIColor;
     /** If `true`, the text is displayed with a strikethrough. */
     delete?: boolean;
     /** If `true`, the text is displayed in italics. */
@@ -21,21 +23,19 @@ export interface ITypographyBase extends Pick<React.HTMLAttributes<HTMLElement>,
     /**
      * Font size. When a number is provided, the unit is `px` and line height is calculated automatically adding 4px.
      *
-     * @default "md"
+     * @default "lg"
      * @example
-     * - `"xs"` → `10px`
-     * - `"sm"` → `12px`
-     * - `"md"` → `14px`
-     * - `"lg"` → `16px`
-     * - `"xl"` → `18px`
-     * - `"xl-2"` → `20px`
-     * - `"xl-3"` → `22px`
-     * - `"xl-4"` → `24px`
-     * - `"xl-5"` → `26px`
-     * - `"xl-6"` → `28px`
-     * - `"xl-7"` → `30px`
+     * - `"sm"` → `0.5rem`
+     * - `"md"` → `0.75rem`
+     * - `"lg"` → `1rem`
+     * - `"xl"` → `1.25rem`
+     * - `"2xl"` → `1.5rem`
+     * - `"3xl"` → `1.75rem`
+     * - `"4xl"` → `2rem`
+     * @see MagnetoUIText
+     * @inheritdoc
      */
-    size?: ITypographyFontSize | number;
+    size?: MagnetoUIText | number;
     /** If `true`, the text is displayed in bold. */
     strong?: boolean;
     /** If `true`, the text is underlined. */
@@ -63,20 +63,6 @@ export interface ITypographyEllipsis {
     /** Number of lines before applying ellipsis. */
     rows?: number;
 }
-export declare enum ETypographyFontSize {
-    XS = "xs",
-    SM = "sm",
-    MD = "md",
-    LG = "lg",
-    XL = "xl",
-    XL2 = "xl-2",
-    XL3 = "xl-3",
-    XL4 = "xl-4",
-    XL5 = "xl-5",
-    XL6 = "xl-6",
-    XL7 = "xl-7"
-}
-export declare type ITypographyFontSize = `${ETypographyFontSize}`;
 export declare enum ETypographyFontWeight {
     THIN = "thin",
     EXTRA_LIGHT = "extra-light",
@@ -89,11 +75,3 @@ export declare enum ETypographyFontWeight {
     BLACK = "black"
 }
 export declare type TTypographyFontWeight = `${ETypographyFontWeight}`;
-export declare enum ETypographyFontColor {
-    GRAY = "gray",
-    BLACK = "black",
-    WHITE = "white",
-    GREEN = "green",
-    BLUE = "blue"
-}
-export declare type TTypographyFontColor = `${ETypographyFontColor}`;

package/dist/cjs/types/components/UI/atoms/Typography/children/TypographyLink/TypographyLink.component.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
-import { ITypographyLink } from './TypographyLink.interface';
-export declare const TypographyLink: React.FC<ITypographyLink>;
+/**
+ * Atom UI child component of Typography
+ */
+export declare const TypographyLink: React.ForwardRefExoticComponent<import("../..").ITypographyBase & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/cjs/types/components/UI/atoms/Typography/children/TypographyParagraph/TypographyParagraph.component.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
-import { TTypographyParagraph } from './TypographyParagraph.interface';
-export declare const TypographyParagraph: React.FC<TTypographyParagraph>;
+/**
+ * Atom UI child component of Typography
+ */
+export declare const TypographyParagraph: React.ForwardRefExoticComponent<import("../..").ITypographyBase & React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/cjs/types/components/UI/atoms/Typography/children/TypographyText/TypographyText.component.d.ts

@@ -1,3 +1,5 @@
 import React from 'react';
-import { ITypographyText } from './TypographyText.interface';
-export declare const TypographyText: React.FC<ITypographyText>;
+/**
+ * Atom UI child component of Typography
+ */
+export declare const TypographyText: React.ForwardRefExoticComponent<import("../..").ITypographyBase & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;

package/dist/cjs/types/components/UI/atoms/Typography/children/TypographyTitle/TypographyTitle.component.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { ITypographyTitle } from './TypographyTitle.interface';
-export declare const TypographyTitle: React.FC<ITypographyTitle>;
+/**
+ * Atom UI child component of Typography
+ */
+export declare const TypographyTitle: React.ForwardRefExoticComponent<ITypographyTitle & React.RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/types/components/docs/DesignSystem/DesignSystem.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystem: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/DesignSystem.constant.d.ts

@@ -0,0 +1,3 @@
+export declare const flattenTokens: (obj: Record<string, any>, prefix?: string[]) => [string, string][];
+export declare const evaluateCalc: (value: string) => string;
+export declare const resolveValue: (input: string) => string;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemBorder/DesignSystemBorder.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemBorder: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemColor/DesignSystemColor.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemColor: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemGap/DesignSystemGap.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemGap: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemMargin/DesignSystemMargin.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemMargin: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemOpacity/DesignSystemOpacity.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemOpacity: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemPadding/DesignSystemPadding.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemPadding: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemRadius/DesignSystemRadius.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemRadius: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemScale/DesignSystemScale.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemScale: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemScreen/DesignSystemScreen.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemScreen: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemShadow/DesignSystemShadow.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemShadow: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemText/DesignSystemText.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemText: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/DesignSystemUtilityClass/DesignSystemUtilityClass.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DesignSystemUtilityClass: React.FC<{}>;

package/dist/cjs/types/components/docs/DesignSystem/children/index.d.ts

@@ -0,0 +1,12 @@
+export { DesignSystemBorder } from './DesignSystemBorder/DesignSystemBorder.component';
+export { DesignSystemColor } from './DesignSystemColor/DesignSystemColor.component';
+export { DesignSystemGap } from './DesignSystemGap/DesignSystemGap.component';
+export { DesignSystemMargin } from './DesignSystemMargin/DesignSystemMargin.component';
+export { DesignSystemOpacity } from './DesignSystemOpacity/DesignSystemOpacity.component';
+export { DesignSystemPadding } from './DesignSystemPadding/DesignSystemPadding.component';
+export { DesignSystemRadius } from './DesignSystemRadius/DesignSystemRadius.component';
+export { DesignSystemScale } from './DesignSystemScale/DesignSystemScale.component';
+export { DesignSystemScreen } from './DesignSystemScreen/DesignSystemScreen.component';
+export { DesignSystemShadow } from './DesignSystemShadow/DesignSystemShadow.component';
+export { DesignSystemText } from './DesignSystemText/DesignSystemText.component';
+export { DesignSystemUtilityClass } from './DesignSystemUtilityClass/DesignSystemUtilityClass.component';

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

@@ -6,3 +6,4 @@ export * from './components/UI/organism';
 export * from './components/UI/page';
 export * from './components/UI/template';
 export * from './components/hoc';
+export * from './shared/tokens';

package/dist/cjs/types/shared/tokens/index.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @description Border SCSS vars used to define border width consistently across components.
+ * @example ```scss
+ * .card {
+ *   border: $border-1 solid $color-grey-50;
+ * }
+ * ```
+ * @category visual
+ * @tags border, style, width, outline, visual
+ */
+export declare type MagnetoUIBorder = '1' | '2' | 'inherit' | 'min';
+/**
+ * @description Color SCC vars used to maintain brand and accessibility standards across the UI.
+ * @example ```scss
+ * .button {
+ *   background-color: $color-red-300;
+ *   color: $color-grey-50;
+ * }
+ * ```
+ * @category theme
+ * @tags color, theme, palette, branding, accessibility
+ */
+export declare type MagnetoUIColor = 'transparent' | 'inherit' | 'current' | 'blue-dark-50' | 'blue-dark-100' | 'blue-dark-200' | 'blue-dark-300' | 'blue-dark-400' | 'blue-dark-500' | 'blue-light-50' | 'blue-light-100' | 'blue-light-200' | 'blue-light-300' | 'blue-light-400' | 'blue-light-500' | 'green-50' | 'green-100' | 'green-200' | 'green-300' | 'green-400' | 'green-500' | 'green-600' | 'grey-50' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'grey-700' | 'grey-800' | 'grey-900' | 'red-50' | 'red-100' | 'red-200' | 'red-300' | 'yellow-50' | 'yellow-100' | 'yellow-200' | 'yellow-300';
+/**
+ * @description Spacing SCC vars for CSS `gap` properties. Useful in layout systems based on grid or flexbox.
+ * @example ```scss
+ * .container {
+ *   gap: $gap-md;
+ * }
+ * ```
+ * @category layout
+ * @tags spacing, gap, layout, grid, flexbox
+ */
+export declare type MagnetoUIGap = 'inherit' | 'min' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
+/**
+ * @description Spacing SCCS vars used for setting margin around elements for consistent layout spacing.
+ * @example ```scss
+ * .card {
+ *   margin: $margin-sm;
+ * }
+ * ```
+ * @category spacing
+ * @tags spacing, margin, layout, spacing-system
+ */
+export declare type MagnetoUIMargin = 'inherit' | 'none' | 'auto' | 'min' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
+/**
+ * @description Opacity SCC vars used to define transparency levels for elements and UI states.
+ * @example ```scss
+ * .overlay {
+ *   opacity: $opacity-70;
+ * }
+ * ```
+ * @category visual
+ * @tags opacity, transparency, visibility, visual
+ */
+export declare type MagnetoUIOpacity = '10' | '12' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | 'inherit' | 'min' | 'full';
+/**
+ * @description Spacing SCCS vars used for internal spacing (padding) inside elements.
+ * @example ```scss
+ * .card {
+ *   padding: $padding-lg;
+ * }
+ * ```
+ * @category spacing
+ * @tags spacing, padding, layout, box-model
+ */
+export declare type MagnetoUIPadding = 'inherit' | 'min' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
+/**
+ * @description Radius SCSS vars used to define consistent border-radius values across components.
+ * @example ```scss
+ * .button {
+ *   border-radius: $radius-md;
+ * }
+ * ```
+ * @category visual
+ * @tags radius, border-radius, rounding, shape, visual
+ */
+export declare type MagnetoUIRadius = 'inherit' | 'min' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
+/**
+ * @description Scale SCSS vars for handling responsive designs.
+ * @example ```scss
+ * .icon:hover {
+ *   transform: scale($scale-rem-md);
+ * }
+ * ```
+ * @category motion
+ * @tags scale, transform, animation, motion
+ */
+export declare type MagnetoUIScale = 'inherit' | 'none' | 'auto' | 'full' | 'min' | 'px-base' | 'px-2xs' | 'px-xs' | 'px-sm' | 'px-md' | 'px-lg' | 'px-xl' | 'px-2xl' | 'px-3xl' | 'px-4xl' | 'px-container-2xs' | 'px-container-xs' | 'px-container-sm' | 'px-container-md' | 'px-container-lg' | 'px-container-xl' | 'px-container-2xl' | 'px-container-3xl' | 'rem-2xs' | 'rem-xs' | 'rem-sm' | 'rem-md' | 'rem-lg' | 'rem-xl' | 'rem-2xl' | 'rem-3xl' | 'rem-4xl' | 'rem-container-2xs' | 'rem-container-xs' | 'rem-container-sm' | 'rem-container-md' | 'rem-container-lg' | 'rem-container-xl' | 'rem-container-2xl' | 'rem-container-3xl';
+/**
+ * @description Breakpoint SCSS vars used for media queries and responsive layout control.
+ * @example ```scss
+ * @media screen and (min-width: $screen-md) {
+ *   .sidebar {
+ *     display: block;
+ *   }
+ * }
+ * ```
+ * @category responsive
+ * @tags breakpoint, media query, responsive, screen
+ */
+export declare type MagnetoUIScreen = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+/**
+ * @description Shadow SCSS vars for consistent elevation and depth effects in components.
+ * @example ```scss
+ * .card {
+ *   box-shadow: $shadow-10;
+ * }
+ * ```
+ * @category visual
+ * @tags shadow, elevation, depth, box-shadow
+ */
+export declare type MagnetoUIShadow = '10' | '20' | '30' | 'inherit' | 'none';
+/**
+ * @description Text SCSS vars for consistent font sizes.
+ * @example ```scss
+ * .title {
+ *   font-size: $text-xl;
+ * }
+ * ```
+ * @category typography
+ * @tags text, typography, font, size, weight, line-height
+ */
+export declare type MagnetoUIText = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';