@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

package/src/components/atoms/Checkbox/Checkbox.styles.ts

@@ -1,88 +0,0 @@
-import styled from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-  semanticBorders,
-} from '../../../styles/tokens';
-
-export const CheckboxWrapper = styled.label`
-  display: flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  width: fit-content;
-`;
-
-export const StyledCheckbox = styled.input`
-  width: ${semanticSizes.global.padding.xl};
-  height: ${semanticSizes.global.padding.xl};
-  border: ${semanticBorders.global.sm} solid ${semanticColors.neutral[200]};
-  border-radius: ${semanticRadius.global.radius.sm};
-  appearance: none;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s ease-in-out;
-  background: ${semanticColors.base.background};
-  flex-shrink: 0;
-  margin: 0;
-
-  &:checked {
-    background: ${semanticColors.branding.surface.enabled};
-    border-color: ${semanticColors.branding.border.enabled};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    background: ${semanticColors.global.surface.disabled};
-  }
-`;
-
-export const CheckboxIconWrapper = styled.div<{ active: boolean }>`
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: ${semanticSizes.global.padding.xl};
-  height: ${semanticSizes.global.padding.xl};
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  opacity: ${({ active }) => (active ? 1 : 0)};
-  transform: ${({ active }) => (active ? 'scale(1)' : 'scale(0.5)')};
-
-  svg {
-    color: ${semanticColors.base.background};
-  }
-`;
-
-export const CheckboxLabel = styled.span`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.base.text};
-  line-height: 1;
-`;
-
-export const CheckboxGroupWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.sm};
-`;
-
-export const CheckboxGroupHorizontal = styled(CheckboxGroupWrapper)`
-  flex-direction: row;
-  flex-wrap: wrap;
-`;
-
-export const SelectAllWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.sm};
-  font-weight: bold;
-  font-size: ${typographyTokens.fontSizes.labelS};
-`;

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { Check, Minus } from '@phosphor-icons/react'; // Adicionado Minus
-import {
-  CheckboxWrapper,
-  StyledCheckbox,
-  CheckboxLabel,
-  CheckboxIconWrapper,
-} from './Checkbox.styles';
-import { CheckboxProps } from './Checkbox.types';
-
-export const Checkbox: React.FC<CheckboxProps> = ({
-  label,
-  checked,
-  indeterminate,
-  onChange,
-  disabled = false,
-  ...props
-}) => {
-  const isActive = checked || indeterminate;
-
-  return (
-    <CheckboxWrapper>
-      <StyledCheckbox
-        type="checkbox"
-        checked={isActive}
-        onChange={onChange}
-        disabled={disabled}
-        {...props}
-      />
-      {isActive && (
-        <CheckboxIconWrapper active={isActive}>
-          {indeterminate ? (
-            <Minus size={12} weight="bold" />
-          ) : (
-            <Check size={12} weight="bold" />
-          )}
-        </CheckboxIconWrapper>
-      )}
-      {label && <CheckboxLabel>{label}</CheckboxLabel>}
-    </CheckboxWrapper>
-  );
-};

package/src/components/atoms/Checkbox/Checkbox.types.ts

@@ -1,14 +0,0 @@
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  checked?: boolean;
-  indeterminate?: boolean;
-  onChange?: () => void;
-  disabled?: boolean;
-}
-
-export interface CheckboxGroupProps {
-  options: { label: string; value: string }[];
-  selected: string[];
-  setSelected: (values: string[]) => void;
-  direction?: 'vertical' | 'horizontal';
-}

package/src/components/atoms/Checkbox/CheckboxGroup.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Checkbox } from './Checkbox';
-import { CheckboxGroupProps } from './Checkbox.types';
-import {
-  CheckboxGroupWrapper,
-  CheckboxGroupHorizontal,
-} from './Checkbox.styles';
-
-export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
-  options,
-  selected,
-  setSelected,
-  direction = 'vertical',
-}) => {
-  const handleChange = (value: string) => {
-    const newSelected = selected.includes(value)
-      ? selected.filter((v: string) => v !== value)
-      : [...selected, value];
-    setSelected(newSelected);
-  };
-
-  const Wrapper =
-    direction === 'horizontal' ? CheckboxGroupHorizontal : CheckboxGroupWrapper;
-
-  return (
-    <Wrapper>
-      {options.map((option) => (
-        <Checkbox
-          key={option.value}
-          label={option.label}
-          checked={selected.includes(option.value)}
-          onChange={() => handleChange(option.value)}
-        />
-      ))}
-    </Wrapper>
-  );
-};

package/src/components/atoms/Checkbox/CheckboxSelectAll.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Checkbox } from './Checkbox';
-import { CheckboxGroup } from './CheckboxGroup';
-import { CheckboxGroupProps } from './Checkbox.types';
-import { SelectAllWrapper } from './Checkbox.styles';
-
-export const CheckboxSelectAll: React.FC<CheckboxGroupProps> = ({
-  options,
-  selected,
-  setSelected,
-}) => {
-  const allSelected = selected.length === options.length;
-
-  const handleSelectAll = () => {
-    setSelected(allSelected ? [] : options.map((option) => option.value));
-  };
-
-  return (
-    <SelectAllWrapper>
-      <Checkbox
-        label="Selecionar todos"
-        checked={allSelected}
-        onChange={handleSelectAll}
-      />
-      <CheckboxGroup
-        options={options}
-        selected={selected}
-        setSelected={setSelected}
-      />
-    </SelectAllWrapper>
-  );
-};

package/src/components/atoms/CodeInput/CodeInput.styles.tsx

@@ -1,38 +0,0 @@
-import {
-  primitiveSizes,
-  semanticBorders,
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-import { styled } from 'styled-components';
-
-const borderColor = semanticColors.global.border.strong;
-const inputWidth = semanticSizes.global.spacings.lg;
-const inputHeight = primitiveSizes.size.x14;
-const fontSize = typographyTokens.fontSizes.labelL;
-const borderRadius = semanticRadius.global.radius.md;
-const borderStyle = semanticBorders.global.sm;
-
-export const StyledCodeInput = styled.input`
-  width: ${inputWidth};
-  height: ${inputHeight};
-  font-size: ${fontSize};
-  text-align: center;
-  border-top: ${borderStyle} solid ${borderColor};
-  border-bottom: ${borderStyle} solid ${borderColor};
-  border-left: 0;
-  border-right: ${borderStyle} solid ${borderColor};
-
-  &:first-child {
-    border-top-left-radius: ${borderRadius};
-    border-bottom-left-radius: ${borderRadius};
-    border-left: ${borderStyle} solid ${borderColor};
-  }
-
-  &:last-child {
-    border-top-right-radius: ${borderRadius};
-    border-bottom-right-radius: ${borderRadius};
-  }
-`;

package/src/components/atoms/CodeInput/CodeInput.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { StyledCodeInput } from './CodeInput.styles';
-import { CodeInputProps } from './CodeInput.types';
-
-const CodeInput = React.forwardRef<HTMLInputElement, CodeInputProps>(
-  ({ ...props }, ref) => {
-    return <StyledCodeInput ref={ref} type="text" {...props} />;
-  }
-);
-
-CodeInput.displayName = 'CodeInput';
-
-export default CodeInput;

package/src/components/atoms/CodeInput/CodeInput.types.ts

@@ -1,3 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-
-export type CodeInputProps = InputHTMLAttributes<HTMLInputElement>;

package/src/components/atoms/DatePickerInput/DatePicker.styles.ts

@@ -1,75 +0,0 @@
-// DatePicker.styles.ts
-import { createGlobalStyle, styled } from 'styled-components';
-import ReactDatePicker, {
-  DatePickerProps,
-  registerLocale,
-} from 'react-datepicker';
-import { ptBR } from 'date-fns/locale';
-import {
-  semanticColors,
-  semanticRadius,
-  typographyTokens,
-  semanticSizes,
-} from '../../../styles/tokens';
-
-// register Portuguese‐Brazil locale
-registerLocale('pt-BR', ptBR);
-
-// 1) Global overrides for the popup calendar:
-export const DatePickerGlobalStyles = createGlobalStyle`
-  .react-datepicker {
-    background: ${semanticColors.base.background};
-    border: 1px solid ${semanticColors.neutral[300]};
-    border-radius: ${semanticRadius.global.radius.md};
-    font-family: inherit;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  }
-
-  .react-datepicker__header {
-    background: ${semanticColors.neutral[100]};
-    border-bottom: none;
-    border-top-left-radius: ${semanticRadius.global.radius.md};
-    border-top-right-radius: ${semanticRadius.global.radius.md};
-    padding: ${semanticSizes.global.padding.sm};
-  }
-
-  .react-datepicker__current-month {
-    font-size: ${typographyTokens.fontSizes.bodyM};
-    color: ${semanticColors.base.text};
-  }
-
-  .react-datepicker__day-name,
-  .react-datepicker__day {
-    width: 2rem;
-    line-height: 2rem;
-    margin: 0.1rem;
-  }
-
-  .react-datepicker__day--selected {
-    background-color: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.base.background};
-    border-radius: 50%;
-  }
-
-  .react-datepicker__triangle {
-    display: none;
-  }
-`;
-
-// 2) Styled input only:
-export const StyledDatePicker = styled(
-  ReactDatePicker as unknown as React.ComponentType<DatePickerProps>
-)`
-  width: 100%;
-  padding: 0.75rem ${semanticSizes.global.padding.md};
-  border: 1px solid ${semanticColors.neutral[300]};
-  border-radius: ${semanticRadius.global.radius.md};
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  color: ${semanticColors.base.text};
-
-  &:focus {
-    outline: none;
-    border-color: ${semanticColors.branding.surface.enabled};
-    box-shadow: 0 0 0 2px ${semanticColors.branding.surface.enabled}33;
-  }
-`;

package/src/components/atoms/DatePickerInput/DatePickerInput.tsx

@@ -1,154 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { DatePickerGlobalStyles, StyledDatePicker } from './DatePicker.styles';
-import 'react-datepicker/dist/react-datepicker.css';
-import { parse, isValid, format } from 'date-fns';
-
-export interface DatePickerInputProps {
-  mode?: 'single' | 'range';
-  selected: Date | [Date, Date];
-  onChange: (date: Date | [Date, Date]) => void;
-  minDate?: Date;
-  maxDate?: Date;
-  placeholder?: string;
-  [key: string]: any;
-}
-
-const DF = 'dd/MM/yyyy';
-
-// ---------- helpers de parse/format ----------
-function parseBRDate(s: string): Date | null {
-  const d = parse(s, DF, new Date());
-  return isValid(d) ? d : null;
-}
-
-function maskDateDigits(digits: string) {
-  let v = digits.replace(/\D/g, '').slice(0, 8);
-  if (v.length >= 5) v = v.replace(/^(\d{2})(\d{2})(\d{0,4}).*/, '$1/$2/$3');
-  else if (v.length >= 3) v = v.replace(/^(\d{2})(\d{0,2}).*/, '$1/$2');
-  return v;
-}
-
-function autoMaskSingle(input: string) {
-  const digits = input.replace(/\D/g, '');
-  return maskDateDigits(digits);
-}
-
-function autoMaskRange(input: string) {
-  const parts = input.split(/\s*[-–]\s*/);
-  const left = autoMaskSingle(parts[0] || '');
-  const right = autoMaskSingle(parts[1] || '');
-  return right ? `${left} - ${right}` : left;
-}
-
-function tryCommitSingle(value: string): Date | null {
-  return parseBRDate(value);
-}
-
-function tryCommitRange(value: string): [Date | null, Date | null] {
-  const [a, b] = value.split(/\s*[-–]\s*/);
-  return [a ? parseBRDate(a) : null, b ? parseBRDate(b) : null];
-}
-
-// Tipo que o StyledDatePicker espera em onChangeRaw
-type RawEvt =
-  | React.MouseEvent<HTMLElement>
-  | React.KeyboardEvent<HTMLElement>
-  | undefined;
-
-// Extrai com segurança o input do evento (alvo pode não ser input diretamente)
-function getInputFromRawEvent(e: RawEvt): HTMLInputElement | null {
-  const target = e?.target as HTMLElement | undefined;
-  if (!target) return null;
-  if (target instanceof HTMLInputElement) return target;
-  const input = target.closest('input');
-  return (input as HTMLInputElement) || null;
-}
-
-export const DatePickerInput: React.FC<DatePickerInputProps> = ({
-  mode = 'single',
-  selected,
-  onChange,
-  minDate,
-  maxDate,
-  placeholder,
-  ...rest
-}) => {
-  // SINGLE
-  const handleChangeRawSingle = (e: RawEvt) => {
-    const el = getInputFromRawEvent(e);
-    if (!el) return;
-    el.value = autoMaskSingle(el.value);
-  };
-
-  const handleBlurSingle = (e: React.FocusEvent<HTMLInputElement>) => {
-    const el = e.target;
-    const d = tryCommitSingle(el.value);
-    if (d) {
-      el.value = format(d, DF);
-      onChange(d);
-    }
-  };
-
-  // RANGE
-  const handleChangeRawRange = (e: RawEvt) => {
-    const el = getInputFromRawEvent(e);
-    if (!el) return;
-    el.value = autoMaskRange(el.value);
-  };
-
-  const handleBlurRange = (e: React.FocusEvent<HTMLInputElement>) => {
-    const el = e.target;
-    const [d1, d2] = tryCommitRange(el.value);
-
-    if (d1) {
-      const oldRight = Array.isArray(selected) ? selected[1] : undefined;
-      const payload: [Date, Date] = [d1, (d2 || (oldRight as Date)) as Date];
-      const left = format(d1, DF);
-      const right = d2 ? format(d2, DF) : '';
-      el.value = right ? `${left} - ${right}` : left;
-      onChange(payload);
-    }
-  };
-
-  return (
-    <>
-      <DatePickerGlobalStyles />
-
-      {mode === 'range' ? (
-        <StyledDatePicker
-          locale="pt-BR"
-          selectsRange
-          startDate={(selected as [Date, Date])[0] || undefined}
-          endDate={(selected as [Date, Date])[1] || undefined}
-          selected={(selected as [Date, Date])[0] || undefined}
-          onChange={(d) => onChange(d as [Date, Date])}
-          minDate={minDate}
-          maxDate={maxDate}
-          placeholderText={placeholder}
-          dateFormat={DF}
-          onChangeRaw={handleChangeRawRange} // << tipo compatível
-          onBlur={handleBlurRange}
-          {...rest}
-        />
-      ) : (
-        <StyledDatePicker
-          locale="pt-BR"
-          selected={
-            Array.isArray(selected)
-              ? selected[0]
-              : (selected as Date) || undefined
-          }
-          onChange={(d) => onChange(d as Date)}
-          minDate={minDate}
-          maxDate={maxDate}
-          placeholderText={placeholder}
-          dateFormat={DF}
-          onChangeRaw={handleChangeRawSingle} // << tipo compatível
-          onBlur={handleBlurSingle}
-          {...rest}
-        />
-      )}
-    </>
-  );
-};

package/src/components/atoms/DropDownMenu/DropdownMenu.styles.tsx

@@ -1,106 +0,0 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticBorders,
-  semanticColors,
-  semanticRadius,
-  semanticShadows,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-import { Variant } from './DropdownMenu.types';
-
-export const Wrapper = styled.div`
-  position: relative;
-  display: inline-flex;
-  justify-content: flex-start;
-`;
-
-export const ToggleButton = styled.button<{
-  $variant: Variant;
-  $open: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${semanticSizes.global.gap.sm};
-  padding: ${semanticSizes.global.padding.lg};
-  height: ${semanticSizes.global.spacings.lg};
-  font-size: ${typographyTokens.fontSizes.labelS};
-  border: none;
-  border-radius: ${semanticRadius.global.radius.md};
-  cursor: pointer;
-  transition: opacity 0.2s;
-  min-width: 160px;
-
-  ${(props) =>
-    props.$variant === 'light'
-      ? css`
-          background-color: ${semanticColors.branding.border.enabled};
-          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-        `
-      : css`
-          background-color: ${semanticColors.global.surface.default};
-          color: ${semanticColors.branding.border.enabled};
-          border: ${semanticBorders.global.sm} solid
-            ${semanticColors.branding.border.enabled};
-        `}
-
-  &:hover {
-    opacity: 0.9;
-  }
-`;
-
-export const LabelText = styled.span`
-  font-weight: ${typographyTokens.fontWeights.medium};
-`;
-
-export const Menu = styled.div<{ $variant: Variant }>`
-  position: absolute;
-  top: calc(100% + ${semanticSizes.global.gap.xs});
-  right: 0;
-  width: 100%;
-  padding: ${semanticSizes.global.padding.sm} 0;
-  border-radius: ${semanticRadius.global.radius.md};
-  box-shadow: ${semanticShadows.shadow.default};
-  display: grid;
-  gap: ${semanticSizes.global.gap.xs};
-  z-index: 10;
-
-  ${(props) =>
-    props.$variant === 'light'
-      ? css`
-          background-color: ${semanticColors.global.surface.default};
-          color: ${semanticColors.global.text.default.enabled};
-        `
-      : css`
-          background-color: ${semanticColors.branding.surface.enabled};
-          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-        `}
-`;
-
-export const Item = styled.div`
-  display: inline-grid;
-  grid-auto-flow: column;
-  align-items: center;
-  justify-content: flex-start;
-  gap: ${semanticSizes.global.gap.sm};
-  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
-  font-size: ${typographyTokens.fontSizes.labelS};
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${semanticColors.neutral['100']};
-  }
-`;
-
-export const IconWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-`;
-
-export const ItemLabel = styled.span`
-  flex: 1;
-  text-align: left;
-`;

package/src/components/atoms/DropDownMenu/DropdownMenu.tsx

@@ -1,48 +0,0 @@
-import React, { useState } from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import {
-  Wrapper,
-  ToggleButton,
-  LabelText,
-  Menu,
-  Item,
-  IconWrapper,
-  ItemLabel,
-} from './DropdownMenu.styles';
-import { DropdownMenuProps, DropdownMenuItemProps } from './DropdownMenu.types';
-
-export const DropdownMenu: React.FC<DropdownMenuProps> = ({
-  label,
-  variant = 'light',
-  children,
-}) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Wrapper>
-      <ToggleButton
-        onClick={() => setOpen((o) => !o)}
-        $variant={variant}
-        $open={open}
-      >
-        <LabelText>{label}</LabelText>
-        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-      </ToggleButton>
-      {open && <Menu $variant={variant}>{children}</Menu>}
-    </Wrapper>
-  );
-};
-
-export const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({
-  icon,
-  onClick,
-  children,
-}) => (
-  <Item onClick={onClick}>
-    {icon && <IconWrapper>{icon}</IconWrapper>}
-    <ItemLabel>{children}</ItemLabel>
-  </Item>
-);
-
-DropdownMenu.displayName = 'DropdownMenu';
-DropdownMenuItem.displayName = 'DropdownMenuItem';

package/src/components/atoms/DropDownMenu/DropdownMenu.types.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-export type Variant = 'light' | 'dark';
-
-export interface DropdownMenuProps {
-  label: string;
-  variant?: Variant;
-  children: ReactNode;
-}
-
-export interface DropdownMenuItemProps {
-  icon?: ReactNode;
-  onClick?: () => void;
-  children: ReactNode;
-}

package/src/components/atoms/DropDownMenu/index.tsx

@@ -1,5 +0,0 @@
-export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
-export type {
-  DropdownMenuProps,
-  DropdownMenuItemProps,
-} from './DropdownMenu.types';