{"version":3,"sources":["../../../src/lib/elements.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Avatar as RadixAvatar,\n  AvatarProps as RadixAvatarProps,\n  Badge as RadixBadge,\n  IconButton as RadixIconButton,\n  Skeleton as RadixSkeleton,\n  Text,\n  TextField as RadixTextField,\n  type BadgeProps,\n  type ButtonProps as RadixButtonProps,\n  type IconButtonProps as RadixIconButtonProps,\n  type SkeletonProps,\n  type TextProps,\n  Button as RadixButton,\n} from \"@radix-ui/themes\";\nimport type {\n  GetPropDefTypes,\n  avatarPropDefs,\n  badgePropDefs,\n  buttonPropDefs,\n  dialogContentPropDefs,\n  dropdownMenuContentPropDefs,\n  dropdownMenuItemPropDefs,\n  iconButtonPropDefs,\n  textPropDefs,\n  textFieldRootPropDefs,\n  selectTriggerPropDefs,\n  skeletonPropDefs,\n} from \"@radix-ui/themes/props\";\nimport cx from \"clsx\";\nimport { useElement } from \"./widgets-context.js\";\nimport { getDomProps, namespaceClassNames } from \"./utils.js\";\nimport { EyeClosedIcon, EyeOpenIcon } from \"@radix-ui/react-icons\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\nexport interface ButtonProps extends Omit<\n  RadixButtonProps,\n  \"variant\" | \"color\"\n> {\n  variant?: \"primary\" | \"secondary\" | \"destructive\";\n  unsafe_radixVariant?: RadixButtonProps[\"variant\"];\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { className, variant = \"primary\", unsafe_radixVariant, ...props },\n    ref,\n  ) {\n    const element = useElement(`${variant}Button`);\n\n    const themeProps = (() => {\n      let props: RadixButtonProps = {};\n      if (variant === \"primary\") {\n        props = {\n          variant: \"solid\",\n        } satisfies RadixButtonProps;\n      } else if (variant === \"secondary\") {\n        props = {\n          highContrast: true,\n          variant: \"surface\",\n          color: \"gray\",\n        } satisfies RadixButtonProps;\n      } else if (variant === \"destructive\") {\n        props = {\n          variant: \"solid\",\n          color: \"red\",\n        } satisfies RadixButtonProps;\n      } else {\n        variant satisfies never;\n      }\n\n      if (unsafe_radixVariant) {\n        props.variant = unsafe_radixVariant;\n      }\n\n      return props;\n    })();\n\n    return (\n      <RadixButton\n        ref={ref}\n        {...getDomProps({\n          elementId: `${variant}Button`,\n          className: cx(\n            className,\n            // TODO: Remove BEM-style selector once conventions are standardized\n            `button--${variant}`,\n          ),\n        })}\n        {...themeProps}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport interface IconButtonProps extends RadixIconButtonProps {\n  title: string;\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton({ className, ...props }, ref) {\n    const element = useElement(\"iconButton\");\n    return (\n      <RadixIconButton\n        ref={ref}\n        {...getDomProps({ elementId: \"iconButton\", className })}\n        variant=\"ghost\"\n        color=\"gray\"\n        aria-label={props.title}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(\n  function Skeleton({ className, ...props }, ref) {\n    const element = useElement(\"skeleton\");\n    return (\n      <RadixSkeleton\n        ref={ref}\n        {...getDomProps({ elementId: \"skeleton\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const Label = React.forwardRef<HTMLLabelElement, TextProps>(\n  function Label({ children, className, style = {}, ...props }, ref) {\n    const element = useElement(\"label\");\n    return (\n      <Text\n        as=\"label\"\n        ref={ref}\n        weight=\"bold\"\n        size=\"2\"\n        {...getDomProps({ elementId: \"label\", className })}\n        style={{ width: \"fit-content\", ...style }}\n        // Text props are a complex union type depending on the `as` prop value,\n        // which breaks down when spreading in `element`.\n        {...(props as any)}\n        {...element}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n\nexport const TextField = React.forwardRef<\n  HTMLInputElement,\n  RadixTextField.RootProps\n>(function TextField({ className, ...props }, ref) {\n  const element = useElement(\"textfield\");\n  return (\n    <RadixTextField.Root\n      ref={ref}\n      variant=\"surface\"\n      className={cx(namespaceClassNames(\"text-field\"), className)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\nexport const TextFieldSlot = React.forwardRef<\n  HTMLDivElement,\n  RadixTextField.SlotProps\n>(function TextFieldSlot({ className, ...props }, ref) {\n  return (\n    <RadixTextField.Slot\n      ref={ref}\n      className={cx(namespaceClassNames(\"text-field-slot\"), className)}\n      {...props}\n    />\n  );\n});\n\nexport const PasswordField = React.forwardRef<\n  HTMLInputElement,\n  RadixTextField.RootProps\n>(function PasswordField({ className, ...props }, ref) {\n  const element = useElement(\"textfield\");\n  const [showPassword, setShowPassword] = React.useState(false);\n  const translate = useTranslation();\n  const hidePasswordText = translate({\n    defaultMessage: \"Hide password\",\n    id: \"Jv4Vps\",\n    description: \"Button text to hide password\",\n  });\n  const showPasswordText = translate({\n    defaultMessage: \"Show password\",\n    id: \"UIfBSd\",\n    description: \"Button text to show password\",\n  });\n  return (\n    <RadixTextField.Root\n      ref={ref}\n      variant=\"surface\"\n      className={cx(namespaceClassNames(\"text-field\"), className)}\n      {...props}\n      {...element}\n      type={showPassword ? \"text\" : \"password\"}\n    >\n      <RadixTextField.Slot side=\"right\">\n        <IconButton\n          type=\"button\"\n          size=\"1\"\n          onClick={() => setShowPassword(!showPassword)}\n          title={showPassword ? hidePasswordText : showPasswordText}\n        >\n          {showPassword ? <EyeOpenIcon /> : <EyeClosedIcon />}\n        </IconButton>\n      </RadixTextField.Slot>\n    </RadixTextField.Root>\n  );\n});\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge({ className, ...props }, ref) {\n    const element = useElement(\"badge\");\n    return (\n      <RadixBadge\n        ref={ref}\n        {...getDomProps({ elementId: \"badge\", className })}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\ninterface AvatarProps extends RadixAvatarProps {\n  dim?: boolean;\n}\n\nexport const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(\n  function Avatar({ dim, className, ...props }, ref) {\n    const element = useElement(\"avatar\");\n    return (\n      <RadixAvatar\n        ref={ref}\n        color=\"gray\"\n        {...getDomProps({ elementId: \"avatar\", className })}\n        {...props}\n        {...element}\n        // TODO: use CSS var instead of hard-coded value for opacity\n        style={dim ? { opacity: 0.6, ...props.style } : props.style}\n      />\n    );\n  },\n);\n\ntype OmitAsChild<T> = {\n  [K in keyof T]: T[K] extends undefined\n    ? undefined\n    : Omit<NonNullable<T[K]>, \"asChild\">;\n};\n\nexport * as Dialog from \"./elements/dialog.js\";\nexport * as AlertDialog from \"./elements/alert-dialog.js\";\nexport * as DropdownMenu from \"./elements/dropdown-menu.js\";\nexport * as Select from \"./elements/select.js\";\n\nexport type Elements = OmitAsChild<{\n  dialog?: GetPropDefTypes<typeof dialogContentPropDefs>;\n  primaryButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  secondaryButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  destructiveButton?: GetPropDefTypes<typeof buttonPropDefs>;\n  iconButton?: GetPropDefTypes<typeof iconButtonPropDefs>;\n  textfield?: GetPropDefTypes<typeof textFieldRootPropDefs>;\n  select?: GetPropDefTypes<typeof selectTriggerPropDefs>;\n  badge?: GetPropDefTypes<typeof badgePropDefs>;\n  dropdown?: GetPropDefTypes<typeof dropdownMenuContentPropDefs>;\n  primaryMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\n  destructiveMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\n  avatar?: Omit<GetPropDefTypes<typeof avatarPropDefs>, \"fallback\">;\n  label?: GetPropDefTypes<typeof textPropDefs>;\n  skeleton?: GetPropDefTypes<typeof skeletonPropDefs>;\n}>;\n"],"mappings":"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","names":["Button","props","RadixButton","cx","IconButton","RadixIconButton","Skeleton","RadixSkeleton","Label","TextField","RadixTextField","TextFieldSlot","PasswordField","Badge","RadixBadge","Avatar","RadixAvatar"]}