@granto-umbrella/umbrella-components 2.3.8 → 2.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.3.8",
+  "version": "2.3.10",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

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

@@ -1,4 +1,3 @@
-// DatePicker.styles.ts
 import { createGlobalStyle, styled } from "styled-components";
 import ReactDatePicker, {
   DatePickerProps,
@@ -16,54 +15,36 @@ import {
 // register Portuguese‐Brazil locale
 registerLocale("pt-BR", ptBR);
 
-// 1) Global overrides for the popup calendar:
+// 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;
-  }
+  /* … your existing .react-datepicker* overrides … */
+`;
 
-  .react-datepicker__day--selected {
-    background-color: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.base.background};
-    border-radius: 50%;
-  }
+// wrapper around input + icon
+export const InputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
 
-  .react-datepicker__triangle {
-    display: none;
-  }
+// ícone absolutizado à esquerda
+export const IconWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: ${semanticSizes.global.padding.lg};
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: ${semanticColors.neutral[500]};
 `;
 
-// 2) Styled input only:
+// styled input itself; we add extra left‐padding for the icon
 export const StyledDatePicker = styled(
   ReactDatePicker as unknown as React.ComponentType<DatePickerProps>
 )`
   width: 100%;
   padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
-  gap: ${semanticSizes.global.gap.md};
+  padding-left: calc(
+    ${semanticSizes.global.padding.lg} ${primitiveSizes.size.x4}
+  );
   border: 1px solid ${semanticColors.neutral[300]};
   border-radius: ${semanticRadius.global.radius.md};
   font-size: ${typographyTokens.fontSizes.labelM};

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

@@ -1,11 +1,13 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
+import { Calendar as CalendarIcon } from "lucide-react";
 import {
   Container,
   DatePickerGlobalStyles,
   Label,
   StyledDatePicker,
   SupportText,
+  InputWrapper,
+  IconWrapper,
 } from "./DatePicker.styles";
 
 import "react-datepicker/dist/react-datepicker.css";
@@ -17,7 +19,6 @@ interface DatePickerInputProps {
   minDate?: Date;
   maxDate?: Date;
   placeholder?: string;
-  [key: string]: any;
   label?: string;
   supportText?: string;
   error?: boolean;
@@ -39,32 +40,40 @@ export const DatePickerInput: React.FC<DatePickerInputProps> = ({
     {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}
-      />
-    )}
+    <InputWrapper>
+      {/* the calendar icon */}
+      <IconWrapper>
+        <CalendarIcon size={16} />
+      </IconWrapper>
+
+      {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}
+        />
+      )}
+    </InputWrapper>
+
     {supportText && <SupportText $error={error}>{supportText}</SupportText>}
   </Container>
 );

package/src/global.d.ts

@@ -0,0 +1,3 @@
+// src/global.d.ts
+// Allow import of any ".css" file
+declare module "*.css";