@lets-events/react 10.1.2 → 11.0.1

package/.eslintrc.json

@@ -1,3 +1,3 @@
-{
-  "extends": "@lets-events/eslint-config"
+{
+  "extends": "@lets-events/eslint-config"
 }

package/.turbo/turbo-build.log

@@ -1,19 +1,18 @@
-
-
-> @lets-events/react@10.1.2 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.4.0
-CLI Target: es6
-ESM Build start
-CJS Build start
-ESM dist/index.mjs 275.16 KB
-ESM ⚡️ Build success in 279ms
-CJS dist/index.js 283.61 KB
-CJS ⚡️ Build success in 279ms
-DTS Build start
-DTS ⚡️ Build success in 5671ms
-DTS dist/index.d.mts 347.67 KB
-DTS dist/index.d.ts  347.67 KB
+
+> @lets-events/react@11.0.1 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.4.0
+CLI Target: es6
+ESM Build start
+CJS Build start
+CJS dist\index.js 283.96 KB
+CJS ⚡️ Build success in 222ms
+ESM dist\index.mjs 275.51 KB
+ESM ⚡️ Build success in 223ms
+DTS Build start
+DTS ⚡️ Build success in 3557ms
+DTS dist\index.d.mts 347.68 KB
+DTS dist\index.d.ts  347.68 KB

package/CHANGELOG.md

@@ -1,10 +1,16 @@
 # @lets-events/react
 
-## 10.1.2
+## 11.0.1
 
 ### Patch Changes
 
-- Click area of timerPicker
+- fix: text button size
+
+## 11.0.0
+
+### Major Changes
+
+- Fix Button Sizes & Text Color
 
 ## 10.1.1
 

package/dist/index.d.mts

@@ -8,7 +8,7 @@ import * as react from 'react';
 import react__default, { ComponentProps, ElementType, ReactNode } from 'react';
 import * as _radix_ui_themes from '@radix-ui/themes';
 import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
-import { CSS } from '@stitches/react';
+import { Colors } from '@lets-events/tokens';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -402,17 +402,17 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type TextProps = ComponentProps<typeof TextStyle> & {
+type TextProps = Omit<ComponentProps<typeof TextStyle>, "color"> & {
     as?: ElementType;
     asChild?: boolean;
-    css?: CSS;
+    color?: keyof Colors;
 };
-declare function Text({ ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare function Text({ color, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 
 declare const ButtonStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.ButtonProps & react.RefAttributes<HTMLButtonElement>>, {
     color?: "info" | "warning" | "purple" | "white" | "brand" | "error" | "success" | "neutral" | undefined;
+    size?: "medium" | "small" | "large" | "extraSmall" | undefined;
     variant?: "text" | "contained" | "outlined" | undefined;
-    typography?: "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     outlinedBgColor?: "transparent" | "neutral" | undefined;
     radii?: "full" | undefined;

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import * as react from 'react';
 import react__default, { ComponentProps, ElementType, ReactNode } from 'react';
 import * as _radix_ui_themes from '@radix-ui/themes';
 import { TextField as TextField$1, RadioGroup as RadioGroup$1, CheckboxGroup as CheckboxGroup$1, DropdownMenu as DropdownMenu$1, AlertDialog, Switch as Switch$1 } from '@radix-ui/themes';
-import { CSS } from '@stitches/react';
+import { Colors } from '@lets-events/tokens';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -402,17 +402,17 @@ declare const TextStyle: _stitches_react_types_styled_component.StyledComponent<
     transition: "transitions";
     zIndex: "zIndices";
 }, {}>>;
-type TextProps = ComponentProps<typeof TextStyle> & {
+type TextProps = Omit<ComponentProps<typeof TextStyle>, "color"> & {
     as?: ElementType;
     asChild?: boolean;
-    css?: CSS;
+    color?: keyof Colors;
 };
-declare function Text({ ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare function Text({ color, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 
 declare const ButtonStyled: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.ButtonProps & react.RefAttributes<HTMLButtonElement>>, {
     color?: "info" | "warning" | "purple" | "white" | "brand" | "error" | "success" | "neutral" | undefined;
+    size?: "medium" | "small" | "large" | "extraSmall" | undefined;
     variant?: "text" | "contained" | "outlined" | undefined;
-    typography?: "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | undefined;
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     outlinedBgColor?: "transparent" | "neutral" | undefined;
     radii?: "full" | undefined;

package/dist/index.js

@@ -1620,24 +1620,6 @@ var typographyValues = {
     lineHeight: "$labelExtraSmall"
   }
 };
-var typographyButtonValues = {
-  buttonLarge: {
-    fontSize: "$buttonLarge",
-    lineHeight: "$buttonLarge"
-  },
-  buttonMedium: {
-    fontSize: "$buttonMedium",
-    lineHeight: "$buttonMedium"
-  },
-  buttonSmall: {
-    fontSize: "$buttonSmall",
-    lineHeight: "$buttonSmall"
-  },
-  buttonExtraSmall: {
-    fontSize: "$buttonExtraSmall",
-    lineHeight: "$buttonExtraSmall"
-  }
-};
 var typographyLabelValues = {
   labelLarge: {
     fontSize: "$labelLarge",
@@ -1662,7 +1644,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var TextStyle = styled(import_themes.Text, {
   fontFamily: "$default",
   lineHeight: "$base",
-  color: "$gray100",
+  color: "$grey950",
   variants: {
     typography: typographyValues,
     fontWeight: {
@@ -1674,8 +1656,15 @@ var TextStyle = styled(import_themes.Text, {
   }
 });
 function Text(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextStyle, __spreadValues({}, props));
+  var _b = _a, { color } = _b, props = __objRest(_b, ["color"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    TextStyle,
+    __spreadProps(__spreadValues({}, props), {
+      css: __spreadValues({
+        color: color ? "$" + color : "$grey950"
+      }, props.css)
+    })
+  );
 }
 
 // src/components/Button/styledComponents.ts
@@ -1696,7 +1685,7 @@ var ButtonStyled = styled(import_themes2.Button, {
   alignItems: "center",
   justifyContent: "center",
   gap: "$10",
-  padding: "$6 $16",
+  padding: "$6 $12",
   "&:disabled": {
     cursor: "not-allowed",
     transition: "none"
@@ -1866,12 +1855,39 @@ var ButtonStyled = styled(import_themes2.Button, {
         }
       }
     },
+    size: {
+      extraSmall: {
+        height: "$24",
+        fontSize: "$buttonExtraSmall",
+        lineHeight: "$buttonExtraSmall",
+        padding: "0 $12"
+      },
+      small: {
+        height: "30px",
+        fontSize: "$buttonSmall",
+        lineHeight: "$buttonSmall",
+        padding: "0 $14"
+      },
+      medium: {
+        height: "40px",
+        fontSize: "$buttonMedium",
+        lineHeight: "$buttonMedium",
+        padding: "0 $16"
+      },
+      large: {
+        height: "48px",
+        fontSize: "$buttonLarge",
+        lineHeight: "$buttonLarge",
+        padding: "0 $20"
+      }
+    },
     variant: {
       text: {
         backgroundColor: "transparent",
         boxShadow: "none",
         padding: 0,
         border: 0,
+        height: "unset",
         color: "$$buttonColor"
       },
       contained: {
@@ -1896,7 +1912,6 @@ var ButtonStyled = styled(import_themes2.Button, {
         }
       }
     },
-    typography: typographyButtonValues,
     fontWeight: {
       regular: { fontWeight: "$regular" },
       medium: { fontWeight: "$medium" },
@@ -1910,15 +1925,16 @@ var ButtonStyled = styled(import_themes2.Button, {
       }
     },
     radii: {
-      "full": {
+      full: {
         borderRadius: "$full"
       }
     }
   },
   defaultVariants: {
     variant: "contained",
-    typography: "buttonMedium",
-    color: "brand"
+    color: "brand",
+    size: "medium",
+    fontWeight: "medium"
   }
 });
 
@@ -7893,7 +7909,7 @@ function Calendar(_a) {
               onClick: () => {
                 setShowCalendar(false);
               },
-              typography: "buttonMedium",
+              size: "medium",
               fontWeight: "medium",
               children: actionText != null ? actionText : "Aplicar"
             }
@@ -8201,7 +8217,7 @@ function TimePicker({
                 setSelected(`${hours}:${minutes}`);
                 setIsOpen(false);
               },
-              typography: "buttonMedium",
+              size: "medium",
               fontWeight: "medium",
               children: "Aplicar"
             }

package/dist/index.mjs

@@ -1533,24 +1533,6 @@ var typographyValues = {
     lineHeight: "$labelExtraSmall"
   }
 };
-var typographyButtonValues = {
-  buttonLarge: {
-    fontSize: "$buttonLarge",
-    lineHeight: "$buttonLarge"
-  },
-  buttonMedium: {
-    fontSize: "$buttonMedium",
-    lineHeight: "$buttonMedium"
-  },
-  buttonSmall: {
-    fontSize: "$buttonSmall",
-    lineHeight: "$buttonSmall"
-  },
-  buttonExtraSmall: {
-    fontSize: "$buttonExtraSmall",
-    lineHeight: "$buttonExtraSmall"
-  }
-};
 var typographyLabelValues = {
   labelLarge: {
     fontSize: "$labelLarge",
@@ -1575,7 +1557,7 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var TextStyle = styled(TextRadix, {
   fontFamily: "$default",
   lineHeight: "$base",
-  color: "$gray100",
+  color: "$grey950",
   variants: {
     typography: typographyValues,
     fontWeight: {
@@ -1587,8 +1569,15 @@ var TextStyle = styled(TextRadix, {
   }
 });
 function Text(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx2(TextStyle, __spreadValues({}, props));
+  var _b = _a, { color } = _b, props = __objRest(_b, ["color"]);
+  return /* @__PURE__ */ jsx2(
+    TextStyle,
+    __spreadProps(__spreadValues({}, props), {
+      css: __spreadValues({
+        color: color ? "$" + color : "$grey950"
+      }, props.css)
+    })
+  );
 }
 
 // src/components/Button/styledComponents.ts
@@ -1609,7 +1598,7 @@ var ButtonStyled = styled(ButtonRadix, {
   alignItems: "center",
   justifyContent: "center",
   gap: "$10",
-  padding: "$6 $16",
+  padding: "$6 $12",
   "&:disabled": {
     cursor: "not-allowed",
     transition: "none"
@@ -1779,12 +1768,39 @@ var ButtonStyled = styled(ButtonRadix, {
         }
       }
     },
+    size: {
+      extraSmall: {
+        height: "$24",
+        fontSize: "$buttonExtraSmall",
+        lineHeight: "$buttonExtraSmall",
+        padding: "0 $12"
+      },
+      small: {
+        height: "30px",
+        fontSize: "$buttonSmall",
+        lineHeight: "$buttonSmall",
+        padding: "0 $14"
+      },
+      medium: {
+        height: "40px",
+        fontSize: "$buttonMedium",
+        lineHeight: "$buttonMedium",
+        padding: "0 $16"
+      },
+      large: {
+        height: "48px",
+        fontSize: "$buttonLarge",
+        lineHeight: "$buttonLarge",
+        padding: "0 $20"
+      }
+    },
     variant: {
       text: {
         backgroundColor: "transparent",
         boxShadow: "none",
         padding: 0,
         border: 0,
+        height: "unset",
         color: "$$buttonColor"
       },
       contained: {
@@ -1809,7 +1825,6 @@ var ButtonStyled = styled(ButtonRadix, {
         }
       }
     },
-    typography: typographyButtonValues,
     fontWeight: {
       regular: { fontWeight: "$regular" },
       medium: { fontWeight: "$medium" },
@@ -1823,15 +1838,16 @@ var ButtonStyled = styled(ButtonRadix, {
       }
     },
     radii: {
-      "full": {
+      full: {
         borderRadius: "$full"
       }
     }
   },
   defaultVariants: {
     variant: "contained",
-    typography: "buttonMedium",
-    color: "brand"
+    color: "brand",
+    size: "medium",
+    fontWeight: "medium"
   }
 });
 
@@ -7806,7 +7822,7 @@ function Calendar(_a) {
               onClick: () => {
                 setShowCalendar(false);
               },
-              typography: "buttonMedium",
+              size: "medium",
               fontWeight: "medium",
               children: actionText != null ? actionText : "Aplicar"
             }
@@ -8114,7 +8130,7 @@ function TimePicker({
                 setSelected(`${hours}:${minutes}`);
                 setIsOpen(false);
               },
-              typography: "buttonMedium",
+              size: "medium",
               fontWeight: "medium",
               children: "Aplicar"
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "10.1.2",
+  "version": "11.0.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",