@dafaz-ui/react 2.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,18 @@
+
+> @dafaz-ui/react@2.0.0 build
+> tsup src/index.tsx --format esm,cjs --dts --external react
+
+CLI Building entry: src/index.tsx
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.3.5
+CLI Target: es6
+ESM Build start
+CJS Build start
+CJS dist\index.js 4.71 KB
+CJS ⚡️ Build success in 100ms
+ESM dist\index.mjs 3.80 KB
+ESM ⚡️ Build success in 101ms
+DTS Build start
+DTS ⚡️ Build success in 2091ms
+DTS dist\index.d.mts 5.90 KB
+DTS dist\index.d.ts  5.90 KB

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @dafaz-ui/react
+
+## 2.0.0
+
+### Major Changes
+
+- Add display name to button

package/dist/index.d.mts

@@ -0,0 +1,223 @@
+import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
+import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
+import { ComponentProps } from '@stitches/react';
+import { ElementType } from 'react';
+
+/** 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;
+}, {}, _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 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;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+}
+
+export { Button, type ButtonProps };

package/dist/index.d.ts

@@ -0,0 +1,223 @@
+import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
+import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
+import { ComponentProps } from '@stitches/react';
+import { ElementType } from 'react';
+
+/** 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;
+}, {}, _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 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;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+}
+
+export { Button, type ButtonProps };

package/dist/index.js

@@ -0,0 +1,220 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(src_exports);
+
+// ../tokens/dist/index.mjs
+var colors = {
+  white: "#FFF",
+  black: "#000",
+  gray100: "#D6D6D6",
+  gray200: "#666666",
+  gray400: "#444444",
+  gray800: "#282828",
+  dafaz100: "#EAEFEA",
+  dafaz200: "#52D058",
+  dafaz400: "#2FC136",
+  dafaz600: "#229E45",
+  dafaz800: "#2A6A2D"
+};
+var opacities = {
+  opacity400: "0.4",
+  opacity600: "0.6",
+  opacity800: "0.8",
+  opacity900: "0.9"
+};
+var space = {
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  10: "2.5rem",
+  12: "3rem",
+  16: "4rem",
+  20: "5rem",
+  40: "10rem",
+  64: "16rem",
+  80: "20rem"
+};
+var radii = {
+  px: "1px",
+  sm: "3px",
+  md: "6px",
+  full: "99999px"
+};
+var fonts = {
+  default: "Roboto, sans-serif",
+  app: "Poppins",
+  web: "League Spartan",
+  offer: "KoHo",
+  code: "monospace"
+};
+var fontSizes = {
+  xxs: "0.5rem",
+  xs: "0.625rem",
+  sm: "0.75rem",
+  md: "0.875",
+  lg: "1rem",
+  xl: "1.25rem",
+  "2xl": "2rem"
+};
+var fontWeights = {
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+var lineHeights = {
+  shorter: "125%",
+  short: "140%",
+  base: "160%",
+  tall: "180%"
+};
+
+// src/styles/index.ts
+var import_react = require("@stitches/react");
+var {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config
+} = (0, import_react.createStitches)({
+  themeMap: __spreadProps(__spreadValues({}, import_react.defaultThemeMap), {
+    height: "space",
+    width: "space"
+  }),
+  theme: {
+    colors,
+    fontSizes,
+    fontWeights,
+    fonts,
+    lineHeights,
+    radii,
+    space,
+    opacities
+  }
+});
+
+// src/components/Button.tsx
+var 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"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/index.mjs

@@ -0,0 +1,196 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// ../tokens/dist/index.mjs
+var colors = {
+  white: "#FFF",
+  black: "#000",
+  gray100: "#D6D6D6",
+  gray200: "#666666",
+  gray400: "#444444",
+  gray800: "#282828",
+  dafaz100: "#EAEFEA",
+  dafaz200: "#52D058",
+  dafaz400: "#2FC136",
+  dafaz600: "#229E45",
+  dafaz800: "#2A6A2D"
+};
+var opacities = {
+  opacity400: "0.4",
+  opacity600: "0.6",
+  opacity800: "0.8",
+  opacity900: "0.9"
+};
+var space = {
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  10: "2.5rem",
+  12: "3rem",
+  16: "4rem",
+  20: "5rem",
+  40: "10rem",
+  64: "16rem",
+  80: "20rem"
+};
+var radii = {
+  px: "1px",
+  sm: "3px",
+  md: "6px",
+  full: "99999px"
+};
+var fonts = {
+  default: "Roboto, sans-serif",
+  app: "Poppins",
+  web: "League Spartan",
+  offer: "KoHo",
+  code: "monospace"
+};
+var fontSizes = {
+  xxs: "0.5rem",
+  xs: "0.625rem",
+  sm: "0.75rem",
+  md: "0.875",
+  lg: "1rem",
+  xl: "1.25rem",
+  "2xl": "2rem"
+};
+var fontWeights = {
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+var lineHeights = {
+  shorter: "125%",
+  short: "140%",
+  base: "160%",
+  tall: "180%"
+};
+
+// src/styles/index.ts
+import { createStitches, defaultThemeMap } from "@stitches/react";
+var {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config
+} = createStitches({
+  themeMap: __spreadProps(__spreadValues({}, defaultThemeMap), {
+    height: "space",
+    width: "space"
+  }),
+  theme: {
+    colors,
+    fontSizes,
+    fontWeights,
+    fonts,
+    lineHeights,
+    radii,
+    space,
+    opacities
+  }
+});
+
+// src/components/Button.tsx
+var 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 {
+  Button
+};

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import * as pluginDafaz from '@dafaz-ui/eslint-config'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [...pluginDafaz.default]

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@dafaz-ui/react",
+  "version": "2.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch",
+    "lint": "eslint src/**/*.ts* --fix"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "description": "",
+  "devDependencies": {
+    "@dafaz-ui/eslint-config": "*",
+    "@dafaz-ui/tokens": "*",
+    "@dafaz-ui/ts-config": "*",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "@stitches/react": "^1.2.8"
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,104 @@
+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'
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './components/Button'

package/src/styles/index.ts

@@ -0,0 +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,
+  },
+})

package/tsconfig.json

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