@workos-inc/widgets 1.4.2 → 1.5.0

package/dist/cjs/lib/elements.cjs

@@ -0,0 +1,396 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var elements_exports = {};
+__export(elements_exports, {
+  AlertDialogContent: () => AlertDialogContent,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  DestructiveButton: () => DestructiveButton,
+  DestructiveMenuItem: () => DestructiveMenuItem,
+  DialogContent: () => DialogContent,
+  DropdownMenuContent: () => DropdownMenuContent,
+  IconButton: () => IconButton,
+  Label: () => Label,
+  PasswordField: () => PasswordField,
+  PrimaryButton: () => PrimaryButton,
+  PrimaryMenuItem: () => PrimaryMenuItem,
+  SecondaryButton: () => SecondaryButton,
+  SelectContent: () => SelectContent,
+  SelectItem: () => SelectItem,
+  SelectTrigger: () => SelectTrigger,
+  Skeleton: () => Skeleton,
+  TextField: () => TextField,
+  TextFieldSlot: () => TextFieldSlot
+});
+module.exports = __toCommonJS(elements_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_themes = require("@radix-ui/themes");
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_widgets_context = require("./widgets-context.js");
+var import_utils = require("./utils.js");
+var import_use_layout_effect = require("./use-layout-effect.js");
+var import_react_icons = require("@radix-ui/react-icons");
+const PrimaryButton = React.forwardRef(
+  function PrimaryButton2({ className, ...props }, ref) {
+    const element = (0, import_widgets_context.useElement)("primaryButton");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Button,
+      {
+        ref,
+        className: (0, import_clsx.default)(
+          (0, import_utils.namespaceClassNames)("button", "button--primary"),
+          className
+        ),
+        variant: "solid",
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+const SecondaryButton = React.forwardRef(
+  function SecondaryButton2({ className, ...props }, ref) {
+    const element = (0, import_widgets_context.useElement)("secondaryButton");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Button,
+      {
+        ref,
+        highContrast: true,
+        className: (0, import_clsx.default)(
+          (0, import_utils.namespaceClassNames)("button", "button--secondary"),
+          className
+        ),
+        variant: "surface",
+        color: "gray",
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+const DestructiveButton = React.forwardRef(function DestructiveButton2({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("destructiveButton");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Button,
+    {
+      ref,
+      className: (0, import_clsx.default)(
+        (0, import_utils.namespaceClassNames)("button", "button--destructive"),
+        className
+      ),
+      variant: "solid",
+      color: "red",
+      ...props,
+      ...element
+    }
+  );
+});
+const IconButton = React.forwardRef(
+  function IconButton2({ className, ...props }, ref) {
+    const element = (0, import_widgets_context.useElement)("iconButton");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.IconButton,
+      {
+        ref,
+        className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("button", "icon-button"), className),
+        variant: "ghost",
+        color: "gray",
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+const Skeleton = React.forwardRef(
+  function Skeleton2({ className, ...props }, ref) {
+    const element = (0, import_widgets_context.useElement)("skeleton");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Skeleton,
+      {
+        ref,
+        className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("skeleton"), className),
+        ...props,
+        ...element
+      }
+    );
+  }
+);
+const SelectTrigger = React.forwardRef(function SelectTrigger2({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("select");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Select.Trigger,
+    {
+      ref,
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("select"), className),
+      ...props,
+      ...element
+    }
+  );
+});
+const SelectContent = React.forwardRef(function SelectContent2({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("dropdown");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Select.Content,
+    {
+      ref,
+      className: (0, import_clsx.default)(
+        (0, import_utils.namespaceClassNames)("dropdown", "select-dropdown"),
+        className
+      ),
+      ...props,
+      ...element
+    }
+  );
+});
+const SelectItem = React.forwardRef(function SelectItem2({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("primaryMenuItem");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Select.Item,
+    {
+      ref,
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("menu-item", "select-item"), className),
+      ...props,
+      ...element
+    }
+  );
+});
+const Label = React.forwardRef(
+  function Label2({ children, className, style = {}, ...props }, ref) {
+    const element = (0, import_widgets_context.useElement)("label");
+    return (
+      // @ts-expect-error: Text props are a complex union type depending on the
+      // `as` prop value, which breaks down when spreading in `element`
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_themes.Text,
+        {
+          as: "label",
+          ref,
+          weight: "bold",
+          size: "2",
+          className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("label"), className),
+          style: { width: "fit-content", ...style },
+          ...props,
+          ...element,
+          children
+        }
+      )
+    );
+  }
+);
+const TextField = React.forwardRef(function TextField2({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("textfield");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.TextField.Root,
+    {
+      ref,
+      variant: "surface",
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("text-field"), className),
+      ...props,
+      ...element
+    }
+  );
+});
+const TextFieldSlot = React.forwardRef(function TextFieldSlot2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.TextField.Slot,
+    {
+      ref,
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("text-field-slot"), className),
+      ...props
+    }
+  );
+});
+const PasswordField = React.forwardRef(function TextField3({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("textfield");
+  const [showPassword, setShowPassword] = React.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.TextField.Root,
+    {
+      ref,
+      variant: "surface",
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("text-field"), className),
+      ...props,
+      ...element,
+      type: showPassword ? "text" : "password",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.TextField.Slot, { side: "right", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        IconButton,
+        {
+          type: "button",
+          size: "1",
+          variant: "ghost",
+          color: "gray",
+          onClick: () => setShowPassword(!showPassword),
+          children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.EyeOpenIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icons.EyeClosedIcon, {})
+        }
+      ) })
+    }
+  );
+});
+const Badge = React.forwardRef(
+  function Badge2({ className, ...props }, ref) {
+    const element = (0, import_widgets_context.useElement)("badge");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Badge,
+      {
+        ref,
+        className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("badge"), className),
+        ...element,
+        ...props
+      }
+    );
+  }
+);
+const DropdownMenuContent = React.forwardRef(function DropdownMenuContent2({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("dropdown");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.DropdownMenu.Content,
+    {
+      ref,
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("dropdown"), className),
+      ...props,
+      ...element
+    }
+  );
+});
+const PrimaryMenuItem = React.forwardRef(function PrimaryMenuItem2({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("primaryMenuItem");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.DropdownMenu.Item,
+    {
+      ref,
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("menu-item"), className),
+      ...props,
+      ...element
+    }
+  );
+});
+const DestructiveMenuItem = React.forwardRef(function DestructiveMenuItem2({ className, ...props }, ref) {
+  const element = (0, import_widgets_context.useElement)("destructiveMenuItem");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.DropdownMenu.Item,
+    {
+      ref,
+      className: (0, import_clsx.default)(
+        (0, import_utils.namespaceClassNames)("menu-item", "menu-item--destructive"),
+        className
+      ),
+      color: "red",
+      ...props,
+      ...element
+    }
+  );
+});
+const Avatar = React.forwardRef(
+  function Avatar2({ dim, className, ...props }, ref) {
+    const element = (0, import_widgets_context.useElement)("avatar");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Avatar,
+      {
+        ref,
+        color: "gray",
+        className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("avatar"), className),
+        ...props,
+        ...element,
+        style: dim ? { opacity: 0.6, ...props.style } : props.style
+      }
+    );
+  }
+);
+const DialogContent = React.forwardRef(function DialogContent2({ className, ...props }, forwardedRef) {
+  const element = (0, import_widgets_context.useElement)("dialog");
+  const [node, setNode] = React.useState(null);
+  const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, setNode);
+  useDialogOverlayHack(node, {
+    className: (0, import_utils.namespaceClassNames)("dialog-overlay"),
+    selector: ".rt-DialogOverlay"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Dialog.Content,
+    {
+      ref,
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("dialog"), className),
+      ...props,
+      ...element
+    }
+  );
+});
+const AlertDialogContent = React.forwardRef(function AlertDialogContent2({ className, ...props }, forwardedRef) {
+  const element = (0, import_widgets_context.useElement)("dialog");
+  const [node, setNode] = React.useState(null);
+  const ref = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, setNode);
+  useDialogOverlayHack(node, {
+    className: (0, import_utils.namespaceClassNames)("dialog-overlay"),
+    selector: ".rt-AlertDialogOverlay"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.AlertDialog.Content,
+    {
+      ref,
+      className: (0, import_clsx.default)((0, import_utils.namespaceClassNames)("dialog"), className),
+      ...props,
+      ...element
+    }
+  );
+});
+function useDialogOverlayHack(node, { className, selector }) {
+  (0, import_use_layout_effect.useLayoutEffect)(() => {
+    if (!node) {
+      return;
+    }
+    const document = node.ownerDocument;
+    const overlay = document.querySelector(selector);
+    overlay?.classList.add(className);
+  }, [node, className, selector]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertDialogContent,
+  Avatar,
+  Badge,
+  DestructiveButton,
+  DestructiveMenuItem,
+  DialogContent,
+  DropdownMenuContent,
+  IconButton,
+  Label,
+  PasswordField,
+  PrimaryButton,
+  PrimaryMenuItem,
+  SecondaryButton,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Skeleton,
+  TextField,
+  TextFieldSlot
+});
+//# sourceMappingURL=elements.cjs.map

package/dist/cjs/lib/elements.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/elements.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  AlertDialog as RadixAlertDialog,\n  Avatar as RadixAvatar,\n  AvatarProps as RadixAvatarProps,\n  Badge as RadixBadge,\n  Button as RadixButton,\n  Dialog as RadixDialog,\n  DropdownMenu as RadixDropdownMenu,\n  IconButton as RadixIconButton,\n  Select as RadixSelect,\n  Skeleton as RadixSkeleton,\n  Text,\n  TextField as RadixTextField,\n  type BadgeProps,\n  type ButtonProps,\n  type IconButtonProps,\n  type SkeletonProps,\n  type TextProps,\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 { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport cx from \"clsx\";\nimport { useElement } from \"./widgets-context.js\";\nimport { namespaceClassNames } from \"./utils.js\";\nimport { useLayoutEffect } from \"./use-layout-effect.js\";\nimport { EyeClosedIcon, EyeOpenIcon } from \"@radix-ui/react-icons\";\n\nexport const PrimaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function PrimaryButton({ className, ...props }, ref) {\n    const element = useElement(\"primaryButton\");\n    return (\n      <RadixButton\n        ref={ref}\n        className={cx(\n          namespaceClassNames(\"button\", \"button--primary\"),\n          className,\n        )}\n        variant=\"solid\"\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const SecondaryButton = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function SecondaryButton({ className, ...props }, ref) {\n    const element = useElement(\"secondaryButton\");\n    return (\n      <RadixButton\n        ref={ref}\n        highContrast\n        className={cx(\n          namespaceClassNames(\"button\", \"button--secondary\"),\n          className,\n        )}\n        variant=\"surface\"\n        color=\"gray\"\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const DestructiveButton = React.forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(function DestructiveButton({ className, ...props }, ref) {\n  const element = useElement(\"destructiveButton\");\n  return (\n    <RadixButton\n      ref={ref}\n      className={cx(\n        namespaceClassNames(\"button\", \"button--destructive\"),\n        className,\n      )}\n      variant=\"solid\"\n      color=\"red\"\n      {...props}\n      {...element}\n    />\n  );\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        className={cx(namespaceClassNames(\"button\", \"icon-button\"), className)}\n        variant=\"ghost\"\n        color=\"gray\"\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        className={cx(namespaceClassNames(\"skeleton\"), className)}\n        {...props}\n        {...element}\n      />\n    );\n  },\n);\n\nexport const SelectTrigger = React.forwardRef<\n  HTMLButtonElement,\n  RadixSelect.TriggerProps\n>(function SelectTrigger({ className, ...props }, ref) {\n  const element = useElement(\"select\");\n  return (\n    <RadixSelect.Trigger\n      ref={ref}\n      className={cx(namespaceClassNames(\"select\"), className)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\nexport const SelectContent = React.forwardRef<\n  HTMLDivElement,\n  RadixSelect.ContentProps\n>(function SelectContent({ className, ...props }, ref) {\n  const element = useElement(\"dropdown\");\n  return (\n    <RadixSelect.Content\n      ref={ref}\n      className={cx(\n        namespaceClassNames(\"dropdown\", \"select-dropdown\"),\n        className,\n      )}\n      {...props}\n      {...element}\n    />\n  );\n});\n\nexport const SelectItem = React.forwardRef<\n  HTMLDivElement,\n  RadixSelect.ItemProps\n>(function SelectItem({ className, ...props }, ref) {\n  const element = useElement(\"primaryMenuItem\");\n  return (\n    <RadixSelect.Item\n      ref={ref}\n      className={cx(namespaceClassNames(\"menu-item\", \"select-item\"), className)}\n      {...props}\n      {...element}\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      // @ts-expect-error: Text props are a complex union type depending on the\n      // `as` prop value, which breaks down when spreading in `element`\n      <Text\n        as=\"label\"\n        ref={ref}\n        weight=\"bold\"\n        size=\"2\"\n        className={cx(namespaceClassNames(\"label\"), className)}\n        style={{ width: \"fit-content\", ...style }}\n        {...props}\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 TextField({ className, ...props }, ref) {\n  const element = useElement(\"textfield\");\n  const [showPassword, setShowPassword] = React.useState(false);\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          variant=\"ghost\"\n          color=\"gray\"\n          onClick={() => setShowPassword(!showPassword)}\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        className={cx(namespaceClassNames(\"badge\"), className)}\n        {...element}\n        {...props}\n      />\n    );\n  },\n);\n\nexport const DropdownMenuContent = React.forwardRef<\n  HTMLDivElement,\n  RadixDropdownMenu.ContentProps\n>(function DropdownMenuContent({ className, ...props }, ref) {\n  const element = useElement(\"dropdown\");\n  return (\n    <RadixDropdownMenu.Content\n      ref={ref}\n      className={cx(namespaceClassNames(\"dropdown\"), className)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\nexport const PrimaryMenuItem = React.forwardRef<\n  HTMLDivElement,\n  RadixDropdownMenu.ItemProps\n>(function PrimaryMenuItem({ className, ...props }, ref) {\n  const element = useElement(\"primaryMenuItem\");\n  return (\n    <RadixDropdownMenu.Item\n      ref={ref}\n      className={cx(namespaceClassNames(\"menu-item\"), className)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\nexport const DestructiveMenuItem = React.forwardRef<\n  HTMLDivElement,\n  RadixDropdownMenu.ItemProps\n>(function DestructiveMenuItem({ className, ...props }, ref) {\n  const element = useElement(\"destructiveMenuItem\");\n  return (\n    <RadixDropdownMenu.Item\n      ref={ref}\n      className={cx(\n        namespaceClassNames(\"menu-item\", \"menu-item--destructive\"),\n        className,\n      )}\n      color=\"red\"\n      {...props}\n      {...element}\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        className={cx(namespaceClassNames(\"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\nexport const DialogContent = React.forwardRef<\n  HTMLDivElement,\n  RadixDialog.ContentProps\n>(function DialogContent({ className, ...props }, forwardedRef) {\n  const element = useElement(\"dialog\");\n  const [node, setNode] = React.useState<HTMLDivElement | null>(null);\n  const ref = useComposedRefs(forwardedRef, setNode as any);\n  useDialogOverlayHack(node, {\n    className: namespaceClassNames(\"dialog-overlay\"),\n    selector: \".rt-DialogOverlay\",\n  });\n  return (\n    <RadixDialog.Content\n      ref={ref}\n      className={cx(namespaceClassNames(\"dialog\"), className)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\nexport const AlertDialogContent = React.forwardRef<\n  HTMLDivElement,\n  RadixAlertDialog.ContentProps\n>(function AlertDialogContent({ className, ...props }, forwardedRef) {\n  const element = useElement(\"dialog\");\n  const [node, setNode] = React.useState<HTMLDivElement | null>(null);\n  const ref = useComposedRefs(forwardedRef, setNode as any);\n  useDialogOverlayHack(node, {\n    className: namespaceClassNames(\"dialog-overlay\"),\n    selector: \".rt-AlertDialogOverlay\",\n  });\n\n  return (\n    <RadixAlertDialog.Content\n      ref={ref}\n      className={cx(namespaceClassNames(\"dialog\"), className)}\n      {...props}\n      {...element}\n    />\n  );\n});\n\n/**\n * HACK: Radix themes does not expose the dialog overlay, but we want consumer\n * to be able to style it with a classname. This will add a classname to the\n * overlay when the dialog content is mounted.\n */\nfunction useDialogOverlayHack(\n  node: HTMLDivElement | null,\n  { className, selector }: { className: string; selector: string },\n) {\n  useLayoutEffect(() => {\n    if (!node) {\n      return;\n    }\n    const document = node.ownerDocument;\n    const overlay = document.querySelector<HTMLDivElement>(selector);\n    overlay?.classList.add(className);\n  }, [node, className, selector]);\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 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":["PrimaryButton","RadixButton","cx","SecondaryButton","DestructiveButton","IconButton","RadixIconButton","Skeleton","RadixSkeleton","SelectTrigger","RadixSelect","SelectContent","SelectItem","Label","TextField","RadixTextField","TextFieldSlot","Badge","RadixBadge","DropdownMenuContent","RadixDropdownMenu","PrimaryMenuItem","DestructiveMenuItem","Avatar","RadixAvatar","DialogContent","RadixDialog","AlertDialogContent","RadixAlertDialog"]}

package/dist/cjs/lib/elements.d.cts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ButtonProps, IconButtonProps, SkeletonProps, Select, TextProps, TextField as TextField$1, BadgeProps, DropdownMenu, AvatarProps as AvatarProps$1, Dialog, AlertDialog } from '@radix-ui/themes';
+import { GetPropDefTypes, dialogContentPropDefs, buttonPropDefs, iconButtonPropDefs, textFieldRootPropDefs, selectTriggerPropDefs, badgePropDefs, dropdownMenuContentPropDefs, dropdownMenuItemPropDefs, avatarPropDefs, textPropDefs, skeletonPropDefs } from '@radix-ui/themes/props';
+
+declare const PrimaryButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SecondaryButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DestructiveButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Select.TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Select.ContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Select.ItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const Label: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLLabelElement>>;
+declare const TextField: React.ForwardRefExoticComponent<TextField$1.RootProps & React.RefAttributes<HTMLInputElement>>;
+declare const TextFieldSlot: React.ForwardRefExoticComponent<TextField$1.SlotProps & React.RefAttributes<HTMLDivElement>>;
+declare const PasswordField: React.ForwardRefExoticComponent<TextField$1.RootProps & React.RefAttributes<HTMLInputElement>>;
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenu.ContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const PrimaryMenuItem: React.ForwardRefExoticComponent<DropdownMenu.ItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const DestructiveMenuItem: React.ForwardRefExoticComponent<DropdownMenu.ItemProps & React.RefAttributes<HTMLDivElement>>;
+interface AvatarProps extends AvatarProps$1 {
+    dim?: boolean;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLImageElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Dialog.ContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialog.ContentProps & React.RefAttributes<HTMLDivElement>>;
+type OmitAsChild<T> = {
+    [K in keyof T]: T[K] extends undefined ? undefined : Omit<NonNullable<T[K]>, "asChild">;
+};
+type Elements = OmitAsChild<{
+    dialog?: GetPropDefTypes<typeof dialogContentPropDefs>;
+    primaryButton?: GetPropDefTypes<typeof buttonPropDefs>;
+    secondaryButton?: GetPropDefTypes<typeof buttonPropDefs>;
+    destructiveButton?: GetPropDefTypes<typeof buttonPropDefs>;
+    iconButton?: GetPropDefTypes<typeof iconButtonPropDefs>;
+    textfield?: GetPropDefTypes<typeof textFieldRootPropDefs>;
+    select?: GetPropDefTypes<typeof selectTriggerPropDefs>;
+    badge?: GetPropDefTypes<typeof badgePropDefs>;
+    dropdown?: GetPropDefTypes<typeof dropdownMenuContentPropDefs>;
+    primaryMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;
+    destructiveMenuItem?: GetPropDefTypes<typeof dropdownMenuItemPropDefs>;
+    avatar?: Omit<GetPropDefTypes<typeof avatarPropDefs>, "fallback">;
+    label?: GetPropDefTypes<typeof textPropDefs>;
+    skeleton?: GetPropDefTypes<typeof skeletonPropDefs>;
+}>;
+
+export { AlertDialogContent, Avatar, Badge, DestructiveButton, DestructiveMenuItem, DialogContent, DropdownMenuContent, type Elements, IconButton, Label, PasswordField, PrimaryButton, PrimaryMenuItem, SecondaryButton, SelectContent, SelectItem, SelectTrigger, Skeleton, TextField, TextFieldSlot };