w-design-system 0.0.46 → 0.0.47

package/dist/components/InputTag/index.d.ts

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+export interface InputProps extends HTMLAttributes<HTMLDivElement> {
+    placeholder?: string;
+    rightIcon?: ReactNode;
+    leftIcon?: ReactNode;
+    label?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    value?: string;
+    tags: string[];
+    setTags: (tags: string[]) => void;
+}
+export interface Position {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare const InputTag: React.FC<InputProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InputTag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputTag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAmD,MAAM,OAAO,CAAA;AAKzG,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAClC;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuHzC,CAAA"}

package/dist/components/InputTag/index.js

@@ -0,0 +1,95 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { InputWrapper, StyledInput, StyledInputBorder, StyledInputContent, StyledLabel } from './styles';
+import { Paragraph } from '../Paragraph';
+import { theme } from '../Themes';
+export const InputTag = (_a) => {
+    var { label, readonly, disabled, leftIcon, rightIcon, tags, setTags, placeholder } = _a, props = __rest(_a, ["label", "readonly", "disabled", "leftIcon", "rightIcon", "tags", "setTags", "placeholder"]);
+    const id = useId();
+    const contentRef = useRef(null);
+    const labelRef = useRef(null);
+    const inputRef = useRef(null);
+    const [inputValue, setInputValue] = useState('');
+    const [labelPosition, setLabelPosition] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    const [contentPosition, setContentPosition] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    const updatePositions = useCallback(() => {
+        const margin = 30;
+        if (contentRef.current) {
+            setContentPosition({
+                x: contentRef.current.offsetLeft - margin,
+                y: contentRef.current.offsetTop - margin,
+                width: contentRef.current.offsetWidth + margin * 2,
+                height: contentRef.current.offsetHeight + margin * 2,
+            });
+        }
+        if (labelRef.current) {
+            setLabelPosition({
+                x: labelRef.current.offsetLeft,
+                y: labelRef.current.offsetTop,
+                width: labelRef.current.offsetWidth,
+                height: labelRef.current.offsetHeight,
+            });
+        }
+    }, []);
+    useEffect(() => {
+        updatePositions();
+    }, [label, updatePositions]);
+    const addTag = (e) => {
+        var _a;
+        if (e)
+            e.stopPropagation();
+        if (inputValue.trim() && !tags.includes(inputValue.trim())) {
+            setTags([...tags, inputValue.trim()]);
+            setInputValue('');
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const removeTag = (tagToRemove) => {
+        setTags(tags.filter(tag => tag !== tagToRemove));
+    };
+    const handleContainerClick = (e) => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        e.stopPropagation();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputWrapper, Object.assign({}, props),
+            React.createElement(StyledInputContent, { disabled: disabled, ref: contentRef, onClick: e => handleContainerClick(e) },
+                React.createElement(StyledInputBorder, { content: contentPosition, label: labelPosition }),
+                React.createElement(StyledLabel, { htmlFor: id, ref: labelRef }, label),
+                leftIcon,
+                React.createElement(StyledInput, { id: id, disabled: disabled, ref: inputRef, value: inputValue, onChange: e => setInputValue(e.target.value), placeholder: placeholder, onKeyDown: e => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            addTag();
+                        }
+                    }, readOnly: readonly }),
+                rightIcon),
+            React.createElement("button", { className: 'button-action', onClick: e => addTag(e) },
+                React.createElement(Paragraph, { color: theme.colors.cyan30 }, "add")),
+            React.createElement("div", { className: 'container-input-tag' }, tags.map((tag, index) => (React.createElement("button", { className: 'wrapper-tag', key: index },
+                React.createElement(Paragraph, { color: theme.colors.cyan30 }, tag),
+                React.createElement("button", { onClick: () => removeTag(tag) },
+                    React.createElement(Paragraph, { color: theme.colors.shade40 }, "x")))))))));
+};
+//# sourceMappingURL=index.js.map

package/dist/components/InputTag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputTag/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/InputTag/stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { InputTag } from './index';
+declare const meta: Meta<typeof InputTag>;
+export default meta;
+type Story = StoryObj<typeof InputTag>;
+export declare const Playground: Story;
+//# sourceMappingURL=stories.d.ts.map

package/dist/components/InputTag/stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/InputTag/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAS/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAQtC,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA"}

package/dist/components/InputTag/stories.js

@@ -0,0 +1,25 @@
+import { InputTag } from './index';
+import React, { useState } from 'react';
+const meta = {
+    title: 'Components/InputTag',
+    component: InputTag,
+    argTypes: {
+        placeholder: { control: 'text' },
+        label: { control: 'text' },
+        readonly: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+};
+export default meta;
+const Template = (args) => {
+    const [tags, setTags] = useState(['Tag1', 'Tag2']);
+    return React.createElement(InputTag, Object.assign({}, args, { tags: tags, setTags: setTags }));
+};
+export const Playground = {
+    render: args => React.createElement(Template, Object.assign({}, args)),
+    args: {
+        label: 'Label',
+        placeholder: 'Digite uma tag',
+    },
+};
+//# sourceMappingURL=stories.js.map

package/dist/components/InputTag/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/InputTag/stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAED,eAAe,IAAI,CAAA;AAGnB,MAAM,QAAQ,GAAG,CAAC,IAAS,EAAE,EAAE;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAE5D,OAAO,oBAAC,QAAQ,oBAAK,IAAI,IAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAI,CAAA;AAC7D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI;IACtC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,gBAAgB;KAC9B;CACF,CAAA"}

package/dist/components/InputTag/styles.d.ts

@@ -0,0 +1,19 @@
+import type { Position } from '.';
+export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export interface StyledInputContentProps {
+    disabled?: boolean;
+}
+export declare const StyledInputContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContentProps>> & string;
+export interface StyledInputBorderProps {
+    label: Position;
+    content: Position;
+}
+/**
+ * O clip-path faz com que o elemento fique transparente na região do label
+ * @see https://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+export declare const StyledInputBorder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputBorderProps>> & string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/InputTag/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/InputTag/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAA;AAEjC,eAAO,MAAM,YAAY,6NA4CxB,CAAA;AAED,eAAO,MAAM,WAAW,sOA4BvB,CAAA;AAED,eAAO,MAAM,WAAW,sOAavB,CAAA;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,kBAAkB,4PAiB9B,CAAA;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,QAAQ,CAAA;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,2PAc7B,CAAA"}

package/dist/components/InputTag/styles.js

@@ -0,0 +1,127 @@
+import styled from 'styled-components';
+import { theme } from '../Themes';
+export const InputWrapper = styled.div `
+  position: relative;
+  border-radius: 4px;
+  .button-action {
+    position: absolute;
+    right: 0;
+    top: 1px;
+    display: flex;
+    align-items: center;
+    padding: 18px;
+    height: 52px;
+    border-radius: 4px;
+    background: ${theme.colors.shade10};
+    border: none;
+    cursor: pointer;
+  }
+  .container-input-tag {
+    display: flex;
+    gap: 16px;
+    margin-top: 8px;
+
+    button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+
+      p {
+        margin-top: 2px;
+      }
+    }
+
+    .wrapper-tag {
+      background: ${theme.colors.cyan10};
+      display: flex;
+
+      gap: 8px;
+      flex-wrap: wrap;
+      border-radius: 4px;
+      padding: 4px 8px;
+    }
+  }
+`;
+export const StyledInput = styled.input `
+  width: 100%;
+
+  background-color: transparent;
+  border: none;
+  outline: none;
+
+  color: ${theme.colors.shade50};
+
+  font-family: ${theme.fonts.join(', ')};
+  font-size: ${theme.paragraph.medium};
+
+  &:active,
+  &:focus {
+    outline: none;
+    border: none;
+  }
+
+  &::placeholder {
+    color: ${theme.colors.shade30};
+    font-size: ${theme.paragraph.medium};
+    opacity: 1;
+  }
+
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+`;
+export const StyledLabel = styled.label `
+  position: absolute;
+  color: ${theme.colors.shade50};
+
+  box-sizing: content-box;
+  left: 15px;
+  top: -8px;
+  padding: 0 1px;
+
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: ${theme.paragraph.small};
+  font-weight: 600;
+  text-wrap: nowrap;
+`;
+export const StyledInputContent = styled.div `
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: content-box;
+  padding: 18px 16px 14px 16px;
+  height: 22px;
+  gap: 8px;
+  border-radius: 4px;
+
+  background-color: ${({ disabled }) => disabled ? theme.colors.shade10 : theme.colors.white};
+
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+`;
+/**
+ * O clip-path faz com que o elemento fique transparente na região do label
+ * @see https://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+export const StyledInputBorder = styled.div `
+  position: absolute;
+
+  box-sizing: content-box;
+  inset: 0px;
+  border-radius: 4px;
+  border: 1px solid ${theme.colors.shade20};
+  clip-rule: evenodd;
+  clip-path: path(
+    '${({ label, content }) => label.height !== 0 && label.width !== 0
+    ? `M ${content.x} ${content.y} l ${content.width} 0 l 0 ${content.height} l -${content.width} 0z M ${label.x} ${label.y} l 0 ${label.height} l ${label.width} 0 l 0 -${label.height}z`
+    : ''}'
+  );
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/InputTag/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/InputTag/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAGjC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;kBAYpB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;oBAuBlB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;CAStC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;WAO5B,KAAK,CAAC,MAAM,CAAC,OAAO;;iBAEd,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;eACxB,KAAK,CAAC,SAAS,CAAC,MAAM;;;;;;;;;aASxB,KAAK,CAAC,MAAM,CAAC,OAAO;iBAChB,KAAK,CAAC,SAAS,CAAC,MAAM;;;;;;;;CAQtC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;WAE5B,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;eAQhB,KAAK,CAAC,SAAS,CAAC,KAAK;;;CAGnC,CAAA;AAMD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAyB;;;;;;;;;;;;;sBAa/C,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE,CAC5D,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;YAE5C,CAAC,EAAE,QAAQ,EAA2B,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;CAC5F,CAAA;AAOD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAwB;;;;;;sBAM7C,KAAK,CAAC,MAAM,CAAC,OAAO;;;OAGnC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CACxB,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,KAAK,CAAC;IACrC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,MAAM,OAAO,CAAC,KAAK,UAAU,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,KAAK,SAAS,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,QAAQ,KAAK,CAAC,MAAM,MAAM,KAAK,CAAC,KAAK,WAAW,KAAK,CAAC,MAAM,GAAG;IACtL,CAAC,CAAC,EAAE;;CAEX,CAAA"}

package/dist/components/index.d.ts

@@ -12,4 +12,5 @@ export { Paginate } from './Paginate/index';
 export { Table } from './Table/index';
 export { Input } from './Input/index';
 export { EmptyState } from './EmptyState/index';
+export { InputTag } from './InputTag/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/index.js

@@ -12,4 +12,5 @@ export { Paginate } from './Paginate/index';
 export { Table } from './Table/index';
 export { Input } from './Input/index';
 export { EmptyState } from './EmptyState/index';
+export { InputTag } from './InputTag/index';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { Tabs } from './components/Tabs/index';
 export { theme } from './components/Themes/index';
 export { Title } from './components/Title/index';
 export { EmptyState } from './components/EmptyState/index';
+export { InputTag } from './components/InputTag/index';
 export * from './components/Types/index';
 export { alertSVG, appsSVG, bellSVG, bindSVG, bookmarkSVG, calendarSVG, checkSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG, closeSVG, commentSVG, dashboardSVG, docCheckSVG, docDownloadSVG, docSVG, docUploadSVG, dumpSVG, editSVG, editalSVG, eyesSVG, fileSVG, financeSVG, gearSVG, grid2PlusSVG, imageSVG, moneySVG, monitoringSVG, orderSVG, portalSVG, settingSVG, spinSVG, spreadsheetSVG, wavePulseSVG, } from './assets/icon/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,cAAc,0BAA0B,CAAA;AAExC,OAAO,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,cAAc,0BAA0B,CAAA;AAExC,OAAO,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA"}

package/dist/index.js

@@ -17,6 +17,7 @@ export { Tabs } from './components/Tabs/index';
 export { theme } from './components/Themes/index';
 export { Title } from './components/Title/index';
 export { EmptyState } from './components/EmptyState/index';
+export { InputTag } from './components/InputTag/index';
 export * from './components/Types/index';
 export { alertSVG, appsSVG, bellSVG, bindSVG, bookmarkSVG, calendarSVG, checkSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG, closeSVG, commentSVG, dashboardSVG, docCheckSVG, docDownloadSVG, docSVG, docUploadSVG, dumpSVG, editSVG, editalSVG, eyesSVG, fileSVG, financeSVG, gearSVG, grid2PlusSVG, imageSVG, moneySVG, monitoringSVG, orderSVG, portalSVG, settingSVG, spinSVG, spreadsheetSVG, wavePulseSVG, } from './assets/icon/index';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,cAAc,0BAA0B,CAAA;AAExC,OAAO,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,cAAc,0BAA0B,CAAA;AAExC,OAAO,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,cAAc,EACd,MAAM,EACN,YAAY,EACZ,OAAO,EACP,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,SAAS,EACT,UAAU,EACV,OAAO,EACP,cAAc,EACd,YAAY,GACb,MAAM,qBAAqB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/components/InputTag/index.tsx

@@ -0,0 +1,144 @@
+import React, { HTMLAttributes, ReactNode, useCallback, useEffect, useId, useRef, useState } from 'react'
+import { InputWrapper, StyledInput, StyledInputBorder, StyledInputContent, StyledLabel } from './styles'
+import { Paragraph } from '../Paragraph'
+import { theme } from '../Themes'
+
+export interface InputProps extends HTMLAttributes<HTMLDivElement> {
+  placeholder?: string
+  rightIcon?: ReactNode
+  leftIcon?: ReactNode
+  label?: string
+  readonly?: boolean
+  disabled?: boolean
+  value?: string
+  tags: string[]
+  setTags: (tags: string[]) => void
+}
+
+export interface Position {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export const InputTag: React.FC<InputProps> = ({
+  label,
+  readonly,
+  disabled,
+  leftIcon,
+  rightIcon,
+  tags,
+  setTags,
+  placeholder,
+  ...props
+}) => {
+  const id = useId()
+  const contentRef = useRef<HTMLDivElement>(null)
+  const labelRef = useRef<HTMLLabelElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [inputValue, setInputValue] = useState('')
+
+  const [labelPosition, setLabelPosition] = useState<Position>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  })
+  const [contentPosition, setContentPosition] = useState<Position>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  })
+
+  const updatePositions = useCallback(() => {
+    const margin = 30
+    if (contentRef.current) {
+      setContentPosition({
+        x: contentRef.current.offsetLeft - margin,
+        y: contentRef.current.offsetTop - margin,
+        width: contentRef.current.offsetWidth + margin * 2,
+        height: contentRef.current.offsetHeight + margin * 2,
+      })
+    }
+    if (labelRef.current) {
+      setLabelPosition({
+        x: labelRef.current.offsetLeft,
+        y: labelRef.current.offsetTop,
+        width: labelRef.current.offsetWidth,
+        height: labelRef.current.offsetHeight,
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    updatePositions()
+  }, [label, updatePositions])
+
+  const addTag = (e?: React.MouseEvent<HTMLButtonElement>) => {
+    if (e) e.stopPropagation()
+    if (inputValue.trim() && !tags.includes(inputValue.trim())) {
+      setTags([...tags, inputValue.trim()])
+      setInputValue('')
+      inputRef.current?.focus()
+    }
+  }
+
+  const removeTag = (tagToRemove: string) => {
+    setTags(tags.filter(tag => tag !== tagToRemove))
+  }
+
+  const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    inputRef.current?.focus()
+    e.stopPropagation()
+  }
+
+  return (
+    <>
+      {/* ✅ Mantendo a borda dinâmica com ref */}
+      <InputWrapper {...props}>
+        <StyledInputContent disabled={disabled} ref={contentRef} onClick={e => handleContainerClick(e)}>
+          {/* ✅ Mantendo a borda dinâmica */}
+          <StyledInputBorder content={contentPosition} label={labelPosition} />
+          <StyledLabel htmlFor={id} ref={labelRef}>
+            {label}
+          </StyledLabel>
+          {leftIcon}
+
+          {/* ✅ Input controlado e foco garantido */}
+          <StyledInput
+            id={id}
+            disabled={disabled}
+            ref={inputRef}
+            value={inputValue}
+            onChange={e => setInputValue(e.target.value)}
+            placeholder={placeholder}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                addTag()
+              }
+            }}
+            readOnly={readonly}
+          />
+
+          {rightIcon}
+        </StyledInputContent>
+        <button className={'button-action'} onClick={e => addTag(e)}>
+          <Paragraph color={theme.colors.cyan30}>add</Paragraph>
+        </button>
+        <div className={'container-input-tag'}>
+          {tags.map((tag, index) => (
+            <button className={'wrapper-tag'} key={index}>
+              <Paragraph color={theme.colors.cyan30}>{tag}</Paragraph>
+              <button onClick={() => removeTag(tag)}>
+                <Paragraph color={theme.colors.shade40}>x</Paragraph>
+              </button>
+            </button>
+          ))}
+        </div>
+      </InputWrapper>
+    </>
+  )
+}

package/src/components/InputTag/stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { InputTag } from './index'
+import React, { useState } from 'react'
+
+const meta: Meta<typeof InputTag> = {
+  title: 'Components/InputTag',
+  component: InputTag,
+  argTypes: {
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    readonly: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InputTag>
+
+const Template = (args: any) => {
+  const [tags, setTags] = useState<string[]>(['Tag1', 'Tag2'])
+
+  return <InputTag {...args} tags={tags} setTags={setTags} />
+}
+
+export const Playground: Story = {
+  render: args => <Template {...args} />,
+  args: {
+    label: 'Label',
+    placeholder: 'Digite uma tag',
+  },
+}

package/src/components/InputTag/styles.ts

@@ -0,0 +1,143 @@
+import styled from 'styled-components'
+import { theme } from '../Themes'
+import type { Position } from '.'
+
+export const InputWrapper = styled.div`
+  position: relative;
+  border-radius: 4px;
+  .button-action {
+    position: absolute;
+    right: 0;
+    top: 1px;
+    display: flex;
+    align-items: center;
+    padding: 18px;
+    height: 52px;
+    border-radius: 4px;
+    background: ${theme.colors.shade10};
+    border: none;
+    cursor: pointer;
+  }
+  .container-input-tag {
+    display: flex;
+    gap: 16px;
+    margin-top: 8px;
+
+    button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+
+      p {
+        margin-top: 2px;
+      }
+    }
+
+    .wrapper-tag {
+      background: ${theme.colors.cyan10};
+      display: flex;
+
+      gap: 8px;
+      flex-wrap: wrap;
+      border-radius: 4px;
+      padding: 4px 8px;
+    }
+  }
+`
+
+export const StyledInput = styled.input`
+  width: 100%;
+
+  background-color: transparent;
+  border: none;
+  outline: none;
+
+  color: ${theme.colors.shade50};
+
+  font-family: ${theme.fonts.join(', ')};
+  font-size: ${theme.paragraph.medium};
+
+  &:active,
+  &:focus {
+    outline: none;
+    border: none;
+  }
+
+  &::placeholder {
+    color: ${theme.colors.shade30};
+    font-size: ${theme.paragraph.medium};
+    opacity: 1;
+  }
+
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+`
+
+export const StyledLabel = styled.label`
+  position: absolute;
+  color: ${theme.colors.shade50};
+
+  box-sizing: content-box;
+  left: 15px;
+  top: -8px;
+  padding: 0 1px;
+
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: ${theme.paragraph.small};
+  font-weight: 600;
+  text-wrap: nowrap;
+`
+
+export interface StyledInputContentProps {
+  disabled?: boolean
+}
+
+export const StyledInputContent = styled.div<StyledInputContentProps>`
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: content-box;
+  padding: 18px 16px 14px 16px;
+  height: 22px;
+  gap: 8px;
+  border-radius: 4px;
+
+  background-color: ${({ disabled }: StyledInputContentProps) =>
+    disabled ? theme.colors.shade10 : theme.colors.white};
+
+  cursor: ${({ disabled }: StyledInputContentProps) => (disabled ? 'not-allowed' : 'pointer')};
+`
+
+export interface StyledInputBorderProps {
+  label: Position
+  content: Position
+}
+
+/**
+ * O clip-path faz com que o elemento fique transparente na região do label
+ * @see https://stackoverflow.com/questions/3742479/how-to-cut-a-hole-in-an-svg-rectangle
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+export const StyledInputBorder = styled.div<StyledInputBorderProps>`
+  position: absolute;
+
+  box-sizing: content-box;
+  inset: 0px;
+  border-radius: 4px;
+  border: 1px solid ${theme.colors.shade20};
+  clip-rule: evenodd;
+  clip-path: path(
+    '${({ label, content }) =>
+      label.height !== 0 && label.width !== 0
+        ? `M ${content.x} ${content.y} l ${content.width} 0 l 0 ${content.height} l -${content.width} 0z M ${label.x} ${label.y} l 0 ${label.height} l ${label.width} 0 l 0 -${label.height}z`
+        : ''}'
+  );
+`

package/src/components/index.tsx

@@ -12,3 +12,4 @@ export { Paginate } from './Paginate/index'
 export { Table } from './Table/index'
 export { Input } from './Input/index'
 export { EmptyState } from './EmptyState/index'
+export { InputTag } from './InputTag/index'

package/src/index.tsx

@@ -17,6 +17,7 @@ export { Tabs } from './components/Tabs/index'
 export { theme } from './components/Themes/index'
 export { Title } from './components/Title/index'
 export { EmptyState } from './components/EmptyState/index'
+export { InputTag } from './components/InputTag/index'
 export * from './components/Types/index'
 
 export {