teachable-design-system 0.1.16 → 0.2.1

package/dist/index.esm.js

@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 import React, { useState } from 'react';
 import element from './assets/icons/checked.png';
 import arrowDownIcon from './assets/icons/arrow-down.png';
+import { Eye, EyeOff } from 'lucide-react';
 import icon from './assets/icons/icon_size.png';
 
 const colors = {
@@ -1074,87 +1075,117 @@ function Dropdown({ size, options, onSelect, label, placeholder }) {
     return (jsxs("div", { style: { position: 'relative' }, children: [jsx(StyledLabel, { children: label }), jsx(StyledDropDown, { onClick: () => setOpen((prev) => !prev), size: size, isOpen: open, children: jsxs(StyledBox, { children: [jsx(StyledText, { size: size, isOpen: open, children: selected ?? placeholder }), jsx(StyledIcon$1, { size: size, children: jsx("img", { src: arrowDownIcon, alt: "dropdown icon", style: { width: '100%', height: '100%' } }) })] }) }), open && (jsx(StyledOptions, { ref: ref, size: size, children: options?.map((option) => (jsx(StyledOption, { onClick: () => handleSelect(option), size: size, isSelected: option === selected, children: option }, option))) }))] }));
 }
 
-const getInputWrapperStyle = (size) => {
-    let height = '48px';
+const getInputSizeStyle = (size) => {
     switch (size) {
-        case 'small':
-            height = '41px';
-            break;
-        case 'medium':
-            height = '48px';
-            break;
-        case 'large':
-            height = '56px';
-            break;
-    }
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        width: '306px',
-        height: height,
-    };
-};
-const labelStyle = {
-    display: 'flex',
-    justifyContent: 'flex-start',
-    ...typography.label.small,
-    color: '#333',
-};
-const getInputStyle = (inputSize, disabled, isFocused) => {
-    let padding = '0px 16px';
-    let fontSize = typography.label.medium.fontSize;
-    let lineHeight = typography.label.medium.lineHeight;
-    let fontWeight = typography.label.medium.fontWeight;
-    let height = '48px';
-    let width = '306px';
-    switch (inputSize) {
-        case 'small':
-            fontSize = typography.label.small.fontSize;
-            lineHeight = typography.label.small.lineHeight;
-            fontWeight = typography.label.small.fontWeight;
-            height = '40px';
-            break;
-        case 'medium':
-            fontSize = typography.label.medium.fontSize;
-            lineHeight = typography.label.medium.lineHeight;
-            fontWeight = typography.label.medium.fontWeight;
-            height = '48px';
-            break;
-        case 'large':
-            fontSize = typography.label.large.fontSize;
-            lineHeight = typography.label.large.lineHeight;
-            fontWeight = typography.label.large.fontWeight;
-            height = '56px';
-            break;
+        case "small":
+            return css `
+        height: 40px;
+        font-size: ${typography.label.small.fontSize};
+        line-height: ${typography.label.small.lineHeight};
+        font-weight: ${typography.label.small.fontWeight};
+      `;
+        case "medium":
+            return css `
+        height: 48px;
+        font-size: ${typography.label.medium.fontSize};
+        line-height: ${typography.label.medium.lineHeight};
+        font-weight: ${typography.label.medium.fontWeight};
+      `;
+        case "large":
+            return css `
+        height: 56px;
+        font-size: ${typography.label.large.fontSize};
+        line-height: ${typography.label.large.lineHeight};
+        font-weight: ${typography.label.large.fontWeight};
+      `;
+        default:
+            return css `
+        height: 48px;
+        font-size: ${typography.label.medium.fontSize};
+        line-height: ${typography.label.medium.lineHeight};
+        font-weight: ${typography.label.medium.fontWeight};
+      `;
     }
-    return {
-        width,
-        height,
-        minHeight: height,
-        maxHeight: height,
-        padding,
-        fontSize,
-        lineHeight,
-        fontWeight,
-        fontFamily: typography.fontFamily.primary,
-        border: isFocused ? '1px solid #4a90e2' : '1px solid #ddd',
-        borderRadius: '4px',
-        outline: 'none',
-        transition: 'all 0.2s ease',
-        boxShadow: isFocused ? '0 0 0 3px rgba(74, 144, 226, 0.1)' : 'none',
-        backgroundColor: disabled ? '#f5f5f5' : '#fff',
-        cursor: disabled ? 'not-allowed' : 'text',
-        color: '#333',
-        boxSizing: 'border-box',
-        display: 'flex',
-        alignItems: 'center',
-    };
 };
+const InputWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: ${(props) => props.width || "306px"};
+`;
+const Label = styled.label `
+  display: flex;
+  justify-content: flex-start;
+  font-size: ${typography.label.small.fontSize};
+  line-height: ${typography.label.small.lineHeight};
+  font-weight: ${typography.label.small.fontWeight};
+  font-family: ${typography.fontFamily.primary};
+  color: ${colors.text.subtle};
+`;
+const InputContainer = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+`;
+const StyledInput = styled.input `
+  width: ${(props) => props.width || "306px"};
+  padding: ${(props) => (props.isPassword ? "0px 48px 0px 16px" : "0px 16px")};
+  font-family: ${typography.fontFamily.primary};
+  border: 1px solid ${colors.input.border};
+  border-radius: 4px;
+  outline: none;
+  transition: all 0.2s ease;
+  background-color: ${(props) => props.disabled ? colors.input["surface-disabled"] : colors.input.surface};
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "text")};
+  color: ${colors.text.basic};
+  box-sizing: border-box;
+
+  ${(props) => getInputSizeStyle(props.inputSize)}
+
+  ${(props) => props.height &&
+    css `
+      height: ${props.height};
+    `}
+
+  &:focus {
+    border: 1px solid ${colors.input["border-active"]};
+    box-shadow: 0 0 0 3px ${colors.light.primary["5"]};
+  }
+
+  &:disabled {
+    border: 1px solid ${colors.input["border-disabled"]};
+    color: ${colors.text.disabled};
+  }
+
+  &::placeholder {
+    color: ${colors.text.disabled};
+  }
+`;
+const IconButton = styled.button `
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
+  transition: opacity 0.2s ease;
+
+  svg {
+    color: ${(props) => props.disabled ? colors.icon.disabled : colors.icon.gray};
+  }
+`;
 
-const Input = ({ size = 'medium', label = false, labelText = '', placeholder = '', value, onChange, disabled = false, }) => {
-    const [isFocused, setIsFocused] = useState(false);
-    return (jsxs("div", { style: getInputWrapperStyle(size), children: [label && labelText && jsx("label", { style: labelStyle, children: labelText }), jsx("input", { style: getInputStyle(size, disabled, isFocused), placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) })] }));
+const Input = ({ id, width, height, size = "medium", label = false, labelText = "", placeholder = "", value, onChange, disabled = false, isPassword = false, }) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const inputType = isPassword ? (showPassword ? "text" : "password") : "text";
+    return (jsxs(InputWrapper, { width: width, children: [label && labelText && jsx(Label, { htmlFor: id, children: labelText }), jsxs(InputContainer, { children: [jsx(StyledInput, { id: id, type: inputType, inputSize: size, width: width, height: height, disabled: disabled, isPassword: isPassword, placeholder: placeholder, value: value, onChange: onChange }), isPassword && (jsx(IconButton, { type: "button", disabled: disabled, onClick: () => setShowPassword(!showPassword), "aria-label": showPassword ? "Hide password" : "Show password", children: showPassword ? jsx(Eye, { size: 20 }) : jsx(EyeOff, { size: 20 }) }))] })] }));
 };
 
 const StyledIcon = styled.img `