@soul-refiner/design-system 0.0.19 → 0.0.20

package/dist/src/inputs/RadioInput/RadioInput.module.scss

@@ -1,68 +0,0 @@
-.radio {
-    
-
-    label {
-        display: flex;
-        flex-direction: row;
-        place-items: center;
-        gap: 16px;
-        cursor: pointer;
-
-        &> input[type=radio] {
-            appearance: none;
-            margin: 0;
-
-            border: 2px solid #99B4CF;
-            border-radius: 100%;
-
-            height: 24px;
-            width: 24px;
-
-            position: relative;
-
-            cursor: pointer;
-
-            &::after {
-                content: "";
-                background-image: url("data:image/svg+xml,%0A%3Csvg width='16' height='11' viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.38338 10.6724L5.80001 10.0891L5.21665 10.6724C5.53883 10.9946 6.06119 10.9946 6.38338 10.6724ZM5.80001 8.92234L1.98338 5.1057C1.66119 4.78352 1.13883 4.78352 0.816649 5.1057C0.494467 5.42788 0.494467 5.95024 0.816649 6.27243L5.21665 10.6724L5.80001 10.0891C6.38338 10.6724 6.38332 10.6725 6.38338 10.6724L14.8726 2.18316C15.1948 1.86097 15.1948 1.33861 14.8726 1.01643C14.5505 0.694248 14.0281 0.694248 13.7059 1.01643L5.80001 8.92234Z' fill='white'/%3E%3C/svg%3E%0A");
-                background-repeat: no-repeat;
-                background-position: 50% 50%;
-                width: 100%;
-                height: 100%;
-                opacity: 0;
-                display: block;
-                transform: scale(0.5);
-                transition: 100ms opacity ease-in-out, 200ms transform ease-in;
-            }
-
-            &:checked {
-                color: var(--color-green-6);
-                background-color: currentColor;
-                border-color: currentColor;
-                animation: activateRadio 175ms forwards ease-in-out;
-
-                &::after {
-                    transform: scale(1);
-                    opacity: 1;
-                }
-                
-                
-            }
-            // &:focus {
-            //     border-color: transparent;
-            // }
-            
-            @keyframes activateRadio {
-                0% {
-                    transform: scale(0.8);
-                }
-                80% {
-                    transform: scale(1.1);
-                }
-                100% {
-                    transform: scale(1);
-                }
-            }
-        }
-    }
-}

package/dist/src/inputs/RadioInput/RadioInput.tsx

@@ -1,55 +0,0 @@
-import React, { ChangeEvent, CSSProperties, useState } from "react";
-import radioStyles from "./RadioInput.module.scss";
-
-export interface RadioInputProps
-  extends Partial<
-    Omit<
-      React.DetailedHTMLProps<
-        React.InputHTMLAttributes<HTMLInputElement>,
-        HTMLInputElement
-      >,
-      "onChange"
-    >
-  > {
-  label?: string | React.ReactNode;
-  reverse?: boolean;
-  onChange?: (event: React.ChangeEvent, checked?: boolean) => void;
-}
-
-export const RadioInput = ({
-  checked = false,
-  label,
-  onChange,
-  reverse,
-  ...rest
-}: RadioInputProps) => {
-  const [isChecked, setIsChecked] = useState<boolean>();
-
-  const style: CSSProperties = {
-    flexDirection: reverse ? "row-reverse" : "row",
-  };
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-    setIsChecked((prev) => !prev);
-    onChange && onChange(e, checked);
-  };
-
-  React.useEffect(() => {
-    setIsChecked(checked);
-  }, [checked]);
-
-  return (
-    <div className={radioStyles.radio}>
-      <label style={style}>
-        <input
-          checked={isChecked}
-          type="radio"
-          onChange={handleChange}
-          {...rest}
-        />
-        {label}
-      </label>
-    </div>
-  );
-};

package/dist/src/inputs/RadioInput/index.ts

@@ -1 +0,0 @@
-export { RadioInput, type RadioInputProps } from "./RadioInput"

package/dist/src/inputs/SearchInput/SearchInput.module.scss

@@ -1,40 +0,0 @@
-.searchInput {
-    display: flex;
-    height: 40px;
-    border-radius: 20px;
-    border: 1px solid transparent;
-    padding: 0 16px;
-    place-items: center;
-    place-content: center;
-    position: relative;
-    max-width: max-content;
-
-    transition: 250ms width ease-in-out, 125ms border-color ease-in-out;
-
-    input[type=text] {
-        width: 100%;
-        height: 100%;
-        border: none;
-        outline: none;
-        background-color: transparent;
-        font-size: var(--size-16);
-        color: var(--color-grey-3);
-
-        &::placeholder {
-            font-size: var(--size-16);
-            font-weight: var(--weight-inter-medium);
-            color: var(--color-grey-6);
-        }
-    }
-
-    .magnify {
-        cursor: pointer;
-        position: absolute;
-        right: 0;
-        transform: translateX(-50%);
-        
-        &:hover {
-            opacity: 0.8;
-        }
-    }
-}

package/dist/src/inputs/SearchInput/SearchInput.tsx

@@ -1,61 +0,0 @@
-import React, { useState, useEffect, createRef } from "react";
-import { Component } from "@soul-refiner/utils/src";
-import searchStyle from "./SearchInput.module.scss";
-
-import { Magnify } from "@soul-refiner/icons/src";
-
-export interface SearchInputProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, "as"> {
-  as?: React.ElementType;
-  expandable: boolean;
-  expanded?: boolean;
-  onSubmit?: () => void;
-  width?: number;
-}
-
-export const SearchInput = ({
-  as,
-  expandable = false,
-  expanded = false,
-  onSubmit,
-  width = 340,
-  ...rest
-}: SearchInputProps) => {
-  const [isExpended, setIsExpended] = useState(expanded);
-  const inputRef = createRef<HTMLInputElement>();
-
-  useEffect(() => {
-    setIsExpended(isExpended);
-  }, [isExpended]);
-
-  const style = {
-    width: isExpended ? width : 40,
-    borderColor: isExpended ? "#AFB6B9" : "transparent",
-  };
-
-  const handleExpendSearch = () => {
-    const expended = isExpended;
-
-    if (expended) inputRef.current?.blur();
-    else inputRef.current?.focus();
-
-    setIsExpended(!isExpended);
-  };
-
-  return (
-    <Component
-      as={as ?? "form"}
-      className={`${searchStyle.searchInput}`}
-      style={style}
-      onSubmit={onSubmit}
-    >
-      <input ref={inputRef} type="text" autoComplete="false" {...rest} />
-      <Magnify
-        className={searchStyle.magnify}
-        iconSize={24}
-        fill="#5C6264"
-        onClick={handleExpendSearch}
-      />
-    </Component>
-  );
-};

package/dist/src/inputs/SelectInput/SelectInput.module.scss

@@ -1,66 +0,0 @@
-.selectInput {
-    $height: 40px;
-    $borderColor: #AFB6B9;
-    $borderSize: 1px;
-    
-    display: flex;
-    flex-direction: column;
-    place-content: center;
-    position: relative;
-    border: 1px solid $borderColor;
-    padding: 8px 16px;
-    outline: none;
-    user-select: none;
-    background-color: #FFF;
-
-    height: $height;
-    border-radius: 0.5 * $height;
-
-    cursor: pointer;
-
-    .title {
-        display: flex;
-        flex-direction: row;
-        gap: 16px;
-        place-items: center;
-        place-content: space-between;
-    }
-
-    &[class~=expanded] {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-color: transparent;
-
-        .options {
-            box-shadow: 0 20px 20px -10px rgb(0 0 0 / 10%);
-        }
-    }
-
-    &:active {
-        
-    }
-
-    .options {
-        position: absolute;
-        bottom: 0;
-        left: 0 - $borderSize;
-        transform: translateY(100%);
-        border: 1px solid $borderColor;
-        border-top-width: 0;
-        border-radius: 0.5 * $height;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-        background-color: rgba(255 255 255 / 50%);
-        backdrop-filter: blur(40px) saturate(200%);
-        min-width: calc(100% + ($borderSize * 2));
-        overflow: hidden;
-    }
-
-    .option {
-        padding: 8px 16px;
-
-        &[class~=active] {
-            background-color: var(--color-blue-9);
-        }
-    }
-}

package/dist/src/inputs/SelectInput/SelectInput.tsx

@@ -1,145 +0,0 @@
-import React, { useState, useEffect, useRef, ReactNode } from "react";
-import styles from "./SelectInput.module.scss";
-import { ChevronDown } from "@soul-refiner/icons/src";
-
-export interface SelectInputProps {
-  icon?: ReactNode;
-  name: string;
-  onSelect?: (value: string) => void;
-  options: Array<HTMLOptionElement>;
-  placeholder?: string;
-}
-
-export const SelectInput = ({
-  icon,
-  name,
-  onSelect,
-  options,
-  placeholder = "Select an option",
-}: SelectInputProps) => {
-  const [focused, setFocused] = useState<boolean>(false);
-  const [expanded, _setExpanded] = useState<boolean>(false);
-  const [selectedIndex, setSelectedIndex] = useState<number>();
-  const [scrollIndex, _setScrollIndex] = useState<number>(-1);
-
-  const selectRef = useRef<HTMLDivElement>(null);
-
-  const expandedRef = useRef<boolean>(expanded);
-  const setExpanded = (expanded: boolean) => {
-    expandedRef.current = expanded;
-    _setExpanded(expanded);
-  };
-
-  const scrollIndexRef = useRef<number | undefined>(selectedIndex);
-  const setScrollIndex = (index: number) => {
-    index = index < 0 ? index + options.length : index;
-    scrollIndexRef.current = index;
-    _setScrollIndex(index);
-  };
-
-  useEffect(() => {
-    if (focused) {
-      document.addEventListener("keydown", handleKeydown);
-    } else {
-      document.removeEventListener("keydown", handleKeydown);
-    }
-
-    return () => {
-      document.removeEventListener("keydown", handleKeydown);
-    };
-  }, [focused]);
-
-  useEffect(() => {
-    if (typeof selectedIndex === "number" && onSelect) {
-      onSelect(options[selectedIndex].value);
-    }
-  }, [selectedIndex]);
-
-  const handleKeydown = (e: KeyboardEvent) => {
-    e.preventDefault();
-
-    const increment = expandedRef.current ? 1 : 0;
-    const currentScrollRef = scrollIndexRef.current
-      ? scrollIndexRef.current
-      : 0;
-
-    switch (e.key) {
-      case "ArrowUp":
-        setExpanded(true);
-        setScrollIndex((currentScrollRef - increment) % options.length);
-        break;
-      case "ArrowDown":
-        setExpanded(true);
-        setScrollIndex((currentScrollRef + increment) % options.length);
-        break;
-      case "Escape":
-        setExpanded(false);
-        break;
-      case "Enter":
-        if (expandedRef.current) {
-          setSelectedIndex(currentScrollRef);
-          setExpanded(false);
-        } else {
-          setExpanded(true);
-        }
-        break;
-    }
-  };
-
-  const handleOnClick = () => {
-    setExpanded(!expanded);
-  };
-
-  return (
-    <div
-      ref={selectRef}
-      tabIndex={0}
-      onClick={handleOnClick}
-      onBlur={(e) => {
-        e.preventDefault();
-        setFocused(false);
-        setExpanded(false);
-      }}
-      onFocus={(e) => {
-        e.preventDefault();
-        setFocused(true);
-      }}
-      className={`${styles.selectInput} ${expanded ? "expanded" : ""}`}
-    >
-      <div className={styles.title}>
-        {placeholder && selectedIndex === undefined && placeholder}
-        {selectedIndex !== undefined && options[selectedIndex].label}
-        {icon ? icon : <ChevronDown size={16} fill={"var(--color-grey-3)"} />}
-      </div>
-
-      {expanded && (
-        <div className={styles.options}>
-          {options?.map((option, index) => {
-            return (
-              <div
-                key={index}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setSelectedIndex(index);
-                  setExpanded(false);
-                  selectRef.current?.focus();
-                }}
-                onMouseOver={() => setScrollIndex(index)}
-                className={`${styles.option} ${
-                  scrollIndex === index ? "active" : ""
-                }`}
-              >
-                {option.label}
-              </div>
-            );
-          })}
-        </div>
-      )}
-      <input
-        type="hidden"
-        name={name}
-        value={selectedIndex ? options[selectedIndex].value : ""}
-      />
-    </div>
-  );
-};

package/dist/src/inputs/TagInput/TagInput.module.scss

@@ -1,75 +0,0 @@
-.container {
-
-    border: 1px solid var(--color-grey-9);
-    display: flex;
-    border-radius: var(--border-radius-small);
-    position: relative;
-    padding: 8px;
-    
-    &[class~=maxLength] {
-        padding-bottom: 2.5em;
-
-        .counter {
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            padding: 10px;
-            color: var(--color-grey-5);
-        }
-    }
-
-    .tags {
-        display: flex;
-        gap: 8px;
-        flex-direction: row;
-        flex-wrap: wrap;
-        
-        position: relative;
-
-        .tag {
-            display: flex;
-            flex-direction: row;
-            place-content: space-between;
-            place-items: center;
-            gap: 8px;
-
-            background: var(--color-grey-9);
-            border-radius: 4px;
-            padding: 0px 0 0 10px;
-            height: 2.5em;
-
-            cursor: pointer;
-
-            &>div {
-                min-width: 1ch;
-                height: 1em;
-                display: flex;
-                place-items: center;
-                padding-right: 10px;
-
-                &:first-child {
-                    flex: 1;
-                }
-
-                &:focus {
-                    outline: none;
-
-                    &:first-child {
-                        cursor:text;
-                    }
-                }
-            }
-            &:focus-within {
-                outline: 2px solid var(--colorify-blue-3);
-            }
-            &[class~=createTag] {
-                background-color: white;
-                border: none;
-                flex: 1;
-                min-width: 4em;
-            }
-        }
-    }
-
-    
-}

package/dist/src/inputs/TagInput/TagInput.tsx

@@ -1,115 +0,0 @@
-import React, { useState, KeyboardEvent, useRef, CSSProperties } from "react";
-import { Close } from "@soul-refiner/icons/src";
-import tagInputStyle from "./TagInput.module.scss";
-
-export interface TagInputProps {
-  max?: number;
-  style?: CSSProperties;
-}
-
-export const TagInput = ({ max, style }: TagInputProps) => {
-  const [tags, setTags] = useState<Array<string>>([]);
-
-  const addTag = (tag: string) => {
-    setTags((previous) => {
-      return [...previous, tag];
-    });
-  };
-
-  const updateTag = (tag: string, index: number) => {
-    const t: Array<string> = [...tags];
-    t.splice(index, 1, tag);
-    setTags(t);
-  };
-
-  const deleteTag = (index: number) => {
-    const t: Array<string> = [...tags];
-    t.splice(index, 1);
-    setTags(t);
-  };
-
-  const RenderTag = ({
-    tag,
-    index,
-    createTag = false,
-  }: {
-    tag?: string;
-    index?: number;
-    createTag?: boolean;
-  }) => {
-    const [thisTag] = useState<string>(tag ? tag : "");
-    const ref = useRef<HTMLDivElement>(null);
-    const updating: boolean = typeof index === "number";
-
-    const handleKeyPress = (e: KeyboardEvent<HTMLDivElement>) => {
-      const innerText: string = ref.current ? ref.current.innerText : "";
-
-      switch (e.code) {
-        case "Enter":
-        case "Comma":
-          e.preventDefault();
-
-          if (tags.find((tag) => tag === innerText)) {
-            break;
-          }
-
-          if (updating) {
-            updateTag(innerText, index as number);
-          } else {
-            addTag(innerText);
-          }
-
-          break;
-        default:
-          //setThisTag(ref.current ? ref.current.innerText : "");
-          break;
-      }
-    };
-
-    const handleDelete = () => {
-      if (typeof index !== "undefined") deleteTag(index);
-    };
-
-    return (
-      <div
-        className={`${tagInputStyle.tag} ${createTag ? "createTag" : ""}`}
-        onClick={() => ref.current?.focus()}
-      >
-        <div
-          ref={ref}
-          contentEditable={true}
-          onKeyPress={handleKeyPress}
-          suppressContentEditableWarning
-        >
-          {thisTag}
-        </div>
-        {!createTag && (
-          <div onClick={handleDelete}>
-            <Close fill="var(--color-grey-6)" size={14} />
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <div
-      style={style}
-      className={`${tagInputStyle.container} ${
-        typeof max === "number" ? "maxLength" : ""
-      }`}
-    >
-      <div className={tagInputStyle.tags}>
-        {tags.map((tag, index) => {
-          return <RenderTag key={index} index={index} tag={tag} />;
-        })}
-        {(!max || (max && tags.length < max)) && <RenderTag createTag={true} />}
-      </div>
-      {max && (
-        <div className={tagInputStyle.counter}>
-          {tags.length} / {max}
-        </div>
-      )}
-    </div>
-  );
-};

package/dist/src/inputs/TagInput/index.ts

@@ -1 +0,0 @@
-export { TagInput, type TagInputProps } from "./TagInput"

package/dist/src/inputs/TextInput/TextInput.module.scss

@@ -1,35 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.textField {
-  position: relative;
-  width: 100%;
-  display: flex;
-  padding: 12px 16px;
-  border-radius: var(--border-radius-normal);
-  background-color: var(--color-blue-10);
-
-  .counter {
-    @include mixins.font(400, 16px, 24px);
-    position: absolute;
-    bottom: 8px;
-    right: 16px;
-    color: #a4b0bf;
-  }
-
-  textarea[type="text"] {
-    width: 100%;
-    border: none;
-    resize: none;
-    background-color: transparent;
-    font-size: var(--size-16);
-    color: var(--color-grey-1);
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.hasCharacterCount {
-  padding-bottom: 32px;
-}