@ngrok/mantle 0.73.5 → 0.74.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/accordion.d.ts +1 -1
  2. package/dist/agent.json +2 -1
  3. package/dist/alert-dialog.d.ts +6 -6
  4. package/dist/alert.d.ts +1 -1
  5. package/dist/alert.js.map +1 -1
  6. package/dist/anchor-CcTY5SIz.js.map +1 -1
  7. package/dist/badge.d.ts +1 -1
  8. package/dist/{button-BYZOBUgj.d.ts → button-BXZ_JTu_.d.ts} +4 -4
  9. package/dist/button.d.ts +1 -1
  10. package/dist/calendar.d.ts +1 -1
  11. package/dist/checkbox.d.ts +1 -1
  12. package/dist/code-block.d.ts +1 -1
  13. package/dist/code-block.js.map +1 -1
  14. package/dist/combobox.d.ts +1 -1
  15. package/dist/command.d.ts +5 -5
  16. package/dist/data-table.d.ts +9 -9
  17. package/dist/data-table.js.map +1 -1
  18. package/dist/dialog.d.ts +5 -5
  19. package/dist/{dropdown-menu-BgYk4L8o.d.ts → dropdown-menu-BqdyTFLu.d.ts} +2 -2
  20. package/dist/dropdown-menu.d.ts +1 -1
  21. package/dist/empty.d.ts +5 -5
  22. package/dist/field.js.map +1 -1
  23. package/dist/flag.d.ts +1 -1
  24. package/dist/hooks.js.map +1 -1
  25. package/dist/hover-card.d.ts +1 -1
  26. package/dist/icons.d.ts +6 -6
  27. package/dist/input.d.ts +3 -3
  28. package/dist/kbd.d.ts +1 -1
  29. package/dist/llms.txt +2 -1
  30. package/dist/main.d.ts +1 -1
  31. package/dist/multi-select.d.ts +2 -2
  32. package/dist/multi-select.js.map +1 -1
  33. package/dist/otp-input.js.map +1 -1
  34. package/dist/pagination.d.ts +1 -1
  35. package/dist/{primitive-D_-h74Kt.d.ts → primitive-FoWela9a.d.ts} +2 -2
  36. package/dist/progress.d.ts +4 -4
  37. package/dist/qr-code.d.ts +159 -0
  38. package/dist/qr-code.js +2 -0
  39. package/dist/qr-code.js.map +1 -0
  40. package/dist/radio-group.d.ts +3 -3
  41. package/dist/resolve-pre-rendered-props-C-vrNxH1.js.map +1 -1
  42. package/dist/separator-Bqjy77rG.js.map +1 -1
  43. package/dist/separator.d.ts +1 -1
  44. package/dist/sheet.d.ts +5 -5
  45. package/dist/skip-to-main-link.d.ts +1 -1
  46. package/dist/skip-to-main-link.js.map +1 -1
  47. package/dist/slider.d.ts +1 -1
  48. package/dist/split-button.d.ts +2 -2
  49. package/dist/tabs.d.ts +1 -1
  50. package/dist/theme-provider-MMwxHEfw.js.map +1 -1
  51. package/dist/theme.d.ts +4 -4
  52. package/dist/toast.d.ts +1 -1
  53. package/dist/tooltip.d.ts +3 -3
  54. package/dist/use-matches-media-query-CMSxHR9n.js.map +1 -1
  55. package/dist/use-prefers-reduced-motion-CWIoFA6W.js.map +1 -1
  56. package/package.json +30 -24
@@ -184,7 +184,7 @@ declare const Accordion: {
184
184
  ({
185
185
  className,
186
186
  ...props
187
- }: Omit<IconProps, "svg">): import("react/jsx-runtime").JSX.Element;
187
+ }: Omit<IconProps, "svg">): import("react").JSX.Element;
188
188
  displayName: string;
189
189
  };
190
190
  };
package/dist/agent.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ngrok/mantle",
3
- "version": "0.73.5",
3
+ "version": "0.74.0",
4
4
  "origin": "https://mantle.ngrok.com",
5
5
  "endpoints": {
6
6
  "docs": "https://mantle.ngrok.com/",
@@ -54,6 +54,7 @@
54
54
  "@ngrok/mantle/pagination",
55
55
  "@ngrok/mantle/popover",
56
56
  "@ngrok/mantle/progress",
57
+ "@ngrok/mantle/qr-code",
57
58
  "@ngrok/mantle/radio-group",
58
59
  "@ngrok/mantle/sandboxed-on-click",
59
60
  "@ngrok/mantle/select",
@@ -1,7 +1,7 @@
1
1
  import { t as SvgAttributes } from "./types-BvUzforF.js";
2
2
  import { t as DeepNonNullable } from "./deep-non-nullable-BxRoySYR.js";
3
3
  import { t as WithAsChild } from "./as-child-uN_018tj.js";
4
- import { t as Root$1 } from "./primitive-D_-h74Kt.js";
4
+ import { t as Root$1 } from "./primitive-FoWela9a.js";
5
5
  import { ComponentProps, ReactNode } from "react";
6
6
 
7
7
  //#region src/components/alert-dialog/alert-dialog.d.ts
@@ -54,7 +54,7 @@ type AlertDialogProps = ComponentProps<typeof Root$1> & {
54
54
  declare function Root({
55
55
  priority,
56
56
  ...props
57
- }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
57
+ }: AlertDialogProps): import("react").JSX.Element;
58
58
  declare namespace Root {
59
59
  var displayName: string;
60
60
  }
@@ -198,7 +198,7 @@ declare const AlertDialog: {
198
198
  * ```
199
199
  */
200
200
  readonly Action: import("react").ForwardRefExoticComponent<(Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
201
- appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
201
+ appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
202
202
  isLoading?: boolean | null | undefined;
203
203
  priority?: "danger" | "neutral" | "default" | null | undefined;
204
204
  } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -208,7 +208,7 @@ declare const AlertDialog: {
208
208
  asChild: true;
209
209
  type?: ComponentProps<"button">["type"];
210
210
  }, "ref"> | Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
211
- appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
211
+ appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
212
212
  isLoading?: boolean | null | undefined;
213
213
  priority?: "danger" | "neutral" | "default" | null | undefined;
214
214
  } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -293,7 +293,7 @@ declare const AlertDialog: {
293
293
  * ```
294
294
  */
295
295
  readonly Cancel: import("react").ForwardRefExoticComponent<(Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
296
- appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
296
+ appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
297
297
  isLoading?: boolean | null | undefined;
298
298
  priority?: "danger" | "neutral" | "default" | null | undefined;
299
299
  } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -303,7 +303,7 @@ declare const AlertDialog: {
303
303
  asChild: true;
304
304
  type?: ComponentProps<"button">["type"];
305
305
  }, "ref"> | Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
306
- appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
306
+ appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
307
307
  isLoading?: boolean | null | undefined;
308
308
  priority?: "danger" | "neutral" | "default" | null | undefined;
309
309
  } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
package/dist/alert.d.ts CHANGED
@@ -145,7 +145,7 @@ declare const Alert: {
145
145
  icon,
146
146
  style,
147
147
  ...props
148
- }: AlertDismissIconButtonProps): import("react/jsx-runtime").JSX.Element;
148
+ }: AlertDismissIconButtonProps): import("react").JSX.Element;
149
149
  displayName: string;
150
150
  };
151
151
  /**
package/dist/alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"alert.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { MegaphoneIcon } from \"@phosphor-icons/react/Megaphone\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"important\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nconst defaultDismissIcon = <XIcon />;\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger:\n\t\t\t\t\t\"border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a]:text-danger-700 [&_a]:underline\",\n\t\t\t\timportant:\n\t\t\t\t\t\"border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a]:text-important-700 [&_a]:underline\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a]:text-info-700 [&_a]:underline\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess:\n\t\t\t\t\t\"border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a]:text-success-700 [&_a]:underline\",\n\t\t\t\twarning:\n\t\t\t\t\t\"border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a]:text-warning-700 [&_a]:underline\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"important\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"alert\"\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\timportant: <MegaphoneIcon mirrored />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-icon\"\n\t\t\t\tclassName={cx(\"size-5\", className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tdata-slot=\"alert-content\"\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-title\"\n\t\t\t\tclassName={cx(\"font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-description\"\n\t\t\t\tclassName={cx(\"text-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissHoverBgColor = <T extends Priority = Priority>(priority: T) =>\n\t`color-mix(in oklab, var(--color-${priority}-500) 10%, transparent)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = defaultDismissIcon,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-slot=\"alert-dismiss-icon-button\"\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-hover-bg\": dismissHoverBgColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * Composition:\n * ```\n * Alert.Root\n * ├── Alert.Icon\n * └── Alert.Content\n * ├── Alert.Title\n * ├── Alert.Description\n * └── Alert.DismissIconButton\n * ```\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.DismissIconButton />\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"alert.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { MegaphoneIcon } from \"@phosphor-icons/react/Megaphone\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"important\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nconst defaultDismissIcon = <XIcon />;\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger:\n\t\t\t\t\t\"border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a]:text-danger-700 [&_a]:underline\",\n\t\t\t\timportant:\n\t\t\t\t\t\"border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a]:text-important-700 [&_a]:underline\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a]:text-info-700 [&_a]:underline\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess:\n\t\t\t\t\t\"border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a]:text-success-700 [&_a]:underline\",\n\t\t\t\twarning:\n\t\t\t\t\t\"border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a]:text-warning-700 [&_a]:underline\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"important\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"alert\"\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\timportant: <MegaphoneIcon mirrored />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-icon\"\n\t\t\t\tclassName={cx(\"size-5\", className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tdata-slot=\"alert-content\"\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-title\"\n\t\t\t\tclassName={cx(\"font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-description\"\n\t\t\t\tclassName={cx(\"text-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissHoverBgColor = <T extends Priority = Priority>(priority: T) =>\n\t`color-mix(in oklab, var(--color-${priority}-500) 10%, transparent)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = defaultDismissIcon,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-slot=\"alert-dismiss-icon-button\"\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-hover-bg\": dismissHoverBgColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * Composition:\n * ```\n * Alert.Root\n * ├── Alert.Icon\n * └── Alert.Content\n * ├── Alert.Title\n * ├── Alert.Description\n * └── Alert.DismissIconButton\n * ```\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDismissIconButton />\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.DismissIconButton />\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t * <Alert.Icon />\n\t * <Alert.Content>\n\t * <Alert.Title>Alert Title</Alert.Title>\n\t * <Alert.Description>Alert description text.</Alert.Description>\n\t * </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"gwBAmCA,MAAM,EAAe,EAAwC,IAAI,EAE3D,EAAqB,EAAC,EAAD,CAAQ,CAAA,EAEnC,SAAS,GAAkB,CAC1B,IAAM,EAAU,EAAW,CAAY,EAEvC,OADA,EAAU,EAAS,oDAAoD,EAChE,CACR,CAEA,MAAM,EAAgB,EACrB,yEACA,CACC,SAAU,CAKT,SAAU,CACT,OACC,+KACD,UACC,oMACD,KAAM,iKAEN,QACC,sLACD,QACC,qLACF,EAQA,WAAY,CACX,OAAQ,iDACR,QAAS,EACV,CACD,EACA,iBAAkB,CACjB,CACC,SAAU,SACV,WAAY,SACZ,UAAW,EACZ,EACA,CACC,SAAU,YACV,WAAY,SACZ,UAAW,EACZ,EACA,CACC,SAAU,OACV,WAAY,SACZ,UAAW,EACZ,EACA,CACC,SAAU,UACV,WAAY,SACZ,UAAW,EACZ,EACA,CACC,SAAU,UACV,WAAY,SACZ,UAAW,EACZ,CACD,CACD,CACD,EAqCM,EAAO,GACX,CAAE,aAAa,UAAW,YAAW,WAAU,GAAG,GAAS,IAAQ,CACnE,IAAM,EAA6B,OAAe,CAAE,UAAS,GAAI,CAAC,CAAQ,CAAC,EAE3E,OACC,EAAC,EAAa,SAAd,CAAuB,MAAO,WAC7B,EAAC,MAAD,CACM,MACL,YAAU,QACV,UAAW,EAAG,EAAc,CAAE,aAAY,UAAS,CAAC,EAAG,CAAS,EAChE,GAAI,CACJ,CAAA,CACqB,CAAA,CAEzB,CACD,EACA,EAAK,YAAc,QAYnB,MAAM,EAAe,CACpB,OAAQ,EAAC,EAAD,CAAc,CAAA,EACtB,UAAW,EAAC,EAAD,CAAe,SAAA,EAAU,CAAA,EACpC,KAAM,EAAC,EAAD,CAAW,CAAA,EAEjB,QAAS,EAAC,EAAD,CAAkB,CAAA,EAC3B,QAAS,EAAC,EAAD,CAAqB,CAAA,CAC/B,EAuBM,EAAO,GACX,CAAE,YAAW,MAAK,GAAG,GAAS,IAAQ,CAEtC,IAAM,EAAc,EADR,EACuB,CAAC,CAAC,UAErC,OACC,EAAC,EAAD,CACM,MACL,YAAU,aACV,UAAW,EAAG,SAAU,CAAS,EACjC,IAAK,GAAO,EACZ,GAAI,CACJ,CAAA,CAEH,CACD,EACA,EAAK,YAAc,YAqBnB,MAAM,EAAU,GACd,CAAE,YAAW,GAAG,GAAS,IACzB,EAAC,MAAD,CACM,MACL,YAAU,gBACV,UAAW,EAAG,6CAA8C,CAAS,EACrE,GAAI,CACJ,CAAA,CAEH,EACA,EAAQ,YAAc,eAuBtB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAIzC,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,YAAU,cACV,UAAW,EAAG,cAAe,CAAS,EACtC,GAAI,CACJ,CAAA,CAGJ,EACA,EAAM,YAAc,aAyBpB,MAAM,EAAc,GAClB,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAIzC,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,YAAU,oBACV,UAAW,EAAG,UAAW,CAAS,EAClC,GAAI,CACJ,CAAA,CAGJ,EACA,EAAY,YAAc,mBAE1B,MAAM,EAAmD,GACxD,eAAe,EAAS,OAEnB,EAAoD,GACzD,eAAe,EAAS,OAEnB,EAAsD,GAC3D,mCAAmC,EAAS,yBASvC,GAAqB,CAC1B,OAAO,KACP,OAAO,SACP,QAAQ,gBACR,aAAa,QACb,YACA,OAAO,EACP,QACA,GAAG,KAC+B,CAClC,IAAM,EAAM,EAAgB,EAC5B,OACC,EAAC,EAAD,CACa,aACN,OACC,QACD,OACN,YAAU,4BACV,qBAAA,GACA,UAAW,EACV,6BACA,oCACA,8GACA,CACD,EACM,OACN,MAAO,EAAe,CACrB,GAAG,EACH,6BAA8B,EAAiB,EAAI,QAAQ,EAC3D,mCAAoC,EAAkB,EAAI,QAAQ,EAClE,2BAA4B,EAAoB,EAAI,QAAQ,CAC7D,CAAC,EACD,GAAI,CACJ,CAAA,CAEH,EACA,EAAkB,YAAc,yBAgChC,MAAM,EAAQ,CAiBb,OAiBA,UAiBA,cAkBA,oBAiBA,OAiBA,OACD"}
@@ -1 +1 @@
1
- {"version":3,"file":"anchor-CcTY5SIz.js","names":[],"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * A styled hyperlink — a native `<a>` with mantle's link styling, focus\n * treatment, optional leading/trailing icon, and a safer default for the\n * `rel` attribute. Use for links that point _outside_ the current\n * application.\n *\n * **When to use**\n * - External URLs (docs, marketing pages, third-party sites).\n * - Links to files or `mailto:` / `tel:` destinations.\n *\n * **When not to use**\n * - Internal application routes — prefer the framework router's link\n * primitive ({@link https://reactrouter.com/en/main/components/link `react-router` `<Link>`})\n * so client-side navigation kicks in. You can keep mantle's styling by\n * composing: `<Anchor asChild><Link to=\"/foo\">…</Link></Anchor>`.\n * - For triggering an action — use a {@link https://mantle.ngrok.com/components/button Button}\n * instead. If it doesn't navigate, it's not a link.\n *\n * **Icons.** Pass `icon` (a phosphor or custom SVG) and optionally\n * `iconPlacement` (`\"start\"` default, or `\"end\"`) to render a small inline\n * icon — useful for \"external link\" or \"download\" affordances. Icons are\n * decorative; the link text must still describe the destination on its own.\n *\n * **Security.** When `target=\"_blank\"`, `rel` should include\n * `\"noopener noreferrer\"`. The `rel` prop accepts an array — duplicates\n * are de-duped and sorted, so it's safe to merge token sets.\n *\n * **Accessibility.** Link text must be self-describing — avoid \"click\n * here\" / \"read more\". For purely decorative icons, no extra labeling is\n * needed; for icon-only links, provide an `aria-label`.\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * import { Anchor } from \"@ngrok/mantle/anchor\";\n * import { BookIcon } from \"@phosphor-icons/react/Book\";\n * import { Link } from \"react-router\";\n *\n * // Basic external link.\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * // External link in a new tab with a leading icon.\n * <Anchor\n * href=\"https://ngrok.com/docs\"\n * target=\"_blank\"\n * rel={[\"noopener\", \"noreferrer\"]}\n * icon={<BookIcon />}\n * >\n * ngrok docs\n * </Anchor>\n *\n * // Compose Anchor styling onto a react-router Link for internal navigation.\n * <Anchor asChild>\n * <Link to=\"/dashboard\">Open dashboard</Link>\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\t\"data-slot\": \"anchor\",\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"mSAYA,MAAM,EAAoB,GACzB,EACC,kJACA,CACD,EAoFK,EAAS,GAEb,CAAE,UAAS,WAAU,YAAW,IAAK,EAAS,OAAM,gBAAgB,QAAS,GAAG,GAChF,IACI,CACJ,IAAM,EAAM,EAAW,CAAO,EACxB,EAAiB,CACtB,YAAa,SACb,UAAW,EAAiB,CAAS,EACrC,MACA,MACA,GAAG,CACJ,EAEA,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,CAAQ,EAC1C,EACC,EAA4B,CAAW,EACvC,0EACD,EACA,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,GAAI,WACR,EACA,EACA,CAAC,EACD,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,IAAkB,SAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,CAAO,CAAA,EAElD,EACA,GAAQ,IAAkB,OAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,CAAO,CAAA,CAElD,CAAA,CAAA,CACH,CACK,CAAA,CAER,CAEA,OACC,EAAC,IAAD,CAAG,GAAI,WAAP,CACE,GAAQ,IAAkB,SAAW,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,CAAO,CAAA,EACvF,EACA,GAAQ,IAAkB,OAAS,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,CAAO,CAAA,CACpF,GAEL,CACD,EACA,EAAO,YAAc,SAOrB,SAAS,EACR,EACC,CAWD,OAVI,MAAM,QAAQ,CAAG,EAEL,CAAC,GAAG,IADG,IAAI,CACC,CAAC,EAC1B,IAAK,GAAS,GAAM,KAAK,CAAC,EAC1B,OAAO,OAAO,EACd,SAAS,EACT,KAAK,GACK,GAAK,IAAA,GAGX,GAAK,KAAK,GAAK,IAAA,EACvB"}
1
+ {"version":3,"file":"anchor-CcTY5SIz.js","names":[],"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * A styled hyperlink — a native `<a>` with mantle's link styling, focus\n * treatment, optional leading/trailing icon, and a safer default for the\n * `rel` attribute. Use for links that point _outside_ the current\n * application.\n *\n * **When to use**\n * - External URLs (docs, marketing pages, third-party sites).\n * - Links to files or `mailto:` / `tel:` destinations.\n *\n * **When not to use**\n * - Internal application routes — prefer the framework router's link\n * primitive ({@link https://reactrouter.com/en/main/components/link `react-router` `<Link>`})\n * so client-side navigation kicks in. You can keep mantle's styling by\n * composing: `<Anchor asChild><Link to=\"/foo\">…</Link></Anchor>`.\n * - For triggering an action — use a {@link https://mantle.ngrok.com/components/button Button}\n * instead. If it doesn't navigate, it's not a link.\n *\n * **Icons.** Pass `icon` (a phosphor or custom SVG) and optionally\n * `iconPlacement` (`\"start\"` default, or `\"end\"`) to render a small inline\n * icon — useful for \"external link\" or \"download\" affordances. Icons are\n * decorative; the link text must still describe the destination on its own.\n *\n * **Security.** When `target=\"_blank\"`, `rel` should include\n * `\"noopener noreferrer\"`. The `rel` prop accepts an array — duplicates\n * are de-duped and sorted, so it's safe to merge token sets.\n *\n * **Accessibility.** Link text must be self-describing — avoid \"click\n * here\" / \"read more\". For purely decorative icons, no extra labeling is\n * needed; for icon-only links, provide an `aria-label`.\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * import { Anchor } from \"@ngrok/mantle/anchor\";\n * import { BookIcon } from \"@phosphor-icons/react/Book\";\n * import { Link } from \"react-router\";\n *\n * // Basic external link.\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * // External link in a new tab with a leading icon.\n * <Anchor\n * href=\"https://ngrok.com/docs\"\n * target=\"_blank\"\n * rel={[\"noopener\", \"noreferrer\"]}\n * icon={<BookIcon />}\n * >\n * ngrok docs\n * </Anchor>\n *\n * // Compose Anchor styling onto a react-router Link for internal navigation.\n * <Anchor asChild>\n * <Link to=\"/dashboard\">Open dashboard</Link>\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\t\"data-slot\": \"anchor\",\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"mSAYA,MAAM,EAAoB,GACzB,EACC,kJACA,CACD,EAoFK,EAAS,GAEb,CAAE,UAAS,WAAU,YAAW,IAAK,EAAS,OAAM,gBAAgB,QAAS,GAAG,GAChF,IACI,CACJ,IAAM,EAAM,EAAW,CAAO,EACxB,EAAiB,CACtB,YAAa,SACb,UAAW,EAAiB,CAAS,EACrC,MACA,MACA,GAAG,CACJ,EAEA,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,CAAQ,EAC1C,EACC,EAA4B,CAAW,EACvC,0EACD,EACA,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,GAAI,WACR,EACA,EACA,CAAC,EACD,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,IAAkB,SAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,CAAO,CAAA,EAElD,EACA,GAAQ,IAAkB,OAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,CAAO,CAAA,CAElD,CAAA,CAAA,CACH,CACK,CAAA,CAER,CAEA,OACC,EAAC,IAAD,CAAG,GAAI,WAAP,CACE,GAAQ,IAAkB,SAAW,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,CAAO,CAAA,EACvF,EACA,GAAQ,IAAkB,OAAS,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,CAAO,CAAA,CACpF,GAEL,CACD,EACA,EAAO,YAAc,SAOrB,SAAS,EACR,EACC,CAWD,OAVI,MAAM,QAAQ,CAAG,EAEL,CAAC,GAAG,IADG,IAAI,CACC,CAAC,CAAC,CAC3B,IAAK,GAAS,GAAM,KAAK,CAAC,CAAC,CAC3B,OAAO,OAAO,CAAC,CACf,SAAS,CAAC,CACV,KAAK,GACK,GAAK,IAAA,GAGX,GAAK,KAAK,GAAK,IAAA,EACvB"}
package/dist/badge.d.ts CHANGED
@@ -70,7 +70,7 @@ declare const Badge: {
70
70
  color,
71
71
  icon,
72
72
  ...props
73
- }: BadgeProps): import("react/jsx-runtime").JSX.Element;
73
+ }: BadgeProps): import("react").JSX.Element;
74
74
  displayName: string;
75
75
  };
76
76
  //#endregion
@@ -4,7 +4,7 @@ import { ComponentProps, ReactNode } from "react";
4
4
 
5
5
  //#region src/components/button/button.d.ts
6
6
  declare const buttonVariants: (props?: ({
7
- appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
7
+ appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
8
8
  isLoading?: boolean | null | undefined;
9
9
  priority?: "danger" | "neutral" | "default" | null | undefined;
10
10
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -88,7 +88,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
88
88
  * ```
89
89
  */
90
90
  declare const Button: import("react").ForwardRefExoticComponent<(Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
91
- appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
91
+ appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
92
92
  isLoading?: boolean | null | undefined;
93
93
  priority?: "danger" | "neutral" | "default" | null | undefined;
94
94
  } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -134,7 +134,7 @@ declare const Button: import("react").ForwardRefExoticComponent<(Omit<import("re
134
134
  */
135
135
  type?: ComponentProps<"button">["type"];
136
136
  }, "ref"> | Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<import("class-variance-authority").VariantProps<(props?: ({
137
- appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
137
+ appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
138
138
  isLoading?: boolean | null | undefined;
139
139
  priority?: "danger" | "neutral" | "default" | null | undefined;
140
140
  } & import("class-variance-authority/types").ClassProp) | undefined) => string>>> & {
@@ -169,4 +169,4 @@ declare const Button: import("react").ForwardRefExoticComponent<(Omit<import("re
169
169
  }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
170
170
  //#endregion
171
171
  export { ButtonProps as n, Button as t };
172
- //# sourceMappingURL=button-BYZOBUgj.d.ts.map
172
+ //# sourceMappingURL=button-BXZ_JTu_.d.ts.map
package/dist/button.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { n as IconButtonProps, t as IconButton } from "./icon-button-ntupABbM.js";
2
- import { n as ButtonProps, t as Button } from "./button-BYZOBUgj.js";
2
+ import { n as ButtonProps, t as Button } from "./button-BXZ_JTu_.js";
3
3
  import { n as ButtonGroupProps, t as ButtonGroup } from "./index-DBZ3eRsl.js";
4
4
  export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps };
@@ -33,7 +33,7 @@ declare function Calendar({
33
33
  classNames,
34
34
  showOutsideDays,
35
35
  ...props
36
- }: CalendarProps): import("react/jsx-runtime").JSX.Element;
36
+ }: CalendarProps): import("react").JSX.Element;
37
37
  declare namespace Calendar {
38
38
  var displayName: string;
39
39
  }
@@ -18,7 +18,7 @@ type CheckedState = boolean | "indeterminate";
18
18
  * </form>
19
19
  * ```
20
20
  */
21
- declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "type" | "checked"> & WithValidation & {
21
+ declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "checked" | "type"> & WithValidation & {
22
22
  /**
23
23
  * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
24
24
  */
@@ -78,7 +78,7 @@ declare function CodeBlockIconComponent({
78
78
  preset,
79
79
  svg: _svgProp,
80
80
  ...props
81
- }: CodeBlockIconProps): import("react/jsx-runtime").JSX.Element;
81
+ }: CodeBlockIconProps): import("react").JSX.Element;
82
82
  declare namespace CodeBlockIconComponent {
83
83
  var displayName: string;
84
84
  }