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

React based design system for UNDP

{"version":3,"file":"SegmentedControl.cjs","names":[],"sources":["../src/components/ui/segmented-control.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { useEffect, useEffectEvent, useState } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst segmentedButtonVariants = cva('inline-flex rounded-base bg-surface', {\n  variants: {\n    variant: {\n      normal: 'border-2 border-foreground bg-background',\n      light: 'border-0',\n    },\n    size: {\n      sm: '',\n      base: '',\n    },\n    rounded: {\n      base: 'rounded-base',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      full: 'rounded-full',\n    },\n  },\n  compoundVariants: [\n    { variant: 'normal', size: 'sm', class: 'p-0' },\n    { variant: 'normal', size: 'base', class: 'p-0' },\n    { variant: 'light', size: 'sm', class: 'p-[3px]' },\n    { variant: 'light', size: 'base', class: 'p-[5px]' },\n  ],\n  defaultVariants: {\n    size: 'base',\n    variant: 'normal',\n    rounded: 'base',\n  },\n});\n\nconst buttonSelectedVariants = cva('disabled:opacity-disabled disabled:cursor-not-allowed', {\n  variants: {\n    variant: {\n      normal: '',\n      light: '',\n    },\n    color: {\n      primary: '',\n      secondary: '',\n      tertiary: '',\n      quaternary: '',\n      foreground: '',\n    },\n    rounded: {\n      base: 'rounded-base',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      full: 'rounded-full',\n    },\n  },\n\n  compoundVariants: [\n    { variant: 'normal', color: 'primary', class: 'bg-primary text-content-reverse' },\n    { variant: 'normal', color: 'secondary', class: 'bg-secondary text-content-reverse' },\n    { variant: 'normal', color: 'tertiary', class: 'bg-tertiary text-content-reverse' },\n    { variant: 'normal', color: 'quaternary', class: 'bg-quaternary text-content-primary' },\n    {\n      variant: 'normal',\n      color: 'foreground',\n      class: 'font-bold bg-foreground text-content-reverse',\n    },\n    { variant: 'light', color: 'primary', class: 'font-bold bg-background text-primary' },\n    { variant: 'light', color: 'secondary', class: 'font-bold bg-background text-secondary' },\n    { variant: 'light', color: 'tertiary', class: 'font-bold bg-background text-tertiary' },\n    { variant: 'light', color: 'quaternary', class: 'font-bold bg-background text-quaternary' },\n    {\n      variant: 'light',\n      color: 'foreground',\n      class: 'font-bold bg-background text-foreground',\n    },\n  ],\n  defaultVariants: { color: 'primary', rounded: 'base', variant: 'normal' },\n});\n\nconst buttonUnselectedVariants = cva(\n  'text-content-primary hover:bg-surface-hover disabled:hover:bg-transparent disabled:hover:text-inherit disabled:cursor-not-allowed disabled:opacity-25',\n  {\n    variants: {\n      variant: {\n        normal: '',\n        light: '',\n      },\n      color: {\n        primary: '',\n        secondary: '',\n        tertiary: '',\n        quaternary: '',\n        foreground: '',\n      },\n      rounded: {\n        base: 'rounded-base',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n    },\n\n    compoundVariants: [\n      {\n        variant: 'normal',\n        color: 'primary',\n        class: 'hover:bg-primary-light',\n      },\n      { variant: 'normal', color: 'secondary', class: 'hover:bg-secondary-light' },\n      { variant: 'normal', color: 'tertiary', class: 'hover:bg-tertiary-light' },\n      { variant: 'normal', color: 'quaternary', class: 'hover:bg-quaternary-hover' },\n      { variant: 'normal', color: 'foreground', class: 'hover:bg-surface-hover' },\n      {\n        variant: 'light',\n        color: 'primary',\n        class: 'hover:text-primary disabled:hover:text-inherit',\n      },\n      {\n        variant: 'light',\n        color: 'secondary',\n        class: 'hover:text-secondary disabled:hover:text-inherit',\n      },\n      {\n        variant: 'light',\n        color: 'tertiary',\n        class: 'hover:text-tertiary disabled:hover:text-inherit',\n      },\n      {\n        variant: 'light',\n        color: 'quaternary',\n        class: 'hover:text-quaternary disabled:hover:text-inherit',\n      },\n      {\n        variant: 'light',\n        color: 'foreground',\n        class: 'hover:text-foreground disabled:hover:text-inherit',\n      },\n    ],\n    defaultVariants: { color: 'primary', rounded: 'base', variant: 'normal' },\n  },\n);\n\nfunction SegmentedControl(props: {\n  options: {\n    label: React.ReactNode;\n    value: string;\n    disabled?: boolean;\n  }[];\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (d: string) => void;\n  className?: string;\n  size?: 'sm' | 'base';\n  variant?: 'light' | 'normal';\n  color?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'foreground';\n  rounded?: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';\n  disabled?: boolean;\n  buttonStyle?: {\n    active?: React.CSSProperties;\n    items?: React.CSSProperties;\n  };\n  classNames?: {\n    control?: string;\n    items?: string;\n    active?: string;\n  };\n}) {\n  const {\n    options,\n    defaultValue,\n    onValueChange,\n    className,\n    size,\n    variant,\n    color,\n    value,\n    disabled,\n    rounded,\n    buttonStyle,\n    classNames,\n  } = props;\n  const [selected, setSelected] = useState(value || defaultValue || options[0].value);\n\n  const handleSelect = (value: string) => {\n    setSelected(value);\n    onValueChange?.(value);\n  };\n\n  const setSelectedEffect = useEffectEvent((value?: string) => {\n    setSelected(value || defaultValue || options[0].value);\n  });\n\n  useEffect(() => {\n    setSelectedEffect(value);\n  }, [value]);\n\n  return (\n    <div\n      className={cn(\n        segmentedButtonVariants({ size, variant, rounded }),\n        className,\n        classNames?.control,\n      )}\n    >\n      {options.map((option) => (\n        <button\n          disabled={disabled || option.disabled}\n          type='button'\n          key={option.value}\n          onClick={() => handleSelect(option.value)}\n          className={cn(\n            'rounded-sm px-4 py-2 text-sm transition-all duration-200',\n            selected === option.value\n              ? buttonSelectedVariants({ color, rounded, variant })\n              : buttonUnselectedVariants({ color, rounded, variant }),\n            classNames?.items,\n            selected === option.value && classNames?.active,\n          )}\n          style={\n            buttonStyle?.items || (selected === option.value && buttonStyle?.active)\n              ? {\n                  ...(buttonStyle?.items || {}),\n                  ...(selected === option.value ? buttonStyle?.active : {}),\n                }\n              : undefined\n          }\n        >\n          {option.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport { SegmentedControl };\n"],"mappings":"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"}