@1doc/1ds-react 0.0.1

package/dist/components/Switch/Switch.css

@@ -0,0 +1,127 @@
+.umds-switch {
+    appearance: none;
+    background-color: var(--umds-semantic-color-neutral-light-down);
+    /* Off state */
+    border: none;
+    border-radius: var(--umds-primitive-border-radius-pill);
+    cursor: pointer;
+    display: inline-flex;
+    padding: 2px;
+    position: relative;
+    transition: background-color 0.2s ease;
+    vertical-align: middle;
+    box-sizing: border-box;
+}
+
+.umds-switch:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-neutral-dark-down);
+    outline-offset: 2px;
+    box-shadow: none;
+}
+
+.umds-switch[aria-checked="true"] {
+    background-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-switch:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Thumb */
+.umds-switch__thumb {
+    background-color: var(--umds-semantic-color-neutral-light-pure, white);
+    border-radius: var(--umds-primitive-border-radius-circular);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+    transform: translateX(0);
+
+    /* Icon styles inherited from thumb */
+    pointer-events: none;
+    color: var(--umds-semantic-color-neutral-pure);
+}
+
+.umds-switch[aria-checked="true"] .umds-switch__thumb {
+    color: var(--umds-semantic-color-primary-pure);
+}
+
+/* Sizes */
+/* Large */
+.umds-switch--large {
+    width: 66px;
+    height: 36px;
+    padding: 2px;
+}
+
+.umds-switch--large .umds-switch__thumb {
+    width: var(--umds-primitive-spacing-xs);
+    height: var(--umds-primitive-spacing-xs);
+}
+
+.umds-switch--large[aria-checked="true"] .umds-switch__thumb {
+    transform: translateX(30px);
+    /* 66 - 2 - 32 - 2 = 30 */
+}
+
+/* Medium */
+.umds-switch--medium {
+    width: 52px;
+    height: 28px;
+    padding: 2px;
+    /* Assuming 2px */
+}
+
+.umds-switch--medium .umds-switch__thumb {
+    width: var(--umds-primitive-spacing-xxs);
+    height: var(--umds-primitive-spacing-xxs);
+}
+
+.umds-switch--medium[aria-checked="true"] .umds-switch__thumb {
+    transform: translateX(24px);
+    /* 52 - 2 - 24 - 2 = 24 */
+}
+
+/* Small */
+.umds-switch--small {
+    width: 44px;
+    height: var(--umds-primitive-spacing-xxs);
+    padding: 1.5px;
+}
+
+.umds-switch--small .umds-switch__thumb {
+    width: 21px;
+    height: 21px;
+}
+
+.umds-switch--small[aria-checked="true"] .umds-switch__thumb {
+    transform: translateX(20px);
+    /* 44 - 1.5 - 21 - 1.5 = 20 */
+}
+
+/* Wrapper (Layout) */
+.umds-switch-wrapper {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--umds-primitive-spacing-xxxs);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Wrapper (Background Style) */
+.umds-switch-wrapper--background {
+    background-color: var(--umds-semantic-color-neutral-light-pure, white);
+    padding: var(--umds-primitive-spacing-xxxs);
+    border-radius: var(--umds-primitive-border-radius-sm);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06);
+}
+
+.umds-switch-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--umds-primitive-spacing-quarck);
+    flex-grow: 1;
+}

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,18 @@
+import './Switch.css';
+export interface SwitchProps {
+    checked?: any;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    name?: string;
+    value?: string;
+    id?: string;
+    label?: string;
+    description?: string;
+    background?: boolean;
+    className?: string;
+    onChange?: (checked: boolean) => void;
+    [key: string]: any;
+}
+declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export default Switch;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './Switch.css';
+"use client";
+import { useState } from "react";
+import Icon from "../Icon/Icon";
+import Text from "../Text/Text";
+function Switch(props) {
+    const [internalChecked, setInternalChecked] = useState(() => props.defaultChecked || false);
+    function isChecked() {
+        return props.checked !== undefined ? props.checked : internalChecked;
+    }
+    function toggle() {
+        if (props.disabled)
+            return;
+        // Workaround for Mitosis Vue generation issue with getters
+        const current = props.checked !== undefined ? props.checked : internalChecked;
+        const newValue = !current;
+        setInternalChecked(newValue);
+        props.onChange?.(newValue);
+    }
+    function classes() {
+        return [
+            "umds-switch",
+            `umds-switch--${props.size || "large"}`,
+            props.disabled ? "umds-switch--disabled" : "",
+            !isWrapper() ? props.className : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function classesWrapper() {
+        return [
+            "umds-switch-wrapper",
+            props.background ? "umds-switch-wrapper--background" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function isWrapper() {
+        return !!(props.background || props.label || props.description);
+    }
+    function iconSize() {
+        if (props.size === "small" || props.size === "medium") {
+            return "sm";
+        }
+        return "lg"; // default is large (24px)
+    }
+    return (_jsxs(_Fragment, { children: [isWrapper() ? (_jsxs("div", { ...props, className: classesWrapper(), children: [_jsx("button", { type: "button", role: "switch", "aria-checked": isChecked(), disabled: props.disabled, onClick: (event) => {
+                            event.preventDefault();
+                            toggle();
+                        }, name: props.name, value: props.value, id: props.id, className: classes(), children: _jsxs("span", { className: "umds-switch__thumb", children: [isChecked() ? (_jsx(_Fragment, { children: props.iconChecked || _jsx(Icon, { name: "check", size: iconSize() }) })) : null, !isChecked() ? (_jsx(_Fragment, { children: props.iconNotChecked || (_jsx(Icon, { name: "xmark", size: iconSize() })) })) : null] }) }), _jsxs("div", { className: "umds-switch-text", children: [props.label ? (_jsx(Text, { as: "span", weight: "semibold", variant: props.size === "small" ? "body2" : "body1", children: props.label })) : null, props.description ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: props.description })) : null] })] })) : null, !isWrapper() ? (_jsx("button", { type: "button", role: "switch", "aria-checked": isChecked(), disabled: props.disabled, onClick: (event) => {
+                    event.preventDefault();
+                    toggle();
+                }, ...props, className: classes(), children: _jsxs("span", { className: "umds-switch__thumb", children: [isChecked() ? (_jsx(_Fragment, { children: props.iconChecked || _jsx(Icon, { name: "check", size: iconSize() }) })) : null, !isChecked() ? (_jsx(_Fragment, { children: props.iconNotChecked || (_jsx(Icon, { name: "xmark", size: iconSize() })) })) : null] }) })) : null] }));
+}
+export default Switch;

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Propriedades do componente Tab.
+ * @description Representa uma aba individual dentro do componente Tabs.
+ */
+export interface TabProps {
+    /** Texto exibido na tab */
+    label: string;
+    /** Identificador único da tab. Deve corresponder ao index do TabContent */
+    index: string;
+    /** Nome do ícone Iconoir a ser exibido (opcional) */
+    icon?: string;
+    /** Se a tab está desabilitada */
+    disabled?: boolean;
+    /** Classes CSS adicionais */
+    className?: string;
+    [key: string]: any;
+}
+declare function Tab(props: TabProps): import("react/jsx-runtime").JSX.Element;
+export default Tab;

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import TabsContext from "./tabs.context";
+import Icon from "../Icon/Icon";
+function Tab(props) {
+    function isSelected() {
+        return tabsContext.value === props.index;
+    }
+    function classes() {
+        return [
+            "umds-tabs__tab",
+            isSelected() ? "umds-tabs__tab--selected" : "",
+            props.disabled ? "umds-tabs__tab--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function labelClasses() {
+        return [
+            "umds-tabs__label",
+            isSelected() ? "umds-tabs__label--selected" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function handleClick() {
+        if (props.disabled)
+            return;
+        if (typeof tabsContext.onChange === "function") {
+            tabsContext.onChange(props.index);
+        }
+    }
+    function handleKeyDown(event) {
+        if (props.disabled)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleClick();
+            return;
+        }
+        const tablist = event.target.closest('[role="tablist"]');
+        if (!tablist)
+            return;
+        const tabs = tablist.querySelectorAll('[role="tab"]:not([disabled])');
+        const currentIndex = Array.from(tabs).indexOf(event.target);
+        let targetIndex = -1;
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            targetIndex = (currentIndex + 1) % tabs.length;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            targetIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            targetIndex = 0;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            targetIndex = tabs.length - 1;
+        }
+        if (targetIndex >= 0 && tabs[targetIndex]) {
+            tabs[targetIndex].focus();
+            const tabIndex = tabs[targetIndex].getAttribute("data-tab-index");
+            if (tabIndex && typeof tabsContext.onChange === "function") {
+                tabsContext.onChange(tabIndex);
+            }
+        }
+    }
+    const tabsContext = useContext(TabsContext);
+    return (_jsxs("button", { role: "tab", "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { size: "md", variant: "inherit", className: "umds-tabs__icon", name: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label })] }));
+}
+export default Tab;

package/dist/components/Tabs/TabContent.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Propriedades do componente TabContent.
+ * @description Painel de conteúdo individual associado a uma tab via index.
+ */
+export interface TabContentProps {
+    /** Identificador da tab. Deve corresponder ao index do Tab associado */
+    index: string;
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Conteúdo do painel */
+    children?: any;
+    [key: string]: any;
+}
+declare function TabContent(props: TabContentProps): import("react/jsx-runtime").JSX.Element;
+export default TabContent;

package/dist/components/Tabs/TabContent.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
+import TabsContext from "./tabs.context";
+function TabContent(props) {
+    const tabsContext = useContext(TabsContext);
+    return (_jsx(_Fragment, { children: tabsContext.value === props.index ? (_jsx(_Fragment, { children: _jsx("div", { role: "tabpanel", "data-tab-index": props.index, className: ["umds-tabs__content", props.className]
+                    .filter(Boolean)
+                    .join(" "), children: props.children }) })) : null }));
+}
+export default TabContent;

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1,124 @@
+/* ============================
+   Tabs Container
+   ============================ */
+.umds-tabs {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    font-family: var(--umds-semantic-font-family-base);
+}
+
+/* ============================
+   Tab List (tablist)
+   ============================ */
+.umds-tabs__list {
+    display: flex;
+    align-items: stretch;
+    border-bottom: 1px solid var(--umds-semantic-color-neutral-light-down);
+    gap: 0;
+}
+
+/* ============================
+   Individual Tab Button
+   ============================ */
+.umds-tabs__tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--umds-primitive-spacing-nano);
+    padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs);
+    border: none;
+    border-bottom: 3px solid transparent;
+    background: none;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease-in-out;
+    font-family: var(--umds-semantic-font-family-base);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+/* ============================
+   Label
+   ============================ */
+.umds-tabs__label {
+    font-weight: var(--umds-primitive-font-weight-regular);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+    white-space: nowrap;
+}
+
+.umds-tabs__label--selected {
+    font-weight: var(--umds-primitive-font-weight-bold);
+    color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+/* ============================
+   Icon
+   ============================ */
+.umds-tabs__icon {
+    flex-shrink: 0;
+    color: inherit;
+}
+
+/* ============================
+   Hover State
+   ============================ */
+.umds-tabs__tab:hover:not(:disabled):not(.umds-tabs__tab--selected) {
+    border-bottom-color: var(--umds-semantic-color-primary-pure);
+    border-bottom-width: 1px;
+    padding-bottom: calc(var(--umds-primitive-spacing-nano) + 2px);
+}
+
+/* ============================
+   Selected State
+   ============================ */
+.umds-tabs__tab--selected {
+    border-bottom-color: var(--umds-semantic-color-primary-pure);
+    border-bottom-width: 3px;
+}
+
+/* ============================
+   Focus State
+   ============================ */
+.umds-tabs__tab:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-neutral-dark-pure);
+    outline-offset: -2px;
+    border-radius: var(--umds-primitive-border-radius-sm) var(--umds-primitive-border-radius-sm) 0 0;
+}
+
+.umds-tabs__tab:focus:not(:focus-visible) {
+    outline: none;
+}
+
+/* ============================
+   Disabled State
+   ============================ */
+.umds-tabs__tab--disabled,
+.umds-tabs__tab:disabled {
+    cursor: not-allowed;
+    color: var(--umds-semantic-color-neutral-dark-up);
+    opacity: 0.6;
+}
+
+.umds-tabs__tab--disabled .umds-tabs__label,
+.umds-tabs__tab:disabled .umds-tabs__label {
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+.umds-tabs__tab--disabled .umds-tabs__icon,
+.umds-tabs__tab:disabled .umds-tabs__icon {
+    color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+/* ============================
+   Content Panel
+   ============================ */
+.umds-tabs__content {
+    padding: var(--umds-primitive-spacing-xxs) 0;
+}
+
+/* ============================
+   Tabs Content Container
+   ============================ */
+.umds-tabs-content {
+    width: 100%;
+}

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,20 @@
+import './Tabs.css';
+/**
+ * Propriedades do componente Tabs.
+ * @description Container de navegação por abas. Renderiza os botões de tab via subcomponentes <Tab />.
+ */
+export interface TabsProps {
+    /** Valor da tab ativa (controlado) */
+    value: string;
+    /** Callback chamado quando uma tab é selecionada */
+    onChange?: (index: string) => void;
+    /** Label de acessibilidade para o tablist */
+    ariaLabel?: string;
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Subcomponentes Tab */
+    children?: any;
+    [key: string]: any;
+}
+declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default Tabs;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Tabs.css';
+"use client";
+import TabsContext from "./tabs.context";
+function Tabs(props) {
+    function classes() {
+        return ["umds-tabs", props.className].filter(Boolean).join(" ");
+    }
+    return (_jsx(TabsContext.Provider, { value: {
+            value: props.value,
+            onChange: props.onChange,
+        }, children: _jsx("div", { className: classes(), children: _jsx("div", { role: "tablist", className: "umds-tabs__list", "aria-label": props.ariaLabel, children: props.children }) }) }));
+}
+export default Tabs;

package/dist/components/Tabs/TabsContent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Propriedades do componente TabsContent.
+ * @description Container para os painéis de conteúdo das tabs.
+ * Deve receber o mesmo value usado no componente Tabs.
+ */
+export interface TabsContentProps {
+    /** Valor da tab ativa. Deve ser o mesmo value do componente Tabs */
+    value: string;
+    /** Classes CSS adicionais */
+    className?: string;
+    /** Subcomponentes TabContent */
+    children?: any;
+    [key: string]: any;
+}
+declare function TabsContent(props: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+export default TabsContent;

package/dist/components/Tabs/TabsContent.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import TabsContext from "./tabs.context";
+function TabsContent(props) {
+    return (_jsx(TabsContext.Provider, { value: {
+            value: props.value,
+            onChange() { },
+        }, children: _jsx("div", { className: ["umds-tabs-content", props.className]
+                .filter(Boolean)
+                .join(" "), children: props.children }) }));
+}
+export default TabsContent;

package/dist/components/Tabs/tabs.context.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").Context<any>;
+export default _default;

package/dist/components/Tabs/tabs.context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export default createContext({ value: "", onChange(_index) { } });

package/dist/components/Tag/Tag.css

@@ -0,0 +1,140 @@
+/* ============================================
+   Tag Component
+   Variantes: outlined, solid
+   Tamanhos: sm, md, lg
+   ============================================ */
+
+.umds-tag {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    font-family: var(--umds-semantic-font-family-base);
+    font-weight: var(--umds-primitive-font-weight-semibold);
+    line-height: 1;
+    white-space: nowrap;
+    border: 1px solid transparent;
+    cursor: default;
+    transition: all 0.15s ease;
+    max-width: 100%;
+}
+
+.umds-tag__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 1;
+    min-width: 0;
+}
+
+.umds-tag__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.umds-tag__icon--clickable {
+    cursor: pointer;
+    border-radius: var(--umds-primitive-border-radius-xs);
+    transition: background-color 0.15s ease;
+}
+
+.umds-tag__icon--clickable:hover {
+    opacity: 0.7;
+}
+
+.umds-tag__icon--clickable:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-primary-pure);
+    outline-offset: 1px;
+}
+
+.umds-tag__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: var(--umds-primitive-border-radius-xs);
+    transition: background-color 0.15s ease;
+}
+
+.umds-tag__close:hover {
+    opacity: 0.7;
+}
+
+.umds-tag__close:focus-visible {
+    outline: 2px solid var(--umds-semantic-color-primary-pure);
+    outline-offset: 1px;
+}
+
+/* ----------------------------------------
+   Sizes
+   ---------------------------------------- */
+
+/* SM: border-radius 6px, gap 4px, padding 8px H / 2px V, font-size 12px */
+.umds-tag--sm {
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 6px;
+    font-size: var(--umds-primitive-font-size-xxxs);
+}
+
+/* MD: border-radius 8px, gap 8px, height 28px, padding 6px 8px, font-size 14px */
+.umds-tag--md {
+    gap: 8px;
+    padding: 6px 8px;
+    height: 28px;
+    border-radius: 8px;
+    font-size: var(--umds-primitive-font-size-xxs);
+}
+
+/* LG: border-radius 8px, gap 8px, height 40px, padding 8px, font-size 16px */
+.umds-tag--lg {
+    gap: 8px;
+    padding: 8px;
+    height: 40px;
+    border-radius: 8px;
+    font-size: var(--umds-primitive-font-size-xs);
+}
+
+/* ----------------------------------------
+   Variant: Outlined
+   ---------------------------------------- */
+.umds-tag--outlined {
+    background-color: transparent;
+    border-color: var(--umds-semantic-color-neutral-light-down);
+    color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-tag--outlined:hover:not(.umds-tag--disabled) {
+    background-color: var(--umds-semantic-color-neutral-light-medium);
+}
+
+/* ----------------------------------------
+   Variant: Solid
+   ---------------------------------------- */
+.umds-tag--solid {
+    background-color: var(--umds-semantic-color-neutral-dark-down);
+    border-color: var(--umds-semantic-color-neutral-dark-down);
+    color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-tag--solid:hover:not(.umds-tag--disabled) {
+    background-color: var(--umds-semantic-color-neutral-dark-medium);
+    border-color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+/* ----------------------------------------
+   Disabled
+   ---------------------------------------- */
+.umds-tag--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.umds-tag--disabled .umds-tag__close,
+.umds-tag--disabled .umds-tag__icon--clickable {
+    cursor: not-allowed;
+    pointer-events: none;
+}