analytica-frontend-lib 1.1.76 → 1.1.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordation/index.js.map +1 -1
- package/dist/Accordation/index.mjs.map +1 -1
- package/dist/Alert/index.js.map +1 -1
- package/dist/Alert/index.mjs.map +1 -1
- package/dist/AlertDialog/index.js.map +1 -1
- package/dist/AlertDialog/index.mjs.map +1 -1
- package/dist/Alternative/index.js.map +1 -1
- package/dist/Alternative/index.mjs.map +1 -1
- package/dist/Badge/index.js.map +1 -1
- package/dist/Badge/index.mjs.map +1 -1
- package/dist/Button/index.js.map +1 -1
- package/dist/Button/index.mjs.map +1 -1
- package/dist/Calendar/index.js.map +1 -1
- package/dist/Calendar/index.mjs.map +1 -1
- package/dist/Card/index.js.map +1 -1
- package/dist/Card/index.mjs.map +1 -1
- package/dist/CheckBox/index.js.map +1 -1
- package/dist/CheckBox/index.mjs.map +1 -1
- package/dist/Chips/index.js.map +1 -1
- package/dist/Chips/index.mjs.map +1 -1
- package/dist/Divider/index.js.map +1 -1
- package/dist/Divider/index.mjs.map +1 -1
- package/dist/DropdownMenu/index.js.map +1 -1
- package/dist/DropdownMenu/index.mjs.map +1 -1
- package/dist/IconButton/index.js.map +1 -1
- package/dist/IconButton/index.mjs.map +1 -1
- package/dist/IconRoundedButton/index.js.map +1 -1
- package/dist/IconRoundedButton/index.mjs.map +1 -1
- package/dist/Menu/index.js.map +1 -1
- package/dist/Menu/index.mjs.map +1 -1
- package/dist/Modal/index.js.map +1 -1
- package/dist/Modal/index.mjs.map +1 -1
- package/dist/MultipleChoice/index.js.map +1 -1
- package/dist/MultipleChoice/index.mjs.map +1 -1
- package/dist/NavButton/index.js.map +1 -1
- package/dist/NavButton/index.mjs.map +1 -1
- package/dist/NotFound/index.js.map +1 -1
- package/dist/NotFound/index.mjs.map +1 -1
- package/dist/NotificationCard/index.js +23 -0
- package/dist/NotificationCard/index.js.map +1 -1
- package/dist/NotificationCard/index.mjs +23 -0
- package/dist/NotificationCard/index.mjs.map +1 -1
- package/dist/ProgressBar/index.js.map +1 -1
- package/dist/ProgressBar/index.mjs.map +1 -1
- package/dist/ProgressCircle/index.js.map +1 -1
- package/dist/ProgressCircle/index.mjs.map +1 -1
- package/dist/Quiz/index.js.map +1 -1
- package/dist/Quiz/index.mjs.map +1 -1
- package/dist/Radio/index.js.map +1 -1
- package/dist/Radio/index.mjs.map +1 -1
- package/dist/Search/index.js.map +1 -1
- package/dist/Search/index.mjs.map +1 -1
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/index.mjs.map +1 -1
- package/dist/SelectionButton/index.js.map +1 -1
- package/dist/SelectionButton/index.mjs.map +1 -1
- package/dist/Skeleton/index.js.map +1 -1
- package/dist/Skeleton/index.mjs.map +1 -1
- package/dist/Stepper/index.js.map +1 -1
- package/dist/Stepper/index.mjs.map +1 -1
- package/dist/Table/index.js.map +1 -1
- package/dist/Table/index.mjs.map +1 -1
- package/dist/Text/index.js.map +1 -1
- package/dist/Text/index.mjs.map +1 -1
- package/dist/TextArea/index.js.map +1 -1
- package/dist/TextArea/index.mjs.map +1 -1
- package/dist/ThemeToggle/index.js.map +1 -1
- package/dist/ThemeToggle/index.mjs.map +1 -1
- package/dist/Toast/Toaster/index.js.map +1 -1
- package/dist/Toast/Toaster/index.mjs.map +1 -1
- package/dist/Toast/index.js.map +1 -1
- package/dist/Toast/index.mjs.map +1 -1
- package/dist/VideoPlayer/index.js +262 -118
- package/dist/VideoPlayer/index.js.map +1 -1
- package/dist/VideoPlayer/index.mjs +233 -89
- package/dist/VideoPlayer/index.mjs.map +1 -1
- package/dist/Whiteboard/index.js.map +1 -1
- package/dist/Whiteboard/index.mjs.map +1 -1
- package/dist/hooks/useMobile/index.d.mts +5 -0
- package/dist/hooks/useMobile/index.d.ts +5 -0
- package/dist/hooks/useMobile/index.js +23 -0
- package/dist/hooks/useMobile/index.js.map +1 -1
- package/dist/hooks/useMobile/index.mjs +23 -0
- package/dist/hooks/useMobile/index.mjs.map +1 -1
- package/dist/index.css +38 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +154 -67
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +154 -67
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +38 -0
- package/dist/styles.css.map +1 -1
- package/dist/utils/index.d.mts +1 -1
- package/dist/utils/index.d.ts +1 -1
- package/dist/utils/index.js +1 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/index.mjs +1 -1
- package/dist/utils/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Select/Select.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n ReactNode,\n useEffect,\n useRef,\n ButtonHTMLAttributes,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n isValidElement,\n Children,\n cloneElement,\n useId,\n} from 'react';\nimport { CaretDown, Check, WarningCircle } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\nconst VARIANT_CLASSES = {\n outlined: 'border-2 rounded-lg focus:border-primary-950',\n underlined: 'border-b-2 focus:border-primary-950',\n rounded: 'border-2 rounded-full focus:border-primary-950',\n} as const;\n\nconst SIZE_CLASSES = {\n small: 'text-sm',\n medium: 'text-md',\n large: 'text-lg',\n 'extra-large': 'text-lg',\n} as const;\n\nconst HEIGHT_CLASSES = {\n small: 'h-8',\n medium: 'h-9',\n large: 'h-10',\n 'extra-large': 'h-12',\n} as const;\n\nconst PADDING_CLASSES = {\n small: 'px-2 py-1',\n medium: 'px-3 py-2',\n large: 'px-4 py-3',\n 'extra-large': 'px-5 py-4',\n} as const;\n\nconst SIDE_CLASSES = {\n top: 'bottom-full -translate-y-1',\n right: 'top-full translate-y-1',\n bottom: 'top-full translate-y-1',\n left: 'top-full translate-y-1',\n};\nconst ALIGN_CLASSES = {\n start: 'left-0',\n center: 'left-1/2 -translate-x-1/2',\n end: 'right-0',\n};\n\ninterface SelectStore {\n open: boolean;\n setOpen: (open: boolean) => void;\n value: string;\n setValue: (value: string) => void;\n selectedLabel: ReactNode;\n setSelectedLabel: (label: ReactNode) => void;\n onValueChange?: (value: string) => void;\n}\n\ntype SelectStoreApi = StoreApi<SelectStore>;\n\nexport function createSelectStore(\n onValueChange?: (value: string) => void\n): SelectStoreApi {\n return create<SelectStore>((set) => ({\n open: false,\n setOpen: (open) => set({ open }),\n value: '',\n setValue: (value) => set({ value }),\n selectedLabel: '',\n setSelectedLabel: (label) => set({ selectedLabel: label }),\n onValueChange,\n }));\n}\n\nexport const useSelectStore = (externalStore?: SelectStoreApi) => {\n if (!externalStore) {\n throw new Error(\n 'Component must be used within a Select (store is missing)'\n );\n }\n\n return externalStore;\n};\n\nexport function getLabelAsNode(children: ReactNode): ReactNode {\n if (typeof children === 'string' || typeof children === 'number') {\n return children;\n }\n const flattened = Children.toArray(children);\n\n if (flattened.length === 1) return flattened[0];\n\n return <>{flattened}</>;\n}\n\ninterface SelectProps {\n className?: string;\n children: ReactNode;\n defaultValue?: string;\n value?: string;\n onValueChange?: (value: string) => void;\n size?: 'small' | 'medium' | 'large' | 'extra-large';\n label?: string;\n helperText?: string;\n errorMessage?: string;\n id?: string;\n}\n\nconst injectStore = (\n children: ReactNode,\n store: SelectStoreApi,\n size: string,\n selectId: string\n): ReactNode => {\n return Children.map(children, (child) => {\n if (isValidElement(child)) {\n const typedChild = child as ReactElement<{\n store?: SelectStoreApi;\n children?: ReactNode;\n size?: string;\n selectId?: string;\n }>;\n\n const newProps: Partial<{\n store: SelectStoreApi;\n children: ReactNode;\n size: string;\n selectId: string;\n }> = {\n store,\n };\n\n // Only pass size and selectId to SelectTrigger\n if (typedChild.type === SelectTrigger) {\n newProps.size = size;\n newProps.selectId = selectId;\n }\n\n if (typedChild.props.children) {\n newProps.children = injectStore(\n typedChild.props.children,\n store,\n size,\n selectId\n );\n }\n\n return cloneElement(typedChild, newProps);\n }\n return child;\n });\n};\n\nconst Select = ({\n children,\n defaultValue = '',\n className,\n value: propValue,\n onValueChange,\n size = 'small',\n label,\n helperText,\n errorMessage,\n id,\n}: SelectProps) => {\n const storeRef = useRef<SelectStoreApi | null>(null);\n storeRef.current ??= createSelectStore(onValueChange);\n const store = storeRef.current;\n\n const selectRef = useRef<HTMLDivElement>(null);\n const { open, setOpen, setValue, selectedLabel } = useStore(store, (s) => s);\n\n // Generate unique ID if not provided\n const generatedId = useId();\n const selectId = id ?? `select-${generatedId}`;\n\n const findLabelForValue = (\n children: ReactNode,\n targetValue: string\n ): string | null => {\n let found: string | null = null;\n const search = (nodes: ReactNode) => {\n Children.forEach(nodes, (child) => {\n if (!isValidElement(child)) return;\n const typedChild = child as ReactElement<{\n value?: string;\n children?: ReactNode;\n }>;\n if (\n typedChild.type === SelectItem &&\n typedChild.props.value === targetValue\n ) {\n if (typeof typedChild.props.children === 'string')\n found = typedChild.props.children;\n }\n if (typedChild.props.children && !found)\n search(typedChild.props.children);\n });\n };\n search(children);\n return found;\n };\n\n useEffect(() => {\n if (!selectedLabel && defaultValue) {\n const label = findLabelForValue(children, defaultValue);\n if (label) store.setState({ selectedLabel: label });\n }\n }, [children, defaultValue, selectedLabel]);\n\n useEffect(() => {\n const handleClickOutside = (event: globalThis.MouseEvent) => {\n if (\n selectRef.current &&\n !selectRef.current.contains(event.target as Node)\n ) {\n setOpen(false);\n }\n };\n\n const handleArrowKeys = (event: globalThis.KeyboardEvent) => {\n const selectContent = selectRef.current?.querySelector('[role=\"menu\"]');\n if (selectContent) {\n event.preventDefault();\n const items = Array.from(\n selectContent.querySelectorAll(\n '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n )\n ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n const focused = document.activeElement as HTMLElement;\n const currentIndex = items.findIndex((item) => item === focused);\n\n let nextIndex = 0;\n if (event.key === 'ArrowDown') {\n nextIndex =\n currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n } else {\n nextIndex =\n currentIndex === -1\n ? items.length - 1\n : (currentIndex - 1 + items.length) % items.length;\n }\n items[nextIndex]?.focus();\n }\n };\n\n if (open) {\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('keydown', handleArrowKeys);\n }\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('keydown', handleArrowKeys);\n };\n }, [open]);\n\n useEffect(() => {\n if (propValue) {\n setValue(propValue);\n const label = findLabelForValue(children, propValue);\n if (label) store.setState({ selectedLabel: label });\n }\n }, [propValue]);\n\n const sizeClasses = SIZE_CLASSES[size];\n\n return (\n <div className={cn('w-full', className)}>\n {/* Label */}\n {label && (\n <label\n htmlFor={selectId}\n className={cn('block font-bold text-text-900 mb-1.5', sizeClasses)}\n >\n {label}\n </label>\n )}\n\n {/* Select Container */}\n <div className={cn('relative w-full')} ref={selectRef}>\n {injectStore(children, store, size, selectId)}\n </div>\n\n {/* Helper Text or Error Message */}\n {(helperText || errorMessage) && (\n <div className=\"mt-1.5 gap-1.5\">\n {helperText && <p className=\"text-sm text-text-500\">{helperText}</p>}\n {errorMessage && (\n <p className=\"flex gap-1 items-center text-sm text-indicator-error\">\n <WarningCircle size={16} /> {errorMessage}\n </p>\n )}\n </div>\n )}\n </div>\n );\n};\n\nconst SelectValue = ({\n placeholder,\n store: externalStore,\n}: {\n placeholder?: string;\n store?: SelectStoreApi;\n}) => {\n const store = useSelectStore(externalStore);\n\n const selectedLabel = useStore(store, (s) => s.selectedLabel);\n const value = useStore(store, (s) => s.value);\n return (\n <span className=\"text-inherit flex gap-2 items-center\">\n {selectedLabel || placeholder || value}\n </span>\n );\n};\n\ninterface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n className?: string;\n invalid?: boolean;\n variant?: 'outlined' | 'underlined' | 'rounded';\n store?: SelectStoreApi;\n size?: 'small' | 'medium' | 'large' | 'extra-large';\n selectId?: string;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n (\n {\n className,\n invalid = false,\n variant = 'outlined',\n store: externalStore,\n disabled,\n size = 'medium',\n selectId,\n ...props\n },\n ref\n ) => {\n const store = useSelectStore(externalStore);\n const open = useStore(store, (s) => s.open);\n const toggleOpen = () => store.setState({ open: !open });\n\n const variantClasses = VARIANT_CLASSES[variant];\n const heightClasses = HEIGHT_CLASSES[size];\n const paddingClasses = PADDING_CLASSES[size];\n\n return (\n <button\n ref={ref}\n id={selectId}\n className={cn(\n 'flex w-full items-center justify-between border-border-300',\n heightClasses,\n paddingClasses,\n invalid &&\n `${variant == 'underlined' ? 'border-b-2' : 'border-2'} border-indicator-error text-text-600`,\n disabled\n ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n : 'cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\n !invalid && !disabled ? 'text-text-700' : '',\n variantClasses,\n className\n )}\n onClick={toggleOpen}\n aria-expanded={open}\n aria-haspopup=\"listbox\"\n aria-controls={open ? 'select-content' : undefined}\n {...props}\n >\n {props.children}\n <CaretDown\n className={cn(\n 'h-[1em] w-[1em] opacity-50 transition-transform',\n open ? 'rotate-180' : ''\n )}\n />\n </button>\n );\n }\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ninterface SelectContentProps extends HTMLAttributes<HTMLDivElement> {\n className?: string;\n align?: 'start' | 'center' | 'end';\n side?: 'top' | 'right' | 'bottom' | 'left';\n store?: SelectStoreApi;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n (\n {\n children,\n className,\n align = 'start',\n side = 'bottom',\n store: externalStore,\n ...props\n },\n ref\n ) => {\n const store = useSelectStore(externalStore);\n\n const open = useStore(store, (s) => s.open);\n if (!open) return null;\n\n const getPositionClasses = () =>\n `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;\n\n return (\n <div\n role=\"menu\"\n ref={ref}\n className={cn(\n 'bg-secondary z-50 min-w-[210px] max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md border-border-100',\n getPositionClasses(),\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\nSelectContent.displayName = 'SelectContent';\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n value: string;\n disabled?: boolean;\n store?: SelectStoreApi;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n (\n {\n className,\n children,\n value,\n disabled = false,\n store: externalStore,\n ...props\n },\n ref\n ) => {\n const store = useSelectStore(externalStore);\n const {\n value: selectedValue,\n setValue,\n setOpen,\n setSelectedLabel,\n onValueChange,\n } = useStore(store, (s) => s);\n\n const handleClick = (\n e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n ) => {\n const labelNode = getLabelAsNode(children);\n if (!disabled) {\n // Always set the clicked value, even if it's already selected\n setValue(value);\n setSelectedLabel(labelNode);\n setOpen(false);\n onValueChange?.(value);\n }\n props.onClick?.(e as MouseEvent<HTMLDivElement>);\n };\n\n return (\n <div\n role=\"menuitem\"\n aria-disabled={disabled}\n ref={ref}\n className={`\n bg-secondary focus-visible:bg-background-50\n relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n ${className}\n ${\n disabled\n ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n }\n ${selectedValue === value && 'bg-background-50'}\n `}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n }}\n tabIndex={disabled ? -1 : 0}\n {...props}\n >\n <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n {selectedValue === value && <Check className=\"\" />}\n </span>\n {children}\n </div>\n );\n }\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport default Select;\nexport { SelectTrigger, SelectContent, SelectItem, SelectValue };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.7 (b3) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.7 (b3) para cores de 6 dígitos\n resultColor = `#${color}b3`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":"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","names":["children","label"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Select/Select.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n ReactNode,\n useEffect,\n useRef,\n ButtonHTMLAttributes,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n isValidElement,\n Children,\n cloneElement,\n useId,\n} from 'react';\nimport { CaretDown, Check, WarningCircle } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\nconst VARIANT_CLASSES = {\n outlined: 'border-2 rounded-lg focus:border-primary-950',\n underlined: 'border-b-2 focus:border-primary-950',\n rounded: 'border-2 rounded-full focus:border-primary-950',\n} as const;\n\nconst SIZE_CLASSES = {\n small: 'text-sm',\n medium: 'text-md',\n large: 'text-lg',\n 'extra-large': 'text-lg',\n} as const;\n\nconst HEIGHT_CLASSES = {\n small: 'h-8',\n medium: 'h-9',\n large: 'h-10',\n 'extra-large': 'h-12',\n} as const;\n\nconst PADDING_CLASSES = {\n small: 'px-2 py-1',\n medium: 'px-3 py-2',\n large: 'px-4 py-3',\n 'extra-large': 'px-5 py-4',\n} as const;\n\nconst SIDE_CLASSES = {\n top: 'bottom-full -translate-y-1',\n right: 'top-full translate-y-1',\n bottom: 'top-full translate-y-1',\n left: 'top-full translate-y-1',\n};\nconst ALIGN_CLASSES = {\n start: 'left-0',\n center: 'left-1/2 -translate-x-1/2',\n end: 'right-0',\n};\n\ninterface SelectStore {\n open: boolean;\n setOpen: (open: boolean) => void;\n value: string;\n setValue: (value: string) => void;\n selectedLabel: ReactNode;\n setSelectedLabel: (label: ReactNode) => void;\n onValueChange?: (value: string) => void;\n}\n\ntype SelectStoreApi = StoreApi<SelectStore>;\n\nexport function createSelectStore(\n onValueChange?: (value: string) => void\n): SelectStoreApi {\n return create<SelectStore>((set) => ({\n open: false,\n setOpen: (open) => set({ open }),\n value: '',\n setValue: (value) => set({ value }),\n selectedLabel: '',\n setSelectedLabel: (label) => set({ selectedLabel: label }),\n onValueChange,\n }));\n}\n\nexport const useSelectStore = (externalStore?: SelectStoreApi) => {\n if (!externalStore) {\n throw new Error(\n 'Component must be used within a Select (store is missing)'\n );\n }\n\n return externalStore;\n};\n\nexport function getLabelAsNode(children: ReactNode): ReactNode {\n if (typeof children === 'string' || typeof children === 'number') {\n return children;\n }\n const flattened = Children.toArray(children);\n\n if (flattened.length === 1) return flattened[0];\n\n return <>{flattened}</>;\n}\n\ninterface SelectProps {\n className?: string;\n children: ReactNode;\n defaultValue?: string;\n value?: string;\n onValueChange?: (value: string) => void;\n size?: 'small' | 'medium' | 'large' | 'extra-large';\n label?: string;\n helperText?: string;\n errorMessage?: string;\n id?: string;\n}\n\nconst injectStore = (\n children: ReactNode,\n store: SelectStoreApi,\n size: string,\n selectId: string\n): ReactNode => {\n return Children.map(children, (child) => {\n if (isValidElement(child)) {\n const typedChild = child as ReactElement<{\n store?: SelectStoreApi;\n children?: ReactNode;\n size?: string;\n selectId?: string;\n }>;\n\n const newProps: Partial<{\n store: SelectStoreApi;\n children: ReactNode;\n size: string;\n selectId: string;\n }> = {\n store,\n };\n\n // Only pass size and selectId to SelectTrigger\n if (typedChild.type === SelectTrigger) {\n newProps.size = size;\n newProps.selectId = selectId;\n }\n\n if (typedChild.props.children) {\n newProps.children = injectStore(\n typedChild.props.children,\n store,\n size,\n selectId\n );\n }\n\n return cloneElement(typedChild, newProps);\n }\n return child;\n });\n};\n\nconst Select = ({\n children,\n defaultValue = '',\n className,\n value: propValue,\n onValueChange,\n size = 'small',\n label,\n helperText,\n errorMessage,\n id,\n}: SelectProps) => {\n const storeRef = useRef<SelectStoreApi | null>(null);\n storeRef.current ??= createSelectStore(onValueChange);\n const store = storeRef.current;\n\n const selectRef = useRef<HTMLDivElement>(null);\n const { open, setOpen, setValue, selectedLabel } = useStore(store, (s) => s);\n\n // Generate unique ID if not provided\n const generatedId = useId();\n const selectId = id ?? `select-${generatedId}`;\n\n const findLabelForValue = (\n children: ReactNode,\n targetValue: string\n ): string | null => {\n let found: string | null = null;\n const search = (nodes: ReactNode) => {\n Children.forEach(nodes, (child) => {\n if (!isValidElement(child)) return;\n const typedChild = child as ReactElement<{\n value?: string;\n children?: ReactNode;\n }>;\n if (\n typedChild.type === SelectItem &&\n typedChild.props.value === targetValue\n ) {\n if (typeof typedChild.props.children === 'string')\n found = typedChild.props.children;\n }\n if (typedChild.props.children && !found)\n search(typedChild.props.children);\n });\n };\n search(children);\n return found;\n };\n\n useEffect(() => {\n if (!selectedLabel && defaultValue) {\n const label = findLabelForValue(children, defaultValue);\n if (label) store.setState({ selectedLabel: label });\n }\n }, [children, defaultValue, selectedLabel]);\n\n useEffect(() => {\n const handleClickOutside = (event: globalThis.MouseEvent) => {\n if (\n selectRef.current &&\n !selectRef.current.contains(event.target as Node)\n ) {\n setOpen(false);\n }\n };\n\n const handleArrowKeys = (event: globalThis.KeyboardEvent) => {\n const selectContent = selectRef.current?.querySelector('[role=\"menu\"]');\n if (selectContent) {\n event.preventDefault();\n const items = Array.from(\n selectContent.querySelectorAll(\n '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n )\n ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n const focused = document.activeElement as HTMLElement;\n const currentIndex = items.findIndex((item) => item === focused);\n\n let nextIndex = 0;\n if (event.key === 'ArrowDown') {\n nextIndex =\n currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n } else {\n nextIndex =\n currentIndex === -1\n ? items.length - 1\n : (currentIndex - 1 + items.length) % items.length;\n }\n items[nextIndex]?.focus();\n }\n };\n\n if (open) {\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('keydown', handleArrowKeys);\n }\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('keydown', handleArrowKeys);\n };\n }, [open]);\n\n useEffect(() => {\n if (propValue) {\n setValue(propValue);\n const label = findLabelForValue(children, propValue);\n if (label) store.setState({ selectedLabel: label });\n }\n }, [propValue]);\n\n const sizeClasses = SIZE_CLASSES[size];\n\n return (\n <div className={cn('w-full', className)}>\n {/* Label */}\n {label && (\n <label\n htmlFor={selectId}\n className={cn('block font-bold text-text-900 mb-1.5', sizeClasses)}\n >\n {label}\n </label>\n )}\n\n {/* Select Container */}\n <div className={cn('relative w-full')} ref={selectRef}>\n {injectStore(children, store, size, selectId)}\n </div>\n\n {/* Helper Text or Error Message */}\n {(helperText || errorMessage) && (\n <div className=\"mt-1.5 gap-1.5\">\n {helperText && <p className=\"text-sm text-text-500\">{helperText}</p>}\n {errorMessage && (\n <p className=\"flex gap-1 items-center text-sm text-indicator-error\">\n <WarningCircle size={16} /> {errorMessage}\n </p>\n )}\n </div>\n )}\n </div>\n );\n};\n\nconst SelectValue = ({\n placeholder,\n store: externalStore,\n}: {\n placeholder?: string;\n store?: SelectStoreApi;\n}) => {\n const store = useSelectStore(externalStore);\n\n const selectedLabel = useStore(store, (s) => s.selectedLabel);\n const value = useStore(store, (s) => s.value);\n return (\n <span className=\"text-inherit flex gap-2 items-center\">\n {selectedLabel || placeholder || value}\n </span>\n );\n};\n\ninterface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n className?: string;\n invalid?: boolean;\n variant?: 'outlined' | 'underlined' | 'rounded';\n store?: SelectStoreApi;\n size?: 'small' | 'medium' | 'large' | 'extra-large';\n selectId?: string;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n (\n {\n className,\n invalid = false,\n variant = 'outlined',\n store: externalStore,\n disabled,\n size = 'medium',\n selectId,\n ...props\n },\n ref\n ) => {\n const store = useSelectStore(externalStore);\n const open = useStore(store, (s) => s.open);\n const toggleOpen = () => store.setState({ open: !open });\n\n const variantClasses = VARIANT_CLASSES[variant];\n const heightClasses = HEIGHT_CLASSES[size];\n const paddingClasses = PADDING_CLASSES[size];\n\n return (\n <button\n ref={ref}\n id={selectId}\n className={cn(\n 'flex w-full items-center justify-between border-border-300',\n heightClasses,\n paddingClasses,\n invalid &&\n `${variant == 'underlined' ? 'border-b-2' : 'border-2'} border-indicator-error text-text-600`,\n disabled\n ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n : 'cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground',\n !invalid && !disabled ? 'text-text-700' : '',\n variantClasses,\n className\n )}\n onClick={toggleOpen}\n aria-expanded={open}\n aria-haspopup=\"listbox\"\n aria-controls={open ? 'select-content' : undefined}\n {...props}\n >\n {props.children}\n <CaretDown\n className={cn(\n 'h-[1em] w-[1em] opacity-50 transition-transform',\n open ? 'rotate-180' : ''\n )}\n />\n </button>\n );\n }\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ninterface SelectContentProps extends HTMLAttributes<HTMLDivElement> {\n className?: string;\n align?: 'start' | 'center' | 'end';\n side?: 'top' | 'right' | 'bottom' | 'left';\n store?: SelectStoreApi;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n (\n {\n children,\n className,\n align = 'start',\n side = 'bottom',\n store: externalStore,\n ...props\n },\n ref\n ) => {\n const store = useSelectStore(externalStore);\n\n const open = useStore(store, (s) => s.open);\n if (!open) return null;\n\n const getPositionClasses = () =>\n `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;\n\n return (\n <div\n role=\"menu\"\n ref={ref}\n className={cn(\n 'bg-secondary z-50 min-w-[210px] max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md border-border-100',\n getPositionClasses(),\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\nSelectContent.displayName = 'SelectContent';\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n value: string;\n disabled?: boolean;\n store?: SelectStoreApi;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n (\n {\n className,\n children,\n value,\n disabled = false,\n store: externalStore,\n ...props\n },\n ref\n ) => {\n const store = useSelectStore(externalStore);\n const {\n value: selectedValue,\n setValue,\n setOpen,\n setSelectedLabel,\n onValueChange,\n } = useStore(store, (s) => s);\n\n const handleClick = (\n e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n ) => {\n const labelNode = getLabelAsNode(children);\n if (!disabled) {\n // Always set the clicked value, even if it's already selected\n setValue(value);\n setSelectedLabel(labelNode);\n setOpen(false);\n onValueChange?.(value);\n }\n props.onClick?.(e as MouseEvent<HTMLDivElement>);\n };\n\n return (\n <div\n role=\"menuitem\"\n aria-disabled={disabled}\n ref={ref}\n className={`\n bg-secondary focus-visible:bg-background-50\n relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n ${className}\n ${\n disabled\n ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n }\n ${selectedValue === value && 'bg-background-50'}\n `}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n }}\n tabIndex={disabled ? -1 : 0}\n {...props}\n >\n <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n {selectedValue === value && <Check className=\"\" />}\n </span>\n {children}\n </div>\n );\n }\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport default Select;\nexport { SelectTrigger, SelectContent, SelectItem, SelectValue };\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":"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","names":["children","label"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/SelectionButton/SelectionButton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * SelectionButton component props interface\n */\ntype SelectionButtonProps = {\n /** Ícone a ser exibido no botão */\n icon: ReactNode;\n /** Texto/label a ser exibido ao lado do ícone */\n label: string;\n /** Estado de seleção do botão */\n selected?: boolean;\n /** Additional CSS classes to apply */\n className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * SelectionButton component for Analytica Ensino platforms\n *\n * Um botão com ícone e texto para ações e navegação com estado de seleção.\n * Ideal para filtros, tags, categorias, seleção de tipos, etc.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param label - O texto/label a ser exibido\n * @param selected - Estado de seleção do botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button estilizado\n *\n * @example\n * ```tsx\n * <SelectionButton\n * icon={<TagIcon />}\n * label=\"Categoria\"\n * selected={false}\n * onClick={() => handleSelection()}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Usando ref para foco programático\n * const buttonRef = useRef<HTMLButtonElement>(null);\n *\n * const handleFocus = () => {\n * buttonRef.current?.focus();\n * };\n *\n * <SelectionButton\n * ref={buttonRef}\n * icon={<TagIcon />}\n * label=\"Categoria\"\n * selected={isSelected}\n * onClick={() => setSelected(!isSelected)}\n * />\n * ```\n */\nconst SelectionButton = forwardRef<HTMLButtonElement, SelectionButtonProps>(\n (\n { icon, label, selected = false, className = '', disabled, ...props },\n ref\n ) => {\n // Classes base para todos os estados\n const baseClasses = [\n 'inline-flex',\n 'items-center',\n 'justify-start',\n 'gap-2',\n 'p-4',\n 'rounded-xl',\n 'cursor-pointer',\n 'border',\n 'border-border-50',\n 'bg-background',\n 'text-sm',\n 'text-text-700',\n 'font-bold',\n 'shadow-soft-shadow-1',\n 'hover:bg-background-100',\n 'focus-visible:outline-none',\n 'focus-visible:ring-2',\n 'focus-visible:ring-indicator-info',\n 'focus-visible:ring-offset-0',\n 'focus-visible:shadow-none',\n 'active:ring-2',\n 'active:ring-primary-950',\n 'active:ring-offset-0',\n 'active:shadow-none',\n 'disabled:opacity-50',\n 'disabled:cursor-not-allowed',\n ];\n\n const stateClasses = selected\n ? ['ring-primary-950', 'ring-2', 'ring-offset-0', 'shadow-none']\n : [];\n\n const allClasses = [...baseClasses, ...stateClasses].join(' ');\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(allClasses, className)}\n disabled={disabled}\n aria-pressed={selected}\n {...props}\n >\n <span className=\"flex items-center justify-center w-6 h-6\">{icon}</span>\n <span>{label}</span>\n </button>\n );\n }\n);\n\nSelectionButton.displayName = 'SelectionButton';\n\nexport default SelectionButton;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.
|
|
1
|
+
{"version":3,"sources":["../../src/components/SelectionButton/SelectionButton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * SelectionButton component props interface\n */\ntype SelectionButtonProps = {\n /** Ícone a ser exibido no botão */\n icon: ReactNode;\n /** Texto/label a ser exibido ao lado do ícone */\n label: string;\n /** Estado de seleção do botão */\n selected?: boolean;\n /** Additional CSS classes to apply */\n className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * SelectionButton component for Analytica Ensino platforms\n *\n * Um botão com ícone e texto para ações e navegação com estado de seleção.\n * Ideal para filtros, tags, categorias, seleção de tipos, etc.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param label - O texto/label a ser exibido\n * @param selected - Estado de seleção do botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button estilizado\n *\n * @example\n * ```tsx\n * <SelectionButton\n * icon={<TagIcon />}\n * label=\"Categoria\"\n * selected={false}\n * onClick={() => handleSelection()}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Usando ref para foco programático\n * const buttonRef = useRef<HTMLButtonElement>(null);\n *\n * const handleFocus = () => {\n * buttonRef.current?.focus();\n * };\n *\n * <SelectionButton\n * ref={buttonRef}\n * icon={<TagIcon />}\n * label=\"Categoria\"\n * selected={isSelected}\n * onClick={() => setSelected(!isSelected)}\n * />\n * ```\n */\nconst SelectionButton = forwardRef<HTMLButtonElement, SelectionButtonProps>(\n (\n { icon, label, selected = false, className = '', disabled, ...props },\n ref\n ) => {\n // Classes base para todos os estados\n const baseClasses = [\n 'inline-flex',\n 'items-center',\n 'justify-start',\n 'gap-2',\n 'p-4',\n 'rounded-xl',\n 'cursor-pointer',\n 'border',\n 'border-border-50',\n 'bg-background',\n 'text-sm',\n 'text-text-700',\n 'font-bold',\n 'shadow-soft-shadow-1',\n 'hover:bg-background-100',\n 'focus-visible:outline-none',\n 'focus-visible:ring-2',\n 'focus-visible:ring-indicator-info',\n 'focus-visible:ring-offset-0',\n 'focus-visible:shadow-none',\n 'active:ring-2',\n 'active:ring-primary-950',\n 'active:ring-offset-0',\n 'active:shadow-none',\n 'disabled:opacity-50',\n 'disabled:cursor-not-allowed',\n ];\n\n const stateClasses = selected\n ? ['ring-primary-950', 'ring-2', 'ring-offset-0', 'shadow-none']\n : [];\n\n const allClasses = [...baseClasses, ...stateClasses].join(' ');\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(allClasses, className)}\n disabled={disabled}\n aria-pressed={selected}\n {...props}\n >\n <span className=\"flex items-center justify-center w-6 h-6\">{icon}</span>\n <span>{label}</span>\n </button>\n );\n }\n);\n\nSelectionButton.displayName = 'SelectionButton';\n\nexport default SelectionButton;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4D;;;ACA5D,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADgGM;AA1CN,IAAM,sBAAkB;AAAA,EACtB,CACE,EAAE,MAAM,OAAO,WAAW,OAAO,YAAY,IAAI,UAAU,GAAG,MAAM,GACpE,QACG;AAEH,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,eAAe,WACjB,CAAC,oBAAoB,UAAU,iBAAiB,aAAa,IAC7D,CAAC;AAEL,UAAM,aAAa,CAAC,GAAG,aAAa,GAAG,YAAY,EAAE,KAAK,GAAG;AAE7D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACA,gBAAc;AAAA,QACb,GAAG;AAAA,QAEJ;AAAA,sDAAC,UAAK,WAAU,4CAA4C,gBAAK;AAAA,UACjE,4CAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACf;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/SelectionButton/SelectionButton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * SelectionButton component props interface\n */\ntype SelectionButtonProps = {\n /** Ícone a ser exibido no botão */\n icon: ReactNode;\n /** Texto/label a ser exibido ao lado do ícone */\n label: string;\n /** Estado de seleção do botão */\n selected?: boolean;\n /** Additional CSS classes to apply */\n className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * SelectionButton component for Analytica Ensino platforms\n *\n * Um botão com ícone e texto para ações e navegação com estado de seleção.\n * Ideal para filtros, tags, categorias, seleção de tipos, etc.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param label - O texto/label a ser exibido\n * @param selected - Estado de seleção do botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button estilizado\n *\n * @example\n * ```tsx\n * <SelectionButton\n * icon={<TagIcon />}\n * label=\"Categoria\"\n * selected={false}\n * onClick={() => handleSelection()}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Usando ref para foco programático\n * const buttonRef = useRef<HTMLButtonElement>(null);\n *\n * const handleFocus = () => {\n * buttonRef.current?.focus();\n * };\n *\n * <SelectionButton\n * ref={buttonRef}\n * icon={<TagIcon />}\n * label=\"Categoria\"\n * selected={isSelected}\n * onClick={() => setSelected(!isSelected)}\n * />\n * ```\n */\nconst SelectionButton = forwardRef<HTMLButtonElement, SelectionButtonProps>(\n (\n { icon, label, selected = false, className = '', disabled, ...props },\n ref\n ) => {\n // Classes base para todos os estados\n const baseClasses = [\n 'inline-flex',\n 'items-center',\n 'justify-start',\n 'gap-2',\n 'p-4',\n 'rounded-xl',\n 'cursor-pointer',\n 'border',\n 'border-border-50',\n 'bg-background',\n 'text-sm',\n 'text-text-700',\n 'font-bold',\n 'shadow-soft-shadow-1',\n 'hover:bg-background-100',\n 'focus-visible:outline-none',\n 'focus-visible:ring-2',\n 'focus-visible:ring-indicator-info',\n 'focus-visible:ring-offset-0',\n 'focus-visible:shadow-none',\n 'active:ring-2',\n 'active:ring-primary-950',\n 'active:ring-offset-0',\n 'active:shadow-none',\n 'disabled:opacity-50',\n 'disabled:cursor-not-allowed',\n ];\n\n const stateClasses = selected\n ? ['ring-primary-950', 'ring-2', 'ring-offset-0', 'shadow-none']\n : [];\n\n const allClasses = [...baseClasses, ...stateClasses].join(' ');\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(allClasses, className)}\n disabled={disabled}\n aria-pressed={selected}\n {...props}\n >\n <span className=\"flex items-center justify-center w-6 h-6\">{icon}</span>\n <span>{label}</span>\n </button>\n );\n }\n);\n\nSelectionButton.displayName = 'SelectionButton';\n\nexport default SelectionButton;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.
|
|
1
|
+
{"version":3,"sources":["../../src/components/SelectionButton/SelectionButton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * SelectionButton component props interface\n */\ntype SelectionButtonProps = {\n /** Ícone a ser exibido no botão */\n icon: ReactNode;\n /** Texto/label a ser exibido ao lado do ícone */\n label: string;\n /** Estado de seleção do botão */\n selected?: boolean;\n /** Additional CSS classes to apply */\n className?: string;\n} & ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * SelectionButton component for Analytica Ensino platforms\n *\n * Um botão com ícone e texto para ações e navegação com estado de seleção.\n * Ideal para filtros, tags, categorias, seleção de tipos, etc.\n * Suporta forwardRef para acesso programático ao elemento DOM.\n *\n * @param icon - O ícone a ser exibido no botão\n * @param label - O texto/label a ser exibido\n * @param selected - Estado de seleção do botão\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos HTML padrão de button\n * @returns Um elemento button estilizado\n *\n * @example\n * ```tsx\n * <SelectionButton\n * icon={<TagIcon />}\n * label=\"Categoria\"\n * selected={false}\n * onClick={() => handleSelection()}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Usando ref para foco programático\n * const buttonRef = useRef<HTMLButtonElement>(null);\n *\n * const handleFocus = () => {\n * buttonRef.current?.focus();\n * };\n *\n * <SelectionButton\n * ref={buttonRef}\n * icon={<TagIcon />}\n * label=\"Categoria\"\n * selected={isSelected}\n * onClick={() => setSelected(!isSelected)}\n * />\n * ```\n */\nconst SelectionButton = forwardRef<HTMLButtonElement, SelectionButtonProps>(\n (\n { icon, label, selected = false, className = '', disabled, ...props },\n ref\n ) => {\n // Classes base para todos os estados\n const baseClasses = [\n 'inline-flex',\n 'items-center',\n 'justify-start',\n 'gap-2',\n 'p-4',\n 'rounded-xl',\n 'cursor-pointer',\n 'border',\n 'border-border-50',\n 'bg-background',\n 'text-sm',\n 'text-text-700',\n 'font-bold',\n 'shadow-soft-shadow-1',\n 'hover:bg-background-100',\n 'focus-visible:outline-none',\n 'focus-visible:ring-2',\n 'focus-visible:ring-indicator-info',\n 'focus-visible:ring-offset-0',\n 'focus-visible:shadow-none',\n 'active:ring-2',\n 'active:ring-primary-950',\n 'active:ring-offset-0',\n 'active:shadow-none',\n 'disabled:opacity-50',\n 'disabled:cursor-not-allowed',\n ];\n\n const stateClasses = selected\n ? ['ring-primary-950', 'ring-2', 'ring-offset-0', 'shadow-none']\n : [];\n\n const allClasses = [...baseClasses, ...stateClasses].join(' ');\n\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn(allClasses, className)}\n disabled={disabled}\n aria-pressed={selected}\n {...props}\n >\n <span className=\"flex items-center justify-center w-6 h-6\">{icon}</span>\n <span>{label}</span>\n </button>\n );\n }\n);\n\nSelectionButton.displayName = 'SelectionButton';\n\nexport default SelectionButton;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":";AAAA,SAA0C,kBAAkB;;;ACA5D,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADgGM,SAQE,KARF;AA1CN,IAAM,kBAAkB;AAAA,EACtB,CACE,EAAE,MAAM,OAAO,WAAW,OAAO,YAAY,IAAI,UAAU,GAAG,MAAM,GACpE,QACG;AAEH,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,eAAe,WACjB,CAAC,oBAAoB,UAAU,iBAAiB,aAAa,IAC7D,CAAC;AAEL,UAAM,aAAa,CAAC,GAAG,aAAa,GAAG,YAAY,EAAE,KAAK,GAAG;AAE7D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC;AAAA,QACA,gBAAc;AAAA,QACb,GAAG;AAAA,QAEJ;AAAA,8BAAC,UAAK,WAAU,4CAA4C,gBAAK;AAAA,UACjE,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACf;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Skeleton/Skeleton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, HTMLAttributes, CSSProperties } from 'react';\nimport { cn } from '../../utils/utils';\n\ninterface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n variant?: 'text' | 'circular' | 'rectangular' | 'rounded';\n width?: string | number;\n height?: string | number;\n animation?: 'pulse' | 'none';\n lines?: number;\n spacing?: 'none' | 'small' | 'medium' | 'large';\n}\n\nconst SKELETON_ANIMATION_CLASSES = {\n pulse: 'animate-pulse',\n none: '',\n};\n\nconst SKELETON_VARIANT_CLASSES = {\n text: 'h-4 bg-background-200 rounded',\n circular: 'bg-background-200 rounded-full',\n rectangular: 'bg-background-200',\n rounded: 'bg-background-200 rounded-lg',\n};\n\nconst SPACING_CLASSES = {\n none: '',\n small: 'space-y-1',\n medium: 'space-y-2',\n large: 'space-y-3',\n};\n\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = 'text',\n width,\n height,\n animation = 'pulse',\n lines = 1,\n spacing = 'none',\n className = '',\n children,\n ...props\n },\n ref\n ) => {\n const animationClass = SKELETON_ANIMATION_CLASSES[animation];\n const variantClass = SKELETON_VARIANT_CLASSES[variant];\n const spacingClass = SPACING_CLASSES[spacing];\n\n const style: CSSProperties = {\n width: typeof width === 'number' ? `${width}px` : width,\n height: typeof height === 'number' ? `${height}px` : height,\n };\n\n // Se for múltiplas linhas de texto\n if (variant === 'text' && lines > 1) {\n return (\n <div\n ref={ref}\n className={cn('flex flex-col', spacingClass, className)}\n {...props}\n >\n {Array.from({ length: lines }, (_, index) => (\n <div\n key={index}\n className={cn(variantClass, animationClass)}\n style={index === lines - 1 ? { width: '60%' } : undefined}\n />\n ))}\n </div>\n );\n }\n\n // Se for um único elemento\n return (\n <div\n ref={ref}\n className={cn(variantClass, animationClass, className)}\n style={style}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\n// Componentes específicos para casos comuns\nconst SkeletonText = forwardRef<HTMLDivElement, Omit<SkeletonProps, 'variant'>>(\n (props, ref) => <Skeleton ref={ref} variant=\"text\" {...props} />\n);\n\nconst SkeletonCircle = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"circular\" {...props} />);\n\nconst SkeletonRectangle = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rectangular\" {...props} />);\n\nconst SkeletonRounded = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rounded\" {...props} />);\n\n// Componente para card skeleton\ninterface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {\n showAvatar?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n showActions?: boolean;\n lines?: number;\n}\n\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showAvatar = true,\n showTitle = true,\n showDescription = true,\n showActions = true,\n lines = 2,\n className = '',\n ...props\n },\n ref\n ) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'w-full p-4 bg-background border border-border-200 rounded-lg',\n className\n )}\n {...props}\n >\n <div className=\"flex items-start space-x-3\">\n {showAvatar && <SkeletonCircle width={40} height={40} />}\n\n <div className=\"flex-1 space-y-2\">\n {showTitle && <SkeletonText width=\"60%\" height={20} />}\n\n {showDescription && <SkeletonText lines={lines} spacing=\"small\" />}\n </div>\n </div>\n\n {showActions && (\n <div className=\"flex justify-end space-x-2 mt-4\">\n <SkeletonRectangle width={80} height={32} />\n <SkeletonRectangle width={80} height={32} />\n </div>\n )}\n </div>\n );\n }\n);\n\n// Componente para lista skeleton\ninterface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {\n items?: number;\n showAvatar?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n lines?: number;\n}\n\nconst SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n (\n {\n items = 3,\n showAvatar = true,\n showTitle = true,\n showDescription = true,\n lines = 1,\n className = '',\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('space-y-3', className)} {...props}>\n {Array.from({ length: items }, (_, index) => (\n <div key={index} className=\"flex items-start space-x-3 p-3\">\n {showAvatar && <SkeletonCircle width={32} height={32} />}\n\n <div className=\"flex-1 space-y-2\">\n {showTitle && <SkeletonText width=\"40%\" height={16} />}\n\n {showDescription && (\n <SkeletonText lines={lines} spacing=\"small\" />\n )}\n </div>\n </div>\n ))}\n </div>\n );\n }\n);\n\n// Componente para tabela skeleton\ninterface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {\n rows?: number;\n columns?: number;\n showHeader?: boolean;\n}\n\nconst SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n (\n { rows = 5, columns = 4, showHeader = true, className = '', ...props },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('w-full', className)} {...props}>\n {showHeader && (\n <div className=\"flex space-x-2 mb-3\">\n {Array.from({ length: columns }, (_, index) => (\n <SkeletonText\n key={index}\n width={`${100 / columns}%`}\n height={20}\n />\n ))}\n </div>\n )}\n\n <div className=\"space-y-2\">\n {Array.from({ length: rows }, (_, rowIndex) => (\n <div key={rowIndex} className=\"flex space-x-2\">\n {Array.from({ length: columns }, (_, colIndex) => (\n <SkeletonText\n key={colIndex}\n width={`${100 / columns}%`}\n height={16}\n />\n ))}\n </div>\n ))}\n </div>\n </div>\n );\n }\n);\n\nexport {\n Skeleton,\n SkeletonText,\n SkeletonCircle,\n SkeletonRectangle,\n SkeletonRounded,\n SkeletonCard,\n SkeletonList,\n SkeletonTable,\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.7 (b3) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.7 (b3) para cores de 6 dígitos\n resultColor = `#${color}b3`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":"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","names":["_"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Skeleton/Skeleton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, HTMLAttributes, CSSProperties } from 'react';\nimport { cn } from '../../utils/utils';\n\ninterface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n variant?: 'text' | 'circular' | 'rectangular' | 'rounded';\n width?: string | number;\n height?: string | number;\n animation?: 'pulse' | 'none';\n lines?: number;\n spacing?: 'none' | 'small' | 'medium' | 'large';\n}\n\nconst SKELETON_ANIMATION_CLASSES = {\n pulse: 'animate-pulse',\n none: '',\n};\n\nconst SKELETON_VARIANT_CLASSES = {\n text: 'h-4 bg-background-200 rounded',\n circular: 'bg-background-200 rounded-full',\n rectangular: 'bg-background-200',\n rounded: 'bg-background-200 rounded-lg',\n};\n\nconst SPACING_CLASSES = {\n none: '',\n small: 'space-y-1',\n medium: 'space-y-2',\n large: 'space-y-3',\n};\n\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = 'text',\n width,\n height,\n animation = 'pulse',\n lines = 1,\n spacing = 'none',\n className = '',\n children,\n ...props\n },\n ref\n ) => {\n const animationClass = SKELETON_ANIMATION_CLASSES[animation];\n const variantClass = SKELETON_VARIANT_CLASSES[variant];\n const spacingClass = SPACING_CLASSES[spacing];\n\n const style: CSSProperties = {\n width: typeof width === 'number' ? `${width}px` : width,\n height: typeof height === 'number' ? `${height}px` : height,\n };\n\n // Se for múltiplas linhas de texto\n if (variant === 'text' && lines > 1) {\n return (\n <div\n ref={ref}\n className={cn('flex flex-col', spacingClass, className)}\n {...props}\n >\n {Array.from({ length: lines }, (_, index) => (\n <div\n key={index}\n className={cn(variantClass, animationClass)}\n style={index === lines - 1 ? { width: '60%' } : undefined}\n />\n ))}\n </div>\n );\n }\n\n // Se for um único elemento\n return (\n <div\n ref={ref}\n className={cn(variantClass, animationClass, className)}\n style={style}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\n// Componentes específicos para casos comuns\nconst SkeletonText = forwardRef<HTMLDivElement, Omit<SkeletonProps, 'variant'>>(\n (props, ref) => <Skeleton ref={ref} variant=\"text\" {...props} />\n);\n\nconst SkeletonCircle = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"circular\" {...props} />);\n\nconst SkeletonRectangle = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rectangular\" {...props} />);\n\nconst SkeletonRounded = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rounded\" {...props} />);\n\n// Componente para card skeleton\ninterface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {\n showAvatar?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n showActions?: boolean;\n lines?: number;\n}\n\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showAvatar = true,\n showTitle = true,\n showDescription = true,\n showActions = true,\n lines = 2,\n className = '',\n ...props\n },\n ref\n ) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'w-full p-4 bg-background border border-border-200 rounded-lg',\n className\n )}\n {...props}\n >\n <div className=\"flex items-start space-x-3\">\n {showAvatar && <SkeletonCircle width={40} height={40} />}\n\n <div className=\"flex-1 space-y-2\">\n {showTitle && <SkeletonText width=\"60%\" height={20} />}\n\n {showDescription && <SkeletonText lines={lines} spacing=\"small\" />}\n </div>\n </div>\n\n {showActions && (\n <div className=\"flex justify-end space-x-2 mt-4\">\n <SkeletonRectangle width={80} height={32} />\n <SkeletonRectangle width={80} height={32} />\n </div>\n )}\n </div>\n );\n }\n);\n\n// Componente para lista skeleton\ninterface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {\n items?: number;\n showAvatar?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n lines?: number;\n}\n\nconst SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n (\n {\n items = 3,\n showAvatar = true,\n showTitle = true,\n showDescription = true,\n lines = 1,\n className = '',\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('space-y-3', className)} {...props}>\n {Array.from({ length: items }, (_, index) => (\n <div key={index} className=\"flex items-start space-x-3 p-3\">\n {showAvatar && <SkeletonCircle width={32} height={32} />}\n\n <div className=\"flex-1 space-y-2\">\n {showTitle && <SkeletonText width=\"40%\" height={16} />}\n\n {showDescription && (\n <SkeletonText lines={lines} spacing=\"small\" />\n )}\n </div>\n </div>\n ))}\n </div>\n );\n }\n);\n\n// Componente para tabela skeleton\ninterface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {\n rows?: number;\n columns?: number;\n showHeader?: boolean;\n}\n\nconst SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n (\n { rows = 5, columns = 4, showHeader = true, className = '', ...props },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('w-full', className)} {...props}>\n {showHeader && (\n <div className=\"flex space-x-2 mb-3\">\n {Array.from({ length: columns }, (_, index) => (\n <SkeletonText\n key={index}\n width={`${100 / columns}%`}\n height={20}\n />\n ))}\n </div>\n )}\n\n <div className=\"space-y-2\">\n {Array.from({ length: rows }, (_, rowIndex) => (\n <div key={rowIndex} className=\"flex space-x-2\">\n {Array.from({ length: columns }, (_, colIndex) => (\n <SkeletonText\n key={colIndex}\n width={`${100 / columns}%`}\n height={16}\n />\n ))}\n </div>\n ))}\n </div>\n </div>\n );\n }\n);\n\nexport {\n Skeleton,\n SkeletonText,\n SkeletonCircle,\n SkeletonRectangle,\n SkeletonRounded,\n SkeletonCard,\n SkeletonList,\n SkeletonTable,\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":"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","names":["_"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Skeleton/Skeleton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, HTMLAttributes, CSSProperties } from 'react';\nimport { cn } from '../../utils/utils';\n\ninterface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n variant?: 'text' | 'circular' | 'rectangular' | 'rounded';\n width?: string | number;\n height?: string | number;\n animation?: 'pulse' | 'none';\n lines?: number;\n spacing?: 'none' | 'small' | 'medium' | 'large';\n}\n\nconst SKELETON_ANIMATION_CLASSES = {\n pulse: 'animate-pulse',\n none: '',\n};\n\nconst SKELETON_VARIANT_CLASSES = {\n text: 'h-4 bg-background-200 rounded',\n circular: 'bg-background-200 rounded-full',\n rectangular: 'bg-background-200',\n rounded: 'bg-background-200 rounded-lg',\n};\n\nconst SPACING_CLASSES = {\n none: '',\n small: 'space-y-1',\n medium: 'space-y-2',\n large: 'space-y-3',\n};\n\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = 'text',\n width,\n height,\n animation = 'pulse',\n lines = 1,\n spacing = 'none',\n className = '',\n children,\n ...props\n },\n ref\n ) => {\n const animationClass = SKELETON_ANIMATION_CLASSES[animation];\n const variantClass = SKELETON_VARIANT_CLASSES[variant];\n const spacingClass = SPACING_CLASSES[spacing];\n\n const style: CSSProperties = {\n width: typeof width === 'number' ? `${width}px` : width,\n height: typeof height === 'number' ? `${height}px` : height,\n };\n\n // Se for múltiplas linhas de texto\n if (variant === 'text' && lines > 1) {\n return (\n <div\n ref={ref}\n className={cn('flex flex-col', spacingClass, className)}\n {...props}\n >\n {Array.from({ length: lines }, (_, index) => (\n <div\n key={index}\n className={cn(variantClass, animationClass)}\n style={index === lines - 1 ? { width: '60%' } : undefined}\n />\n ))}\n </div>\n );\n }\n\n // Se for um único elemento\n return (\n <div\n ref={ref}\n className={cn(variantClass, animationClass, className)}\n style={style}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\n// Componentes específicos para casos comuns\nconst SkeletonText = forwardRef<HTMLDivElement, Omit<SkeletonProps, 'variant'>>(\n (props, ref) => <Skeleton ref={ref} variant=\"text\" {...props} />\n);\n\nconst SkeletonCircle = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"circular\" {...props} />);\n\nconst SkeletonRectangle = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rectangular\" {...props} />);\n\nconst SkeletonRounded = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rounded\" {...props} />);\n\n// Componente para card skeleton\ninterface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {\n showAvatar?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n showActions?: boolean;\n lines?: number;\n}\n\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showAvatar = true,\n showTitle = true,\n showDescription = true,\n showActions = true,\n lines = 2,\n className = '',\n ...props\n },\n ref\n ) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'w-full p-4 bg-background border border-border-200 rounded-lg',\n className\n )}\n {...props}\n >\n <div className=\"flex items-start space-x-3\">\n {showAvatar && <SkeletonCircle width={40} height={40} />}\n\n <div className=\"flex-1 space-y-2\">\n {showTitle && <SkeletonText width=\"60%\" height={20} />}\n\n {showDescription && <SkeletonText lines={lines} spacing=\"small\" />}\n </div>\n </div>\n\n {showActions && (\n <div className=\"flex justify-end space-x-2 mt-4\">\n <SkeletonRectangle width={80} height={32} />\n <SkeletonRectangle width={80} height={32} />\n </div>\n )}\n </div>\n );\n }\n);\n\n// Componente para lista skeleton\ninterface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {\n items?: number;\n showAvatar?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n lines?: number;\n}\n\nconst SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n (\n {\n items = 3,\n showAvatar = true,\n showTitle = true,\n showDescription = true,\n lines = 1,\n className = '',\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('space-y-3', className)} {...props}>\n {Array.from({ length: items }, (_, index) => (\n <div key={index} className=\"flex items-start space-x-3 p-3\">\n {showAvatar && <SkeletonCircle width={32} height={32} />}\n\n <div className=\"flex-1 space-y-2\">\n {showTitle && <SkeletonText width=\"40%\" height={16} />}\n\n {showDescription && (\n <SkeletonText lines={lines} spacing=\"small\" />\n )}\n </div>\n </div>\n ))}\n </div>\n );\n }\n);\n\n// Componente para tabela skeleton\ninterface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {\n rows?: number;\n columns?: number;\n showHeader?: boolean;\n}\n\nconst SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n (\n { rows = 5, columns = 4, showHeader = true, className = '', ...props },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('w-full', className)} {...props}>\n {showHeader && (\n <div className=\"flex space-x-2 mb-3\">\n {Array.from({ length: columns }, (_, index) => (\n <SkeletonText\n key={index}\n width={`${100 / columns}%`}\n height={20}\n />\n ))}\n </div>\n )}\n\n <div className=\"space-y-2\">\n {Array.from({ length: rows }, (_, rowIndex) => (\n <div key={rowIndex} className=\"flex space-x-2\">\n {Array.from({ length: columns }, (_, colIndex) => (\n <SkeletonText\n key={colIndex}\n width={`${100 / columns}%`}\n height={16}\n />\n ))}\n </div>\n ))}\n </div>\n </div>\n );\n }\n);\n\nexport {\n Skeleton,\n SkeletonText,\n SkeletonCircle,\n SkeletonRectangle,\n SkeletonRounded,\n SkeletonCard,\n SkeletonList,\n SkeletonTable,\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.7 (b3) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.7 (b3) para cores de 6 dígitos\n resultColor = `#${color}b3`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":"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","names":["_"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Skeleton/Skeleton.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { forwardRef, HTMLAttributes, CSSProperties } from 'react';\nimport { cn } from '../../utils/utils';\n\ninterface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n variant?: 'text' | 'circular' | 'rectangular' | 'rounded';\n width?: string | number;\n height?: string | number;\n animation?: 'pulse' | 'none';\n lines?: number;\n spacing?: 'none' | 'small' | 'medium' | 'large';\n}\n\nconst SKELETON_ANIMATION_CLASSES = {\n pulse: 'animate-pulse',\n none: '',\n};\n\nconst SKELETON_VARIANT_CLASSES = {\n text: 'h-4 bg-background-200 rounded',\n circular: 'bg-background-200 rounded-full',\n rectangular: 'bg-background-200',\n rounded: 'bg-background-200 rounded-lg',\n};\n\nconst SPACING_CLASSES = {\n none: '',\n small: 'space-y-1',\n medium: 'space-y-2',\n large: 'space-y-3',\n};\n\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = 'text',\n width,\n height,\n animation = 'pulse',\n lines = 1,\n spacing = 'none',\n className = '',\n children,\n ...props\n },\n ref\n ) => {\n const animationClass = SKELETON_ANIMATION_CLASSES[animation];\n const variantClass = SKELETON_VARIANT_CLASSES[variant];\n const spacingClass = SPACING_CLASSES[spacing];\n\n const style: CSSProperties = {\n width: typeof width === 'number' ? `${width}px` : width,\n height: typeof height === 'number' ? `${height}px` : height,\n };\n\n // Se for múltiplas linhas de texto\n if (variant === 'text' && lines > 1) {\n return (\n <div\n ref={ref}\n className={cn('flex flex-col', spacingClass, className)}\n {...props}\n >\n {Array.from({ length: lines }, (_, index) => (\n <div\n key={index}\n className={cn(variantClass, animationClass)}\n style={index === lines - 1 ? { width: '60%' } : undefined}\n />\n ))}\n </div>\n );\n }\n\n // Se for um único elemento\n return (\n <div\n ref={ref}\n className={cn(variantClass, animationClass, className)}\n style={style}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\n// Componentes específicos para casos comuns\nconst SkeletonText = forwardRef<HTMLDivElement, Omit<SkeletonProps, 'variant'>>(\n (props, ref) => <Skeleton ref={ref} variant=\"text\" {...props} />\n);\n\nconst SkeletonCircle = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"circular\" {...props} />);\n\nconst SkeletonRectangle = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rectangular\" {...props} />);\n\nconst SkeletonRounded = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, 'variant'>\n>((props, ref) => <Skeleton ref={ref} variant=\"rounded\" {...props} />);\n\n// Componente para card skeleton\ninterface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {\n showAvatar?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n showActions?: boolean;\n lines?: number;\n}\n\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showAvatar = true,\n showTitle = true,\n showDescription = true,\n showActions = true,\n lines = 2,\n className = '',\n ...props\n },\n ref\n ) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'w-full p-4 bg-background border border-border-200 rounded-lg',\n className\n )}\n {...props}\n >\n <div className=\"flex items-start space-x-3\">\n {showAvatar && <SkeletonCircle width={40} height={40} />}\n\n <div className=\"flex-1 space-y-2\">\n {showTitle && <SkeletonText width=\"60%\" height={20} />}\n\n {showDescription && <SkeletonText lines={lines} spacing=\"small\" />}\n </div>\n </div>\n\n {showActions && (\n <div className=\"flex justify-end space-x-2 mt-4\">\n <SkeletonRectangle width={80} height={32} />\n <SkeletonRectangle width={80} height={32} />\n </div>\n )}\n </div>\n );\n }\n);\n\n// Componente para lista skeleton\ninterface SkeletonListProps extends HTMLAttributes<HTMLDivElement> {\n items?: number;\n showAvatar?: boolean;\n showTitle?: boolean;\n showDescription?: boolean;\n lines?: number;\n}\n\nconst SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n (\n {\n items = 3,\n showAvatar = true,\n showTitle = true,\n showDescription = true,\n lines = 1,\n className = '',\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('space-y-3', className)} {...props}>\n {Array.from({ length: items }, (_, index) => (\n <div key={index} className=\"flex items-start space-x-3 p-3\">\n {showAvatar && <SkeletonCircle width={32} height={32} />}\n\n <div className=\"flex-1 space-y-2\">\n {showTitle && <SkeletonText width=\"40%\" height={16} />}\n\n {showDescription && (\n <SkeletonText lines={lines} spacing=\"small\" />\n )}\n </div>\n </div>\n ))}\n </div>\n );\n }\n);\n\n// Componente para tabela skeleton\ninterface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {\n rows?: number;\n columns?: number;\n showHeader?: boolean;\n}\n\nconst SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n (\n { rows = 5, columns = 4, showHeader = true, className = '', ...props },\n ref\n ) => {\n return (\n <div ref={ref} className={cn('w-full', className)} {...props}>\n {showHeader && (\n <div className=\"flex space-x-2 mb-3\">\n {Array.from({ length: columns }, (_, index) => (\n <SkeletonText\n key={index}\n width={`${100 / columns}%`}\n height={20}\n />\n ))}\n </div>\n )}\n\n <div className=\"space-y-2\">\n {Array.from({ length: rows }, (_, rowIndex) => (\n <div key={rowIndex} className=\"flex space-x-2\">\n {Array.from({ length: columns }, (_, colIndex) => (\n <SkeletonText\n key={colIndex}\n width={`${100 / columns}%`}\n height={16}\n />\n ))}\n </div>\n ))}\n </div>\n </div>\n );\n }\n);\n\nexport {\n Skeleton,\n SkeletonText,\n SkeletonCircle,\n SkeletonRectangle,\n SkeletonRounded,\n SkeletonCard,\n SkeletonList,\n SkeletonTable,\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n"],"mappings":"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","names":["_"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Stepper/Stepper.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n /** Unique identifier for the step */\n id: string;\n /** Label text for the step */\n label: string;\n /** Current state of the step */\n state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'gap-2', // 8px gap as specified in CSS\n stepWidth: 'w-[58px]', // exact 58px from CSS\n stepHeight: 'h-[38px]', // exact 38px from CSS\n indicator: 'w-5 h-5', // 20px as specified\n progressBar: 'h-0.5', // 2px as specified\n indicatorTextSize: '2xs', // 10px as specified\n labelTextSize: 'xs', // 12px as specified\n iconSize: 'w-3 h-3', // 12px\n },\n medium: {\n container: 'gap-3', // 12px (8px + 4px progression)\n stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n progressBar: 'h-0.5', // 2px maintained for consistency\n indicatorTextSize: '2xs', // 10px maintained for readability\n labelTextSize: 'xs', // 12px maintained\n iconSize: 'w-3.5 h-3.5', // 14px\n },\n large: {\n container: 'gap-4', // 16px (12px + 4px progression)\n stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n progressBar: 'h-1', // 4px (increased for better visibility)\n indicatorTextSize: 'xs', // 12px (increased for larger size)\n labelTextSize: 'sm', // 14px (increased for larger size)\n iconSize: 'w-4 h-4', // 16px\n },\n extraLarge: {\n container: 'gap-5', // 20px (16px + 4px progression)\n stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n progressBar: 'h-1', // 4px maintained\n indicatorTextSize: 'xs', // 12px maintained for readability\n labelTextSize: 'sm', // 14px maintained\n iconSize: 'w-[18px] h-[18px]', // 18px\n },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n pending: {\n progressBar: 'bg-text-400', // #A3A3A3\n indicator: 'bg-text-400', // #A3A3A3\n indicatorText: 'text-white', // Branco para contraste com background cinza\n label: 'text-text-400', // #A3A3A3\n },\n current: {\n progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n },\n completed: {\n progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n step: StepData;\n index: number;\n size: StepperSize;\n sizeClasses: SizeClassType;\n stateClasses: StateClassType;\n isLast: boolean;\n className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n step,\n index,\n size: _size,\n sizeClasses,\n stateClasses,\n isLast: _isLast,\n className = '',\n}: StepProps) => {\n const stepNumber = index + 1;\n const isCompleted = step.state === 'completed';\n\n // Generate accessible aria-label based on step state\n const getAriaLabel = () => {\n let suffix = '';\n if (step.state === 'completed') {\n suffix = ' (concluído)';\n } else if (step.state === 'current') {\n suffix = ' (atual)';\n }\n return `${step.label}${suffix}`;\n };\n\n return (\n <div\n className={`\n flex flex-col justify-center items-center pb-2 gap-2\n ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n flex-none flex-grow\n ${className}\n sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n overflow-visible\n `}\n >\n {/* Progress Bar - Full width at top with responsive scaling */}\n <div\n className={`\n w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n rounded-sm flex-none\n `}\n />\n\n {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n <div\n className={`\n flex flex-col sm:flex-row items-center\n gap-1 sm:gap-2 w-full sm:w-auto\n h-auto sm:h-5 flex-none\n overflow-visible\n `}\n >\n {/* Step Indicator Circle with responsive sizing */}\n <div\n className={`\n ${sizeClasses.indicator} ${stateClasses.indicator}\n rounded-full flex items-center justify-center relative\n flex-none transition-all duration-300 ease-out\n w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6\n `}\n aria-label={getAriaLabel()}\n >\n {isCompleted ? (\n <Check\n weight=\"bold\"\n className={`\n ${stateClasses.indicatorText}\n w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n `}\n />\n ) : (\n <Text\n size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.indicatorText,\n 'leading-none text-2xs sm:text-xs'\n )}\n >\n {stepNumber}\n </Text>\n )}\n </div>\n\n {/* Step Label with full responsive text sizing, no vertical overflow */}\n <Text\n size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.label,\n 'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal'\n )}\n >\n {step.label}\n </Text>\n </div>\n </div>\n );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n /** Array of step data */\n steps: StepData[];\n /** Size variant of the stepper */\n size?: StepperSize;\n /** Current active step index */\n currentStep?: number;\n /** Additional CSS classes */\n className?: string;\n /** Step container CSS classes */\n stepClassName?: string;\n /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n showProgress?: boolean;\n /** Custom progress text */\n progressText?: string;\n /** Make stepper responsive (vertical on mobile) */\n responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n steps: StepData[],\n currentStep: number\n): StepData[] => {\n return steps.map((step, index) => {\n let stepState: StepState;\n\n if (index < currentStep) {\n stepState = 'completed';\n } else if (index === currentStep) {\n stepState = 'current';\n } else {\n stepState = 'pending';\n }\n\n return {\n ...step,\n state: stepState,\n };\n });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n currentStep: number,\n totalSteps: number,\n customText?: string\n): string => {\n if (customText) return customText;\n return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n steps: initialSteps,\n size = 'medium',\n currentStep,\n className = '',\n stepClassName = '',\n showProgress = false,\n progressText,\n responsive = true,\n}: StepperProps) => {\n const sizeClasses = SIZE_CLASSES[size];\n\n // Calculate steps with states if currentStep is provided\n const steps =\n currentStep !== undefined\n ? calculateStepStates(initialSteps, currentStep)\n : initialSteps;\n\n return (\n <fieldset\n className={cn(\n 'flex flex-col gap-4 sm:gap-5 md:gap-6',\n className,\n 'border-0 p-0 m-0'\n )}\n >\n <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n Stepper de formulário\n </legend>\n {/* Progress indicator with responsive text */}\n {showProgress && currentStep !== undefined && (\n <Text\n size=\"sm\"\n weight=\"medium\"\n className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n >\n {getProgressText(currentStep, steps.length, progressText)}\n </Text>\n )}\n\n {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n <div\n className={cn(\n 'flex items-center',\n sizeClasses.container,\n responsive\n ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n : 'flex-row justify-center',\n 'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n )}\n role=\"tablist\"\n aria-label=\"Progress steps\"\n >\n {steps.map((step, index) => {\n const stateClasses = STATE_CLASSES[step.state];\n\n return (\n <Step\n key={step.id}\n step={step}\n index={index}\n size={size}\n sizeClasses={sizeClasses}\n stateClasses={stateClasses}\n isLast={index === steps.length - 1}\n className={stepClassName}\n />\n );\n })}\n </div>\n </fieldset>\n );\n};\n\nexport default Stepper;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.7 (b3) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.7 (b3) para cores de 6 dígitos\n resultColor = `#${color}b3`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/Stepper/Stepper.tsx","../../src/utils/utils.ts","../../src/components/Text/Text.tsx"],"sourcesContent":["import Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n /** Unique identifier for the step */\n id: string;\n /** Label text for the step */\n label: string;\n /** Current state of the step */\n state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'gap-2', // 8px gap as specified in CSS\n stepWidth: 'w-[58px]', // exact 58px from CSS\n stepHeight: 'h-[38px]', // exact 38px from CSS\n indicator: 'w-5 h-5', // 20px as specified\n progressBar: 'h-0.5', // 2px as specified\n indicatorTextSize: '2xs', // 10px as specified\n labelTextSize: 'xs', // 12px as specified\n iconSize: 'w-3 h-3', // 12px\n },\n medium: {\n container: 'gap-3', // 12px (8px + 4px progression)\n stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n progressBar: 'h-0.5', // 2px maintained for consistency\n indicatorTextSize: '2xs', // 10px maintained for readability\n labelTextSize: 'xs', // 12px maintained\n iconSize: 'w-3.5 h-3.5', // 14px\n },\n large: {\n container: 'gap-4', // 16px (12px + 4px progression)\n stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n progressBar: 'h-1', // 4px (increased for better visibility)\n indicatorTextSize: 'xs', // 12px (increased for larger size)\n labelTextSize: 'sm', // 14px (increased for larger size)\n iconSize: 'w-4 h-4', // 16px\n },\n extraLarge: {\n container: 'gap-5', // 20px (16px + 4px progression)\n stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n progressBar: 'h-1', // 4px maintained\n indicatorTextSize: 'xs', // 12px maintained for readability\n labelTextSize: 'sm', // 14px maintained\n iconSize: 'w-[18px] h-[18px]', // 18px\n },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n pending: {\n progressBar: 'bg-text-400', // #A3A3A3\n indicator: 'bg-text-400', // #A3A3A3\n indicatorText: 'text-white', // Branco para contraste com background cinza\n label: 'text-text-400', // #A3A3A3\n },\n current: {\n progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n },\n completed: {\n progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n step: StepData;\n index: number;\n size: StepperSize;\n sizeClasses: SizeClassType;\n stateClasses: StateClassType;\n isLast: boolean;\n className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n step,\n index,\n size: _size,\n sizeClasses,\n stateClasses,\n isLast: _isLast,\n className = '',\n}: StepProps) => {\n const stepNumber = index + 1;\n const isCompleted = step.state === 'completed';\n\n // Generate accessible aria-label based on step state\n const getAriaLabel = () => {\n let suffix = '';\n if (step.state === 'completed') {\n suffix = ' (concluído)';\n } else if (step.state === 'current') {\n suffix = ' (atual)';\n }\n return `${step.label}${suffix}`;\n };\n\n return (\n <div\n className={`\n flex flex-col justify-center items-center pb-2 gap-2\n ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n flex-none flex-grow\n ${className}\n sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n overflow-visible\n `}\n >\n {/* Progress Bar - Full width at top with responsive scaling */}\n <div\n className={`\n w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n rounded-sm flex-none\n `}\n />\n\n {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n <div\n className={`\n flex flex-col sm:flex-row items-center\n gap-1 sm:gap-2 w-full sm:w-auto\n h-auto sm:h-5 flex-none\n overflow-visible\n `}\n >\n {/* Step Indicator Circle with responsive sizing */}\n <div\n className={`\n ${sizeClasses.indicator} ${stateClasses.indicator}\n rounded-full flex items-center justify-center relative\n flex-none transition-all duration-300 ease-out\n w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6\n `}\n aria-label={getAriaLabel()}\n >\n {isCompleted ? (\n <Check\n weight=\"bold\"\n className={`\n ${stateClasses.indicatorText}\n w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n `}\n />\n ) : (\n <Text\n size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.indicatorText,\n 'leading-none text-2xs sm:text-xs'\n )}\n >\n {stepNumber}\n </Text>\n )}\n </div>\n\n {/* Step Label with full responsive text sizing, no vertical overflow */}\n <Text\n size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.label,\n 'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal'\n )}\n >\n {step.label}\n </Text>\n </div>\n </div>\n );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n /** Array of step data */\n steps: StepData[];\n /** Size variant of the stepper */\n size?: StepperSize;\n /** Current active step index */\n currentStep?: number;\n /** Additional CSS classes */\n className?: string;\n /** Step container CSS classes */\n stepClassName?: string;\n /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n showProgress?: boolean;\n /** Custom progress text */\n progressText?: string;\n /** Make stepper responsive (vertical on mobile) */\n responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n steps: StepData[],\n currentStep: number\n): StepData[] => {\n return steps.map((step, index) => {\n let stepState: StepState;\n\n if (index < currentStep) {\n stepState = 'completed';\n } else if (index === currentStep) {\n stepState = 'current';\n } else {\n stepState = 'pending';\n }\n\n return {\n ...step,\n state: stepState,\n };\n });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n currentStep: number,\n totalSteps: number,\n customText?: string\n): string => {\n if (customText) return customText;\n return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n steps: initialSteps,\n size = 'medium',\n currentStep,\n className = '',\n stepClassName = '',\n showProgress = false,\n progressText,\n responsive = true,\n}: StepperProps) => {\n const sizeClasses = SIZE_CLASSES[size];\n\n // Calculate steps with states if currentStep is provided\n const steps =\n currentStep !== undefined\n ? calculateStepStates(initialSteps, currentStep)\n : initialSteps;\n\n return (\n <fieldset\n className={cn(\n 'flex flex-col gap-4 sm:gap-5 md:gap-6',\n className,\n 'border-0 p-0 m-0'\n )}\n >\n <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n Stepper de formulário\n </legend>\n {/* Progress indicator with responsive text */}\n {showProgress && currentStep !== undefined && (\n <Text\n size=\"sm\"\n weight=\"medium\"\n className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n >\n {getProgressText(currentStep, steps.length, progressText)}\n </Text>\n )}\n\n {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n <div\n className={cn(\n 'flex items-center',\n sizeClasses.container,\n responsive\n ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n : 'flex-row justify-center',\n 'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n )}\n role=\"tablist\"\n aria-label=\"Progress steps\"\n >\n {steps.map((step, index) => {\n const stateClasses = STATE_CLASSES[step.state];\n\n return (\n <Step\n key={step.id}\n step={step}\n index={index}\n size={size}\n sizeClasses={sizeClasses}\n stateClasses={stateClasses}\n isLast={index === steps.length - 1}\n className={stepClassName}\n />\n );\n })}\n </div>\n </fieldset>\n );\n};\n\nexport default Stepper;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n"],"mappings":"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","names":["import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.7 (b3) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.7 (b3) para cores de 6 dígitos\n resultColor = `#${color}b3`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n","import Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n /** Unique identifier for the step */\n id: string;\n /** Label text for the step */\n label: string;\n /** Current state of the step */\n state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'gap-2', // 8px gap as specified in CSS\n stepWidth: 'w-[58px]', // exact 58px from CSS\n stepHeight: 'h-[38px]', // exact 38px from CSS\n indicator: 'w-5 h-5', // 20px as specified\n progressBar: 'h-0.5', // 2px as specified\n indicatorTextSize: '2xs', // 10px as specified\n labelTextSize: 'xs', // 12px as specified\n iconSize: 'w-3 h-3', // 12px\n },\n medium: {\n container: 'gap-3', // 12px (8px + 4px progression)\n stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n progressBar: 'h-0.5', // 2px maintained for consistency\n indicatorTextSize: '2xs', // 10px maintained for readability\n labelTextSize: 'xs', // 12px maintained\n iconSize: 'w-3.5 h-3.5', // 14px\n },\n large: {\n container: 'gap-4', // 16px (12px + 4px progression)\n stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n progressBar: 'h-1', // 4px (increased for better visibility)\n indicatorTextSize: 'xs', // 12px (increased for larger size)\n labelTextSize: 'sm', // 14px (increased for larger size)\n iconSize: 'w-4 h-4', // 16px\n },\n extraLarge: {\n container: 'gap-5', // 20px (16px + 4px progression)\n stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n progressBar: 'h-1', // 4px maintained\n indicatorTextSize: 'xs', // 12px maintained for readability\n labelTextSize: 'sm', // 14px maintained\n iconSize: 'w-[18px] h-[18px]', // 18px\n },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n pending: {\n progressBar: 'bg-text-400', // #A3A3A3\n indicator: 'bg-text-400', // #A3A3A3\n indicatorText: 'text-white', // Branco para contraste com background cinza\n label: 'text-text-400', // #A3A3A3\n },\n current: {\n progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n },\n completed: {\n progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n step: StepData;\n index: number;\n size: StepperSize;\n sizeClasses: SizeClassType;\n stateClasses: StateClassType;\n isLast: boolean;\n className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n step,\n index,\n size: _size,\n sizeClasses,\n stateClasses,\n isLast: _isLast,\n className = '',\n}: StepProps) => {\n const stepNumber = index + 1;\n const isCompleted = step.state === 'completed';\n\n // Generate accessible aria-label based on step state\n const getAriaLabel = () => {\n let suffix = '';\n if (step.state === 'completed') {\n suffix = ' (concluído)';\n } else if (step.state === 'current') {\n suffix = ' (atual)';\n }\n return `${step.label}${suffix}`;\n };\n\n return (\n <div\n className={`\n flex flex-col justify-center items-center pb-2 gap-2\n ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n flex-none flex-grow\n ${className}\n sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n overflow-visible\n `}\n >\n {/* Progress Bar - Full width at top with responsive scaling */}\n <div\n className={`\n w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n rounded-sm flex-none\n `}\n />\n\n {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n <div\n className={`\n flex flex-col sm:flex-row items-center\n gap-1 sm:gap-2 w-full sm:w-auto\n h-auto sm:h-5 flex-none\n overflow-visible\n `}\n >\n {/* Step Indicator Circle with responsive sizing */}\n <div\n className={`\n ${sizeClasses.indicator} ${stateClasses.indicator}\n rounded-full flex items-center justify-center relative\n flex-none transition-all duration-300 ease-out\n w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6\n `}\n aria-label={getAriaLabel()}\n >\n {isCompleted ? (\n <Check\n weight=\"bold\"\n className={`\n ${stateClasses.indicatorText}\n w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n `}\n />\n ) : (\n <Text\n size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.indicatorText,\n 'leading-none text-2xs sm:text-xs'\n )}\n >\n {stepNumber}\n </Text>\n )}\n </div>\n\n {/* Step Label with full responsive text sizing, no vertical overflow */}\n <Text\n size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.label,\n 'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal'\n )}\n >\n {step.label}\n </Text>\n </div>\n </div>\n );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n /** Array of step data */\n steps: StepData[];\n /** Size variant of the stepper */\n size?: StepperSize;\n /** Current active step index */\n currentStep?: number;\n /** Additional CSS classes */\n className?: string;\n /** Step container CSS classes */\n stepClassName?: string;\n /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n showProgress?: boolean;\n /** Custom progress text */\n progressText?: string;\n /** Make stepper responsive (vertical on mobile) */\n responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n steps: StepData[],\n currentStep: number\n): StepData[] => {\n return steps.map((step, index) => {\n let stepState: StepState;\n\n if (index < currentStep) {\n stepState = 'completed';\n } else if (index === currentStep) {\n stepState = 'current';\n } else {\n stepState = 'pending';\n }\n\n return {\n ...step,\n state: stepState,\n };\n });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n currentStep: number,\n totalSteps: number,\n customText?: string\n): string => {\n if (customText) return customText;\n return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n steps: initialSteps,\n size = 'medium',\n currentStep,\n className = '',\n stepClassName = '',\n showProgress = false,\n progressText,\n responsive = true,\n}: StepperProps) => {\n const sizeClasses = SIZE_CLASSES[size];\n\n // Calculate steps with states if currentStep is provided\n const steps =\n currentStep !== undefined\n ? calculateStepStates(initialSteps, currentStep)\n : initialSteps;\n\n return (\n <fieldset\n className={cn(\n 'flex flex-col gap-4 sm:gap-5 md:gap-6',\n className,\n 'border-0 p-0 m-0'\n )}\n >\n <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n Stepper de formulário\n </legend>\n {/* Progress indicator with responsive text */}\n {showProgress && currentStep !== undefined && (\n <Text\n size=\"sm\"\n weight=\"medium\"\n className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n >\n {getProgressText(currentStep, steps.length, progressText)}\n </Text>\n )}\n\n {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n <div\n className={cn(\n 'flex items-center',\n sizeClasses.container,\n responsive\n ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n : 'flex-row justify-center',\n 'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n )}\n role=\"tablist\"\n aria-label=\"Progress steps\"\n >\n {steps.map((step, index) => {\n const stateClasses = STATE_CLASSES[step.state];\n\n return (\n <Step\n key={step.id}\n step={step}\n index={index}\n size={size}\n sizeClasses={sizeClasses}\n stateClasses={stateClasses}\n isLast={index === steps.length - 1}\n className={stepClassName}\n />\n );\n })}\n </div>\n </fieldset>\n );\n};\n\nexport default Stepper;\n"],"mappings":"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","names":["jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/utils.ts","../../src/components/Text/Text.tsx","../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n\nexport { syncDropdownState } from './dropdown';\n\n/**\n * Retorna a cor hexadecimal com opacidade 0.3 (4d) se não estiver em dark mode.\n * Se estiver em dark mode, retorna a cor original.\n *\n * @param hexColor - Cor hexadecimal (ex: \"#0066b8\" ou \"0066b8\")\n * @param isDark - booleano indicando se está em dark mode\n * @returns string - cor hexadecimal com opacidade se necessário\n */\nexport function getSubjectColorWithOpacity(\n hexColor: string | undefined,\n isDark: boolean\n): string | undefined {\n if (!hexColor) return undefined;\n // Remove o '#' se existir\n let color = hexColor.replace(/^#/, '').toLowerCase();\n\n if (isDark) {\n // Se está em dark mode, sempre remove opacidade se existir\n if (color.length === 8) {\n color = color.slice(0, 6);\n }\n return `#${color}`;\n } else {\n // Se não está em dark mode (light mode)\n let resultColor: string;\n if (color.length === 6) {\n // Adiciona opacidade 0.3 (4D) para cores de 6 dígitos\n resultColor = `#${color}4d`;\n } else if (color.length === 8) {\n // Já tem opacidade, retorna como está\n resultColor = `#${color}`;\n } else {\n // Para outros tamanhos (3, 4, 5 dígitos), retorna como está\n resultColor = `#${color}`;\n }\n return resultColor;\n }\n}\n","import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Base text component props\n */\ntype BaseTextProps = {\n /** Content to be displayed */\n children?: ReactNode;\n /** Text size variant */\n size?:\n | '2xs'\n | 'xs'\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl'\n | '5xl'\n | '6xl';\n /** Font weight variant */\n weight?:\n | 'hairline'\n | 'light'\n | 'normal'\n | 'medium'\n | 'semibold'\n | 'bold'\n | 'extrabold'\n | 'black';\n /** Color variant - white for light backgrounds, black for dark backgrounds */\n color?: string;\n /** Additional CSS classes to apply */\n className?: string;\n};\n\n/**\n * Polymorphic text component props that ensures type safety based on the 'as' prop\n */\ntype TextProps<T extends ElementType = 'p'> = BaseTextProps & {\n /** HTML tag to render */\n as?: T;\n} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;\n\n/**\n * Text component for Analytica Ensino platforms\n *\n * A flexible polymorphic text component with multiple sizes, weights, and colors.\n * Automatically adapts to dark and light themes with full type safety.\n *\n * @param children - The content to display\n * @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)\n * @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)\n * @param color - The color variant - adapts to theme\n * @param as - The HTML tag to render - determines allowed attributes via TypeScript\n * @param className - Additional CSS classes\n * @param props - HTML attributes valid for the chosen tag only\n * @returns A styled text element with type-safe attributes\n *\n * @example\n * ```tsx\n * <Text size=\"lg\" weight=\"bold\" color=\"text-info-800\">\n * This is a large, bold text\n * </Text>\n *\n * <Text as=\"a\" href=\"/link\" target=\"_blank\">\n * Link with type-safe anchor attributes\n * </Text>\n *\n * <Text as=\"button\" onClick={handleClick} disabled>\n * Button with type-safe button attributes\n * </Text>\n * ```\n */\nconst Text = <T extends ElementType = 'p'>({\n children,\n size = 'md',\n weight = 'normal',\n color = 'text-text-950',\n as,\n className = '',\n ...props\n}: TextProps<T>) => {\n let sizeClasses = '';\n let weightClasses = '';\n\n // Text size classes mapping\n const sizeClassMap = {\n '2xs': 'text-2xs',\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-md',\n lg: 'text-lg',\n xl: 'text-xl',\n '2xl': 'text-2xl',\n '3xl': 'text-3xl',\n '4xl': 'text-4xl',\n '5xl': 'text-5xl',\n '6xl': 'text-6xl',\n } as const;\n\n sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;\n\n // Font weight classes mapping\n const weightClassMap = {\n hairline: 'font-hairline',\n light: 'font-light',\n normal: 'font-normal',\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extrabold: 'font-extrabold',\n black: 'font-black',\n } as const;\n\n weightClasses = weightClassMap[weight] ?? weightClassMap.normal;\n\n const baseClasses = 'font-primary';\n const Component = as ?? ('p' as ElementType);\n\n return (\n <Component\n className={cn(baseClasses, sizeClasses, weightClasses, color, className)}\n {...props}\n >\n {children}\n </Component>\n );\n};\n\nexport default Text;\n","import Text from '../Text/Text';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Stepper size variants\n */\ntype StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';\n\n/**\n * Step state variants\n */\ntype StepState = 'pending' | 'current' | 'completed';\n\n/**\n * Individual step data interface\n */\nexport interface StepData {\n /** Unique identifier for the step */\n id: string;\n /** Label text for the step */\n label: string;\n /** Current state of the step */\n state: StepState;\n}\n\n/**\n * Size configurations - Following design system pattern from CSS specifications\n * Small size based on exact CSS: width 58px, height 38px, gap 8px\n */\nconst SIZE_CLASSES = {\n small: {\n container: 'gap-2', // 8px gap as specified in CSS\n stepWidth: 'w-[58px]', // exact 58px from CSS\n stepHeight: 'h-[38px]', // exact 38px from CSS\n indicator: 'w-5 h-5', // 20px as specified\n progressBar: 'h-0.5', // 2px as specified\n indicatorTextSize: '2xs', // 10px as specified\n labelTextSize: 'xs', // 12px as specified\n iconSize: 'w-3 h-3', // 12px\n },\n medium: {\n container: 'gap-3', // 12px (8px + 4px progression)\n stepWidth: 'w-[110px]', // 110px (increased from 90px to fit \"Endereço Residencial\")\n stepHeight: 'h-[48px]', // 48px (increased from 46px for better proportion)\n indicator: 'w-6 h-6', // 24px (20px + 4px progression)\n progressBar: 'h-0.5', // 2px maintained for consistency\n indicatorTextSize: '2xs', // 10px maintained for readability\n labelTextSize: 'xs', // 12px maintained\n iconSize: 'w-3.5 h-3.5', // 14px\n },\n large: {\n container: 'gap-4', // 16px (12px + 4px progression)\n stepWidth: 'w-[160px]', // 160px (increased from 140px to fit \"Endereço Residencial\")\n stepHeight: 'h-[58px]', // 58px (increased from 54px for better proportion)\n indicator: 'w-7 h-7', // 28px (24px + 4px progression)\n progressBar: 'h-1', // 4px (increased for better visibility)\n indicatorTextSize: 'xs', // 12px (increased for larger size)\n labelTextSize: 'sm', // 14px (increased for larger size)\n iconSize: 'w-4 h-4', // 16px\n },\n extraLarge: {\n container: 'gap-5', // 20px (16px + 4px progression)\n stepWidth: 'w-[200px]', // 200px (increased from 180px to ensure \"Endereço Residencial\" fits)\n stepHeight: 'h-[68px]', // 68px (increased from 62px for better proportion)\n indicator: 'w-8 h-8', // 32px (28px + 4px progression)\n progressBar: 'h-1', // 4px maintained\n indicatorTextSize: 'xs', // 12px maintained for readability\n labelTextSize: 'sm', // 14px maintained\n iconSize: 'w-[18px] h-[18px]', // 18px\n },\n} as const;\n\n/**\n * State configurations using exact colors from CSS specs\n * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)\n * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido\n * completed: #1C61B2 = primary-800 (etapa concluída)\n * text color: #FEFEFF = text\n */\nconst STATE_CLASSES = {\n pending: {\n progressBar: 'bg-text-400', // #A3A3A3\n indicator: 'bg-text-400', // #A3A3A3\n indicatorText: 'text-white', // Branco para contraste com background cinza\n label: 'text-text-400', // #A3A3A3\n },\n current: {\n progressBar: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicator: 'bg-primary-800', // #1C61B2 usando classe Tailwind padrão\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-800', // #1C61B2 usando classe Tailwind padrão\n },\n completed: {\n progressBar: 'bg-primary-400', // #48A0E8 para barra quando checked (completed)\n indicator: 'bg-primary-400', // #48A0E8 para corresponder à barra de progresso\n indicatorText: 'text-white', // Branco usando classe Tailwind padrão\n label: 'text-primary-400', // #48A0E8 para corresponder à barra de progresso\n },\n} as const;\n\n/**\n * Type for size classes\n */\ntype SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];\n\n/**\n * Type for state classes\n */\ntype StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];\n\n/**\n * Props for individual step component\n */\ninterface StepProps {\n step: StepData;\n index: number;\n size: StepperSize;\n sizeClasses: SizeClassType;\n stateClasses: StateClassType;\n isLast: boolean;\n className?: string;\n}\n\n/**\n * Individual Step component - Based on exact design specifications\n * Layout: flex-column with progress bar at top, then icon+label row\n * Fully responsive for mobile, tablets, and laptops\n */\nexport const Step = ({\n step,\n index,\n size: _size,\n sizeClasses,\n stateClasses,\n isLast: _isLast,\n className = '',\n}: StepProps) => {\n const stepNumber = index + 1;\n const isCompleted = step.state === 'completed';\n\n // Generate accessible aria-label based on step state\n const getAriaLabel = () => {\n let suffix = '';\n if (step.state === 'completed') {\n suffix = ' (concluído)';\n } else if (step.state === 'current') {\n suffix = ' (atual)';\n }\n return `${step.label}${suffix}`;\n };\n\n return (\n <div\n className={`\n flex flex-col justify-center items-center pb-2 gap-2\n ${sizeClasses.stepWidth} ${sizeClasses.stepHeight}\n flex-none flex-grow\n ${className}\n sm:max-w-[100px] md:max-w-[120px] lg:max-w-none xl:max-w-none\n sm:min-h-[40px] md:min-h-[45px] lg:min-h-none\n overflow-visible\n `}\n >\n {/* Progress Bar - Full width at top with responsive scaling */}\n <div\n className={`\n w-full ${sizeClasses.progressBar} ${stateClasses.progressBar}\n rounded-sm flex-none\n `}\n />\n\n {/* Step Content Container - Responsive layout for all devices, no vertical scroll */}\n <div\n className={`\n flex flex-col sm:flex-row items-center\n gap-1 sm:gap-2 w-full sm:w-auto\n h-auto sm:h-5 flex-none\n overflow-visible\n `}\n >\n {/* Step Indicator Circle with responsive sizing */}\n <div\n className={`\n ${sizeClasses.indicator} ${stateClasses.indicator}\n rounded-full flex items-center justify-center relative\n flex-none transition-all duration-300 ease-out\n w-4 h-4 sm:w-5 sm:h-5 md:w-5 md:h-5 lg:w-6 lg:h-6\n `}\n aria-label={getAriaLabel()}\n >\n {isCompleted ? (\n <Check\n weight=\"bold\"\n className={`\n ${stateClasses.indicatorText}\n w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3 md:h-3 lg:w-3.5 lg:h-3.5\n `}\n />\n ) : (\n <Text\n size={sizeClasses.indicatorTextSize as '2xs' | 'xs' | 'sm'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.indicatorText,\n 'leading-none text-2xs sm:text-xs'\n )}\n >\n {stepNumber}\n </Text>\n )}\n </div>\n\n {/* Step Label with full responsive text sizing, no vertical overflow */}\n <Text\n size={sizeClasses.labelTextSize as '2xs' | 'xs' | 'sm' | 'md'}\n weight=\"medium\"\n color=\"\"\n className={cn(\n stateClasses.label,\n 'leading-tight flex-none text-center sm:text-left break-words px-1 sm:px-0 max-w-full text-2xs sm:text-xs md:text-xs lg:text-sm whitespace-normal'\n )}\n >\n {step.label}\n </Text>\n </div>\n </div>\n );\n};\n\n/**\n * Stepper component props interface\n */\nexport type StepperProps = {\n /** Array of step data */\n steps: StepData[];\n /** Size variant of the stepper */\n size?: StepperSize;\n /** Current active step index */\n currentStep?: number;\n /** Additional CSS classes */\n className?: string;\n /** Step container CSS classes */\n stepClassName?: string;\n /** Progress indicator (e.g., \"Etapa 2 de 4\") */\n showProgress?: boolean;\n /** Custom progress text */\n progressText?: string;\n /** Make stepper responsive (vertical on mobile) */\n responsive?: boolean;\n};\n\n/**\n * Helper function to calculate step states based on current step\n */\nconst calculateStepStates = (\n steps: StepData[],\n currentStep: number\n): StepData[] => {\n return steps.map((step, index) => {\n let stepState: StepState;\n\n if (index < currentStep) {\n stepState = 'completed';\n } else if (index === currentStep) {\n stepState = 'current';\n } else {\n stepState = 'pending';\n }\n\n return {\n ...step,\n state: stepState,\n };\n });\n};\n\n/**\n * Helper function to get progress text\n */\nconst getProgressText = (\n currentStep: number,\n totalSteps: number,\n customText?: string\n): string => {\n if (customText) return customText;\n return `Etapa ${currentStep + 1} de ${totalSteps}`;\n};\n\n/**\n * Stepper component for Analytica Ensino platforms\n *\n * A progress stepper component that displays a sequence of steps with different states.\n * Follows the exact design specifications with proper spacing, colors, and layout.\n * Fully responsive for mobile, tablets, and laptops.\n *\n * Design specifications:\n * - Based on exact CSS specifications from Figma design\n * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)\n * - Progressive sizing with responsive breakpoints that adapt to device type\n * - Consistent gaps that scale with screen size and device capabilities\n * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)\n * - Responsive design with overflow scroll on smaller devices\n * - Optimized text sizing and layout for each device category\n *\n * @example\n * ```tsx\n * // Basic stepper - automatically responsive for all devices\n * <Stepper steps={steps} currentStep={1} />\n *\n * // Custom styling with full responsive behavior\n * <Stepper steps={steps} size=\"medium\" showProgress responsive />\n * ```\n */\nconst Stepper = ({\n steps: initialSteps,\n size = 'medium',\n currentStep,\n className = '',\n stepClassName = '',\n showProgress = false,\n progressText,\n responsive = true,\n}: StepperProps) => {\n const sizeClasses = SIZE_CLASSES[size];\n\n // Calculate steps with states if currentStep is provided\n const steps =\n currentStep !== undefined\n ? calculateStepStates(initialSteps, currentStep)\n : initialSteps;\n\n return (\n <fieldset\n className={cn(\n 'flex flex-col gap-4 sm:gap-5 md:gap-6',\n className,\n 'border-0 p-0 m-0'\n )}\n >\n <legend className=\"absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0\">\n Stepper de formulário\n </legend>\n {/* Progress indicator with responsive text */}\n {showProgress && currentStep !== undefined && (\n <Text\n size=\"sm\"\n weight=\"medium\"\n className=\"text-text-600 text-center sm:text-left text-xs sm:text-sm\"\n >\n {getProgressText(currentStep, steps.length, progressText)}\n </Text>\n )}\n\n {/* Stepper container - Fully responsive for all devices with horizontal scroll only */}\n <div\n className={cn(\n 'flex items-center',\n sizeClasses.container,\n responsive\n ? 'flex-row overflow-x-auto overflow-y-hidden scrollbar-hide justify-start sm:justify-center md:justify-center lg:justify-center'\n : 'flex-row justify-center',\n 'px-2 sm:px-4 md:px-6 lg:px-0 max-w-full min-w-0 gap-2 sm:gap-3 md:gap-4 lg:gap-4'\n )}\n role=\"tablist\"\n aria-label=\"Progress steps\"\n >\n {steps.map((step, index) => {\n const stateClasses = STATE_CLASSES[step.state];\n\n return (\n <Step\n key={step.id}\n step={step}\n index={index}\n size={size}\n sizeClasses={sizeClasses}\n stateClasses={stateClasses}\n isLast={index === steps.length - 1}\n className={stepClassName}\n />\n );\n })}\n </div>\n </fieldset>\n );\n};\n\nexport default Stepper;\n"],"mappings":"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","names":["jsx"]}
|