@lets-events/react 12.7.0 → 12.7.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.7.0 build
+> @lets-events/react@12.7.2 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,11 +9,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist\index.js 404.80 KB
+ESM dist\index.mjs 389.70 KB
+ESM ⚡️ Build success in 199ms
+CJS dist\index.js 404.79 KB
 CJS ⚡️ Build success in 204ms
-ESM dist\index.mjs 389.71 KB
-ESM ⚡️ Build success in 205ms
 DTS Build start
-DTS ⚡️ Build success in 4513ms
+DTS ⚡️ Build success in 4599ms
 DTS dist\index.d.mts 403.02 KB
 DTS dist\index.d.ts  403.02 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.7.2
+
+### Patch Changes
+
+- fix xs badge
+
+## 12.7.1
+
+### Patch Changes
+
+- fix
+
 ## 12.7.0
 
 ### Minor Changes

package/dist/index.js

@@ -3692,7 +3692,7 @@ var BadgeStyled = styled(import_themes11.Badge, {
         padding: "$4 $6",
         fontSize: "$badgeExtraSmall",
         borderRadius: "$2xs",
-        lineHeight: "$bagdeExtraSmall"
+        lineHeight: "$badgeExtraSmall"
       },
       sm: {
         padding: "$4 $8",
@@ -3720,7 +3720,7 @@ var BadgeStyled = styled(import_themes11.Badge, {
       bold: { fontWeight: "$bold" }
     },
     radii: {
-      "full": {
+      full: {
         borderRadius: "$full"
       }
     }
@@ -11576,6 +11576,7 @@ var QuillContainer = styled("div", {
   flexDirection: "column"
 });
 var QuillEditor = styled("div", {
+  position: "relative",
   // Base container
   "& .ql-container": {
     boxSizing: "border-box",
@@ -11587,7 +11588,8 @@ var QuillEditor = styled("div", {
     border: "1px solid $neutral300",
     borderTop: "none",
     borderBottomLeftRadius: "$sm",
-    borderBottomRightRadius: "$sm"
+    borderBottomRightRadius: "$sm",
+    padding: "$12"
   },
   "& .ql-container.ql-disabled .ql-tooltip": {
     visibility: "hidden"
@@ -11615,7 +11617,6 @@ var QuillEditor = styled("div", {
     height: "100%",
     outline: "none",
     overflowY: "auto",
-    padding: "$12",
     tabSize: 4,
     MozTabSize: 4,
     textAlign: "left",
@@ -12759,7 +12760,7 @@ var QuillComponent = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showVideoModal, showLinkModal, handleVideoCancel, handleLinkCancel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuillContainer, { className, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(QuillEditor, { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuillContainer, { className, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(QuillEditor, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ref: quillRef }),
     showVideoModal && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "div",

package/dist/index.mjs

@@ -3577,7 +3577,7 @@ var BadgeStyled = styled(BadgeRadix, {
         padding: "$4 $6",
         fontSize: "$badgeExtraSmall",
         borderRadius: "$2xs",
-        lineHeight: "$bagdeExtraSmall"
+        lineHeight: "$badgeExtraSmall"
       },
       sm: {
         padding: "$4 $8",
@@ -3605,7 +3605,7 @@ var BadgeStyled = styled(BadgeRadix, {
       bold: { fontWeight: "$bold" }
     },
     radii: {
-      "full": {
+      full: {
         borderRadius: "$full"
       }
     }
@@ -11470,6 +11470,7 @@ var QuillContainer = styled("div", {
   flexDirection: "column"
 });
 var QuillEditor = styled("div", {
+  position: "relative",
   // Base container
   "& .ql-container": {
     boxSizing: "border-box",
@@ -11481,7 +11482,8 @@ var QuillEditor = styled("div", {
     border: "1px solid $neutral300",
     borderTop: "none",
     borderBottomLeftRadius: "$sm",
-    borderBottomRightRadius: "$sm"
+    borderBottomRightRadius: "$sm",
+    padding: "$12"
   },
   "& .ql-container.ql-disabled .ql-tooltip": {
     visibility: "hidden"
@@ -11509,7 +11511,6 @@ var QuillEditor = styled("div", {
     height: "100%",
     outline: "none",
     overflowY: "auto",
-    padding: "$12",
     tabSize: 4,
     MozTabSize: 4,
     textAlign: "left",
@@ -12653,7 +12654,7 @@ var QuillComponent = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showVideoModal, showLinkModal, handleVideoCancel, handleLinkCancel]);
-  return /* @__PURE__ */ jsx52(QuillContainer, { className, children: /* @__PURE__ */ jsxs28(QuillEditor, { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsx52(QuillContainer, { className, children: /* @__PURE__ */ jsxs28(QuillEditor, { children: [
     /* @__PURE__ */ jsx52("div", { ref: quillRef }),
     showVideoModal && /* @__PURE__ */ jsx52(
       "div",

package/package.json

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

package/src/components/Badge.tsx

@@ -1,125 +1,123 @@
-import React from 'react'
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-import { Badge as BadgeRadix } from '@radix-ui/themes'
+import React from "react";
+import { ComponentProps, ElementType } from "react";
+import { styled } from "../styles";
+import { Badge as BadgeRadix } from "@radix-ui/themes";
 export const BadgeStyled = styled(BadgeRadix, {
-    fontFamily: '$default',
-    borderRadius: '$sm',
-    verticalAlign: 'middle',
-    variants: {
-        color: {
-            primary: {
-                backgroundColor: '$brand100',
-                color: '$dark700',
-            },
-            dark: {
-                backgroundColor: '$dark700',
-                color: '$grey50',
-            },
-            light: {
-                backgroundColor: '$neutral200',
-                color: '$dark700',
-            },
-            red: {
-                backgroundColor: '$red100',
-                color: '$dark700',
-            },
-            green: {
-                backgroundColor: '$green100',
-                color: '$dark700',
-            },
-            yellow: {
-                backgroundColor: '$yellow100',
-                color: '$dark700',
-            },
-            orange: {
-                backgroundColor: '$orange100',
-                color: '$dark700',
-            },
-            blue: {
-                backgroundColor: '$blue100',
-                color: '$dark700',
-            },
-            pink: {
-                backgroundColor: '$pink100',
-                color: '$dark700',
-            },
-            purple: {
-                backgroundColor: '$purple100',
-                color: '$dark700',
-            },
-            grey: {
-                backgroundColor: '$grey200',
-                color: '$dark700',
-            },
-            disable: {
-                backgroundColor: '$neutral200',
-                color: '$grey500',
-            }
-
-
-        },
-        size: {
-            xs: {
-                padding: '$4 $6',
-                fontSize: '$badgeExtraSmall',
-                borderRadius: '$2xs',
-                lineHeight: '$bagdeExtraSmall',
-            },
-            sm: {
-                padding: '$4 $8',
-                fontSize: '$badgeSmall',
-                borderRadius: '$xs',
-                lineHeight: '$badgeSmall',
-            },
-            md: {
-                padding: '$8 $10',
-                fontSize: '$badgeMedium',
-                borderRadius: '$sm',
-                lineHeight: '$badgeMedium',
-            },
-            xl: {
-                padding: '$12 $12',
-                fontSize: '$badgeLarge',
-                borderRadius: '$sm',
-                lineHeight: '$badgeLarge',
-            },
-        },
-        fontWeight: {
-            regular: { fontWeight: '$regular' },
-            medium: { fontWeight: '$medium' },
-            semibold: { fontWeight: '$semibold' },
-            bold: { fontWeight: '$bold' },
-        },
-        radii: {
-            'full': {
-                borderRadius: '$full',
-            },
-        },
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  verticalAlign: "middle",
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: "$brand100",
+        color: "$dark700",
+      },
+      dark: {
+        backgroundColor: "$dark700",
+        color: "$grey50",
+      },
+      light: {
+        backgroundColor: "$neutral200",
+        color: "$dark700",
+      },
+      red: {
+        backgroundColor: "$red100",
+        color: "$dark700",
+      },
+      green: {
+        backgroundColor: "$green100",
+        color: "$dark700",
+      },
+      yellow: {
+        backgroundColor: "$yellow100",
+        color: "$dark700",
+      },
+      orange: {
+        backgroundColor: "$orange100",
+        color: "$dark700",
+      },
+      blue: {
+        backgroundColor: "$blue100",
+        color: "$dark700",
+      },
+      pink: {
+        backgroundColor: "$pink100",
+        color: "$dark700",
+      },
+      purple: {
+        backgroundColor: "$purple100",
+        color: "$dark700",
+      },
+      grey: {
+        backgroundColor: "$grey200",
+        color: "$dark700",
+      },
+      disable: {
+        backgroundColor: "$neutral200",
+        color: "$grey500",
+      },
     },
-
-    defaultVariants: {
-        size: 'md',
-        color: 'primary',
-        fontWeight: 'regular',
+    size: {
+      xs: {
+        padding: "$4 $6",
+        fontSize: "$badgeExtraSmall",
+        borderRadius: "$2xs",
+        lineHeight: "$badgeExtraSmall",
+      },
+      sm: {
+        padding: "$4 $8",
+        fontSize: "$badgeSmall",
+        borderRadius: "$xs",
+        lineHeight: "$badgeSmall",
+      },
+      md: {
+        padding: "$8 $10",
+        fontSize: "$badgeMedium",
+        borderRadius: "$sm",
+        lineHeight: "$badgeMedium",
+      },
+      xl: {
+        padding: "$12 $12",
+        fontSize: "$badgeLarge",
+        borderRadius: "$sm",
+        lineHeight: "$badgeLarge",
+      },
+    },
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
     },
-})
+    radii: {
+      full: {
+        borderRadius: "$full",
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    fontWeight: "regular",
+  },
+});
 
 export type BadgeProps = ComponentProps<typeof BadgeStyled> & {
-    as?: ElementType
-    icon?: boolean
-    children: React.ReactNode
-}
+  as?: ElementType;
+  icon?: boolean;
+  children: React.ReactNode;
+};
 
 export function Badge({ asChild, children, ...props }: BadgeProps) {
-    return (
-        <BadgeStyled {...props}>
-            {React.Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
-                    return React.cloneElement(child, { size: props.size } as any)
-                }
-                return child
-            })}
-        </BadgeStyled>
-    )
+  return (
+    <BadgeStyled {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { size: props.size } as any);
+        }
+        return child;
+      })}
+    </BadgeStyled>
+  );
 }

package/src/components/RichEditor/QuillComponent.tsx

@@ -327,7 +327,7 @@ const QuillComponent: React.FC<RichEditorProps> = ({
 
   return (
     <QuillContainer className={className}>
-      <QuillEditor style={{ position: "relative" }}>
+      <QuillEditor>
         <div ref={quillRef} />
 
         {/* Video Modal */}

package/src/components/RichEditor/styledComponents.ts

@@ -6,6 +6,8 @@ export const QuillContainer = styled("div", {
 });
 
 export const QuillEditor = styled("div", {
+  position: "relative",
+
   // Base container
   "& .ql-container": {
     boxSizing: "border-box",
@@ -18,15 +20,17 @@ export const QuillEditor = styled("div", {
     borderTop: "none",
     borderBottomLeftRadius: "$sm",
     borderBottomRightRadius: "$sm",
+    padding: "$12",
   },
 
   "& .ql-container.ql-disabled .ql-tooltip": {
     visibility: "hidden",
   },
 
-  "& .ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, & .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui": {
-    cursor: "pointer",
-  },
+  "& .ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui, & .ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui":
+    {
+      cursor: "pointer",
+    },
 
   // Clipboard
   "& .ql-clipboard": {
@@ -45,12 +49,12 @@ export const QuillEditor = styled("div", {
   // Editor
   "& .ql-editor": {
     boxSizing: "border-box",
-    counterReset: "list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
+    counterReset:
+      "list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9",
     lineHeight: "1.42",
     height: "100%",
     outline: "none",
     overflowY: "auto",
-    padding: "$12",
     tabSize: 4,
     MozTabSize: 4,
     textAlign: "left",
@@ -89,7 +93,7 @@ export const QuillEditor = styled("div", {
 
     "& h1": {
       fontSize: "2em",
-      lineHeight: '2em!important',
+      lineHeight: "2em!important",
     },
 
     "& h2": {
@@ -704,9 +708,10 @@ export const QuillEditor = styled("div", {
       },
     },
 
-    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
-      borderColor: "#000",
-    },
+    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover":
+      {
+        borderColor: "#000",
+      },
   },
 
   "@media (pointer: coarse)": {
@@ -970,9 +975,10 @@ export const QuillEditor = styled("div", {
     width: "18px",
   },
 
-  "& .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before": {
-    content: "attr(data-label)",
-  },
+  "& .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, & .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, & .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before":
+    {
+      content: "attr(data-label)",
+    },
 
   // Header picker
   "& .ql-picker.ql-header": {
@@ -982,29 +988,35 @@ export const QuillEditor = styled("div", {
       content: "'Normal'",
     },
 
-    "& .ql-picker-label[data-value='1']::before, & .ql-picker-item[data-value='1']::before": {
-      content: "'Título 1'",
-    },
+    "& .ql-picker-label[data-value='1']::before, & .ql-picker-item[data-value='1']::before":
+      {
+        content: "'Título 1'",
+      },
 
-    "& .ql-picker-label[data-value='2']::before, & .ql-picker-item[data-value='2']::before": {
-      content: "'Título 2'",
-    },
+    "& .ql-picker-label[data-value='2']::before, & .ql-picker-item[data-value='2']::before":
+      {
+        content: "'Título 2'",
+      },
 
-    "& .ql-picker-label[data-value='3']::before, & .ql-picker-item[data-value='3']::before": {
-      content: "'Heading 3'",
-    },
+    "& .ql-picker-label[data-value='3']::before, & .ql-picker-item[data-value='3']::before":
+      {
+        content: "'Heading 3'",
+      },
 
-    "& .ql-picker-label[data-value='4']::before, & .ql-picker-item[data-value='4']::before": {
-      content: "'Heading 4'",
-    },
+    "& .ql-picker-label[data-value='4']::before, & .ql-picker-item[data-value='4']::before":
+      {
+        content: "'Heading 4'",
+      },
 
-    "& .ql-picker-label[data-value='5']::before, & .ql-picker-item[data-value='5']::before": {
-      content: "'Heading 5'",
-    },
+    "& .ql-picker-label[data-value='5']::before, & .ql-picker-item[data-value='5']::before":
+      {
+        content: "'Heading 5'",
+      },
 
-    "& .ql-picker-label[data-value='6']::before, & .ql-picker-item[data-value='6']::before": {
-      content: "'Heading 6'",
-    },
+    "& .ql-picker-label[data-value='6']::before, & .ql-picker-item[data-value='6']::before":
+      {
+        content: "'Heading 6'",
+      },
 
     "& .ql-picker-item[data-value='1']::before": {
       fontSize: "2em",
@@ -1039,13 +1051,15 @@ export const QuillEditor = styled("div", {
       content: "'Sans Serif'",
     },
 
-    "& .ql-picker-label[data-value=serif]::before, & .ql-picker-item[data-value=serif]::before": {
-      content: "'Serif'",
-    },
+    "& .ql-picker-label[data-value=serif]::before, & .ql-picker-item[data-value=serif]::before":
+      {
+        content: "'Serif'",
+      },
 
-    "& .ql-picker-label[data-value=monospace]::before, & .ql-picker-item[data-value=monospace]::before": {
-      content: "'Monospace'",
-    },
+    "& .ql-picker-label[data-value=monospace]::before, & .ql-picker-item[data-value=monospace]::before":
+      {
+        content: "'Monospace'",
+      },
 
     "& .ql-picker-item[data-value=serif]::before": {
       fontFamily: "Georgia, Times New Roman, serif",
@@ -1064,17 +1078,20 @@ export const QuillEditor = styled("div", {
       content: "'Normal'",
     },
 
-    "& .ql-picker-label[data-value=small]::before, & .ql-picker-item[data-value=small]::before": {
-      content: "'Small'",
-    },
+    "& .ql-picker-label[data-value=small]::before, & .ql-picker-item[data-value=small]::before":
+      {
+        content: "'Small'",
+      },
 
-    "& .ql-picker-label[data-value=large]::before, & .ql-picker-item[data-value=large]::before": {
-      content: "'Large'",
-    },
+    "& .ql-picker-label[data-value=large]::before, & .ql-picker-item[data-value=large]::before":
+      {
+        content: "'Large'",
+      },
 
-    "& .ql-picker-label[data-value=huge]::before, & .ql-picker-item[data-value=huge]::before": {
-      content: "'Huge'",
-    },
+    "& .ql-picker-label[data-value=huge]::before, & .ql-picker-item[data-value=huge]::before":
+      {
+        content: "'Huge'",
+      },
 
     "& .ql-picker-item[data-value=small]::before": {
       fontSize: "10px",
@@ -1136,9 +1153,10 @@ export const QuillEditor = styled("div", {
       borderColor: "#ccc",
     },
 
-    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover": {
-      borderColor: "#000",
-    },
+    "& .ql-color-picker .ql-picker-item.ql-selected, & .ql-color-picker .ql-picker-item:hover":
+      {
+        borderColor: "#000",
+      },
   },
 
   "& .ql-toolbar.ql-snow + .ql-container.ql-snow": {
@@ -1149,4 +1167,4 @@ export const QuillEditor = styled("div", {
   "& .ql-container.ql-snow": {
     border: "1px solid #ccc",
   },
-});
+});