@prosistemas/sca-web-kit 1.0.0

package/dist/components/shared/support-sticky-button/support-sticky-button.module.scss

@@ -0,0 +1,63 @@
+.support-sticky-button {
+  cursor: pointer;
+
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+
+  z-index: 5;
+  border-radius: 8px 8px 2px 8px;
+  padding: 12px;
+  background: var(--auxiliary-orange);
+
+  display: flex;
+  align-items: center;
+  gap: 32px;
+
+  transition: background .3s;
+
+  @media (max-width: 425px) {
+    // TODO: Ver se vai fazer isso mobile (insany não fez)
+    display: none;
+  }
+
+  .left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .person-wrapper {
+      overflow: hidden;
+      position: relative;
+
+      width: 32px;
+      height: 32px;
+
+      background: white;
+      border-radius: 50%;
+
+      .person {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+
+      }
+    }
+
+    .text {
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.support-sticky-button:hover {
+  background: var(--auxiliary-red);
+}

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

@@ -0,0 +1,4 @@
+export default function StyledAccordion({ question, answer, }: {
+    question: string;
+    answer: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/accordion/accordion.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './accordion.module.scss';
+import * as Accordion from '@radix-ui/react-accordion';
+import { MinusIcon, PlusIcon } from '@phosphor-icons/react/dist/ssr';
+export default function StyledAccordion({ question, answer, }) {
+    return (_jsx(Accordion.Root, { type: "single", collapsible: true, className: styles['accordion'], children: _jsxs(Accordion.Item, { value: "item-1", children: [_jsxs(Accordion.Header, { className: styles['accordion-header'], children: [question, _jsxs(Accordion.Trigger, { className: styles['trigger'], "aria-label": 'Bot\u00E3o para encolher ou expandir a pergunta frequente', children: [_jsx(PlusIcon, { size: 20, color: 'white', weight: 'bold', className: styles['plus'] }), _jsx(MinusIcon, { size: 20, color: 'white', weight: 'bold', className: styles['minus'] })] })] }), _jsx(Accordion.Content, { className: styles['answer'], children: answer })] }) }));
+}

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

@@ -0,0 +1,114 @@
+.accordion {
+  width: 100%;
+  min-height: 90px;
+
+  color: var(--neutral500);
+  font-size: 16px;
+  background: var(--neutral100);
+  border-radius: 16px;
+  padding: 32px;
+
+  overflow: hidden;
+
+  @media (max-width: 425px) {
+    padding: 24px;
+  }
+
+  .accordion-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 64px;
+
+    @media (max-width: 425px) {
+      gap: 32px;
+    }
+
+    @media (max-width: 375px) {
+      gap: 24px;
+      font-size: 16px;
+    }
+
+    .trigger {
+      min-width: 32px;
+      min-height: 32px;
+      background: var(--auxiliary-orange);
+      border: none;
+      border-radius: 50%;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      position: relative;
+
+      .plus,
+      .minus {
+        position: absolute;
+        transition: opacity 0.3s;
+      }
+    }
+
+    .trigger[data-state="open"] {
+      .plus {
+        opacity: 0;
+      }
+
+      .minus {
+        opacity: 1;
+      }
+    }
+
+    .trigger[data-state="closed"] {
+      .plus {
+        opacity: 1;
+      }
+
+      .minus {
+        opacity: 0;
+      }
+    }
+  }
+
+  .answer {
+    font-size: 14px;
+    color: var(--neutral400);
+    margin-top: 16px;
+  }
+
+  .answer[data-state="open"] {
+    animation: slideDown 300ms ease-in-out;
+  }
+
+  .answer[data-state="closed"] {
+    animation: slideUp 300ms ease-out;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+    opacity: 0;
+    margin-top: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+    opacity: 1;
+    margin-top: 16px;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    height: var(--radix-accordion-content-height);
+    margin-top: 16px;
+  }
+
+  to {
+    height: 0;
+    opacity: 0;
+    margin-top: 0;
+  }
+}

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

@@ -0,0 +1,34 @@
+import { IconProps, IconWeight } from '@phosphor-icons/react';
+interface ButtonProps {
+    label?: string;
+    className?: string;
+    loading?: boolean;
+    loadingSize?: number;
+    loadingColor?: string;
+    loadingClassName?: string;
+    icon?: React.ComponentType<IconProps>;
+    iconSize?: number;
+    iconColor?: string;
+    iconWeight?: IconWeight;
+    iconClassName?: string;
+    leadingIcon?: React.ComponentType<IconProps>;
+    leadingIconSize?: number;
+    leadingIconColor?: string;
+    leadingIconWeight?: IconWeight;
+    leadingIconClassName?: string;
+    trailingIcon?: React.ComponentType<IconProps>;
+    trailingIconSize?: number;
+    trailingIconColor?: string;
+    trailingIconWeight?: IconWeight;
+    trailingIconClassName?: string;
+    href?: string;
+    internalHref?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    type?: "button" | "submit" | "reset";
+    round?: boolean;
+    onClick?: () => void;
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+export default function Button({ label, className, loading, loadingSize, loadingColor, loadingClassName, icon: Icon, iconSize, iconColor, iconWeight, iconClassName, leadingIcon: LeadingIcon, leadingIconSize, leadingIconColor, leadingIconWeight, leadingIconClassName, trailingIcon: TrailingIcon, trailingIconSize, trailingIconColor, trailingIconWeight, trailingIconClassName, href, internalHref, target, type, round, onClick, ariaLabel, disabled, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/button/button.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './button.module.scss';
+import { inter } from '../../../fonts';
+import { PulseLoader } from 'react-spinners';
+import Link from 'next/link';
+export default function Button({ label, className, 
+// Carregando (overwrite no ícone/label central caso true)
+loading = false, loadingSize = 5, loadingColor = 'white', loadingClassName, 
+// Ícone central
+icon: Icon, iconSize, iconColor, iconWeight, iconClassName, 
+// Ícone da esquerda
+leadingIcon: LeadingIcon, leadingIconSize, leadingIconColor, leadingIconWeight, leadingIconClassName, 
+// Ícone da direita 
+trailingIcon: TrailingIcon, trailingIconSize, trailingIconColor, trailingIconWeight, trailingIconClassName, 
+// Etc
+href, internalHref, target, type, round = false, onClick, ariaLabel, disabled = false, }) {
+    const button = (_jsxs("button", { onClick: onClick, type: type, disabled: disabled, "aria-label": ariaLabel, className: `${styles['button']} ${className}`, style: {
+            borderRadius: round ? '50%' : '8px',
+            padding: round ? '8px' : '16px 42px',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+        }, children: [LeadingIcon && (
+            // Ícone da esquerda
+            _jsx(LeadingIcon, { size: leadingIconSize, color: leadingIconColor, weight: leadingIconWeight, className: leadingIconClassName })), loading ?
+                _jsx(PulseLoader, { size: loadingSize, color: loadingColor, className: loadingClassName })
+                : Icon ? (
+                // Ícone central ou label
+                _jsx(Icon, { size: iconSize, color: iconColor, weight: iconWeight, className: iconClassName })) : (_jsx("p", { className: inter.className, children: label })), TrailingIcon && (
+            // Ícone da direita
+            _jsx(TrailingIcon, { size: trailingIconSize, color: trailingIconColor, weight: trailingIconWeight, className: trailingIconClassName }))] }));
+    return href ? _jsx("a", { href: href, target: target, children: button }) : internalHref ? _jsx(Link, { href: internalHref, target: target, children: button }) : button;
+}

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

@@ -0,0 +1,22 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  border: none;
+  outline: none;
+
+  background: var(--auxiliary-orange);
+  border-radius: 8px;
+  cursor: pointer;
+
+  color: #fff;
+  font-size: 16px;
+  font-variation-settings: 'wght' 600;
+  transition: background 0.3s, border 0.3s, opacity 0.3s;
+}
+
+.button:hover {
+  background: var(--auxiliary-red);
+}

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

@@ -0,0 +1,6 @@
+export default function Decal({ className, opacity, width, color, }: {
+    className?: string;
+    opacity?: string;
+    width?: string;
+    color?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/decal/decal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './decal.module.scss';
+export default function Decal({ className, opacity, width, color, }) {
+    return (_jsx("div", { className: `${styles['decal']} ${className}`, style: {
+            opacity: opacity ? opacity : '1',
+            width: width ? width : '50px',
+            background: color ? color : '',
+        } }));
+}

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

@@ -0,0 +1,7 @@
+.decal {
+  width: 50px;
+  height: 5px;
+
+  border-radius: 50px;
+  background: var(--neutral300);
+}

package/dist/components/ui/icon-with-background/icon-with-background.d.ts

@@ -0,0 +1,13 @@
+import { IconProps, IconWeight } from '@phosphor-icons/react';
+export default function IconWithBackground({ icon: Icon, className, iconClassName, iconSize, iconColor, alt, weight, round, dark, size, }: {
+    icon: React.ComponentType<IconProps> | string;
+    className?: string;
+    iconClassName?: string;
+    iconSize?: number;
+    iconColor?: string;
+    alt?: string;
+    weight?: IconWeight;
+    round?: boolean;
+    dark?: boolean;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/icon-with-background/icon-with-background.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './icon-with-background.module.scss';
+import Image from 'next/image';
+export default function IconWithBackground({ icon: Icon, className = '', iconClassName = '', iconSize, iconColor, alt = "Ícone sem descrição", weight = 'regular', round = false, dark = false, size = 32, }) {
+    if (typeof Icon === 'string') {
+        return (_jsx("div", { className: `
+          ${styles['background']} 
+          ${className} 
+          ${round ? styles['round'] : ''}
+          ${dark ? styles['dark'] : ''}
+        `, children: _jsx(Image, { src: Icon, alt: alt, width: iconSize, height: iconSize, color: iconColor }) }));
+    }
+    return (_jsx("div", { className: `
+        ${styles['background']} 
+        ${className} 
+        ${round ? styles['round'] : ''}
+        ${dark ? styles['dark'] : ''}
+      `, style: {
+            width: size ? `${size}px` : '32px',
+            height: size ? `${size}px` : '32px',
+        }, children: _jsx(Icon, { className: iconClassName, size: iconSize, weight: weight, color: iconColor }) }));
+}

package/dist/components/ui/icon-with-background/icon-with-background.module.scss

@@ -0,0 +1,18 @@
+.background {
+  background-color: var(--light100);
+  width: 32px;
+  height: 32px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.round {
+  border-radius: 50%;
+}
+
+.dark {
+  background: var(--dark800);
+  color: white;
+}

package/dist/components/ui/progress-bar/progress-bar.d.ts

@@ -0,0 +1,5 @@
+export default function ProgressBar({ className, progressWidth, progressHeight, }: {
+    className?: string;
+    progressWidth?: string;
+    progressHeight?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/progress-bar/progress-bar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './progress-bar.module.scss';
+export default function ProgressBar({ className, progressWidth, progressHeight, }) {
+    const widthStyle = {
+        width: progressWidth ? progressWidth : "0%",
+        height: progressHeight ? progressHeight : "8px",
+    };
+    return (_jsx("div", { className: `${styles['progress-bar']} ${className}`, children: _jsx("div", { className: `${styles['progress']}`, style: widthStyle }) }));
+}

package/dist/components/ui/progress-bar/progress-bar.module.scss

@@ -0,0 +1,12 @@
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: var(--neutral200);
+  border-radius: 6px;
+
+  .progress {
+    background-color: var(--light300);
+    height: 8px;
+    border-radius: 6px;
+  }
+}

package/dist/components/ui/pulse-effect/pulse-effect.d.ts

@@ -0,0 +1 @@
+export default function PulseEffect(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/pulse-effect/pulse-effect.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './pulse-effect.module.scss';
+export default function PulseEffect() {
+    return (_jsxs("div", { className: styles["pulse-effect"], children: [_jsx("div", { className: styles["pulse-ring"] }), _jsx("div", { className: styles["pulse-ring"] }), _jsx("div", { className: styles["pulse-ring"] }), _jsx("div", { className: styles["pulse-ring"] }), _jsx("div", { className: styles["pulse-ring"] }), _jsx("div", { className: styles["pulse-ring"] })] }));
+}

package/dist/components/ui/pulse-effect/pulse-effect.module.scss

@@ -0,0 +1,63 @@
+.pulse-effect {
+  z-index: 0;
+  will-change: transform, opacity;
+  transform: translateZ(0);
+  position: absolute;
+  width: 661px;
+  height: 661px;
+  color: #a47c48;
+  font-size: 4em;
+  border-radius: 50%;
+  opacity: 0.8;
+
+  .pulse-ring {
+    position: absolute;
+    left: -15px;
+    right: -15px;
+    top: -15px;
+    bottom: -15px;
+    opacity: 0;
+    border: 1px solid var(--light500);
+    border-radius: 50%;
+    animation: pulse 12s linear infinite;
+  }
+
+  .pulse-ring:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  .pulse-ring:nth-child(2) {
+    animation-delay: 2s;
+  }
+
+  .pulse-ring:nth-child(3) {
+    animation-delay: 4s;
+  }
+
+  .pulse-ring:nth-child(4) {
+    animation-delay: 6s;
+  }
+
+  .pulse-ring:nth-child(5) {
+    animation-delay: 8s;
+  }
+
+  .pulse-ring:nth-child(6) {
+    animation-delay: 10s;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.5;
+  }
+
+  65% {
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(3);
+  }
+}

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

@@ -0,0 +1 @@
+export default function Stacks(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/stacks/stacks.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './stacks.module.scss';
+export default function Stacks() {
+    return (_jsxs("div", { className: styles['stack'], children: [_jsx("div", { className: styles['inner-stack'] }), _jsx("div", { className: styles['mid-stack'] }), _jsx("div", { className: styles['outer-stack'] })] }));
+}

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

@@ -0,0 +1,32 @@
+.stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 100%;
+
+  .inner-stack,
+  .mid-stack,
+  .outer-stack {
+    border: 1px solid var(--light600);
+    border-bottom: none;
+    border-radius: 7px 7px 0 0;
+  }
+
+  .inner-stack {
+    width: 95%;
+    height: 10px;
+    opacity: 0.2;
+  }
+
+  .mid-stack {
+    width: 97.5%;
+    height: 16px;
+    opacity: 0.5;
+  }
+
+  .outer-stack {
+    width: 100%;
+    height: 95px;
+  }
+}

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

@@ -0,0 +1,5 @@
+export default function Subtitle({ text, className, dark, }: {
+    text: string;
+    className?: string;
+    dark?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/subtitle/subtitle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './subtitle.module.scss';
+export default function Subtitle({ text, className, dark = false, }) {
+    return (_jsx("p", { className: `${styles['subtitle']} ${className}`, style: {
+            color: dark ? 'var(--neutral100)' : 'var(--neutral600)',
+        }, children: text }));
+}

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

@@ -0,0 +1,8 @@
+  .subtitle {
+    color: var(--neutral600);
+    font-weight: 400;
+
+    @media (max-width: 768px) {
+      font-size: 14px;
+    }
+  }

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

@@ -0,0 +1,18 @@
+import { IconProps, IconWeight } from '@phosphor-icons/react';
+interface TagLabelProps {
+    label: string;
+    className?: string;
+    dark?: boolean;
+    leadingIcon?: React.ComponentType<IconProps>;
+    leadingIconSize?: number;
+    leadingIconColor?: string;
+    leadingIconWeight?: IconWeight;
+    leadingIconClassName?: string;
+    trailingIcon?: React.ComponentType<IconProps>;
+    trailingIconSize?: number;
+    trailingIconColor?: string;
+    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 {};

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, 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 && (
+            // Í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 }))] }));
+}

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

@@ -0,0 +1,17 @@
+.tag-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+
+  background: var(--light100);
+  width: fit-content;
+
+  padding: 8px 16px;
+  border: 1px solid var(--light200);
+  border-radius: 50px;
+
+  color: var(--dark700);
+  font-size: 14px;
+  font-weight: 600;
+}

package/dist/components/ui/three-dots/three-dots.d.ts

@@ -0,0 +1,3 @@
+export default function ThreeDots({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/three-dots/three-dots.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './three-dots.module.scss';
+export default function ThreeDots({ className }) {
+    return (_jsxs("div", { className: `${styles['dots']} ${className}`, children: [_jsx("div", { className: styles['dot1'] }), _jsx("div", { className: styles['dot2'] }), _jsx("div", { className: styles['dot3'] })] }));
+}

package/dist/components/ui/three-dots/three-dots.module.scss

@@ -0,0 +1,28 @@
+.dots {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 7px;
+  padding-left: 20px;
+
+  .dot1,
+  .dot2,
+  .dot3 {
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    background: var(--neutral000);
+  }
+
+  .dot1 {
+    opacity: 0.8;
+  }
+
+  .dot2 {
+    opacity: 0.6;
+  }
+
+  .dot3 {
+    opacity: 0.4;
+  }
+}

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

@@ -0,0 +1,8 @@
+export default function Title({ text, className, fontSize, fontWeight, dark, id, }: {
+    text: string;
+    className?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    dark?: boolean;
+    id?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/title/title.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './title.module.scss';
+import { montserrat } from '../../../fonts';
+export default function Title({ text, className, fontSize, fontWeight, dark = false, id, }) {
+    return (_jsx("h1", { id: id, className: `${styles['title']} ${className} ${montserrat.className}`, style: {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            color: dark ? `var(--neutral100)` : `var(--neutral700)`,
+        }, children: text }));
+}

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

@@ -0,0 +1,8 @@
+  .title {
+    font-size: 32px;
+    font-weight: 600;
+
+    @media (max-width: 768px) {
+      font-size: 24px;
+    }
+  }