@liguelead/design-system 0.0.34 → 0.0.36

package/components/Alert/Alert.stories.tsx

@@ -55,6 +55,11 @@ Componente de alerta para comunicar mensagens de feedback ao usuário.
       control: 'text',
       description: 'URL do botão de ação',
     },
+    openNewTab: {
+      control: 'boolean',
+      description: 'Abre o link do botão em uma nova aba',
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
 }
 
@@ -87,13 +92,14 @@ export const TodasVariantes: Story = {
 export const ComBotao: Story = {
   name: 'Com botão de ação',
   parameters: {
-    docs: { description: { story: 'Use `hasButton` quando houver uma ação clara para o usuário tomar.' } },
+    docs: { description: { story: 'Use `hasButton` quando houver uma ação clara para o usuário tomar. Use `openNewTab` para abrir o link em nova aba.' } },
   },
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <Alert variant="info" title="Nova versão disponível" description="Uma atualização está pronta para ser instalada." hasButton buttonLabel="Atualizar agora" href="#" />
-      <Alert variant="warning" title="Sessão expirando" description="Sua sessão expira em 5 minutos." hasButton buttonLabel="Renovar sessão" href="#" />
-      <Alert variant="danger" title="Falha no pagamento" description="Não foi possível processar seu pagamento." hasButton buttonLabel="Tentar novamente" href="#" />
+      <Alert variant="info" title="Nova versão disponível" description="Uma atualização está pronta para ser instalada." hasButton buttonLabel="Atualizar agora" href="#" openNewTab={false} />
+      <Alert variant="warning" title="Sessão expirando" description="Sua sessão expira em 5 minutos." hasButton buttonLabel="Renovar sessão" href="#" openNewTab={false} />
+      <Alert variant="danger" title="Falha no pagamento" description="Não foi possível processar seu pagamento." hasButton buttonLabel="Tentar novamente" href="#" openNewTab={false} />
+      <Alert variant="info" title="Documentação disponível" description="Acesse a documentação completa no portal." hasButton buttonLabel="Ver documentação" href="#" openNewTab />
     </div>
   ),
 }

package/components/Alert/Alert.tsx

@@ -17,6 +17,7 @@ const Alert = ({
     description,
     href,
     children,
+    openNewTab,
     title,
     hasButton
 }: TAlertProps) => {
@@ -45,7 +46,12 @@ const Alert = ({
             </AlertContent>
             {hasButton && (
                 <AlertButtonContainer>
-                    <LinkButton href={href || ''}>{buttonLabel}</LinkButton>
+                    <LinkButton
+                        href={href || ''}
+                        target={openNewTab ? '_blank' : undefined}
+                    >
+                        {buttonLabel}
+                    </LinkButton>
                 </AlertButtonContainer>
             )}
         </AlertContainer>

package/components/Alert/Alert.types.ts

@@ -7,4 +7,5 @@ export type TAlertProps = {
     description?: string
     variant?: 'default' | 'danger' | 'warning' | 'info' | 'success'
     title: string
+    openNewTab?: boolean
 }

package/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Skeleton from './Skeleton'
+
+const meta: Meta<typeof Skeleton> = {
+    title: 'Feedback/Skeleton',
+    component: Skeleton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Componente de loading skeleton baseado em \`react-loading-skeleton\`.
+
+**Quando usar:**
+- Enquanto dados estão sendo carregados da API
+- Para evitar layout shift e melhorar a percepção de performance
+- Substitua o conteúdo real pelo Skeleton durante o estado de loading
+        `,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Largura do skeleton (px, %, rem...)',
+        },
+        height: {
+            control: 'text',
+            description: 'Altura do skeleton',
+        },
+        count: {
+            control: { type: 'number', min: 1, max: 10 },
+            description: 'Quantidade de linhas',
+            table: { defaultValue: { summary: '1' } },
+        },
+        circle: {
+            control: 'boolean',
+            description: 'Formato circular (avatar)',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        borderRadius: {
+            control: 'text',
+            description: 'Border radius customizado',
+        },
+        inline: {
+            control: 'boolean',
+            description: 'Exibe inline',
+            table: { defaultValue: { summary: 'false' } },
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        width: 200,
+        height: 20,
+    },
+}
+
+export const MultiplaLinhas: Story = {
+    name: 'Múltiplas linhas',
+    parameters: {
+        docs: { description: { story: 'Use `count` para simular blocos de texto.' } },
+    },
+    render: () => (
+        <div style={{ width: 320 }}>
+            <Skeleton count={4} height={16} />
+        </div>
+    ),
+}
+
+export const Circular: Story = {
+    name: 'Avatar circular',
+    parameters: {
+        docs: { description: { story: 'Use `circle` para avatares.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+            <Skeleton circle width={32} height={32} />
+            <Skeleton circle width={40} height={40} />
+            <Skeleton circle width={56} height={56} />
+        </div>
+    ),
+}
+
+export const Card: Story = {
+    name: 'Card de conteúdo',
+    parameters: {
+        docs: { description: { story: 'Exemplo de skeleton para um card com avatar + texto.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 320 }}>
+            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+                <Skeleton circle width={40} height={40} />
+                <div style={{ flex: 1 }}>
+                    <Skeleton height={14} width="60%" />
+                    <Skeleton height={12} width="40%" />
+                </div>
+            </div>
+            <Skeleton height={120} borderRadius={8} />
+            <Skeleton count={3} height={14} />
+        </div>
+    ),
+}
+
+export const Tabela: Story = {
+    name: 'Linhas de tabela',
+    parameters: {
+        docs: { description: { story: 'Simula linhas de uma tabela carregando.' } },
+    },
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 480 }}>
+            {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} style={{ display: 'flex', gap: 16 }}>
+                    <Skeleton width={120} height={16} />
+                    <Skeleton width={160} height={16} />
+                    <Skeleton width={80} height={16} />
+                </div>
+            ))}
+        </div>
+    ),
+}

package/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import { radius } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+
+export const SkeletonWrapper = styled.div<{ $inline?: boolean }>`
+    display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+    flex-direction: column;
+    gap: 4px;
+`
+
+export const SkeletonThemeWrapper = styled.div`
+    --base-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
+    --highlight-color: ${({ theme }) => parseColor(theme.colors.neutral100)};
+    border-radius: ${radius.radius4}px;
+`

package/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,38 @@
+import ReactSkeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+import { useTheme } from 'styled-components'
+import { parseColor } from '../../utils'
+import { SkeletonWrapper } from './Skeleton.styles'
+import { SkeletonProps } from './Skeleton.types'
+
+const Skeleton: React.FC<SkeletonProps> = ({
+    width,
+    height,
+    borderRadius,
+    circle = false,
+    count = 1,
+    className,
+    inline = false,
+}) => {
+    const theme = useTheme()
+
+    return (
+        <SkeletonTheme
+            baseColor={parseColor(theme.colors.neutral200)}
+            highlightColor={parseColor(theme.colors.neutral100)}
+        >
+            <SkeletonWrapper $inline={inline} className={className}>
+                <ReactSkeleton
+                    width={width}
+                    height={height}
+                    borderRadius={borderRadius}
+                    circle={circle}
+                    count={count}
+                    inline={inline}
+                />
+            </SkeletonWrapper>
+        </SkeletonTheme>
+    )
+}
+
+export default Skeleton

package/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,9 @@
+export interface SkeletonProps {
+    width?: string | number
+    height?: string | number
+    borderRadius?: string | number
+    circle?: boolean
+    count?: number
+    className?: string
+    inline?: boolean
+}

package/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton'
+export type { SkeletonProps } from './Skeleton.types'

package/components/SplitButton/SplitButton.sizes.ts

@@ -0,0 +1,12 @@
+import { spacing } from '@liguelead/foundation'
+import { ButtonSizeTypes } from '../Button/Button.types'
+
+export const SplitButtonTriggerSizes = (size: ButtonSizeTypes) => {
+    const sizes = {
+        sm: `width: ${spacing.spacing32}px; height: ${spacing.spacing32}px; padding: 0;`,
+        md: `width: ${spacing.spacing36}px; height: ${spacing.spacing36}px; padding: 0;`,
+        lg: `width: ${spacing.spacing40}px; height: ${spacing.spacing40}px; padding: 0;`
+    }
+
+    return sizes[size]
+}

package/components/SplitButton/SplitButton.stories.tsx

@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+    ArchiveIcon,
+    ClockIcon,
+    PencilSimpleIcon,
+    TrashIcon
+} from '@phosphor-icons/react'
+import SplitButton from './SplitButton'
+
+const meta: Meta<typeof SplitButton> = {
+    title: 'Form/SplitButton',
+    component: SplitButton,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: `
+Botão dividido com ação principal e menu de opções secundárias.
+
+**Quando usar:**
+- Quando há uma ação primária clara, mas também ações alternativas relacionadas
+- Ex: "Publicar" com opções "Salvar rascunho" e "Agendar"
+
+**Composição:**
+- Lado esquerdo: botão de ação principal (\`onClick\`)
+- Lado direito: trigger que abre um \`DropdownMenu\` com as \`options\`
+                `
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Texto do botão principal'
+        },
+        variant: {
+            control: 'select',
+            options: ['solid', 'outline', 'ghost', 'neutralOutline', 'neutralGhost'],
+            description: 'Variante visual',
+            table: { defaultValue: { summary: 'neutralOutline' } }
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Tamanho do botão',
+            table: { defaultValue: { summary: 'sm' } }
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Desabilita ambos os botões',
+            table: { defaultValue: { summary: 'false' } }
+        }
+    }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultOptions = [
+    {
+        label: 'Salvar rascunho',
+        icon: <PencilSimpleIcon size={16} />,
+        onClick: () => console.log('rascunho')
+    },
+    {
+        label: 'Agendar',
+        icon: <ClockIcon size={16} />,
+        onClick: () => console.log('agendar')
+    },
+    {
+        label: 'Arquivar',
+        icon: <ArchiveIcon size={16} />,
+        onClick: () => console.log('arquivar')
+    }
+]
+
+export const Default: Story = {
+    args: {
+        label: 'Publicar',
+        onClick: () => console.log('publicar'),
+        options: defaultOptions
+    }
+}
+
+export const Tamanhos: Story = {
+    name: 'Tamanhos',
+    parameters: {
+        docs: {
+            description: { story: 'Três tamanhos disponíveis: `sm`, `md` e `lg`.' }
+        }
+    },
+    render: () => (
+        <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
+            <SplitButton
+                label="Pequeno"
+                size="sm"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Médio"
+                size="md"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Grande"
+                size="lg"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+        </div>
+    )
+}
+
+export const Variantes: Story = {
+    name: 'Variantes',
+    parameters: {
+        docs: {
+            description: { story: 'Herda as mesmas variantes do Button.' }
+        }
+    },
+    render: () => (
+        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'center' }}>
+            <SplitButton
+                label="Neutral Outline"
+                variant="neutralOutline"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Solid"
+                variant="solid"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Outline"
+                variant="outline"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+            <SplitButton
+                label="Ghost"
+                variant="ghost"
+                onClick={() => {}}
+                options={defaultOptions}
+            />
+        </div>
+    )
+}
+
+export const Desabilitado: Story = {
+    name: 'Estado desabilitado',
+    args: {
+        label: 'Publicar',
+        disabled: true,
+        onClick: () => {},
+        options: defaultOptions
+    }
+}
+
+export const SemIcones: Story = {
+    name: 'Opções sem ícone',
+    args: {
+        label: 'Ação',
+        onClick: () => {},
+        options: [
+            { label: 'Opção A', onClick: () => {} },
+            { label: 'Opção B', onClick: () => {} },
+            { label: 'Opção C (desabilitada)', onClick: () => {}, disabled: true }
+        ]
+    }
+}
+
+export const ExemploReal: Story = {
+    name: 'Exemplo: Publicação de conteúdo',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Padrão comum em sistemas de CMS ou gestão de tarefas.'
+            }
+        }
+    },
+    render: () => (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                padding: 16,
+                border: '1px solid #e5e7eb',
+                borderRadius: 8,
+                width: 400,
+                gap: 8
+            }}
+        >
+            <SplitButton
+                label="Publicar"
+                onClick={() => console.log('publicar')}
+                options={[
+                    {
+                        label: 'Salvar rascunho',
+                        icon: <PencilSimpleIcon size={16} />,
+                        onClick: () => console.log('rascunho')
+                    },
+                    {
+                        label: 'Agendar publicação',
+                        icon: <ClockIcon size={16} />,
+                        onClick: () => console.log('agendar')
+                    },
+                    {
+                        label: 'Mover para lixeira',
+                        icon: <TrashIcon size={16} />,
+                        onClick: () => console.log('lixeira')
+                    }
+                ]}
+            />
+        </div>
+    )
+}

package/components/SplitButton/SplitButton.styles.ts

@@ -0,0 +1,106 @@
+import styled from 'styled-components'
+import { fontSize, fontWeight, lineHeight, radius, shadow, spacing } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+export const Wrapper = styled.div`
+    display: inline-flex;
+    align-items: stretch;
+`
+
+export const MainButton = styled.button<{ $variant: string; $size: string }>`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s, box-shadow 0.3s;
+    ${({ $size }) => $size}
+    ${({ $variant }) => $variant}
+    border-radius: ${radius.radius4}px 0 0 ${radius.radius4}px;
+
+    &:focus-visible {
+        box-shadow: ${shadow.focusShadow};
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+`
+
+export const TriggerButton = styled(DropdownMenu.Trigger)<{
+    $variant: string
+    $size: string
+}>`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s, box-shadow 0.3s;
+    ${({ $size }) => $size}
+    ${({ $variant }) => $variant}
+    border-radius: 0 ${radius.radius4}px ${radius.radius4}px 0;
+
+    &:focus-visible {
+        box-shadow: ${shadow.focusShadow};
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    & svg {
+        width: 10px;
+        height: 10px;
+        pointer-events: none;
+    }
+`
+
+export const StyledContent = styled(DropdownMenu.Content)`
+    width: max-content;
+    background: ${({ theme }) => parseColor(theme.colors.white)};
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral400)};
+    border-radius: ${radius.radius4}px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    z-index: 9999;
+    padding: 0;
+`
+
+export const StyledItem = styled(DropdownMenu.Item)`
+    height: ${spacing.spacing36}px;
+    padding: 0 ${spacing.spacing12}px;
+    display: flex;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+    cursor: pointer;
+    outline: none;
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight400};
+    line-height: ${lineHeight.lineHeight20}px;
+    color: ${({ theme }) => parseColor(theme.colors.textDark)};
+    transition: background-color 0.2s ease;
+    user-select: none;
+    white-space: nowrap;
+
+    &[data-highlighted] {
+        background-color: ${({ theme }) => parseColor(theme.colors.primaryLight)};
+    }
+
+    &[data-disabled] {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    & svg {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+        color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    }
+`

package/components/SplitButton/SplitButton.tsx

@@ -0,0 +1,83 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { CaretDownIcon } from '@phosphor-icons/react'
+import { useTheme } from 'styled-components'
+import { ButtonVariant } from '../Button/Button.appearance'
+import { ButtonSizes } from '../Button/Button.sizes'
+import { parseColor } from '../../utils'
+import {
+    MainButton,
+    StyledContent,
+    StyledItem,
+    TriggerButton,
+    Wrapper
+} from './SplitButton.styles'
+import { SplitButtonTriggerSizes } from './SplitButton.sizes'
+import { SplitButtonProps } from './SplitButton.types'
+
+const SplitButton: React.FC<SplitButtonProps> = ({
+    label,
+    onClick,
+    options,
+    variant = 'neutralOutline',
+    color = 'primary',
+    size = 'sm',
+    disabled = false,
+    className
+}) => {
+    const theme = useTheme()
+    const buttonVariant = ButtonVariant(color, variant)
+    const buttonSize = ButtonSizes(size)
+    const triggerSize = SplitButtonTriggerSizes(size)
+
+    const mainVariantOverride = `
+        ${buttonVariant}
+        border-right: none;
+    `
+
+    const triggerVariantOverride = `
+        ${buttonVariant}
+        border-left: 1px solid ${parseColor(theme.colors.neutral400)};
+    `
+
+    return (
+        <DropdownMenu.Root>
+            <Wrapper className={className}>
+                <MainButton
+                    type="button"
+                    disabled={disabled}
+                    onClick={onClick}
+                    $variant={mainVariantOverride}
+                    $size={buttonSize}
+                >
+                    {label}
+                </MainButton>
+
+                <TriggerButton
+                    disabled={disabled}
+                    $variant={triggerVariantOverride}
+                    $size={triggerSize}
+                    aria-label="Mais opções"
+                >
+                    <CaretDownIcon weight="fill" />
+                </TriggerButton>
+            </Wrapper>
+
+            <DropdownMenu.Portal>
+                <StyledContent align="end" sideOffset={0}>
+                    {options.map((option, index) => (
+                        <StyledItem
+                            key={index}
+                            disabled={option.disabled}
+                            onSelect={option.onClick}
+                        >
+                            {option.icon}
+                            {option.label}
+                        </StyledItem>
+                    ))}
+                </StyledContent>
+            </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+    )
+}
+
+export default SplitButton

package/components/SplitButton/SplitButton.types.ts

@@ -0,0 +1,20 @@
+import { ButtonSizeTypes, ButtonVariantTypes } from '../Button/Button.types'
+import { colorType } from '../../types'
+
+export interface SplitButtonOption {
+    label: string
+    icon?: React.ReactNode
+    onClick: () => void
+    disabled?: boolean
+}
+
+export interface SplitButtonProps {
+    label: string
+    onClick: () => void
+    options: SplitButtonOption[]
+    variant?: ButtonVariantTypes
+    color?: colorType
+    size?: ButtonSizeTypes
+    disabled?: boolean
+    className?: string
+}

package/components/SplitButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SplitButton'
+export type { SplitButtonProps, SplitButtonOption } from './SplitButton.types'

package/components/Table/Table.tsx

@@ -98,6 +98,7 @@ function Table<TData>({
         isServerMode,
         controlled: datatableColumnFiltersValue,
         onChange: onDatatableColumnFiltersChange,
+        onClearSorting: (colId) => setSorting((prev) => prev.filter((s) => s.id !== colId)),
     })
 
     const queryState: TableQueryState = useMemo(() => ({
@@ -164,7 +165,7 @@ function Table<TData>({
     const currentPage = pagination.pageIndex + 1
 
     const hasActiveFilters = globalFilter !== '' || sorting.length > 0
-    const hasDatatableActiveFilters = globalFilter !== '' || columnFilters.length > 0
+    const hasDatatableActiveFilters = globalFilter !== '' || columnFilters.length > 0 || sorting.length > 0
 
     const handleClearFilters = () => {
         setGlobalFilter('')
@@ -172,6 +173,10 @@ function Table<TData>({
         setPagination((prev) => ({ ...prev, pageIndex: 0 }))
     }
 
+    const handleNumberSort = (colId: string, direction: 'asc' | 'desc' | null) => {
+        setSorting(direction ? [{ id: colId, desc: direction === 'desc' }] : [])
+    }
+
     const handleExport = async () => {
         if (onExport) {
             await onExport(queryState)
@@ -204,7 +209,10 @@ function Table<TData>({
                     enableColumnVisibility={datatableEnableColumnVisibility}
                     enableClearFilters={datatableEnableClearFilters}
                     hasActiveFilters={hasDatatableActiveFilters}
-                    onClearAll={() => handleClearAllFilters(() => setGlobalFilter(''))}
+                    onClearAll={() => {
+                        handleClearAllFilters(() => setGlobalFilter(''))
+                        setSorting([])
+                    }}
                     searchPlaceholder={searchPlaceholder}
                     searchWidth={searchWidth}
                     clearFiltersLabel={clearFiltersLabel}
@@ -263,6 +271,7 @@ function Table<TData>({
                         onFilterPopoverOpenChange={handlePopoverOpenChange}
                         onFilterValueChange={handleFilterValueChange}
                         onClearFilter={handleClearColumnFilter}
+                        onNumberSort={handleNumberSort}
                         labels={datatableFilterDropdownLabels}
                     />
                     <tbody>

package/components/Table/Table.types.ts

@@ -8,6 +8,7 @@ export type ColumnFilterValue =
     | { type: 'text'; value: string }
     | { type: 'dateRange'; value: { from?: Date; to?: Date } }
     | { type: 'select'; value: string | number | null }
+    | { type: 'numberSort'; value: 'asc' | 'desc' | null }
 
 export type DatatableColumnFilters = Record<string, ColumnFilterValue | undefined>
 
@@ -33,7 +34,7 @@ export interface ExportButtonConfig {
     ariaLabel?: string
 }
 
-export type DatatableFilterType = 'text' | 'dateRange' | 'select'
+export type DatatableFilterType = 'text' | 'dateRange' | 'select' | 'numberSort'
 
 export interface DatatableColumnMeta {
     filterType?: DatatableFilterType

package/components/Table/components/DatatableColumnFilterMenu/DatatableColumnFilterMenu.styles.ts

@@ -118,3 +118,45 @@ export const ClearFilterButtonWrapper = styled.span`
   align-items: center;
   justify-content: end;
 `
+
+export const NumberSortOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.spacing4}px;
+`
+
+export const NumberSortButton = styled.button<{ $active?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.spacing8}px;
+  width: 100%;
+  padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+  font-size: ${fontSize.fontSize14}px;
+  font-weight: ${fontWeight.fontWeight400};
+  border-radius: ${radius.radius4}px;
+  border: 1px solid ${({ theme, $active }) =>
+    $active ? parseColor(theme.colors.primary) : parseColor(theme.colors.neutral300)};
+  background: ${({ theme, $active }) =>
+    $active ? parseColor(theme.colors.primaryLighter) : parseColor(theme.colors.white)};
+  color: ${({ theme, $active }) =>
+    $active ? parseColor(theme.colors.primary) : parseColor(theme.colors.textDark)};
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  outline: none;
+
+  & svg {
+    flex-shrink: 0;
+    color: ${({ theme, $active }) =>
+      $active ? parseColor(theme.colors.primary) : parseColor(theme.colors.textMedium)};
+  }
+
+  &:hover:not([aria-pressed='true']) {
+    background: ${({ theme }) => parseColor(theme.colors.neutral100)};
+    border-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => parseColor(theme.colors.primary)};
+    outline-offset: 1px;
+  }
+`

package/components/Table/components/DatatableColumnFilterMenu/DatatableColumnFilterMenu.tsx

@@ -1,5 +1,5 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { XIcon } from '@phosphor-icons/react'
+import { ArrowDownIcon, ArrowUpIcon, XIcon } from '@phosphor-icons/react'
 import { DateRange } from 'react-day-picker'
 import DatePicker from '../../../DatePicker'
 import Select from '../../../Select'
@@ -19,6 +19,8 @@ import {
   FilterTriggerArea,
   FunnelActiveIcon,
   FunnelInactiveIcon,
+  NumberSortButton,
+  NumberSortOptions,
   StyledTextInput,
 } from './DatatableColumnFilterMenu.styles'
 
@@ -31,6 +33,7 @@ interface DatatableColumnFilterMenuProps {
   filterValue: ColumnFilterValue | undefined
   onFilterValueChange: (columnId: string, value: ColumnFilterValue | undefined) => void
   onClearFilter: (columnId: string) => void
+  onNumberSort: (colId: string, direction: 'asc' | 'desc' | null) => void
   labels?: DatatableFilterDropdownLabels
 }
 
@@ -44,6 +47,7 @@ function DatatableColumnFilterMenu({
   filterValue,
   onFilterValueChange,
   onClearFilter,
+  onNumberSort,
   labels = {},
 }: DatatableColumnFilterMenuProps) {
   const filterType = meta?.filterType
@@ -59,7 +63,8 @@ function DatatableColumnFilterMenu({
     ((filterValue.type === 'text' && filterValue.value !== '') ||
       (filterValue.type === 'select' && filterValue.value != null) ||
       (filterValue.type === 'dateRange' &&
-        (filterValue.value.from != null || filterValue.value.to != null)))
+        (filterValue.value.from != null || filterValue.value.to != null)) ||
+      (filterValue.type === 'numberSort' && filterValue.value != null))
 
   const handleTriggerClick = (e: React.MouseEvent) => {
     e.stopPropagation()
@@ -92,6 +97,17 @@ function DatatableColumnFilterMenu({
     onOpenChange(false)
   }
 
+  const handleNumberSort = (direction: 'asc' | 'desc') => {
+    const current = filterValue?.type === 'numberSort' ? filterValue.value : null
+    const next = current === direction ? null : direction
+    onFilterValueChange(columnId, { type: 'numberSort', value: next })
+    onNumberSort(columnId, next)
+    onOpenChange(false)
+  }
+
+  const currentSortDirection =
+    filterValue?.type === 'numberSort' ? filterValue.value : null
+
   const rangeValue: DateRange | undefined =
     filterValue?.type === 'dateRange'
       ? { from: filterValue.value.from, to: filterValue.value.to }
@@ -204,6 +220,29 @@ function DatatableColumnFilterMenu({
                 onValueChange={handleSelectChange}
               />
             )}
+
+            {filterType === 'numberSort' && (
+              <NumberSortOptions>
+                <NumberSortButton
+                  type="button"
+                  $active={currentSortDirection === 'asc'}
+                  onClick={() => handleNumberSort('asc')}
+                  aria-pressed={currentSortDirection === 'asc'}
+                >
+                  <ArrowUpIcon size={14} />
+                  Crescente
+                </NumberSortButton>
+                <NumberSortButton
+                  type="button"
+                  $active={currentSortDirection === 'desc'}
+                  onClick={() => handleNumberSort('desc')}
+                  aria-pressed={currentSortDirection === 'desc'}
+                >
+                  <ArrowDownIcon size={14} />
+                  Decrescente
+                </NumberSortButton>
+              </NumberSortOptions>
+            )}
           </FilterPopoverContent>
         </PopoverPrimitive.Content>
       </PopoverPrimitive.Portal>

package/components/Table/components/TableHeader/TableHeader.tsx

@@ -12,6 +12,7 @@ interface TableHeaderProps<TData> {
     onFilterPopoverOpenChange: (colId: string, isOpen: boolean) => void
     onFilterValueChange: (colId: string, value: any) => void
     onClearFilter: (colId: string) => void
+    onNumberSort: (colId: string, direction: 'asc' | 'desc' | null) => void
     labels?: DatatableFilterDropdownLabels
 }
 
@@ -23,6 +24,7 @@ function TableHeader<TData>({
     onFilterPopoverOpenChange,
     onFilterValueChange,
     onClearFilter,
+    onNumberSort,
     labels = {},
 }: TableHeaderProps<TData>) {
     return (
@@ -39,7 +41,8 @@ function TableHeader<TData>({
                             (colFilterValue.type === 'select' && colFilterValue.value != null) ||
                             (colFilterValue.type === 'dateRange' && (
                                 colFilterValue.value.from != null || colFilterValue.value.to != null
-                            ))
+                            )) ||
+                            (colFilterValue.type === 'numberSort' && colFilterValue.value != null)
                         )
 
                         return (
@@ -73,6 +76,7 @@ function TableHeader<TData>({
                                         filterValue={datatableFilters[header.column.id]}
                                         onFilterValueChange={onFilterValueChange}
                                         onClearFilter={onClearFilter}
+                                        onNumberSort={onNumberSort}
                                         labels={labels}
                                     />
                                 ) : (

package/components/Table/hooks/useDatatableFilters.ts

@@ -9,12 +9,14 @@ interface UseDatatableFiltersProps {
     isServerMode: boolean
     controlled?: DatatableColumnFilters
     onChange?: (next: DatatableColumnFilters) => void
+    onClearSorting?: (colId: string) => void
 }
 
 export function useDatatableFilters({
     isServerMode,
     controlled,
     onChange,
+    onClearSorting,
 }: UseDatatableFiltersProps) {
     const isControlled = controlled !== undefined
     const [internal, setInternal] = useState<DatatableColumnFilters>({})
@@ -42,18 +44,21 @@ export function useDatatableFilters({
                 const { from, to } = value.value
                 return from || to ? [...rest, { id: colId, value: { from, to } }] : rest
             }
+            // numberSort does not use columnFilters — handled via sorting state
             return rest
         })
     }, [filters, isServerMode, updateFilters])
 
     const handleClearColumnFilter = useCallback((colId: string) => {
+        const prev = filters[colId]
         const next = { ...filters }
         delete next[colId]
         updateFilters(next)
         setColumnFilters((prev) => prev.filter((f) => f.id !== colId))
         if (openFilterColumnId === colId) setOpenFilterColumnId(null)
-    }, [filters, openFilterColumnId, updateFilters])
-
+        // if clearing a numberSort column, also clear the table sorting
+        if (prev?.type === 'numberSort') onClearSorting?.(colId)
+    }, [filters, openFilterColumnId, updateFilters, onClearSorting])
     const handleClearAllFilters = useCallback((onClearGlobal: () => void) => {
         onClearGlobal()
         setColumnFilters([])
@@ -71,6 +76,7 @@ export function useDatatableFilters({
         if (v.type === 'text') return v.value !== ''
         if (v.type === 'select') return v.value != null
         if (v.type === 'dateRange') return v.value.from != null || v.value.to != null
+        if (v.type === 'numberSort') return v.value != null
         return false
     }, [filters])
 

package/components/Table/stories.fixtures.ts

@@ -1,5 +1,6 @@
 import { ColumnDef } from '@tanstack/react-table'
 import { DatatableColumnMeta } from './Table.types'
+import { currencySortingFn } from './utils'
 
 export type OrderRow = {
     id: string
@@ -82,10 +83,10 @@ export const DATATABLE_COLUMNS: ColumnDef<OrderRow, unknown>[] = [
     { 
         header: 'Valor', 
         accessorKey: 'amount',
+        sortingFn: currencySortingFn,
         meta: {
-            filterType: 'text',
+            filterType: 'numberSort',
             filterLabel: 'valor',
-            filterPlaceholder: 'Buscar pelo valor',
         } satisfies DatatableColumnMeta,
     },
     {

package/components/Table/utils/currencySortingFn.ts

@@ -0,0 +1,20 @@
+import { Row } from '@tanstack/react-table'
+
+const parseNumericValue = (raw: unknown): number => {
+    if (typeof raw === 'number') return raw
+    if (typeof raw !== 'string') return 0
+    const cleaned = raw.replace(/[^\d,.-]/g, '').replace(/\.(?=\d{3})/g, '').replace(',', '.')
+    return parseFloat(cleaned) || 0
+}
+
+export const currencySortingFn = <TData>(
+    rowA: Row<TData>,
+    rowB: Row<TData>,
+    columnId: string
+): number => {
+    const a = parseNumericValue(rowA.getValue(columnId))
+    const b = parseNumericValue(rowB.getValue(columnId))
+    return a - b
+}
+
+currencySortingFn.autoRemove = (val: unknown) => val == null

package/components/Table/utils/index.ts

@@ -1,2 +1,3 @@
 export { default as getPageNumbers } from './getPageNumbers'
 export { dateRangeFilterFn } from './dateRangeFilterFn'
+export { currencySortingFn } from './currencySortingFn'

package/components/index.ts

@@ -18,5 +18,8 @@ export { default as RadioButton } from './RadioButton'
 export { ToastProvider, Toaster } from './Toaster'
 export { default as Dialog } from './Dialog'
 export { Combobox } from './Combobox'
+export { default as SplitButton } from './SplitButton'
 export { default as Table } from './Table'
 export { default as Tabs } from './Tabs'
+export { Skeleton } from './Skeleton'
+export type { SkeletonProps } from './Skeleton'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.34",
+    "version": "0.0.36",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {
@@ -25,7 +25,8 @@
         "react-toastify": "^11.0.5",
         "cmdk": "^1.1.1",
         "date-fns": "^2.30.0",
-        "@tanstack/react-table": "^8.0.0"
+        "@tanstack/react-table": "^8.0.0",
+        "react-loading-skeleton": "^3.5.0"
     },
     "scripts": {
         "lint": "eslint ."