@lets-events/react 7.2.0 → 8.0.0

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,
@@ -9080,11 +9083,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 +9199,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 +9218,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 +9346,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 +9381,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 +9410,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 +9433,9 @@ function Section(_a) {
   ButtonItem,
   ButtonItemStyled,
   Calendar,
+  Card,
+  CardContainer,
+  CardStyled,
   CheckboxGroup,
   CheckboxGroupStyled,
   CheckboxItem,

package/dist/index.mjs

@@ -9003,10 +9003,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 +9122,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 +9130,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 +9138,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 +9266,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 +9301,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 +9330,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 +9352,9 @@ export {
   ButtonItem,
   ButtonItemStyled,
   Calendar,
+  Card,
+  CardContainer,
+  CardStyled,
   CheckboxGroup,
   CheckboxGroupStyled,
   CheckboxItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "7.2.0",
+  "version": "8.0.0",
   "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/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>
+    )
+}

package/src/index.tsx

@@ -20,6 +20,7 @@ export * from './components/TimePicker'
 export * from './components/Alert'
 export * from './components/Switch'
 export * from './components/Step'
+export * from './components/Card'
 export * from './components/TextareaField'
 
 // Layouts