@dafaz-ui/react 2.0.0 → 2.1.0

package/dist/index.js

@@ -37,7 +37,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
-  Button: () => Button
+  Button: () => Button,
+  Text: () => Text,
+  config: () => config,
+  createTheme: () => createTheme,
+  css: () => css,
+  getCssText: () => getCssText,
+  globalCss: () => globalCss,
+  keyframes: () => keyframes,
+  styled: () => styled,
+  theme: () => theme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -95,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"
 };
@@ -202,19 +211,69 @@ 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
+  Button,
+  Text,
+  config,
+  createTheme,
+  css,
+  getCssText,
+  globalCss,
+  keyframes,
+  styled,
+  theme
 });

package/dist/index.mjs

@@ -72,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"
 };
@@ -179,18 +179,68 @@ 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
+  Button,
+  Text,
+  config,
+  createTheme,
+  css,
+  getCssText,
+  globalCss,
+  keyframes,
+  styled,
+  theme
 };

package/package.json

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

package/src/components/Button.tsx

@@ -1,104 +1,125 @@
-import type { ComponentProps } from '@stitches/react'
-import { styled } from '../styles'
-import type { ElementType } from 'react'
-
-/** Primary UI component for user interaction */
-export const Button = styled('button', {
-  all: 'unset',
-  borderRadius: '$md',
-  fontSize: '$md',
-  fontWeight: '$regular',
-  fontFamily: '$app',
-  textAlign: 'center',
-  minWidth: 120,
-  boxSizing: 'border-box',
-
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: '$2',
-  padding: '$2 $5',
-
-  cursor: 'pointer',
-
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-
-  svg: {
-    width: '$4',
-    height: '$4',
-  },
-
-  variants: {
-    variant: {
-      primary: {
-        color: '$white',
-        background: '$dafaz600',
-        opacity: 0.8,
-
-        '&:not(:disabled):hover': {
-          opacity: 1,
-        },
-
-        '&:disabled': {
-          background: '$gray200',
-        },
-      },
-      secondary: {
-        fontWeight: '$medium',
-        color: '$dafaz600',
-        border: '2px solid $dafaz600',
-        opacity: 0.8,
-
-        '&:not(:disabled):hover': {
-          opacity: 1,
-        },
-
-        '&:disabled': {
-          color: '$gray200',
-          border: '2px solid $gray200',
-        },
-      },
-      tertiary: {
-        fontWeight: '$medium',
-        color: '$gray400',
-
-        '&:not(:disabled):hover': {
-          color: '$gray800',
-        },
-
-        '&:disabled': {
-          color: '$gray200',
-        },
-      },
-    },
-    size: {
-      sm: {
-        height: 38,
-      },
-      md: {
-        height: 46,
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'primary',
-    size: 'md',
-  },
-})
-
-export interface ButtonProps extends ComponentProps<typeof Button> {
-  as?: ElementType
-  /** How large should the button be? */
-  size?: 'sm' | 'md'
-  /** Optional click handler */
-  onClick?: () => void
-  /** Button contents */
-  label: string
-  /** Button is disable? */
-  disabled?: boolean
-  //** Button UI mode */
-  variant?: 'primary' | 'secondary' | 'tertiary'
-}
+import type { ComponentProps } from '@stitches/react'
+import { styled } from '../styles'
+import type { ElementType } from 'react'
+
+/** Primary UI component for user interaction */
+export const Button = styled('button', {
+  all: 'unset',
+  borderRadius: '$md',
+  fontSize: '$md',
+  fontWeight: '$regular',
+  fontFamily: '$app',
+  textAlign: 'center',
+  minWidth: 120,
+  boxSizing: 'border-box',
+
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$2',
+  padding: '$2 $5',
+
+  cursor: 'pointer',
+
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+
+  svg: {
+    width: '$4',
+    height: '$4',
+  },
+
+  variants: {
+    variant: {
+      primary: {
+        color: '$white',
+        background: '$dafaz600',
+        opacity: 0.8,
+
+        '&:not(:disabled):hover': {
+          opacity: 1,
+        },
+
+        '&:disabled': {
+          background: '$gray200',
+        },
+      },
+      secondary: {
+        fontWeight: '$medium',
+        color: '$dafaz600',
+        border: '2px solid $dafaz600',
+        opacity: 0.8,
+
+        '&:not(:disabled):hover': {
+          opacity: 1,
+        },
+
+        '&:disabled': {
+          color: '$gray200',
+          border: '2px solid $gray200',
+        },
+      },
+      tertiary: {
+        fontWeight: '$medium',
+        color: '$gray400',
+
+        '&:not(:disabled):hover': {
+          color: '$gray800',
+        },
+
+        '&:disabled': {
+          color: '$gray200',
+        },
+      },
+    },
+    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' | 'lg'
+  /** Optional click handler */
+  onClick?: () => void
+  /** Button contents */
+  label: string
+  /** Button is disable? */
+  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 +1,4 @@
-export * from './components/Button'
+export * from './components/Button'
+export * from './components/Text'
+
+export * from './styles'

package/src/styles/index.ts

@@ -1,38 +1,38 @@
-import {
-  colors,
-  fontSizes,
-  fontWeights,
-  fonts,
-  lineHeights,
-  opacities,
-  radii,
-  space,
-} from '@dafaz-ui/tokens'
-import { createStitches, defaultThemeMap } from '@stitches/react'
-
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-} = createStitches({
-  themeMap: {
-    ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-  },
-  theme: {
-    colors: colors,
-    fontSizes: fontSizes,
-    fontWeights: fontWeights,
-    fonts: fonts,
-    lineHeights: lineHeights,
-    radii: radii,
-    space: space,
-    opacities: opacities,
-  },
-})
+import {
+  colors,
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  opacities,
+  radii,
+  space,
+} from '@dafaz-ui/tokens'
+import { createStitches, defaultThemeMap } from '@stitches/react'
+
+export const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config,
+} = createStitches({
+  themeMap: {
+    ...defaultThemeMap,
+    height: 'space',
+    width: 'space',
+  },
+  theme: {
+    colors: colors,
+    fontSizes: fontSizes,
+    fontWeights: fontWeights,
+    fonts: fonts,
+    lineHeights: lineHeights,
+    radii: radii,
+    space: space,
+    opacities: opacities,
+  },
+})

package/tsconfig.json

@@ -1,4 +1,4 @@
-{
- "extends": "@dafaz-ui/ts-config/react.json",
- "include": ["src"],
-}
+{
+ "extends": "@dafaz-ui/ts-config/react.json",
+ "include": ["src"],
+}