@1doc/1ds-react 0.0.1

package/dist/components/Select/Select.css

@@ -0,0 +1,291 @@
+.umds-select {
+    display: flex;
+    flex-direction: column;
+    gap: var(--umds-primitive-spacing-nano);
+    font-family: var(--umds-semantic-font-family-base);
+    width: 320px;
+}
+
+.umds-select--full-width {
+    width: 100%;
+}
+
+.umds-select__label {
+    display: flex;
+    align-items: center;
+}
+
+.umds-select__required {
+    color: var(--umds-semantic-color-feedback-negative-pure);
+}
+
+.umds-select__container {
+    position: relative;
+    width: 100%;
+}
+
+.umds-select__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--umds-semantic-color-background-white);
+    border: 1px solid var(--umds-semantic-color-neutral-dark-up);
+    border-radius: var(--umds-primitive-border-radius-sm);
+    padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs);
+    min-height: 48px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.umds-select--small .umds-select__trigger {
+    min-height: 32px;
+    padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-nano);
+}
+
+.umds-select--large .umds-select__trigger {
+    min-height: 56px;
+    padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxs);
+}
+
+.umds-select__trigger:hover {
+    border-color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-select__trigger:focus {
+    outline: 2px solid var(--umds-semantic-color-neutral-dark-down);
+    outline-offset: 2px;
+}
+
+.umds-select--open .umds-select__trigger {
+    border-color: var(--umds-semantic-color-primary-pure);
+    box-shadow: 0 0 0 1px var(--umds-semantic-color-primary-pure);
+}
+
+.umds-select--disabled .umds-select__trigger {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    border-color: var(--umds-semantic-color-neutral-light-down);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.umds-select--invalid .umds-select__trigger {
+    border-color: var(--umds-semantic-color-feedback-negative-pure);
+}
+
+.umds-select__values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    flex: 1;
+    overflow: hidden;
+    min-width: 0;
+    align-items: center;
+}
+
+.umds-select--has-tags .umds-select__values {
+    overflow: visible;
+}
+
+.umds-select__placeholder {
+    color: var(--umds-semantic-color-neutral-light-down);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.umds-select__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--umds-primitive-spacing-nano);
+    margin-left: 8px;
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+.umds-select__arrow {
+    display: flex;
+    transition: transform 0.2s ease;
+}
+
+.umds-select--open .umds-select__arrow {
+    transform: rotate(0deg);
+    /* handled by icon name chagne but keeping just in case */
+}
+
+/* Options Dropdown */
+.umds-select__dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    width: 100%;
+    background-color: var(--umds-semantic-color-background-white);
+    border: 1px solid var(--umds-semantic-color-neutral-dark-up);
+    border-radius: var(--umds-primitive-border-radius-sm);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    z-index: 5000;
+    max-height: 300px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.umds-select__search-container {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--umds-semantic-color-neutral-light-medium);
+    gap: 8px;
+    background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select__search-icon {
+    display: flex;
+    align-items: center;
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+.umds-select__search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: var(--umds-primitive-font-size-xxs);
+    color: var(--umds-semantic-color-neutral-pure);
+    background: transparent;
+}
+
+/* Inline Search Variant Styles */
+.umds-select--search-inline .umds-select__search-container {
+    padding: 0 12px;
+    height: 48px;
+    border-bottom: 1px solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-select--search-inline.umds-select--small .umds-select__search-container {
+    height: 32px;
+}
+
+.umds-select--search-inline.umds-select--large .umds-select__search-container {
+    height: 56px;
+}
+
+.umds-select__search-close {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: var(--umds-semantic-color-neutral-dark-up);
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.umds-select__search-close:hover {
+    opacity: 1;
+}
+
+.umds-select__options {
+    overflow-y: auto;
+    flex: 1;
+    padding: 4px 0;
+}
+
+.umds-select__option {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+    gap: 8px;
+    color: var(--umds-semantic-color-neutral-pure);
+}
+
+.umds-select__option:hover {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-select__option--selected {
+    background-color: var(--umds-semantic-color-primary-light);
+    color: var(--umds-semantic-color-neutral-pure);
+    font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
+.umds-select__option--selected:hover {
+    background-color: var(--umds-semantic-color-primary-light);
+}
+
+.umds-select__option-check {
+    display: flex;
+    align-items: center;
+    color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-select__option-content {
+    flex: 1;
+}
+
+.umds-select__no-options {
+    padding: 16px;
+    text-align: center;
+}
+
+.umds-select__loading-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px;
+    border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+/* Tags */
+.umds-select__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.umds-select__tag {
+    display: flex;
+    align-items: center;
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+    border-radius: var(--umds-primitive-border-radius-xs);
+    padding: 2px 4px 2px 8px;
+    gap: 4px;
+}
+
+.umds-select__tag-close {
+    cursor: pointer;
+    display: flex;
+    opacity: 0.6;
+}
+
+.umds-select__tag-close:hover {
+    opacity: 1;
+    color: var(--umds-semantic-color-feedback-negative-pure);
+}
+
+/* Selected List */
+.umds-select__selected-list {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.umds-select__selected-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background-color: var(--umds-semantic-color-background-light);
+    border: 1px solid var(--umds-semantic-color-neutral-light-medium);
+    border-radius: var(--umds-primitive-border-radius-sm);
+}
+
+.umds-select__list-remove {
+    cursor: pointer;
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+.umds-select__list-remove:hover {
+    color: var(--umds-semantic-color-feedback-negative-pure);
+}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,38 @@
+import './Select.css';
+export interface SelectOption {
+    label: string;
+    value: any;
+    [key: string]: any;
+}
+export interface SelectProps {
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    options?: SelectOption[];
+    value?: any | any[];
+    multiple?: boolean;
+    searchable?: boolean;
+    autoFocusSearch?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    loading?: boolean;
+    errorMessage?: string;
+    fullWidth?: boolean;
+    size?: "small" | "medium" | "large";
+    pagination?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+    onSearchChange?: (query: string) => void;
+    searchVariant?: "default" | "inline";
+    searchDebounce?: number;
+    cache?: boolean;
+    cacheKey?: string;
+    cacheTime?: number;
+    selectionDisplay?: "text" | "tags" | "list";
+    onChange?: (value: any | any[]) => void;
+    item?: any;
+    className?: string;
+    [key: string]: any;
+}
+declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './Select.css';
+"use client";
+import { useState, useRef, useEffect } from "react";
+import Text from "../Text/Text";
+import Icon from "../Icon/Icon";
+import Spinner from "../Spinner/Spinner";
+import Checkbox from "../Checkbox/Checkbox";
+import Tag from "../Tag/Tag";
+function Select(props) {
+    const selectRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(() => false);
+    const [searchTerm, setSearchTerm] = useState(() => "");
+    const [internalSelected, setInternalSelected] = useState(() => Array());
+    const [searchTimeout, setSearchTimeout] = useState(() => null);
+    const [shouldFocusSearch, setShouldFocusSearch] = useState(() => false);
+    function selectedOptionsList() {
+        const currentVal = props.value !== undefined
+            ? Array.isArray(props.value)
+                ? props.value
+                : props.value === null
+                    ? []
+                    : [props.value]
+            : internalSelected || [];
+        if (props.options && props.options.length > 0) {
+            return currentVal.map((v) => {
+                const found = props.options?.find((opt) => opt.value === v);
+                return (found || {
+                    label: String(v),
+                    value: v,
+                });
+            });
+        }
+        return (currentVal || []).map((v) => ({
+            label: String(v),
+            value: v,
+        }));
+    }
+    function displayLabelText() {
+        const currentVal = props.value !== undefined
+            ? Array.isArray(props.value)
+                ? props.value
+                : props.value === null
+                    ? []
+                    : [props.value]
+            : internalSelected || [];
+        if (currentVal.length === 0)
+            return props.placeholder || "Selecione...";
+        if (props.multiple) {
+            if (props.selectionDisplay === "tags")
+                return "";
+            if (currentVal.length === 1) {
+                const found = props.options?.find((opt) => opt.value === currentVal[0]);
+                return found ? found.label : String(currentVal[0]);
+            }
+            return `${currentVal.length} selecionado(s)`;
+        }
+        // For single select, find label
+        if (props.options) {
+            const found = props.options.find((opt) => opt.value === currentVal[0]);
+            if (found)
+                return found.label;
+        }
+        return String(currentVal[0]);
+    }
+    function isPlaceholder() {
+        const currentVal = props.value !== undefined
+            ? Array.isArray(props.value)
+                ? props.value
+                : props.value === null
+                    ? []
+                    : [props.value]
+            : internalSelected || [];
+        return currentVal.length === 0;
+    }
+    function filteredOptionsList() {
+        if (!props.options)
+            return [];
+        // If it's remote search (onSearchChange provided), we don't filter locally
+        if (!props.searchable || !searchTerm || props.onSearchChange)
+            return props.options;
+        const term = searchTerm.toLowerCase();
+        return props.options.filter((opt) => opt.label.toLowerCase().includes(term));
+    }
+    function wrapperClassesList() {
+        return [
+            "umds-select",
+            `umds-select--${props.size || "medium"}`,
+            props.fullWidth ? "umds-select--full-width" : "",
+            props.disabled ? "umds-select--disabled" : "",
+            props.invalid ? "umds-select--invalid" : "",
+            isOpen ? "umds-select--open" : "",
+            props.searchVariant === "inline" ? "umds-select--search-inline" : "",
+            props.multiple &&
+                props.selectionDisplay === "tags" &&
+                selectedOptionsList().length > 0
+                ? "umds-select--has-tags"
+                : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function toggle() {
+        if (props.disabled)
+            return;
+        setIsOpen(!isOpen);
+        if (isOpen &&
+            props.searchable &&
+            (props.autoFocusSearch || props.searchVariant === "inline")) {
+            setShouldFocusSearch(true);
+        }
+    }
+    function handleSearch(event) {
+        const val = event.target.value;
+        setSearchTerm(val);
+        if (props.onSearchChange) {
+            if (searchTimeout) {
+                clearTimeout(searchTimeout);
+            }
+            const debounceTime = props.searchDebounce ?? 300;
+            setSearchTimeout(setTimeout(() => {
+                props.onSearchChange(val);
+            }, debounceTime));
+        }
+    }
+    function clearSearch() {
+        setSearchTerm("");
+        if (props.onSearchChange) {
+            props.onSearchChange("");
+        }
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    }
+    function closeSearch() {
+        setIsOpen(false);
+        setSearchTerm("");
+        if (props.onSearchChange) {
+            props.onSearchChange("");
+        }
+    }
+    function selectOption(option) {
+        if (props.disabled)
+            return;
+        let newValue;
+        if (props.multiple) {
+            const currentVal = props.value !== undefined
+                ? Array.isArray(props.value)
+                    ? props.value
+                    : props.value === null
+                        ? []
+                        : [props.value]
+                : internalSelected || [];
+            if (currentVal.includes(option.value)) {
+                newValue = currentVal.filter((v) => v !== option.value);
+            }
+            else {
+                newValue = [...currentVal, option.value];
+            }
+            setInternalSelected(newValue);
+        }
+        else {
+            newValue = option.value;
+            setInternalSelected([newValue]);
+            setIsOpen(false);
+        }
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+    }
+    function removeValue(val, event) {
+        if (event)
+            event.stopPropagation();
+        if (props.disabled)
+            return;
+        const currentVal = props.value !== undefined
+            ? Array.isArray(props.value)
+                ? props.value
+                : [props.value]
+            : internalSelected || [];
+        const newValue = currentVal.filter((v) => v !== val);
+        setInternalSelected(newValue);
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+    }
+    function onScrollList(event) {
+        if (!props.pagination ||
+            !props.onLoadMore ||
+            props.loading ||
+            !props.hasMore)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = event.target;
+        if (scrollHeight - scrollTop <= clientHeight + 10) {
+            props.onLoadMore();
+        }
+    }
+    function isOptionSelected(val) {
+        const currentVal = props.value !== undefined
+            ? Array.isArray(props.value)
+                ? props.value
+                : props.value === null
+                    ? []
+                    : [props.value]
+            : internalSelected || [];
+        return currentVal.includes(val);
+    }
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (selectRef.current &&
+                !selectRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+    }, []);
+    useEffect(() => {
+        if (isOpen && shouldFocusSearch) {
+            // Retry a few times if ref is not yet ready (though onUpdate usually implies rendered)
+            // We use a small timeout to ensure browser paints or simply check ref
+            if (searchInputRef.current) {
+                searchInputRef.current.focus();
+                setShouldFocusSearch(false);
+            }
+        }
+    });
+    return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", weight: "semibold", className: "umds-select__label", children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(isOpen && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", className: "umds-select__trigger", onClick: (event) => toggle(), "aria-expanded": isOpen, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [displayLabelText() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
+                                        props.selectionDisplay === "tags" &&
+                                        selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { variant: "outlined", size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, { size: "sm", name: isOpen ? "nav-arrow-up" : "nav-arrow-down" }) })] })] })) : null, isOpen ? (_jsxs("div", { className: "umds-select__dropdown", style: props.searchVariant === "inline"
+                            ? {
+                                top: "0",
+                            }
+                            : {}, children: [props.searchable ? (_jsxs("div", { className: "umds-select__search-container", children: [_jsx("div", { className: "umds-select__search-icon", children: _jsx(Icon, { name: "search", size: "sm" }) }), _jsx("input", { type: "text", placeholder: "Buscar...", className: "umds-select__search-input", ref: searchInputRef, value: searchTerm, onInput: (e) => handleSearch(e) }), props.searchVariant === "inline" ? (_jsx("div", { className: "umds-select__search-close", onClick: (event) => closeSearch(), children: _jsx(Icon, { name: "xmark", size: "sm" }) })) : null] })) : null, _jsxs("div", { className: "umds-select__options", onScroll: (e) => onScrollList(e), children: [filteredOptionsList().length === 0 && !props.loading ? (_jsx("div", { className: "umds-select__no-options", children: _jsx(Text, { variant: "body2", color: "secondary", children: "Nenhum item encontrado" }) })) : null, filteredOptionsList()?.map((option) => (_jsxs("div", { onClick: (event) => selectOption(option), className: [
+                                            "umds-select__option",
+                                            isOptionSelected(option.value)
+                                                ? "umds-select__option--selected"
+                                                : "",
+                                        ]
+                                            .filter(Boolean)
+                                            .join(" "), children: [props.multiple ? (_jsx("div", { className: "umds-select__option-checkbox", children: _jsx(Checkbox, { checked: isOptionSelected(option.value), readOnly: true }) })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { name: "check", size: "sm" }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: "Carregando mais..." })] })) : null] })] })) : null] }), props.errorMessage ? (_jsx(Text, { variant: "caption", color: "error", className: "umds-select__error-message", children: props.errorMessage })) : null, props.description && !props.errorMessage ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", children: props.description })) : null, props.multiple &&
+                props.selectionDisplay === "list" &&
+                selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__selected-list", children: selectedOptionsList()?.map((opt) => (_jsxs("div", { className: "umds-select__selected-list-item", children: [_jsx(Text, { variant: "body2", children: opt.label }), _jsx("span", { className: "umds-select__list-remove", onClick: (e) => removeValue(opt.value, e), children: _jsx(Icon, { name: "trash", size: "sm" }) })] }, opt.value))) })) : null] }));
+}
+export default Select;

package/dist/components/Spinner/Spinner.css

@@ -0,0 +1,60 @@
+.umds-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.umds-spinner__circle {
+    display: block;
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    animation: umds-spinner-rotate 0.8s linear infinite;
+}
+
+/* Sizes */
+.umds-spinner--sm .umds-spinner__circle {
+    width: 16px;
+    height: 16px;
+    border-width: 2px;
+}
+
+.umds-spinner--md .umds-spinner__circle {
+    width: 24px;
+    height: 24px;
+    border-width: 3px;
+}
+
+.umds-spinner--lg .umds-spinner__circle {
+    width: 32px;
+    height: 32px;
+    border-width: 4px;
+}
+
+/* Variants */
+.umds-spinner--primary .umds-spinner__circle {
+    border-bottom-color: var(--umds-semantic-color-primary-pure);
+    border-left-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-spinner--secondary .umds-spinner__circle {
+    border-bottom-color: var(--umds-semantic-color-primary-dark);
+    border-left-color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-spinner--neutral .umds-spinner__circle {
+    border-bottom-color: var(--umds-semantic-color-neutral-dark-medium);
+    border-left-color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+/* Animation */
+@keyframes umds-spinner-rotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,16 @@
+import './Spinner.css';
+/**
+ * Spinner component for loading states
+ * @property {string} size - Tamanho do spinner: 'sm' (16px), 'md' (24px), 'lg' (32px)
+ * @property {string} variant - Variante de cor: 'primary', 'secondary', 'neutral'
+ * @property {string} label - Label acessível para leitores de tela
+ */
+export interface SpinnerProps {
+    size?: "sm" | "md" | "lg";
+    variant?: "primary" | "secondary" | "neutral";
+    label?: string;
+    className?: string;
+    [key: string]: any;
+}
+declare function Spinner(props: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export default Spinner;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Spinner.css';
+function Spinner(props) {
+    function classes() {
+        return [
+            "umds-spinner",
+            `umds-spinner--${props.size || "md"}`,
+            `umds-spinner--${props.variant || "primary"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    return (_jsx("span", { role: "status", "aria-label": props.label || "Carregando", ...props, className: classes(), children: _jsx("span", { className: "umds-spinner__circle" }) }));
+}
+export default Spinner;