@dafaz-ui/react 2.0.1 → 2.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @dafaz-ui/react@2.0.1 build
+> @dafaz-ui/react@2.1.0 build
 > tsup src/index.tsx --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 5.02 KB
-CJS ⚡️ Build success in 22ms
-ESM dist/index.mjs 3.90 KB
-ESM ⚡️ Build success in 22ms
+ESM dist/index.mjs 4.68 KB
+ESM ⚡️ Build success in 25ms
+CJS dist/index.js 5.82 KB
+CJS ⚡️ Build success in 26ms
 DTS Build start
-DTS ⚡️ Build success in 1995ms
-DTS dist/index.d.mts 59.20 KB
-DTS dist/index.d.ts  59.20 KB
+DTS ⚡️ Build success in 2097ms
+DTS dist/index.d.mts 64.29 KB
+DTS dist/index.d.ts  64.29 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dafaz-ui/react
 
+## 2.1.0
+
+### Minor Changes
+
+- Add Text UI component
+
 ## 2.0.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/s
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import { ComponentProps } from '@stitches/react';
 import * as react from 'react';
-import { ElementType } from 'react';
+import { ElementType, ComponentProps as ComponentProps$1 } from 'react';
 import * as _stitches_react_types_theme from '@stitches/react/types/theme';
 import * as _stitches_react_types_css from '@stitches/react/types/css';
 import * as _stitches_react_types_stitches from '@stitches/react/types/stitches';
@@ -11,7 +11,8 @@ import * as _stitches_react_types_util from '@stitches/react/types/util';
 /** Primary UI component for user interaction */
 declare const Button: _stitches_react_types_styled_component.StyledComponent<"button", {
     variant?: "primary" | "secondary" | "tertiary" | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    flat?: boolean | "true" | "false" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         white: string;
@@ -25,7 +26,6 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -216,7 +216,7 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
 interface ButtonProps extends ComponentProps<typeof Button> {
     as?: ElementType;
     /** How large should the button be? */
-    size?: 'sm' | 'md';
+    size?: 'sm' | 'md' | 'lg';
     /** Optional click handler */
     onClick?: () => void;
     /** Button contents */
@@ -224,6 +224,215 @@ interface ButtonProps extends ComponentProps<typeof Button> {
     /** Button is disable? */
     disabled?: boolean;
     variant?: 'primary' | 'secondary' | 'tertiary';
+    flat?: boolean;
+}
+
+declare const Text: _stitches_react_types_styled_component.StyledComponent<"p", {
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
+    colors: {
+        white: string;
+        black: string;
+        gray100: string;
+        gray200: string;
+        gray400: string;
+        gray800: string;
+        dafaz100: string;
+        dafaz200: string;
+        dafaz400: string;
+        dafaz600: string;
+        dafaz800: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        bold: string;
+    };
+    fonts: {
+        default: string;
+        app: string;
+        web: string;
+        offer: string;
+        code: string;
+    };
+    lineHeights: {
+        shorter: string;
+        short: string;
+        base: string;
+        tall: string;
+    };
+    radii: {
+        px: string;
+        sm: string;
+        md: string;
+        full: string;
+    };
+    space: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        20: string;
+        40: string;
+        64: string;
+        80: string;
+    };
+    opacities: {
+        opacity400: string;
+        opacity600: string;
+        opacity800: string;
+        opacity900: string;
+    };
+}, {
+    height: "space";
+    width: "space";
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    blockSize: "sizes";
+    minBlockSize: "sizes";
+    maxBlockSize: "sizes";
+    inlineSize: "sizes";
+    minInlineSize: "sizes";
+    maxInlineSize: "sizes";
+    minWidth: "sizes";
+    maxWidth: "sizes";
+    minHeight: "sizes";
+    maxHeight: "sizes";
+    flexBasis: "sizes";
+    gridTemplateColumns: "sizes";
+    gridTemplateRows: "sizes";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {}>>;
+interface TextProps extends ComponentProps$1<typeof Text> {
+    as?: ElementType;
+    content: string;
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
 declare const styled: <Type extends keyof JSX.IntrinsicElements | React.ComponentType<any> | _stitches_react_types_util.Function, Composers extends (string | React.ComponentType<any> | _stitches_react_types_util.Function | {
@@ -241,7 +450,6 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -452,7 +660,6 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -655,7 +862,6 @@ declare const css: <Composers extends (string | React.ExoticComponent<any> | Rea
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -873,7 +1079,6 @@ declare const globalCss: <Styles extends {
             dafaz400: string;
             dafaz600: string;
             dafaz800: string;
-            teste: string;
         };
         fontSizes: {
             xxs: string;
@@ -1074,7 +1279,6 @@ declare const globalCss: <Styles extends {
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -1278,7 +1482,6 @@ declare const keyframes: (style: {
             dafaz400: string;
             dafaz600: string;
             dafaz800: string;
-            teste: string;
         };
         fontSizes: {
             xxs: string;
@@ -1487,7 +1690,6 @@ declare const theme: string & {
         dafaz400: _stitches_react_types_theme.Token<"dafaz400", string, "colors", "">;
         dafaz600: _stitches_react_types_theme.Token<"dafaz600", string, "colors", "">;
         dafaz800: _stitches_react_types_theme.Token<"dafaz800", string, "colors", "">;
-        teste: _stitches_react_types_theme.Token<"teste", string, "colors", "">;
     };
     fontSizes: {
         xxs: _stitches_react_types_theme.Token<"xxs", string, "fontSizes", "">;
@@ -1559,7 +1761,6 @@ declare const createTheme: <Argument0 extends string | ({
         dafaz400?: string | number | boolean | undefined;
         dafaz600?: string | number | boolean | undefined;
         dafaz800?: string | number | boolean | undefined;
-        teste?: string | number | boolean | undefined;
     } | undefined;
     fontSizes?: {
         xxs?: string | number | boolean | undefined;
@@ -1635,7 +1836,6 @@ declare const createTheme: <Argument0 extends string | ({
         dafaz400?: string | number | boolean | undefined;
         dafaz600?: string | number | boolean | undefined;
         dafaz800?: string | number | boolean | undefined;
-        teste?: string | number | boolean | undefined;
     } | undefined;
     fontSizes?: {
         xxs?: string | number | boolean | undefined;
@@ -1718,7 +1918,6 @@ declare const config: {
             dafaz400: string;
             dafaz600: string;
             dafaz800: string;
-            teste: string;
         };
         fontSizes: {
             xxs: string;
@@ -1910,4 +2109,4 @@ declare const config: {
     utils: {};
 };
 
-export { Button, type ButtonProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };
+export { Button, type ButtonProps, Text, type TextProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/s
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import { ComponentProps } from '@stitches/react';
 import * as react from 'react';
-import { ElementType } from 'react';
+import { ElementType, ComponentProps as ComponentProps$1 } from 'react';
 import * as _stitches_react_types_theme from '@stitches/react/types/theme';
 import * as _stitches_react_types_css from '@stitches/react/types/css';
 import * as _stitches_react_types_stitches from '@stitches/react/types/stitches';
@@ -11,7 +11,8 @@ import * as _stitches_react_types_util from '@stitches/react/types/util';
 /** Primary UI component for user interaction */
 declare const Button: _stitches_react_types_styled_component.StyledComponent<"button", {
     variant?: "primary" | "secondary" | "tertiary" | undefined;
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    flat?: boolean | "true" | "false" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         white: string;
@@ -25,7 +26,6 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -216,7 +216,7 @@ declare const Button: _stitches_react_types_styled_component.StyledComponent<"bu
 interface ButtonProps extends ComponentProps<typeof Button> {
     as?: ElementType;
     /** How large should the button be? */
-    size?: 'sm' | 'md';
+    size?: 'sm' | 'md' | 'lg';
     /** Optional click handler */
     onClick?: () => void;
     /** Button contents */
@@ -224,6 +224,215 @@ interface ButtonProps extends ComponentProps<typeof Button> {
     /** Button is disable? */
     disabled?: boolean;
     variant?: 'primary' | 'secondary' | 'tertiary';
+    flat?: boolean;
+}
+
+declare const Text: _stitches_react_types_styled_component.StyledComponent<"p", {
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+}, {}, _stitches_react_types_css_util.CSS<{}, {
+    colors: {
+        white: string;
+        black: string;
+        gray100: string;
+        gray200: string;
+        gray400: string;
+        gray800: string;
+        dafaz100: string;
+        dafaz200: string;
+        dafaz400: string;
+        dafaz600: string;
+        dafaz800: string;
+    };
+    fontSizes: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    fontWeights: {
+        regular: string;
+        medium: string;
+        bold: string;
+    };
+    fonts: {
+        default: string;
+        app: string;
+        web: string;
+        offer: string;
+        code: string;
+    };
+    lineHeights: {
+        shorter: string;
+        short: string;
+        base: string;
+        tall: string;
+    };
+    radii: {
+        px: string;
+        sm: string;
+        md: string;
+        full: string;
+    };
+    space: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        20: string;
+        40: string;
+        64: string;
+        80: string;
+    };
+    opacities: {
+        opacity400: string;
+        opacity600: string;
+        opacity800: string;
+        opacity900: string;
+    };
+}, {
+    height: "space";
+    width: "space";
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    blockSize: "sizes";
+    minBlockSize: "sizes";
+    maxBlockSize: "sizes";
+    inlineSize: "sizes";
+    minInlineSize: "sizes";
+    maxInlineSize: "sizes";
+    minWidth: "sizes";
+    maxWidth: "sizes";
+    minHeight: "sizes";
+    maxHeight: "sizes";
+    flexBasis: "sizes";
+    gridTemplateColumns: "sizes";
+    gridTemplateRows: "sizes";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {}>>;
+interface TextProps extends ComponentProps$1<typeof Text> {
+    as?: ElementType;
+    content: string;
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
 declare const styled: <Type extends keyof JSX.IntrinsicElements | React.ComponentType<any> | _stitches_react_types_util.Function, Composers extends (string | React.ComponentType<any> | _stitches_react_types_util.Function | {
@@ -241,7 +450,6 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -452,7 +660,6 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -655,7 +862,6 @@ declare const css: <Composers extends (string | React.ExoticComponent<any> | Rea
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -873,7 +1079,6 @@ declare const globalCss: <Styles extends {
             dafaz400: string;
             dafaz600: string;
             dafaz800: string;
-            teste: string;
         };
         fontSizes: {
             xxs: string;
@@ -1074,7 +1279,6 @@ declare const globalCss: <Styles extends {
         dafaz400: string;
         dafaz600: string;
         dafaz800: string;
-        teste: string;
     };
     fontSizes: {
         xxs: string;
@@ -1278,7 +1482,6 @@ declare const keyframes: (style: {
             dafaz400: string;
             dafaz600: string;
             dafaz800: string;
-            teste: string;
         };
         fontSizes: {
             xxs: string;
@@ -1487,7 +1690,6 @@ declare const theme: string & {
         dafaz400: _stitches_react_types_theme.Token<"dafaz400", string, "colors", "">;
         dafaz600: _stitches_react_types_theme.Token<"dafaz600", string, "colors", "">;
         dafaz800: _stitches_react_types_theme.Token<"dafaz800", string, "colors", "">;
-        teste: _stitches_react_types_theme.Token<"teste", string, "colors", "">;
     };
     fontSizes: {
         xxs: _stitches_react_types_theme.Token<"xxs", string, "fontSizes", "">;
@@ -1559,7 +1761,6 @@ declare const createTheme: <Argument0 extends string | ({
         dafaz400?: string | number | boolean | undefined;
         dafaz600?: string | number | boolean | undefined;
         dafaz800?: string | number | boolean | undefined;
-        teste?: string | number | boolean | undefined;
     } | undefined;
     fontSizes?: {
         xxs?: string | number | boolean | undefined;
@@ -1635,7 +1836,6 @@ declare const createTheme: <Argument0 extends string | ({
         dafaz400?: string | number | boolean | undefined;
         dafaz600?: string | number | boolean | undefined;
         dafaz800?: string | number | boolean | undefined;
-        teste?: string | number | boolean | undefined;
     } | undefined;
     fontSizes?: {
         xxs?: string | number | boolean | undefined;
@@ -1718,7 +1918,6 @@ declare const config: {
             dafaz400: string;
             dafaz600: string;
             dafaz800: string;
-            teste: string;
         };
         fontSizes: {
             xxs: string;
@@ -1910,4 +2109,4 @@ declare const config: {
     utils: {};
 };
 
-export { Button, type ButtonProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };
+export { Button, type ButtonProps, Text, type TextProps, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };

package/dist/index.js

@@ -38,6 +38,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Button: () => Button,
+  Text: () => Text,
   config: () => config,
   createTheme: () => createTheme,
   css: () => css,
@@ -61,8 +62,7 @@ var colors = {
   dafaz200: "#52D058",
   dafaz400: "#2FC136",
   dafaz600: "#229E45",
-  dafaz800: "#2A6A2D",
-  teste: "#FFF"
+  dafaz800: "#2A6A2D"
 };
 var opacities = {
   opacity400: "0.4",
@@ -104,8 +104,8 @@ var fontSizes = {
   xxs: "0.5rem",
   xs: "0.625rem",
   sm: "0.75rem",
-  md: "0.875",
-  lg: "1rem",
+  md: "0.875rem",
+  lg: "1.0rem",
   xl: "1.25rem",
   "2xl": "2rem"
 };
@@ -211,21 +211,63 @@ var Button = styled("button", {
     },
     size: {
       sm: {
-        height: 38
+        height: 38,
+        fontSize: "$sm"
       },
       md: {
-        height: 46
+        height: 46,
+        fontSize: "$lg"
+      },
+      lg: {
+        height: 54,
+        fontSize: "$xl"
       }
+    },
+    flat: {
+      true: {
+        border: 0,
+        background: "transparent",
+        "&:disabled": {
+          color: "$gray200",
+          background: "transparent",
+          border: "none"
+        }
+      },
+      false: {}
     }
   },
   defaultVariants: {
     variant: "primary",
+    size: "md",
+    flat: false
+  }
+});
+
+// src/components/Text.tsx
+var Text = styled("p", {
+  fontFamily: "$web",
+  lineHeight: "$base",
+  margin: 0,
+  color: "$white",
+  variants: {
+    size: {
+      xxs: { fontSize: "$xxs" },
+      xs: { fontSize: "$xs" },
+      sm: { fontSize: "$sm" },
+      md: { fontSize: "$md" },
+      lg: { fontSize: "$lg" },
+      xl: { fontSize: "$xl" },
+      "2xl": { fontSize: "$2xl" }
+    }
+  },
+  defaultVariants: {
     size: "md"
   }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  Text,
   config,
   createTheme,
   css,

package/dist/index.mjs

@@ -30,8 +30,7 @@ var colors = {
   dafaz200: "#52D058",
   dafaz400: "#2FC136",
   dafaz600: "#229E45",
-  dafaz800: "#2A6A2D",
-  teste: "#FFF"
+  dafaz800: "#2A6A2D"
 };
 var opacities = {
   opacity400: "0.4",
@@ -73,8 +72,8 @@ var fontSizes = {
   xxs: "0.5rem",
   xs: "0.625rem",
   sm: "0.75rem",
-  md: "0.875",
-  lg: "1rem",
+  md: "0.875rem",
+  lg: "1.0rem",
   xl: "1.25rem",
   "2xl": "2rem"
 };
@@ -180,20 +179,62 @@ var Button = styled("button", {
     },
     size: {
       sm: {
-        height: 38
+        height: 38,
+        fontSize: "$sm"
       },
       md: {
-        height: 46
+        height: 46,
+        fontSize: "$lg"
+      },
+      lg: {
+        height: 54,
+        fontSize: "$xl"
       }
+    },
+    flat: {
+      true: {
+        border: 0,
+        background: "transparent",
+        "&:disabled": {
+          color: "$gray200",
+          background: "transparent",
+          border: "none"
+        }
+      },
+      false: {}
     }
   },
   defaultVariants: {
     variant: "primary",
+    size: "md",
+    flat: false
+  }
+});
+
+// src/components/Text.tsx
+var Text = styled("p", {
+  fontFamily: "$web",
+  lineHeight: "$base",
+  margin: 0,
+  color: "$white",
+  variants: {
+    size: {
+      xxs: { fontSize: "$xxs" },
+      xs: { fontSize: "$xs" },
+      sm: { fontSize: "$sm" },
+      md: { fontSize: "$md" },
+      lg: { fontSize: "$lg" },
+      xl: { fontSize: "$xl" },
+      "2xl": { fontSize: "$2xl" }
+    }
+  },
+  defaultVariants: {
     size: "md"
   }
 });
 export {
   Button,
+  Text,
   config,
   createTheme,
   css,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dafaz-ui/react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Button.tsx

@@ -76,23 +76,42 @@ export const Button = styled('button', {
     size: {
       sm: {
         height: 38,
+        fontSize: '$sm',
       },
       md: {
         height: 46,
+        fontSize: '$lg',
+      },
+      lg: {
+        height: 54,
+        fontSize: '$xl',
       },
     },
-  },
+    flat: {
+      true: {
+        border: 0,
+        background: 'transparent',
 
+        '&:disabled': {
+          color: '$gray200',
+          background: 'transparent',
+          border: 'none',
+        },
+      },
+      false: {},
+    },
+  },
   defaultVariants: {
     variant: 'primary',
     size: 'md',
+    flat: false,
   },
 })
 
 export interface ButtonProps extends ComponentProps<typeof Button> {
   as?: ElementType
   /** How large should the button be? */
-  size?: 'sm' | 'md'
+  size?: 'sm' | 'md' | 'lg'
   /** Optional click handler */
   onClick?: () => void
   /** Button contents */
@@ -101,4 +120,6 @@ export interface ButtonProps extends ComponentProps<typeof Button> {
   disabled?: boolean
   //** Button UI mode */
   variant?: 'primary' | 'secondary' | 'tertiary'
+  //** Flat mode */
+  flat?: boolean
 }

package/src/components/Text.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+
+export const Text = styled('p', {
+  fontFamily: '$web',
+  lineHeight: '$base',
+  margin: 0,
+  color: '$white',
+
+  variants: {
+    size: {
+      xxs: { fontSize: '$xxs' },
+      xs: { fontSize: '$xs' },
+      sm: { fontSize: '$sm' },
+      md: { fontSize: '$md' },
+      lg: { fontSize: '$lg' },
+      xl: { fontSize: '$xl' },
+      '2xl': { fontSize: '$2xl' },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export interface TextProps extends ComponentProps<typeof Text> {
+  as?: ElementType
+  content: string
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+}

package/src/index.tsx

@@ -1,3 +1,4 @@
 export * from './components/Button'
+export * from './components/Text'
 
 export * from './styles'