oneslash-design-system 1.2.24 → 1.2.26

package/dist/components/tag.jsx

@@ -1,43 +1,120 @@
 'use client';
-import React, { useState, useEffect } from 'react';
-import * as LucideIcons from 'lucide-react';
+import React, { useState } from 'react';
+import { icons } from 'lucide-react';
+var colorConfig = {
+    default: {
+        bg: 'bg-light-secondary-light dark:bg-dark-secondary-light',
+        text: 'text-light-text-primary dark:text-dark-text-primary',
+        textOnly: 'text-light-text-secondary dark:text-dark-text-secondary',
+        border: 'border-light-misc-divider dark:border-dark-misc-divider',
+        dot: 'bg-light-text-secondary dark:bg-dark-text-secondary',
+        hasBorderTextOnly: false,
+    },
+    success: {
+        bg: 'bg-light-success-main dark:bg-dark-success-main',
+        text: 'text-white dark:text-dark-text-primary',
+        textOnly: 'text-light-success-main dark:text-dark-success-main',
+        border: 'border-light-success-main dark:border-dark-success-main',
+        dot: 'bg-light-success-main dark:bg-dark-success-main',
+        hasBorderTextOnly: true,
+    },
+    warning: {
+        bg: 'bg-light-warning-main dark:bg-dark-warning-main',
+        text: 'text-white dark:text-dark-text-primary',
+        textOnly: 'text-light-warning-main dark:text-dark-warning-main',
+        border: 'border-light-warning-main dark:border-dark-warning-main',
+        dot: 'bg-light-warning-main dark:bg-dark-warning-main',
+        hasBorderTextOnly: true,
+    },
+    error: {
+        bg: 'bg-light-error-main dark:bg-dark-error-main',
+        text: 'text-white dark:text-dark-text-primary',
+        textOnly: 'text-light-error-main dark:text-dark-error-main',
+        border: 'border-light-error-main dark:border-dark-error-main',
+        dot: 'bg-light-error-main dark:bg-dark-error-main',
+        hasBorderTextOnly: true,
+    },
+    info: {
+        bg: 'bg-light-info-main dark:bg-dark-info-main',
+        text: 'text-white dark:text-dark-text-primary',
+        textOnly: 'text-light-info-main dark:text-dark-info-main',
+        border: 'border-light-info-main dark:border-dark-info-main',
+        dot: 'bg-light-info-main dark:bg-dark-info-main',
+        hasBorderTextOnly: true,
+    },
+};
 export default function Tag(_a) {
-    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, label = _a.label, iconName = _a.iconName, onClick = _a.onClick;
+    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, color = _a.color, label = _a.label, secondLabel = _a.secondLabel, iconName = _a.iconName, onClick = _a.onClick;
     var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
-    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
-    // Load icon directly from Lucide
-    useEffect(function () {
-        if (iconName) {
-            setIcon(LucideIcons[iconName]);
-        }
-    }, [iconName]);
+    // Get icon directly from icons map
+    var Icon = iconName ? icons[iconName] : null;
     // Size and padding
     var sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
     // Selected state styles
     var isSelected = state === 'selected';
+    // When color is provided, use color-based styling
+    var colorStyles = color ? colorConfig[color] : null;
     // Background color
-    var bgClasses = isSelected && variant === 'contained'
-        ? 'bg-light-accent-main dark:bg-dark-accent-main'
-        : variant === 'contained'
-            ? 'bg-light-background-accent300 dark:bg-dark-background-accent300'
-            : '';
+    var bgClasses = '';
+    if (variant === 'dot') {
+        bgClasses = '';
+    }
+    else if (colorStyles) {
+        bgClasses = variant === 'contained' ? colorStyles.bg : '';
+    }
+    else if (isSelected && variant === 'contained') {
+        bgClasses = 'bg-light-accent-main dark:bg-dark-accent-main';
+    }
+    else if (variant === 'contained') {
+        bgClasses = 'bg-light-background-accent300 dark:bg-dark-background-accent300';
+    }
     // Font color
-    var fontClasses = isSelected
-        ? 'text-white'
-        : 'text-light-text-primary dark:text-dark-text-primary';
+    var fontClasses = '';
+    if (variant === 'dot') {
+        fontClasses = 'text-light-text-primary dark:text-dark-text-primary';
+    }
+    else if (colorStyles) {
+        fontClasses = variant === 'textOnly' ? colorStyles.textOnly : colorStyles.text;
+    }
+    else if (isSelected) {
+        fontClasses = 'text-white';
+    }
+    else {
+        fontClasses = 'text-light-text-primary dark:text-dark-text-primary';
+    }
     // Border styles
-    var borderClasses = isSelected && variant === 'textOnly'
-        ? 'border border-light-accent-main dark:border-dark-accent-main'
-        : variant === 'contained'
-            ? 'border border-light-misc-divider dark:border-dark-misc-divider'
-            : '';
-    // Hover (only when not selected and onClick is provided)
-    var hoverClasses = !isSelected && variant === 'contained' && isHovered && onClick
+    var borderClasses = '';
+    if (variant === 'dot') {
+        borderClasses = '';
+    }
+    else if (colorStyles) {
+        if (variant === 'textOnly' && colorStyles.hasBorderTextOnly) {
+            borderClasses = "border ".concat(colorStyles.border);
+        }
+        else if (variant === 'contained') {
+            borderClasses = "border ".concat(colorStyles.border);
+        }
+    }
+    else if (isSelected && variant === 'textOnly') {
+        borderClasses = 'border border-light-accent-main dark:border-dark-accent-main';
+    }
+    else if (variant === 'contained') {
+        borderClasses = 'border border-light-misc-divider dark:border-dark-misc-divider';
+    }
+    // Dot color
+    var dotColor = (colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.dot) || colorConfig.default.dot;
+    // Hover (only when not selected, no color, and onClick is provided)
+    var hoverClasses = !isSelected && !color && variant === 'contained' && isHovered && onClick
         ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
         : '';
     var cursorClass = onClick && !isSelected ? 'cursor-pointer' : '';
-    return (<div className={"\n        flex items-center space-x-1 rounded-full\n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(hoverClasses, " ").concat(cursorClass, "\n        transition-colors duration-200 ease-in-out\n      ")} onMouseEnter={function () { return onClick && setIsHovered(true); }} onMouseLeave={function () { return onClick && setIsHovered(false); }} onClick={onClick}>
-      {Icon && <Icon className="w-4 h-4" strokeWidth={2}/>}
-      <span>{label}</span>
+    var baseClasses = 'flex space-x-2 items-center gap-1 rounded-full whitespace-nowrap transition-colors duration-200 ease-in-out';
+    return (<div className={"".concat(baseClasses, " ").concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(hoverClasses, " ").concat(cursorClass)} onMouseEnter={function () { return onClick && setIsHovered(true); }} onMouseLeave={function () { return onClick && setIsHovered(false); }} onClick={onClick}>
+      {variant === 'dot' && (<span className={"w-3 h-3 rounded-full flex-shrink-0 ".concat(dotColor)}/>)}
+      {Icon && variant !== 'dot' && <Icon className="w-4 h-4 flex-shrink-0" strokeWidth={2}/>}
+      <div className="flex flex-col text-center">
+        <span>{label}</span>
+        {secondLabel && (<span className="text-caption opacity-70">{secondLabel}</span>)}
+      </div>
     </div>);
 }

package/dist/components/textField.d.ts

@@ -3,17 +3,20 @@ interface TextFieldProps {
     id: string;
     label?: string;
     value: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
     onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onSubmit?: () => void;
     autoFocus?: boolean;
     multiline?: boolean;
     maxRows?: number;
     disabled?: boolean;
     error?: boolean;
+    required?: boolean;
     size?: 'large' | 'medium' | 'small';
+    placeholder?: string;
 }
-export default function TextField({ id, label, value, onChange, onBlur, onFocus, onKeyDown, autoFocus, // Accept the autoFocus prop with default value
-multiline, maxRows, disabled, error, size, }: TextFieldProps): React.JSX.Element;
+export default function TextField({ id, label, value, type, onChange, onBlur, onFocus, onKeyDown, onSubmit, autoFocus, multiline, maxRows, disabled, error, required, size, placeholder, }: TextFieldProps): React.JSX.Element;
 export {};

package/dist/components/textField.jsx

@@ -1,20 +1,37 @@
 'use client';
 import React, { useState } from 'react';
 export default function TextField(_a) {
-    var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, // Accept the autoFocus prop with default value
-    _c = _a.multiline, // Accept the autoFocus prop with default value
-    multiline = _c === void 0 ? false : _c, _d = _a.maxRows, maxRows = _d === void 0 ? 6 : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? 'medium' : _g;
-    var _h = useState(false), isFocused = _h[0], setIsFocused = _h[1];
+    var id = _a.id, label = _a.label, value = _a.value, _b = _a.type, type = _b === void 0 ? 'text' : _b, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onSubmit = _a.onSubmit, _c = _a.autoFocus, autoFocus = _c === void 0 ? false : _c, _d = _a.multiline, multiline = _d === void 0 ? false : _d, _e = _a.maxRows, maxRows = _e === void 0 ? 6 : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.size, size = _j === void 0 ? 'medium' : _j, placeholder = _a.placeholder;
+    var _k = useState(false), isFocused = _k[0], setIsFocused = _k[1];
+    var handleKeyDown = function (e) {
+        // Ctrl+Enter or Cmd+Enter to submit
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && onSubmit) {
+            e.preventDefault();
+            onSubmit();
+        }
+        if (onKeyDown)
+            onKeyDown(e);
+    };
     // Define classes for size: text size and padding
     var sizeClasses = {
-        large: 'text-body1 p-[7px] leading-[22px]', // body1 (16px), padding 8px(7 + border 1) height 40
-        medium: 'text-body1 p-[3px] leading-[22px]', // body1 (16px), padding 4px(3 + border 1), height 32
-        small: 'text-body2 p-[3px] leading-[18px]', // body2 (14px), padding 4px(3 + border 1), height 28
+        large: 'text-body1 p-2 leading-[22px]', // body1 (16px), padding 8px
+        medium: 'text-body1 p-2 leading-[22px]', // body1 (16px), padding 8px
+        small: 'text-body2 p-2 leading-[18px]', // body2 (14px), padding 8px
     }[size];
-    var baseClasses = 'w-full border rounded-[8px]';
+    var baseClasses = 'w-full border rounded-[8px] outline-none';
+    var textColor = 'text-light-text-primary dark:text-dark-text-primary';
     var bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
-    var borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
-    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(borderColor, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(disabled ? 'bg-gray-200 cursor-not-allowed' : '', "\n    ").concat(error ? 'border-red-500 focus:ring-red-500' : '', "\n    ").concat(isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : '', "\n    ").concat(!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : '', "\n    border-gray-300\n  ");
+    // Border color logic: error > focused > default (misc-divider)
+    var getBorderColor = function () {
+        if (error) {
+            return 'border-light-error-main dark:border-dark-error-main';
+        }
+        if (isFocused) {
+            return 'border-light-text-primary dark:border-dark-text-primary';
+        }
+        return 'border-light-text-disabled dark:border-dark-text-disabled';
+    };
+    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(textColor, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(getBorderColor(), "\n    ").concat(disabled ? 'bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled cursor-not-allowed' : '', "\n  ");
     return (<div className="flex flex-col w-full">
       {label && (<label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
           {label}
@@ -28,9 +45,7 @@ export default function TextField(_a) {
                 setIsFocused(false);
                 if (onBlur)
                     onBlur(e);
-            }} onKeyDown={onKeyDown} autoFocus={autoFocus} // Pass autoFocus to textarea
-         disabled={disabled} autoComplete="off" // Disable browser autocomplete/autofill
-        />) : (<input id={id} type="text" className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
+            }} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off"/>) : (<input id={id} type={type} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={function (e) {
                 setIsFocused(true);
                 if (onFocus)
                     onFocus(e);
@@ -38,9 +53,7 @@ export default function TextField(_a) {
                 setIsFocused(false);
                 if (onBlur)
                     onBlur(e);
-            }} onKeyDown={onKeyDown} autoFocus={autoFocus} // Pass autoFocus to input
-         disabled={disabled} autoComplete="off" // Disable browser autocomplete/autofill
-        />)}
+            }} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off"/>)}
       </div>
       {error && (<p className="mt-1 text-light-error-main text-body2">
           This field is required

package/dist/components/textarea.d.ts

@@ -7,11 +7,13 @@ interface TextareaProps {
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onSubmit?: () => void;
     autoFocus?: boolean;
     maxRows?: number;
     disabled?: boolean;
     error?: boolean;
-    size?: 'large' | 'medium' | 'small';
+    size?: 'medium' | 'small';
+    placeholder?: string;
 }
-export default function Textarea({ id, label, value, onChange, onBlur, onFocus, onKeyDown, autoFocus, maxRows, disabled, error, size, }: TextareaProps): React.JSX.Element;
+export default function Textarea({ id, label, value, onChange, onBlur, onFocus, onKeyDown, onSubmit, autoFocus, maxRows, disabled, error, size, placeholder, }: TextareaProps): React.JSX.Element;
 export {};

package/dist/components/textarea.jsx

@@ -1,9 +1,18 @@
 'use client';
 import React, { useEffect, useRef, useState } from 'react';
 export default function Textarea(_a) {
-    var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, _c = _a.maxRows, maxRows = _c === void 0 ? 6 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, error = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f;
+    var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onSubmit = _a.onSubmit, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, _c = _a.maxRows, maxRows = _c === void 0 ? 6 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, error = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f, placeholder = _a.placeholder;
     var textareaRef = useRef(null);
     var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    var handleKeyDown = function (e) {
+        // Ctrl+Enter or Cmd+Enter to submit
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && onSubmit) {
+            e.preventDefault();
+            onSubmit();
+        }
+        if (onKeyDown)
+            onKeyDown(e);
+    };
     useEffect(function () {
         var textarea = textareaRef.current;
         if (!textarea)
@@ -15,8 +24,10 @@ export default function Textarea(_a) {
             var scrollHeight = textarea.scrollHeight;
             // Set height to scrollHeight, capped at maxRows, but at least 1 line
             textarea.style.height = "".concat(Math.max(Math.min(scrollHeight, maxHeight), lineHeight), "px");
-            // Enable vertical scroll if content exceeds maxRows
-            textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+            // Enable vertical scroll if content exceeds maxRows (hide scrollbar)
+            textarea.style.overflowY = scrollHeight > maxHeight ? 'scroll' : 'hidden';
+            textarea.style.scrollbarWidth = 'none'; // Firefox
+            textarea.style.msOverflowStyle = 'none'; // IE/Edge
         };
         // Set initial rows to 1 for single-line height
         textarea.rows = 1;
@@ -26,20 +37,29 @@ export default function Textarea(_a) {
     }, [maxRows]);
     // Define classes for size: text size and padding
     var sizeClasses = {
-        large: 'text-body1 p-[7px] leading-[22px]', // body1 (16px), padding 8px(7 + border 1) height 40
-        medium: 'text-body1 p-[3px] leading-[22px]', // body1 (16px), padding 4px(3 + border 1), height 32
-        small: 'text-body2 p-[3px] leading-[18px]', // body2 (14px), padding 4px(3 + border 1), height 28
+        medium: 'text-body1 p-2 leading-[22px]', // body1 (16px), padding 8px
+        small: 'text-body2 p-2 leading-[18px]', // body2 (14px), padding 8px
     }[size];
-    var baseClasses = 'w-full border rounded-[8px]';
+    var baseClasses = 'w-full border rounded-[8px] outline-none [&::-webkit-scrollbar]:hidden';
+    var textColor = 'text-light-text-primary dark:text-dark-text-primary';
     var bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
-    var borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
-    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(borderColor, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(disabled ? 'bg-gray-200 cursor-not-allowed' : '', "\n    ").concat(error ? 'border-red-500 focus:ring-red-500' : '', "\n    ").concat(isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : '', "\n    ").concat(!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : '', "\n    border-gray-300\n  ");
+    // Border color logic: error > focused > default (misc-divider)
+    var getBorderColor = function () {
+        if (error) {
+            return 'border-light-error-main dark:border-dark-error-main';
+        }
+        if (isFocused) {
+            return 'border-light-text-primary dark:border-dark-text-primary';
+        }
+        return 'border-light-text-disabled dark:border-dark-text-disabled';
+    };
+    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(textColor, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(getBorderColor(), "\n    ").concat(disabled ? 'bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled cursor-not-allowed' : '', "\n  ");
     return (<div className="flex flex-col w-full">
       {label && (<label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
           {label}
         </label>)}
       <div className="relative">
-        <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
+        <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={function (e) {
             setIsFocused(true);
             if (onFocus)
                 onFocus(e);
@@ -47,7 +67,7 @@ export default function Textarea(_a) {
             setIsFocused(false);
             if (onBlur)
                 onBlur(e);
-        }} onKeyDown={onKeyDown} autoFocus={autoFocus} disabled={disabled} autoComplete="off"/>
+        }} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} autoComplete="off"/>
       </div>
       {error && (<p className="mt-1 text-light-error-main text-body2">
           This field is required