@1doc/1ds-react 0.0.1

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,63 @@
+import './Tag.css';
+/**
+ * Componente Tag para exibir rótulos, categorias e seleções.
+ * Suporta variantes outlined/solid, 3 tamanhos e ícones opcionais.
+ * Ideal para uso em multi-select, filtros e categorização.
+ */
+export interface TagProps {
+    /**
+     * Texto exibido dentro da tag.
+     */
+    label?: string;
+    /**
+     * Variante visual da tag.
+     * @default 'outlined'
+     */
+    variant?: "outlined" | "solid";
+    /**
+     * Tamanho da tag.
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Nome do ícone Iconoir exibido à esquerda do label.
+     */
+    iconStart?: string;
+    /**
+     * Nome do ícone Iconoir exibido à direita do label (antes do close).
+     */
+    iconEnd?: string;
+    /**
+     * Se true, exibe o botão de fechar (ícone xmark).
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * Callback disparado ao clicar no botão de fechar.
+     */
+    onClose?: (event: any) => void;
+    /**
+     * Callback disparado ao clicar no ícone à esquerda.
+     */
+    onIconStartClick?: (event: any) => void;
+    /**
+     * Callback disparado ao clicar no ícone à direita.
+     */
+    onIconEndClick?: (event: any) => void;
+    /**
+     * Se a tag está desabilitada.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Classes CSS adicionais.
+     */
+    className?: string;
+    /**
+     * Conteúdo filho (alternativa ao label).
+     */
+    children?: any;
+    [key: string]: any;
+}
+declare function Tag(props: TagProps): import("react/jsx-runtime").JSX.Element;
+export default Tag;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Tag.css';
+"use client";
+import Icon from "../Icon/Icon";
+function Tag(props) {
+    function classes() {
+        return [
+            "umds-tag",
+            `umds-tag--${props.variant || "outlined"}`,
+            `umds-tag--${props.size || "md"}`,
+            props.disabled ? "umds-tag--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function iconSize() {
+        const size = props.size || "md";
+        if (size === "lg") {
+            return "md";
+        }
+        return "sm";
+    }
+    function handleClose(event) {
+        event.stopPropagation();
+        if (!props.disabled && props.onClose) {
+            props.onClose(event);
+        }
+    }
+    function handleIconStartClick(event) {
+        event.stopPropagation();
+        if (!props.disabled && props.onIconStartClick) {
+            props.onIconStartClick(event);
+        }
+    }
+    function handleIconEndClick(event) {
+        event.stopPropagation();
+        if (!props.disabled && props.onIconEndClick) {
+            props.onIconEndClick(event);
+        }
+    }
+    return (_jsxs("span", { role: "status", ...props, className: classes(), children: [props.iconStart ? (_jsx("span", { onClick: (event) => handleIconStartClick(event), role: props.onIconStartClick ? "button" : undefined, tabIndex: props.onIconStartClick ? 0 : undefined, "aria-label": props.onIconStartClick ? props.iconStart : undefined, className: props.onIconStartClick
+                    ? "umds-tag__icon umds-tag__icon--clickable"
+                    : "umds-tag__icon", children: _jsx(Icon, { variant: "inherit", name: props.iconStart, size: iconSize() }) })) : null, _jsx("span", { className: "umds-tag__label", children: props.label || props.children }), props.iconEnd ? (_jsx("span", { onClick: (event) => handleIconEndClick(event), role: props.onIconEndClick ? "button" : undefined, tabIndex: props.onIconEndClick ? 0 : undefined, "aria-label": props.onIconEndClick ? props.iconEnd : undefined, className: props.onIconEndClick
+                    ? "umds-tag__icon umds-tag__icon--clickable"
+                    : "umds-tag__icon", children: _jsx(Icon, { variant: "inherit", name: props.iconEnd, size: iconSize() }) })) : null, props.closable ? (_jsx("span", { role: "button", "aria-label": "Remover", className: "umds-tag__close", onClick: (event) => handleClose(event), tabIndex: 0, children: _jsx(Icon, { name: "xmark", variant: "inherit", size: iconSize() }) })) : null] }));
+}
+export default Tag;