@soul-refiner/design-system 0.2.13 → 0.2.14

package/dist/components/actions/upload/upload.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 import { COLORS } from '../../../common';
 type UploadTypes = 'audio' | 'image' | 'file' | 'video';
 export interface UploadProps extends React.PropsWithChildren {
+    /**
+     * @param background one of the defined colors e.g. grey-1 or a user defined color
+     */
     background: (typeof COLORS)[number] | string;
     borderColor: (typeof COLORS)[number];
     iconColor: (typeof COLORS)[number];

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

@@ -8,3 +8,5 @@ export { Radio } from './radio';
 export type { RadioProps } from './radio';
 export { Search } from './search';
 export type { SearchProps } from './search';
+export { TextInput } from './text_input';
+export type { TextInputProps } from './text_input';

package/dist/components/input/index.js

@@ -3,3 +3,4 @@ export { DatePicker } from './date';
 export { Filter } from './filter';
 export { Radio } from './radio';
 export { Search } from './search';
+export { TextInput } from './text_input';

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

@@ -0,0 +1,2 @@
+export { TextInput } from './text_input';
+export type { TextInputProps } from './text_input';

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

@@ -0,0 +1 @@
+export { TextInput } from './text_input';

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

@@ -0,0 +1,35 @@
+import React from 'react';
+type TextInputSize = 'small' | 'large';
+export type Props = {
+    disabled: boolean | never;
+    successful: boolean | never;
+    warning: boolean | never;
+    bg?: string;
+    icon?: React.ReactElement;
+    helperText?: string;
+    label?: string;
+    maxCharacters?: number;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    size?: TextInputSize;
+    sx?: string;
+    value: 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 TextInputProps = DisabledProps | SuccessfulProps | WarningProps;
+export declare const TextInput: ({ bg, disabled, helperText, icon, label, maxCharacters, onChange, placeholder, size, successful, sx, value, warning, }: TextInputProps) => React.JSX.Element;
+export {};

package/dist/components/input/text_input/text_input.js

@@ -0,0 +1,91 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { CheckmarkCircle, AlertCircle } from 'icons';
+export const TextInput = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, onChange, placeholder, size = 'large', successful, sx, value, warning, }) => {
+    return (React.createElement(Label, { "$disabled": disabled, "$size": size, "$sx": sx },
+        label,
+        React.createElement(InputWrapper, { "$bg": bg, "$size": size, "$successful": successful, "$warning": warning },
+            icon,
+            React.createElement(Input, { disabled: disabled, onChange: onChange, placeholder: placeholder, value: maxCharacters ? value.slice(0, maxCharacters - 1) : value, "$size": size }),
+            maxCharacters && (React.createElement(MaxCharactersText, { "$size": size },
+                value.length,
+                " / ",
+                maxCharacters)),
+            successful && React.createElement(CheckmarkCircle, { color: "green-3" }),
+            warning && React.createElement(AlertCircle, { color: "red-4" })),
+        helperText && React.createElement(HelperText, { "$size": size }, helperText)));
+};
+const Label = styled.label `
+  width: 100%;
+  display: flex;
+  gap: 4px;
+  flex-flow: column nowrap;
+  color: var(--color-grey-2);
+  font-family: Inter;
+  font-size: ${({ $size }) => ($size === 'small' ? 16 : 18)}px;
+  font-weight: 500;
+  line-height: ${({ $size }) => ($size === 'small' ? 24 : 26)}px;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    color: var(--color-grey-7) !important;
+    & > * {
+      color: var(--color-grey-7) !important;
+    }
+    & > div {
+      background-color: var(--color-grey-9) !important;
+    }`
+    : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${({ $size }) => ($size === 'small' ? '6px 12px' : '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 Input = styled.input `
+  flex: 1;
+  font-family: Inter;
+  font-size: ${({ $size }) => ($size === 'small' ? 14 : 16)}px;
+  line-height: ${({ $size }) => ($size === 'small' ? 20 : 24)}px;
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+`;
+const HelperText = styled.span `
+  color: var(--color-grey-4);
+  font-family: Inter;
+  font-size: ${({ $size }) => ($size === 'small' ? 12 : 14)}px;
+  line-height: ${({ $size }) => ($size === 'small' ? 16 : 20)}px;
+`;
+const MaxCharactersText = styled.span `
+  color: var(--color-grey-6);
+  font-family: 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.13",
+  "version": "0.2.14",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {