@liguelead/design-system 0.0.8 → 0.0.10

package/components/IconButton/IconButton.tsx

@@ -1,70 +1,70 @@
-import { useState } from 'react'
-import { ButtonProps, RippleInterface } from '../Button/Button.types'
-import { ButtonAppearance } from '../Button/Button.appearance'
-import { IconButtonSizes } from './IconButton.sizes'
-import { RippleContainer, StyledButton } from '../Button/Button.styles'
-
-const IconButton: React.FC<ButtonProps> = ({
-    appearance = 'solid',
-    children,
-    className,
-    color = 'primary',
-    disabled,
-    fluid = false,
-    size = 'md',
-    onClick,
-    ...rest
-}) => {
-    const [ripples, setRipples] = useState<RippleInterface[]>([])
-
-    const buttonSize = IconButtonSizes(size)
-    const buttonAppearance = ButtonAppearance(color, appearance)
-
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        const rect = e.currentTarget.getBoundingClientRect()
-        const x = e.clientX - rect.left
-        const y = e.clientY - rect.top
-
-        const newRipple: RippleInterface = {
-            id: `${Date.now()}-${Math.random()}`,
-            x,
-            y
-        }
-        setRipples(prev => [...prev, newRipple])
-
-        // Chama o onClick fornecido
-        if (onClick) {
-            onClick(e)
-        }
-    }
-
-    return (
-        <StyledButton
-            disabled={disabled}
-            className={className}
-            $fluid={fluid}
-            $appearance={buttonAppearance}
-            onClick={handleClick}
-            $buttonSize={buttonSize}
-            {...rest}>
-            {children}
-            {ripples.map(ripple => (
-                <RippleContainer
-                    $appearance={appearance}
-                    key={ripple.id}
-                    style={{
-                        top: ripple.y - 10,
-                        left: ripple.x - 10,
-                        width: 20,
-                        height: 20
-                    }}
-                    onAnimationEnd={() =>
-                        setRipples(prev => prev.filter(r => r.id !== ripple.id))
-                    }
-                />
-            ))}
-        </StyledButton>
-    )
-}
-
-export default IconButton
+import { useState } from 'react'
+import { ButtonProps, RippleInterface } from '../Button/Button.types'
+import { ButtonAppearance } from '../Button/Button.appearance'
+import { IconButtonSizes } from './IconButton.sizes'
+import { RippleContainer, StyledButton } from '../Button/Button.styles'
+
+const IconButton: React.FC<ButtonProps> = ({
+    appearance = 'solid',
+    children,
+    className,
+    color = 'primary',
+    disabled,
+    fluid = false,
+    size = 'md',
+    onClick,
+    ...rest
+}) => {
+    const [ripples, setRipples] = useState<RippleInterface[]>([])
+
+    const buttonSize = IconButtonSizes(size)
+    const buttonAppearance = ButtonAppearance(color, appearance)
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        const rect = e.currentTarget.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+
+        const newRipple: RippleInterface = {
+            id: `${Date.now()}-${Math.random()}`,
+            x,
+            y
+        }
+        setRipples(prev => [...prev, newRipple])
+
+        // Chama o onClick fornecido
+        if (onClick) {
+            onClick(e)
+        }
+    }
+
+    return (
+        <StyledButton
+            disabled={disabled}
+            className={className}
+            $fluid={fluid}
+            $appearance={buttonAppearance}
+            onClick={handleClick}
+            $buttonSize={buttonSize}
+            {...rest}>
+            {children}
+            {ripples.map(ripple => (
+                <RippleContainer
+                    $appearance={appearance}
+                    key={ripple.id}
+                    style={{
+                        top: ripple.y - 10,
+                        left: ripple.x - 10,
+                        width: 20,
+                        height: 20
+                    }}
+                    onAnimationEnd={() =>
+                        setRipples(prev => prev.filter(r => r.id !== ripple.id))
+                    }
+                />
+            ))}
+        </StyledButton>
+    )
+}
+
+export default IconButton

package/components/IconButton/index.ts

@@ -1 +1 @@
-export { default } from './IconButton'
+export { default } from './IconButton'

package/components/PageWrapper/PageWrapper.tsx

@@ -1,31 +1,31 @@
-import {parseColor} from '../../utils'
-import styled from 'styled-components'
-import {colorType} from 'types'
-import {spacing, SpacingInterface} from '@liguelead/foundation'
-
-type SpacingType = keyof SpacingInterface
-
-interface WrapperProps {
-    width?: string
-    bgColor?: colorType
-    padding?: SpacingType
-}
-
-const PageWrapper = styled.div.withConfig({
-    shouldForwardProp: prop => !['bgColor', 'width', 'padding'].includes(prop)
-})<WrapperProps>`
-    width: 100%;
-    height: 100%;
-    max-width: ${({width}) => width + 'px' || '100%'};
-    margin: 0 auto;
-    padding: ${({padding}) =>
-        padding ? spacing[padding] + 'px' : spacing.spacing16 + 'px'};
-    border-radius: 4px;
-    background: ${({bgColor, theme}) =>
-        bgColor
-            ? parseColor(theme.colors[bgColor])
-            : parseColor(theme.colors.white)};
-    border: 1px solid ${({theme}) => parseColor(theme.colors.neutral300)};
-`
-
-export default PageWrapper
+import {parseColor} from '../../utils'
+import styled from 'styled-components'
+import {colorType} from 'types'
+import {spacing, SpacingInterface} from '@liguelead/foundation'
+
+type SpacingType = keyof SpacingInterface
+
+interface WrapperProps {
+    width?: string
+    bgColor?: colorType
+    padding?: SpacingType
+}
+
+const PageWrapper = styled.div.withConfig({
+    shouldForwardProp: prop => !['bgColor', 'width', 'padding'].includes(prop)
+})<WrapperProps>`
+    width: 100%;
+    height: 100%;
+    max-width: ${({width}) => width + 'px' || '100%'};
+    margin: 0 auto;
+    padding: ${({padding}) =>
+        padding ? spacing[padding] + 'px' : spacing.spacing16 + 'px'};
+    border-radius: 4px;
+    background: ${({bgColor, theme}) =>
+        bgColor
+            ? parseColor(theme.colors[bgColor])
+            : parseColor(theme.colors.white)};
+    border: 1px solid ${({theme}) => parseColor(theme.colors.neutral300)};
+`
+
+export default PageWrapper

package/components/PageWrapper/index.ts

@@ -1 +1 @@
-export { default } from './PageWrapper'
+export { default } from './PageWrapper'

package/components/SegmentedButton/SegmentedButton.styles.ts

@@ -1,29 +1,29 @@
-import styled from 'styled-components'
-import Button from '../Button'
-import { parseColor } from '../../utils'
-
-export const WrapperSegmentedButton = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-    width: fit-content;
-`
-
-export const LeftButton = styled(Button)`
-    border-radius: 4px 0 0 4px;
-    box-shadow: none;
-    border-right: none;
-
-    &:disabled {
-        border-color: ${({ theme }) => parseColor(theme.colors.neutral500)};
-    }
-`
-
-export const RightButton = styled(Button)`
-    border-radius: 0 4px 4px 0;
-    border-left: none;
-    &:focus {
-        box-shadow: none;
-    }
-`
+import styled from 'styled-components'
+import Button from '../Button'
+import { parseColor } from '../../utils'
+
+export const WrapperSegmentedButton = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    width: fit-content;
+`
+
+export const LeftButton = styled(Button)`
+    border-radius: 4px 0 0 4px;
+    box-shadow: none;
+    border-right: none;
+
+    &:disabled {
+        border-color: ${({ theme }) => parseColor(theme.colors.neutral500)};
+    }
+`
+
+export const RightButton = styled(Button)`
+    border-radius: 0 4px 4px 0;
+    border-left: none;
+    &:focus {
+        box-shadow: none;
+    }
+`

package/components/SegmentedButton/SegmentedButton.tsx

@@ -1,49 +1,49 @@
-import { SegmentedButtonProps } from './SegmentedButton.types'
-import {
-    LeftButton,
-    RightButton,
-    WrapperSegmentedButton
-} from './SegmentedButton.styles'
-import { useState } from 'react'
-
-const SegmentedButton: React.FC<SegmentedButtonProps> = ({
-    options,
-    disabled = false,
-    color = 'primary',
-    size = 'md',
-    ...rest
-}) => {
-    const { leftButton, rightButton } = options
-    const [selected, setSelected] = useState<string>('left')
-
-    return (
-        <WrapperSegmentedButton {...rest}>
-            <LeftButton
-                color={color}
-                disabled={disabled}
-                appearance={selected === 'left' ? 'solid' : 'outline'}
-                size={size}
-                onClick={() => {
-                    setSelected('left')
-                    leftButton.action?.()
-                }}
-                type="button">
-                {leftButton.label}
-            </LeftButton>
-            <RightButton
-                color={color}
-                appearance={selected === 'right' ? 'solid' : 'outline'}
-                disabled={disabled}
-                onClick={() => {
-                    setSelected('right')
-                    rightButton.action?.()
-                }}
-                size={size}
-                type="button">
-                {rightButton.label}
-            </RightButton>
-        </WrapperSegmentedButton>
-    )
-}
-
-export default SegmentedButton
+import { SegmentedButtonProps } from './SegmentedButton.types'
+import {
+    LeftButton,
+    RightButton,
+    WrapperSegmentedButton
+} from './SegmentedButton.styles'
+import { useState } from 'react'
+
+const SegmentedButton: React.FC<SegmentedButtonProps> = ({
+    options,
+    disabled = false,
+    color = 'primary',
+    size = 'md',
+    ...rest
+}) => {
+    const { leftButton, rightButton } = options
+    const [selected, setSelected] = useState<string>('left')
+
+    return (
+        <WrapperSegmentedButton {...rest}>
+            <LeftButton
+                color={color}
+                disabled={disabled}
+                appearance={selected === 'left' ? 'solid' : 'outline'}
+                size={size}
+                onClick={() => {
+                    setSelected('left')
+                    leftButton.action?.()
+                }}
+                type="button">
+                {leftButton.label}
+            </LeftButton>
+            <RightButton
+                color={color}
+                appearance={selected === 'right' ? 'solid' : 'outline'}
+                disabled={disabled}
+                onClick={() => {
+                    setSelected('right')
+                    rightButton.action?.()
+                }}
+                size={size}
+                type="button">
+                {rightButton.label}
+            </RightButton>
+        </WrapperSegmentedButton>
+    )
+}
+
+export default SegmentedButton

package/components/SegmentedButton/SegmentedButton.types.ts

@@ -1,20 +1,20 @@
-import { colorType } from 'types'
-type SegmentedButtonType = {
-    label: string
-    action?: () => void
-}
-
-interface SegmentedButtons {
-    leftButton: SegmentedButtonType
-    rightButton: SegmentedButtonType
-}
-
-export interface SegmentedButtonProps {
-    className?: string
-    options: SegmentedButtons
-    disabled?: boolean
-    color?: colorType
-    size?: SegmentedButtonSizeTypes
-}
-
-export type SegmentedButtonSizeTypes = 'sm' | 'md' | 'lg'
+import { colorType } from 'types'
+type SegmentedButtonType = {
+    label: string
+    action?: () => void
+}
+
+interface SegmentedButtons {
+    leftButton: SegmentedButtonType
+    rightButton: SegmentedButtonType
+}
+
+export interface SegmentedButtonProps {
+    className?: string
+    options: SegmentedButtons
+    disabled?: boolean
+    color?: colorType
+    size?: SegmentedButtonSizeTypes
+}
+
+export type SegmentedButtonSizeTypes = 'sm' | 'md' | 'lg'

package/components/SegmentedButton/index.ts

@@ -1 +1 @@
-export { default } from './SegmentedButton'
+export { default } from './SegmentedButton'

package/components/Select/Select.sizes.ts

@@ -1,56 +1,56 @@
-import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
-import { TextFieldSize } from './Select.types'
-
-export const textFieldSizes = (
-    size: TextFieldSize,
-    leftIcon: boolean,
-    rightIcon: boolean
-) => {
-    const withIconMargin = Number(spacing.spacing8) + 20
-    const withIconPadding = {
-        sm: Number(spacing.spacing12) + Number(withIconMargin),
-        md: Number(spacing.spacing16) + Number(withIconMargin),
-        lg: Number(spacing.spacing16) + Number(withIconMargin)
-    }
-
-    const sizes = {
-        sm: {
-            input: `
-        font-size: ${fontSize.fontSize14}px;    
-        line-height: ${lineHeight.lineHeight22}px;    
-        padding: ${spacing.spacing8}px ${spacing.spacing12}px;
-        padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
-        padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
-      `,
-            label: `font-size: ${fontSize.fontSize14}px;
-              margin-left: ${leftIcon ? withIconMargin : 0}px;
-              margin-right: ${rightIcon ? withIconMargin : 0}px;`
-        },
-        md: {
-            input: `
-      font-size: ${fontSize.fontSize14}px;
-      line-height: ${lineHeight.lineHeight20}px;
-      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
-      padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
-      padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
-    `,
-            label: `font-size: ${fontSize.fontSize14}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
-        },
-        lg: {
-            input: `
-      font-size: ${fontSize.fontSize16}px;
-      line-height: ${lineHeight.lineHeight24}px;
-      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
-      padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
-      padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
-    `,
-            label: `font-size: ${fontSize.fontSize16}px;
-            margin-left: ${leftIcon ? withIconMargin : 0}px;
-            margin-right: ${rightIcon ? withIconMargin : 0}px;`
-        }
-    }
-
-    return sizes[size]
-}
+import { fontSize, lineHeight, spacing } from '@liguelead/foundation'
+import { TextFieldSize } from './Select.types'
+
+export const textFieldSizes = (
+    size: TextFieldSize,
+    leftIcon: boolean,
+    rightIcon: boolean
+) => {
+    const withIconMargin = Number(spacing.spacing8) + 20
+    const withIconPadding = {
+        sm: Number(spacing.spacing12) + Number(withIconMargin),
+        md: Number(spacing.spacing16) + Number(withIconMargin),
+        lg: Number(spacing.spacing16) + Number(withIconMargin)
+    }
+
+    const sizes = {
+        sm: {
+            input: `
+        font-size: ${fontSize.fontSize14}px;    
+        line-height: ${lineHeight.lineHeight22}px;    
+        padding: ${spacing.spacing8}px ${spacing.spacing12}px;
+        padding-left: ${leftIcon ? withIconPadding.sm : spacing.spacing12}px;
+        padding-right: ${rightIcon ? withIconPadding.sm : spacing.spacing12}px;
+      `,
+            label: `font-size: ${fontSize.fontSize14}px;
+              margin-left: ${leftIcon ? withIconMargin : 0}px;
+              margin-right: ${rightIcon ? withIconMargin : 0}px;`
+        },
+        md: {
+            input: `
+      font-size: ${fontSize.fontSize14}px;
+      line-height: ${lineHeight.lineHeight20}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.md : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.md : spacing.spacing16}px;
+    `,
+            label: `font-size: ${fontSize.fontSize14}px;
+            margin-left: ${leftIcon ? withIconMargin : 0}px;
+            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+        },
+        lg: {
+            input: `
+      font-size: ${fontSize.fontSize16}px;
+      line-height: ${lineHeight.lineHeight24}px;
+      padding: ${spacing.spacing12}px ${spacing.spacing16}px;
+      padding-left: ${leftIcon ? withIconPadding.lg : spacing.spacing16}px;
+      padding-right: ${rightIcon ? withIconPadding.lg : spacing.spacing16}px;
+    `,
+            label: `font-size: ${fontSize.fontSize16}px;
+            margin-left: ${leftIcon ? withIconMargin : 0}px;
+            margin-right: ${rightIcon ? withIconMargin : 0}px;`
+        }
+    }
+
+    return sizes[size]
+}