@undp/design-system-react/dist/CheckboxGroup.cjs.map

React based design system for UNDP

{"version":3,"file":"CheckboxGroup.cjs","names":[],"sources":["../src/components/ui/checkbox-group.tsx"],"sourcesContent":["import type { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport React from 'react';\nimport { cn } from '@/lib/utils';\nimport { Checkbox } from './checkbox';\n\ninterface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onValueChange'> {\n  defaultValue?: string[];\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  color?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'foreground' | undefined;\n  rounded?: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';\n  variant?: 'light' | 'normal' | undefined;\n}\n\n// Context for sharing state between CheckboxGroup and CheckboxGroupItem\nconst CheckboxGroupContext = React.createContext<{\n  selectedValues: string[];\n  onValueChange: (value: string, checked: boolean) => void;\n  color?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'foreground' | undefined;\n  rounded?: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';\n  variant?: 'light' | 'normal' | undefined;\n}>({\n  selectedValues: [],\n  onValueChange: () => {},\n  color: undefined,\n  rounded: undefined,\n  variant: undefined,\n});\n\nconst CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(\n  (\n    { className, children, value, rounded, variant, color, onValueChange, defaultValue, ...props },\n    ref,\n  ) => {\n    // Internal state for uncontrolled usage\n    const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue || []);\n\n    // Use either controlled or uncontrolled value\n    const selectedValues = value !== undefined ? value : internalValue;\n\n    // Handler for checkbox changes\n    const handleValueChange = React.useCallback(\n      (itemValue: string, checked: boolean) => {\n        const newValue = checked\n          ? [...selectedValues, itemValue]\n          : selectedValues.filter((v) => v !== itemValue);\n\n        // Update internal state if uncontrolled\n        if (value === undefined) {\n          setInternalValue(newValue);\n        }\n\n        // Call onValueChange handler if provided\n        onValueChange?.(newValue);\n      },\n      [selectedValues, value, onValueChange],\n    );\n\n    // Context to pass down the handler and selected values\n    const contextValue = React.useMemo(\n      () => ({\n        selectedValues,\n        color,\n        variant,\n        onValueChange: handleValueChange,\n      }),\n      [selectedValues, handleValueChange, color, variant],\n    );\n\n    return (\n      <CheckboxGroupContext.Provider value={contextValue}>\n        <div\n          {...props}\n          className={cn('flex flex-row flex-wrap gap-x-4 gap-y-2', className)}\n          ref={ref}\n        >\n          {children}\n        </div>\n      </CheckboxGroupContext.Provider>\n    );\n  },\n);\nCheckboxGroup.displayName = 'CheckboxGroup';\n\ninterface CheckboxGroupItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'value'> {\n  label?: string;\n  labelClassName?: string;\n  checkBoxClassName?: string;\n  checkIconClassName?: string;\n  value: string;\n}\n\nconst CheckboxGroupItem = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxGroupItemProps\n>(({ value, ...props }, ref) => {\n  const { selectedValues, onValueChange, color, rounded, variant } =\n    React.useContext(CheckboxGroupContext);\n\n  return (\n    <Checkbox\n      ref={ref}\n      {...props}\n      value={value}\n      color={color}\n      rounded={rounded}\n      variant={variant}\n      checked={selectedValues.includes(value)}\n      onCheckedChange={(checked) => onValueChange(value, checked === true)}\n    />\n  );\n});\nCheckboxGroupItem.displayName = 'CheckboxGroupItem';\n\nexport { CheckboxGroup, CheckboxGroupItem };\n"],"mappings":"kQAeA,IAAM,EAAuB,EAAA,QAAM,cAMhC,CACD,eAAgB,CAAC,EACjB,kBAAqB,CAAC,EACtB,MAAO,IAAA,GACP,QAAS,IAAA,GACT,QAAS,IAAA,EACX,CAAC,EAEK,EAAgB,EAAA,QAAM,YAExB,CAAE,YAAW,WAAU,QAAO,UAAS,UAAS,QAAO,gBAAe,eAAc,GAAG,GACvF,IACG,CAEH,GAAM,CAAC,EAAe,GAAoB,EAAA,QAAM,SAAmB,GAAgB,CAAC,CAAC,EAG/E,EAAiB,IAAU,IAAA,GAAoB,EAAR,EAGvC,EAAoB,EAAA,QAAM,aAC7B,EAAmB,IAAqB,CACvC,IAAM,EAAW,EACb,CAAC,GAAG,EAAgB,CAAS,EAC7B,EAAe,OAAQ,GAAM,IAAM,CAAS,EAG5C,IAAU,IAAA,IACZ,EAAiB,CAAQ,EAI3B,IAAgB,CAAQ,CAC1B,EACA,CAAC,EAAgB,EAAO,CAAa,CACvC,EAGM,EAAe,EAAA,QAAM,aAClB,CACL,iBACA,QACA,UACA,cAAe,CACjB,GACA,CAAC,EAAgB,EAAmB,EAAO,CAAO,CACpD,EAEA,OACE,EAAA,EAAA,IAAA,CAAC,EAAqB,SAAtB,CAA+B,MAAO,YACpC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAA,EAAG,0CAA2C,CAAS,EAC7D,MAEJ,UACE,CAAA,CACwB,CAAA,CAEnC,CACF,EACA,EAAc,YAAc,gBAW5B,IAAM,EAAoB,EAAA,QAAM,YAG7B,CAAE,QAAO,GAAG,GAAS,IAAQ,CAC9B,GAAM,CAAE,iBAAgB,gBAAe,QAAO,UAAS,WACrD,EAAA,QAAM,WAAW,CAAoB,EAEvC,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACO,MACL,GAAI,EACG,QACA,QACE,UACA,UACT,QAAS,EAAe,SAAS,CAAK,EACtC,gBAAkB,GAAY,EAAc,EAAO,IAAY,EAAI,CACpE,CAAA,CAEL,CAAC,EACD,EAAkB,YAAc"}