@frank-auth/react/dist/cjs/components/ui/checkbox/checkbox.cjs.map

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"checkbox.cjs","sources":["../../../../../src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { useTheme } from \"@/theme/context\";\nimport { type StyledProps, getColorVariant } from \"@/theme/styled\";\nimport type { Theme } from \"@/theme/theme\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React, { useState, useRef, useImperativeHandle } from \"react\";\n\nexport interface CheckboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  /** Checkbox color theme */\n  color?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\";\n  /** Checkbox size */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Checkbox radius */\n  radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n  /** Label text */\n  children?: React.ReactNode;\n  /** Description text */\n  description?: string;\n  /** Indeterminate state */\n  isIndeterminate?: boolean;\n  /** Invalid state */\n  isInvalid?: boolean;\n  /** Disabled state */\n  isDisabled?: boolean;\n  /** Required field */\n  isRequired?: boolean;\n  /** Custom class name */\n  className?: string;\n  /** Custom styles */\n  css?: any;\n  /** Icon for checked state */\n  icon?: React.ReactNode;\n  /** Alias for checked prop */\n  isSelected?: boolean;\n  /** Alias for onChange that receives only the boolean value */\n  onValueChange?: (checked: boolean) => void;\n}\n\ntype StyledCheckboxProps = StyledProps<CheckboxProps>;\n\nconst getCheckboxSizeStyles = (props: StyledCheckboxProps) => {\n  const { size = \"md\" } = props;\n\n  switch (size) {\n    case \"sm\":\n      return css`\n        width: 16px;\n        height: 16px;\n      `;\n    case \"md\":\n      return css`\n        width: 20px;\n        height: 20px;\n      `;\n    case \"lg\":\n      return css`\n        width: 24px;\n        height: 24px;\n      `;\n    default:\n      return css`\n        width: 20px;\n        height: 20px;\n      `;\n  }\n};\n\nconst getCheckboxRadiusStyles = (props: StyledCheckboxProps) => {\n  const { theme, radius = \"sm\" } = props;\n\n  switch (radius) {\n    case \"none\":\n      return css`\n        border-radius: ${theme.borderRadius.none};\n      `;\n    case \"sm\":\n      return css`\n        border-radius: ${theme.borderRadius.sm};\n      `;\n    case \"md\":\n      return css`\n        border-radius: ${theme.borderRadius.md};\n      `;\n    case \"lg\":\n      return css`\n        border-radius: ${theme.borderRadius.lg};\n      `;\n    case \"full\":\n      return css`\n        border-radius: ${theme.borderRadius.full};\n      `;\n    default:\n      return css`\n        border-radius: ${theme.borderRadius.sm};\n      `;\n  }\n};\n\nconst getCheckboxColorStyles = (\n  props: StyledCheckboxProps & {\n    isChecked: boolean;\n    isIndeterminate: boolean;\n    isFocused: boolean;\n  },\n) => {\n  const {\n    theme,\n    color = \"primary\",\n    isInvalid,\n    isDisabled,\n    isChecked,\n    isIndeterminate,\n    isFocused,\n  } = props;\n  const baseColor = getColorVariant(theme, color, 500);\n  const hoverColor = getColorVariant(theme, color, 600);\n  const errorColor = theme.colors.danger[500];\n\n  const activeColor = isInvalid ? errorColor : baseColor;\n\n  if (isDisabled) {\n    return css`\n      opacity: 0.5;\n      cursor: not-allowed;\n      background-color: ${theme.colors.neutral[200]};\n      border-color: ${theme.colors.neutral[300]};\n    `;\n  }\n\n  if (isChecked || isIndeterminate) {\n    return css`\n      background-color: ${activeColor};\n      border-color: ${activeColor};\n      color: ${theme.colors.text.inverse};\n\n      &:hover {\n        background-color: ${isInvalid ? errorColor : hoverColor};\n        border-color: ${isInvalid ? errorColor : hoverColor};\n      }\n    `;\n  }\n\n  return css`\n    background-color: ${theme.colors.background.primary};\n    border-color: ${isInvalid ? errorColor : theme.colors.border.primary};\n    color: transparent;\n\n    &:hover {\n      border-color: ${isInvalid ? errorColor : theme.colors.border.secondary};\n    }\n\n    ${isFocused &&\n    css`\n      border-color: ${activeColor};\n      box-shadow: 0 0 0 2px ${activeColor}20;\n    `}\n  `;\n};\n\n// Updated container with better alignment\nconst CheckboxContainer = styled.label<{ isDisabled?: boolean; theme: Theme }>`\n  display: inline-flex;\n  align-items: flex-start;\n  gap: ${(props) => props.theme.spacing[2]};\n  cursor: ${(props) => (props.isDisabled ? \"not-allowed\" : \"pointer\")};\n  user-select: none;\n  line-height: 1;\n`;\n\nconst HiddenInput = styled.input`\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n  margin: 0;\n  width: 0;\n  height: 0;\n  top: 1px;\n`;\n\n// Updated wrapper with better vertical alignment\nconst CheckboxWrapper = styled.div<\n  StyledCheckboxProps & {\n    isChecked: boolean;\n    isIndeterminate: boolean;\n    isFocused: boolean;\n  }\n>`\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid;\n  transition: all ${(props) => props.theme.transitions.normal};\n  flex-shrink: 0;\n\n  /* Improved alignment with text baseline */\n  margin-top: ${(props) => {\n    switch (props.size) {\n      case \"sm\":\n        return \"1px\"; // Small offset for sm size\n      case \"md\":\n        return \"2px\"; // Medium offset for md size\n      case \"lg\":\n        return \"3px\"; // Larger offset for lg size\n      default:\n        return \"2px\";\n    }\n  }};\n\n  ${getCheckboxSizeStyles}\n  ${getCheckboxRadiusStyles}\n  ${getCheckboxColorStyles}\n\n    /* Custom CSS prop */\n  ${(props) => props.css}\n`;\n\nconst CheckIcon = () => (\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"3\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <polyline points=\"20,6 9,17 4,12\" />\n  </svg>\n);\n\nconst IndeterminateIcon = () => (\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"3\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n  </svg>\n);\n\nconst IconWrapper = styled.div<{ size?: \"sm\" | \"md\" | \"lg\" }>`\n  width: ${(props) => {\n    switch (props.size) {\n      case \"sm\":\n        return \"10px\";\n      case \"lg\":\n        return \"16px\";\n      default:\n        return \"12px\";\n    }\n  }};\n  height: ${(props) => {\n    switch (props.size) {\n      case \"sm\":\n        return \"10px\";\n      case \"lg\":\n        return \"16px\";\n      default:\n        return \"12px\";\n    }\n  }};\n`;\n\n// Updated label content with better line height\nconst LabelContent = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  gap: ${(props) => props.theme.spacing[1]};\n  min-height: 0; /* Allows proper flex behavior */\n`;\n\n// Updated label text with proper line height for alignment\nconst LabelText = styled.span<{\n  size?: \"sm\" | \"md\" | \"lg\";\n  isRequired?: boolean;\n  theme: Theme;\n}>`\n  color: ${(props) => props.theme.colors.text.primary};\n  font-size: ${(props) => {\n    switch (props.size) {\n      case \"sm\":\n        return props.theme.fontSizes.sm;\n      case \"lg\":\n        return props.theme.fontSizes.lg;\n      default:\n        return props.theme.fontSizes.base;\n    }\n  }};\n  font-weight: ${(props) => props.theme.fontWeights.medium};\n  line-height: ${(props) => {\n    switch (props.size) {\n      case \"sm\":\n        return \"1.25\"; // Tighter line height for small\n      case \"lg\":\n        return \"1.4\"; // More relaxed for large\n      default:\n        return \"1.5\"; // Standard line height\n    }\n  }};\n  margin: 0; /* Remove default margins */\n\n  ${(props) =>\n    props.isRequired &&\n    css`\n      &::after {\n        content: \" *\";\n        color: ${props.theme.colors.danger[500]};\n      }\n    `}\n`;\n\n// Updated description with consistent spacing\nconst Description = styled.span<{ size?: \"sm\" | \"md\" | \"lg\"; theme: Theme }>`\n  color: ${(props) => props.theme.colors.text.secondary};\n  font-size: ${(props) => {\n    switch (props.size) {\n      case \"sm\":\n        return props.theme.fontSizes.xs;\n      case \"lg\":\n        return props.theme.fontSizes.sm;\n      default:\n        return props.theme.fontSizes.sm;\n    }\n  }};\n  line-height: ${(props) => {\n    switch (props.size) {\n      case \"sm\":\n        return \"1.3\";\n      case \"lg\":\n        return \"1.4\";\n      default:\n        return \"1.4\";\n    }\n  }};\n  margin: 0; /* Remove default margins */\n`;\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      children,\n      color = \"primary\",\n      size = \"md\",\n      radius = \"sm\",\n      description,\n      isIndeterminate = false,\n      isInvalid = false,\n      isDisabled = false,\n      isRequired = false,\n      className,\n      css,\n      icon,\n      checked,\n      defaultChecked,\n      onChange,\n      onFocus,\n      onBlur,\n      isSelected,\n      onValueChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const { theme } = useTheme();\n    const [isChecked, setIsChecked] = useState(defaultChecked || false);\n    const [isFocused, setIsFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(ref, () => inputRef.current!);\n\n    // Support both checked/isSelected props (isSelected takes precedence)\n    const controlledChecked =\n      isSelected !== undefined\n        ? isSelected\n        : checked !== undefined\n          ? checked\n          : isChecked;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newChecked = e.target.checked;\n\n      // Update internal state if not controlled\n      if (checked === undefined && isSelected === undefined) {\n        setIsChecked(newChecked);\n      }\n\n      // Call the appropriate callback\n      if (onValueChange) {\n        onValueChange(newChecked);\n      }\n      onChange?.(e);\n    };\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    };\n\n    const checkboxProps = {\n      color,\n      size,\n      radius,\n      isInvalid,\n      isDisabled,\n      isChecked: controlledChecked,\n      isIndeterminate,\n      isFocused,\n      className,\n      css,\n    };\n\n    return (\n      <CheckboxContainer theme={theme} isDisabled={isDisabled}>\n        <CheckboxWrapper theme={theme} {...checkboxProps}>\n          <HiddenInput\n            ref={inputRef}\n            type=\"checkbox\"\n            checked={controlledChecked}\n            disabled={isDisabled}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            {...props}\n          />\n          {(controlledChecked || isIndeterminate) && (\n            <IconWrapper size={size}>\n              {icon ||\n                (isIndeterminate ? <IndeterminateIcon /> : <CheckIcon />)}\n            </IconWrapper>\n          )}\n        </CheckboxWrapper>\n        {(children || description) && (\n          <LabelContent theme={theme}>\n            {children && (\n              <LabelText theme={theme} size={size} isRequired={isRequired}>\n                {children}\n              </LabelText>\n            )}\n            {description && (\n              <Description theme={theme} size={size}>\n                {description}\n              </Description>\n            )}\n          </LabelContent>\n        )}\n      </CheckboxContainer>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["getCheckboxSizeStyles","props","size","css","getCheckboxRadiusStyles","theme","radius","getCheckboxColorStyles","color","isInvalid","isDisabled","isChecked","isIndeterminate","isFocused","baseColor","getColorVariant","hoverColor","errorColor","activeColor","CheckboxContainer","styled","HiddenInput","CheckboxWrapper","CheckIcon","jsx","IndeterminateIcon","IconWrapper","LabelContent","LabelText","Description","Checkbox","React","children","description","isRequired","className","icon","checked","defaultChecked","onChange","onFocus","onBlur","isSelected","onValueChange","ref","useTheme","setIsChecked","useState","setIsFocused","inputRef","useRef","useImperativeHandle","controlledChecked","handleChange","e","newChecked","handleFocus","handleBlur","checkboxProps","jsxs"],"mappings":"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"}