@usefui/components 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @usefui/components
 
+## 1.5.3
+
+### Patch Changes
+
+- Update components and design tokens
+
 ## 1.5.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1317,16 +1317,23 @@ type ScrollContainerProps = {
     $trackColor?: string;
     $thumbHoverColor?: string;
 };
-interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, IComponentStyling, IComponentVariant {
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, IComponentStyling, IComponentSize, IComponentVariant {
+    resizable?: boolean;
+    shape?: "square" | "smooth";
 }
 /**
  * Textarea are used to allow users to write large chunks of text.
  *
  * @param {TextareaProps} props - The props for the Textarea component.
+ * @param {string} props.variant - The style definition used by the component.  Defaults to `secondary`.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {boolean} props.resizable - Define whether the component is resizable or not. Defaults to 'true'.
+ *
  * @returns {ReactElement} The TextareaProps component.
  */
 declare const Textarea: {
-    ({ onChange, ...props }: TextareaProps): React$1.JSX.Element;
+    (props: TextareaProps): React$1.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1317,16 +1317,23 @@ type ScrollContainerProps = {
     $trackColor?: string;
     $thumbHoverColor?: string;
 };
-interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, IComponentStyling, IComponentVariant {
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, IComponentStyling, IComponentSize, IComponentVariant {
+    resizable?: boolean;
+    shape?: "square" | "smooth";
 }
 /**
  * Textarea are used to allow users to write large chunks of text.
  *
  * @param {TextareaProps} props - The props for the Textarea component.
+ * @param {string} props.variant - The style definition used by the component.  Defaults to `secondary`.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {boolean} props.resizable - Define whether the component is resizable or not. Defaults to 'true'.
+ *
  * @returns {ReactElement} The TextareaProps component.
  */
 declare const Textarea: {
-    ({ onChange, ...props }: TextareaProps): React$1.JSX.Element;
+    (props: TextareaProps): React$1.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -2099,6 +2099,7 @@ var FieldDefaultStyles = import_styled_components10.css`
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
 
   font-size: var(--fontsize-medium-20);
 
@@ -3862,80 +3863,36 @@ var CustomScrollbar2 = import_styled_components23.css`
   scrollbar-width: thin;
   scrollbar-color: ${({ $thumbColor, $trackColor }) => `${$thumbColor ?? "var(--font-color-alpha-10)"} ${$trackColor ?? "transparent"}`};
 `;
+var TextareaSizeStyles = import_styled_components23.css`
+  padding: var(--measurement-medium-30);
+  max-height: var(--measurement-large-60);
+
+  &[data-size="small"] {
+    min-height: var(--measurement-large-30);
+  }
+  &[data-size="medium"] {
+    min-height: var(--measurement-large-50);
+  }
+  &[data-size="large"] {
+    min-height: var(--measurement-large-60);
+    max-height: var(--measurement-large-80);
+  }
+`;
+var TextareaResizableStyles = import_styled_components23.css`
+  &[data-resizable="true"] {
+    resize: vertical;
+  }
+  &[data-resizable="false"] {
+    resize: none;
+  }
+`;
 var TextAreaContainer = import_styled_components23.default.textarea`
   &[data-raw="false"] {
-    resize: vertical;
-    max-height: var(--measurement-large-60);
-    min-height: auto;
-    width: 100%;
-
-    overflow-y: auto;
-
-    outline: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    font-size: var(--fontsize-small-80);
-    padding: var(--measurement-medium-30) var(--measurement-medium-30)
-      var(--measurement-large-10) var(--measurement-medium-30);
-
-    font-weight: 500;
-    line-height: 1.1;
-    letter-spacing: calc(
-      var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
-    );
-
-    border: var(--measurement-small-10) solid transparent;
-    border-radius: var(--measurement-medium-30);
-    backdrop-filter: blur(var(--measurement-small-10));
-    color: var(--font-color-alpha-60);
-
-    transition: all ease-in-out 0.2s;
-
-    svg,
-    span,
-    img {
-      opacity: 0.6;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--font-color);
-
-      svg,
-      span,
-      img {
-        opacity: 1;
-      }
-    }
-    &::placeholder {
-      color: var(--font-color-alpha-30);
-    }
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    &::placeholder {
-      color: var(--font-color-alpha-30);
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
+    ${FieldDefaultStyles}
+    ${FieldShapeStyles}
 
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    &[data-error="true"] {
-      &::placeholder {
-        color: var(--alpha-red-30);
-      }
-    }
+    ${TextareaSizeStyles}
+    ${TextareaResizableStyles}
 
     ${CustomScrollbar2}
     ${FieldVariantsStyles}
@@ -3943,7 +3900,8 @@ var TextAreaContainer = import_styled_components23.default.textarea`
 `;
 
 // src/text-area/index.tsx
-var Textarea = ({ onChange, ...props }) => {
+var Textarea = (props) => {
+  const { raw, shape, sizing, variant, resizable, onChange } = props;
   const textareaRef = import_react39.default.useRef(null);
   const adjustHeight = () => {
     const textarea = textareaRef.current;
@@ -3960,16 +3918,19 @@ var Textarea = ({ onChange, ...props }) => {
     onChange?.(e);
   };
   import_react39.default.useEffect(() => adjustHeight(), [props.value]);
-  return /* @__PURE__ */ import_react39.default.createElement(Field.Wrapper, { className: "w-100 h-auto" }, /* @__PURE__ */ import_react39.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(
     TextAreaContainer,
     {
       ref: textareaRef,
       onChange: handleChange,
-      "data-variant": props.variant ?? "secondary",
-      "data-raw": String(Boolean(props?.raw)),
+      "data-variant": variant ?? "secondary",
+      "data-shape": shape ?? "smooth",
+      "data-size": sizing ?? "medium" /* Medium */,
+      "data-resizable": resizable,
+      "data-raw": String(Boolean(raw)),
       ...props
     }
-  ));
+  );
 };
 Textarea.displayName = "Textarea";
 
@@ -4336,11 +4297,12 @@ var Tooltip = ({
   const contentRef = import_react43.default.useRef(null);
   const timeoutRef = import_react43.default.useRef(null);
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
-  const bodyRect = import_react43.default.useCallback(() => {
+  const bodyRect = () => {
     if (typeof document !== "undefined") {
-      return document.body.getBoundingClientRect();
+      return document?.body?.getBoundingClientRect();
     }
-  }, []);
+    return void 0;
+  };
   const positions = {
     btt: `calc((${triggerProps?.top}px - ${contentProps?.height}px) - (var(--measurement-medium-10)))`,
     ttb: `calc((${triggerProps?.top}px + ${triggerProps?.height}px) + var(--measurement-medium-10))`,

package/dist/index.mjs

@@ -1972,6 +1972,7 @@ var FieldDefaultStyles = css8`
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
 
   font-size: var(--fontsize-medium-20);
 
@@ -3735,80 +3736,36 @@ var CustomScrollbar2 = css15`
   scrollbar-width: thin;
   scrollbar-color: ${({ $thumbColor, $trackColor }) => `${$thumbColor ?? "var(--font-color-alpha-10)"} ${$trackColor ?? "transparent"}`};
 `;
+var TextareaSizeStyles = css15`
+  padding: var(--measurement-medium-30);
+  max-height: var(--measurement-large-60);
+
+  &[data-size="small"] {
+    min-height: var(--measurement-large-30);
+  }
+  &[data-size="medium"] {
+    min-height: var(--measurement-large-50);
+  }
+  &[data-size="large"] {
+    min-height: var(--measurement-large-60);
+    max-height: var(--measurement-large-80);
+  }
+`;
+var TextareaResizableStyles = css15`
+  &[data-resizable="true"] {
+    resize: vertical;
+  }
+  &[data-resizable="false"] {
+    resize: none;
+  }
+`;
 var TextAreaContainer = styled23.textarea`
   &[data-raw="false"] {
-    resize: vertical;
-    max-height: var(--measurement-large-60);
-    min-height: auto;
-    width: 100%;
-
-    overflow-y: auto;
-
-    outline: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    font-size: var(--fontsize-small-80);
-    padding: var(--measurement-medium-30) var(--measurement-medium-30)
-      var(--measurement-large-10) var(--measurement-medium-30);
-
-    font-weight: 500;
-    line-height: 1.1;
-    letter-spacing: calc(
-      var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
-    );
-
-    border: var(--measurement-small-10) solid transparent;
-    border-radius: var(--measurement-medium-30);
-    backdrop-filter: blur(var(--measurement-small-10));
-    color: var(--font-color-alpha-60);
-
-    transition: all ease-in-out 0.2s;
-
-    svg,
-    span,
-    img {
-      opacity: 0.6;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--font-color);
-
-      svg,
-      span,
-      img {
-        opacity: 1;
-      }
-    }
-    &::placeholder {
-      color: var(--font-color-alpha-30);
-    }
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    &::placeholder {
-      color: var(--font-color-alpha-30);
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
+    ${FieldDefaultStyles}
+    ${FieldShapeStyles}
 
-    &:disabled {
-      cursor: not-allowed;
-    }
-
-    &[data-error="true"] {
-      &::placeholder {
-        color: var(--alpha-red-30);
-      }
-    }
+    ${TextareaSizeStyles}
+    ${TextareaResizableStyles}
 
     ${CustomScrollbar2}
     ${FieldVariantsStyles}
@@ -3816,7 +3773,8 @@ var TextAreaContainer = styled23.textarea`
 `;
 
 // src/text-area/index.tsx
-var Textarea = ({ onChange, ...props }) => {
+var Textarea = (props) => {
+  const { raw, shape, sizing, variant, resizable, onChange } = props;
   const textareaRef = React37.useRef(null);
   const adjustHeight = () => {
     const textarea = textareaRef.current;
@@ -3833,16 +3791,19 @@ var Textarea = ({ onChange, ...props }) => {
     onChange?.(e);
   };
   React37.useEffect(() => adjustHeight(), [props.value]);
-  return /* @__PURE__ */ React37.createElement(Field.Wrapper, { className: "w-100 h-auto" }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React37.createElement(
     TextAreaContainer,
     {
       ref: textareaRef,
       onChange: handleChange,
-      "data-variant": props.variant ?? "secondary",
-      "data-raw": String(Boolean(props?.raw)),
+      "data-variant": variant ?? "secondary",
+      "data-shape": shape ?? "smooth",
+      "data-size": sizing ?? "medium" /* Medium */,
+      "data-resizable": resizable,
+      "data-raw": String(Boolean(raw)),
       ...props
     }
-  ));
+  );
 };
 Textarea.displayName = "Textarea";
 
@@ -4209,11 +4170,12 @@ var Tooltip = ({
   const contentRef = React41.useRef(null);
   const timeoutRef = React41.useRef(null);
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
-  const bodyRect = React41.useCallback(() => {
+  const bodyRect = () => {
     if (typeof document !== "undefined") {
-      return document.body.getBoundingClientRect();
+      return document?.body?.getBoundingClientRect();
     }
-  }, []);
+    return void 0;
+  };
   const positions = {
     btt: `calc((${triggerProps?.top}px - ${contentProps?.height}px) - (var(--measurement-medium-10)))`,
     ttb: `calc((${triggerProps?.top}px + ${triggerProps?.height}px) + var(--measurement-medium-10))`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefui/components",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Open Source React components library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -33,7 +33,7 @@
     "typescript": "^5.9.3",
     "@usefui/core": "^1.3.4",
     "@usefui/hooks": "^1.3.4",
-    "@usefui/tokens": "^1.5.3"
+    "@usefui/tokens": "^1.5.4"
   },
   "scripts": {
     "test": "vitest run --coverage --logHeapUsage",

package/src/field/styles/index.ts

@@ -6,6 +6,7 @@ export const FieldDefaultStyles = css`
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
 
   font-size: var(--fontsize-medium-20);
 

package/src/text-area/Textarea.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+
 import { Page, Textarea } from "..";
+import { TComponentSize } from "../../../../types";
 
 /**
  * Textarea are used to allow users to write large chunks of text.
@@ -16,11 +18,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     variant: "secondary",
+    resizable: false,
   },
   render: ({ ...args }) => (
     <Page>
-      <Page.Content className="p-large-30">
-        <Textarea {...args} />
+      <Page.Content className="p-large-30 flex flex-column g-large-10">
+        {["small", "medium", "large"].map((size) => (
+          <Textarea key={size} sizing={size as TComponentSize} {...args} />
+        ))}
       </Page.Content>
     </Page>
   ),

package/src/text-area/index.tsx

@@ -3,9 +3,13 @@
 import React from "react";
 
 import { TextAreaContainer } from "./styles";
-import { Field } from "../field";
-
-import type { IComponentStyling, IComponentVariant } from "../../../../types";
+import {
+  IComponentSize,
+  IComponentStyling,
+  IComponentVariant,
+  TComponentShape,
+  ComponentSizeEnum,
+} from "../../../../types";
 
 export type ScrollContainerProps = {
   $height?: string;
@@ -18,15 +22,26 @@ export type ScrollContainerProps = {
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     IComponentStyling,
-    IComponentVariant {}
+    IComponentSize,
+    IComponentVariant {
+  resizable?: boolean;
+  shape?: "square" | "smooth";
+}
 
 /**
  * Textarea are used to allow users to write large chunks of text.
  *
  * @param {TextareaProps} props - The props for the Textarea component.
+ * @param {string} props.variant - The style definition used by the component.  Defaults to `secondary`.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {boolean} props.resizable - Define whether the component is resizable or not. Defaults to 'true'.
+ *
  * @returns {ReactElement} The TextareaProps component.
  */
-export const Textarea = ({ onChange, ...props }: TextareaProps) => {
+export const Textarea = (props: TextareaProps) => {
+  const { raw, shape, sizing, variant, resizable, onChange } = props;
+
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
 
   const adjustHeight = () => {
@@ -48,15 +63,16 @@ export const Textarea = ({ onChange, ...props }: TextareaProps) => {
   React.useEffect(() => adjustHeight(), [props.value]);
 
   return (
-    <Field.Wrapper className="w-100 h-auto">
-      <TextAreaContainer
-        ref={textareaRef}
-        onChange={handleChange}
-        data-variant={props.variant ?? "secondary"}
-        data-raw={String(Boolean(props?.raw))}
-        {...props}
-      />
-    </Field.Wrapper>
+    <TextAreaContainer
+      ref={textareaRef}
+      onChange={handleChange}
+      data-variant={variant ?? "secondary"}
+      data-shape={shape ?? "smooth"}
+      data-size={sizing ?? ComponentSizeEnum.Medium}
+      data-resizable={resizable}
+      data-raw={String(Boolean(raw))}
+      {...props}
+    />
   );
 };
 Textarea.displayName = "Textarea";

package/src/text-area/styles/index.ts

@@ -1,7 +1,11 @@
 "use client";
 
 import styled, { css } from "styled-components";
-import { FieldDefaultStyles, FieldVariantsStyles } from "../../field/styles";
+import {
+  FieldShapeStyles,
+  FieldDefaultStyles,
+  FieldVariantsStyles,
+} from "../../field/styles";
 
 import type { ScrollContainerProps } from "text-area";
 
@@ -42,81 +46,37 @@ const CustomScrollbar = css<ScrollContainerProps>`
       $trackColor ?? "transparent"
     }`};
 `;
+const TextareaSizeStyles = css`
+  padding: var(--measurement-medium-30);
+  max-height: var(--measurement-large-60);
 
-export const TextAreaContainer = styled.textarea<ScrollContainerProps>`
-  &[data-raw="false"] {
+  &[data-size="small"] {
+    min-height: var(--measurement-large-30);
+  }
+  &[data-size="medium"] {
+    min-height: var(--measurement-large-50);
+  }
+  &[data-size="large"] {
+    min-height: var(--measurement-large-60);
+    max-height: var(--measurement-large-80);
+  }
+`;
+const TextareaResizableStyles = css`
+  &[data-resizable="true"] {
     resize: vertical;
-    max-height: var(--measurement-large-60);
-    min-height: auto;
-    width: 100%;
-
-    overflow-y: auto;
-
-    outline: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    font-size: var(--fontsize-small-80);
-    padding: var(--measurement-medium-30) var(--measurement-medium-30)
-      var(--measurement-large-10) var(--measurement-medium-30);
-
-    font-weight: 500;
-    line-height: 1.1;
-    letter-spacing: calc(
-      var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
-    );
-
-    border: var(--measurement-small-10) solid transparent;
-    border-radius: var(--measurement-medium-30);
-    backdrop-filter: blur(var(--measurement-small-10));
-    color: var(--font-color-alpha-60);
-
-    transition: all ease-in-out 0.2s;
-
-    svg,
-    span,
-    img {
-      opacity: 0.6;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--font-color);
-
-      svg,
-      span,
-      img {
-        opacity: 1;
-      }
-    }
-    &::placeholder {
-      color: var(--font-color-alpha-30);
-    }
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    &::placeholder {
-      color: var(--font-color-alpha-30);
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
+  }
+  &[data-resizable="false"] {
+    resize: none;
+  }
+`;
 
-    &:disabled {
-      cursor: not-allowed;
-    }
+export const TextAreaContainer = styled.textarea<ScrollContainerProps>`
+  &[data-raw="false"] {
+    ${FieldDefaultStyles}
+    ${FieldShapeStyles}
 
-    &[data-error="true"] {
-      &::placeholder {
-        color: var(--alpha-red-30);
-      }
-    }
+    ${TextareaSizeStyles}
+    ${TextareaResizableStyles}
 
     ${CustomScrollbar}
     ${FieldVariantsStyles}

package/src/tooltip/index.tsx

@@ -59,11 +59,12 @@ const Tooltip = ({
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
-  const bodyRect = React.useCallback(() => {
+  const bodyRect = (): DOMRect | undefined => {
     if (typeof document !== "undefined") {
-      return document.body.getBoundingClientRect();
+      return document?.body?.getBoundingClientRect();
     }
-  }, []);
+    return undefined;
+  };
 
   const positions = {
     btt: `calc((${triggerProps?.top}px - ${contentProps?.height}px) - (var(--measurement-medium-10)))`,