@1doc/1ds-react 0.0.1

package/README.md

@@ -0,0 +1,34 @@
+# @1doc/1ds-react
+
+Biblioteca de componentes React do 1ds Design System.
+
+## Instalação
+
+```bash
+pnpm add @1doc/1ds-react @1doc/1ds-tokens
+```
+
+## Configuração
+
+Importe o CSS dos tokens no seu arquivo principal (`App.tsx` ou `main.tsx`):
+
+```tsx
+import "@1doc/1ds-tokens/dist/css/primitives.css";
+import "@1doc/1ds-tokens/dist/css/semantic.css";
+import "@1doc/1ds-tokens/dist/css/theme-1doc.css";
+import "iconoir/css/iconoir.css";
+```
+
+## Uso
+
+```tsx
+import { Button } from "@1doc/1ds-react";
+
+function App() {
+  return (
+    <Button variant="primary" onClick={() => console.log("Click")}>
+      Clique aqui
+    </Button>
+  );
+}
+```

package/dist/components/Alert/Alert.css

@@ -0,0 +1,188 @@
+/* ============================================
+   Alert Component
+   Tipos: neutral, success, warning, error
+   Variantes: soft, solid
+   ============================================ */
+
+.umds-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    width: 475px;
+    max-width: calc(100vw - 32px);
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    
+    font-family: var(--umds-semantic-font-family-base, 'Open Sans', 'Inter', sans-serif);
+    position: fixed;
+    z-index: 9999;
+}
+
+/* ----------------------------------------
+   Positioning modifiers
+   ---------------------------------------- */
+.umds-alert--top-right {
+    top: 24px;
+    right: 24px;
+}
+.umds-alert--top-left {
+    top: 24px;
+    left: 24px;
+}
+.umds-alert--top-center {
+    top: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.umds-alert--bottom-right {
+    bottom: 24px;
+    right: 24px;
+}
+.umds-alert--bottom-left {
+    bottom: 24px;
+    left: 24px;
+}
+.umds-alert--bottom-center {
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* ----------------------------------------
+   Internal elements
+   ---------------------------------------- */
+.umds-alert__icon-wrapper {
+    display: flex;
+    align-items: flex-start;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.umds-alert__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.umds-alert__title-container {
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+}
+
+.umds-alert__title-text {
+    font-weight: var(--umds-primitive-font-weight-semibold, 600) !important;
+    font-size: var(--umds-primitive-font-size-xxxxs, 12px) !important;
+    margin: 0;
+    line-height: normal;
+    letter-spacing: 0.06px;
+}
+
+.umds-alert__description-text {
+    font-weight: var(--umds-primitive-font-weight-regular, 400) !important;
+    font-size: var(--umds-primitive-font-size-xxxxs, 12px) !important;
+    margin: 0;
+    line-height: normal;
+    letter-spacing: 0.06px;
+}
+
+.umds-alert__actions {
+    display: flex;
+    gap: 8px;
+    padding-top: 8px;
+    align-items: flex-start;
+}
+
+.umds-alert__close {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+
+.umds-alert__close:hover,
+.umds-alert__close:focus-visible {
+    opacity: 0.8;
+    background-color: rgba(0, 0, 0, 0.05); /* very soft fallback highlight */
+}
+
+.umds-alert__close:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-primary-pure);
+    outline-offset: 1px;
+}
+
+/* ----------------------------------------
+   Theme Variantes: SOFT
+   ---------------------------------------- */
+
+/* Neutral Soft */
+.umds-alert--soft.umds-alert--neutral {
+    background-color: var(--umds-semantic-color-background-white, white);
+    color: var(--umds-semantic-color-neutral-dark-pure, #333);
+}
+
+/* Warning Soft (Uses info tokens on 1ds standard for warning logic from figma) */
+.umds-alert--soft.umds-alert--warning {
+    background-color: var(--umds-semantic-color-feedback-info-light, #ffe9d9);
+    border: 1px solid var(--umds-semantic-color-feedback-info-pure, #db6816);
+    color: var(--umds-semantic-color-feedback-info-dark, #99470c);
+}
+
+/* Success Soft */
+.umds-alert--soft.umds-alert--success {
+    background-color: var(--umds-semantic-color-feedback-positive-light, #cef2e1);
+    border: 1px solid var(--umds-semantic-color-feedback-positive-pure, #0f874e);
+    color: var(--umds-semantic-color-feedback-positive-dark, #0f4c30);
+}
+
+/* Error Soft */
+.umds-alert--soft.umds-alert--error {
+    background-color: var(--umds-semantic-color-feedback-negative-light, #ffe6ea);
+    border: 1px solid var(--umds-semantic-color-feedback-negative-pure, #b2132e);
+    color: var(--umds-semantic-color-feedback-negative-dark, #801224);
+}
+
+/* ----------------------------------------
+   Theme Variantes: SOLID
+   ---------------------------------------- */
+
+/* Neutral Solid */
+.umds-alert--solid.umds-alert--neutral {
+    background-color: var(--umds-semantic-color-neutral-dark-pure, #333333);
+    color: var(--umds-semantic-color-neutral-light-pure, #ffffff);
+}
+
+/* Warning Solid */
+.umds-alert--solid.umds-alert--warning {
+    background-color: var(--umds-semantic-color-feedback-info-pure, #db6816);
+    color: var(--umds-semantic-color-neutral-light-pure, #ffffff);
+}
+
+/* Success Solid */
+.umds-alert--solid.umds-alert--success {
+    background-color: var(--umds-semantic-color-feedback-positive-pure, #0f874e);
+    color: var(--umds-semantic-color-neutral-light-pure, #ffffff);
+}
+
+/* Error Solid */
+.umds-alert--solid.umds-alert--error {
+    background-color: var(--umds-semantic-color-feedback-negative-pure, #b2132e);
+    color: var(--umds-semantic-color-neutral-light-pure, #ffffff);
+}
+
+/* Overrides for close icon on SOLID */
+.umds-alert--solid .umds-alert__close:hover,
+.umds-alert--solid .umds-alert__close:focus-visible {
+    background-color: rgba(255, 255, 255, 0.15); 
+}

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,65 @@
+import './Alert.css';
+/**
+ * Componente Alert é utilizado para comunicar mensagens importantes que requerem a atenção imediata do usuário.
+ * Pode indicar sucessos, avisos, erros ou informações relevantes de forma clara e destacada.
+ */
+export interface AlertProps {
+    /**
+     * Título do alerta.
+     */
+    title?: string;
+    /**
+     * Propriedade obrigatória do aviso que explica do que se trata o alerta.
+     */
+    description?: string;
+    /**
+     * Tipo/Cor semântico do alerta.
+     * @default 'neutral'
+     */
+    type?: "neutral" | "success" | "warning" | "error";
+    /**
+     * Estilo visual ('soft' para fundos claros; 'solid' para preenchimentos escuros/cores fortes).
+     * @default 'soft'
+     */
+    variant?: "soft" | "solid";
+    /**
+     * Posição vertical na tela para a exibição flutuante.
+     * @default 'top'
+     */
+    verticalPosition?: "top" | "bottom";
+    /**
+     * Posição horizontal na tela para a exibição flutuante.
+     * @default 'right'
+     */
+    horizontalPosition?: "left" | "center" | "right";
+    /**
+     * Tempo em milissegundos que o alerta ficará na tela e desaparecerá.
+     * Se 0, ou não definido, o alerta não desaparece de forma automática.
+     * @default 0
+     */
+    time?: number;
+    /**
+     * Define ou não a visibilidade do ícone de dispensar o aviso.
+     * @default false
+     */
+    dismissable?: boolean;
+    /**
+     * Possibilita uso de elementos HTML/Componentes JSX ou text simples no bloco de ação (links/etc).
+     */
+    content?: any;
+    /**
+     * Slot principal no Mitosis para o custom content generalizado.
+     */
+    children?: any;
+    /**
+     * Permite sobrescrever classes customizadas na raiz do container do alerta
+     */
+    className?: string;
+    /**
+     * Evento acionado ao clicar para fechar o alerta
+     */
+    onClose?: (event?: any) => void;
+    [key: string]: any;
+}
+declare function Alert(props: AlertProps): import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './Alert.css';
+"use client";
+import { useState, useEffect } from "react";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+function Alert(props) {
+    const [visible, setVisible] = useState(() => true);
+    const [timeoutId, setTimeoutId] = useState(() => 0);
+    function classes() {
+        return [
+            "umds-alert",
+            `umds-alert--${props.type || "neutral"}`,
+            `umds-alert--${props.variant || "soft"}`,
+            `umds-alert--${props.verticalPosition || "top"}-${props.horizontalPosition || "right"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function iconName() {
+        const currentType = props.type || "neutral";
+        if (currentType === "success")
+            return "check-circle";
+        if (currentType === "error")
+            return "xmark-circle";
+        if (currentType === "warning")
+            return "warning-triangle";
+        return "info-circle";
+    }
+    function handleClose(event) {
+        if (event)
+            event.stopPropagation();
+        setVisible(false);
+        if (props.onClose) {
+            props.onClose(event);
+        }
+    }
+    useEffect(() => {
+        const timeProp = typeof props.time === "number" ? props.time : 0;
+        if (timeProp > 0) {
+            setTimeoutId(setTimeout(() => {
+                handleClose(null);
+            }, timeProp));
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, []);
+    return (_jsx(_Fragment, { children: visible ? (_jsx(_Fragment, { children: _jsxs("div", { role: "alert", ...props, className: classes(), children: [_jsx("div", { className: "umds-alert__icon-wrapper", children: _jsx(Icon, { variant: "inherit", size: "md", name: iconName() }) }), _jsxs("div", { className: "umds-alert__content", children: [props.title ? (_jsx("div", { className: "umds-alert__title-container", children: _jsx(Text, { variant: "body2", as: "p", className: "umds-alert__title-text", children: props.title }) })) : null, props.description ? (_jsx(Text, { variant: "caption", as: "p", className: "umds-alert__description-text", children: props.description })) : null, props.content || props.children ? (_jsx("div", { className: "umds-alert__actions", children: _jsx(_Fragment, { children: props.content || "{props.content || props.children}" }) })) : null] }), props.dismissable ? (_jsx("button", { type: "button", "aria-label": "Dispensar alerta", className: "umds-alert__close", onClick: (event) => handleClose(event), children: _jsx(Icon, { name: "nav-arrow-up", variant: "inherit", size: "md" }) })) : null] }) })) : null }));
+}
+export default Alert;

package/dist/components/Avatar/Avatar.css

@@ -0,0 +1,88 @@
+.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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,155 @@
+.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);
+}