@liguelead/design-system 0.0.28 → 0.0.29

package/components/Alert/Alert.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Alert from './Alert'
+
+const meta: Meta<typeof Alert> = {
+  title: 'Feedback/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'danger', 'warning', 'info', 'success'],
+      description: 'Visual style variant of the alert'
+    },
+    title: {
+      control: 'text',
+      description: 'Alert title'
+    },
+    description: {
+      control: 'text',
+      description: 'Alert description'
+    },
+    hasButton: {
+      control: 'boolean',
+      description: 'Whether to show action button'
+    },
+    buttonLabel: {
+      control: 'text',
+      description: 'Action button label'
+    },
+    href: {
+      control: 'text',
+      description: 'Action button link'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Alert variant="default" title="Default Alert" description="This is a default alert message." />
+      <Alert variant="info" title="Info Alert" description="This is an informational alert message." />
+      <Alert variant="success" title="Success Alert" description="This is a success alert message." />
+      <Alert variant="warning" title="Warning Alert" description="This is a warning alert message." />
+      <Alert variant="danger" title="Danger Alert" description="This is a danger alert message." />
+    </div>
+  ),
+}
+
+export const Default: Story = {
+  args: {
+    title: 'Alert Title',
+    description: 'This is an alert description.',
+  },
+}

package/components/Button/Button.appearance.ts

@@ -47,7 +47,7 @@ export const ButtonVariant = (
         color: ${parsedColor};
         border: 1px solid ${parsedColor};
         &:hover {
-            background-color: ${parseColor(theme.colors.primaryDarker)};
+            background-color: ${parsedColor};
             border-color: transparent;
             color: ${parseColor(theme.colors.white)};
         }
@@ -63,7 +63,7 @@ export const ButtonVariant = (
         color: ${parsedColor};
         border: 1px solid transparent;
         &:hover {
-            background-color: ${parseColor(theme.colors.primaryDarker)};
+            background-color: ${parsedColor};
             color: ${parseColor(theme.colors.white)};
         }
         &:disabled {

package/components/Button/Button.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { themes } from '@liguelead/foundation'
+import Button from './Button'
+import type { ButtonVariantTypes } from './Button.types'
+
+const themeColors = Object.keys(themes.spa.colors)
+const buttonVariantOptions: ButtonVariantTypes[] = [
+  'solid',
+  'outline',
+  'ghost',
+  'neutralOutline',
+  'neutralGhost'
+]
+
+const meta: Meta<typeof Button> = {
+  title: 'Form/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: buttonVariantOptions,
+      description: 'Visual style variant of the button',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the button',
+    },
+    color: {
+      control: 'select',
+      options: themeColors,
+      description: 'Color theme of the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the button takes full width',
+    },
+    children: {
+      control: 'text',
+      description: 'Button content',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+}
+
+export const Variants: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+      <Button {...args} variant="solid">Solid</Button>
+      <Button {...args} variant="outline">Outline</Button>
+      <Button {...args} variant="ghost">Ghost</Button>
+      <Button {...args} variant="neutralOutline">Neutral Outline</Button>
+      <Button {...args} variant="neutralGhost">Neutral Ghost</Button>
+    </div>
+  ),
+}

package/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Checkbox from './Checkbox'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Form/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Checkbox label'
+    },
+    description: {
+      control: 'text',
+      description: 'Checkbox description'
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Whether checkbox is checked'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether checkbox is disabled'
+    },
+    $hasError: {
+      control: 'boolean',
+      description: 'Whether checkbox has error state'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Checkbox Label',
+  },
+}

package/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import Combobox from './Combobox'
+import { iconMap, iconOptions } from '../../../stories/utils/icons'
+
+const mockItems = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+  { value: 'option4', label: 'Option 4', disabled: true },
+]
+
+const meta = {
+  title: 'Form/Combobox',
+  component: Combobox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['single', 'multi'],
+      description: 'Combobox variant',
+    },
+    label: {
+      control: 'text',
+      description: 'Combobox label',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+    searchPlaceholder: {
+      control: 'text',
+      description: 'Search placeholder text',
+    },
+    emptyText: {
+      control: 'text',
+      description: 'Text shown when no options available',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text below the combobox',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the combobox is disabled',
+    },
+    requiredSymbol: {
+      control: 'boolean',
+      description: 'Show required symbol',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the combobox',
+    },
+    width: {
+      control: 'number',
+      description: 'Width of the combobox',
+    },
+    createLabel: {
+      control: 'text',
+      description: 'Label for create option',
+    },
+    leftIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Left icon',
+    },
+  },
+} satisfies Meta<typeof Combobox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Select an option',
+    placeholder: 'Choose...',
+    items: mockItems,
+    leftIcon: 'none',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<string>('')
+    const [values, setValues] = useState<string[]>([])
+    
+    const selectedIcon = args.leftIcon === 'none' ? undefined : iconMap[args.leftIcon as keyof typeof iconMap]
+    
+    if (args.variant === 'multi') {
+      return (
+        <Combobox
+          {...args}
+          variant="multi"
+          leftIcon={selectedIcon}
+          values={values}
+          onChange={setValues}
+        />
+      )
+    }
+    
+    return (
+      <Combobox
+        {...args}
+        leftIcon={selectedIcon}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}

package/components/Combobox/Combobox.styles.ts

@@ -14,7 +14,7 @@ import { TextFieldSizeType } from '../TextField/TextField.sizes'
 import { StateInterface } from '../TextField/TextField.states'
 import Text from '../Text'
 
-type TStyledInputProps =  {
+type TStyledInputProps = {
     size: TextFieldSizeType
     $themefication: StateInterface
 }
@@ -185,14 +185,18 @@ export const ItemRow = styled(Command.Item)`
         color: ${({ theme }) => parseColor(theme.colors.white)};
     }
 
-    &:hover:not([data-disabled='true']):not([data-is-selected='true']:not([data-variant='multi'])) {
+    &:hover:not([data-disabled='true']) {
         background: ${({ theme }) => parseColor(theme.colors.primaryLight)};
     }
+
+    &[data-variant='single'][data-is-selected='true']:hover {
+        background: ${({ theme }) => parseColor(theme.colors.primary)};
+    }
 `
 
 export const ItemLabel = styled(Text)`
     padding-left: 4px;
-`;
+`
 
 
 export const RightIcon = styled.span`

package/components/Combobox/Combobox.tsx

@@ -16,7 +16,7 @@ import { TextFieldStates } from '../TextField/TextField.states'
 import { textFieldSizes } from '../TextField/TextField.sizes'
 
 import * as Popover from '@radix-ui/react-popover'
-import * as s  from './Combobox.styles'
+import * as s from './Combobox.styles'
 import { isMultiProps, normalizeData } from './utils'
 
 const Combobox = (props: ComboboxProps) => {
@@ -29,7 +29,6 @@ const Combobox = (props: ComboboxProps) => {
         leftIcon,
         items,
         groups,
-        onChange,
         placeholder = 'Selecionar',
         searchPlaceholder = 'Pesquisar',
         emptyText = 'Sem resultados.',
@@ -69,7 +68,7 @@ const Combobox = (props: ComboboxProps) => {
         const next = selectedValues.includes(value)
             ? selectedValues.filter(x => x !== value)
             : [...selectedValues, value]
-        ;(onChange as ((values: string[]) => void) | undefined)?.(next)
+        props.onChange?.(next)
     }
 
     return (
@@ -169,13 +168,7 @@ const Combobox = (props: ComboboxProps) => {
                                                             toggle(item.value)
                                                             return
                                                         }
-                                                        ;(
-                                                            onChange as
-                                                                | ((
-                                                                        value: string
-                                                                    ) => void)
-                                                                | undefined
-                                                        )?.(item.value)
+                                                        props.onChange?.(item.value)
                                                         setOpen(false)
                                                     }}
                                                     data-selected={

package/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import DatePicker from './DatePicker'
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Form/DatePicker',
+  component: DatePicker,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'DatePicker label'
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'DatePicker size'
+    },
+    startYear: {
+      control: 'number',
+      description: 'Start year for year selection'
+    },
+    endYear: {
+      control: 'number',
+      description: 'End year for year selection'
+    },
+    icon: {
+      control: 'boolean',
+      description: 'Show calendar icon'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Select Date',
+  },
+}

package/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Dialog from './Dialog'
+import Button from '../Button/Button'
+
+const meta: Meta<typeof Dialog> = {
+    title: 'Feedback/Dialog',
+    component: Dialog,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Dialog title'
+        },
+        description: {
+            control: 'text',
+            description: 'Dialog description'
+        },
+        variant: {
+            control: 'select',
+            options: ['default', 'danger'],
+            description: 'Dialog variant'
+        },
+        confirmButton: {
+            control: 'boolean',
+            description: 'Show confirm button'
+        },
+        cancelButton: {
+            control: 'boolean',
+            description: 'Show cancel button'
+        },
+        confirmLabel: {
+            control: 'text',
+            description: 'Confirm button label'
+        },
+        cancelLabel: {
+            control: 'text',
+            description: 'Cancel button label'
+        },
+        confirmButtonColor: {
+            control: 'select',
+            options: ['primary', 'secondary'],
+            description: 'Confirm button color'
+        },
+        centerContent: {
+            control: 'boolean',
+            description: 'Center dialog content'
+        }
+    }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        title: 'Dialog Title',
+        description: 'This is a dialog description.',
+        trigger: <Button>Open Dialog</Button>
+    }
+}

package/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import IconButton from './IconButton'
+import { themes } from '@liguelead/foundation'
+import { iconMap } from '../../../stories/utils/icons'
+
+const themeColors = Object.keys(themes.spa.colors)
+
+const meta = {
+  title: 'Form/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['solid', 'outline', 'ghost', 'neutralOutline', 'neutralGhost'],
+      description: 'Visual style variant of the icon button'
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the icon button'
+    },
+    color: {
+      control: 'select',
+      options: themeColors,
+      description: 'Color theme of the icon button'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the icon button is disabled'
+    },
+    children: {
+      control: false,
+      description: 'Icon content'
+    },
+  },
+} satisfies Meta<typeof IconButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: iconMap.HeartIcon,
+  },
+}

package/components/InputOpt/InputOpt.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import InputOpt from './InputOpt'
+
+const meta: Meta<typeof InputOpt> = {
+  title: 'Form/InputOpt',
+  component: InputOpt,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    length: {
+      control: 'number',
+      description: 'Number of input fields'
+    },
+    label: {
+      control: 'text',
+      description: 'Input label'
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text below input'
+    },
+    placeholderChar: {
+      control: 'text',
+      description: 'Placeholder character for empty fields'
+    },
+    inputMode: {
+      control: 'select',
+      options: ['numeric', 'text'],
+      description: 'Input mode for mobile keyboards'
+    },
+    autoFocus: {
+      control: 'boolean',
+      description: 'Auto focus first input on mount'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether inputs are disabled'
+    },
+    requiredSymbol: {
+      control: 'boolean',
+      description: 'Show required asterisk'
+    },
+    error: {
+      control: 'boolean',
+      description: 'Whether inputs have error state'
+    }
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    label: 'Verification Code',
+    length: 6,
+  },
+}
+

package/components/LinkButton/LinkButton.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import LinkButton from './LinkButton'
+import { themes } from '@liguelead/foundation'
+import { iconMap, iconOptions } from '../../../stories/utils/icons'
+
+const themeColors = Object.keys(themes.spa.colors)
+
+const meta: Meta<typeof LinkButton> = {
+  title: 'Navigation/LinkButton',
+  component: LinkButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    href: {
+      control: 'text',
+      description: 'Link URL'
+    },
+    children: {
+      control: 'text',
+      description: 'Link content'
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the link button'
+    },
+    color: {
+      control: 'select',
+      options: themeColors,
+      description: 'Color theme of the link button'
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the link button is disabled'
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the link button takes full width'
+    },
+    leftIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Left icon',
+    },
+    rightIcon: {
+      control: 'select',
+      options: iconOptions,
+      description: 'Right icon',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+  args: {
+    href: '#',
+    children: 'Link Button',
+    size: 'md',
+    color: themeColors[0],
+    disabled: false,
+    fullWidth: false,
+    leftIcon: 'none',
+    rightIcon: 'none',
+  },
+  render: (args) => {
+    const leftIcon = args.leftIcon === 'none' ? undefined : iconMap[args.leftIcon as keyof typeof iconMap]
+    const rightIcon = args.rightIcon === 'none' ? undefined : iconMap[args.rightIcon as keyof typeof iconMap]
+    
+    return (
+      <LinkButton
+        href={args.href}
+        leftIcon={leftIcon}
+        rightIcon={rightIcon}
+        size={args.size}
+        color={args.color}
+        disabled={args.disabled}
+        fullWidth={args.fullWidth}
+      >
+        {args.children}
+      </LinkButton>
+    )
+  },
+}