@liguelead/design-system 0.0.8 → 0.0.10

package/components/Select/Select.states.tsx

@@ -1,69 +1,69 @@
-import { parseColor } from '../../utils'
-import { useTheme } from 'styled-components'
-import { fontWeight, fontSize } from '@liguelead/foundation'
-import { TextFieldStates } from './Select.types'
-
-export const SelectStates = (state: keyof TextFieldStates) => {
-    const theme = useTheme()
-    const states: TextFieldStates = {
-        error: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.danger100)};
-                color: ${parseColor(theme.colors.neutral1000)};
-                &:focus {
-                    border-color: ${parseColor(theme.colors.danger100)};
-                }
-                &:focus + label {
-                    color: ${parseColor(theme.colors.danger100)};
-                }
-            `,
-            label: `color: ${parseColor(theme.colors.danger100)};`,
-            helperText: `color: ${parseColor(theme.colors.danger100)};`,
-            animation: `
-                &:focus div + label,
-                &:not(:placeholder-shown) + label {
-                    top: 0px;
-                    left: 12px;
-                    font-size: ${fontSize.fontSize12}px;
-                }`
-        },
-        default: {
-            input: `
-                border: 1px solid ${parseColor(theme.colors.neutral700)};
-                color: ${parseColor(theme.colors.neutral1000)};
-             
-                &:focus {
-                    border-color: ${parseColor(theme.colors.primary)};
-                }
-                &:focus label,
-                &:focus-within label {
-                    color: ${parseColor(theme.colors.primary)} !important;
-                    font-weight: ${fontWeight.fontWeight600};
-                    .select-label {
-                        color: ${parseColor(theme.colors.primary)};
-                    }
-                }
-            `,
-            label: `color: ${parseColor(theme.colors.neutral800)};`,
-            helperText: `color: ${parseColor(theme.colors.neutral700)};`,
-            animation: `
-                &:focus + label,
-                &:not(:placeholder-shown) + label {
-                    top: 0px;
-                    left: 12px;
-                    font-size: ${fontSize.fontSize12}px;
-                }`
-        },
-        disabled: {
-            input: `
-                border: 2px solid ${parseColor(theme.colors.neutral500)};
-                color: ${parseColor(theme.colors.neutral600)};
-            `,
-            label: `color: ${parseColor(theme.colors.neutral500)};
-                    background: transparent;`,
-            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
-            animation: ``
-        }
-    }
-    return states[state]
-}
+import { parseColor } from '../../utils'
+import { useTheme } from 'styled-components'
+import { fontWeight, fontSize } from '@liguelead/foundation'
+import { TextFieldStates } from './Select.types'
+
+export const SelectStates = (state: keyof TextFieldStates) => {
+    const theme = useTheme()
+    const states: TextFieldStates = {
+        error: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.danger100)};
+                color: ${parseColor(theme.colors.neutral1000)};
+                &:focus {
+                    border-color: ${parseColor(theme.colors.danger100)};
+                }
+                &:focus + label {
+                    color: ${parseColor(theme.colors.danger100)};
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.danger100)};`,
+            helperText: `color: ${parseColor(theme.colors.danger100)};`,
+            animation: `
+                &:focus div + label,
+                &:not(:placeholder-shown) + label {
+                    top: 0px;
+                    left: 12px;
+                    font-size: ${fontSize.fontSize12}px;
+                }`
+        },
+        default: {
+            input: `
+                border: 1px solid ${parseColor(theme.colors.neutral700)};
+                color: ${parseColor(theme.colors.neutral1000)};
+             
+                &:focus {
+                    border-color: ${parseColor(theme.colors.primary)};
+                }
+                &:focus label,
+                &:focus-within label {
+                    color: ${parseColor(theme.colors.primary)} !important;
+                    font-weight: ${fontWeight.fontWeight600};
+                    .select-label {
+                        color: ${parseColor(theme.colors.primary)};
+                    }
+                }
+            `,
+            label: `color: ${parseColor(theme.colors.neutral800)};`,
+            helperText: `color: ${parseColor(theme.colors.neutral700)};`,
+            animation: `
+                &:focus + label,
+                &:not(:placeholder-shown) + label {
+                    top: 0px;
+                    left: 12px;
+                    font-size: ${fontSize.fontSize12}px;
+                }`
+        },
+        disabled: {
+            input: `
+                border: 2px solid ${parseColor(theme.colors.neutral500)};
+                color: ${parseColor(theme.colors.neutral600)};
+            `,
+            label: `color: ${parseColor(theme.colors.neutral500)};
+                    background: transparent;`,
+            helperText: `color: ${parseColor(theme.colors.neutral500)};`,
+            animation: ``
+        }
+    }
+    return states[state]
+}

package/components/Select/Select.styles.ts

@@ -1,148 +1,148 @@
-import styled from 'styled-components'
-import { TextFieldSizeType, StateInterface } from './Select.types'
-import {
-    fontSize,
-    fontWeight,
-    lineHeight,
-    spacing
-} from '@liguelead/foundation'
-import { parseColor } from '../../utils'
-import { Content, Item } from '@radix-ui/react-select'
-
-interface StyledInputProps {
-    size: TextFieldSizeType
-    $themefication: StateInterface
-}
-
-export const InputWrapper = styled.div`
-    position: relative;
-    width: 100%;
-`
-
-export const FloatingLabel = styled.label`
-    position: absolute;
-    top: 50%;
-    left: 12px;
-    transform: translateY(-50%);
-    font-weight: ${fontWeight.fontWeight600};
-    transition: all 0.2s ease;
-    pointer-events: none;
-    background-color: white;
-    padding: 0 4px;
-    &.is-open {
-        color: ${({ theme }) => parseColor(theme.colors.primary)} !important;
-    }
-`
-
-export const HelperText = styled.span<{ error?: boolean }>`
-    font-size: ${fontSize.fontSize12}px;
-    line-height: ${lineHeight.lineHeight12}px;
-    padding-left: ${spacing.spacing16}px;
-`
-
-export const IconWrapper = styled.div<{ $right?: boolean; $error?: boolean }>`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    cursor: pointer;
-    ${({ $right }) => ($right ? 'right: 0px;' : 'left: 0px;')}
-    padding: 0px ${spacing.spacing16}px;
-
-    & svg {
-        width: 20px;
-        height: 20px;
-        fill: ${({ theme, $error }) =>
-            $error
-                ? parseColor(theme.colors.danger100)
-                : parseColor(theme.colors.neutral700)};
-        transition: fill 0.2s ease;
-    }
-`
-
-export const StyledContent = styled(Content)`
-    padding: 0px;
-    background-color: #fff;
-    min-width: var(--radix-select-trigger-width, auto);
-    width: 100%;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral500)};
-    border-top: 0px;
-    max-height: var(--radix-select-content-height, 314px);
-    overflow-y: scroll !important;
-    z-index: 10;
-    & .RadixSelectViewport {
-        max-height: 200px; /* Limite de altura do dropdown */
-        overflow-y: auto; /* Adiciona o scroll quando necessário */
-        scrollbar-width: thin; /* Personaliza a largura do scroll (opcional) */
-    }
-`
-
-export const StyledItem = styled(Item)`
-    padding: ${spacing.spacing12}px ${spacing.spacing20}px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    transition: all 0.2s ease;
-    cursor: pointer;
-    &:hover {
-        background-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
-    }
-    &[data-state='checked'] {
-        background-color: ${({ theme }) =>
-            parseColor(theme.colors.primaryLight)};
-    }
-`
-
-export const StyledInput = styled.input.withConfig({
-    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
-})`
-    width: 100%;
-    border-radius: 4px;
-    outline: none;
-    transition: border-color 0.2s ease;
-    background: transparent;
-    &.is-open {
-        border-color: ${({ theme }) =>
-            parseColor(theme.colors.primary)} !important;
-    }
-`
-
-export const BorderWrapper = styled.div`
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    border: 2px solid #ccc;
-    border-radius: 4px;
-    background-color: transparent;
-    z-index: -1;
-
-    ${StyledInput}:focus ~ & {
-        border-color: ${({ theme }) => theme.colors.primary};
-    }
-`
-
-export const Wrapper = styled.div<StyledInputProps>`
-    position: relative;
-    width: 100%;
-    cursor: pointer;
-    ${({ $themefication, size }) => `
-            ${StyledInput} {
-                ${$themefication.animation}
-                ${$themefication.input}
-                ${size.input}
-            }
-            ${FloatingLabel} {
-                ${$themefication.label}
-                ${size.label}
-            }
-            ${HelperText} {
-                ${$themefication.label} 
-            }
-        `}
-`
+import styled from 'styled-components'
+import { TextFieldSizeType, StateInterface } from './Select.types'
+import {
+    fontSize,
+    fontWeight,
+    lineHeight,
+    spacing
+} from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import { Content, Item } from '@radix-ui/react-select'
+
+interface StyledInputProps {
+    size: TextFieldSizeType
+    $themefication: StateInterface
+}
+
+export const InputWrapper = styled.div`
+    position: relative;
+    width: 100%;
+`
+
+export const FloatingLabel = styled.label`
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+    font-weight: ${fontWeight.fontWeight600};
+    transition: all 0.2s ease;
+    pointer-events: none;
+    background-color: white;
+    padding: 0 4px;
+    &.is-open {
+        color: ${({ theme }) => parseColor(theme.colors.primary)} !important;
+    }
+`
+
+export const HelperText = styled.span<{ error?: boolean }>`
+    font-size: ${fontSize.fontSize12}px;
+    line-height: ${lineHeight.lineHeight12}px;
+    padding-left: ${spacing.spacing16}px;
+`
+
+export const IconWrapper = styled.div<{ $right?: boolean; $error?: boolean }>`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    cursor: pointer;
+    ${({ $right }) => ($right ? 'right: 0px;' : 'left: 0px;')}
+    padding: 0px ${spacing.spacing16}px;
+
+    & svg {
+        width: 20px;
+        height: 20px;
+        fill: ${({ theme, $error }) =>
+            $error
+                ? parseColor(theme.colors.danger100)
+                : parseColor(theme.colors.neutral700)};
+        transition: fill 0.2s ease;
+    }
+`
+
+export const StyledContent = styled(Content)`
+    padding: 0px;
+    background-color: #fff;
+    min-width: var(--radix-select-trigger-width, auto);
+    width: 100%;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border: 1px solid ${({ theme }) => parseColor(theme.colors.neutral500)};
+    border-top: 0px;
+    max-height: var(--radix-select-content-height, 314px);
+    overflow-y: scroll !important;
+    z-index: 10;
+    & .RadixSelectViewport {
+        max-height: 200px; /* Limite de altura do dropdown */
+        overflow-y: auto; /* Adiciona o scroll quando necessário */
+        scrollbar-width: thin; /* Personaliza a largura do scroll (opcional) */
+    }
+`
+
+export const StyledItem = styled(Item)`
+    padding: ${spacing.spacing12}px ${spacing.spacing20}px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    &:hover {
+        background-color: ${({ theme }) => parseColor(theme.colors.neutral200)};
+    }
+    &[data-state='checked'] {
+        background-color: ${({ theme }) =>
+            parseColor(theme.colors.primaryLight)};
+    }
+`
+
+export const StyledInput = styled.input.withConfig({
+    shouldForwardProp: prop => !['control', 'errors', 'rules'].includes(prop)
+})`
+    width: 100%;
+    border-radius: 4px;
+    outline: none;
+    transition: border-color 0.2s ease;
+    background: transparent;
+    &.is-open {
+        border-color: ${({ theme }) =>
+            parseColor(theme.colors.primary)} !important;
+    }
+`
+
+export const BorderWrapper = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: transparent;
+    z-index: -1;
+
+    ${StyledInput}:focus ~ & {
+        border-color: ${({ theme }) => theme.colors.primary};
+    }
+`
+
+export const Wrapper = styled.div<StyledInputProps>`
+    position: relative;
+    width: 100%;
+    cursor: pointer;
+    ${({ $themefication, size }) => `
+            ${StyledInput} {
+                ${$themefication.animation}
+                ${$themefication.input}
+                ${size.input}
+            }
+            ${FloatingLabel} {
+                ${$themefication.label}
+                ${size.label}
+            }
+            ${HelperText} {
+                ${$themefication.label} 
+            }
+        `}
+`