@lets-events/react 11.0.4 → 11.0.6

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@11.0.4 build
+> @lets-events/react@11.0.6 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist\index.mjs 275.57 KB
-ESM ⚡️ Build success in 232ms
-CJS dist\index.js 283.95 KB
-CJS ⚡️ Build success in 232ms
+ESM dist\index.mjs 275.82 KB
+ESM ⚡️ Build success in 219ms
+CJS dist\index.js 284.17 KB
+CJS ⚡️ Build success in 220ms
 DTS Build start
-DTS ⚡️ Build success in 3634ms
-DTS dist\index.d.mts 338.33 KB
-DTS dist\index.d.ts  338.33 KB
+DTS ⚡️ Build success in 3594ms
+DTS dist\index.d.mts 338.39 KB
+DTS dist\index.d.ts  338.39 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 11.0.6
+
+### Patch Changes
+
+- fix: textarea default rows
+
+## 11.0.5
+
+### Patch Changes
+
+- fixes for textareafield & textfield
+
 ## 11.0.4
 
 ### Patch Changes

package/dist/index.d.mts

@@ -10647,7 +10647,7 @@ type CardProps = ComponentProps<typeof CardStyled> & {
 };
 declare function Card({ asChild, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>, {
+declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<_radix_ui_themes.TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
@@ -11022,7 +11022,7 @@ declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledC
 type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
     limit: number;
 };
-declare function TextareaField({ maxLength, ...props }: TextareaFieldProps): react_jsx_runtime.JSX.Element;
+declare const TextareaField: react__default.ForwardRefExoticComponent<Omit<TextareaFieldProps, "ref"> & react__default.RefAttributes<HTMLTextAreaElement>>;
 
 type ToastType = 'success' | 'error' | 'warning' | 'info';
 interface ToastConfig {

package/dist/index.d.ts

@@ -10647,7 +10647,7 @@ type CardProps = ComponentProps<typeof CardStyled> & {
 };
 declare function Card({ asChild, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_radix_ui_themes.TextAreaProps & react.RefAttributes<HTMLTextAreaElement>>, {
+declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledComponent<react__default.ForwardRefExoticComponent<_radix_ui_themes.TextAreaProps & react__default.RefAttributes<HTMLTextAreaElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
@@ -11022,7 +11022,7 @@ declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledC
 type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
     limit: number;
 };
-declare function TextareaField({ maxLength, ...props }: TextareaFieldProps): react_jsx_runtime.JSX.Element;
+declare const TextareaField: react__default.ForwardRefExoticComponent<Omit<TextareaFieldProps, "ref"> & react__default.RefAttributes<HTMLTextAreaElement>>;
 
 type ToastType = 'success' | 'error' | 'warning' | 'info';
 interface ToastConfig {

package/dist/index.js

@@ -2600,6 +2600,7 @@ var TextFieldStyled = styled(import_themes7.TextField.Root, {
   alignItems: "center",
   padding: "0 $14",
   gap: "$14",
+  backgroundColor: "$dark50",
   input: {
     order: 1,
     outline: "none",
@@ -8754,37 +8755,35 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 var import_themes18 = require("@radix-ui/themes");
-var import_react8 = require("react");
+var import_react8 = __toESM(require("react"));
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var TextareaFieldStyle = styled(import_themes18.TextArea, {
   display: "flex",
-  width: "fit-content",
   flex: 1,
   textarea: {
     width: "100%",
-    minHeight: "3.75rem",
     border: "none",
     padding: "$12 $14",
     fontFamily: "$default",
-    fontSize: "$16",
     outline: "none",
-    resize: "vertical"
+    resize: "vertical",
+    height: "auto"
   },
   variants: {
     typography: typographyValues
   },
   defaultVariants: {
-    typography: "bodyM"
+    typography: "labelSmall"
   }
 });
 var TextareaContainer = styled("div", {
-  position: "relative",
   display: "flex",
+  flexDirection: "column",
   overflow: "hidden",
-  // width: '100%',
+  width: "100%",
   border: "1px solid",
   borderColor: "$dark300",
-  borderRadius: "$2xs",
+  borderRadius: "$sm",
   "&:has(textarea:focus)": {
     border: "1px solid $brand300"
   },
@@ -8796,14 +8795,12 @@ var TextareaContainer = styled("div", {
   }
 });
 var TextareaLimitIndicator = styled("div", {
-  position: "absolute",
-  bottom: 0,
-  left: 0,
   padding: "$12 $16",
   borderTop: "1px solid $neutral300",
   width: "100%",
   flex: 1,
   display: "flex",
+  backgroundColor: "$dark50",
   span: {
     backgroundColor: "$neutral200",
     color: "$neutral700",
@@ -8811,30 +8808,43 @@ var TextareaLimitIndicator = styled("div", {
     padding: "$4"
   }
 });
-function TextareaField(_a) {
+var TextareaField = import_react8.default.forwardRef((_a, fowardedRef) => {
   var _b = _a, { maxLength } = _b, props = __objRest(_b, ["maxLength"]);
   const inputRef = (0, import_react8.useRef)(null);
   const badgeRef = (0, import_react8.useRef)(null);
-  if (!maxLength) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaFieldStyle, __spreadProps(__spreadValues({}, props), { ref: inputRef })) });
-  }
-  const handleInput = () => {
+  const updateCharCountBadge = () => {
+    var _a2, _b2;
+    if (!maxLength || !badgeRef.current) return;
+    const remainingChars = maxLength - ((_b2 = (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value.length) != null ? _b2 : 0);
+    badgeRef.current.textContent = String(remainingChars);
+  };
+  const handleInput = (e) => {
     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);
+    updateCharCountBadge();
+    (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TextareaContainer, { css: { paddingBottom: "3.25rem" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TextareaContainer, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       TextareaFieldStyle,
       __spreadValues({
-        ref: inputRef,
+        rows: 4,
+        ref: (r) => {
+          if (!r) return;
+          inputRef.current = r;
+          if (fowardedRef) {
+            if (typeof fowardedRef === "function") fowardedRef(r);
+            else {
+              fowardedRef.current = r;
+            }
+          }
+        },
         onInput: handleInput,
         maxLength
       }, props)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
+    maxLength && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TextareaLimitIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
   ] });
-}
+});
 
 // src/components/Toast/components/ToastItem.tsx
 var import_react10 = require("react");

package/dist/index.mjs

@@ -2514,6 +2514,7 @@ var TextFieldStyled = styled(TextFieldRadix.Root, {
   alignItems: "center",
   padding: "0 $14",
   gap: "$14",
+  backgroundColor: "$dark50",
   input: {
     order: 1,
     outline: "none",
@@ -8668,37 +8669,35 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import { useRef as useRef3 } from "react";
+import React6, { useRef as useRef3 } from "react";
 import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
-  width: "fit-content",
   flex: 1,
   textarea: {
     width: "100%",
-    minHeight: "3.75rem",
     border: "none",
     padding: "$12 $14",
     fontFamily: "$default",
-    fontSize: "$16",
     outline: "none",
-    resize: "vertical"
+    resize: "vertical",
+    height: "auto"
   },
   variants: {
     typography: typographyValues
   },
   defaultVariants: {
-    typography: "bodyM"
+    typography: "labelSmall"
   }
 });
 var TextareaContainer = styled("div", {
-  position: "relative",
   display: "flex",
+  flexDirection: "column",
   overflow: "hidden",
-  // width: '100%',
+  width: "100%",
   border: "1px solid",
   borderColor: "$dark300",
-  borderRadius: "$2xs",
+  borderRadius: "$sm",
   "&:has(textarea:focus)": {
     border: "1px solid $brand300"
   },
@@ -8710,14 +8709,12 @@ var TextareaContainer = styled("div", {
   }
 });
 var TextareaLimitIndicator = styled("div", {
-  position: "absolute",
-  bottom: 0,
-  left: 0,
   padding: "$12 $16",
   borderTop: "1px solid $neutral300",
   width: "100%",
   flex: 1,
   display: "flex",
+  backgroundColor: "$dark50",
   span: {
     backgroundColor: "$neutral200",
     color: "$neutral700",
@@ -8725,30 +8722,43 @@ var TextareaLimitIndicator = styled("div", {
     padding: "$4"
   }
 });
-function TextareaField(_a) {
+var TextareaField = React6.forwardRef((_a, fowardedRef) => {
   var _b = _a, { maxLength } = _b, props = __objRest(_b, ["maxLength"]);
   const inputRef = useRef3(null);
   const badgeRef = useRef3(null);
-  if (!maxLength) {
-    return /* @__PURE__ */ jsx20(TextareaContainer, { children: /* @__PURE__ */ jsx20(TextareaFieldStyle, __spreadProps(__spreadValues({}, props), { ref: inputRef })) });
-  }
-  const handleInput = () => {
+  const updateCharCountBadge = () => {
+    var _a2, _b2;
+    if (!maxLength || !badgeRef.current) return;
+    const remainingChars = maxLength - ((_b2 = (_a2 = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a2.value.length) != null ? _b2 : 0);
+    badgeRef.current.textContent = String(remainingChars);
+  };
+  const handleInput = (e) => {
     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);
+    updateCharCountBadge();
+    (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ jsxs8(TextareaContainer, { css: { paddingBottom: "3.25rem" }, children: [
+  return /* @__PURE__ */ jsxs8(TextareaContainer, { children: [
     /* @__PURE__ */ jsx20(
       TextareaFieldStyle,
       __spreadValues({
-        ref: inputRef,
+        rows: 4,
+        ref: (r) => {
+          if (!r) return;
+          inputRef.current = r;
+          if (fowardedRef) {
+            if (typeof fowardedRef === "function") fowardedRef(r);
+            else {
+              fowardedRef.current = r;
+            }
+          }
+        },
         onInput: handleInput,
         maxLength
       }, props)
     ),
-    /* @__PURE__ */ jsx20(TextareaLimitIndicator, { children: /* @__PURE__ */ jsx20(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
+    maxLength && /* @__PURE__ */ jsx20(TextareaLimitIndicator, { children: /* @__PURE__ */ jsx20(Text, { typography: "badgeMedium", ref: badgeRef, children: maxLength }) })
   ] });
-}
+});
 
 // src/components/Toast/components/ToastItem.tsx
 import { useState as useState3 } from "react";

package/package.json

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

package/src/components/TextField.tsx

@@ -20,6 +20,7 @@ export const TextFieldStyled = styled(TextFieldRadix.Root, {
   alignItems: "center",
   padding: "0 $14",
   gap: "$14",
+  backgroundColor: '$dark50',
   input: {
     order: 1,
     outline: "none",

package/src/components/TextareaField.tsx

@@ -1,101 +1,112 @@
-import { TextArea as TextAreaRadix } from '@radix-ui/themes'
-import { styled } from '../styles'
-import { ComponentProps, useRef } from 'react'
-import { typographyValues } from '../types/typographyValues'
-import { Text } from './Text'
+import { TextArea as TextAreaRadix, Flex, Box } from "@radix-ui/themes";
+import { styled } from "../styles";
+import React, { ComponentProps, useRef } from "react";
+
+import { typographyValues } from "../types/typographyValues";
+import { Text } from "./Text";
 
 export const TextareaFieldStyle = styled(TextAreaRadix, {
-  display: 'flex',
-  width: 'fit-content',
+  display: "flex",
   flex: 1,
   textarea: {
-    width: '100%',
-    minHeight: '3.75rem',
-    border: 'none',
-    padding: '$12 $14',
-    fontFamily: '$default',
-    fontSize: '$16',
-    outline: 'none',
-    resize: 'vertical',
+    width: "100%",
+    border: "none",
+    padding: "$12 $14",
+    fontFamily: "$default",
+    outline: "none",
+    resize: "vertical",
+    height: "auto",
   },
   variants: {
     typography: typographyValues,
   },
   defaultVariants: {
-    typography: 'bodyM',
+    typography: "labelSmall",
   },
-})
+});
 
 export type TextareaFieldProps = ComponentProps<typeof TextareaFieldStyle> & {
-  limit: number
-}
+  limit: number;
+};
 
-const TextareaContainer = styled('div', {
-  position: 'relative',
-  display: 'flex',
-  overflow: 'hidden',
-  // width: '100%',
-  border: '1px solid',
-  borderColor: '$dark300',
-  borderRadius: '$2xs',
+const TextareaContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  width: "100%",
+  border: "1px solid",
+  borderColor: "$dark300",
+  borderRadius: "$sm",
 
-  '&:has(textarea:focus)': {
-    border: '1px solid $brand300',
+  "&:has(textarea:focus)": {
+    border: "1px solid $brand300",
   },
-  '&:has(textarea:disabled)': {
-    backgroundColor: '$dark100',
-    color: '$dark400',
-    border: '1px solid $dark200',
-    cursor: 'not-allowed',
+  "&:has(textarea:disabled)": {
+    backgroundColor: "$dark100",
+    color: "$dark400",
+    border: "1px solid $dark200",
+    cursor: "not-allowed",
   },
-})
+});
 
-const TextareaLimitIndicator = styled('div', {
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  padding: '$12 $16',
-  borderTop: '1px solid $neutral300',
-  width: '100%',
+const TextareaLimitIndicator = styled("div", {
+  padding: "$12 $16",
+  borderTop: "1px solid $neutral300",
+  width: "100%",
   flex: 1,
-  display: 'flex',
+  display: "flex",
+  backgroundColor: "$dark50",
   span: {
-    backgroundColor: '$neutral200',
-    color: '$neutral700',
-    borderRadius: '$2xs',
-    padding: '$4',
+    backgroundColor: "$neutral200",
+    color: "$neutral700",
+    borderRadius: "$2xs",
+    padding: "$4",
   },
-})
+});
+
+export const TextareaField = React.forwardRef<
+  HTMLTextAreaElement,
+  TextareaFieldProps
+>(({ maxLength, ...props }, fowardedRef) => {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const badgeRef = useRef<HTMLSpanElement>(null);
 
-export function TextareaField({ maxLength, ...props }: TextareaFieldProps) {
-  const inputRef = useRef<HTMLTextAreaElement>(null)
-  const badgeRef = useRef<HTMLSpanElement>(null)
+  const updateCharCountBadge = () => {
+    if (!maxLength || !badgeRef.current) return;
+    const remainingChars = maxLength - (inputRef?.current?.value.length ?? 0);
+    badgeRef.current.textContent = String(remainingChars);
+  };
 
-  if (!maxLength) {
-    return (
-      <TextareaContainer>
-        <TextareaFieldStyle {...props} ref={inputRef}></TextareaFieldStyle>
-      </TextareaContainer>
-    )
-  }
-  const handleInput = () => {
-    const remainingChars = maxLength - (inputRef?.current?.value.length || 0)
-    if (badgeRef.current) badgeRef.current.textContent = String(remainingChars)
-  }
+  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    updateCharCountBadge();
+    props.onInput?.(e);
+  };
 
   return (
-    <TextareaContainer css={{ paddingBottom: '3.25rem' }}>
+    <TextareaContainer>
       <TextareaFieldStyle
-        ref={inputRef}
+        rows={4}
+        ref={(r) => {
+          if (!r) return;
+          inputRef.current = r;
+          if (fowardedRef) {
+            if (typeof fowardedRef === "function") fowardedRef(r);
+            else {
+              fowardedRef.current = r;
+            }
+          }
+        }}
         onInput={handleInput}
         maxLength={maxLength}
         {...props}
-      ></TextareaFieldStyle>
-      <TextareaLimitIndicator>
-        <Text typography={'badgeMedium'} ref={badgeRef}>
-          {maxLength}
-        </Text>
-      </TextareaLimitIndicator>
+      />
+      {maxLength && (
+        <TextareaLimitIndicator>
+          <Text typography={"badgeMedium"} ref={badgeRef}>
+            {maxLength}
+          </Text>
+        </TextareaLimitIndicator>
+      )}
     </TextareaContainer>
-  )
-}
+  );
+});