@soul-refiner/design-system 0.2.69 → 0.2.71

package/dist/components/input/filter/filter.js

@@ -155,6 +155,7 @@ const Outlined = styled.button `
   border: 1px solid var(--color-grey-8);
   border-radius: 8px;
   background-color: var(--color-white);
+  font-family: var(--font-inter);
 
   &:hover {
     background-color: var(--color-grey-9);
@@ -165,6 +166,7 @@ const Pill = styled.button `
   ${Styles.flex}
   border-radius: 24px;
   background-color: var(--color-primary-blue-4);
+  font-family: var(--font-inter);
 
   & > * {
     color: var(--color-primary-blue-2);
@@ -181,6 +183,7 @@ const Labeled = styled.button `
   border-radius: 24px;
   border: 1px solid var(--color-grey-8);
   background-color: var(--color-white);
+  font-family: var(--font-inter);
 
   &:hover {
     background-color: var(--color-grey-9);
@@ -196,6 +199,7 @@ const Avatar = styled.button `
   ${Styles.flex}
   padding: 4px 16px;
   border-radius: 32px;
+  font-family: var(--font-inter);
 
   &:hover {
     background-color: var(--color-grey-10);
@@ -217,6 +221,7 @@ const Text = styled.button `
   gap: 8px;
   background-color: transparent;
   border-radius: 32px;
+  font-family: var(--font-inter);
 
   &:hover {
     background-color: var(--color-grey-10);

package/dist/components/input/index.d.ts

@@ -10,5 +10,7 @@ export { Search } from './search';
 export type { SearchProps } from './search';
 export { Select } from './select';
 export type { SelectProps } from './select';
+export { TextArea } from './text_area';
+export type { TextAreaProps } from './text_area';
 export { TextInput } from './text_input';
 export type { TextInputProps } from './text_input';

package/dist/components/input/index.js

@@ -4,4 +4,5 @@ export { Filter } from './filter';
 export { Radio } from './radio';
 export { Search } from './search';
 export { Select } from './select';
+export { TextArea } from './text_area';
 export { TextInput } from './text_input';

package/dist/components/input/text_area/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea } from './text_area';
+export type { TextAreaProps } from './text_area';

package/dist/components/input/text_area/index.js

@@ -0,0 +1 @@
+export { TextArea } from './text_area';

package/dist/components/input/text_area/text_area.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export type Props = {
+    disabled?: boolean | never;
+    successful?: boolean | never;
+    warning?: boolean | never;
+    bg?: string;
+    icon?: React.ReactElement;
+    helperText?: string;
+    label?: string;
+    maxCharacters?: number;
+    /**
+     * @param minHeight if set, this will make the textarea grow with the text inputted
+     * @see resize !! do not use with resize={true} !!
+     */
+    minHeight?: number;
+    minWidth?: number;
+    name?: string;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    placeholder?: string;
+    /**
+     * @param resize the user can change the size of the textarea
+     * @see resize !! do not use with minHeight !!
+     */
+    resize?: boolean;
+    sx?: string;
+    value: string | string[];
+};
+interface DisabledProps extends Props {
+    disabled?: true;
+    successful?: false | never;
+    warning?: false | never;
+}
+interface SuccessfulProps extends Props {
+    disabled?: false | never;
+    successful?: true;
+    warning?: false | never;
+}
+interface WarningProps extends Props {
+    disabled?: false | never;
+    successful?: false | never;
+    warning?: true;
+}
+export type TextAreaProps = DisabledProps | SuccessfulProps | WarningProps;
+export declare const TextArea: ({ bg, disabled, helperText, icon, label, maxCharacters, minHeight, minWidth, name, onChange, placeholder, resize, successful, sx, value, warning, }: TextAreaProps) => React.JSX.Element;
+export {};

package/dist/components/input/text_area/text_area.js

@@ -0,0 +1,109 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../../atoms/box/box';
+import { CheckmarkCircle, AlertCircle } from '../../../icons';
+export const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, minHeight, minWidth, name, onChange, placeholder, resize = false, successful, sx, value, warning, }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current) {
+            ref.current.style.height = `${minHeight}px`;
+            const scrollHeight = ref.current.scrollHeight;
+            ref.current.style.height = scrollHeight + 'px';
+        }
+    }, [ref.current, value]);
+    return (React.createElement(Label, { "$disabled": disabled, "$sx": sx },
+        label,
+        React.createElement(InputWrapper, { "$bg": bg, "$minWidth": minWidth, "$successful": successful, "$warning": warning },
+            icon,
+            React.createElement(TextAreaElement, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, ref: ref, value: maxCharacters
+                    ? value.slice(0, maxCharacters - 1)
+                    : value, "$resize": resize }),
+            successful && React.createElement(CheckmarkCircle, { color: "green-3" }),
+            warning && React.createElement(AlertCircle, { color: "red-4" })),
+        React.createElement(Box, { "$gap": 16, "$justify": "space-between" },
+            helperText && React.createElement(HelperText, null, helperText),
+            maxCharacters && (React.createElement(MaxCharactersText, null,
+                value.length,
+                " / ",
+                maxCharacters)))));
+};
+const Label = styled.label `
+  width: 100%;
+  display: flex;
+  gap: 4px;
+  flex-flow: column nowrap;
+  color: var(--color-grey-2);
+  font-family: var(--font-inter);
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 26px;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    color: var(--color-grey-7) !important;
+    & > * {
+      color: var(--color-grey-7) !important;
+    }
+    & > div:first-of-type {
+      background-color: var(--color-grey-9) !important;
+    }`
+    : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.div `
+  min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')}
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: ${({ $bg }) => $bg};
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+
+  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
+  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
+`;
+const TextAreaElement = styled.textarea `
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+
+  ${({ $resize }) => ($resize ? '' : 'resize: none;')}
+`;
+const HelperText = styled.p `
+  color: var(--color-grey-4);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  line-height: 20px;
+`;
+const MaxCharactersText = styled.p `
+  text-align: right;
+  color: var(--color-grey-6);
+  font-family: var(--font-inter);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.69",
+  "version": "0.2.71",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {