@cloudflare/kumo 2.5.0 → 2.5.2

package/dist/chunks/button-mnrxu6dud2x5js5b.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-mnrxu6dud2x5js5b.js","sources":["../../src/components/button/button.tsx"],"sourcesContent":["import React from \"react\";\nimport { ArrowsClockwise, type Icon } from \"@phosphor-icons/react\";\nimport { Loader } from \"../loader/loader\";\nimport { Tooltip } from \"../tooltip/tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */\nexport const KUMO_BUTTON_VARIANTS = {\n  shape: {\n    base: {\n      classes: \"\",\n      description: \"Default rectangular button shape\",\n    },\n    square: {\n      classes: \"items-center justify-center p-0\",\n      description: \"Square button for icon-only actions\",\n    },\n    circle: {\n      classes: \"items-center justify-center p-0 rounded-full\",\n      description: \"Circular button for icon-only actions\",\n    },\n  },\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small button for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small button for secondary actions\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default button size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large button for primary CTAs\",\n    },\n  },\n  compactSize: {\n    xs: { classes: \"size-3.5\" },\n    sm: { classes: \"size-6.5\" },\n    base: { classes: \"size-9\" },\n    lg: { classes: \"size-10\" },\n  },\n  variant: {\n    primary: {\n      classes:\n        \"bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50\",\n      description: \"High-emphasis button for primary actions\",\n    },\n    secondary: {\n      classes:\n        \"bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base\",\n      description: \"Default button style for most actions\",\n    },\n    ghost: {\n      classes: \"text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit\",\n      description: \"Minimal button with no background\",\n    },\n    destructive: {\n      classes: \"bg-kumo-danger !text-white hover:bg-kumo-danger/70\",\n      description: \"Danger button for destructive actions like delete\",\n    },\n    \"secondary-destructive\": {\n      classes:\n        \"bg-kumo-base !text-kumo-danger ring not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base\",\n      description:\n        \"Secondary button with destructive text for less prominent dangerous actions\",\n    },\n    outline: {\n      classes: \"bg-transparent text-kumo-default ring ring-kumo-hairline\",\n      description: \"Bordered button with transparent background\",\n    },\n  },\n} as const;\n\nexport const KUMO_BUTTON_DEFAULT_VARIANTS = {\n  shape: \"base\",\n  size: \"base\",\n  variant: \"secondary\",\n} as const;\n\n// Derived types from KUMO_BUTTON_VARIANTS\nexport type KumoButtonShape = keyof typeof KUMO_BUTTON_VARIANTS.shape;\nexport type KumoButtonSize = keyof typeof KUMO_BUTTON_VARIANTS.size;\nexport type KumoButtonVariant = keyof typeof KUMO_BUTTON_VARIANTS.variant;\n\nexport interface KumoButtonVariantsProps {\n  /**\n   * Button shape.\n   * - `\"base\"` — Default rectangular button\n   * - `\"square\"` — Square button for icon-only actions\n   * - `\"circle\"` — Circular button for icon-only actions\n   * @default \"base\"\n   */\n  shape?: KumoButtonShape;\n  /**\n   * Button size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary actions\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for primary CTAs\n   * @default \"base\"\n   */\n  size?: KumoButtonSize;\n  /**\n   * Visual style of the button.\n   * - `\"primary\"` — High-emphasis, brand-colored for primary actions\n   * - `\"secondary\"` — Default style with border for most actions\n   * - `\"ghost\"` — Minimal, no background for tertiary actions\n   * - `\"destructive\"` — Danger button for destructive actions\n   * - `\"secondary-destructive\"` — Secondary style with destructive text\n   * - `\"outline\"` — Bordered with transparent background\n   * @default \"secondary\"\n   */\n  variant?: KumoButtonVariant;\n}\n\nexport function buttonVariants({\n  variant = KUMO_BUTTON_DEFAULT_VARIANTS.variant,\n  size = KUMO_BUTTON_DEFAULT_VARIANTS.size,\n  shape = KUMO_BUTTON_DEFAULT_VARIANTS.shape,\n}: KumoButtonVariantsProps = {}) {\n  const isCompactShape = shape === \"square\" || shape === \"circle\";\n\n  return cn(\n    // Base styles\n    \"group flex w-max shrink-0 items-center font-medium select-none\",\n    \"border-0 shadow-xs\",\n    \"focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n    \"cursor-pointer\",\n    // Disabled state\n    \"disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n    // Apply variant, size, shape styles from KUMO_BUTTON_VARIANTS\n    resolveVariant(\n      KUMO_BUTTON_VARIANTS.variant,\n      variant,\n      KUMO_BUTTON_DEFAULT_VARIANTS.variant,\n    ).classes,\n    resolveVariant(\n      KUMO_BUTTON_VARIANTS.size,\n      size,\n      KUMO_BUTTON_DEFAULT_VARIANTS.size,\n    ).classes,\n    resolveVariant(\n      KUMO_BUTTON_VARIANTS.shape,\n      shape,\n      KUMO_BUTTON_DEFAULT_VARIANTS.shape,\n    ).classes,\n    isCompactShape &&\n      resolveVariant(\n        KUMO_BUTTON_VARIANTS.compactSize,\n        size,\n        KUMO_BUTTON_DEFAULT_VARIANTS.size,\n      ).classes,\n  );\n}\n\n// Normalize icon prop to support both React elements and component types\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n  if (!IconComponent) return null;\n  if (React.isValidElement(IconComponent)) return IconComponent;\n  const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n  return <Comp />;\n};\n\n/**\n * Button component props.\n *\n * Uses a discriminated union on `shape` so that icon-only buttons\n * (`shape=\"square\"` or `shape=\"circle\"`) require an `aria-label`.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n * <Button variant=\"destructive\" loading>Deleting...</Button>\n * ```\n */\ntype ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  /** Content rendered inside the button. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n  icon?: Icon | React.ReactNode;\n  /** Shows a loading spinner and disables interaction. */\n  loading?: boolean;\n  /** When set, wraps the button in a Tooltip with this content. */\n  title?: React.ReactNode;\n};\n\ntype ButtonWithTextProps = ButtonBaseProps & {\n  shape?: \"base\";\n  size?: KumoButtonSize;\n  variant?: KumoButtonVariant;\n};\n\ntype IconOnlyButtonProps = ButtonBaseProps & {\n  shape: \"square\" | \"circle\";\n  size?: KumoButtonSize;\n  variant?: KumoButtonVariant;\n  /** Required for icon-only buttons to provide accessible label for screen readers */\n  \"aria-label\": string;\n};\n\nexport type ButtonProps = ButtonWithTextProps | IconOnlyButtonProps;\n\n/**\n * LinkButton component props — renders an anchor styled as a button.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/docs\" variant=\"ghost\" icon={BookIcon}>Docs</LinkButton>\n * <LinkButton href=\"https://example.com\" external>Visit Site</LinkButton>\n * ```\n */\nexport type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n  KumoButtonVariantsProps & {\n    /** Content rendered inside the link button. */\n    children?: React.ReactNode;\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n    /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n    icon?: Icon | React.ReactNode;\n    /** When `true`, opens in a new tab with `rel=\"noopener noreferrer\"`. */\n    external?: boolean;\n    linksExternal?: boolean;\n  };\n\n/**\n * Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" icon={PlusIcon}>Create Worker</Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      className,\n      disabled,\n      loading,\n      shape = \"base\",\n      size = \"base\",\n      variant = \"secondary\",\n      icon: IconComponent,\n      title,\n      ...props\n    },\n    ref,\n  ) => {\n    const { type, ...restProps } = props;\n    const button = (\n      <button\n        ref={ref}\n        data-kumo-component=\"Button\"\n        className={cn(\n          buttonVariants({ variant, size, shape }),\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        disabled={loading || disabled}\n        type={type ?? \"button\"}\n        {...restProps}\n      >\n        {loading ? (\n          <Loader size={size === \"lg\" ? 16 : 14} />\n        ) : (\n          renderIconNode(IconComponent)\n        )}\n        {children != null && <span className=\"contents\">{children}</span>}\n      </button>\n    );\n\n    if (title) {\n      return <Tooltip content={title} render={button} />;\n    }\n\n    return button;\n  },\n);\n\nButton.displayName = \"Button\";\n\n/**\n * Square button with a rotating arrows icon, used to trigger data refresh actions.\n *\n * @example\n * ```tsx\n * <RefreshButton loading={isRefreshing} onClick={refresh} />\n * ```\n */\nexport const RefreshButton = ({\n  \"aria-label\": ariaLabel = \"Refresh\",\n  loading,\n  ...props\n}: ButtonProps) => (\n  <Button shape=\"square\" aria-label={ariaLabel} {...props}>\n    <ArrowsClockwise\n      className={cn({\n        \"animate-refresh\": loading,\n        \"size-4.5\": props.size === \"base\" || !props.size,\n        \"size-4\": props.size === \"sm\",\n        \"size-5\": props.size === \"lg\",\n      })}\n    />\n  </Button>\n);\n\n/**\n * Anchor element styled as a button. Integrates with `LinkProvider` for framework routing.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/settings\" variant=\"ghost\">Settings</LinkButton>\n * ```\n */\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      children,\n      className,\n      external,\n      href,\n      shape = \"base\",\n      size = \"base\",\n      variant = \"ghost\",\n      icon: IconComponent,\n      // linksExternal = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const LinkComponent = useLinkComponent();\n    const externalProps = external\n      ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n      : {};\n\n    return (\n      <LinkComponent\n        ref={ref}\n        data-kumo-component=\"LinkButton\"\n        className={cn(\n          buttonVariants({ variant, size, shape }),\n          \"flex items-center no-underline!\",\n          className,\n        )}\n        href={href}\n        to={typeof href === \"string\" ? href : undefined}\n        {...externalProps}\n        {...props}\n      >\n        {renderIconNode(IconComponent)}\n        {children}\n      </LinkComponent>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n"],"names":["KUMO_BUTTON_VARIANTS","KUMO_BUTTON_DEFAULT_VARIANTS","buttonVariants","variant","size","shape","isCompactShape","cn","resolveVariant","renderIconNode","IconComponent","React","Button","children","className","disabled","loading","title","props","ref","type","restProps","button","jsxs","jsx","Loader","Tooltip","RefreshButton","ariaLabel","ArrowsClockwise","LinkButton","external","href","LinkComponent","useLinkComponent","externalProps"],"mappings":"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"}

package/dist/chunks/dialog-my9fioafdstq50mi.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-my9fioafdstq50mi.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { AlertDialog as AlertDialogBase } from \"@base-ui/react/alert-dialog\";\nimport { LayerCard } from \"../layer-card\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const KUMO_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"sm:min-w-96\",\n      description: \"Default dialog width\",\n    },\n    sm: {\n      classes: \"min-w-72\",\n      description: \"Small dialog for simple confirmations\",\n    },\n    lg: {\n      classes: \"min-w-[32rem]\",\n      description: \"Large dialog for complex content\",\n    },\n    xl: {\n      classes: \"min-w-[48rem]\",\n      description: \"Extra large dialog for detailed views\",\n    },\n  },\n  role: {\n    dialog: {\n      classes: \"\",\n      description: \"Standard dialog for general-purpose modals\",\n    },\n    alertdialog: {\n      classes: \"\",\n      description:\n        \"Alert dialog for confirmation flows requiring explicit user acknowledgment\",\n    },\n  },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n  role: \"dialog\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n  dimensions: {\n    sm: {\n      width: 350,\n      titleSize: 20,\n      descSize: 16,\n      padding: 16,\n      gap: 8,\n      buttonSize: \"sm\",\n    },\n    base: {\n      width: 384,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    lg: {\n      width: 512,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    xl: {\n      width: 768,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n  },\n  baseTokens: {\n    background: \"color-surface\",\n    text: \"text-color-surface\",\n    borderRadius: 12,\n    shadow: \"shadow-m\",\n  },\n  backdrop: {\n    background: \"color-surface-secondary\",\n    opacity: 0.8,\n  },\n  header: {\n    title: { fontWeight: 600, color: \"text-color-surface\" },\n    closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n  },\n  description: {\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  buttons: {\n    primary: { background: \"color-primary\", text: \"white\" },\n    secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n  },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\nexport type KumoDialogRole = keyof typeof KUMO_DIALOG_VARIANTS.role;\n\nexport interface KumoDialogVariantsProps {\n  /**\n   * Dialog width.\n   * - `\"sm\"` — Small (min 288px) for simple confirmations\n   * - `\"base\"` — Default (min 384px)\n   * - `\"lg\"` — Large (min 512px) for complex content\n   * - `\"xl\"` — Extra large (min 768px) for detailed views\n   * @default \"base\"\n   */\n  size?: KumoDialogSize;\n}\n\n// ============================================================================\n// Dialog Role Context\n// ============================================================================\n\nconst DialogRoleContext = createContext<KumoDialogRole>(\"dialog\");\n\nfunction useDialogRole() {\n  return useContext(DialogRoleContext);\n}\n\nexport function dialogVariants({\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n    // Apply size from KUMO_DIALOG_VARIANTS\n    resolveVariant(KUMO_DIALOG_VARIANTS.size, size, KUMO_DIALOG_DEFAULT_VARIANTS.size).classes,\n  );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Confirm Action</Dialog.Title>\n *     <Dialog.Description>Are you sure?</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nexport type DialogProps = KumoDialogVariantsProps & {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Dialog content (typically Title, Description, Close, and action buttons). */\n  children: ReactNode;\n  /** Inline styles. */\n  style?: CSSProperties;\n  /**\n   * Container element for the portal. Use this to render the dialog inside\n   * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n   * @default document.body (or KumoPortalProvider container if set)\n   */\n  container?: PortalContainer;\n};\n\n/**\n * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Delete Item</Dialog.Title>\n *     <Dialog.Description>This action cannot be undone.</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n *\n * @example Alert Dialog for destructive actions\n * ```tsx\n * <Dialog.Root role=\"alertdialog\">\n *   <Dialog.Trigger render={(p) => <Button variant=\"destructive\" {...p}>Delete Project</Button>} />\n *   <Dialog className=\"p-8\">\n *     <Dialog.Title>Delete Project?</Dialog.Title>\n *     <Dialog.Description>This action cannot be undone.</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button variant=\"secondary\" {...p}>Cancel</Button>} />\n *     <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n  container: containerProp,\n}: DialogProps) {\n  const role = useDialogRole();\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n\n  const BasePortal =\n    role === \"alertdialog\" ? AlertDialogBase.Portal : DialogBase.Portal;\n  const BaseBackdrop =\n    role === \"alertdialog\" ? AlertDialogBase.Backdrop : DialogBase.Backdrop;\n  const BasePopup =\n    role === \"alertdialog\" ? AlertDialogBase.Popup : DialogBase.Popup;\n\n  return (\n    <BasePortal container={container}>\n      <BaseBackdrop className=\"fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <LayerCard\n        render={<BasePopup />}\n        className={cn(dialogVariants({ size }), className)}\n        style={\n          {\n            transitionProperty: \"scale, opacity\",\n            transitionTimingFunction:\n              \"var(--default-transition-timing-function)\",\n            \"--tw-shadow\":\n              \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </LayerCard>\n    </BasePortal>\n  );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\ntype BaseAlertDialogRootProps = ComponentPropsWithoutRef<\n  typeof AlertDialogBase.Root\n>;\n\ntype StandardDialogRootProps = BaseDialogRootProps & {\n  /**\n   * The ARIA role for the dialog.\n   * - `\"dialog\"` — Standard dialog for general-purpose modals. Dismissible via outside click by default.\n   * - `\"alertdialog\"` — Alert dialog for destructive or confirmation flows. Not dismissible via outside click.\n   *\n   * Use `role=\"alertdialog\"` for:\n   * - Destructive actions (delete, discard, remove)\n   * - Confirmation dialogs requiring explicit user acknowledgment\n   * - Actions that cannot be undone\n   *\n   * @default \"dialog\"\n   */\n  role?: \"dialog\";\n};\n\ntype AlertDialogRootProps = BaseAlertDialogRootProps & {\n  role: \"alertdialog\";\n};\n\nexport type DialogRootProps = StandardDialogRootProps | AlertDialogRootProps;\n\nfunction DialogRoot(props: DialogRootProps) {\n  if (props.role === \"alertdialog\") {\n    const { children, role, ...rootProps } = props;\n\n    return (\n      <DialogRoleContext.Provider value={role}>\n        <AlertDialogBase.Root {...rootProps}>{children}</AlertDialogBase.Root>\n      </DialogRoleContext.Provider>\n    );\n  }\n\n  const {\n    children,\n    role = KUMO_DIALOG_DEFAULT_VARIANTS.role,\n    ...rootProps\n  } = props;\n\n  return (\n    <DialogRoleContext.Provider value={role}>\n      <DialogBase.Root {...rootProps}>{children}</DialogBase.Root>\n    </DialogRoleContext.Provider>\n  );\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Trigger\n>;\ntype BaseAlertDialogTriggerProps = ComponentPropsWithoutRef<\n  typeof AlertDialogBase.Trigger\n>;\n\nexport type DialogTriggerProps =\n  | BaseDialogTriggerProps\n  | BaseAlertDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n  const role = useDialogRole();\n\n  if (role === \"alertdialog\") {\n    return (\n      <AlertDialogBase.Trigger\n        data-kumo-component=\"Dialog\"\n        data-kumo-part=\"trigger\"\n        {...(props as BaseAlertDialogTriggerProps)}\n      >\n        {children}\n      </AlertDialogBase.Trigger>\n    );\n  }\n\n  return (\n    <DialogBase.Trigger\n      data-kumo-component=\"Dialog\"\n      data-kumo-part=\"trigger\"\n      {...props}\n    >\n      {children}\n    </DialogBase.Trigger>\n  );\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  const role = useDialogRole();\n  const BaseTitle =\n    role === \"alertdialog\" ? AlertDialogBase.Title : DialogBase.Title;\n  return <BaseTitle className={className} {...props} />;\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  const role = useDialogRole();\n  const BaseDescription =\n    role === \"alertdialog\"\n      ? AlertDialogBase.Description\n      : DialogBase.Description;\n  return <BaseDescription className={className} {...props} />;\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n  const role = useDialogRole();\n  const BaseClose =\n    role === \"alertdialog\" ? AlertDialogBase.Close : DialogBase.Close;\n  return (\n    <BaseClose data-kumo-component=\"Dialog\" data-kumo-part=\"close\" {...props}>\n      {children}\n    </BaseClose>\n  );\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n});\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","DialogRoleContext","createContext","useDialogRole","useContext","dialogVariants","size","cn","resolveVariant","DialogContent","className","children","style","containerProp","role","contextContainer","usePortalContainer","jsxs","AlertDialogBase.Portal","DialogBase.Portal","jsx","AlertDialogBase.Backdrop","DialogBase.Backdrop","LayerCard","AlertDialogBase.Popup","DialogBase.Popup","DialogRoot","props","rootProps","AlertDialogBase.Root","DialogBase.Root","DialogTrigger","AlertDialogBase.Trigger","DialogBase.Trigger","DialogTitle","BaseTitle","AlertDialogBase.Title","DialogBase.Title","DialogDescription","BaseDescription","AlertDialogBase.Description","DialogBase.Description","DialogClose","BaseClose","AlertDialogBase.Close","DialogBase.Close","Dialog"],"mappings":"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"}