softable-pixels-web 1.1.4 → 1.1.6

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.
@@ -137,7 +137,7 @@ function getBackgroundColor(variant, color) {
137
137
  function getBorder(variant, color) {
138
138
  if (color) return `1px solid ${color}`;
139
139
  if (variant === "filled") return "1px solid var(--px-btn-filled-bg)";
140
- if (variant === "outlined") return "1px solid var(--px-btn-outlined-border)";
140
+ if (variant === "outlined") return "1px solid var(--px-border-primary)";
141
141
  if (variant === "ghost") return "none";
142
142
  return "1px solid var(--px-color-primary)";
143
143
  }
@@ -201,4 +201,4 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
201
201
 
202
202
  //#endregion
203
203
  export { Button as t };
204
- //# sourceMappingURL=Button-CsXcjd9w.js.map
204
+ //# sourceMappingURL=Button-BiSdxI2A.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button-CsXcjd9w.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/toolkit/Loader/constants.ts","../src/components/toolkit/Loader/utils.ts","../src/components/toolkit/Loader/styles.ts","../src/components/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n animate: { rotate: 360 },\n transition: {\n repeat: Infinity,\n duration: 1,\n ease: 'linear'\n }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n const thickness = props.thickness || DEFAULT_THICKNESS\n const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n return styled({\n container: {\n display: ' inline-block',\n\n width: props.size || DEFAULT_SIZE,\n height: props.size || DEFAULT_SIZE,\n\n borderRadius: '50%',\n border: getBorder(props),\n borderLeftColor: props.color || DEFAULT_COLOR\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n return (\n <motion.div\n role=\"status\"\n aria-label=\"Loading\"\n style={styles.container}\n {...SPINNER_ANIMATION}\n />\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n return styled({\n container: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n borderRadius: 'var(--px-border-radius-button)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n return (\n <motion.div\n style={styles.container}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n >\n <Loader color={color} />\n </motion.div>\n )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\nimport type { CSSProperties } from 'react'\n\nexport function createButtonStyles({\n size,\n color,\n variant,\n disabled,\n fullWidth,\n textAlign,\n outlineColor\n}: ButtonProps): ReturnType<typeof styled> {\n const finalVariant = variant ?? 'filled'\n\n return styled({\n container: {\n ...getSize(size || 'md'),\n\n width: fullWidth ? '100%' : 'fit-content',\n\n position: 'relative',\n display: 'flex',\n justifyContent: textAlign || 'center',\n\n padding: '10px var(--px-space-xl)',\n gap: 'var(--px-space-sm)',\n\n borderRadius: 'var(--px-radius-md)',\n\n cursor: 'pointer',\n\n transition: 'background-color 0.5s',\n\n border: getBorder(finalVariant, outlineColor || color),\n backgroundColor: getBackgroundColor(finalVariant, color),\n\n boxShadow:\n variant === 'outlined'\n ? `0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D`\n : 'none',\n\n __rules: {\n '&:hover': {\n opacity: '0.85 !important'\n },\n '&:disabled': {\n opacity: '0.5 !important',\n cursor: 'not-allowed !important'\n }\n }\n },\n\n content: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n\n padding: '0',\n borderRadius: 'inherit',\n\n whiteSpace: 'nowrap',\n columnGap: 'var(--px-space-sm)'\n }\n })\n}\n\nfunction getSize(size: ButtonSize | string): CSSProperties {\n switch (size) {\n case 'lg':\n return { minHeight: '3.25rem' }\n case 'md':\n return { minHeight: '2.75rem' }\n case 'sm':\n return { minHeight: '2.25rem' }\n case 'xs':\n return { minHeight: '1.75rem' }\n default:\n return { minHeight: size }\n }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n if (color) return color\n\n if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return 'transparent'\n\n if (variant === 'ghost') return 'transparent'\n\n return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n if (color) return `1px solid ${color}`\n\n if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n if (variant === 'ghost') return 'none'\n\n return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps) {\n if (labelColor) return labelColor\n\n if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n if (variant === 'ghost') return '--px-btn-ghost-label'\n\n return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\nimport { ButtonLoader } from './components/ButtonLoader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n type = 'button',\n variant = 'filled',\n ...rest\n}) => {\n // Constants\n const disabled = rest.disabled || rest.loading\n const resolvedProps = { type, variant, disabled, ...rest }\n const textColor = getTextColor(resolvedProps)\n const { label, endIcon, startIcon, loading } = resolvedProps\n\n // Hooks\n const { styles, classes } = useThemedStyles(\n resolvedProps,\n createButtonStyles,\n {\n override: rest.styles,\n applyCommonProps: true,\n commonSlot: 'container',\n pick: p => [p.disabled, p.loading, p.label, p.color]\n }\n )\n\n // Functions\n function handleButtonClick(event: MouseEvent<HTMLButtonElement>) {\n if (disabled) return\n\n if (rest.onClick) rest.onClick(event)\n }\n\n return (\n <button\n type={type}\n disabled={disabled}\n aria-busy={rest.loading}\n style={styles.container}\n className={classes.container}\n onClick={handleButtonClick}\n >\n <div style={styles.content}>\n {startIcon ?? null}\n\n <Typography variant={rest.labelVariant || 'b1'} color={textColor}>\n {label}\n </Typography>\n\n {endIcon ?? null}\n\n {loading ? (\n <AnimatePresence>\n <ButtonLoader color={textColor} />\n </AnimatePresence>\n ) : null}\n </div>\n </button>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"Button-BiSdxI2A.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/toolkit/Loader/constants.ts","../src/components/toolkit/Loader/utils.ts","../src/components/toolkit/Loader/styles.ts","../src/components/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n animate: { rotate: 360 },\n transition: {\n repeat: Infinity,\n duration: 1,\n ease: 'linear'\n }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n const thickness = props.thickness || DEFAULT_THICKNESS\n const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n return styled({\n container: {\n display: ' inline-block',\n\n width: props.size || DEFAULT_SIZE,\n height: props.size || DEFAULT_SIZE,\n\n borderRadius: '50%',\n border: getBorder(props),\n borderLeftColor: props.color || DEFAULT_COLOR\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n return (\n <motion.div\n role=\"status\"\n aria-label=\"Loading\"\n style={styles.container}\n {...SPINNER_ANIMATION}\n />\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n return styled({\n container: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n borderRadius: 'var(--px-border-radius-button)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n return (\n <motion.div\n style={styles.container}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n >\n <Loader color={color} />\n </motion.div>\n )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\nimport type { CSSProperties } from 'react'\n\nexport function createButtonStyles({\n size,\n color,\n variant,\n disabled,\n fullWidth,\n textAlign,\n outlineColor\n}: ButtonProps): ReturnType<typeof styled> {\n const finalVariant = variant ?? 'filled'\n\n return styled({\n container: {\n ...getSize(size || 'md'),\n\n width: fullWidth ? '100%' : 'fit-content',\n\n position: 'relative',\n display: 'flex',\n justifyContent: textAlign || 'center',\n\n padding: '10px var(--px-space-xl)',\n gap: 'var(--px-space-sm)',\n\n borderRadius: 'var(--px-radius-md)',\n\n cursor: 'pointer',\n\n transition: 'background-color 0.5s',\n\n border: getBorder(finalVariant, outlineColor || color),\n backgroundColor: getBackgroundColor(finalVariant, color),\n\n boxShadow:\n variant === 'outlined'\n ? `0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D`\n : 'none',\n\n __rules: {\n '&:hover': {\n opacity: '0.85 !important'\n },\n '&:disabled': {\n opacity: '0.5 !important',\n cursor: 'not-allowed !important'\n }\n }\n },\n\n content: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n\n padding: '0',\n borderRadius: 'inherit',\n\n whiteSpace: 'nowrap',\n columnGap: 'var(--px-space-sm)'\n }\n })\n}\n\nfunction getSize(size: ButtonSize | string): CSSProperties {\n switch (size) {\n case 'lg':\n return { minHeight: '3.25rem' }\n case 'md':\n return { minHeight: '2.75rem' }\n case 'sm':\n return { minHeight: '2.25rem' }\n case 'xs':\n return { minHeight: '1.75rem' }\n default:\n return { minHeight: size }\n }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n if (color) return color\n\n if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return 'transparent'\n\n if (variant === 'ghost') return 'transparent'\n\n return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n if (color) return `1px solid ${color}`\n\n if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return '1px solid var(--px-border-primary)'\n\n if (variant === 'ghost') return 'none'\n\n return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps) {\n if (labelColor) return labelColor\n\n if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n if (variant === 'ghost') return '--px-btn-ghost-label'\n\n return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\nimport { ButtonLoader } from './components/ButtonLoader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n type = 'button',\n variant = 'filled',\n ...rest\n}) => {\n // Constants\n const disabled = rest.disabled || rest.loading\n const resolvedProps = { type, variant, disabled, ...rest }\n const textColor = getTextColor(resolvedProps)\n const { label, endIcon, startIcon, loading } = resolvedProps\n\n // Hooks\n const { styles, classes } = useThemedStyles(\n resolvedProps,\n createButtonStyles,\n {\n override: rest.styles,\n applyCommonProps: true,\n commonSlot: 'container',\n pick: p => [p.disabled, p.loading, p.label, p.color]\n }\n )\n\n // Functions\n function handleButtonClick(event: MouseEvent<HTMLButtonElement>) {\n if (disabled) return\n\n if (rest.onClick) rest.onClick(event)\n }\n\n return (\n <button\n type={type}\n disabled={disabled}\n aria-busy={rest.loading}\n style={styles.container}\n className={classes.container}\n onClick={handleButtonClick}\n >\n <div style={styles.content}>\n {startIcon ?? null}\n\n <Typography variant={rest.labelVariant || 'b1'} color={textColor}>\n {label}\n </Typography>\n\n {endIcon ?? null}\n\n {loading ? (\n <AnimatePresence>\n <ButtonLoader color={textColor} />\n </AnimatePresence>\n ) : null}\n </div>\n </button>\n )\n}\n"],"mappings":"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"}
@@ -34,7 +34,7 @@ const Label$1 = (props) => {
34
34
  style: styles.container,
35
35
  children: /* @__PURE__ */ jsx(Typography, {
36
36
  variant: labelVariant ?? "b1",
37
- fontWeight: "normal",
37
+ fontWeight: "regular",
38
38
  children: label
39
39
  })
40
40
  });
@@ -165,4 +165,4 @@ const Checkbox$1 = (props) => {
165
165
 
166
166
  //#endregion
167
167
  export { Checkbox$1 as t };
168
- //# sourceMappingURL=Checkbox-DE2wp1rK.js.map
168
+ //# sourceMappingURL=Checkbox-6ivVbzcX.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox-6ivVbzcX.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n const { disabled } = props\n\n return styled({\n container: {\n userSelect: 'none',\n opacity: disabled ? 0.6 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n transition: 'all 200ms',\n\n __rules: {\n ':hover': { color: 'var(--px-color-secondary)' }\n }\n }\n })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n const { idFor, label, labelVariant } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createLabelStyles, {\n pick: p => [p.disabled, p.labelVariant, p.label],\n applyCommonProps: true\n })\n\n return (\n <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n <Typography variant={labelVariant ?? 'b1'} fontWeight=\"regular\">\n {label}\n </Typography>\n </LabelRadix.Root>\n )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n return {\n id: useId()\n }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n size: {\n sm: { width: '1rem', height: '1rem' },\n md: { width: '1.25rem', height: '1.25rem' },\n lg: { width: '1.5rem', height: '1.5rem' }\n },\n radius: {\n none: { borderRadius: 0 },\n sm: { borderRadius: '0.25rem' },\n md: { borderRadius: '0.375rem' },\n lg: { borderRadius: '0.5rem' },\n full: { borderRadius: '100%' }\n }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n const {\n color,\n checked,\n size = 'md',\n radius = 'md',\n disabled = false,\n labelPlacement = 'right'\n } = props\n\n const focusIndicatorOffsetColor = '#fff'\n\n return styled({\n container: {\n display: 'flex',\n columnGap: '0.5rem',\n alignItems: 'center',\n '--px-ring-color': color ?? undefined,\n flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n },\n\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n backgroundColor: checked ? color : 'white',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n transition: 'color 200ms',\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n ...CHECKBOX_STYLES.size[size],\n ...CHECKBOX_STYLES.radius[radius],\n\n __rules: {\n '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n '&:focus-visible': {\n outline: 'none',\n boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n }\n }\n },\n\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--px-text-primary, #4b5563)'\n }\n })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n backgroundColor: string\n): 'black' | 'white' {\n let hex = backgroundColor.replace('#', '')\n\n if (hex.length === 3) {\n hex = hex\n .split('')\n .map(c => c + c)\n .join('')\n }\n\n if (hex.length === 8) {\n hex = hex.substring(0, 6)\n }\n\n if (hex.length !== 6) return 'black'\n\n const r = parseInt(hex.substring(0, 2), 16)\n const g = parseInt(hex.substring(2, 4), 16)\n const b = parseInt(hex.substring(4, 6), 16)\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n icon,\n label,\n color,\n labelVariant,\n checked = false,\n disabled = false,\n onChange\n } = props\n\n const iconColor = color ? getContrastingTextColor(color) : undefined\n\n // Hooks\n const { id } = useCheckbox()\n\n const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n return (\n <div style={styles.container}>\n <CheckboxRadix.Root\n style={styles.root}\n className={classes.root}\n id={id}\n tabIndex={0}\n checked={checked}\n disabled={disabled}\n onCheckedChange={checked => onChange(checked === true)}\n >\n <CheckboxRadix.Indicator style={styles.indicator}>\n {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n </CheckboxRadix.Indicator>\n </CheckboxRadix.Root>\n\n {label ? (\n <Label\n idFor={id}\n label={label}\n disabled={disabled}\n labelVariant={labelVariant}\n />\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,kBAAkB,OAA6B;CAC7D,MAAM,EAAE,aAAa;AAErB,QAAO,OAAO,EACZ,WAAW;EACT,YAAY;EACZ,SAAS,WAAW,KAAM;EAC1B,QAAQ,WAAW,gBAAgB;EAEnC,YAAY;EAEZ,SAAS,EACP,UAAU,EAAE,OAAO,6BAA6B,EACjD;EACF,EACF,CAAC;;;;;ACJJ,MAAaA,WAA8B,UAAS;CAClD,MAAM,EAAE,OAAO,OAAO,iBAAiB;CAGvC,MAAM,EAAE,WAAW,gBAAgB,OAAO,mBAAmB;EAC3D,OAAM,MAAK;GAAC,EAAE;GAAU,EAAE;GAAc,EAAE;GAAM;EAChD,kBAAkB;EACnB,CAAC;AAEF,QACE,oBAACC,MAAW;EAAK,SAAS;EAAO,OAAO,OAAO;YAC7C,oBAAC;GAAW,SAAS,gBAAgB;GAAM,YAAW;aACnD;IACU;GACG;;;;;AC1BtB,SAAgB,cAAc;AAC5B,QAAO,EACL,IAAI,OAAO,EACZ;;;;;ACFH,MAAaC,kBAA4C;CACvD,MAAM;EACJ,IAAI;GAAE,OAAO;GAAQ,QAAQ;GAAQ;EACrC,IAAI;GAAE,OAAO;GAAW,QAAQ;GAAW;EAC3C,IAAI;GAAE,OAAO;GAAU,QAAQ;GAAU;EAC1C;CACD,QAAQ;EACN,MAAM,EAAE,cAAc,GAAG;EACzB,IAAI,EAAE,cAAc,WAAW;EAC/B,IAAI,EAAE,cAAc,YAAY;EAChC,IAAI,EAAE,cAAc,UAAU;EAC9B,MAAM,EAAE,cAAc,QAAQ;EAC/B;CACF;AAED,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EACJ,OACA,SACA,OAAO,MACP,SAAS,MACT,WAAW,OACX,iBAAiB,YACf;CAEJ,MAAM,4BAA4B;AAElC,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,WAAW;GACX,YAAY;GACZ,mBAAmB,SAAS;GAC5B,eAAe,mBAAmB,UAAU,QAAQ;GACrD;EAED,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UAAU,QAAQ;GACnC,aAAa;GACb,aAAa;GACb,aAAa,UAAU,QAAQ;GAE/B,YAAY;GACZ,SAAS,WAAW,KAAM;GAC1B,QAAQ,WAAW,gBAAgB;GAEnC,GAAG,gBAAgB,KAAK;GACxB,GAAG,gBAAgB,OAAO;GAE1B,SAAS;IACP,WAAW,EAAE,aAAa,uCAAuC;IACjE,mBAAmB;KACjB,SAAS;KACT,WAAW,aAAa,0BAA0B;KACnD;IACF;GACF;EAED,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACR;EACF,CAAC;;;;;;;;;ACpEJ,SAAgB,wBACd,iBACmB;CACnB,IAAI,MAAM,gBAAgB,QAAQ,KAAK,GAAG;AAE1C,KAAI,IAAI,WAAW,EACjB,OAAM,IACH,MAAM,GAAG,CACT,KAAI,MAAK,IAAI,EAAE,CACf,KAAK,GAAG;AAGb,KAAI,IAAI,WAAW,EACjB,OAAM,IAAI,UAAU,GAAG,EAAE;AAG3B,KAAI,IAAI,WAAW,EAAG,QAAO;CAE7B,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;AAI3C,SAFmB,OAAQ,IAAI,OAAQ,IAAI,OAAQ,KAAK,MAErC,KAAM,UAAU;;;;;ACTrC,MAAaC,cAAoC,UAAS;CACxD,MAAM,EACJ,MACA,OACA,OACA,cACA,UAAU,OACV,WAAW,OACX,aACE;CAEJ,MAAM,YAAY,QAAQ,wBAAwB,MAAM,GAAG;CAG3D,MAAM,EAAE,OAAO,aAAa;CAE5B,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,qBAAqB;AAExE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAACC,SAAc;GACb,OAAO,OAAO;GACd,WAAW,QAAQ;GACf;GACJ,UAAU;GACD;GACC;GACV,kBAAiB,cAAW,SAASC,cAAY,KAAK;aAEtD,oBAACD,SAAc;IAAU,OAAO,OAAO;cACpC,QAAQ,oBAAC;KAAK,MAAK;KAAgB,MAAK;KAAK,OAAO;MAAa;KAC1C;IACP,EAEpB,QACC,oBAACE;GACC,OAAO;GACA;GACG;GACI;IACd,GACA;GACA"}
@@ -146,7 +146,7 @@ const SummaryHighlight = ({ loading, highlightText, highlightIcon }) => {
146
146
  variant: "b1",
147
147
  lineHeight: "100%",
148
148
  fontSize: "0.875rem",
149
- fontWeight: "normal",
149
+ fontWeight: "regular",
150
150
  isLoading: loading,
151
151
  children: highlightText
152
152
  })
@@ -248,4 +248,4 @@ const InfoSummary = ({ infos, loading }) => {
248
248
 
249
249
  //#endregion
250
250
  export { InfoSummary as t };
251
- //# sourceMappingURL=InfoSummary-BwrLkEfC.js.map
251
+ //# sourceMappingURL=InfoSummary-Bsczs0X6.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"InfoSummary-BwrLkEfC.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n gap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n title: string\n icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n return (\n <header style={styles.container}>\n {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n fontWeight=\"bold\"\n lineHeight=\"100%\"\n fontSize=\"0.75rem\"\n >\n {title}\n </Typography>\n </div>\n </header>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '0.625rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyItems: 'start',\n\n columnGap: '0.125rem'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'center',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n return (\n <div style={styles.container}>\n <div style={styles.textContainer}>\n <Typography\n variant=\"b3\"\n lineHeight=\"100%\"\n isLoading={loading}\n fontSize=\"0.625rem\"\n color=\"var(--px-text-secondary)\"\n >\n {captionText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n columnGap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n lineHeight: '1'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n highlightText?: string\n highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n loading,\n highlightText,\n highlightIcon\n}) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n return (\n <div style={styles.container}>\n {highlightIcon ? (\n <div style={styles.iconContainer}>{highlightIcon}</div>\n ) : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n lineHeight=\"100%\"\n fontSize=\"0.875rem\"\n fontWeight=\"normal\"\n isLoading={loading}\n >\n {highlightText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n return styled({\n container: {\n height: '100%',\n borderRight: props.isLast ? 'none' : '2px solid var(--border-secondary)'\n },\n\n content: {\n minWidth: '8rem',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n\n paddingBlock: '0.5rem',\n paddingInline: '1rem'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n return (\n <li style={styles.container}>\n <article style={styles.content}>\n <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n <SummaryHighlight\n loading={props.loading}\n highlightText={props.item.highlight}\n highlightIcon={props.item.highlightIcon}\n />\n\n <SummaryCaption\n loading={props.loading}\n captionText={props.item.caption}\n />\n </article>\n </li>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n return styled({\n section: {\n height: '5.5rem',\n minHeight: '5.5rem',\n\n width: 'fit-content',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n\n backgroundColor: 'var(--px-background-card-primary)',\n\n borderRadius: '10px',\n paddingBlock: 'var(--px-space-sm)'\n },\n\n summaryListContainer: {\n width: '100%',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n // Functions\n function renderSummaryItems() {\n return (\n <ul style={styles.summaryListContainer}>\n {infos.map((info, index) => (\n <SummaryItem\n item={info}\n key={info.id}\n loading={loading}\n isLast={index === infos.length - 1}\n />\n ))}\n </ul>\n )\n }\n\n return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"InfoSummary-Bsczs0X6.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n gap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n title: string\n icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n return (\n <header style={styles.container}>\n {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n fontWeight=\"bold\"\n lineHeight=\"100%\"\n fontSize=\"0.75rem\"\n >\n {title}\n </Typography>\n </div>\n </header>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '0.625rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyItems: 'start',\n\n columnGap: '0.125rem'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'center',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n return (\n <div style={styles.container}>\n <div style={styles.textContainer}>\n <Typography\n variant=\"b3\"\n lineHeight=\"100%\"\n isLoading={loading}\n fontSize=\"0.625rem\"\n color=\"var(--px-text-secondary)\"\n >\n {captionText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n return styled({\n container: {\n width: '100%',\n minHeight: '1rem',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n\n columnGap: '0.125rem'\n },\n\n iconContainer: {\n display: 'flex',\n alignItems: 'flex-start'\n },\n\n textContainer: {\n flex: '1',\n maxWidth: '8rem',\n\n display: 'flex',\n alignItems: 'flex-start',\n\n __rules: {\n '& > p': {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n lineHeight: '1'\n }\n }\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n loading?: boolean\n highlightText?: string\n highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n loading,\n highlightText,\n highlightIcon\n}) => {\n // Hooks\n const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n return (\n <div style={styles.container}>\n {highlightIcon ? (\n <div style={styles.iconContainer}>{highlightIcon}</div>\n ) : null}\n\n <div style={styles.textContainer}>\n <Typography\n variant=\"b1\"\n lineHeight=\"100%\"\n fontSize=\"0.875rem\"\n fontWeight=\"regular\"\n isLoading={loading}\n >\n {highlightText}\n </Typography>\n </div>\n </div>\n )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n return styled({\n container: {\n height: '100%',\n borderRight: props.isLast ? 'none' : '2px solid var(--border-secondary)'\n },\n\n content: {\n minWidth: '8rem',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-between',\n\n paddingBlock: '0.5rem',\n paddingInline: '1rem'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n return (\n <li style={styles.container}>\n <article style={styles.content}>\n <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n <SummaryHighlight\n loading={props.loading}\n highlightText={props.item.highlight}\n highlightIcon={props.item.highlightIcon}\n />\n\n <SummaryCaption\n loading={props.loading}\n captionText={props.item.caption}\n />\n </article>\n </li>\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n return styled({\n section: {\n height: '5.5rem',\n minHeight: '5.5rem',\n\n width: 'fit-content',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start',\n\n backgroundColor: 'var(--px-background-card-primary)',\n\n borderRadius: '10px',\n paddingBlock: 'var(--px-space-sm)'\n },\n\n summaryListContainer: {\n width: '100%',\n height: '100%',\n\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-start'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n // Functions\n function renderSummaryItems() {\n return (\n <ul style={styles.summaryListContainer}>\n {infos.map((info, index) => (\n <SummaryItem\n item={info}\n key={info.id}\n loading={loading}\n isLast={index === infos.length - 1}\n />\n ))}\n </ul>\n )\n }\n\n return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}
@@ -426,13 +426,10 @@ const ThemeProvider = ({ themes, children, override, persistence, persist = fals
426
426
  } catch {
427
427
  return defaultMode;
428
428
  }
429
- if (persist) {
430
- const ls = getLocalStorageSafe();
431
- if (!ls) return defaultMode;
432
- const raw = ls.getItem(storageKey);
433
- return isThemeMode(raw) ? raw : defaultMode;
434
- }
435
- return defaultMode;
429
+ const ls = getLocalStorageSafe();
430
+ if (!ls) return defaultMode;
431
+ const raw = ls.getItem(storageKey)?.replaceAll("\"", "");
432
+ return isThemeMode(raw) ? raw : defaultMode;
436
433
  }
437
434
  const [mode, setMode] = useState(makeInitialMode);
438
435
  /**
@@ -519,4 +516,4 @@ function useTheme() {
519
516
 
520
517
  //#endregion
521
518
  export { useTheme as n, ThemeProvider as t };
522
- //# sourceMappingURL=ThemeContext-BE6u_eYD.js.map
519
+ //# sourceMappingURL=ThemeContext-Dro_peJg.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeContext-Dro_peJg.js","names":["result: any","out: any","defaultThemes: ThemeRegistry","ThemeProvider: React.FC<ThemeProviderProps>"],"sources":["../src/utils/functions/deepMerge.ts","../src/contexts/ThemeContext/constants.ts","../src/contexts/ThemeContext/utils/general.ts","../src/contexts/ThemeContext/utils/themeToCSSVars.ts","../src/contexts/ThemeContext/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport type DeepPartial<T> = {\n [P in keyof T]?: T[P] extends Array<infer U>\n ? Array<DeepPartial<U>>\n : T[P] extends object\n ? DeepPartial<T[P]>\n : T[P]\n}\n\nexport function deepMerge<T>(base: T, override?: DeepPartial<T>): T {\n if (override === undefined) return clone(base)\n\n if (!isPlainObject(base) || !isPlainObject(override)) {\n return clone(override as T)\n }\n\n const result: any = Array.isArray(base) ? [] : {}\n\n const baseKeys = Object.keys(base as any) as (keyof T)[]\n const overrideKeys = Object.keys(override as any) as (keyof T)[]\n\n const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]))\n\n for (const k of allKeys) {\n const baseVal = (base as any)[k]\n const overrideVal = (override as any)[k]\n\n if (overrideVal === undefined) {\n result[k] = clone(baseVal)\n continue\n }\n\n if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {\n result[k] = deepMerge(baseVal, overrideVal)\n continue\n }\n\n result[k] = clone(overrideVal)\n }\n\n return result as T\n}\n\nfunction isPlainObject(x: any): x is Record<string, any> {\n return !!x && typeof x === 'object' && !Array.isArray(x)\n}\n\nfunction clone<T>(v: T): T {\n if (v === undefined || v === null) return v\n if (Array.isArray(v)) return v.map(item => clone(item)) as unknown as T\n if (isPlainObject(v)) {\n const out: any = {}\n for (const k of Object.keys(v)) out[k] = clone((v as any)[k])\n return out\n }\n return v\n}\n","// theme/defaultThemes.ts\nimport type { ThemeRegistry } from './types'\n\nconst COMMON_MAP = {\n spacing: {\n xs: '0.25rem', // 4px\n sm: '0.5rem', // 8px\n md: '1rem', // 16px\n lg: '1.5rem', // 24px\n xl: '2rem', // 32px\n '2xl': '3rem' // 48px\n },\n borderRadius: {\n none: '0rem', // 0px\n sm: '0.25rem', // 4px\n md: '0.375rem', // 6px\n lg: '0.5rem', // 8px\n full: '9999rem' // \"infinite\" radius equivalent\n },\n fontSize: {\n xs: '0.75rem', // 12px\n sm: '0.875rem', // 14px\n md: '1rem', // 16px\n lg: '1.125rem', // 18px\n xl: '1.25rem', // 20px\n '2xl': '1.5rem' // 24px\n },\n fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 }\n} as const\n\nexport const defaultThemes: ThemeRegistry = {\n light: {\n colors: {\n scrollbar: '#0000001a',\n disabled: '#D5D7DA',\n\n primary: '#0EB24C',\n secondary: '#6C6C6C',\n success: '#0EB24C',\n warning: '#f59e0b',\n error: '#ef4444',\n invalid: '#f87171',\n info: '#06b6d4',\n\n background: {\n primary: '#FFFFFF',\n card: {\n primary: '#F4F4F4',\n secondary: '#F3F6F9'\n }\n },\n button: {\n filled: {\n label: '#FFFFFF',\n background: '#0EB24C'\n },\n\n outlined: {\n label: '#222222',\n borderColor: '#DDDDDD'\n },\n\n ghost: {\n label: '#6C6C6C'\n }\n },\n\n surface: '#FBFBFB',\n border: {\n primary: '#E8E8E9',\n secondary: '#E8E8E9'\n },\n\n text: {\n primary: '#222222',\n secondary: '#6C6C6C',\n disabled: '#A0A0A0',\n inverse: '#FFFFFF'\n }\n },\n\n ...COMMON_MAP,\n\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.10)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.10)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.10)'\n }\n },\n\n dark: {\n colors: {\n scrollbar: '#858585',\n disabled: '#D5D7DA',\n\n primary: '#0EB24C', // brand se mantém (ou pode clarear depois)\n secondary: '#C7CFD8',\n success: '#0EB24C',\n warning: '#f59e0b',\n error: '#ef4444',\n invalid: '#f87171',\n info: '#06b6d4',\n\n background: {\n primary: '#090909',\n card: {\n primary: '#F4F4F4',\n secondary: '#202020'\n }\n },\n button: {\n filled: {\n label: '#FFFFFF',\n background: '#0EB24C'\n },\n\n outlined: {\n label: '#ECECEC',\n borderColor: '#DDDDDD'\n },\n\n ghost: {\n label: '#6C6C6C'\n }\n },\n\n surface: '#090909',\n\n border: {\n primary: '#27282D',\n secondary: '#27282D'\n },\n\n text: {\n primary: '#ECECEC',\n secondary: '#C7CFD8',\n disabled: '#8B93A0',\n inverse: '#090909'\n }\n },\n\n ...COMMON_MAP,\n\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.35)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.45)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.50)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.55)'\n }\n }\n}\n","// Utils\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport { deepMerge } from '@utils/functions'\nimport { defaultThemes } from '../constants'\n\n// Types\nimport type { ThemeMode, ThemeRegistry, ThemeTokens } from '../types'\n\n/**\n * Theme Utilities\n * ===============\n * Small DOM utilities used by the ThemeProvider to:\n * - toggle dark mode class for Tailwind compatibility\n * - inject CSS variables (`--px-*`) into the document root\n * - read/watch the OS/browser theme preference (`prefers-color-scheme`)\n *\n * These helpers are:\n * - **client-safe** (guarded for SSR)\n * - **framework-agnostic** (only touch `documentElement`)\n * - **tiny** (no dependencies)\n */\n\n/**\n * CSSVarMap\n * ---------\n * A map of CSS custom properties to be applied on the document root.\n *\n * Notes:\n * - Keys must be valid CSS variable names (e.g. `\"--px-bg\"`, `\"--px-text-primary\"`).\n * - Values can be strings or numbers.\n * - If you store numbers (e.g. 16), you decide at consumption time whether it means px.\n *\n * You can keep it generic:\n * Record<`--${string}`, string | number>\n *\n * Or restrict to your library prefix:\n * Record<`--px-${string}`, string | number>\n */\nexport type CSSVarMap = Partial<Record<`--${string}`, string | number>>\n\n/**\n * applyThemeClass(themeName)\n * -------------------------\n * Applies the light/dark mode class to the `<html>` element.\n *\n * Tailwind’s dark mode (in the common \"class\" strategy) typically relies on a\n * `.dark` class. This function toggles ONLY the `dark` class:\n *\n * - themeName `\"dark\"` => adds `.dark`\n * - themeName `\"light\"` => removes `.dark`\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyThemeClass(themeName: 'light' | 'dark') {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n root.classList.toggle('dark', themeName === 'dark')\n}\n\n/**\n * applyCssVars(vars)\n * ------------------\n * Injects CSS variables into the document root (`<html>`).\n *\n * This is how the library exposes theme tokens as CSS variables.\n * Components can then use `var(--px-...)` in styles.\n *\n * Example:\n * ```ts\n * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })\n * ```\n *\n * Behavior:\n * - Ignores `null` / `undefined` values.\n * - Converts all values to string before applying.\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyCssVars(vars: CSSVarMap) {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n\n for (const [key, value] of Object.entries(vars)) {\n if (value == null) continue\n root.style.setProperty(key, String(value))\n }\n}\n\n/**\n * getSystemThemeName()\n * --------------------\n * Returns the current OS/browser color scheme preference.\n *\n * It reads `prefers-color-scheme: dark` using `window.matchMedia`.\n *\n * Returns:\n * - `\"dark\"` if the user prefers dark mode\n * - `\"light\"` otherwise\n *\n * SSR:\n * - Returns `\"light\"` on the server (safe default).\n */\nexport function getSystemThemeName(): 'light' | 'dark' {\n if (typeof window === 'undefined') return 'light'\n const prefersDark =\n window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false\n return prefersDark ? 'dark' : 'light'\n}\n\n/**\n * watchSystemTheme(onChange)\n * --------------------------\n * Subscribes to changes in OS/browser theme preference.\n *\n * Use this when your selected mode is `\"system\"` so the app immediately reacts\n * when the user changes their OS theme.\n *\n * - Calls `onChange('light' | 'dark')` whenever the preference changes.\n * - Returns an `unsubscribe()` function.\n *\n * Implementation details:\n * - Uses `matchMedia('(prefers-color-scheme: dark)')`.\n * - Supports both modern `addEventListener('change', ...)` and legacy Safari\n * `addListener(...)` APIs.\n *\n * SSR:\n * - Returns a no-op unsubscribe function on the server.\n */\nexport function watchSystemTheme(onChange: (name: 'light' | 'dark') => void) {\n if (typeof window === 'undefined') return () => {}\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)')\n\n const handler = () => onChange(mq.matches ? 'dark' : 'light')\n\n handler()\n\n if (mq.addEventListener) {\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }\n\n mq.addListener(handler as any)\n return () => mq.removeListener(handler as any)\n}\n\n/**\n * Resolves an effective theme name from a mode.\n */\nexport function resolveName(mode: ThemeMode): string {\n if (mode !== 'system') return mode\n return getSystemThemeName()\n}\n\n/**\n * Builds a registry of user theme patches.\n */\nexport function buildRegistry(\n userThemes?: Partial<ThemeRegistry>\n): ThemeRegistry {\n return {\n light: {},\n dark: {},\n ...(userThemes ?? {})\n } as ThemeRegistry\n}\n\n/**\n * Builds the final resolved theme tokens.\n */\nexport function buildTheme(\n registry: ThemeRegistry,\n resolvedName: string,\n override?: Partial<ThemeTokens>\n): ThemeTokens {\n const base: ThemeTokens =\n resolvedName === 'dark'\n ? (defaultThemes.dark as ThemeTokens)\n : (defaultThemes.light as ThemeTokens)\n\n const selectedPatch = (registry[resolvedName] ?? registry.light) as any\n\n const merged = deepMerge(base, selectedPatch)\n return deepMerge(merged, override)\n}\n\nexport function isThemeMode(value: unknown): value is ThemeMode {\n return typeof value === 'string' && value.length > 0\n}\n\nexport function getLocalStorageSafe(): Storage | null {\n if (typeof window === 'undefined') return null\n try {\n return window.localStorage\n } catch {\n return null\n }\n}\n","// Types\nimport type { CSSVarMap } from './general'\nimport type { ThemeTokens } from '../types'\n\n/**\n * themeToCssVars(theme)\n * ---------------------\n * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).\n *\n * The ThemeProvider uses this function to inject `--px-*` variables into the\n * document root (`<html>`). Components can then rely on stable CSS variables,\n * making them framework-agnostic and compatible with Tailwind (via `.dark`).\n *\n * Why CSS variables?\n * - They are fast (native to the browser)\n * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)\n * - They enable dynamic theme switching without rerendering every component\n *\n * Requirements / Assumptions:\n * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).\n * The ThemeProvider is responsible for merging partial theme patches on top\n * of a complete base theme (light/dark defaults).\n *\n * Variable naming:\n * - All variables are prefixed with `--px-` to avoid collisions.\n * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).\n *\n * Notes:\n * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid\n * for CSS variables. When consuming them, you can:\n * - append `px` in JS (`${var}px`), or\n * - store them as strings here (e.g. `\"16px\"`) if you prefer.\n *\n * Example usage (component styles):\n * ```ts\n * const styles = {\n * background: 'var(--px-bg)',\n * color: 'var(--px-text-primary)',\n * borderColor: 'var(--px-border-primary)',\n * }\n * ```\n *\n * Example usage (Tailwind config / CSS):\n * ```css\n * .card {\n * background: var(--px-surface);\n * color: var(--px-text-primary);\n * border: 1px solid var(--px-border-primary);\n * }\n * ```\n */\nexport function themeToCssVars(theme: ThemeTokens): CSSVarMap {\n return {\n /**\n * Brand & intent colors\n */\n '--px-color-primary': theme.colors.primary,\n '--px-color-secondary': theme.colors.secondary,\n '--px-color-success': theme.colors.success,\n '--px-color-warning': theme.colors.warning,\n '--px-color-error': theme.colors.error,\n '--px-color-invalid': theme.colors.invalid,\n '--px-color-info': theme.colors.info,\n '--px-color-disabled': theme.colors.disabled,\n\n /**\n * Scrollbar\n */\n '--px-scrollbar': theme.colors.scrollbar,\n\n /**\n * Surfaces / backgrounds\n */\n '--px-bg': theme.colors.background.primary,\n '--px-surface': theme.colors.surface,\n '--px-background-card-primary': theme.colors.background.card.primary,\n '--px-background-card-secondary': theme.colors.background.card.secondary,\n\n /**\n * Borders\n * -------\n * Divider and outline colors.\n */\n '--px-border-primary': theme.colors.border.primary,\n '--px-border-secondary': theme.colors.border.secondary,\n\n /**\n * Text\n * ----\n * Text colors for different emphasis levels.\n */\n '--px-text-primary': theme.colors.text.primary,\n '--px-text-secondary': theme.colors.text.secondary,\n '--px-text-disabled': theme.colors.text.disabled,\n '--px-text-inverse': theme.colors.text.inverse,\n\n /**\n * Buttons – Filled\n * ----------------\n * Filled button colors\n */\n '--px-btn-filled-bg': theme.colors.button.filled.background,\n '--px-btn-filled-label': theme.colors.button.filled.label,\n\n /**\n * Buttons – Outlined\n * ------------------\n * Outlined button colors\n */\n '--px-btn-outlined-border': theme.colors.button.outlined.borderColor,\n '--px-btn-outlined-label': theme.colors.button.outlined.label,\n\n /**\n * Buttons – Ghost\n * --------------\n * Ghost button colors\n */\n '--px-btn-ghost-label': theme.colors.button.ghost.label,\n /**\n * Spacing\n * -------------\n * Numeric spacing tokens (commonly used as px).\n */\n '--px-space-xs': theme.spacing.xs,\n '--px-space-sm': theme.spacing.sm,\n '--px-space-md': theme.spacing.md,\n '--px-space-lg': theme.spacing.lg,\n '--px-space-xl': theme.spacing.xl,\n '--px-space-2xl': theme.spacing['2xl'],\n\n /**\n * Border radius scale\n * -------------------\n * Numeric radius tokens (commonly used as px).\n */\n '--px-radius-none': theme.borderRadius.none,\n '--px-radius-sm': theme.borderRadius.sm,\n '--px-radius-md': theme.borderRadius.md,\n '--px-radius-lg': theme.borderRadius.lg,\n '--px-radius-full': theme.borderRadius.full,\n\n /**\n * Typography scale\n * ----------------\n * Font sizes and font weights.\n */\n '--px-fs-xs': theme.fontSize.xs,\n '--px-fs-sm': theme.fontSize.sm,\n '--px-fs-md': theme.fontSize.md,\n '--px-fs-lg': theme.fontSize.lg,\n '--px-fs-xl': theme.fontSize.xl,\n '--px-fs-2xl': theme.fontSize['2xl'],\n\n '--px-fw-normal': theme.fontWeight.normal,\n '--px-fw-medium': theme.fontWeight.medium,\n '--px-fw-semibold': theme.fontWeight.semibold,\n '--px-fw-bold': theme.fontWeight.bold,\n\n /**\n * Shadows\n * -------\n * CSS shadow strings for elevation.\n */\n '--px-shadow-sm': theme.shadows.sm,\n '--px-shadow-md': theme.shadows.md,\n '--px-shadow-lg': theme.shadows.lg,\n '--px-shadow-xl': theme.shadows.xl\n }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n'use client'\n\n// External Libraries\nimport {\n useMemo,\n useState,\n useEffect,\n useContext,\n createContext,\n useLayoutEffect\n} from 'react'\n\n// Utils\nimport {\n buildTheme,\n isThemeMode,\n resolveName,\n applyCssVars,\n buildRegistry,\n themeToCssVars,\n applyThemeClass,\n watchSystemTheme,\n getLocalStorageSafe\n} from './utils'\n\n// Types\nimport type { ThemeMode, ThemeContextData, ThemeProviderProps } from './types'\n\nexport * from './types'\n\nconst ThemeContext = createContext<ThemeContextData | null>(null)\n\n/**\n * useIsomorphicLayoutEffect\n * - On client: runs before paint (layout effect)\n * - On server: falls back to useEffect (no warnings)\n */\nconst useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n themes,\n children,\n override,\n persistence,\n persist = false,\n defaultMode = 'system',\n storageKey = 'px-theme',\n fallback = null\n}) => {\n const registry = useMemo(() => buildRegistry(themes), [themes])\n\n function makeInitialMode(): ThemeMode {\n if (persistence) {\n try {\n const saved = persistence.get()\n return (saved ?? defaultMode) as ThemeMode\n } catch {\n return defaultMode\n }\n }\n\n const ls = getLocalStorageSafe()\n if (!ls) return defaultMode\n const raw = ls.getItem(storageKey)?.replaceAll('\"', '')\n return isThemeMode(raw) ? raw : defaultMode\n }\n\n const [mode, setMode] = useState<ThemeMode>(makeInitialMode)\n\n /**\n * Gate: only render children after we applied class + vars at least once.\n * This prevents \"unstyled flash\" for your components.\n */\n const [isReady, setReady] = useState(false)\n\n const resolvedName = useMemo(() => {\n if (typeof window === 'undefined') return mode === 'system' ? 'light' : mode\n return resolveName(mode)\n }, [mode])\n\n const theme = useMemo(\n () => buildTheme(registry, resolvedName, override),\n [registry, resolvedName, override]\n )\n\n // keep in sync with OS when mode === \"system\"\n useEffect(() => {\n if (typeof window === 'undefined') return\n if (mode !== 'system') return\n\n return watchSystemTheme(() => {\n setMode('system')\n })\n }, [mode])\n\n /**\n * Apply theme BEFORE paint (client) and then unlock rendering.\n */\n useIsomorphicLayoutEffect(() => {\n if (typeof window === 'undefined') return\n\n applyThemeClass(resolvedName === 'dark' ? 'dark' : 'light')\n applyCssVars(themeToCssVars(theme))\n\n // unlock after first successful application\n setReady(true)\n }, [resolvedName, theme])\n\n /**\n * Persist mode changes (optional).\n */\n useEffect(() => {\n if (persistence) {\n try {\n persistence.set(mode)\n } catch {}\n return\n }\n\n if (!persist) return\n const ls = getLocalStorageSafe()\n if (!ls) return\n\n try {\n ls.setItem(storageKey, mode)\n } catch {}\n }, [mode, persist, storageKey, persistence])\n\n function setTheme(next: ThemeMode) {\n setMode(next)\n }\n\n function toggleTheme(a: string = 'light', b: string = 'dark') {\n setMode(resolvedName === a ? b : a)\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n const ctxValue = useMemo(\n () => ({\n mode,\n resolvedName,\n theme,\n isLoading: !isReady,\n setTheme,\n toggleTheme\n }),\n [mode, resolvedName, theme, isReady]\n )\n\n return (\n <ThemeContext.Provider value={ctxValue}>\n {isReady ? children : fallback}\n </ThemeContext.Provider>\n )\n}\n\nexport function useTheme(): ThemeContextData {\n const ctx = useContext(ThemeContext)\n if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')\n return ctx\n}\n"],"mappings":"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"}
package/dist/button.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import "./useThemedStyles-3rUXJYgS.js";
2
2
  import "./Typography-BE-vQSfx.js";
3
- import { t as Button } from "./Button-CsXcjd9w.js";
3
+ import { t as Button } from "./Button-BiSdxI2A.js";
4
4
 
5
5
  export { Button };
@@ -1,3 +1,3 @@
1
1
  import "./types-CDUx-y9q.js";
2
- import { t as Checkbox } from "./index-DH2bD-Yj.js";
2
+ import { t as Checkbox } from "./index-C9iMLJTU.js";
3
3
  export { Checkbox };
package/dist/checkbox.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "./Icon-Cv0qztmq.js";
2
2
  import "./useThemedStyles-3rUXJYgS.js";
3
3
  import "./Typography-BE-vQSfx.js";
4
- import { t as Checkbox } from "./Checkbox-DE2wp1rK.js";
4
+ import { t as Checkbox } from "./Checkbox-6ivVbzcX.js";
5
5
 
6
6
  export { Checkbox };
@@ -1,6 +1,5 @@
1
1
  import { n as TypographyVariant } from "./types-CDUx-y9q.js";
2
2
  import React$1 from "react";
3
- import { ChecklistAlertResponse } from "@api/checklist/alerts/dtos";
4
3
 
5
4
  //#region src/components/toolkit/Checkbox/types.d.ts
6
5
  type CheckboxSize = 'sm' | 'md' | 'lg';
@@ -16,7 +15,6 @@ interface CheckboxProps {
16
15
  radius?: CheckboxRadius;
17
16
  checked?: boolean;
18
17
  disabled?: boolean;
19
- alert?: ChecklistAlertResponse;
20
18
  labelVariant?: LabelVariant;
21
19
  labelPlacement?: LabelPlacement;
22
20
  labelLineThrough?: boolean;
@@ -28,4 +26,4 @@ interface CheckboxProps {
28
26
  declare const Checkbox: React$1.FC<CheckboxProps>;
29
27
  //#endregion
30
28
  export { Checkbox as t };
31
- //# sourceMappingURL=index-DH2bD-Yj.d.ts.map
29
+ //# sourceMappingURL=index-C9iMLJTU.d.ts.map
package/dist/index.d.ts CHANGED
@@ -4,7 +4,7 @@ import { t as IconButton } from "./index-CyvtOmP2.js";
4
4
  import { t as Input } from "./index-pnnP9M22.js";
5
5
  import { t as TextArea } from "./index-BspBF3Mv.js";
6
6
  import { t as CheckItem } from "./index-akSk71wZ.js";
7
- import { t as Checkbox } from "./index-DH2bD-Yj.js";
7
+ import { t as Checkbox } from "./index-C9iMLJTU.js";
8
8
  import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
9
9
  import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.js";
10
10
  import { Typography } from "./typography.js";
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import "./Icon-Cv0qztmq.js";
2
2
  import "./useThemedStyles-3rUXJYgS.js";
3
3
  import { t as Typography } from "./Typography-BE-vQSfx.js";
4
- import { t as Checkbox } from "./Checkbox-DE2wp1rK.js";
5
- import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BE6u_eYD.js";
4
+ import { t as Checkbox } from "./Checkbox-6ivVbzcX.js";
5
+ import { n as useTheme, t as ThemeProvider } from "./ThemeContext-Dro_peJg.js";
6
6
  import { t as TabSwitch } from "./TabSwitch-De30bFX2.js";
7
- import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
7
+ import { t as InfoSummary } from "./InfoSummary-Bsczs0X6.js";
8
8
  import { t as CheckItem } from "./CheckItem-DsIiS-2X.js";
9
- import { t as Button } from "./Button-CsXcjd9w.js";
9
+ import { t as Button } from "./Button-BiSdxI2A.js";
10
10
  import { t as IconButton } from "./IconButton-BBdkzg3b.js";
11
11
  import "./Label-QQpNWSeV.js";
12
12
  import { t as Input } from "./Input-BvbMEjwE.js";
@@ -1,5 +1,5 @@
1
1
  import "./useThemedStyles-3rUXJYgS.js";
2
2
  import "./Typography-BE-vQSfx.js";
3
- import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
3
+ import { t as InfoSummary } from "./InfoSummary-Bsczs0X6.js";
4
4
 
5
5
  export { InfoSummary };
@@ -1,5 +1,5 @@
1
1
  'use client';
2
2
 
3
- import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BE6u_eYD.js";
3
+ import { n as useTheme, t as ThemeProvider } from "./ThemeContext-Dro_peJg.js";
4
4
 
5
5
  export { ThemeProvider, useTheme };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "softable-pixels-web",
3
- "version": "1.1.4",
3
+ "version": "1.1.6",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
@@ -16,6 +16,8 @@
16
16
  ],
17
17
  "scripts": {
18
18
  "test": "echo \"Error: no test specified\" && exit 1",
19
+ "dev": "tsc -p tsconfig.json --watch",
20
+ "build:w": "pnpm build --watch",
19
21
  "build": "npm run generate:icons:node && rm -rf dist && tsdown",
20
22
  "generate:icons": "chmod +x ./scripts/generate-icons.sh && ./scripts/generate-icons.sh",
21
23
  "generate:icons:node": "node ./scripts/generate-icons.mjs"
@@ -79,6 +81,7 @@
79
81
  "devDependencies": {
80
82
  "@biomejs/biome": "2.0.6",
81
83
  "@svgr/cli": "^8.1.0",
84
+ "radix-ui": "^1.4.3",
82
85
  "@svgr/webpack": "^8.1.0",
83
86
  "@types/node": "^18.18.3",
84
87
  "@types/react": "^19.2.7",
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox-DE2wp1rK.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n const { disabled } = props\n\n return styled({\n container: {\n userSelect: 'none',\n opacity: disabled ? 0.6 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n transition: 'all 200ms',\n\n __rules: {\n ':hover': { color: 'var(--px-color-secondary)' }\n }\n }\n })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n const { idFor, label, labelVariant } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createLabelStyles, {\n pick: p => [p.disabled, p.labelVariant, p.label],\n applyCommonProps: true\n })\n\n return (\n <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n <Typography variant={labelVariant ?? 'b1'} fontWeight=\"normal\">\n {label}\n </Typography>\n </LabelRadix.Root>\n )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n return {\n id: useId()\n }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n size: {\n sm: { width: '1rem', height: '1rem' },\n md: { width: '1.25rem', height: '1.25rem' },\n lg: { width: '1.5rem', height: '1.5rem' }\n },\n radius: {\n none: { borderRadius: 0 },\n sm: { borderRadius: '0.25rem' },\n md: { borderRadius: '0.375rem' },\n lg: { borderRadius: '0.5rem' },\n full: { borderRadius: '100%' }\n }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n const {\n color,\n checked,\n size = 'md',\n radius = 'md',\n disabled = false,\n labelPlacement = 'right'\n } = props\n\n const focusIndicatorOffsetColor = '#fff'\n\n return styled({\n container: {\n display: 'flex',\n columnGap: '0.5rem',\n alignItems: 'center',\n '--px-ring-color': color ?? undefined,\n flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n },\n\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n backgroundColor: checked ? color : 'white',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n transition: 'color 200ms',\n opacity: disabled ? 0.5 : 1,\n cursor: disabled ? 'not-allowed' : 'pointer',\n\n ...CHECKBOX_STYLES.size[size],\n ...CHECKBOX_STYLES.radius[radius],\n\n __rules: {\n '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n '&:focus-visible': {\n outline: 'none',\n boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n }\n }\n },\n\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--px-text-primary, #4b5563)'\n }\n })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n backgroundColor: string\n): 'black' | 'white' {\n let hex = backgroundColor.replace('#', '')\n\n if (hex.length === 3) {\n hex = hex\n .split('')\n .map(c => c + c)\n .join('')\n }\n\n if (hex.length === 8) {\n hex = hex.substring(0, 6)\n }\n\n if (hex.length !== 6) return 'black'\n\n const r = parseInt(hex.substring(0, 2), 16)\n const g = parseInt(hex.substring(2, 4), 16)\n const b = parseInt(hex.substring(4, 6), 16)\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n const {\n icon,\n label,\n color,\n labelVariant,\n checked = false,\n disabled = false,\n onChange\n } = props\n\n const iconColor = color ? getContrastingTextColor(color) : undefined\n\n // Hooks\n const { id } = useCheckbox()\n\n const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n return (\n <div style={styles.container}>\n <CheckboxRadix.Root\n style={styles.root}\n className={classes.root}\n id={id}\n tabIndex={0}\n checked={checked}\n disabled={disabled}\n onCheckedChange={checked => onChange(checked === true)}\n >\n <CheckboxRadix.Indicator style={styles.indicator}>\n {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n </CheckboxRadix.Indicator>\n </CheckboxRadix.Root>\n\n {label ? (\n <Label\n idFor={id}\n label={label}\n disabled={disabled}\n labelVariant={labelVariant}\n />\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,kBAAkB,OAA6B;CAC7D,MAAM,EAAE,aAAa;AAErB,QAAO,OAAO,EACZ,WAAW;EACT,YAAY;EACZ,SAAS,WAAW,KAAM;EAC1B,QAAQ,WAAW,gBAAgB;EAEnC,YAAY;EAEZ,SAAS,EACP,UAAU,EAAE,OAAO,6BAA6B,EACjD;EACF,EACF,CAAC;;;;;ACJJ,MAAaA,WAA8B,UAAS;CAClD,MAAM,EAAE,OAAO,OAAO,iBAAiB;CAGvC,MAAM,EAAE,WAAW,gBAAgB,OAAO,mBAAmB;EAC3D,OAAM,MAAK;GAAC,EAAE;GAAU,EAAE;GAAc,EAAE;GAAM;EAChD,kBAAkB;EACnB,CAAC;AAEF,QACE,oBAACC,MAAW;EAAK,SAAS;EAAO,OAAO,OAAO;YAC7C,oBAAC;GAAW,SAAS,gBAAgB;GAAM,YAAW;aACnD;IACU;GACG;;;;;AC1BtB,SAAgB,cAAc;AAC5B,QAAO,EACL,IAAI,OAAO,EACZ;;;;;ACFH,MAAaC,kBAA4C;CACvD,MAAM;EACJ,IAAI;GAAE,OAAO;GAAQ,QAAQ;GAAQ;EACrC,IAAI;GAAE,OAAO;GAAW,QAAQ;GAAW;EAC3C,IAAI;GAAE,OAAO;GAAU,QAAQ;GAAU;EAC1C;CACD,QAAQ;EACN,MAAM,EAAE,cAAc,GAAG;EACzB,IAAI,EAAE,cAAc,WAAW;EAC/B,IAAI,EAAE,cAAc,YAAY;EAChC,IAAI,EAAE,cAAc,UAAU;EAC9B,MAAM,EAAE,cAAc,QAAQ;EAC/B;CACF;AAED,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EACJ,OACA,SACA,OAAO,MACP,SAAS,MACT,WAAW,OACX,iBAAiB,YACf;CAEJ,MAAM,4BAA4B;AAElC,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,WAAW;GACX,YAAY;GACZ,mBAAmB,SAAS;GAC5B,eAAe,mBAAmB,UAAU,QAAQ;GACrD;EAED,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UAAU,QAAQ;GACnC,aAAa;GACb,aAAa;GACb,aAAa,UAAU,QAAQ;GAE/B,YAAY;GACZ,SAAS,WAAW,KAAM;GAC1B,QAAQ,WAAW,gBAAgB;GAEnC,GAAG,gBAAgB,KAAK;GACxB,GAAG,gBAAgB,OAAO;GAE1B,SAAS;IACP,WAAW,EAAE,aAAa,uCAAuC;IACjE,mBAAmB;KACjB,SAAS;KACT,WAAW,aAAa,0BAA0B;KACnD;IACF;GACF;EAED,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACR;EACF,CAAC;;;;;;;;;ACpEJ,SAAgB,wBACd,iBACmB;CACnB,IAAI,MAAM,gBAAgB,QAAQ,KAAK,GAAG;AAE1C,KAAI,IAAI,WAAW,EACjB,OAAM,IACH,MAAM,GAAG,CACT,KAAI,MAAK,IAAI,EAAE,CACf,KAAK,GAAG;AAGb,KAAI,IAAI,WAAW,EACjB,OAAM,IAAI,UAAU,GAAG,EAAE;AAG3B,KAAI,IAAI,WAAW,EAAG,QAAO;CAE7B,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;AAI3C,SAFmB,OAAQ,IAAI,OAAQ,IAAI,OAAQ,KAAK,MAErC,KAAM,UAAU;;;;;ACTrC,MAAaC,cAAoC,UAAS;CACxD,MAAM,EACJ,MACA,OACA,OACA,cACA,UAAU,OACV,WAAW,OACX,aACE;CAEJ,MAAM,YAAY,QAAQ,wBAAwB,MAAM,GAAG;CAG3D,MAAM,EAAE,OAAO,aAAa;CAE5B,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,qBAAqB;AAExE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAACC,SAAc;GACb,OAAO,OAAO;GACd,WAAW,QAAQ;GACf;GACJ,UAAU;GACD;GACC;GACV,kBAAiB,cAAW,SAASC,cAAY,KAAK;aAEtD,oBAACD,SAAc;IAAU,OAAO,OAAO;cACpC,QAAQ,oBAAC;KAAK,MAAK;KAAgB,MAAK;KAAK,OAAO;MAAa;KAC1C;IACP,EAEpB,QACC,oBAACE;GACC,OAAO;GACA;GACG;GACI;IACd,GACA;GACA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemeContext-BE6u_eYD.js","names":["result: any","out: any","defaultThemes: ThemeRegistry","ThemeProvider: React.FC<ThemeProviderProps>"],"sources":["../src/utils/functions/deepMerge.ts","../src/contexts/ThemeContext/constants.ts","../src/contexts/ThemeContext/utils/general.ts","../src/contexts/ThemeContext/utils/themeToCSSVars.ts","../src/contexts/ThemeContext/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport type DeepPartial<T> = {\n [P in keyof T]?: T[P] extends Array<infer U>\n ? Array<DeepPartial<U>>\n : T[P] extends object\n ? DeepPartial<T[P]>\n : T[P]\n}\n\nexport function deepMerge<T>(base: T, override?: DeepPartial<T>): T {\n if (override === undefined) return clone(base)\n\n if (!isPlainObject(base) || !isPlainObject(override)) {\n return clone(override as T)\n }\n\n const result: any = Array.isArray(base) ? [] : {}\n\n const baseKeys = Object.keys(base as any) as (keyof T)[]\n const overrideKeys = Object.keys(override as any) as (keyof T)[]\n\n const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]))\n\n for (const k of allKeys) {\n const baseVal = (base as any)[k]\n const overrideVal = (override as any)[k]\n\n if (overrideVal === undefined) {\n result[k] = clone(baseVal)\n continue\n }\n\n if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {\n result[k] = deepMerge(baseVal, overrideVal)\n continue\n }\n\n result[k] = clone(overrideVal)\n }\n\n return result as T\n}\n\nfunction isPlainObject(x: any): x is Record<string, any> {\n return !!x && typeof x === 'object' && !Array.isArray(x)\n}\n\nfunction clone<T>(v: T): T {\n if (v === undefined || v === null) return v\n if (Array.isArray(v)) return v.map(item => clone(item)) as unknown as T\n if (isPlainObject(v)) {\n const out: any = {}\n for (const k of Object.keys(v)) out[k] = clone((v as any)[k])\n return out\n }\n return v\n}\n","// theme/defaultThemes.ts\nimport type { ThemeRegistry } from './types'\n\nconst COMMON_MAP = {\n spacing: {\n xs: '0.25rem', // 4px\n sm: '0.5rem', // 8px\n md: '1rem', // 16px\n lg: '1.5rem', // 24px\n xl: '2rem', // 32px\n '2xl': '3rem' // 48px\n },\n borderRadius: {\n none: '0rem', // 0px\n sm: '0.25rem', // 4px\n md: '0.375rem', // 6px\n lg: '0.5rem', // 8px\n full: '9999rem' // \"infinite\" radius equivalent\n },\n fontSize: {\n xs: '0.75rem', // 12px\n sm: '0.875rem', // 14px\n md: '1rem', // 16px\n lg: '1.125rem', // 18px\n xl: '1.25rem', // 20px\n '2xl': '1.5rem' // 24px\n },\n fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 }\n} as const\n\nexport const defaultThemes: ThemeRegistry = {\n light: {\n colors: {\n scrollbar: '#0000001a',\n disabled: '#D5D7DA',\n\n primary: '#0EB24C',\n secondary: '#6C6C6C',\n success: '#0EB24C',\n warning: '#f59e0b',\n error: '#ef4444',\n invalid: '#f87171',\n info: '#06b6d4',\n\n background: {\n primary: '#FFFFFF',\n card: {\n primary: '#F4F4F4',\n secondary: '#F3F6F9'\n }\n },\n button: {\n filled: {\n label: '#FFFFFF',\n background: '#0EB24C'\n },\n\n outlined: {\n label: '#222222',\n borderColor: '#DDDDDD'\n },\n\n ghost: {\n label: '#6C6C6C'\n }\n },\n\n surface: '#FBFBFB',\n border: {\n primary: '#E8E8E9',\n secondary: '#E8E8E9'\n },\n\n text: {\n primary: '#222222',\n secondary: '#6C6C6C',\n disabled: '#A0A0A0',\n inverse: '#FFFFFF'\n }\n },\n\n ...COMMON_MAP,\n\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.10)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.10)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.10)'\n }\n },\n\n dark: {\n colors: {\n scrollbar: '#858585',\n disabled: '#D5D7DA',\n\n primary: '#0EB24C', // brand se mantém (ou pode clarear depois)\n secondary: '#C7CFD8',\n success: '#0EB24C',\n warning: '#f59e0b',\n error: '#ef4444',\n invalid: '#f87171',\n info: '#06b6d4',\n\n background: {\n primary: '#090909',\n card: {\n primary: '#F4F4F4',\n secondary: '#202020'\n }\n },\n button: {\n filled: {\n label: '#FFFFFF',\n background: '#0EB24C'\n },\n\n outlined: {\n label: '#ECECEC',\n borderColor: '#DDDDDD'\n },\n\n ghost: {\n label: '#6C6C6C'\n }\n },\n\n surface: '#090909',\n\n border: {\n primary: '#27282D',\n secondary: '#27282D'\n },\n\n text: {\n primary: '#ECECEC',\n secondary: '#C7CFD8',\n disabled: '#8B93A0',\n inverse: '#090909'\n }\n },\n\n ...COMMON_MAP,\n\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.35)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.45)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.50)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.55)'\n }\n }\n}\n","// Utils\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport { deepMerge } from '@utils/functions'\nimport { defaultThemes } from '../constants'\n\n// Types\nimport type { ThemeMode, ThemeRegistry, ThemeTokens } from '../types'\n\n/**\n * Theme Utilities\n * ===============\n * Small DOM utilities used by the ThemeProvider to:\n * - toggle dark mode class for Tailwind compatibility\n * - inject CSS variables (`--px-*`) into the document root\n * - read/watch the OS/browser theme preference (`prefers-color-scheme`)\n *\n * These helpers are:\n * - **client-safe** (guarded for SSR)\n * - **framework-agnostic** (only touch `documentElement`)\n * - **tiny** (no dependencies)\n */\n\n/**\n * CSSVarMap\n * ---------\n * A map of CSS custom properties to be applied on the document root.\n *\n * Notes:\n * - Keys must be valid CSS variable names (e.g. `\"--px-bg\"`, `\"--px-text-primary\"`).\n * - Values can be strings or numbers.\n * - If you store numbers (e.g. 16), you decide at consumption time whether it means px.\n *\n * You can keep it generic:\n * Record<`--${string}`, string | number>\n *\n * Or restrict to your library prefix:\n * Record<`--px-${string}`, string | number>\n */\nexport type CSSVarMap = Partial<Record<`--${string}`, string | number>>\n\n/**\n * applyThemeClass(themeName)\n * -------------------------\n * Applies the light/dark mode class to the `<html>` element.\n *\n * Tailwind’s dark mode (in the common \"class\" strategy) typically relies on a\n * `.dark` class. This function toggles ONLY the `dark` class:\n *\n * - themeName `\"dark\"` => adds `.dark`\n * - themeName `\"light\"` => removes `.dark`\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyThemeClass(themeName: 'light' | 'dark') {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n root.classList.toggle('dark', themeName === 'dark')\n}\n\n/**\n * applyCssVars(vars)\n * ------------------\n * Injects CSS variables into the document root (`<html>`).\n *\n * This is how the library exposes theme tokens as CSS variables.\n * Components can then use `var(--px-...)` in styles.\n *\n * Example:\n * ```ts\n * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })\n * ```\n *\n * Behavior:\n * - Ignores `null` / `undefined` values.\n * - Converts all values to string before applying.\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyCssVars(vars: CSSVarMap) {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n\n for (const [key, value] of Object.entries(vars)) {\n if (value == null) continue\n root.style.setProperty(key, String(value))\n }\n}\n\n/**\n * getSystemThemeName()\n * --------------------\n * Returns the current OS/browser color scheme preference.\n *\n * It reads `prefers-color-scheme: dark` using `window.matchMedia`.\n *\n * Returns:\n * - `\"dark\"` if the user prefers dark mode\n * - `\"light\"` otherwise\n *\n * SSR:\n * - Returns `\"light\"` on the server (safe default).\n */\nexport function getSystemThemeName(): 'light' | 'dark' {\n if (typeof window === 'undefined') return 'light'\n const prefersDark =\n window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false\n return prefersDark ? 'dark' : 'light'\n}\n\n/**\n * watchSystemTheme(onChange)\n * --------------------------\n * Subscribes to changes in OS/browser theme preference.\n *\n * Use this when your selected mode is `\"system\"` so the app immediately reacts\n * when the user changes their OS theme.\n *\n * - Calls `onChange('light' | 'dark')` whenever the preference changes.\n * - Returns an `unsubscribe()` function.\n *\n * Implementation details:\n * - Uses `matchMedia('(prefers-color-scheme: dark)')`.\n * - Supports both modern `addEventListener('change', ...)` and legacy Safari\n * `addListener(...)` APIs.\n *\n * SSR:\n * - Returns a no-op unsubscribe function on the server.\n */\nexport function watchSystemTheme(onChange: (name: 'light' | 'dark') => void) {\n if (typeof window === 'undefined') return () => {}\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)')\n\n const handler = () => onChange(mq.matches ? 'dark' : 'light')\n\n // Optional: sync immediately on subscribe\n handler()\n\n // Modern browsers\n if (mq.addEventListener) {\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }\n\n // Legacy Safari\n mq.addListener(handler as any)\n return () => mq.removeListener(handler as any)\n}\n\n/**\n * Resolves an effective theme name from a mode.\n */\nexport function resolveName(mode: ThemeMode): string {\n if (mode !== 'system') return mode\n return getSystemThemeName()\n}\n\n/**\n * Builds a registry of user theme patches.\n */\nexport function buildRegistry(\n userThemes?: Partial<ThemeRegistry>\n): ThemeRegistry {\n return {\n light: {},\n dark: {},\n ...(userThemes ?? {})\n } as ThemeRegistry\n}\n\n/**\n * Builds the final resolved theme tokens.\n */\nexport function buildTheme(\n registry: ThemeRegistry,\n resolvedName: string,\n override?: Partial<ThemeTokens>\n): ThemeTokens {\n const base: ThemeTokens =\n resolvedName === 'dark'\n ? (defaultThemes.dark as ThemeTokens)\n : (defaultThemes.light as ThemeTokens)\n\n const selectedPatch = (registry[resolvedName] ?? registry.light) as any\n\n const merged = deepMerge(base, selectedPatch)\n return deepMerge(merged, override)\n}\n\nexport function isThemeMode(value: unknown): value is ThemeMode {\n return typeof value === 'string' && value.length > 0\n}\n\nexport function getLocalStorageSafe(): Storage | null {\n if (typeof window === 'undefined') return null\n try {\n return window.localStorage\n } catch {\n return null\n }\n}\n","// Types\nimport type { CSSVarMap } from './general'\nimport type { ThemeTokens } from '../types'\n\n/**\n * themeToCssVars(theme)\n * ---------------------\n * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).\n *\n * The ThemeProvider uses this function to inject `--px-*` variables into the\n * document root (`<html>`). Components can then rely on stable CSS variables,\n * making them framework-agnostic and compatible with Tailwind (via `.dark`).\n *\n * Why CSS variables?\n * - They are fast (native to the browser)\n * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)\n * - They enable dynamic theme switching without rerendering every component\n *\n * Requirements / Assumptions:\n * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).\n * The ThemeProvider is responsible for merging partial theme patches on top\n * of a complete base theme (light/dark defaults).\n *\n * Variable naming:\n * - All variables are prefixed with `--px-` to avoid collisions.\n * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).\n *\n * Notes:\n * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid\n * for CSS variables. When consuming them, you can:\n * - append `px` in JS (`${var}px`), or\n * - store them as strings here (e.g. `\"16px\"`) if you prefer.\n *\n * Example usage (component styles):\n * ```ts\n * const styles = {\n * background: 'var(--px-bg)',\n * color: 'var(--px-text-primary)',\n * borderColor: 'var(--px-border-primary)',\n * }\n * ```\n *\n * Example usage (Tailwind config / CSS):\n * ```css\n * .card {\n * background: var(--px-surface);\n * color: var(--px-text-primary);\n * border: 1px solid var(--px-border-primary);\n * }\n * ```\n */\nexport function themeToCssVars(theme: ThemeTokens): CSSVarMap {\n return {\n /**\n * Brand & intent colors\n */\n '--px-color-primary': theme.colors.primary,\n '--px-color-secondary': theme.colors.secondary,\n '--px-color-success': theme.colors.success,\n '--px-color-warning': theme.colors.warning,\n '--px-color-error': theme.colors.error,\n '--px-color-invalid': theme.colors.invalid,\n '--px-color-info': theme.colors.info,\n '--px-color-disabled': theme.colors.disabled,\n\n /**\n * Scrollbar\n */\n '--px-scrollbar': theme.colors.scrollbar,\n\n /**\n * Surfaces / backgrounds\n */\n '--px-bg': theme.colors.background.primary,\n '--px-surface': theme.colors.surface,\n '--px-background-card-primary': theme.colors.background.card.primary,\n '--px-background-card-secondary': theme.colors.background.card.secondary,\n\n /**\n * Borders\n * -------\n * Divider and outline colors.\n */\n '--px-border-primary': theme.colors.border.primary,\n '--px-border-secondary': theme.colors.border.secondary,\n\n /**\n * Text\n * ----\n * Text colors for different emphasis levels.\n */\n '--px-text-primary': theme.colors.text.primary,\n '--px-text-secondary': theme.colors.text.secondary,\n '--px-text-disabled': theme.colors.text.disabled,\n '--px-text-inverse': theme.colors.text.inverse,\n\n /**\n * Buttons – Filled\n * ----------------\n * Filled button colors\n */\n '--px-btn-filled-bg': theme.colors.button.filled.background,\n '--px-btn-filled-label': theme.colors.button.filled.label,\n\n /**\n * Buttons – Outlined\n * ------------------\n * Outlined button colors\n */\n '--px-btn-outlined-border': theme.colors.button.outlined.borderColor,\n '--px-btn-outlined-label': theme.colors.button.outlined.label,\n\n /**\n * Buttons – Ghost\n * --------------\n * Ghost button colors\n */\n '--px-btn-ghost-label': theme.colors.button.ghost.label,\n /**\n * Spacing\n * -------------\n * Numeric spacing tokens (commonly used as px).\n */\n '--px-space-xs': theme.spacing.xs,\n '--px-space-sm': theme.spacing.sm,\n '--px-space-md': theme.spacing.md,\n '--px-space-lg': theme.spacing.lg,\n '--px-space-xl': theme.spacing.xl,\n '--px-space-2xl': theme.spacing['2xl'],\n\n /**\n * Border radius scale\n * -------------------\n * Numeric radius tokens (commonly used as px).\n */\n '--px-radius-none': theme.borderRadius.none,\n '--px-radius-sm': theme.borderRadius.sm,\n '--px-radius-md': theme.borderRadius.md,\n '--px-radius-lg': theme.borderRadius.lg,\n '--px-radius-full': theme.borderRadius.full,\n\n /**\n * Typography scale\n * ----------------\n * Font sizes and font weights.\n */\n '--px-fs-xs': theme.fontSize.xs,\n '--px-fs-sm': theme.fontSize.sm,\n '--px-fs-md': theme.fontSize.md,\n '--px-fs-lg': theme.fontSize.lg,\n '--px-fs-xl': theme.fontSize.xl,\n '--px-fs-2xl': theme.fontSize['2xl'],\n\n '--px-fw-normal': theme.fontWeight.normal,\n '--px-fw-medium': theme.fontWeight.medium,\n '--px-fw-semibold': theme.fontWeight.semibold,\n '--px-fw-bold': theme.fontWeight.bold,\n\n /**\n * Shadows\n * -------\n * CSS shadow strings for elevation.\n */\n '--px-shadow-sm': theme.shadows.sm,\n '--px-shadow-md': theme.shadows.md,\n '--px-shadow-lg': theme.shadows.lg,\n '--px-shadow-xl': theme.shadows.xl\n }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n'use client'\n\n// External Libraries\nimport {\n useMemo,\n useState,\n useEffect,\n useContext,\n createContext,\n useLayoutEffect\n} from 'react'\n\n// Utils\nimport {\n buildTheme,\n isThemeMode,\n resolveName,\n applyCssVars,\n buildRegistry,\n themeToCssVars,\n applyThemeClass,\n watchSystemTheme,\n getLocalStorageSafe\n} from './utils'\n\n// Types\nimport type { ThemeMode, ThemeContextData, ThemeProviderProps } from './types'\n\nexport * from './types'\n\nconst ThemeContext = createContext<ThemeContextData | null>(null)\n\n/**\n * useIsomorphicLayoutEffect\n * - On client: runs before paint (layout effect)\n * - On server: falls back to useEffect (no warnings)\n */\nconst useIsomorphicLayoutEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n themes,\n children,\n override,\n persistence,\n persist = false,\n defaultMode = 'system',\n storageKey = 'px-theme',\n fallback = null\n}) => {\n const registry = useMemo(() => buildRegistry(themes), [themes])\n\n function makeInitialMode(): ThemeMode {\n // 1) advanced adapter\n if (persistence) {\n try {\n const saved = persistence.get()\n return (saved ?? defaultMode) as ThemeMode\n } catch {\n return defaultMode\n }\n }\n\n // 2) quick localStorage mode\n if (persist) {\n const ls = getLocalStorageSafe()\n if (!ls) return defaultMode\n const raw = ls.getItem(storageKey)\n return isThemeMode(raw) ? raw : defaultMode\n }\n\n // 3) fallback\n return defaultMode\n }\n\n const [mode, setMode] = useState<ThemeMode>(makeInitialMode)\n\n /**\n * Gate: only render children after we applied class + vars at least once.\n * This prevents \"unstyled flash\" for your components.\n */\n const [isReady, setReady] = useState(false)\n\n const resolvedName = useMemo(() => {\n if (typeof window === 'undefined') return mode === 'system' ? 'light' : mode\n return resolveName(mode)\n }, [mode])\n\n const theme = useMemo(\n () => buildTheme(registry, resolvedName, override),\n [registry, resolvedName, override]\n )\n\n // keep in sync with OS when mode === \"system\"\n useEffect(() => {\n if (typeof window === 'undefined') return\n if (mode !== 'system') return\n\n return watchSystemTheme(() => {\n setMode('system')\n })\n }, [mode])\n\n /**\n * Apply theme BEFORE paint (client) and then unlock rendering.\n */\n useIsomorphicLayoutEffect(() => {\n if (typeof window === 'undefined') return\n\n applyThemeClass(resolvedName === 'dark' ? 'dark' : 'light')\n applyCssVars(themeToCssVars(theme))\n\n // unlock after first successful application\n setReady(true)\n }, [resolvedName, theme])\n\n /**\n * Persist mode changes (optional).\n */\n useEffect(() => {\n if (persistence) {\n try {\n persistence.set(mode)\n } catch {}\n return\n }\n\n if (!persist) return\n const ls = getLocalStorageSafe()\n if (!ls) return\n\n try {\n ls.setItem(storageKey, mode)\n } catch {}\n }, [mode, persist, storageKey, persistence])\n\n function setTheme(next: ThemeMode) {\n setMode(next)\n }\n\n function toggleTheme(a: string = 'light', b: string = 'dark') {\n setMode(resolvedName === a ? b : a)\n }\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n const ctxValue = useMemo(\n () => ({\n mode,\n resolvedName,\n theme,\n isLoading: !isReady,\n setTheme,\n toggleTheme\n }),\n [mode, resolvedName, theme, isReady]\n )\n\n return (\n <ThemeContext.Provider value={ctxValue}>\n {isReady ? children : fallback}\n </ThemeContext.Provider>\n )\n}\n\nexport function useTheme(): ThemeContextData {\n const ctx = useContext(ThemeContext)\n if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')\n return ctx\n}\n"],"mappings":"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"}