@soul-refiner/design-system 0.2.68 → 0.2.70

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

@@ -30,6 +30,6 @@ export interface FilterTriggerProps {
     onClick?: (event: React.MouseEvent) => void;
     open: boolean;
     type: FilterTriggerTypes;
-    value: string;
+    value?: string;
 }
 export { Filter };

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

@@ -51,7 +51,12 @@ const Filter = ({ closeOnBlur = true, disabled, graphic, label, sx, triggerType,
         return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), ...option }));
     });
     return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
-        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, label: label, onClick: handleOpen, open: open, type: triggerType, value: options.find((option) => isSelected(option.value)).label }),
+        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, label: label, onClick: handleOpen, open: open, type: triggerType, value: options.find((option) => {
+                if (typeof option === 'string' && option === 'break') {
+                    return false;
+                }
+                return isSelected(option.value);
+            })?.label }),
         open && React.createElement(Container, { ref: optionsRef }, dropdownOptions)));
 };
 const Wrapper = styled.div `
@@ -65,6 +70,18 @@ const Container = styled.div `
   width: max-content;
   z-index: 100;
   outline: none;
+  box-shadow: var(--elevation-2);
+  background-color: var(--color-white);
+  cursor: pointer;
+  border-radius: 8px;
+
+  & > div:first-of-type {
+    border-radius: 8px 8px 0px 0px;
+  }
+
+  & > div:last-of-type {
+    border-radius: 0px 0px 8px 8px;
+  }
 `;
 /********************************************************
  *  Triggers

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.68",
+  "version": "0.2.70",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {