@1doc/1ds-react 0.0.2 → 2.7.1

package/dist/components/Text/Text.d.ts

@@ -1,70 +0,0 @@
-import './Text.css';
-/**
- * Variantes tipográficas disponíveis
- */
-export type TextVariant = "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "overline" | "label";
-/**
- * Mapeamento de variante para elemento HTML
- */
-/**
- * Variantes tipográficas disponíveis
- */
-/**
- * Mapeamento de variante para elemento HTML
- */
-export interface ResponsiveVariant {
-    xs?: TextVariant;
-    sm?: TextVariant;
-    md?: TextVariant;
-    lg?: TextVariant;
-    xl?: TextVariant;
-    xxl?: TextVariant;
-}
-/**
- * Variantes tipográficas disponíveis
- */
-/**
- * Mapeamento de variante para elemento HTML
- */
-export interface TextProps {
-    /** Variante tipográfica padrão */
-    variant?: TextVariant;
-    /** Sobrescreve o visual independente do elemento semântico */
-    visual?: TextVariant | ResponsiveVariant;
-    /** Variante responsive para xs (também define o elemento semântico) */
-    xs?: TextVariant;
-    /** Variante responsive para sm (também define o elemento semântico) */
-    sm?: TextVariant;
-    /** Variante responsive para md (também define o elemento semântico) */
-    md?: TextVariant;
-    /** Variante responsive para lg (também define o elemento semântico) */
-    lg?: TextVariant;
-    /** Variante responsive para xl (também define o elemento semântico) */
-    xl?: TextVariant;
-    /** Variante responsive para xxl (também define o elemento semântico) */
-    xxl?: TextVariant;
-    /** Elemento HTML a ser renderizado (sobrescreve o padrão da variante) */
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label";
-    /** Alinhamento do texto */
-    align?: "left" | "center" | "right" | "justify";
-    /** Cor do texto usando tokens semânticos */
-    color?: "primary" | "secondary" | "disabled" | "error" | "inherit";
-    /** Peso da fonte */
-    weight?: "thin" | "light" | "regular" | "medium" | "semibold" | "bold" | "extrabold" | "black";
-    /** Truncar texto com ellipsis */
-    noWrap?: boolean;
-    /** Número máximo de linhas antes de truncar */
-    maxLines?: number;
-    /** Transforma o texto */
-    transform?: "none" | "capitalize" | "uppercase" | "lowercase";
-    /** Adiciona margem inferior baseada no espaçamento do design system */
-    gutterBottom?: boolean;
-    /** Classes CSS adicionais */
-    className?: string;
-    /** Conteúdo do texto */
-    children?: any;
-    /** Atributos HTML adicionais */
-    [key: string]: any;
-}
-declare function Text(props: TextProps): import("react/jsx-runtime").JSX.Element;
-export default Text;

package/dist/components/Text/Text.js

@@ -1,89 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import './Text.css';
-/**
- * Mapeamento de variante para elemento HTML
- */
-const variantToElement = {
-    display: "h1",
-    h1: "h1",
-    h2: "h2",
-    h3: "h3",
-    h4: "h4",
-    h5: "h5",
-    h6: "h6",
-    subtitle1: "h6",
-    subtitle2: "h6",
-    body1: "p",
-    body2: "p",
-    caption: "span",
-    overline: "span",
-    label: "label",
-};
-function Text(props) {
-    function elementTag() {
-        if (props.as)
-            return props.as;
-        const baseVar = props.variant || props.xs || "body1";
-        return variantToElement[baseVar] || "p";
-    }
-    function classes() {
-        const respClasses = [];
-        // Base variant
-        const baseVar = props.variant || props.xs || "body1";
-        respClasses.push(`umds-text--${baseVar}`);
-        // Responsive variants (semantic)
-        if (props.sm)
-            respClasses.push(`umds-text--sm-${props.sm}`);
-        if (props.md)
-            respClasses.push(`umds-text--md-${props.md}`);
-        if (props.lg)
-            respClasses.push(`umds-text--lg-${props.lg}`);
-        if (props.xl)
-            respClasses.push(`umds-text--xl-${props.xl}`);
-        if (props.xxl)
-            respClasses.push(`umds-text--xxl-${props.xxl}`);
-        // Visual overrides
-        if (props.visual) {
-            if (typeof props.visual === "string") {
-                respClasses.push(`umds-text--visual-${props.visual}`);
-            }
-            else {
-                if (props.visual.xs)
-                    respClasses.push(`umds-text--visual-${props.visual.xs}`);
-                if (props.visual.sm)
-                    respClasses.push(`umds-text--visual-sm-${props.visual.sm}`);
-                if (props.visual.md)
-                    respClasses.push(`umds-text--visual-md-${props.visual.md}`);
-                if (props.visual.lg)
-                    respClasses.push(`umds-text--visual-lg-${props.visual.lg}`);
-                if (props.visual.xl)
-                    respClasses.push(`umds-text--visual-xl-${props.visual.xl}`);
-                if (props.visual.xxl)
-                    respClasses.push(`umds-text--visual-xxl-${props.visual.xxl}`);
-            }
-        }
-        return [
-            "umds-text",
-            ...respClasses,
-            props.align ? `umds-text--align-${props.align}` : "",
-            props.color ? `umds-text--color-${props.color}` : "",
-            props.weight ? `umds-text--weight-${props.weight}` : "",
-            props.noWrap ? "umds-text--nowrap" : "",
-            props.maxLines ? "umds-text--clamp" : "",
-            props.transform ? `umds-text--transform-${props.transform}` : "",
-            props.gutterBottom ? "umds-text--gutter-bottom" : "",
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    function style() {
-        const styles = {};
-        if (props.maxLines) {
-            styles["--umds-text-max-lines"] = String(props.maxLines);
-        }
-        return styles;
-    }
-    return (_jsxs(_Fragment, { children: [elementTag() === "h1" ? (_jsx("h1", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "h2" ? (_jsx("h2", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "h3" ? (_jsx("h3", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "h4" ? (_jsx("h4", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "h5" ? (_jsx("h5", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "h6" ? (_jsx("h6", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "p" ? (_jsx("p", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "span" ? (_jsx("span", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "label" ? (_jsx("label", { style: style(), ...props, className: classes(), children: props.children })) : null, elementTag() === "div" ? (_jsx("div", { style: style(), ...props, className: classes(), children: props.children })) : null] }));
-}
-export default Text;

package/dist/components/Textarea/Textarea.css

@@ -1,133 +0,0 @@
-/* Base Wrapper */
-.umds-textarea {
-    display: flex;
-    flex-direction: column;
-    gap: var(--umds-primitive-spacing-nano);
-    font-family: var(--umds-semantic-font-family-base);
-    width: 390px;
-}
-
-.umds-textarea--full-width {
-    width: 100%;
-}
-
-/* Label */
-.umds-textarea__label {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    /* Font styles handled by Text component */
-}
-
-.umds-textarea__required {
-    color: var(--umds-semantic-color-feedback-negative-pure);
-    font-weight: bold;
-}
-
-/* Textarea Container (Box) */
-.umds-textarea__container {
-    display: flex;
-    align-items: flex-start;
-    position: relative;
-    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);
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-/* Control (Textarea element) */
-.umds-textarea__control {
-    flex: 1;
-    border: none;
-    background: transparent;
-    outline: none;
-    color: var(--umds-semantic-color-neutral-pure);
-    font-size: var(--umds-primitive-font-size-xs);
-    font-family: inherit;
-    width: 100%;
-    padding: var(--umds-primitive-spacing-xxxs);
-    margin: 0;
-    resize: vertical;
-    line-height: 1.5;
-}
-
-.umds-textarea__control::placeholder {
-    color: var(--umds-semantic-color-neutral-dark-medium);
-}
-
-/* AutoSize Mode */
-.umds-textarea--autosize .umds-textarea__control {
-    resize: none;
-}
-
-/* States */
-.umds-textarea__container:hover {
-    border-color: var(--umds-semantic-color-neutral-dark-down);
-}
-
-.umds-textarea__container:focus-within {
-    outline: 2px solid var(--umds-semantic-color-neutral-dark-down);
-    outline-offset: 2px;
-    border-color: var(--umds-semantic-color-neutral-dark-up);
-}
-
-/* Error State */
-.umds-textarea--error .umds-textarea__container {
-    border-color: var(--umds-semantic-color-feedback-negative-pure);
-}
-
-.umds-textarea--error .umds-textarea__container:focus-within {
-    outline: 2px solid var(--umds-semantic-color-feedback-negative-pure);
-    border-color: var(--umds-semantic-color-feedback-negative-pure);
-}
-
-/* Disabled State */
-.umds-textarea--disabled .umds-textarea__label,
-.umds-textarea--disabled .umds-textarea__message,
-.umds-textarea--disabled .umds-textarea__counter {
-    color: var(--umds-semantic-color-neutral-light-down);
-}
-
-.umds-textarea--disabled .umds-textarea__container {
-    background-color: var(--umds-semantic-color-neutral-light-medium);
-    border-color: var(--umds-semantic-color-neutral-light-down);
-    pointer-events: none;
-}
-
-.umds-textarea--disabled .umds-textarea__control {
-    color: var(--umds-semantic-color-neutral-light-down);
-    -webkit-text-fill-color: var(--umds-semantic-color-neutral-light-down);
-}
-
-.umds-textarea--disabled,
-.umds-textarea--disabled textarea {
-    cursor: not-allowed;
-}
-
-/* Read Only State */
-.umds-textarea--readonly .umds-textarea__container {
-    background-color: var(--umds-semantic-color-neutral-light-medium);
-    border-color: var(--umds-semantic-color-neutral-light-down);
-}
-
-/* Footer (Helper/Error + Counter) */
-.umds-textarea__footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    width: 100%;
-}
-
-.umds-textarea__messages {
-    flex: 1;
-}
-
-
-
-/* Counter */
-.umds-textarea__counter {
-    font-size: var(--umds-primitive-font-size-xxs);
-    line-height: var(--umds-primitive-font-line-height-lg);
-    color: var(--umds-semantic-color-neutral-dark-medium);
-    white-space: nowrap;
-}

package/dist/components/Textarea/Textarea.d.ts

@@ -1,28 +0,0 @@
-import './Textarea.css';
-export interface TextareaProps {
-    label?: any;
-    name?: string;
-    value?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    helperText?: any;
-    errorMessage?: any;
-    disabled?: boolean;
-    readOnly?: boolean;
-    required?: boolean;
-    rows?: number;
-    minRows?: number;
-    maxRows?: number;
-    maxLength?: number;
-    showCounter?: boolean;
-    autoSize?: boolean;
-    fullWidth?: boolean;
-    className?: string;
-    onChange?: (event: any) => void;
-    onInput?: (event: any) => void;
-    onFocus?: (event: any) => void;
-    onBlur?: (event: any) => void;
-    [key: string]: any;
-}
-declare function Textarea(props: TextareaProps): import("react/jsx-runtime").JSX.Element;
-export default Textarea;

package/dist/components/Textarea/Textarea.js

@@ -1,72 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './Textarea.css';
-"use client";
-import { useState, useRef, useEffect } from "react";
-import Text from "../Text/Text";
-function Textarea(props) {
-    const textareaRef = useRef(null);
-    const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
-    function charCount() {
-        const val = props.value !== undefined ? props.value : internalValue;
-        return val ? val.length : 0;
-    }
-    function wrapperClasses() {
-        const hasError = props.errorMessage && props.errorMessage.length > 0;
-        return [
-            "umds-textarea",
-            props.fullWidth ? "umds-textarea--full-width" : "",
-            hasError ? "umds-textarea--error" : "",
-            props.disabled ? "umds-textarea--disabled" : "",
-            props.readOnly ? "umds-textarea--readonly" : "",
-            props.autoSize ? "umds-textarea--autosize" : "",
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    function containerClasses() {
-        const hasError = props.errorMessage && props.errorMessage.length > 0;
-        return [
-            "umds-textarea__container",
-            hasError ? "umds-textarea__container--error" : "",
-            props.disabled ? "umds-textarea__container--disabled" : "",
-            props.readOnly ? "umds-textarea__container--readonly" : "",
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    function adjustHeight() {
-        if (props.autoSize && textareaRef.current) {
-            const textarea = textareaRef.current;
-            textarea.style.height = "auto";
-            const scrollHeight = textarea.scrollHeight;
-            // Calculate min/max heights based on rows
-            const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 24;
-            const paddingTop = parseInt(getComputedStyle(textarea).paddingTop) || 12;
-            const paddingBottom = parseInt(getComputedStyle(textarea).paddingBottom) || 12;
-            const minRows = props.minRows || 2;
-            const maxRows = props.maxRows || 10;
-            const minHeight = lineHeight * minRows + paddingTop + paddingBottom;
-            const maxHeight = lineHeight * maxRows + paddingTop + paddingBottom;
-            const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
-            textarea.style.height = newHeight + "px";
-        }
-    }
-    function handleInput(event) {
-        setInternalValue(event.target.value);
-        adjustHeight();
-        if (props.onInput) {
-            props.onInput(event);
-        }
-        if (props.onChange) {
-            props.onChange(event);
-        }
-    }
-    useEffect(() => {
-        if (props.autoSize) {
-            adjustHeight();
-        }
-    }, []);
-    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", weight: "semibold", className: "umds-textarea__label", children: [_jsx(_Fragment, { children: props.label || "{props.label}" }), props.required ? (_jsx("span", { className: "umds-textarea__required", children: "*" })) : null] })) : null, _jsx("div", { className: containerClasses(), children: _jsx("textarea", { className: "umds-textarea__control", ref: textareaRef, name: props.name, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: props.value !== undefined ? props.value : internalValue, defaultValue: props.defaultValue, rows: props.autoSize ? props.minRows || 2 : props.rows || 4, maxLength: props.maxLength, onInput: (event) => handleInput(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-invalid": !!(props.errorMessage && props.errorMessage.length > 0), required: props.required }) }), _jsxs("div", { className: "umds-textarea__footer", children: [_jsxs("div", { className: "umds-textarea__messages", children: [props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "error", children: props.errorMessage })) : null, props.helperText && !props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: _jsx(_Fragment, { children: props.helperText || "{props.helperText}" }) })) : null] }), props.showCounter ? (_jsxs("span", { className: "umds-textarea__counter", children: [charCount(), "/", props.maxLength || 150] })) : null] })] }));
-}
-export default Textarea;

package/dist/index.d.ts

@@ -1,25 +0,0 @@
-export * from "./utils/theme";
-export { default as Button } from "./components/Button/Button";
-export { default as Icon } from "./components/Icon/Icon";
-export { default as Spinner } from "./components/Spinner/Spinner";
-export { default as Divider } from "./components/Divider/Divider";
-export { default as Badge } from "./components/Badge/Badge";
-export { default as Avatar } from "./components/Avatar/Avatar";
-export { default as AvatarGroup } from "./components/Avatar/AvatarGroup";
-export { default as Logo } from "./components/Logo/Logo";
-export { default as Link } from "./components/Link/Link";
-export { default as Switch } from "./components/Switch/Switch";
-export { default as Checkbox } from "./components/Checkbox/Checkbox";
-export { default as Radio } from "./components/Radio/Radio";
-export { default as Input } from "./components/Input/Input";
-export { default as Grid } from "./components/Grid/Grid";
-export { default as Textarea } from "./components/Textarea/Textarea";
-export { default as Select } from "./components/Select/Select";
-export { default as Text } from "./components/Text/Text";
-export { default as Tabs } from "./components/Tabs/Tabs";
-export { default as Tab } from "./components/Tabs/Tab";
-export { default as TabsContent } from "./components/Tabs/TabsContent";
-export { default as TabContent } from "./components/Tabs/TabContent";
-export { default as Tag } from "./components/Tag/Tag";
-export { default as Modal } from "./components/Modal/Modal";
-export { default as Alert } from "./components/Alert/Alert";

package/dist/index.js

@@ -1,27 +0,0 @@
-// Theme utilities
-export * from "./utils/theme";
-// Components
-export { default as Button } from "./components/Button/Button";
-export { default as Icon } from "./components/Icon/Icon";
-export { default as Spinner } from "./components/Spinner/Spinner";
-export { default as Divider } from "./components/Divider/Divider";
-export { default as Badge } from "./components/Badge/Badge";
-export { default as Avatar } from "./components/Avatar/Avatar";
-export { default as AvatarGroup } from "./components/Avatar/AvatarGroup";
-export { default as Logo } from "./components/Logo/Logo";
-export { default as Link } from "./components/Link/Link";
-export { default as Switch } from "./components/Switch/Switch";
-export { default as Checkbox } from "./components/Checkbox/Checkbox";
-export { default as Radio } from "./components/Radio/Radio";
-export { default as Input } from "./components/Input/Input";
-export { default as Grid } from "./components/Grid/Grid";
-export { default as Textarea } from "./components/Textarea/Textarea";
-export { default as Select } from "./components/Select/Select";
-export { default as Text } from "./components/Text/Text";
-export { default as Tabs } from "./components/Tabs/Tabs";
-export { default as Tab } from "./components/Tabs/Tab";
-export { default as TabsContent } from "./components/Tabs/TabsContent";
-export { default as TabContent } from "./components/Tabs/TabContent";
-export { default as Tag } from "./components/Tag/Tag";
-export { default as Modal } from "./components/Modal/Modal";
-export { default as Alert } from "./components/Alert/Alert";

package/dist/utils/theme.d.ts

@@ -1,30 +0,0 @@
-/**
- * Tipos de temas disponíveis no Design System
- */
-export type Theme = "1doc" | "1ds-red" | "1ds-green" | "1ds-orange" | "1ds-yellow";
-/**
- * Define o tema ativo no documento
- * @param theme - Nome do tema a ser aplicado
- */
-export declare const setTheme: (theme: Theme) => void;
-/**
- * Obtém o tema atual, considerando localStorage e preferências do sistema
- * @returns O tema atualmente selecionado
- */
-export declare const getTheme: () => Theme;
-/**
- * Inicializa o tema ao carregar a página
- * Deve ser chamado o mais cedo possível para evitar flash de conteúdo
- */
-export declare const initTheme: () => void;
-/**
- * Retorna todos os temas disponíveis
- * @returns Array com todos os temas disponíveis
- */
-export declare const getAvailableThemes: () => Theme[];
-/**
- * Hook para detectar mudanças de tema (útil para frameworks reativos)
- * @param callback - Função a ser executada quando o tema mudar
- * @returns Função para remover o listener
- */
-export declare const onThemeChange: (callback: (theme: Theme) => void) => (() => void);

package/dist/utils/theme.js

@@ -1,106 +0,0 @@
-/**
- * Chave do localStorage para armazenar o tema selecionado
- */
-const THEME_STORAGE_KEY = "umds-theme";
-/**
- * Tema padrão do sistema
- */
-const DEFAULT_THEME = "1doc";
-/**
- * Define o tema ativo no documento
- * @param theme - Nome do tema a ser aplicado
- */
-export const setTheme = (theme) => {
-    if (typeof document !== "undefined") {
-        document.documentElement.setAttribute("data-theme", theme);
-        try {
-            localStorage.setItem(THEME_STORAGE_KEY, theme);
-        }
-        catch (e) {
-            // Silenciosamente falha se localStorage não estiver disponível
-            console.warn("Failed to save theme to localStorage:", e);
-        }
-    }
-};
-/**
- * Obtém o tema atual, considerando localStorage e preferências do sistema
- * @returns O tema atualmente selecionado
- */
-export const getTheme = () => {
-    if (typeof window === "undefined") {
-        return DEFAULT_THEME;
-    }
-    // 1. Tenta buscar do localStorage
-    try {
-        const stored = localStorage.getItem(THEME_STORAGE_KEY);
-        if (stored && isValidTheme(stored)) {
-            return stored;
-        }
-    }
-    catch (e) {
-        console.warn("Failed to read theme from localStorage:", e);
-    }
-    // 2. Tenta buscar do atributo data-theme do HTML
-    const currentTheme = document.documentElement.getAttribute("data-theme");
-    if (currentTheme && isValidTheme(currentTheme)) {
-        return currentTheme;
-    }
-    // 3. Retorna o tema padrão
-    return DEFAULT_THEME;
-};
-/**
- * Inicializa o tema ao carregar a página
- * Deve ser chamado o mais cedo possível para evitar flash de conteúdo
- */
-export const initTheme = () => {
-    const theme = getTheme();
-    setTheme(theme);
-};
-/**
- * Valida se uma string é um tema válido
- * @param theme - String a ser validada
- * @returns true se o tema é válido
- */
-function isValidTheme(theme) {
-    const validThemes = [
-        "1doc",
-        "1ds-red",
-        "1ds-green",
-        "1ds-orange",
-        "1ds-yellow",
-    ];
-    return validThemes.includes(theme);
-}
-/**
- * Retorna todos os temas disponíveis
- * @returns Array com todos os temas disponíveis
- */
-export const getAvailableThemes = () => {
-    return ["1doc", "1ds-red", "1ds-green", "1ds-orange", "1ds-yellow"];
-};
-/**
- * Hook para detectar mudanças de tema (útil para frameworks reativos)
- * @param callback - Função a ser executada quando o tema mudar
- * @returns Função para remover o listener
- */
-export const onThemeChange = (callback) => {
-    if (typeof window === "undefined") {
-        return () => { };
-    }
-    const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            if (mutation.type === "attributes" &&
-                mutation.attributeName === "data-theme") {
-                const newTheme = document.documentElement.getAttribute("data-theme");
-                if (newTheme && isValidTheme(newTheme)) {
-                    callback(newTheme);
-                }
-            }
-        });
-    });
-    observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ["data-theme"],
-    });
-    return () => observer.disconnect();
-};