@lets-events/react 7.2.0 → 7.2.1

package/dist/index.js

@@ -1030,6 +1030,9 @@ __export(index_exports, {
   ButtonItem: () => ButtonItem,
   ButtonItemStyled: () => ButtonItemStyled,
   Calendar: () => Calendar,
+  Card: () => Card,
+  CardContainer: () => CardContainer,
+  CardStyled: () => CardStyled,
   CheckboxGroup: () => CheckboxGroup,
   CheckboxGroupStyled: () => CheckboxGroupStyled,
   CheckboxItem: () => CheckboxItem,
@@ -1044,6 +1047,7 @@ __export(index_exports, {
   Grid: () => Grid,
   GridStyled: () => GridStyled,
   Icon: () => Icon,
+  InputStyled: () => InputStyled,
   Modal: () => Modal,
   ModalContentStyled: () => ModalContentStyled,
   ModalStyled: () => ModalStyled,
@@ -8337,18 +8341,25 @@ function Calendar(_a) {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { ref: dropdownRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CalendarButtonStyled, { onClick: () => setShowCalendar((prev) => !prev), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      TextField,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      CalendarButtonStyled,
       {
-        placeholder: "00/00/0000",
-        type: "text",
-        value: inputValue,
-        onChange: handleInputChange,
-        inputMode: "numeric",
-        textAlign: "right",
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon_default, { name: "calendar", size: "xl" }) })
+        type: "button",
+        onClick: () => setShowCalendar((prev) => !prev),
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          TextField,
+          {
+            placeholder: "00/00/0000",
+            type: "text",
+            value: inputValue,
+            onChange: handleInputChange,
+            inputMode: "numeric",
+            textAlign: "right",
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon_default, { name: "calendar", size: "xl" }) })
+          }
+        )
       }
-    ) }),
+    ),
     showContainer && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       CalendarContentStyled,
       {
@@ -8373,6 +8384,7 @@ function Calendar(_a) {
             {
               variant: "text",
               color: "brand",
+              type: "button",
               onClick: () => {
                 setShowCalendar(false);
               },
@@ -8436,6 +8448,31 @@ var TimerPickerContentStyled = styled("div", {
     textAlign: "center!important"
   }
 });
+var InputStyled = styled("input", {
+  height: "$40",
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  color: "$dark500",
+  border: "1px solid $dark300",
+  position: "relative",
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  padding: "0",
+  outline: "none",
+  margin: 0,
+  textAlign: "center",
+  "&:has(input:focus)": {
+    border: "2px solid $brand300"
+  },
+  "&:has(input:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed"
+  }
+});
 function TimePicker({
   selected,
   setSelected,
@@ -8510,6 +8547,7 @@ function TimePicker({
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Button,
                     {
+                      type: "button",
                       variant: "text",
                       onClick: () => handleIncrement(unit),
                       children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -8541,20 +8579,18 @@ function TimePicker({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                    TextField,
+                    InputStyled,
                     {
                       value: unit === "hours" ? hours : minutes,
                       onChange: (e5) => handleInputValue(e5.target.value),
                       type: "text",
-                      placeholder: "00",
-                      typography: "labelSmall",
-                      fontWeight: "regular",
-                      textAlign: "center"
+                      placeholder: "00"
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Button,
                     {
+                      type: "button",
                       variant: "text",
                       onClick: () => handleDecrement(unit),
                       children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -8594,6 +8630,7 @@ function TimePicker({
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TimePickerFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
+              type: "button",
               variant: "text",
               color: "brand",
               onClick: () => handleInputValue(`${hours}:${minutes}`),
@@ -9080,11 +9117,66 @@ function StepWrapper(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes17.Box, __spreadProps(__spreadValues({}, props), { children }));
 }
 
-// src/components/TextareaField.tsx
+// src/components/Card.tsx
+var import_react8 = __toESM(require("react"));
 var import_themes18 = require("@radix-ui/themes");
-var import_react8 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var TextareaFieldStyle = styled(import_themes18.TextArea, {
+var CardStyled = styled(import_themes18.Card, {
+  display: "flex",
+  flexDirection: "column",
+  width: "370px",
+  borderRadius: "$2xl",
+  border: "1px solid $dark100",
+  overflow: "hidden",
+  padding: "16px",
+  defaultVariants: {
+    color: "primary",
+    boxShadow: true
+  },
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: "$dark50",
+        border: "1px solid $dark200"
+      },
+      disable: {
+        backgroundColor: "$grey50",
+        border: "1px solid $dark200"
+      },
+      error: {
+        backgroundColor: "$error50",
+        border: "1px solid $error600"
+      }
+    },
+    boxShadow: {
+      true: {
+        boxShadow: "0 2px 4px rgba(35, 53, 67, 0.16), 0 4px 4px rgba(35, 53, 67, 0.08)"
+      },
+      false: {
+        boxShadow: "none"
+      }
+    }
+  }
+});
+var CardContainer = styled(import_themes18.Box, {
+  display: "flex",
+  flexDirection: "row"
+});
+function Card(_a) {
+  var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CardStyled, __spreadProps(__spreadValues({}, props), { children: import_react8.default.Children.map(children, (child) => {
+    if (import_react8.default.isValidElement(child)) {
+      return import_react8.default.cloneElement(child, { size: props.size });
+    }
+    return child;
+  }) }));
+}
+
+// src/components/TextareaField.tsx
+var import_themes19 = require("@radix-ui/themes");
+var import_react9 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var TextareaFieldStyle = styled(import_themes19.TextArea, {
   display: "flex",
   width: "fit-content",
   flex: 1,
@@ -9141,18 +9233,18 @@ var TextareaLimitIndicator = styled("div", {
 });
 function TextareaField(_a) {
   var _b = _a, { maxLength } = _b, props = __objRest(_b, ["maxLength"]);
-  const inputRef = (0, import_react8.useRef)(null);
-  const badgeRef = (0, import_react8.useRef)(null);
+  const inputRef = (0, import_react9.useRef)(null);
+  const badgeRef = (0, import_react9.useRef)(null);
   if (!maxLength) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextareaContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextareaFieldStyle, __spreadProps(__spreadValues({}, props), { ref: inputRef })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaFieldStyle, __spreadProps(__spreadValues({}, props), { ref: inputRef })) });
   }
   const handleInput = () => {
     var _a2;
     const remainingChars = maxLength - (((_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value.length) || 0);
     if (badgeRef.current) badgeRef.current.textContent = String(remainingChars);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TextareaContainer, { css: { paddingBottom: "3.25rem" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TextareaContainer, { css: { paddingBottom: "3.25rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       TextareaFieldStyle,
       __spreadValues({
         ref: inputRef,
@@ -9160,14 +9252,14 @@ function TextareaField(_a) {
         maxLength
       }, props)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TextareaLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
   ] });
 }
 
 // src/components/Grid.tsx
-var import_themes19 = require("@radix-ui/themes");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var GridStyled = styled(import_themes19.Grid, {
+var import_themes20 = require("@radix-ui/themes");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var GridStyled = styled(import_themes20.Grid, {
   display: "grid",
   variants: {
     display: {
@@ -9288,13 +9380,13 @@ var GridStyled = styled(import_themes19.Grid, {
 });
 function Grid(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Container.tsx
-var import_themes20 = require("@radix-ui/themes");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var ContainerStyled = styled(import_themes20.Container, {
+var import_themes21 = require("@radix-ui/themes");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ContainerStyled = styled(import_themes21.Container, {
   variants: {
     size: {
       xs: { maxWidth: "576px" },
@@ -9323,13 +9415,13 @@ var ContainerStyled = styled(import_themes20.Container, {
 });
 function Container(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Section.tsx
-var import_themes21 = require("@radix-ui/themes");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var SectionStyled = styled(import_themes21.Section, {
+var import_themes22 = require("@radix-ui/themes");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var SectionStyled = styled(import_themes22.Section, {
   variants: {
     size: {
       xs: { maxWidth: "576px" },
@@ -9352,7 +9444,7 @@ var SectionStyled = styled(import_themes21.Section, {
 });
 function Section(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -9375,6 +9467,9 @@ function Section(_a) {
   ButtonItem,
   ButtonItemStyled,
   Calendar,
+  Card,
+  CardContainer,
+  CardStyled,
   CheckboxGroup,
   CheckboxGroupStyled,
   CheckboxItem,
@@ -9389,6 +9484,7 @@ function Section(_a) {
   Grid,
   GridStyled,
   Icon,
+  InputStyled,
   Modal,
   ModalContentStyled,
   ModalStyled,

package/dist/index.mjs

@@ -8260,18 +8260,25 @@ function Calendar(_a) {
     }
   };
   return /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsxs5(CalendarStyled, __spreadProps(__spreadValues({}, props), { ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx14(CalendarButtonStyled, { onClick: () => setShowCalendar((prev) => !prev), children: /* @__PURE__ */ jsx14(
-      TextField,
+    /* @__PURE__ */ jsx14(
+      CalendarButtonStyled,
       {
-        placeholder: "00/00/0000",
-        type: "text",
-        value: inputValue,
-        onChange: handleInputChange,
-        inputMode: "numeric",
-        textAlign: "right",
-        children: /* @__PURE__ */ jsx14(TextFieldSlot, { children: /* @__PURE__ */ jsx14(Icon_default, { name: "calendar", size: "xl" }) })
+        type: "button",
+        onClick: () => setShowCalendar((prev) => !prev),
+        children: /* @__PURE__ */ jsx14(
+          TextField,
+          {
+            placeholder: "00/00/0000",
+            type: "text",
+            value: inputValue,
+            onChange: handleInputChange,
+            inputMode: "numeric",
+            textAlign: "right",
+            children: /* @__PURE__ */ jsx14(TextFieldSlot, { children: /* @__PURE__ */ jsx14(Icon_default, { name: "calendar", size: "xl" }) })
+          }
+        )
       }
-    ) }),
+    ),
     showContainer && /* @__PURE__ */ jsxs5(
       CalendarContentStyled,
       {
@@ -8296,6 +8303,7 @@ function Calendar(_a) {
             {
               variant: "text",
               color: "brand",
+              type: "button",
               onClick: () => {
                 setShowCalendar(false);
               },
@@ -8359,6 +8367,31 @@ var TimerPickerContentStyled = styled("div", {
     textAlign: "center!important"
   }
 });
+var InputStyled = styled("input", {
+  height: "$40",
+  fontFamily: "$default",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  color: "$dark500",
+  border: "1px solid $dark300",
+  position: "relative",
+  display: "flex",
+  width: "100%",
+  alignItems: "center",
+  padding: "0",
+  outline: "none",
+  margin: 0,
+  textAlign: "center",
+  "&:has(input:focus)": {
+    border: "2px solid $brand300"
+  },
+  "&:has(input:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed"
+  }
+});
 function TimePicker({
   selected,
   setSelected,
@@ -8433,6 +8466,7 @@ function TimePicker({
                   /* @__PURE__ */ jsx15(
                     Button,
                     {
+                      type: "button",
                       variant: "text",
                       onClick: () => handleIncrement(unit),
                       children: /* @__PURE__ */ jsxs6(
@@ -8464,20 +8498,18 @@ function TimePicker({
                     }
                   ),
                   /* @__PURE__ */ jsx15(
-                    TextField,
+                    InputStyled,
                     {
                       value: unit === "hours" ? hours : minutes,
                       onChange: (e5) => handleInputValue(e5.target.value),
                       type: "text",
-                      placeholder: "00",
-                      typography: "labelSmall",
-                      fontWeight: "regular",
-                      textAlign: "center"
+                      placeholder: "00"
                     }
                   ),
                   /* @__PURE__ */ jsx15(
                     Button,
                     {
+                      type: "button",
                       variant: "text",
                       onClick: () => handleDecrement(unit),
                       children: /* @__PURE__ */ jsxs6(
@@ -8517,6 +8549,7 @@ function TimePicker({
           /* @__PURE__ */ jsx15(TimePickerFooterStyled, { children: /* @__PURE__ */ jsx15(
             Button,
             {
+              type: "button",
               variant: "text",
               color: "brand",
               onClick: () => handleInputValue(`${hours}:${minutes}`),
@@ -9003,10 +9036,65 @@ function StepWrapper(_a) {
   return /* @__PURE__ */ jsx18(Box2, __spreadProps(__spreadValues({}, props), { children }));
 }
 
+// src/components/Card.tsx
+import React5 from "react";
+import { Box as Box3, Card as CardRadix } from "@radix-ui/themes";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var CardStyled = styled(CardRadix, {
+  display: "flex",
+  flexDirection: "column",
+  width: "370px",
+  borderRadius: "$2xl",
+  border: "1px solid $dark100",
+  overflow: "hidden",
+  padding: "16px",
+  defaultVariants: {
+    color: "primary",
+    boxShadow: true
+  },
+  variants: {
+    color: {
+      primary: {
+        backgroundColor: "$dark50",
+        border: "1px solid $dark200"
+      },
+      disable: {
+        backgroundColor: "$grey50",
+        border: "1px solid $dark200"
+      },
+      error: {
+        backgroundColor: "$error50",
+        border: "1px solid $error600"
+      }
+    },
+    boxShadow: {
+      true: {
+        boxShadow: "0 2px 4px rgba(35, 53, 67, 0.16), 0 4px 4px rgba(35, 53, 67, 0.08)"
+      },
+      false: {
+        boxShadow: "none"
+      }
+    }
+  }
+});
+var CardContainer = styled(Box3, {
+  display: "flex",
+  flexDirection: "row"
+});
+function Card(_a) {
+  var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
+  return /* @__PURE__ */ jsx19(CardStyled, __spreadProps(__spreadValues({}, props), { children: React5.Children.map(children, (child) => {
+    if (React5.isValidElement(child)) {
+      return React5.cloneElement(child, { size: props.size });
+    }
+    return child;
+  }) }));
+}
+
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
 import { useRef as useRef3 } from "react";
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
   width: "fit-content",
@@ -9067,7 +9155,7 @@ function TextareaField(_a) {
   const inputRef = useRef3(null);
   const badgeRef = useRef3(null);
   if (!maxLength) {
-    return /* @__PURE__ */ jsx19(TextareaContainer, { children: /* @__PURE__ */ jsx19(TextareaFieldStyle, __spreadProps(__spreadValues({}, props), { ref: inputRef })) });
+    return /* @__PURE__ */ jsx20(TextareaContainer, { children: /* @__PURE__ */ jsx20(TextareaFieldStyle, __spreadProps(__spreadValues({}, props), { ref: inputRef })) });
   }
   const handleInput = () => {
     var _a2;
@@ -9075,7 +9163,7 @@ function TextareaField(_a) {
     if (badgeRef.current) badgeRef.current.textContent = String(remainingChars);
   };
   return /* @__PURE__ */ jsxs8(TextareaContainer, { css: { paddingBottom: "3.25rem" }, children: [
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       TextareaFieldStyle,
       __spreadValues({
         ref: inputRef,
@@ -9083,13 +9171,13 @@ function TextareaField(_a) {
         maxLength
       }, props)
     ),
-    /* @__PURE__ */ jsx19(TextareaLimitIndicator, { children: /* @__PURE__ */ jsx19(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
+    /* @__PURE__ */ jsx20(TextareaLimitIndicator, { children: /* @__PURE__ */ jsx20(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
   ] });
 }
 
 // src/components/Grid.tsx
 import { Grid as GridRadix } from "@radix-ui/themes";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var GridStyled = styled(GridRadix, {
   display: "grid",
   variants: {
@@ -9211,12 +9299,12 @@ var GridStyled = styled(GridRadix, {
 });
 function Grid(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx20(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx21(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Container.tsx
 import { Container as ContainerRadix } from "@radix-ui/themes";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ContainerStyled = styled(ContainerRadix, {
   variants: {
     size: {
@@ -9246,12 +9334,12 @@ var ContainerStyled = styled(ContainerRadix, {
 });
 function Container(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx21(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx22(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Section.tsx
 import { Section as SectionRadix } from "@radix-ui/themes";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var SectionStyled = styled(SectionRadix, {
   variants: {
     size: {
@@ -9275,7 +9363,7 @@ var SectionStyled = styled(SectionRadix, {
 });
 function Section(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx22(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx23(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 export {
   Alert,
@@ -9297,6 +9385,9 @@ export {
   ButtonItem,
   ButtonItemStyled,
   Calendar,
+  Card,
+  CardContainer,
+  CardStyled,
   CheckboxGroup,
   CheckboxGroupStyled,
   CheckboxItem,
@@ -9311,6 +9402,7 @@ export {
   Grid,
   GridStyled,
   Icon,
+  InputStyled,
   Modal,
   ModalContentStyled,
   ModalStyled,

package/package.json

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

package/src/components/Badge.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { ComponentProps, ElementType } from 'react'
 import { styled } from '../styles'
 import { Badge as BadgeRadix } from '@radix-ui/themes'
-import { fontWeights } from '@lets-events/tokens'
 export const BadgeStyled = styled(BadgeRadix, {
     fontFamily: '$default',
     borderRadius: '$sm',

package/src/components/Calendar/index.tsx

@@ -75,7 +75,10 @@ export function Calendar({
   return (
     <div>
       <CalendarStyled {...props} ref={dropdownRef}>
-        <CalendarButtonStyled onClick={() => setShowCalendar((prev) => !prev)}>
+        <CalendarButtonStyled
+          type="button"
+          onClick={() => setShowCalendar((prev) => !prev)}
+        >
           <TextField
             placeholder="00/00/0000"
             type="text"
@@ -114,6 +117,7 @@ export function Calendar({
                 <Button
                   variant="text"
                   color="brand"
+                  type="button"
                   onClick={() => {
                     setShowCalendar(false);
                   }}

package/src/components/Card.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { ComponentProps, ElementType } from 'react'
+import { styled } from '../styles'
+import { Box, Card as CardRadix } from '@radix-ui/themes'
+
+export const CardStyled = styled(CardRadix, {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '370px',
+    borderRadius: '$2xl',
+    border: '1px solid $dark100',
+    overflow: 'hidden',
+    padding: '16px',
+    defaultVariants: {
+        color: 'primary',
+        boxShadow: true,
+    },
+    variants: {
+        color: {
+            primary: {
+                backgroundColor: '$dark50',
+                border: '1px solid $dark200',
+            },
+            disable: {
+                backgroundColor: '$grey50',
+                border: '1px solid $dark200',
+            },
+            error: {
+                backgroundColor: '$error50',
+                border: '1px solid $error600',
+            }
+        },
+        boxShadow:{
+            true: {
+                boxShadow: '0 2px 4px rgba(35, 53, 67, 0.16), 0 4px 4px rgba(35, 53, 67, 0.08)',
+            },
+            false: {
+                boxShadow: 'none',
+            }
+        }
+    }
+});
+
+
+
+export const CardContainer = styled(Box, {
+    display: 'flex',
+    flexDirection: 'row'
+})
+
+export type CardProps = ComponentProps<typeof CardStyled> & {
+    children: React.ReactNode
+    as?: ElementType
+}
+
+
+
+export function Card({ asChild, children, ...props }: CardProps) {
+    return (
+        <CardStyled {...props}>
+            {React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                    return React.cloneElement(child, { size: props.size } as any)
+                }
+                return child
+            })}
+        </CardStyled>
+    )
+}