@1doc/1ds-react 0.0.2 → 2.7.1

package/dist/components/Avatar/Avatar.css

@@ -1,88 +0,0 @@
-.umds-avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    overflow: hidden;
-    font-family: var(--umds-semantic-font-family-base, inherit);
-    font-weight: 600;
-    /* SemiBold */
-    text-transform: uppercase;
-    line-height: 1;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    white-space: nowrap;
-    user-select: none;
-    border: 1.5px solid var(--umds-semantic-color-background-white);
-    /* Borda branca global */
-}
-
-/* Sizes */
-.umds-avatar--xs {
-    width: 16px;
-    height: 16px;
-    font-size: 8px;
-}
-
-.umds-avatar--sm {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
-}
-
-.umds-avatar--md {
-    width: 42px;
-    height: 42px;
-    font-size: 16px;
-}
-
-.umds-avatar--lg {
-    width: 64px;
-    height: 64px;
-    font-size: 24px;
-}
-
-/* Types */
-.umds-avatar--letter {
-    background-color: var(--umds-semantic-color-primary-light);
-    color: var(--umds-semantic-color-primary-dark);
-}
-
-.umds-avatar--number {
-    background-color: var(--umds-semantic-color-primary-dark);
-    /* Alterado para Primary Dark */
-    color: var(--umds-semantic-color-background-white);
-}
-
-/* Ajuste fino para fonte do Number se necessário */
-.umds-avatar--number.umds-avatar--xs {
-    font-size: 6px;
-}
-
-.umds-avatar--photo {
-    background-color: var(--umds-semantic-color-neutral-light-medium);
-}
-
-.umds-avatar__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-/* Avatar Group Styles */
-.umds-avatar-group {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.umds-avatar-group .umds-avatar {
-    /* Border já definida no componente base */
-    margin-right: -6px;
-    z-index: 1;
-}
-
-.umds-avatar-group .umds-avatar:hover {
-    z-index: 5;
-}

package/dist/components/Avatar/Avatar.d.ts

@@ -1,34 +0,0 @@
-import './Avatar.css';
-export interface AvatarProps {
-    /**
-     * URL da imagem. Se fornecida, o tipo será automaticamente 'Photo' visualmente,
-     * a menos que haja erro no carregamento (fallback para Letter/Number).
-     */
-    src?: string;
-    /**
-     * Texto alternativo para a imagem (acessibilidade).
-     */
-    alt?: string;
-    /**
-     * Tamanho do avatar.
-     * XS: 16px, SM: 24px, MD: 42px, LG: 64px.
-     * @default 'md'
-     */
-    size?: "xs" | "sm" | "md" | "lg";
-    /**
-     * Tipo do avatar. Controla estilos de cor.
-     * @default 'letter'
-     */
-    type?: "photo" | "letter" | "number";
-    /**
-     * Conteúdo interno (Iniciais ou Número).
-     * Ex: "AB", "+3".
-     */
-    children?: any;
-    /**
-     * Classes adicionais.
-     */
-    className?: string;
-}
-declare function Avatar(props: AvatarProps): import("react/jsx-runtime").JSX.Element;
-export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import './Avatar.css';
-function Avatar(props) {
-    function classes() {
-        return [
-            "umds-avatar",
-            `umds-avatar--${props.size || "md"}`,
-            `umds-avatar--${props.type || (props.src ? "photo" : "letter")}`,
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    return (_jsxs("div", { className: classes(), children: [props.src ? (_jsx("img", { className: "umds-avatar__image", src: props.src, alt: props.alt || "" })) : null, !props.src ? _jsx(_Fragment, { children: props.children }) : null] }));
-}
-export default Avatar;

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -1,12 +0,0 @@
-export interface AvatarGroupProps {
-    /**
-     * Conteúdo (lista de Avatars).
-     */
-    children?: any;
-    /**
-     * Classes adicionais.
-     */
-    className?: string;
-}
-declare function AvatarGroup(props: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
-export default AvatarGroup;

package/dist/components/Avatar/AvatarGroup.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-function AvatarGroup(props) {
-    function classes() {
-        return ["umds-avatar-group", props.className].filter(Boolean).join(" ");
-    }
-    return _jsx("div", { className: classes(), children: props.children });
-}
-export default AvatarGroup;

package/dist/components/Badge/Badge.css

@@ -1,155 +0,0 @@
-.umds-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    font-family: var(--umds-semantic-font-family-base, sans-serif);
-    font-weight: 600;
-    line-height: 1;
-    white-space: nowrap;
-    letter-spacing: normal;
-    border: 1px solid transparent;
-    box-sizing: border-box;
-    gap: 6px;
-}
-
-.umds-badge__icon {
-    display: inline-flex;
-    align-self: center;
-    flex-shrink: 0;
-}
-
-.umds-badge__icon:empty {
-    display: none;
-}
-
-.umds-badge__icon svg,
-.umds-badge__icon img,
-.umds-badge__icon .umds-icon {
-    width: 1.15em;
-    height: 1.15em;
-    font-size: 1.15em;
-    display: block;
-}
-
-/* Sizes (Heights in REM as requested) */
-.umds-badge--lg {
-    font-size: 14px;
-    padding: 0 16px;
-    height: 3rem;
-}
-
-.umds-badge--md {
-    font-size: 12px;
-    padding: 0 12px;
-    height: 2rem;
-}
-
-.umds-badge--sm {
-    font-size: 10px;
-    padding: 0 8px;
-    height: 1.5rem;
-}
-
-.umds-badge--xs {
-    font-size: 9px;
-    padding: 0 6px;
-    height: 1rem;
-    gap: 4px;
-}
-
-.umds-badge--pill {
-    font-size: 9px;
-    /* Ajuste para caber em 0.75rem (12px) */
-    padding: 0 6px;
-    height: 0.75rem;
-    border-radius: 9999px;
-    font-weight: 700;
-}
-
-/* Hide icons in Pill size */
-.umds-badge--pill .umds-badge__icon {
-    display: none !important;
-}
-
-/* --- Solid --- */
-.umds-badge--solid.umds-badge--neutral {
-    background-color: var(--umds-semantic-color-neutral-dark-down);
-    color: var(--umds-semantic-color-background-white);
-}
-
-.umds-badge--solid.umds-badge--positive {
-    background-color: var(--umds-semantic-color-feedback-positive-pure);
-    color: var(--umds-semantic-color-background-white);
-}
-
-.umds-badge--solid.umds-badge--negative {
-    background-color: var(--umds-semantic-color-feedback-negative-pure);
-    color: var(--umds-semantic-color-background-white);
-}
-
-.umds-badge--solid.umds-badge--info {
-    background-color: var(--umds-semantic-color-feedback-info-pure);
-    color: var(--umds-semantic-color-background-white);
-}
-
-.umds-badge--solid.umds-badge--primary {
-    background-color: var(--umds-semantic-color-primary-pure);
-    color: var(--umds-semantic-color-background-white);
-}
-
-/* --- Soft (Subtle) --- */
-.umds-badge--soft.umds-badge--neutral {
-    background-color: var(--umds-semantic-color-neutral-light-medium);
-    color: var(--umds-semantic-color-neutral-dark-pure);
-}
-
-.umds-badge--soft.umds-badge--positive {
-    background-color: var(--umds-semantic-color-feedback-positive-light);
-    color: var(--umds-semantic-color-feedback-positive-dark);
-}
-
-.umds-badge--soft.umds-badge--negative {
-    background-color: var(--umds-semantic-color-feedback-negative-light);
-    color: var(--umds-semantic-color-feedback-negative-dark);
-}
-
-.umds-badge--soft.umds-badge--info {
-    background-color: var(--umds-semantic-color-feedback-info-light);
-    color: var(--umds-semantic-color-feedback-info-dark);
-}
-
-.umds-badge--soft.umds-badge--primary {
-    background-color: var(--umds-semantic-color-primary-light);
-    color: var(--umds-semantic-color-primary-pure);
-}
-
-/* --- Outlined --- */
-.umds-badge--outlined {
-    background-color: transparent;
-}
-
-.umds-badge--outlined.umds-badge--neutral {
-    border-color: var(--umds-semantic-color-neutral-dark-medium);
-    color: var(--umds-semantic-color-neutral-dark-medium);
-}
-
-.umds-badge--outlined.umds-badge--positive {
-    border-color: var(--umds-semantic-color-feedback-positive-pure);
-    color: var(--umds-semantic-color-feedback-positive-pure);
-}
-
-.umds-badge--outlined.umds-badge--negative {
-    border-color: var(--umds-semantic-color-feedback-negative-pure);
-    color: var(--umds-semantic-color-feedback-negative-pure);
-}
-
-.umds-badge--outlined.umds-badge--info {
-    border-color: var(--umds-semantic-color-feedback-info-pure);
-    color: var(--umds-semantic-color-feedback-info-pure);
-}
-
-.umds-badge--outlined.umds-badge--primary {
-    border-color: var(--umds-semantic-color-primary-pure);
-    color: var(--umds-semantic-color-primary-pure);
-}

package/dist/components/Badge/Badge.d.ts

@@ -1,46 +0,0 @@
-import './Badge.css';
-/**
- * Componente Badge para exibir status, rótulos e contagens.
- * Suporta múltiplas variantes de cor, tamanhos e estilos.
- */
-export interface BadgeProps {
-    /**
-     * Variação de cor semântica.
-     * @default 'neutral'
-     */
-    variant?: "neutral" | "positive" | "negative" | "info" | "primary";
-    /**
-     * Tamanho do badge.
-     * LG: 3rem, MD: 2rem, SM: 1.5rem, XS: 1rem, PILL: 0.75rem.
-     * @default 'md'
-     */
-    size?: "sm" | "md" | "lg" | "xs" | "pill";
-    /**
-     * Estilo visual do badge.
-     * @default 'soft'
-     */
-    type?: "solid" | "soft" | "outlined";
-    /**
-     * Conteúdo do ícone à esquerda.
-     * - React: Passe um elemento React (ex: `<Icon />`).
-     * - Vue: Utilize o slot `#iconLeft`.
-     */
-    iconLeft?: any;
-    /**
-     * Conteúdo do ícone à direita.
-     * - React: Passe um elemento React (ex: `<Icon />`).
-     * - Vue: Utilize o slot `#iconRight`.
-     */
-    iconRight?: any;
-    /**
-     * Classes CSS adicionais.
-     */
-    className?: string;
-    /**
-     * Conteúdo textual do badge.
-     */
-    children?: any;
-    [key: string]: any;
-}
-declare function Badge(props: BadgeProps): import("react/jsx-runtime").JSX.Element;
-export default Badge;

package/dist/components/Badge/Badge.js

@@ -1,17 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './Badge.css';
-function Badge(props) {
-    function classes() {
-        return [
-            "umds-badge",
-            `umds-badge--${props.variant || "neutral"}`,
-            `umds-badge--${props.size || "md"}`,
-            `umds-badge--${props.type || "soft"}`,
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    return (_jsxs("span", { ...props, className: classes(), children: [_jsx("span", { className: "umds-badge__icon", children: _jsx(_Fragment, { children: props.iconLeft }) }), _jsx(_Fragment, { children: props.children || "{props.children}" }), _jsx("span", { className: "umds-badge__icon", children: _jsx(_Fragment, { children: props.iconRight }) })] }));
-}
-export default Badge;

package/dist/components/Button/Button.css

@@ -1,199 +0,0 @@
-.umds-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--umds-primitive-spacing-nano);
-    border-radius: var(--umds-primitive-border-radius-sm);
-    /* Updated from 4px to match Figma */
-    padding: 0 var(--umds-primitive-spacing-xxxs);
-    height: var(--umds-primitive-spacing-sm);
-    cursor: pointer;
-    border: 1px solid transparent;
-    font-family: var(--umds-semantic-font-family-base, inherit);
-    font-weight: var(--umds-primitive-font-weight-semibold);
-    /* Updated from 500 to match Figma (Semibold) */
-    transition: all 0.2s;
-    font-size: var(--umds-primitive-font-size-xxs);
-    line-height: 1;
-}
-
-
-/* Focus States */
-.umds-button:focus-visible {
-    outline: 2px solid var(--umds-semantic-color-neutral-dark-down);
-    outline-offset: 2px;
-    box-shadow: none;
-}
-
-/* Primary */
-.umds-button--primary {
-    background-color: var(--umds-semantic-color-primary-pure);
-    color: var(--umds-semantic-color-neutral-light-pure);
-}
-
-.umds-button--primary:hover:not(:disabled) {
-    background-color: var(--umds-semantic-color-primary-dark);
-}
-
-.umds-button--primary:disabled {
-    background-color: var(--umds-semantic-color-neutral-light-medium);
-    cursor: not-allowed;
-    color: var(--umds-semantic-color-neutral-dark-medium);
-}
-
-/* Secondary */
-.umds-button--secondary {
-    background-color: transparent;
-    border-color: var(--umds-semantic-color-primary-pure);
-    color: var(--umds-semantic-color-primary-pure);
-}
-
-.umds-button--secondary:hover:not(:disabled) {
-    background-color: var(--umds-semantic-color-primary-light);
-}
-
-.umds-button--secondary:disabled {
-    border-color: var(--umds-semantic-color-neutral-light-medium);
-    color: var(--umds-semantic-color-neutral-dark-medium);
-    cursor: not-allowed;
-}
-
-/* Sizes */
-.umds-button--sm {
-    height: var(--umds-primitive-spacing-xs);
-    padding: 0 12px;
-    font-size: var(--umds-primitive-font-size-xxxs);
-}
-
-.umds-button--md {
-    height: var(--umds-primitive-spacing-sm);
-    padding: 0 var(--umds-primitive-spacing-xxxs);
-    font-size: var(--umds-primitive-font-size-xxs);
-}
-
-.umds-button--lg {
-    height: var(--umds-primitive-spacing-md);
-    padding: 0 var(--umds-primitive-spacing-xxs);
-    font-size: var(--umds-primitive-font-size-xs);
-}
-
-/* Neutral */
-.umds-button--neutral {
-    background-color: var(--umds-semantic-color-neutral-light-pure);
-    border-color: var(--umds-semantic-color-neutral-dark-up);
-    color: var(--umds-semantic-color-neutral-dark-down);
-}
-
-.umds-button--neutral:hover:not(:disabled) {
-    background-color: var(--umds-semantic-color-neutral-light-medium);
-}
-
-.umds-button--neutral:disabled {
-    background-color: var(--umds-semantic-color-neutral-light-pure);
-    border-color: var(--umds-semantic-color-neutral-light-down);
-    color: var(--umds-semantic-color-neutral-light-down);
-    cursor: not-allowed;
-}
-
-/* Text */
-.umds-button--text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--umds-semantic-color-primary-pure);
-}
-
-.umds-button--text:hover:not(:disabled) {
-    background-color: var(--umds-semantic-color-primary-light);
-}
-
-.umds-button--text:disabled {
-    color: var(--umds-semantic-color-neutral-dark-medium);
-    cursor: not-allowed;
-}
-
-/* Danger */
-.umds-button--danger {
-    background-color: var(--umds-semantic-color-feedback-negative-pure);
-    color: var(--umds-semantic-color-neutral-light-pure);
-}
-
-.umds-button--danger:hover:not(:disabled) {
-    background-color: var(--umds-semantic-color-feedback-negative-dark);
-}
-
-.umds-button--danger:disabled {
-    background-color: var(--umds-semantic-color-neutral-light-medium);
-    color: var(--umds-semantic-color-neutral-dark-medium);
-    cursor: not-allowed;
-}
-
-/* Danger Outlined */
-.umds-button--danger-outlined {
-    background-color: transparent;
-    border-color: var(--umds-semantic-color-feedback-negative-pure);
-    color: var(--umds-semantic-color-feedback-negative-dark);
-}
-
-.umds-button--danger-outlined:hover:not(:disabled) {
-    background-color: var(--umds-semantic-color-feedback-negative-light);
-}
-
-.umds-button--danger-outlined:disabled {
-    border-color: var(--umds-semantic-color-neutral-light-medium);
-    color: var(--umds-semantic-color-neutral-dark-medium);
-    cursor: not-allowed;
-}
-
-/* Icon */
-.umds-button--icon {
-    background-color: transparent;
-    color: var(--umds-semantic-color-neutral-dark-down);
-    padding: 0;
-    min-width: unset;
-}
-
-.umds-button--icon:hover:not(:disabled) {
-    background-color: var(--umds-semantic-color-neutral-light-medium);
-}
-
-.umds-button--icon.umds-button--sm {
-    width: 32px;
-}
-
-.umds-button--icon.umds-button--md {
-    width: 40px;
-}
-
-.umds-button--icon.umds-button--lg {
-    width: 48px;
-    /* Assuming 48px for large icon button, Figma said 40 but text buttons are 48? Need to double check, keeping consistent with height for now */
-}
-
-.umds-button--icon:disabled {
-    color: var(--umds-semantic-color-neutral-light-down);
-    cursor: not-allowed;
-}
-
-/* Full Width */
-.umds-button--full-width {
-    width: 100%;
-}
-
-/* Loading */
-.umds-button__loading {
-    animation: spin 1s linear infinite;
-    height: 1em;
-    width: 1em;
-    min-width: 1em;
-    /* Ensure it doesn't shrink */
-}
-
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}

package/dist/components/Button/Button.d.ts

@@ -1,23 +0,0 @@
-import './Button.css';
-/**
- * Button component properties
- * @property {string} [aria-label] - Descrição acessível do botão. OBRIGATÓRIO se o botão não possuir texto visível (ex: icon-only). Caso não fornecido, o texto interno será usado.
- */
-export interface ButtonProps {
-    variant?: "primary" | "secondary" | "neutral" | "text" | "danger" | "danger-outlined" | "icon";
-    size?: "sm" | "md" | "lg";
-    disabled?: boolean;
-    type?: "button" | "submit" | "reset";
-    children?: any;
-    onClick?: (event: any) => void;
-    className?: string;
-    startIcon?: any;
-    endIcon?: any;
-    loading?: boolean;
-    loadingIcon?: any;
-    loadingPosition?: "start" | "end" | "center";
-    fullWidth?: boolean;
-    [key: string]: any;
-}
-declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export default Button;

package/dist/components/Button/Button.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import './Button.css';
-"use client";
-import Icon from "../Icon/Icon";
-function Button(props) {
-    function classes() {
-        return [
-            "umds-button",
-            `umds-button--${props.variant || "primary"}`,
-            `umds-button--${props.size || "md"}`,
-            props.fullWidth ? "umds-button--full-width" : "",
-            props.className,
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    function showStartIcon() {
-        const isLoading = props.loading;
-        const position = props.loadingPosition || "center";
-        return !isLoading || (isLoading && position === "end");
-    }
-    function showEndIcon() {
-        const isLoading = props.loading;
-        const position = props.loadingPosition || "center";
-        return !isLoading || (isLoading && position === "start");
-    }
-    function showLoadingAtStart() {
-        return props.loading && props.loadingPosition === "start";
-    }
-    function showLoadingAtEnd() {
-        return props.loading && props.loadingPosition === "end";
-    }
-    function showLoadingAtCenter() {
-        return (props.loading &&
-            (props.loadingPosition === "center" || !props.loadingPosition));
-    }
-    function showChildren() {
-        const isLoading = props.loading;
-        const position = props.loadingPosition || "center";
-        return !isLoading || (isLoading && position !== "center");
-    }
-    return (_jsxs("button", { ...props, type: props.type || "button", disabled: props.disabled, onClick: (event) => props.onClick?.(event), className: classes(), children: [showLoadingAtStart() ? (_jsx(Icon, { className: "umds-button__loading", variant: "inherit", name: typeof props.loadingIcon === "string"
-                    ? props.loadingIcon
-                    : props.loadingIcon
-                        ? undefined
-                        : "refresh", component: typeof props.loadingIcon !== "string"
-                    ? props.loadingIcon
-                    : undefined, size: props.size })) : null, showStartIcon() ? (_jsx(_Fragment, { children: typeof props.startIcon === "string" ? (_jsx(Icon, { variant: "inherit", name: props.startIcon, size: props.size })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.startIcon }) })) })) : null, showLoadingAtCenter() ? (_jsx(Icon, { className: "umds-button__loading", variant: "inherit", name: typeof props.loadingIcon === "string"
-                    ? props.loadingIcon
-                    : props.loadingIcon
-                        ? undefined
-                        : "refresh", component: typeof props.loadingIcon !== "string"
-                    ? props.loadingIcon
-                    : undefined, size: props.size })) : null, showChildren() ? _jsx(_Fragment, { children: props.children }) : null, showEndIcon() ? (_jsx(_Fragment, { children: typeof props.endIcon === "string" ? (_jsx(Icon, { variant: "inherit", name: props.endIcon, size: props.size })) : (_jsx(_Fragment, { children: _jsx(_Fragment, { children: props.endIcon }) })) })) : null, showLoadingAtEnd() ? (_jsx(Icon, { className: "umds-button__loading", variant: "inherit", name: typeof props.loadingIcon === "string"
-                    ? props.loadingIcon
-                    : props.loadingIcon
-                        ? undefined
-                        : "refresh", component: typeof props.loadingIcon !== "string"
-                    ? props.loadingIcon
-                    : undefined, size: props.size })) : null] }));
-}
-export default Button;