@granto-umbrella/umbrella-components 2.3.2 → 2.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",
@@ -35,8 +35,10 @@
     "@radix-ui/react-label": "^2.1.3",
     "@radix-ui/react-popover": "^1.1.7",
     "@radix-ui/react-radio-group": "^1.2.4",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.488.0",
     "react": "^18.3.1",
+    "react-datepicker": "^8.3.0",
     "react-day-picker": "^9.6.7",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",

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

@@ -0,0 +1,96 @@
+// 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,
+  primitiveSizes,
+} 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: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.md};
+  border: 1px solid ${semanticColors.neutral[300]};
+  border-radius: ${semanticRadius.global.radius.md};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.onSurface.enabled};
+
+  &:focus {
+    outline: none;
+    border-color: ${semanticColors.branding.surface.enabled};
+    box-shadow: 0 0 0 2px ${semanticColors.branding.surface.enabled}33;
+  }
+`;
+
+export const Label = styled.label`
+  font-size: ${typographyTokens.fontSizes.labelS};
+  color: ${semanticColors.global.text.subtitle.enabled};
+  font-weight: ${typographyTokens.fontWeights.medium};
+`;
+
+export const SupportText = styled.span<{ $error?: boolean }>`
+  font-size: ${typographyTokens.fontSizes.captionM};
+  color: ${({ $error }) =>
+    $error
+      ? semanticColors.danger.text.enabled
+      : semanticColors.global.text.subtitle.enabled};
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${primitiveSizes.size.x1};
+`;

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

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import {
+  Container,
+  DatePickerGlobalStyles,
+  Label,
+  StyledDatePicker,
+  SupportText,
+} from "./DatePicker.styles";
+
+import "react-datepicker/dist/react-datepicker.css";
+
+interface DatePickerInputProps {
+  mode?: "single" | "range";
+  selected: Date | [Date, Date];
+  onChange: (date: Date | [Date, Date]) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  placeholder?: string;
+  [key: string]: any;
+  label?: string;
+  supportText?: string;
+  error?: boolean;
+}
+
+export const DatePickerInput: React.FC<DatePickerInputProps> = ({
+  mode = "single",
+  selected,
+  onChange,
+  minDate,
+  maxDate,
+  placeholder,
+  label,
+  supportText,
+  error,
+  ...rest
+}) => (
+  <Container>
+    {label && <Label>{label}</Label>}
+    <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="dd/MM/yyyy"
+        {...rest}
+      />
+    ) : (
+      <StyledDatePicker
+        locale="pt-BR"
+        selected={selected as Date}
+        onChange={(d) => onChange(d as Date)}
+        minDate={minDate}
+        maxDate={maxDate}
+        placeholderText={placeholder}
+        dateFormat="dd/MM/yyyy"
+        {...rest}
+      />
+    )}
+    {supportText && <SupportText $error={error}>{supportText}</SupportText>}
+  </Container>
+);

package/src/index.ts

@@ -53,6 +53,8 @@ import {
 
 import { TabToggle } from "./components/molecules/TabToggle/TabToggle";
 
+import { DatePickerInput } from "./components/atoms/DatePickerInput/DatePickerInput";
+
 // Export all components
 export {
   AlertDialog,
@@ -62,6 +64,7 @@ export {
   ButtonGroup,
   Calendar,
   Checkbox,
+  DatePickerInput,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -90,10 +93,10 @@ export {
   StyledDialogClose,
   StyledDialogOverlay,
   Switch,
+  TabToggle,
   Text,
   Textarea,
   useFormField,
-  TabToggle,
 };
 
 // Export all tokens from a new file