softable-pixels-web 1.2.1 → 1.2.3

package/dist/{Button-Vm1Odbi_.js → Button-BgsYjAC1.js}

@@ -138,6 +138,7 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
 	}
 	return /* @__PURE__ */ jsx("button", {
 		type,
+		form: rest.form,
 		disabled,
 		"aria-busy": rest.loading,
 		style: styles.container,
@@ -162,4 +163,4 @@ const Button = ({ type = "button", variant = "filled", ...rest }) => {
 
 //#endregion
 export { Button as t };
-//# sourceMappingURL=Button-Vm1Odbi_.js.map
+//# sourceMappingURL=Button-BgsYjAC1.js.map

package/dist/{Button-Vm1Odbi_.js.map → Button-BgsYjAC1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Button-Vm1Odbi_.js","names":["ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../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":["// 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      backgroundColor: 'inherit'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/commons/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'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps) {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      minHeight: getSize(size ?? 'md'),\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '0.625rem var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-lg)',\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n      boxShadow: variant === 'outlined' ? 'var(--px-shadow-xs)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !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      backgroundColor: 'inherit'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): string {\n  switch (size) {\n    case 'lg':\n      return '3.25rem'\n    case 'md':\n      return '2.75rem'\n    case 'sm':\n      return '2.25rem'\n    case 'xs':\n      return '1.75rem'\n    default:\n      return 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): string {\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 { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\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.variant, 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\n          color={textColor}\n          fontSize={resolvedProps.fontSize}\n          variant={rest.labelVariant || 'b1'}\n        >\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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"}
+{"version":3,"file":"Button-BgsYjAC1.js","names":["ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../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":["// 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      backgroundColor: 'inherit'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/commons/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'\n\nexport function createButtonStyles({\n  size,\n  color,\n  variant,\n  fullWidth,\n  textAlign,\n  outlineColor\n}: ButtonProps) {\n  const finalVariant = variant ?? 'filled'\n\n  return styled({\n    container: {\n      minHeight: getSize(size ?? 'md'),\n      width: fullWidth ? '100%' : 'fit-content',\n\n      position: 'relative',\n      display: 'flex',\n      justifyContent: textAlign || 'center',\n\n      padding: '0.625rem var(--px-space-xl)',\n      gap: 'var(--px-space-sm)',\n\n      borderRadius: 'var(--px-radius-lg)',\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n\n      transition: 'background-color 0.5s',\n\n      border: getBorder(finalVariant, outlineColor || color),\n      backgroundColor: getBackgroundColor(finalVariant, color),\n      boxShadow: variant === 'outlined' ? 'var(--px-shadow-xs)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !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      backgroundColor: 'inherit'\n    }\n  })\n}\n\nfunction getSize(size: ButtonSize | string): string {\n  switch (size) {\n    case 'lg':\n      return '3.25rem'\n    case 'md':\n      return '2.75rem'\n    case 'sm':\n      return '2.25rem'\n    case 'xs':\n      return '1.75rem'\n    default:\n      return 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): string {\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 { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\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.variant, 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      form={rest.form}\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\n          color={textColor}\n          fontSize={resolvedProps.fontSize}\n          variant={rest.labelVariant || 'b1'}\n        >\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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"}

package/dist/ColorPicker-BVmUDE-h.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker-BVmUDE-h.js","names":["ColorButton: React.FC<ColorButtonProps>","ColorsLoader: React.FC<Props>","ColorPicker: React.FC<ColorPickerProps>"],"sources":["../src/components/commons/inputs/ColorPicker/components/ColorButton/styles.ts","../src/components/commons/inputs/ColorPicker/components/ColorButton/index.tsx","../src/components/commons/inputs/ColorPicker/components/ColorsLoader/index.tsx","../src/components/commons/inputs/ColorPicker/styles.ts","../src/components/commons/inputs/ColorPicker/types.ts","../src/components/commons/inputs/ColorPicker/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  size?: string\n  color: string\n  isSelected: boolean\n  borderRadius?: string\n}\n\nexport const DEFAULT_BUTTON_SIZE = '2.25rem'\n\nexport function createColorButtonStyles(props: Params) {\n  const resolvedSize = props.size || DEFAULT_BUTTON_SIZE\n\n  return styled({\n    container: {\n      width: resolvedSize,\n      height: resolvedSize,\n\n      cursor: 'pointer',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderRadius: props.borderRadius || resolvedSize,\n\n      backgroundColor: props.color,\n      borderColor: 'var(--px-border-primary)',\n\n      outlineOffset: '2px',\n      outline: props.isSelected ? '2px solid var(--px-color-primary)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorButtonProps } from './types'\n\n// Styles\nimport { createColorButtonStyles } from './styles'\n\nexport const ColorButton: React.FC<ColorButtonProps> = ({\n  color,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    { ...rest, color },\n    createColorButtonStyles\n  )\n\n  // Functions\n  function handleClick() {\n    if (disabled) return\n    onClick(color)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleClick}\n    />\n  )\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Skeleton } from '@components/commons/structure/Skeleton'\n\n// Constants\nimport { DEFAULT_BUTTON_SIZE } from '../ColorButton/styles'\n\ninterface Props {\n  size?: string\n  borderRadius?: string\n}\n\nexport const ColorsLoader: React.FC<Props> = ({ size, borderRadius }) => {\n  // Constants\n  const resolvedSize = size || DEFAULT_BUTTON_SIZE\n  const resolvedRadius = borderRadius || DEFAULT_BUTTON_SIZE\n\n  // Functions\n  function renderContent() {\n    return Array.from({ length: 5 }).map((_, idx) => (\n      <Skeleton\n        key={idx.toString()}\n        width={resolvedSize}\n        height={resolvedSize}\n        borderRadius={resolvedRadius}\n      />\n    ))\n  }\n\n  return <>{renderContent()}</>\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { ColorPickerProps } from './types'\nimport { DEFAULT_BUTTON_SIZE } from './components/ColorButton/styles'\n\nexport function createColorPickerStyles(props: ColorPickerProps) {\n  const isCustomColor = !props.options.includes(props.value)\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    content: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      flexWrap: 'wrap',\n\n      gap: '0.625rem'\n    },\n    inputWrapper: {\n      width: props.size || DEFAULT_BUTTON_SIZE,\n      height: props.size || DEFAULT_BUTTON_SIZE,\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderColor: 'var(--px-border-primary)',\n      borderRadius: props.borderRadius || DEFAULT_BUTTON_SIZE,\n\n      outlineOffset: '2px',\n      outline:\n        isCustomColor && props.value\n          ? `2px solid var(--px-color-primary)`\n          : 'none',\n\n      background:\n        isCustomColor && props.value\n          ? props.value\n          : 'linear-gradient(90deg, #ff6b6b 0%, #ffd93d 16.66%, #6bff95 33.33%, #6be7ff 50%, #6b83ff 66.66%, #d36bff 83.33%, #ff6bb5 100%)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '2px',\n          outline: `2px solid var(--px-color-primary) !important`\n        }\n      }\n    },\n\n    nativeInput: {\n      width: '100%',\n      height: '100%',\n\n      position: 'absolute',\n      inset: 0,\n\n      opacity: 0,\n      border: 'none',\n      cursor: 'pointer'\n    }\n  })\n}\n","import type {\n  StylesOf,\n  TextProps,\n  LayoutProps,\n  MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createColorPickerStyles } from './styles'\n\nexport interface ColorPickerProps extends LayoutProps, MarginProps {\n  id?: string\n\n  label: string\n  value: ColorOption\n  options: ColorOption[]\n\n  size?: string\n  required?: boolean\n  disabled?: boolean\n  hideLabel?: boolean\n  errorMessage?: string\n  canPickCustom?: boolean\n  isLoading?: boolean\n\n  borderRadius?: string\n  requiredColor?: string\n  labelConfig?: TextProps\n  styles?: StylesOf<typeof createColorPickerStyles>\n\n  onChange: (value: string) => void\n}\n\nexport type ColorOption = `#${string}`\n","// External Libraries\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { ColorButton } from './components/ColorButton'\nimport { ColorsLoader } from './components/ColorsLoader'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorPickerProps } from './types'\n\n// Styles\nimport { createColorPickerStyles } from './styles'\n\nexport * as ColorPickerTypes from './types'\n\nexport const ColorPicker: React.FC<ColorPickerProps> = props => {\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return props.id || `color-picker-${reactId}`\n  }, [props.id, reactId])\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createColorPickerStyles, {\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n    props.onChange(e.target.value)\n  }\n\n  function renderColors() {\n    if (props.isLoading) {\n      return (\n        <ColorsLoader size={props.size} borderRadius={props.borderRadius} />\n      )\n    }\n\n    return props.options.map(option => (\n      <ColorButton\n        key={option}\n        color={option}\n        size={props.size}\n        disabled={props.disabled}\n        borderRadius={props.borderRadius}\n        isSelected={props.value === option}\n        onClick={props.onChange}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {!props.hideLabel ? (\n        <Label\n          htmlFor={inputId}\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      ) : null}\n\n      <div id={inputId} style={styles.content}>\n        {renderColors()}\n\n        {props.canPickCustom ? (\n          <div style={styles.inputWrapper} className={classes.inputWrapper}>\n            <input\n              type=\"color\"\n              value={props.value}\n              style={styles.nativeInput}\n              aria-label=\"Pick a custom color\"\n              onChange={handleInputChange}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker-BVmUDE-h.js","names":["ColorButton: React.FC<ColorButtonProps>","ColorsLoader: React.FC<Props>","ColorPicker: React.FC<ColorPickerProps>"],"sources":["../src/components/commons/inputs/ColorPicker/components/ColorButton/styles.ts","../src/components/commons/inputs/ColorPicker/components/ColorButton/index.tsx","../src/components/commons/inputs/ColorPicker/components/ColorsLoader/index.tsx","../src/components/commons/inputs/ColorPicker/styles.ts","../src/components/commons/inputs/ColorPicker/types.ts","../src/components/commons/inputs/ColorPicker/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n  size?: string\n  color: string\n  isSelected: boolean\n  borderRadius?: string\n}\n\nexport const DEFAULT_BUTTON_SIZE = '2.25rem'\n\nexport function createColorButtonStyles(props: Params) {\n  const resolvedSize = props.size || DEFAULT_BUTTON_SIZE\n\n  return styled({\n    container: {\n      width: resolvedSize,\n      height: resolvedSize,\n\n      cursor: 'pointer',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderRadius: props.borderRadius || resolvedSize,\n\n      backgroundColor: props.color,\n      borderColor: 'var(--px-border-primary)',\n\n      outlineOffset: '2px',\n      outline: props.isSelected ? '2px solid var(--px-color-primary)' : 'none',\n\n      __rules: {\n        '&:hover': {\n          opacity: '0.85 !important'\n        },\n\n        '&:focus': {\n          outlineOffset: '2px',\n          outline: '2px solid var(--px-color-primary) !important'\n        },\n\n        '&:disabled': {\n          opacity: '0.5 !important',\n          cursor: 'not-allowed !important'\n        }\n      }\n    }\n  })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorButtonProps } from './types'\n\n// Styles\nimport { createColorButtonStyles } from './styles'\n\nexport const ColorButton: React.FC<ColorButtonProps> = ({\n  color,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(\n    { ...rest, color },\n    createColorButtonStyles\n  )\n\n  // Functions\n  function handleClick() {\n    if (disabled) return\n    onClick(color)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      style={styles.container}\n      className={classes.container}\n      onClick={handleClick}\n    />\n  )\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Skeleton } from '@components/commons/structure/Skeleton'\n\n// Constants\nimport { DEFAULT_BUTTON_SIZE } from '../ColorButton/styles'\n\ninterface Props {\n  size?: string\n  borderRadius?: string\n}\n\nexport const ColorsLoader: React.FC<Props> = ({ size, borderRadius }) => {\n  // Constants\n  const resolvedSize = size || DEFAULT_BUTTON_SIZE\n  const resolvedRadius = borderRadius || DEFAULT_BUTTON_SIZE\n\n  // Functions\n  function renderContent() {\n    return Array.from({ length: 5 }).map((_, idx) => (\n      <Skeleton\n        key={idx.toString()}\n        width={resolvedSize}\n        height={resolvedSize}\n        borderRadius={resolvedRadius}\n      />\n    ))\n  }\n\n  return <>{renderContent()}</>\n}\n","// Hooks\nimport { styled } from '@hooks/useThemedStyles/types'\n\n// Types\nimport type { ColorPickerProps } from './types'\nimport { DEFAULT_BUTTON_SIZE } from './components/ColorButton/styles'\n\nexport function createColorPickerStyles(props: ColorPickerProps) {\n  const isCustomColor = !props.options.includes(props.value)\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    content: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      flexWrap: 'wrap',\n\n      gap: '0.625rem'\n    },\n    inputWrapper: {\n      width: props.size || DEFAULT_BUTTON_SIZE,\n      height: props.size || DEFAULT_BUTTON_SIZE,\n\n      cursor: 'pointer',\n      overflow: 'hidden',\n      position: 'relative',\n\n      borderWidth: 1,\n      borderColor: 'var(--px-border-primary)',\n      borderRadius: props.borderRadius || DEFAULT_BUTTON_SIZE,\n\n      outlineOffset: '2px',\n      outline:\n        isCustomColor && props.value\n          ? `2px solid var(--px-color-primary)`\n          : 'none',\n\n      background:\n        isCustomColor && props.value\n          ? props.value\n          : 'linear-gradient(90deg, #ff6b6b 0%, #ffd93d 16.66%, #6bff95 33.33%, #6be7ff 50%, #6b83ff 66.66%, #d36bff 83.33%, #ff6bb5 100%)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '2px',\n          outline: `2px solid var(--px-color-primary) !important`\n        }\n      }\n    },\n\n    nativeInput: {\n      width: '100%',\n      height: '100%',\n\n      position: 'absolute',\n      inset: 0,\n\n      opacity: 0,\n      border: 'none',\n      cursor: 'pointer'\n    }\n  })\n}\n","import type {\n  StylesOf,\n  TextProps,\n  LayoutProps,\n  MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createColorPickerStyles } from './styles'\n\nexport interface ColorPickerProps extends LayoutProps, MarginProps {\n  id?: string\n\n  label: string\n  value: string\n  options: string[]\n\n  size?: string\n  required?: boolean\n  disabled?: boolean\n  hideLabel?: boolean\n  errorMessage?: string\n  canPickCustom?: boolean\n  isLoading?: boolean\n\n  borderRadius?: string\n  requiredColor?: string\n  labelConfig?: TextProps\n  styles?: StylesOf<typeof createColorPickerStyles>\n\n  onChange: (value: string) => void\n}\n","// External Libraries\nimport { useId, useMemo } from 'react'\n\n// Components\nimport { ColorButton } from './components/ColorButton'\nimport { ColorsLoader } from './components/ColorsLoader'\nimport { Label } from '@components/commons/toolkit/Label'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ColorPickerProps } from './types'\n\n// Styles\nimport { createColorPickerStyles } from './styles'\n\nexport * as ColorPickerTypes from './types'\n\nexport const ColorPicker: React.FC<ColorPickerProps> = props => {\n  // Constants\n  const reactId = useId()\n  const inputId = useMemo(() => {\n    return props.id || `color-picker-${reactId}`\n  }, [props.id, reactId])\n\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createColorPickerStyles, {\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Functions\n  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {\n    props.onChange(e.target.value)\n  }\n\n  function renderColors() {\n    if (props.isLoading) {\n      return (\n        <ColorsLoader size={props.size} borderRadius={props.borderRadius} />\n      )\n    }\n\n    return props.options.map(option => (\n      <ColorButton\n        key={option}\n        color={option}\n        size={props.size}\n        disabled={props.disabled}\n        borderRadius={props.borderRadius}\n        isSelected={props.value === option}\n        onClick={props.onChange}\n      />\n    ))\n  }\n\n  return (\n    <div style={styles.container}>\n      {!props.hideLabel ? (\n        <Label\n          htmlFor={inputId}\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      ) : null}\n\n      <div id={inputId} style={styles.content}>\n        {renderColors()}\n\n        {props.canPickCustom ? (\n          <div style={styles.inputWrapper} className={classes.inputWrapper}>\n            <input\n              type=\"color\"\n              value={props.value}\n              style={styles.nativeInput}\n              aria-label=\"Pick a custom color\"\n              onChange={handleInputChange}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      {props.errorMessage ? (\n        <ErrorMessage message={props.errorMessage} />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/button.d.ts

@@ -1,3 +1,3 @@
 import "./types-n-gj1UXJ.js";
-import { t as Button } from "./index-CI9oUkku.js";
+import { t as Button } from "./index-wFIuQoWm.js";
 export { Button };

package/dist/button.js

@@ -1,6 +1,6 @@
 import "./useThemedStyles-CV4ryZLN.js";
 import "./Typography-BTJk47bm.js";
 import "./Loader-DUqRFMzl.js";
-import { t as Button } from "./Button-Vm1Odbi_.js";
+import { t as Button } from "./Button-BgsYjAC1.js";
 
 export { Button };

package/dist/color-picker.d.ts

@@ -1,2 +1,2 @@
-import { n as types_d_exports, t as ColorPicker } from "./index-DOnH4ePY.js";
+import { n as types_d_exports, t as ColorPicker } from "./index-v28FA4ph.js";
 export { ColorPicker, types_d_exports as ColorPickerTypes };

package/dist/context-menu.d.ts

@@ -1,2 +1,2 @@
-import { n as types_d_exports, t as ContextMenu } from "./index-ChkulgEl.js";
+import { n as types_d_exports, t as ContextMenu } from "./index-B_xvhcYY.js";
 export { ContextMenu, types_d_exports as ContextMenuTypes };

package/dist/{index-CL2pdJDi.d.ts → index-B9Ooz6lk.d.ts}

@@ -22,7 +22,7 @@ declare function createInputStyles(props: InputProps): {
     padding: string;
     opacity: number;
     boxShadow: "var(--px-shadow-default)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     __rules: {
       '&:focus-within': {
         outlineOffset: string;
@@ -100,4 +100,4 @@ interface InputMethods {
 declare const Input: react0.ForwardRefExoticComponent<InputProps & react0.RefAttributes<InputMethods>>;
 //#endregion
 export { Input as t };
-//# sourceMappingURL=index-CL2pdJDi.d.ts.map
+//# sourceMappingURL=index-B9Ooz6lk.d.ts.map

package/dist/{index-ChkulgEl.d.ts → index-B_xvhcYY.d.ts}

@@ -1,6 +1,6 @@
 import { n as Placement } from "./types-Cr3L1i9Q.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/ContextMenu/styles.d.ts
 declare function createContextMenuStyles<T>(_props: ContextMenuProps<T>): {
@@ -67,7 +67,7 @@ interface ContextMenuProps<T> {
 }
 //#endregion
 //#region src/components/commons/toolkit/ContextMenu/index.d.ts
-declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime0.JSX.Element;
+declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { types_d_exports as n, ContextMenu as t };
-//# sourceMappingURL=index-ChkulgEl.d.ts.map
+//# sourceMappingURL=index-B_xvhcYY.d.ts.map

package/dist/{index-CI1pmTNs.d.ts → index-BdXsHz33.d.ts}

@@ -1,5 +1,5 @@
 import { a as TextProps } from "./styleProps-CrD6h1FM.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/commons/inputs/TextArea/styles.d.ts
 declare function createTextAreaStyles(props: TextAreaProps): {
@@ -26,7 +26,7 @@ declare function createTextAreaStyles(props: TextAreaProps): {
     fontWeight: "400";
     fontSize: string;
     color: "var(--px-text-primary)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     outlineOffset: string;
     cursor: "default" | undefined;
     __rules: {
@@ -65,7 +65,7 @@ interface TextAreaProps {
 }
 //#endregion
 //#region src/components/commons/inputs/TextArea/index.d.ts
-declare const TextArea: (props: TextAreaProps) => react_jsx_runtime2.JSX.Element;
+declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=index-CI1pmTNs.d.ts.map
+//# sourceMappingURL=index-BdXsHz33.d.ts.map

package/dist/{index-Qqzj3D38.d.ts → index-CNPbAm9i.d.ts}

@@ -25,7 +25,7 @@ declare function createSelectStyles(props: SelectProps): {
     opacity: number;
     cursor: "not-allowed" | "pointer" | "progress";
     boxShadow: "var(--px-shadow-default)";
-    borderColor: "var(--px-border-primary)" | "var(--px-color-error)";
+    borderColor: "var(--px-color-error)" | "var(--px-border-primary)";
     __rules: {
       '&:focus-within': {
         outlineOffset: string;
@@ -84,4 +84,4 @@ interface SelectOption {
 declare const Select: React$1.FC<SelectProps>;
 //#endregion
 export { types_d_exports as n, Select as t };
-//# sourceMappingURL=index-Qqzj3D38.d.ts.map
+//# sourceMappingURL=index-CNPbAm9i.d.ts.map

package/dist/{index-DOnH4ePY.d.ts → index-v28FA4ph.d.ts}

@@ -46,13 +46,13 @@ declare function createColorPickerStyles(props: ColorPickerProps): {
   };
 };
 declare namespace types_d_exports {
-  export { ColorOption, ColorPickerProps };
+  export { ColorPickerProps };
 }
 interface ColorPickerProps extends LayoutProps, MarginProps {
   id?: string;
   label: string;
-  value: ColorOption;
-  options: ColorOption[];
+  value: string;
+  options: string[];
   size?: string;
   required?: boolean;
   disabled?: boolean;
@@ -66,10 +66,9 @@ interface ColorPickerProps extends LayoutProps, MarginProps {
   styles?: StylesOf<typeof createColorPickerStyles>;
   onChange: (value: string) => void;
 }
-type ColorOption = `#${string}`;
 //#endregion
 //#region src/components/commons/inputs/ColorPicker/index.d.ts
 declare const ColorPicker: React.FC<ColorPickerProps>;
 //#endregion
 export { types_d_exports as n, ColorPicker as t };
-//# sourceMappingURL=index-DOnH4ePY.d.ts.map
+//# sourceMappingURL=index-v28FA4ph.d.ts.map

package/dist/{index-CI9oUkku.d.ts → index-wFIuQoWm.d.ts}

@@ -72,6 +72,8 @@ interface ButtonProps extends PaddingProps, LayoutProps {
   styles?: TypeStyles<typeof createButtonStyles>;
   /** Icon displayed after the label */
   endIcon?: ReactNode;
+  /** Form id */
+  form?: string;
   /**
    * @default false
    * @description When true, the button enters a loading state:
@@ -121,4 +123,4 @@ interface ButtonProps extends PaddingProps, LayoutProps {
 declare const Button: React.FC<ButtonProps>;
 //#endregion
 export { Button as t };
-//# sourceMappingURL=index-CI9oUkku.d.ts.map
+//# sourceMappingURL=index-wFIuQoWm.d.ts.map

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import "./types-n-gj1UXJ.js";
-import { t as Button } from "./index-CI9oUkku.js";
+import { t as Button } from "./index-wFIuQoWm.js";
 import { t as IconButton } from "./index-DsQyEI6l.js";
-import { n as types_d_exports$1, t as ColorPicker } from "./index-DOnH4ePY.js";
+import { n as types_d_exports$1, t as ColorPicker } from "./index-v28FA4ph.js";
 import { n as Locale, r as MaskType, t as MaskModule } from "./index-C2rKLkDO.js";
-import { t as Input } from "./index-CL2pdJDi.js";
-import { n as types_d_exports$4, t as Select } from "./index-Qqzj3D38.js";
+import { t as Input } from "./index-B9Ooz6lk.js";
+import { n as types_d_exports$4, t as Select } from "./index-CNPbAm9i.js";
 import { n as types_d_exports$3 } from "./types-B-zFTnqe.js";
-import { t as TextArea } from "./index-CI1pmTNs.js";
+import { t as TextArea } from "./index-BdXsHz33.js";
 import { t as Popover } from "./index-BbvC10jX.js";
 import { t as BasePopover } from "./index-DvbYyCcE.js";
 import { t as Breadcrumb } from "./index-XBmzyFW4.js";
@@ -16,7 +16,7 @@ import { t as Checkbox } from "./index-By2y-Zjz.js";
 import { r as types_d_exports } from "./types-B4Yk1AUa.js";
 import { Chip } from "./chip.js";
 import { t as ChipList } from "./index-Du2b4ABa.js";
-import { n as types_d_exports$2, t as ContextMenu } from "./index-ChkulgEl.js";
+import { n as types_d_exports$2, t as ContextMenu } from "./index-B_xvhcYY.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
 import { t as Switch } from "./index-BEd1qAu7.js";
 import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-B-f7Shgf.js";

package/dist/index.js

@@ -16,7 +16,7 @@ import { n as types_exports, t as Chip } from "./Chip-DWoGbX_A.js";
 import "./ErrorMessage-BRnYfudz.js";
 import { t as ChipList } from "./ChipList-ClC-BPyL.js";
 import "./Loader-DUqRFMzl.js";
-import { t as Button } from "./Button-Vm1Odbi_.js";
+import { t as Button } from "./Button-BgsYjAC1.js";
 import { t as IconButton } from "./IconButton-BkwXYUL1.js";
 import { n as MaskType, r as MaskModule, t as Locale } from "./MaskModule-ChyYaHh2.js";
 import { t as Input } from "./Input-Dam9Lbxf.js";

package/dist/input.d.ts

@@ -1,2 +1,2 @@
-import { t as Input } from "./index-CL2pdJDi.js";
+import { t as Input } from "./index-B9Ooz6lk.js";
 export { Input };

package/dist/select.d.ts

@@ -1,3 +1,3 @@
-import { n as types_d_exports, t as Select } from "./index-Qqzj3D38.js";
+import { n as types_d_exports, t as Select } from "./index-CNPbAm9i.js";
 import "./types-B-zFTnqe.js";
 export { Select, types_d_exports as SelectTypes };

package/dist/text-area.d.ts

@@ -1,2 +1,2 @@
-import { t as TextArea } from "./index-CI1pmTNs.js";
+import { t as TextArea } from "./index-BdXsHz33.js";
 export { TextArea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "",
   "keywords": [],
   "author": "softable",