@liguelead/design-system 0.0.29 → 0.0.30

package/components/Alert/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import Alert from './Alert'
 
 const meta: Meta<typeof Alert> = {

package/components/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { themes } from '@liguelead/foundation'
 import Button from './Button'
 import type { ButtonVariantTypes } from './Button.types'

package/components/Checkbox/Checkbox.stories.tsx

@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import Checkbox from './Checkbox'
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Form/Checkbox',
   component: Checkbox,
   parameters: {
-    layout: 'padded',
+    layout: 'centered',
   },
   tags: ['autodocs'],
   argTypes: {

package/components/Combobox/Combobox.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import Combobox from './Combobox'
 import { iconMap, iconOptions } from '../../../stories/utils/icons'

package/components/DatePicker/DatePicker.stories.tsx

@@ -1,43 +1,108 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { DateRange } from 'react-day-picker'
+import { useState } from 'react'
 import DatePicker from './DatePicker'
 
-const meta: Meta<typeof DatePicker> = {
+const meta = {
   title: 'Form/DatePicker',
   component: DatePicker,
   parameters: {
-    layout: 'padded',
+    layout: 'centered'
   },
   tags: ['autodocs'],
   argTypes: {
-    label: {
-      control: 'text',
-      description: 'DatePicker label'
-    },
     size: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
-      description: 'DatePicker size'
+      description: 'Size of the DatePicker'
+    },
+    mode: {
+      control: 'select',
+      options: ['single', 'range'],
+      description: 'Selection mode of the DatePicker'
     },
-    startYear: {
-      control: 'number',
-      description: 'Start year for year selection'
+    label: {
+      control: 'text',
+      description: 'Label for the DatePicker'
     },
-    endYear: {
-      control: 'number',
-      description: 'End year for year selection'
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when no date is selected'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the DatePicker is disabled'
     },
-    icon: {
+    inline: {
       control: 'boolean',
-      description: 'Show calendar icon'
+      description: 'Whether to display the DatePicker inline'
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback fired when a date is selected (single mode)'
+    },
+    onRangeChange: {
+      action: 'range changed',
+      description: 'Callback fired when a date range is selected (range mode)'
     }
-  },
-}
+  }
+} satisfies Meta<typeof DatePicker>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const SingleMode: Story = {
+  args: {
+    size: 'md',
+    mode: 'single',
+    label: 'Select a date',
+    placeholder: 'DD/MM/YYYY',
+    disabled: false,
+    inline: false,
+    value: undefined,
+    onChange: () => {}
+  },
+  render: (args) => {
+    const [value, setValue] = useState<Date | undefined>(args.value ?? undefined)
+
+    return (
+      <DatePicker
+        mode='single'
+        value={value}
+        onChange={(next) => {
+          setValue(next)
+          args.onChange?.(next)
+        }}
+      />
+    )
+  }
+}
+
+export const RangeMode: Story = {
   args: {
-    label: 'Select Date',
+    size: 'md',
+    mode: 'range',
+    label: 'Select a date range',
+    placeholder: 'DD/MM/YYYY - DD/MM/YYYY',
+    disabled: false,
+    inline: false,
+    rangeValue: { from: undefined, to: undefined },
+    onRangeChange: () => {}
   },
+  render: (args) => {
+    const [rangeValue, setRangeValue] = useState<DateRange | undefined>(
+      args.rangeValue ?? { from: undefined, to: undefined }
+    )
+    return (
+      <DatePicker
+        mode='range'
+        rangeValue={rangeValue}
+        onRangeChange={(next) => {
+          setRangeValue(next)
+          args.onRangeChange?.(next)
+        }}
+      />
+    )
+  }
 }
+

package/components/DatePicker/DatePicker.styles.ts

@@ -1,66 +1,410 @@
-import { parseColor } from '../../utils'
 import styled from 'styled-components'
-import { Content, Item } from '@radix-ui/react-dropdown-menu'
-import { spacing } from '@liguelead/foundation'
-
-export const ArrownDatePicker = styled.button.attrs(() => ({ type: 'button' }))`
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-    padding: 0;
-    cursor: pointer;
-    height: 32px;
-    width: 32px;
-    border-radius: 4px;
-    overflow: hidden;
-    transition: 0.2s all linear;
-    color: ${({ theme }) => parseColor(theme.colors.primaryDark)};
-    &:hover {
-        color: ${({ theme }) => parseColor(theme.colors.white)};
-        background: ${({ theme }) => parseColor(theme.colors.primary)};
+import * as Popover from '@radix-ui/react-popover'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    shadow,
+    spacing
+} from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import { DatePickerSize } from './DatePicker.types'
+
+const paddingMap: Record<DatePickerSize, number> = {
+    sm: Number(spacing.spacing12),
+    md: Number(spacing.spacing16),
+    lg: Number(spacing.spacing16)
+}
+
+const triggerSizes: Record<DatePickerSize, string> = {
+    sm: `
+        height: 40px;
+        font-size: ${fontSize.fontSize14}px;
+    `,
+    md: `
+        height: 44px;
+        font-size: ${fontSize.fontSize14}px;
+    `,
+    lg: `
+        height: 48px;
+        font-size: ${fontSize.fontSize16}px;
+    `
+}
+
+const iconOffset = Number(spacing.spacing12) + 18
+
+export const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${spacing.spacing4}px;
+    width: 100%;
+`
+
+export const DatePickerTriggerWrapper = styled.div`
+    position: relative;
+    width: 100%;
+`
+
+export const IconSlot = styled.div<{ $disabled?: boolean }>`
+    position: absolute;
+    top: 50%;
+    left: ${spacing.spacing12}px;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+    z-index: 1;
+
+    &[type="button"] {
+        pointer-events: auto;
+        cursor: pointer;
+        background: transparent;
+        border: none;
+        padding: 0;
+        
+        &:hover {
+            opacity: 0.8;
+        }
     }
 `
 
-export const ButtonDatePicker = styled.button.attrs(() => ({ type: 'button' }))`
-    background-color: transparent;
-    border: 0;
-    outline: 0;
-    padding: ${spacing.spacing4}px;
-    cursor: pointer;
+export const DatePickerHiddenInput = styled.input`
+    display: none;
+`
+
+const baseTriggerStyles = `
+    width: 100%;
     border-radius: 4px;
-    overflow: hidden;
-    transition: 0.2s all linear;
-    color: ${({ theme }) => parseColor(theme.colors.primaryDark)};
+    text-align: left;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
+`
+
+export const DatePickerTrigger = styled.button<{
+    $hasIcon?: boolean
+    $size: DatePickerSize
+    $error?: boolean
+    $isPlaceholder?: boolean
+}>`
+    ${baseTriggerStyles}
+    border: 1px solid
+        ${({ theme, $error }) =>
+            $error
+                ? parseColor(theme.colors.danger200)
+                : parseColor(theme.colors.neutral400)};
+
+    background: ${({ theme }) => parseColor(theme.colors.white)};
+
+    color: ${({ theme, $isPlaceholder }) =>
+        $isPlaceholder
+            ? parseColor(theme.colors.textMedium)
+            : parseColor(theme.colors.textDark)};
+
+    ${props => triggerSizes[props.$size]}
+
+    ${({ $hasIcon, $size }) => {
+        const basePadding = paddingMap[$size]
+        const leftPadding = $hasIcon
+            ? basePadding + iconOffset
+            : basePadding
+        return `
+            padding: 0 ${basePadding}px;
+            padding-left: ${leftPadding}px;
+        `
+    }}
+
     &:hover {
-        color: ${({ theme }) => parseColor(theme.colors.white)};
-        background: ${({ theme }) => parseColor(theme.colors.primary)};
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+        background: ${({ theme }) => parseColor(theme.colors.neutral200)};
+        color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: ${({ theme, $error }) =>
+            $error
+                ? `0 0 0 3px ${parseColor(theme.colors.danger100)}40`
+                : `${shadow.focusShadow}`};
+        border-color: ${({ theme, $error }) =>
+            $error
+                ? parseColor(theme.colors.danger200)
+                : parseColor(theme.colors.neutral700)};
     }
 `
 
-export const HeaderSelectWrapper = styled.div`
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    gap: 4px;
-    padding: 0px 4px;
+export const DatePickerInput = styled.input<{
+    $hasIcon?: boolean
+    $size: DatePickerSize
+    $error?: boolean
+}>`
+    ${baseTriggerStyles}
+    border: 1px solid
+        ${({ theme, $error }) =>
+            $error
+                ? parseColor(theme.colors.danger200)
+                : parseColor(theme.colors.neutral400)};
+
+    background: ${({ theme }) => parseColor(theme.colors.white)};
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+
+    ${props => triggerSizes[props.$size]}
+
+    ${({ $hasIcon, $size }) => {
+        const basePadding = paddingMap[$size]
+        const leftPadding = $hasIcon
+            ? basePadding + iconOffset
+            : basePadding
+        return `
+            padding: 0 ${basePadding}px;
+            padding-left: ${leftPadding}px;
+        `
+    }}
+
+    &::placeholder {
+        color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    }
+
+    &:hover {
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+        background: ${({ theme }) => parseColor(theme.colors.neutral200)};
+    }
+
+    &:focus {
+        outline: none;
+        box-shadow: ${({ theme, $error }) =>
+            $error
+                ? `0 0 0 3px ${parseColor(theme.colors.danger100)}40`
+                : `${shadow.focusShadow}`};
+        border-color: ${({ theme, $error }) =>
+            $error
+                ? parseColor(theme.colors.danger200)
+                : parseColor(theme.colors.neutral700)};
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
 `
 
-export const DropdownContent = styled(Content)`
-    background-color: white;
-    border-radius: 4px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-    padding: 4px;
-    max-height: 300px;
-    overflow-y: auto;
-    z-index: 10;
+export const DatePickerContent = styled(Popover.Content)`
+    background: ${({ theme }) => parseColor(theme.colors.white)};
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral200)};
+    padding: ${spacing.spacing12}px;
+
+    box-shadow:
+        0 1px 3px 0 rgba(0, 0, 0, 0.10),
+        0 1px 2px -1px rgba(0, 0, 0, 0.10);
+    min-width: 240px;
 `
 
-export const DropdownItem = styled(Item)`
-    padding: 8px 12px;
-    font-size: 14px;
-    cursor: pointer;
-    &:hover {
-        background-color: ${({ theme }) => parseColor(theme.colors.primary)};
+export const CalendarWrapper = styled.div<{$singleMonth: boolean}>`
+    .rdp-months {
+        display: flex;
+        gap: ${spacing.spacing24}px;
+    }
+
+    .rdp-caption {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: ${spacing.spacing8}px;
+    }
+
+    .rdp-caption_label {
+        font-weight: ${fontWeight.fontWeight500};
+        font-size: ${fontSize.fontSize14}px;
+        color: ${({ theme }) => parseColor(theme.colors.neutral1100)};
+    }
+
+    .rdp-nav {
+        display: flex;
+    }
+
+    .rdp-chevron {
+        width: 16px;
+        height: 16px;
+        fill: ${({ theme }) => parseColor(theme.colors.primary)};
+    }
+
+    .rdp-button_previous, .rdp-button_next {
+        height: 32px !important;
+        width: 32px;
+        border-radius: 4px;
+        margin-top: 4px;
+        padding: 4px;
+        transition: background 0.2s ease;
+    }
+
+    .rdp-button_previous:focus,
+    .rdp-button_next:focus {
+        box-shadow: ${shadow.focusShadow};
+    }
+
+    .rdp-button_previous:hover,
+    .rdp-button_next:hover {
+        background: ${({ theme }) => parseColor(theme.colors.primaryDark)};
+        & svg {
+            fill: ${({ theme }) => parseColor(theme.colors.white)};
+        }
+    }
+
+    .rdp-weekday {
+        color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+        font-size: ${fontSize.fontSize12}px;
+    }
+
+    .rdp-nav_button {
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        border: 1px solid ${({ theme }) => parseColor(theme.colors.danger200)};
+        color: ${({ theme }) => parseColor(theme.colors.neutral800)};
+        transition: background 0.2s ease, border-color 0.2s ease;
+    }
+
+
+    .rdp-head_cell {
+        font-size: ${fontSize.fontSize12}px;
+        color: ${({ theme }) => parseColor(theme.colors.neutral500)};
+        text-align: center;
+        font-weight: ${fontWeight.fontWeight600};
+    }
+
+    .rdp-day {
+        height: 32px;
+        width: 32px;
+        font-size: ${fontSize.fontSize14}px;
+        cursor: pointer;
+        transition: 0.2s;
+        color: ${({ theme }) => parseColor(theme.colors.neutral800)};
+        margin: 0;
+        padding: 0;
+    }
+
+    .rdp-range_middle,
+    .rdp-range_start,
+    .rdp-range_end {
+        background: transparent !important;
+    }
+
+    .rdp-range_middle .rdp-day_button {
+        background-color: ${({ theme }) => parseColor(theme.colors.primaryLight)} !important;
+        padding: 0;
+        margin-bottom: 8px;
+    }
+
+    .rdp-day_button {
+        margin-bottom: 8px;
+        height: 32px;
+        width: 32px;
+        font-size: ${fontSize.fontSize14}px;
+        color: ${({ theme }) => parseColor(theme.colors.textDark)};
+        font-weight: ${fontWeight.fontWeight400};
+    }
+
+    .rdp-day_button:hover {
+        background: ${({ theme }) => parseColor(theme.colors.primaryDark)};
         color: ${({ theme }) => parseColor(theme.colors.white)};
+        border-radius: 4px;
+    }
+
+    .rdp-range_middle {
+        padding: 0;
     }
+
+    .rdp-range_end .rdp-day_button,
+    .rdp-range_start .rdp-day_button {
+        background: ${({ theme }) => parseColor(theme.colors.primary)} !important;
+        color: ${({ theme }) => parseColor(theme.colors.white)} !important;
+        font-weight: ${fontWeight.fontWeight400};
+        border-radius: 4px;
+        border: none;
+    }
+
+    .rdp-range_end .rdp-day_button:focus,
+    .rdp-range_start .rdp-day_button:focus {
+        box-shadow: ${shadow.focusShadow};
+    }
+
+
+    ${({ $singleMonth, theme }) => ` 
+        ${$singleMonth ? `
+        .rdp-selected .rdp-day_button {
+            background: ${parseColor(theme.colors.primary)} !important;
+            color: ${parseColor(theme.colors.white)} !important;
+            border-radius: 4px;
+            border: none;
+        }
+
+        .rdp-selected .rdp-day_button:focus {
+            box-shadow: ${shadow.focusShadow};
+        }
+        ` : ''}
+    `}
+
+    .rdp-day_today,
+    .rdp-today .rdp-day_button {
+        background-color: ${({ theme }) => parseColor(theme.colors.neutral300)};
+        color: ${({ theme }) => parseColor(theme.colors.textDark)};
+        border-radius: 4px;
+        border: none;
+    }
+
+    .rdp-range_start.rdp-day_today .rdp-day_button,
+    .rdp-range_end.rdp-day_today .rdp-day_button {
+        background: ${({ theme }) => parseColor(theme.colors.primary)};
+        color: ${({ theme }) => parseColor(theme.colors.white)};
+        border-radius: 4px;
+        border: none;
+    }
+
+    .rdp-day_outside {
+        opacity: 0.45;
+    }
+
+    .rdp-dropdown {
+        border-radius: 4px;
+        padding: ${spacing.spacing8}px;
+        border: 1px solid ${({ theme }) =>
+            parseColor(theme.colors.neutral300)};
+        background: ${({ theme }) => parseColor(theme.colors.white)};
+        cursor: pointer;
+        font-size: ${fontSize.fontSize14}px;
+    }
+
+    .rdp-dropdown_root {
+        padding: ${spacing.spacing8}px;
+        border-radius: 4px;
+        border: 1px solid ${({ theme }) =>
+            parseColor(theme.colors.neutral400)};
+        cursor: pointer;
+        font-size: ${fontSize.fontSize12}px;
+        color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    }
+
+    .rdp-dropdown .rdp-months_dropdown {
+        & option {
+            padding: ${spacing.spacing20}px;
+        }
+    }
+
+    .rdp-dropdown:focus-visible ~ .rdp-caption_label {
+        outline: 1px solid white; 
+    }
+`
+
+export const DatePickerLabel = styled.label`
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight500};
+    margin-bottom: 2px;
+    color: ${({ theme }) => parseColor(theme.colors.neutral800)};
+`
+
+export const DatePickerError = styled.span`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight16}px;
+    color: ${({ theme }) => parseColor(theme.colors.danger200)};
+    margin-top: 2px;
 `