@prosistemas/sca-web-kit 3.3.12 → 3.4.0

package/dist/components/shared/info-header/info-header.d.ts

@@ -1,8 +1,11 @@
 import { IconProps, IconWeight } from '@phosphor-icons/react';
+import { HTMLAttributeAnchorTarget } from 'react';
 interface InfoHeaderProps {
     className?: string;
     tagLabel?: string;
     tagLabelClassName?: string;
+    tagLabelHref?: string;
+    tagLabelTarget?: HTMLAttributeAnchorTarget;
     tagLabelLeadingIcon?: React.ComponentType<IconProps>;
     tagLabelLeadingIconSize?: number;
     tagLabelLeadingIconColor?: string;
@@ -26,5 +29,5 @@ interface InfoHeaderProps {
     gap?: string;
     dark?: boolean;
 }
-export default function InfoHeader({ className, tagLabel, tagLabelClassName, tagLabelLeadingIcon, tagLabelLeadingIconSize, tagLabelLeadingIconColor, tagLabelLeadingIconWeight, tagLabelLeadingIconClassName, tagLabelTrailingIcon, tagLabelTrailingIconSize, tagLabelTrailingIconColor, tagLabelTrailingIconWeight, tagLabelTrailingIconClassName, title, titleClassName, titleH1, subtitle, subtitleClassName, buttonLabel, buttonClassName, buttonHref, buttonInternalHref, buttonTarget, gap, dark, }: InfoHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function InfoHeader({ className, tagLabel, tagLabelClassName, tagLabelHref, tagLabelTarget, tagLabelLeadingIcon, tagLabelLeadingIconSize, tagLabelLeadingIconColor, tagLabelLeadingIconWeight, tagLabelLeadingIconClassName, tagLabelTrailingIcon, tagLabelTrailingIconSize, tagLabelTrailingIconColor, tagLabelTrailingIconWeight, tagLabelTrailingIconClassName, title, titleClassName, titleH1, subtitle, subtitleClassName, buttonLabel, buttonClassName, buttonHref, buttonInternalHref, buttonTarget, gap, dark, }: InfoHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/shared/info-header/info-header.js

@@ -4,11 +4,11 @@ import TagLabel from '../../ui/tag-label/tag-label';
 import Title from '../../ui/title/title';
 import Subtitle from '../../ui/subtitle/subtitle';
 import Button from '../../ui/button/button';
-export default function InfoHeader({ className, tagLabel, tagLabelClassName, tagLabelLeadingIcon, tagLabelLeadingIconSize, tagLabelLeadingIconColor, tagLabelLeadingIconWeight, tagLabelLeadingIconClassName, tagLabelTrailingIcon, tagLabelTrailingIconSize, tagLabelTrailingIconColor, tagLabelTrailingIconWeight, tagLabelTrailingIconClassName, title, titleClassName, titleH1 = false, subtitle, subtitleClassName, buttonLabel, buttonClassName, buttonHref, buttonInternalHref, buttonTarget, gap, dark, }) {
+export default function InfoHeader({ className, tagLabel, tagLabelClassName, tagLabelHref, tagLabelTarget, tagLabelLeadingIcon, tagLabelLeadingIconSize, tagLabelLeadingIconColor, tagLabelLeadingIconWeight, tagLabelLeadingIconClassName, tagLabelTrailingIcon, tagLabelTrailingIconSize, tagLabelTrailingIconColor, tagLabelTrailingIconWeight, tagLabelTrailingIconClassName, title, titleClassName, titleH1 = false, subtitle, subtitleClassName, buttonLabel, buttonClassName, buttonHref, buttonInternalHref, buttonTarget, gap, dark, }) {
     return (_jsxs("div", { className: `${styles['info-header']} ${className}`, style: {
             gap: gap,
         }, children: [tagLabel &&
-                _jsx(TagLabel, { className: `${tagLabelClassName} ${styles['tag-label']}`, label: tagLabel, dark: dark, leadingIcon: tagLabelLeadingIcon, leadingIconSize: tagLabelLeadingIconSize, leadingIconColor: tagLabelLeadingIconColor, leadingIconWeight: tagLabelLeadingIconWeight, leadingIconClassName: tagLabelLeadingIconClassName, trailingIcon: tagLabelTrailingIcon, trailingIconSize: tagLabelTrailingIconSize, trailingIconColor: tagLabelTrailingIconColor, trailingIconWeight: tagLabelTrailingIconWeight, trailingIconClassName: tagLabelTrailingIconClassName }), _jsx(Title, { className: `${titleClassName} ${styles['title']}`, h1: titleH1, text: title, dark: dark }), subtitle &&
+                _jsx(TagLabel, { className: `${tagLabelClassName} ${styles['tag-label']}`, label: tagLabel, dark: dark, href: tagLabelHref, target: tagLabelTarget, leadingIcon: tagLabelLeadingIcon, leadingIconSize: tagLabelLeadingIconSize, leadingIconColor: tagLabelLeadingIconColor, leadingIconWeight: tagLabelLeadingIconWeight, leadingIconClassName: tagLabelLeadingIconClassName, trailingIcon: tagLabelTrailingIcon, trailingIconSize: tagLabelTrailingIconSize, trailingIconColor: tagLabelTrailingIconColor, trailingIconWeight: tagLabelTrailingIconWeight, trailingIconClassName: tagLabelTrailingIconClassName }), _jsx(Title, { className: `${titleClassName} ${styles['title']}`, h1: titleH1, text: title, dark: dark }), subtitle &&
                 _jsx(Subtitle, { className: `${subtitleClassName} ${styles['subtitle']}`, text: subtitle, dark: dark }), buttonLabel &&
                 _jsx(Button, { className: `${buttonClassName} ${styles['button']}`, label: buttonLabel, href: buttonHref, internalHref: buttonInternalHref, target: buttonTarget })] }));
 }

package/dist/components/shared/newsletter-strip/newsletter-strip.d.ts

@@ -1,7 +1,7 @@
 export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading, buttonDisabled, emailValue, onEmailChange, nameValue, onNameChange, }: {
     buttonLabel?: string;
     onButtonClick?: () => void;
-    onFormSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    onFormSubmit?: React.SubmitEventHandler<HTMLFormElement>;
     buttonLoading?: boolean;
     buttonDisabled?: boolean;
     emailValue?: string;

package/dist/components/shared/newsletter-strip/newsletter-strip.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './newsletter-strip.module.scss';
 import scaGradientLogo from '@prosistemas/sca-web-kit/assets/logos/sca/s-blur.svg';
@@ -5,6 +6,7 @@ import newsletterIcon from '@prosistemas/sca-web-kit/assets/icons/newsletter.svg
 import InfoHeader from '../info-header/info-header';
 import Button from '../../ui/button/button';
 import Image from 'next/image';
+import Input from '../../ui/input/input';
 export default function NewsletterStrip({ buttonLabel, onButtonClick, onFormSubmit, buttonLoading = false, buttonDisabled = false, emailValue, onEmailChange, nameValue, onNameChange, }) {
-    return (_jsxs("div", { className: styles['newsletter-strip'], children: [_jsx(Image, { className: styles['icon'], src: newsletterIcon, width: 46, height: 46, alt: '' }), _jsx(InfoHeader, { className: styles['info-header'], titleClassName: styles['title'], subtitleClassName: styles['subtitle'], title: 'Os melhores conte\u00FAdos de tecnologia e fitness', subtitle: 'Assine e receba novidades toda semana em sua caixa de entrada.', dark: true }), _jsxs("form", { className: styles['input-wrapper'], onSubmit: onFormSubmit, children: [_jsx("input", { className: `${styles['name']} `, id: "name", type: "text", name: "text", placeholder: "Insira seu nome", value: nameValue, onChange: onNameChange, required: true }), _jsx("input", { className: `${styles['email']}`, id: "email", type: "email", name: "email", placeholder: "Insira seu e-mail", value: emailValue, onChange: onEmailChange, required: true }), _jsx(Button, { className: styles['button'], label: buttonLabel ?? "Assinar", onClick: onButtonClick, loading: buttonLoading, disabled: buttonDisabled, type: 'submit' }), _jsx("div", { className: styles['blue-hue'] })] }), _jsx("div", { className: styles['background-logo'], children: _jsx(Image, { className: styles['logo'], src: scaGradientLogo, fill: true, alt: '' }) })] }));
+    return (_jsxs("div", { className: styles['newsletter-strip'], children: [_jsx(Image, { className: styles['icon'], src: newsletterIcon, width: 46, height: 46, alt: '' }), _jsx(InfoHeader, { className: styles['info-header'], titleClassName: styles['title'], subtitleClassName: styles['subtitle'], title: 'Os melhores conte\u00FAdos de tecnologia e fitness', subtitle: 'Assine e receba novidades toda semana em sua caixa de entrada.', dark: true }), _jsxs("form", { className: styles['input-wrapper'], onSubmit: onFormSubmit, children: [_jsx(Input, { inputClassName: styles['name'], id: 'name', placeholder: 'Insira seu nome', onChange: onNameChange, required: true }), _jsx(Input, { inputClassName: styles['email'], id: 'email', placeholder: 'Insira seu e-mail', onChange: onEmailChange, required: true }), _jsx(Button, { className: styles['button'], label: buttonLabel ?? "Assinar", loading: buttonLoading, disabled: buttonDisabled, onClick: onButtonClick, type: 'submit' })] }), _jsx("div", { className: styles['background-logo'], children: _jsx(Image, { className: styles['logo'], src: scaGradientLogo, fill: true, alt: '' }) })] }));
 }

package/dist/components/shared/newsletter-strip/newsletter-strip.module.scss

@@ -62,7 +62,6 @@
       height: 56px;
 
       background: white;
-      border: none;
       outline: none;
 
       border-radius: 8px;

package/dist/components/ui/input/input.d.ts

@@ -0,0 +1,16 @@
+import { ChangeEventHandler, HTMLInputTypeAttribute } from 'react';
+export default function Input({ id, label, placeholder, className, inputClassName, defaultValue, autoFocus, required, disabled, error, errorMsg, type, onChange, }: {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    defaultValue?: string;
+    autoFocus?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    errorMsg?: string;
+    type?: HTMLInputTypeAttribute;
+    onChange?: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/input/input.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './input.module.scss';
+import { EyeIcon, EyeSlashIcon } from '@phosphor-icons/react/dist/ssr';
+import { useState } from 'react';
+export default function Input({ id, label, placeholder, className, inputClassName, defaultValue, autoFocus, required, disabled, error, errorMsg, type = 'text', onChange, }) {
+    const [inputType, setInputType] = useState(type);
+    return (_jsxs("div", { className: `${styles['input-wrapper']}  ${className}`, children: [label &&
+                _jsx("label", { className: styles['label'], children: label }), _jsxs("div", { className: styles['wrapper'], children: [_jsx("input", { id: id, className: `
+            ${styles['input']}
+            ${styles[type]}
+            ${inputClassName}
+            ${error && styles['input-error']}
+          `, placeholder: placeholder, autoFocus: autoFocus, required: required, disabled: disabled, defaultValue: defaultValue, type: inputType, onChange: onChange }), type === 'password' &&
+                        _jsxs("button", { className: styles['reveal-password'], onClick: () => {
+                                if (inputType === 'text')
+                                    setInputType('password');
+                                else
+                                    setInputType('text');
+                            }, children: [inputType === 'password' && _jsx(EyeSlashIcon, { className: styles['icon'], size: 22.5 }), inputType === 'text' && _jsx(EyeIcon, { className: styles['icon'], size: 22.5 })] })] }), error && errorMsg &&
+                _jsx("p", { className: styles['error-message'], children: errorMsg })] }));
+}

package/dist/components/ui/input/input.module.scss

@@ -0,0 +1,82 @@
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  min-width: 0;
+
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--neutral500);
+    line-height: 150%;
+    min-width: 0;
+  }
+
+  .wrapper {
+    position: relative;
+
+    .input {
+      width: 100%;
+
+      font-family: Inter;
+      outline: none;
+      min-width: 0;
+
+      padding: 16px 24px;
+      border: 1px solid var(--light200);
+      border-radius: 8px;
+
+      transition: border .3s;
+    }
+
+    .input-error {
+      border: 1px solid var(--auxiliary-red);
+    }
+
+    .input:hover {
+      border: 1px solid var(--auxiliary-orange);
+    }
+
+    .input::placeholder {
+      font-size: 14px;
+      font-weight: 400;
+      color: #A6A5C3;
+      line-height: 150%;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+
+    .input:focus {
+      border: 1px solid var(--light200);
+    }
+
+    .password {
+      padding-right: 48px;
+    }
+
+    .reveal-password {
+      all: unset;
+
+      width: 22.5px;
+      height: 22.5px;
+
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      cursor: pointer;
+
+      .icon {
+        color: var(--neutral400);
+      }
+    }
+  }
+
+  .error-message {
+    color: var(--auxiliary-red);
+    font-size: 14px;
+    font-weight: 500;
+  }
+}

package/dist/components/ui/tag-label/tag-label.d.ts

@@ -1,8 +1,11 @@
 import { IconProps, IconWeight } from '@phosphor-icons/react';
+import { HTMLAttributeAnchorTarget } from 'react';
 interface TagLabelProps {
     label: string;
     className?: string;
     dark?: boolean;
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
     leadingIcon?: React.ComponentType<IconProps>;
     leadingIconSize?: number;
     leadingIconColor?: string;
@@ -14,5 +17,5 @@ interface TagLabelProps {
     trailingIconWeight?: IconWeight;
     trailingIconClassName?: string;
 }
-export default function TagLabel({ label, className, dark, leadingIcon: LeadingIcon, leadingIconSize, leadingIconColor, leadingIconWeight, leadingIconClassName, trailingIcon: TrailingIcon, trailingIconSize, trailingIconColor, trailingIconWeight, trailingIconClassName, }: TagLabelProps): import("react/jsx-runtime").JSX.Element;
+export default function TagLabel({ label, className, dark, href, target, leadingIcon: LeadingIcon, leadingIconSize, leadingIconColor, leadingIconWeight, leadingIconClassName, trailingIcon: TrailingIcon, trailingIconSize, trailingIconColor, trailingIconWeight, trailingIconClassName, }: TagLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/tag-label/tag-label.js

@@ -1,15 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './tag-label.module.scss';
 import { montserrat } from '../../../fonts';
-export default function TagLabel({ label, className, dark, leadingIcon: LeadingIcon, leadingIconSize, leadingIconColor, leadingIconWeight, leadingIconClassName, trailingIcon: TrailingIcon, trailingIconSize, trailingIconColor, trailingIconWeight, trailingIconClassName, }) {
-    const darkStyle = !dark ? {} : {
-        border: '1px solid var(--dark900)',
-        background: 'var(--dark800)',
-        color: 'white',
-    };
-    return (_jsxs("div", { style: darkStyle, className: `${styles['tag-label']} ${montserrat.className} ${className}`, children: [LeadingIcon && (
+import Link from 'next/link';
+export default function TagLabel({ label, className, dark, href, target, leadingIcon: LeadingIcon, leadingIconSize, leadingIconColor, leadingIconWeight, leadingIconClassName, trailingIcon: TrailingIcon, trailingIconSize, trailingIconColor, trailingIconWeight, trailingIconClassName, }) {
+    const content = (_jsxs(_Fragment, { children: [LeadingIcon && (
             // Ícone da esquerda
             _jsx(LeadingIcon, { size: leadingIconSize, color: leadingIconColor, weight: leadingIconWeight, className: leadingIconClassName })), label, TrailingIcon && (
             // Ícone da direita
             _jsx(TrailingIcon, { size: trailingIconSize, color: trailingIconColor, weight: trailingIconWeight, className: trailingIconClassName }))] }));
+    if (href)
+        return (_jsx(Link, { href: href, target: target, className: `
+          ${styles['tag-label']}
+          ${styles['link']}
+          ${montserrat.className}
+          ${className}
+          ${dark && styles['dark']}
+        `, children: content }));
+    return (_jsx("div", { className: `
+        ${styles['tag-label']}
+        ${montserrat.className}
+        ${className}
+        ${dark && styles['dark']}
+      `, children: content }));
 }

package/dist/components/ui/tag-label/tag-label.module.scss

@@ -14,4 +14,20 @@
   color: var(--dark700);
   font-size: 14px;
   font-weight: 600;
+
+  transition: border .3s;
+}
+
+.link:hover {
+  border: 1px solid var(--light400);
+}
+
+.dark {
+  border: 1px solid var(--dark900);
+  background: var(--dark800);
+  color: white;
+}
+
+.dark:hover {
+  border: 1px solid var(--dark900);
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import './styles/variables.scss';
+export { default as Input } from './components/ui/input/input';
 export { default as Title } from './components/ui/title/title';
 export { default as Button } from './components/ui/button/button';
 export { default as Subtitle } from './components/ui/subtitle/subtitle';

package/dist/index.js

@@ -1,5 +1,6 @@
 import './styles/variables.scss';
 // UI
+export { default as Input } from './components/ui/input/input';
 export { default as Title } from './components/ui/title/title';
 export { default as Button } from './components/ui/button/button';
 export { default as Subtitle } from './components/ui/subtitle/subtitle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prosistemas/sca-web-kit",
-  "version": "3.3.12",
+  "version": "3.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.10",
-    "@prosistemas/sca-web-kit": "^3.3.8",
+    "@prosistemas/sca-web-kit": "^3.3.12",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -25,12 +25,12 @@
     "react-spinners": "^0.17.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.3",
-    "@types/node": "^20.19.31",
-    "@types/react": "^19.2.11",
+    "@eslint/eslintrc": "^3.3.5",
+    "@types/node": "^20.19.37",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "eslint-config-next": "15.2.2",
     "typescript": "^5.9.3"
   },