@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { type VisualElementSize } from '../../utils/componentSizes.js';
+type AvatarSize = VisualElementSize | 'lg' | 'xl';
+type AvatarShape = 'circle' | 'square';
+interface AvatarProps {
+    /** Outer box size: xxs=12px, xs=16px, sm=20px, md=24px, lg=36px, xl=48px. */
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    /** Show a small notification dot in the top-right corner. */
+    badge?: boolean;
+    /** Wrap the avatar in a tooltip with this title. */
+    tooltip?: string;
+    /** Extra classes on the avatar box. Can override size/text/color via `twMerge`. */
+    className?: string;
+    /** Text used for the initial and, unless `color` is set, the color hash. */
+    label: string;
+    /** Renders an image instead of the initial when present. */
+    imageUrl?: string;
+    /** Overrides the color-from-string hash with an explicit gradient start color. */
+    color?: string;
+    /** Rendered instead of the initial when `label` is empty. */
+    fallbackIcon?: ReactNode;
+    /** Highlighted brand-fill state (e.g. the current user's own entry). */
+    active?: boolean;
+}
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Avatar };
+export type { AvatarProps, AvatarSize };

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,47 @@
+import { cn } from "../../utils/cn.js";
+import { VISUAL_ELEMENT_SIZES } from "../../utils/componentSizes.js";
+import { getColorByString } from "../../utils/get-color-by-string.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { forwardRef } from "react";
+import { sanitizeUrl } from "@braintree/sanitize-url";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/Avatar/Avatar.tsx
+var BOX_SIZE = {
+	xxs: VISUAL_ELEMENT_SIZES.xxs.className,
+	xs: VISUAL_ELEMENT_SIZES.xs.className,
+	sm: VISUAL_ELEMENT_SIZES.sm.className,
+	md: VISUAL_ELEMENT_SIZES.md.className,
+	lg: "size-9",
+	xl: "size-12"
+};
+var TEXT_SIZE = {
+	xxs: "text-[0.625rem] leading-none",
+	xs: "text-xxs",
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-lg",
+	xl: "text-xl"
+};
+var Avatar = forwardRef(({ size = "md", shape = "square", badge, tooltip, className, label, imageUrl, color, fallbackIcon, active }, ref) => {
+	const startColor = color ?? getColorByString(label);
+	const rounding = shape === "circle" ? "rounded-full" : "rounded-sm";
+	const inner = /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative inline-flex shrink-0 cursor-default items-center justify-center text-center font-medium uppercase text-white/90 transition-all", rounding, BOX_SIZE[size], TEXT_SIZE[size], active && "bg-brand", className),
+		style: active ? void 0 : { backgroundImage: `linear-gradient(to bottom right, ${startColor}, #aaaaaa)` },
+		children: [imageUrl ? /* @__PURE__ */ jsx("div", {
+			className: cn("absolute inset-0 size-full bg-cover bg-center", rounding),
+			style: { backgroundImage: `url(${sanitizeUrl(imageUrl)})` }
+		}) : label ? /* @__PURE__ */ jsx("span", { children: label.charAt(0) }) : fallbackIcon ?? null, badge && /* @__PURE__ */ jsx("div", { className: cn("absolute rounded-full border-current bg-error-strong outline-transparent", size === "xxs" ? "-right-0.5 -top-0.5 size-1.5 border" : "-right-1 -top-1 size-3 border-2") })]
+	});
+	if (tooltip) return /* @__PURE__ */ jsx(Tooltip, {
+		title: tooltip,
+		children: inner
+	});
+	return inner;
+});
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { cn } from '../../utils/cn';\nimport {\n  VISUAL_ELEMENT_SIZES,\n  type VisualElementSize,\n} from '../../utils/componentSizes';\nimport { getColorByString } from '../../utils/get-color-by-string';\nimport { Tooltip } from '../Tooltip';\n\ntype AvatarSize = VisualElementSize | 'lg' | 'xl';\ntype AvatarShape = 'circle' | 'square';\n\ninterface AvatarProps {\n  /** Outer box size: xxs=12px, xs=16px, sm=20px, md=24px, lg=36px, xl=48px. */\n  size?: AvatarSize;\n  shape?: AvatarShape;\n  /** Show a small notification dot in the top-right corner. */\n  badge?: boolean;\n  /** Wrap the avatar in a tooltip with this title. */\n  tooltip?: string;\n  /** Extra classes on the avatar box. Can override size/text/color via `twMerge`. */\n  className?: string;\n  /** Text used for the initial and, unless `color` is set, the color hash. */\n  label: string;\n  /** Renders an image instead of the initial when present. */\n  imageUrl?: string;\n  /** Overrides the color-from-string hash with an explicit gradient start color. */\n  color?: string;\n  /** Rendered instead of the initial when `label` is empty. */\n  fallbackIcon?: ReactNode;\n  /** Highlighted brand-fill state (e.g. the current user's own entry). */\n  active?: boolean;\n}\n\n// The shared tiers use the visual-element scale. Identity-specific lg/xl tiers\n// remain larger so existing Avatar presentations retain their geometry.\nconst BOX_SIZE: Record<AvatarSize, string> = {\n  xxs: VISUAL_ELEMENT_SIZES.xxs.className,\n  xs: VISUAL_ELEMENT_SIZES.xs.className,\n  sm: VISUAL_ELEMENT_SIZES.sm.className,\n  md: VISUAL_ELEMENT_SIZES.md.className,\n  lg: 'size-9',\n  xl: 'size-12',\n};\n\nconst TEXT_SIZE: Record<AvatarSize, string> = {\n  xxs: 'text-[0.625rem] leading-none',\n  xs: 'text-xxs',\n  sm: 'text-xs',\n  md: 'text-sm',\n  lg: 'text-lg',\n  xl: 'text-xl',\n};\n\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      size = 'md',\n      shape = 'square',\n      badge,\n      tooltip,\n      className,\n      label,\n      imageUrl,\n      color,\n      fallbackIcon,\n      active,\n    },\n    ref\n  ) => {\n    const startColor = color ?? getColorByString(label);\n    const rounding = shape === 'circle' ? 'rounded-full' : 'rounded-sm';\n\n    const inner = (\n      // The box is intentionally not `overflow-hidden` so the badge dot can\n      // overflow the top-right corner. The image child clips itself instead.\n      <div\n        ref={ref}\n        className={cn(\n          'relative inline-flex shrink-0 cursor-default items-center justify-center text-center font-medium uppercase text-white/90 transition-all',\n          rounding,\n          BOX_SIZE[size],\n          TEXT_SIZE[size],\n          active && 'bg-brand',\n          className\n        )}\n        style={\n          active\n            ? undefined\n            : {\n                backgroundImage: `linear-gradient(to bottom right, ${startColor}, #aaaaaa)`,\n              }\n        }\n      >\n        {imageUrl ? (\n          <div\n            className={cn(\n              'absolute inset-0 size-full bg-cover bg-center',\n              rounding\n            )}\n            style={{ backgroundImage: `url(${sanitizeUrl(imageUrl)})` }}\n          />\n        ) : label ? (\n          <span>{label.charAt(0)}</span>\n        ) : (\n          (fallbackIcon ?? null)\n        )}\n\n        {badge && (\n          <div\n            className={cn(\n              'absolute rounded-full border-current bg-error-strong outline-transparent',\n              size === 'xxs'\n                ? '-right-0.5 -top-0.5 size-1.5 border'\n                : '-right-1 -top-1 size-3 border-2'\n            )}\n          />\n        )}\n      </div>\n    );\n\n    if (tooltip) {\n      return <Tooltip title={tooltip}>{inner}</Tooltip>;\n    }\n\n    return inner;\n  }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar };\nexport type { AvatarProps, AvatarSize };\n"],"mappings":";;;;;;;;AAwCA,IAAM,WAAuC;CAC3C,KAAK,qBAAqB,IAAI;CAC9B,IAAI,qBAAqB,GAAG;CAC5B,IAAI,qBAAqB,GAAG;CAC5B,IAAI,qBAAqB,GAAG;CAC5B,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,YAAwC;CAC5C,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,SAAS,YAEX,EACE,OAAO,MACP,QAAQ,UACR,OACA,SACA,WACA,OACA,UACA,OACA,cACA,UAEF,QACG;CACH,MAAM,aAAa,SAAS,iBAAiB,KAAK;CAClD,MAAM,WAAW,UAAU,WAAW,iBAAiB;CAEvD,MAAM,QAGJ,qBAAC,OAAD;EACO;EACL,WAAW,GACT,2IACA,UACA,SAAS,OACT,UAAU,OACV,UAAU,YACV,SACF;EACA,OACE,SACI,KAAA,IACA,EACE,iBAAiB,oCAAoC,WAAW,YAClE;EAfR,UAAA,CAkBG,WACC,oBAAC,OAAD;GACE,WAAW,GACT,iDACA,QACF;GACA,OAAO,EAAE,iBAAiB,OAAO,YAAY,QAAQ,EAAE,GAAG;EAC3D,CAAA,IACC,QACF,oBAAC,QAAD,EAAA,UAAO,MAAM,OAAO,CAAC,EAAQ,CAAA,IAE5B,gBAAgB,MAGlB,SACC,oBAAC,OAAD,EACE,WAAW,GACT,4EACA,SAAS,QACL,wCACA,iCACN,EACD,CAAA,CAEA;;CAGP,IAAI,SACF,OAAO,oBAAC,SAAD;EAAS,OAAO;EAAU,UAAA;CAAe,CAAA;CAGlD,OAAO;AACT,CACF;AAEA,OAAO,cAAc"}

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar.js';
+export type { AvatarProps, AvatarSize } from './Avatar.js';

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+import { Avatar } from "./Avatar.js";
+export { Avatar };

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+import type { IconComponent, IconWeight } from '../../utils/icon-types.js';
+import { type TextProps } from '../Text/index.js';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Badge style preset */
+    variant?: 'default' | 'manifestPreview';
+    rounded?: 'full' | 'none' | 'xs' | 'sm';
+    /** Badge color scheme */
+    color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'special' | 'plain';
+    /** Text-label height. */
+    size?: 'xxs' | 'xs' | 'sm' | 'md';
+    /** Left decorator icon */
+    leftDecorator?: IconComponent;
+    /** Right decorator icon */
+    rightDecorator?: IconComponent;
+    /** Phosphor weight used for decorator icons. */
+    iconWeight?: IconWeight;
+    /** Badge content */
+    children?: string | ReactElement<SVGSVGElement>;
+    /** Font weight of text content */
+    textWeight?: TextProps['weight'];
+}
+declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { Badge };
+export type { BadgeProps };

package/dist/components/Badge/Badge.js

@@ -0,0 +1,82 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/Badge/Badge.tsx
+/** Exact outer heights: xxs/xs=16px, sm=20px, md=24px. */
+var SIZE_BOX_CLASSES = {
+	xxs: "h-4 gap-space-1 px-space-1",
+	xs: "h-4 gap-space-1 px-space-1",
+	sm: "h-5 gap-space-1 px-space-1",
+	md: "h-6 gap-space-1 px-space-2"
+};
+var SIZE_TEXT_VARIANT = {
+	xxs: "xs",
+	xs: "xs",
+	sm: "sm",
+	md: "sm"
+};
+var SIZE_DEFAULT_WEIGHT = {
+	xxs: "normal",
+	xs: "medium",
+	sm: "medium",
+	md: "medium"
+};
+var SIZE_ICON_CLASSES = {
+	xxs: "size-3",
+	xs: "size-3",
+	sm: "size-3",
+	md: "size-4"
+};
+var Badge = forwardRef(({ variant = "default", color, size, rounded = "full", leftDecorator: LeftIcon, rightDecorator: RightIcon, iconWeight, className, children, textWeight, ...props }, ref) => {
+	const isString = typeof children === "string";
+	const isManifestPreview = variant === "manifestPreview";
+	const resolvedColor = color ?? (isManifestPreview ? "plain" : "secondary");
+	const resolvedSize = size ?? (isManifestPreview ? "sm" : "md");
+	const resolvedTextWeight = textWeight ?? SIZE_DEFAULT_WEIGHT[resolvedSize];
+	const baseStyles = cn("box-border inline-flex items-center justify-center border border-transparent", SIZE_BOX_CLASSES[resolvedSize], {
+		"rounded-xs": rounded === "xs" || rounded === "sm" || rounded === "none",
+		"rounded-full": rounded === "full",
+		border: resolvedColor === "plain"
+	});
+	const getColorStyles = () => {
+		switch (resolvedColor) {
+			case "primary": return "bg-brand-secondary text-brand-primary";
+			case "success": return "bg-success-secondary text-success-secondary";
+			case "error": return "bg-error-secondary text-error-secondary";
+			case "warning": return "bg-warning-secondary text-warning-secondary";
+			case "special": return "bg-ls-acid-50 text-ls-acid-700 dark:bg-ls-acid-200";
+			case "plain": return "bg-primary text-primary border-secondary";
+			default: return "bg-tertiary text-secondary";
+		}
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cn(baseStyles, getColorStyles(), isManifestPreview && "min-w-0 max-w-full overflow-hidden whitespace-nowrap [&>span]:truncate", isManifestPreview && color == null && "bg-transparent text-secondary", className),
+		...props,
+		children: [
+			LeftIcon && /* @__PURE__ */ jsx(LeftIcon, {
+				"aria-hidden": true,
+				className: cn(SIZE_ICON_CLASSES[resolvedSize], "flex-shrink-0"),
+				weight: iconWeight
+			}),
+			isString ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: SIZE_TEXT_VARIANT[resolvedSize],
+				weight: resolvedTextWeight,
+				className: "tracking-tight",
+				children
+			}) : children,
+			RightIcon && /* @__PURE__ */ jsx(RightIcon, {
+				"aria-hidden": true,
+				className: cn(SIZE_ICON_CLASSES[resolvedSize], "flex-shrink-0"),
+				weight: iconWeight
+			})
+		]
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport type { IconComponent, IconWeight } from '../../utils/icon-types';\nimport { Text, type TextProps } from '../Text';\n\n// Only allow string or SVG icon as children\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Badge style preset */\n  variant?: 'default' | 'manifestPreview';\n  rounded?: 'full' | 'none' | 'xs' | 'sm';\n  /** Badge color scheme */\n  color?:\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'error'\n    | 'warning'\n    | 'special'\n    | 'plain';\n  /** Text-label height. */\n  size?: 'xxs' | 'xs' | 'sm' | 'md';\n  /** Left decorator icon */\n  leftDecorator?: IconComponent;\n\n  /** Right decorator icon */\n  rightDecorator?: IconComponent;\n\n  /** Phosphor weight used for decorator icons. */\n  iconWeight?: IconWeight;\n\n  /** Badge content */\n  children?: string | ReactElement<SVGSVGElement>;\n\n  /** Font weight of text content */\n  textWeight?: TextProps['weight'];\n}\n\ntype BadgeSize = NonNullable<BadgeProps['size']>;\n\n/** Exact outer heights: xxs/xs=16px, sm=20px, md=24px. */\nconst SIZE_BOX_CLASSES: Record<BadgeSize, string> = {\n  xxs: 'h-4 gap-space-1 px-space-1',\n  xs: 'h-4 gap-space-1 px-space-1',\n  sm: 'h-5 gap-space-1 px-space-1',\n  md: 'h-6 gap-space-1 px-space-2',\n};\n\nconst SIZE_TEXT_VARIANT: Record<BadgeSize, 'xs' | 'sm'> = {\n  xxs: 'xs',\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n};\n\nconst SIZE_DEFAULT_WEIGHT: Record<\n  BadgeSize,\n  NonNullable<TextProps['weight']>\n> = {\n  xxs: 'normal',\n  xs: 'medium',\n  sm: 'medium',\n  md: 'medium',\n};\n\nconst SIZE_ICON_CLASSES: Record<BadgeSize, string> = {\n  xxs: 'size-3',\n  xs: 'size-3',\n  sm: 'size-3',\n  md: 'size-4',\n};\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      variant = 'default',\n      color,\n      size,\n      rounded = 'full',\n      leftDecorator: LeftIcon,\n      rightDecorator: RightIcon,\n      iconWeight,\n      className,\n      children,\n      textWeight,\n      ...props\n    },\n    ref\n  ) => {\n    const isString = typeof children === 'string';\n    const isManifestPreview = variant === 'manifestPreview';\n    const resolvedColor = color ?? (isManifestPreview ? 'plain' : 'secondary');\n    const resolvedSize = size ?? (isManifestPreview ? 'sm' : 'md');\n    const resolvedTextWeight = textWeight ?? SIZE_DEFAULT_WEIGHT[resolvedSize];\n    const baseStyles = cn(\n      'box-border inline-flex items-center justify-center border border-transparent',\n      SIZE_BOX_CLASSES[resolvedSize],\n      {\n        // TODO: we're only going to have 2 variants for the rounded prop. need to remove/rename the rounded prop\n        'rounded-xs':\n          rounded === 'xs' || rounded === 'sm' || rounded === 'none',\n        'rounded-full': rounded === 'full',\n        border: resolvedColor === 'plain',\n      }\n    );\n\n    const getColorStyles = () => {\n      switch (resolvedColor) {\n        case 'primary':\n          return 'bg-brand-secondary text-brand-primary';\n        case 'success':\n          return 'bg-success-secondary text-success-secondary';\n        case 'error':\n          return 'bg-error-secondary text-error-secondary';\n        case 'warning':\n          return 'bg-warning-secondary text-warning-secondary';\n        case 'special':\n          return 'bg-ls-acid-50 text-ls-acid-700 dark:bg-ls-acid-200';\n        case 'plain':\n          return 'bg-primary text-primary border-secondary';\n        case 'secondary':\n        default:\n          return 'bg-tertiary text-secondary';\n      }\n    };\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          baseStyles,\n          getColorStyles(),\n          isManifestPreview &&\n            'min-w-0 max-w-full overflow-hidden whitespace-nowrap [&>span]:truncate',\n          isManifestPreview && color == null && 'bg-transparent text-secondary',\n          className\n        )}\n        {...props}\n      >\n        {LeftIcon && (\n          <LeftIcon\n            aria-hidden\n            className={cn(SIZE_ICON_CLASSES[resolvedSize], 'flex-shrink-0')}\n            weight={iconWeight}\n          />\n        )}\n        {isString ? (\n          <Text\n            as=\"span\"\n            variant={SIZE_TEXT_VARIANT[resolvedSize]}\n            weight={resolvedTextWeight}\n            className=\"tracking-tight\"\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n        {RightIcon && (\n          <RightIcon\n            aria-hidden\n            className={cn(SIZE_ICON_CLASSES[resolvedSize], 'flex-shrink-0')}\n            weight={iconWeight}\n          />\n        )}\n      </span>\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n\nexport { Badge };\nexport type { BadgeProps };\n"],"mappings":";;;;;;AA0CA,IAAM,mBAA8C;CAClD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,oBAAoD;CACxD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,sBAGF;CACF,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,oBAA+C;CACnD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,QAAQ,YAEV,EACE,UAAU,WACV,OACA,MACA,UAAU,QACV,eAAe,UACf,gBAAgB,WAChB,YACA,WACA,UACA,YACA,GAAG,SAEL,QACG;CACH,MAAM,WAAW,OAAO,aAAa;CACrC,MAAM,oBAAoB,YAAY;CACtC,MAAM,gBAAgB,UAAU,oBAAoB,UAAU;CAC9D,MAAM,eAAe,SAAS,oBAAoB,OAAO;CACzD,MAAM,qBAAqB,cAAc,oBAAoB;CAC7D,MAAM,aAAa,GACjB,gFACA,iBAAiB,eACjB;EAEE,cACE,YAAY,QAAQ,YAAY,QAAQ,YAAY;EACtD,gBAAgB,YAAY;EAC5B,QAAQ,kBAAkB;CAC5B,CACF;CAEA,MAAM,uBAAuB;EAC3B,QAAQ,eAAR;GACE,KAAK,WACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,SACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,SACH,OAAO;GAET,SACE,OAAO;EACX;CACF;CAEA,OACE,qBAAC,QAAD;EACO;EACL,WAAW,GACT,YACA,eAAe,GACf,qBACE,0EACF,qBAAqB,SAAS,QAAQ,iCACtC,SACF;EACA,GAAI;EAVN,UAAA;GAYG,YACC,oBAAC,UAAD;IACE,eAAA;IACA,WAAW,GAAG,kBAAkB,eAAe,eAAe;IAC9D,QAAQ;GACT,CAAA;GAEF,WACC,oBAAC,MAAD;IACE,IAAG;IACH,SAAS,kBAAkB;IAC3B,QAAQ;IACR,WAAU;IAET;GACG,CAAA,IAEN;GAED,aACC,oBAAC,WAAD;IACE,eAAA;IACA,WAAW,GAAG,kBAAkB,eAAe,eAAe;IAC9D,QAAQ;GACT,CAAA;EAEC;;AAEV,CACF;AAEA,MAAM,cAAc"}

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge.js';
+export type { BadgeProps } from './Badge.js';

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+import { Badge } from "./Badge.js";
+export { Badge };

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type BannerIntent = 'warning' | 'info' | 'success' | 'error' | 'neutral';
+export type BannerProps = {
+    title?: string;
+    children?: ReactNode;
+    dismissible?: boolean;
+    className?: string;
+    intent?: BannerIntent;
+    shadow?: boolean;
+    onDismiss?: () => void;
+    icon?: ReactNode;
+    action?: ReactNode;
+    flush?: boolean;
+};
+export declare const Banner: ({ title, children, dismissible, className, intent, shadow, onDismiss, icon, action, flush, }: BannerProps) => import("react").JSX.Element | null;

package/dist/components/Banner/Banner.js

@@ -0,0 +1,102 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { XIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { Icon } from "../Icon/Icon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr/CheckCircle";
+import { ExclamationMarkIcon } from "@phosphor-icons/react/dist/ssr/ExclamationMark";
+import { InfoIcon } from "@phosphor-icons/react/dist/ssr/Info";
+import { WarningIcon } from "@phosphor-icons/react/dist/ssr/Warning";
+//#region packages/components/src/components/Banner/Banner.tsx
+var Banner = ({ title, children, dismissible = false, className, intent = "warning", shadow = false, onDismiss, icon, action, flush = false }) => {
+	const [show, setShow] = useState(true);
+	const renderIcon = () => {
+		if (icon !== void 0) return icon;
+		switch (intent) {
+			case "warning": return /* @__PURE__ */ jsx(Icon, {
+				icon: WarningIcon,
+				weight: "fill",
+				size: "md",
+				className: "text-warning-secondary"
+			});
+			case "info": return /* @__PURE__ */ jsx(Icon, {
+				icon: InfoIcon,
+				weight: "fill",
+				size: "md",
+				className: "text-brand-100 dark:text-brand-600"
+			});
+			case "success": return /* @__PURE__ */ jsx(Icon, {
+				icon: CheckCircleIcon,
+				weight: "fill",
+				size: "md",
+				className: "text-success-secondary"
+			});
+			case "error": return /* @__PURE__ */ jsx(Icon, {
+				icon: ExclamationMarkIcon,
+				weight: "regular",
+				size: "md",
+				className: "text-error-secondary"
+			});
+			case "neutral": return /* @__PURE__ */ jsx(Icon, {
+				icon: InfoIcon,
+				weight: "fill",
+				size: "md",
+				className: "text-tertiary"
+			});
+			default: return null;
+		}
+	};
+	const titleElement = title == null ? null : /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		variant: "sm",
+		weight: "medium",
+		color: "primary",
+		className: cn("whitespace-normal break-words", children != null && "mr-space-2"),
+		children: title
+	});
+	const contentElement = children == null ? null : typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		variant: "sm",
+		weight: "normal",
+		color: "secondary",
+		className: "whitespace-normal break-words",
+		children
+	}) : children;
+	const iconElement = renderIcon();
+	const dismissButton = dismissible ? /* @__PURE__ */ jsx(IconButton, {
+		color: "secondary",
+		variant: "plain",
+		icon: XIcon,
+		label: "Close",
+		className: "shrink-0 self-center text-secondary hover:bg-transparent",
+		onClick: () => {
+			setShow(false);
+			onDismiss?.();
+		}
+	}) : null;
+	if (!show) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("m-0 flex items-center gap-space-2 border border-transparent px-space-4 py-space-3 text-sm", shadow && "shadow-lg", intent === "warning" && "bg-warning", intent === "info" && "bg-brand-subtle-gradient", intent === "success" && "bg-success", intent === "error" && "bg-error", intent === "neutral" && "bg-elevated", intent === "neutral" && !flush && "border-default", !flush && "rounded-md", className),
+		children: [
+			iconElement != null && /* @__PURE__ */ jsx("div", {
+				className: "mr-space-1 flex shrink-0 items-center",
+				children: iconElement
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [titleElement, contentElement]
+			}),
+			action ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center",
+				children: action
+			}) : null,
+			dismissButton
+		]
+	});
+};
+//#endregion
+export { Banner };
+
+//# sourceMappingURL=Banner.js.map

package/dist/components/Banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","names":[],"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';\nimport { ExclamationMarkIcon } from '@phosphor-icons/react/dist/ssr/ExclamationMark';\nimport { InfoIcon } from '@phosphor-icons/react/dist/ssr/Info';\nimport { WarningIcon } from '@phosphor-icons/react/dist/ssr/Warning';\n\nimport { XIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { Icon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { Text } from '../Text';\n\nexport type BannerIntent = 'warning' | 'info' | 'success' | 'error' | 'neutral';\n\nexport type BannerProps = {\n  title?: string;\n  children?: ReactNode;\n  dismissible?: boolean;\n  className?: string;\n  intent?: BannerIntent;\n  shadow?: boolean;\n  onDismiss?: () => void;\n  icon?: ReactNode;\n  action?: ReactNode;\n  flush?: boolean;\n};\n\nexport const Banner = ({\n  title,\n  children,\n  dismissible = false,\n  className,\n  intent = 'warning',\n  shadow = false,\n  onDismiss,\n  icon,\n  action,\n  flush = false,\n}: BannerProps) => {\n  const [show, setShow] = useState(true);\n\n  const renderIcon = () => {\n    if (icon !== undefined) {\n      return icon;\n    }\n    switch (intent) {\n      case 'warning':\n        return (\n          <Icon\n            icon={WarningIcon}\n            weight=\"fill\"\n            size=\"md\"\n            className=\"text-warning-secondary\"\n          />\n        );\n      case 'info':\n        return (\n          <Icon\n            icon={InfoIcon}\n            weight=\"fill\"\n            size=\"md\"\n            className=\"text-brand-100 dark:text-brand-600\"\n          />\n        );\n      case 'success':\n        return (\n          <Icon\n            icon={CheckCircleIcon}\n            weight=\"fill\"\n            size=\"md\"\n            className=\"text-success-secondary\"\n          />\n        );\n      case 'error':\n        return (\n          <Icon\n            icon={ExclamationMarkIcon}\n            weight=\"regular\"\n            size=\"md\"\n            className=\"text-error-secondary\"\n          />\n        );\n      case 'neutral':\n        return (\n          <Icon\n            icon={InfoIcon}\n            weight=\"fill\"\n            size=\"md\"\n            className=\"text-tertiary\"\n          />\n        );\n      default:\n        return null;\n    }\n  };\n\n  const titleElement =\n    title == null ? null : (\n      <Text\n        as=\"span\"\n        variant=\"sm\"\n        weight=\"medium\"\n        color=\"primary\"\n        className={cn(\n          'whitespace-normal break-words',\n          children != null && 'mr-space-2'\n        )}\n      >\n        {title}\n      </Text>\n    );\n\n  const contentElement =\n    children == null ? null : typeof children === 'string' ? (\n      <Text\n        as=\"span\"\n        variant=\"sm\"\n        weight=\"normal\"\n        color=\"secondary\"\n        className=\"whitespace-normal break-words\"\n      >\n        {children}\n      </Text>\n    ) : (\n      children\n    );\n\n  const iconElement = renderIcon();\n\n  const dismissButton = dismissible ? (\n    <IconButton\n      color=\"secondary\"\n      variant=\"plain\"\n      icon={XIcon}\n      label=\"Close\"\n      className=\"shrink-0 self-center text-secondary hover:bg-transparent\"\n      onClick={() => {\n        setShow(false);\n        onDismiss?.();\n      }}\n    />\n  ) : null;\n\n  if (!show) return null;\n  return (\n    <div\n      className={cn(\n        'm-0 flex items-center gap-space-2 border border-transparent px-space-4 py-space-3 text-sm',\n        shadow && 'shadow-lg',\n        intent === 'warning' && 'bg-warning',\n        intent === 'info' && 'bg-brand-subtle-gradient',\n        intent === 'success' && 'bg-success',\n        intent === 'error' && 'bg-error',\n        intent === 'neutral' && 'bg-elevated',\n        intent === 'neutral' && !flush && 'border-default',\n        !flush && 'rounded-md',\n        className\n      )}\n    >\n      {iconElement != null && (\n        <div className=\"mr-space-1 flex shrink-0 items-center\">\n          {iconElement}\n        </div>\n      )}\n      <div className=\"min-w-0 flex-1\">\n        {titleElement}\n        {contentElement}\n      </div>\n      {action ? (\n        <div className=\"flex shrink-0 items-center\">{action}</div>\n      ) : null}\n      {dismissButton}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA6BA,IAAa,UAAU,EACrB,OACA,UACA,cAAc,OACd,WACA,SAAS,WACT,SAAS,OACT,WACA,MACA,QACA,QAAQ,YACS;CACjB,MAAM,CAAC,MAAM,WAAW,SAAS,IAAI;CAErC,MAAM,mBAAmB;EACvB,IAAI,SAAS,KAAA,GACX,OAAO;EAET,QAAQ,QAAR;GACE,KAAK,WACH,OACE,oBAAC,MAAD;IACE,MAAM;IACN,QAAO;IACP,MAAK;IACL,WAAU;GACX,CAAA;GAEL,KAAK,QACH,OACE,oBAAC,MAAD;IACE,MAAM;IACN,QAAO;IACP,MAAK;IACL,WAAU;GACX,CAAA;GAEL,KAAK,WACH,OACE,oBAAC,MAAD;IACE,MAAM;IACN,QAAO;IACP,MAAK;IACL,WAAU;GACX,CAAA;GAEL,KAAK,SACH,OACE,oBAAC,MAAD;IACE,MAAM;IACN,QAAO;IACP,MAAK;IACL,WAAU;GACX,CAAA;GAEL,KAAK,WACH,OACE,oBAAC,MAAD;IACE,MAAM;IACN,QAAO;IACP,MAAK;IACL,WAAU;GACX,CAAA;GAEL,SACE,OAAO;EACX;CACF;CAEA,MAAM,eACJ,SAAS,OAAO,OACd,oBAAC,MAAD;EACE,IAAG;EACH,SAAQ;EACR,QAAO;EACP,OAAM;EACN,WAAW,GACT,iCACA,YAAY,QAAQ,YACtB;EAEC,UAAA;CACG,CAAA;CAGV,MAAM,iBACJ,YAAY,OAAO,OAAO,OAAO,aAAa,WAC5C,oBAAC,MAAD;EACE,IAAG;EACH,SAAQ;EACR,QAAO;EACP,OAAM;EACN,WAAU;EAET;CACG,CAAA,IAEN;CAGJ,MAAM,cAAc,WAAW;CAE/B,MAAM,gBAAgB,cACpB,oBAAC,YAAD;EACE,OAAM;EACN,SAAQ;EACR,MAAM;EACN,OAAM;EACN,WAAU;EACV,eAAe;GACb,QAAQ,KAAK;GACb,YAAY;EACd;CACD,CAAA,IACC;CAEJ,IAAI,CAAC,MAAM,OAAO;CAClB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,6FACA,UAAU,aACV,WAAW,aAAa,cACxB,WAAW,UAAU,4BACrB,WAAW,aAAa,cACxB,WAAW,WAAW,YACtB,WAAW,aAAa,eACxB,WAAW,aAAa,CAAC,SAAS,kBAClC,CAAC,SAAS,cACV,SACF;EAZF,UAAA;GAcG,eAAe,QACd,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,cACA,cACE;;GACJ,SACC,oBAAC,OAAD;IAAK,WAAU;IAA8B,UAAA;GAAY,CAAA,IACvD;GACH;EACE;;AAET"}

package/dist/components/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner.js';
+export type { BannerIntent, BannerProps } from './Banner.js';

package/dist/components/Banner/index.js

@@ -0,0 +1,2 @@
+import { Banner } from "./Banner.js";
+export { Banner };

package/dist/components/BarChart/AnimatedBar.d.ts

@@ -0,0 +1,20 @@
+import type { FocusEvent, KeyboardEvent, PointerEvent } from 'react';
+import { type SpringValue } from '@react-spring/web';
+import type { BarChartInteractionBar, BarChartOrientation, BarChartRenderedBar } from './BarChart.types.js';
+type AnimatedBarProps = {
+    bar: BarChartRenderedBar;
+    orientation: BarChartOrientation;
+    animationProgress: SpringValue<number>;
+    animationStart: number;
+    animationEnd: number;
+    /** Naming the bar is what makes it a keyboard target. */
+    ariaLabel?: string;
+    isDimmed: boolean;
+    onPointerMove?: (bar: BarChartInteractionBar, event: PointerEvent<SVGPathElement>) => void;
+    onPointerOut?: () => void;
+    onActivate?: (bar: BarChartInteractionBar, event: PointerEvent<SVGPathElement> | KeyboardEvent<SVGPathElement>) => void;
+    onFocus?: (bar: BarChartInteractionBar, event: FocusEvent<SVGPathElement>) => void;
+    onBlur?: (bar: BarChartInteractionBar, event: FocusEvent<SVGPathElement>) => void;
+};
+export declare const AnimatedBar: ({ bar, orientation, animationProgress, animationStart, animationEnd, ariaLabel, isDimmed, onPointerMove, onPointerOut, onActivate, onFocus, onBlur, }: AnimatedBarProps) => import("react").JSX.Element;
+export {};

package/dist/components/BarChart/AnimatedBar.js

@@ -0,0 +1,65 @@
+import { cn } from "../../utils/cn.js";
+import { CHART_DIMMED_OPACITY } from "../../utils/chartConstants.js";
+import { clamp } from "../../utils/clamp.js";
+import { getBarPath, toBarChartInteractionBar } from "./BarChart.utils.js";
+import { jsx } from "react/jsx-runtime";
+import { animated } from "@react-spring/web";
+//#region packages/components/src/components/BarChart/AnimatedBar.tsx
+var AnimatedBar = ({ bar, orientation, animationProgress, animationStart, animationEnd, ariaLabel, isDimmed, onPointerMove, onPointerOut, onActivate, onFocus, onBlur }) => {
+	const interactionBar = toBarChartInteractionBar(bar);
+	const isInteractive = onPointerMove != null || onPointerOut != null || onActivate != null;
+	const isButton = onActivate != null && ariaLabel != null;
+	const handlePointerUp = onActivate == null ? void 0 : (event) => {
+		if (event.button !== 0) return;
+		onActivate(interactionBar, event);
+	};
+	const handleKeyDown = onActivate == null ? void 0 : (event) => {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onActivate(interactionBar, event);
+	};
+	const handlePointerDown = (event) => {
+		if (event.pointerType === "mouse" && event.currentTarget.hasAttribute("tabindex")) event.preventDefault();
+	};
+	return /* @__PURE__ */ jsx(animated.path, {
+		d: animationProgress.to((progress) => {
+			const revealPosition = animationStart + (animationEnd - animationStart) * progress;
+			let { x, y, width, height } = bar;
+			if (orientation === "vertical") {
+				if (animationEnd < animationStart) {
+					const visibleStart = clamp(revealPosition, y, y + height);
+					height = y + height - visibleStart;
+					y = visibleStart;
+				} else height = clamp(revealPosition, y, y + height) - y;
+			} else if (animationEnd < animationStart) {
+				const visibleStart = clamp(revealPosition, x, x + width);
+				width = x + width - visibleStart;
+				x = visibleStart;
+			} else width = clamp(revealPosition, x, x + width) - x;
+			return getBarPath({
+				x,
+				y,
+				width,
+				height
+			});
+		}),
+		fill: bar.color,
+		opacity: isDimmed ? bar.opacity * CHART_DIMMED_OPACITY : bar.opacity,
+		className: cn("transition-opacity duration-fast focus-visible:stroke-focus focus-visible:stroke-2 focus-visible:outline-none motion-reduce:transition-none", isInteractive && "cursor-pointer"),
+		"data-bar-id": bar.id,
+		tabIndex: ariaLabel == null ? void 0 : 0,
+		"aria-label": ariaLabel,
+		role: isButton ? "button" : void 0,
+		onPointerMove: onPointerMove == null ? void 0 : (event) => onPointerMove(interactionBar, event),
+		onPointerDown: handlePointerDown,
+		onPointerOut,
+		onPointerUp: handlePointerUp,
+		onKeyDown: handleKeyDown,
+		onFocus: onFocus == null ? void 0 : (event) => onFocus(interactionBar, event),
+		onBlur: onBlur == null ? void 0 : (event) => onBlur(interactionBar, event)
+	});
+};
+//#endregion
+export { AnimatedBar };
+
+//# sourceMappingURL=AnimatedBar.js.map

package/dist/components/BarChart/AnimatedBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedBar.js","names":[],"sources":["../../../src/components/BarChart/AnimatedBar.tsx"],"sourcesContent":["import type { FocusEvent, KeyboardEvent, PointerEvent } from 'react';\n\nimport { animated, type SpringValue } from '@react-spring/web';\n\nimport { CHART_DIMMED_OPACITY } from '../../utils/chartConstants';\nimport { clamp } from '../../utils/clamp';\nimport { cn } from '../../utils/cn';\nimport type {\n  BarChartInteractionBar,\n  BarChartOrientation,\n  BarChartRenderedBar,\n} from './BarChart.types';\nimport { getBarPath, toBarChartInteractionBar } from './BarChart.utils';\n\ntype AnimatedBarProps = {\n  bar: BarChartRenderedBar;\n  orientation: BarChartOrientation;\n  animationProgress: SpringValue<number>;\n  animationStart: number;\n  animationEnd: number;\n  /** Naming the bar is what makes it a keyboard target. */\n  ariaLabel?: string;\n  isDimmed: boolean;\n  onPointerMove?: (\n    bar: BarChartInteractionBar,\n    event: PointerEvent<SVGPathElement>\n  ) => void;\n  onPointerOut?: () => void;\n  onActivate?: (\n    bar: BarChartInteractionBar,\n    event: PointerEvent<SVGPathElement> | KeyboardEvent<SVGPathElement>\n  ) => void;\n  onFocus?: (\n    bar: BarChartInteractionBar,\n    event: FocusEvent<SVGPathElement>\n  ) => void;\n  onBlur?: (\n    bar: BarChartInteractionBar,\n    event: FocusEvent<SVGPathElement>\n  ) => void;\n};\n\nexport const AnimatedBar = ({\n  bar,\n  orientation,\n  animationProgress,\n  animationStart,\n  animationEnd,\n  ariaLabel,\n  isDimmed,\n  onPointerMove,\n  onPointerOut,\n  onActivate,\n  onFocus,\n  onBlur,\n}: AnimatedBarProps) => {\n  const interactionBar = toBarChartInteractionBar(bar);\n  const isInteractive =\n    onPointerMove != null || onPointerOut != null || onActivate != null;\n  // A nameless bar must not claim the button role: it would be an unfocusable\n  // control with no accessible name.\n  const isButton = onActivate != null && ariaLabel != null;\n  const handlePointerUp =\n    onActivate == null\n      ? undefined\n      : (event: PointerEvent<SVGPathElement>) => {\n          if (event.button !== 0) return;\n          onActivate(interactionBar, event);\n        };\n  const handleKeyDown =\n    onActivate == null\n      ? undefined\n      : (event: KeyboardEvent<SVGPathElement>) => {\n          if (event.key !== 'Enter' && event.key !== ' ') return;\n          event.preventDefault();\n          onActivate(interactionBar, event);\n        };\n  const handlePointerDown = (event: PointerEvent<SVGPathElement>) => {\n    // Chromium can match :focus-visible when a focusable SVG path is clicked.\n    // Keep the focus indicator for keyboard navigation without showing it for\n    // pointer interaction.\n    if (\n      event.pointerType === 'mouse' &&\n      event.currentTarget.hasAttribute('tabindex')\n    ) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <animated.path\n      d={animationProgress.to((progress) => {\n        const revealPosition =\n          animationStart + (animationEnd - animationStart) * progress;\n        let { x, y, width, height } = bar;\n\n        if (orientation === 'vertical') {\n          if (animationEnd < animationStart) {\n            const visibleStart = clamp(revealPosition, y, y + height);\n            height = y + height - visibleStart;\n            y = visibleStart;\n          } else {\n            height = clamp(revealPosition, y, y + height) - y;\n          }\n        } else if (animationEnd < animationStart) {\n          const visibleStart = clamp(revealPosition, x, x + width);\n          width = x + width - visibleStart;\n          x = visibleStart;\n        } else {\n          width = clamp(revealPosition, x, x + width) - x;\n        }\n\n        return getBarPath({ x, y, width, height });\n      })}\n      fill={bar.color}\n      opacity={isDimmed ? bar.opacity * CHART_DIMMED_OPACITY : bar.opacity}\n      className={cn(\n        'transition-opacity duration-fast focus-visible:stroke-focus focus-visible:stroke-2 focus-visible:outline-none motion-reduce:transition-none',\n        isInteractive && 'cursor-pointer'\n      )}\n      data-bar-id={bar.id}\n      tabIndex={ariaLabel == null ? undefined : 0}\n      aria-label={ariaLabel}\n      role={isButton ? 'button' : undefined}\n      onPointerMove={\n        onPointerMove == null\n          ? undefined\n          : (event) => onPointerMove(interactionBar, event)\n      }\n      onPointerDown={handlePointerDown}\n      onPointerOut={onPointerOut}\n      onPointerUp={handlePointerUp}\n      onKeyDown={handleKeyDown}\n      onFocus={\n        onFocus == null ? undefined : (event) => onFocus(interactionBar, event)\n      }\n      onBlur={\n        onBlur == null ? undefined : (event) => onBlur(interactionBar, event)\n      }\n    />\n  );\n};\n"],"mappings":";;;;;;;AA0CA,IAAa,eAAe,EAC1B,KACA,aACA,mBACA,gBACA,cACA,WACA,UACA,eACA,cACA,YACA,SACA,aACsB;CACtB,MAAM,iBAAiB,yBAAyB,GAAG;CACnD,MAAM,gBACJ,iBAAiB,QAAQ,gBAAgB,QAAQ,cAAc;CAGjE,MAAM,WAAW,cAAc,QAAQ,aAAa;CACpD,MAAM,kBACJ,cAAc,OACV,KAAA,KACC,UAAwC;EACvC,IAAI,MAAM,WAAW,GAAG;EACxB,WAAW,gBAAgB,KAAK;CAClC;CACN,MAAM,gBACJ,cAAc,OACV,KAAA,KACC,UAAyC;EACxC,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAChD,MAAM,eAAe;EACrB,WAAW,gBAAgB,KAAK;CAClC;CACN,MAAM,qBAAqB,UAAwC;EAIjE,IACE,MAAM,gBAAgB,WACtB,MAAM,cAAc,aAAa,UAAU,GAE3C,MAAM,eAAe;CAEzB;CAEA,OACE,oBAAC,SAAS,MAAV;EACE,GAAG,kBAAkB,IAAI,aAAa;GACpC,MAAM,iBACJ,kBAAkB,eAAe,kBAAkB;GACrD,IAAI,EAAE,GAAG,GAAG,OAAO,WAAW;GAE9B,IAAI,gBAAgB,YAAY;IAC9B,IAAI,eAAe,gBAAgB;KACjC,MAAM,eAAe,MAAM,gBAAgB,GAAG,IAAI,MAAM;KACxD,SAAS,IAAI,SAAS;KACtB,IAAI;IACN,OACE,SAAS,MAAM,gBAAgB,GAAG,IAAI,MAAM,IAAI;GAEpD,OAAO,IAAI,eAAe,gBAAgB;IACxC,MAAM,eAAe,MAAM,gBAAgB,GAAG,IAAI,KAAK;IACvD,QAAQ,IAAI,QAAQ;IACpB,IAAI;GACN,OACE,QAAQ,MAAM,gBAAgB,GAAG,IAAI,KAAK,IAAI;GAGhD,OAAO,WAAW;IAAE;IAAG;IAAG;IAAO;GAAO,CAAC;EAC3C,CAAC;EACD,MAAM,IAAI;EACV,SAAS,WAAW,IAAI,UAAU,uBAAuB,IAAI;EAC7D,WAAW,GACT,+IACA,iBAAiB,gBACnB;EACA,eAAa,IAAI;EACjB,UAAU,aAAa,OAAO,KAAA,IAAY;EAC1C,cAAY;EACZ,MAAM,WAAW,WAAW,KAAA;EAC5B,eACE,iBAAiB,OACb,KAAA,KACC,UAAU,cAAc,gBAAgB,KAAK;EAEpD,eAAe;EACD;EACd,aAAa;EACb,WAAW;EACX,SACE,WAAW,OAAO,KAAA,KAAa,UAAU,QAAQ,gBAAgB,KAAK;EAExE,QACE,UAAU,OAAO,KAAA,KAAa,UAAU,OAAO,gBAAgB,KAAK;CAEvE,CAAA;AAEL"}

package/dist/components/BarChart/BarChart.d.ts

@@ -0,0 +1,25 @@
+import type { BarChartProps } from './BarChart.types.js';
+/**
+ * Responsive, presentational bars for categorical and time-bucket data. Supports
+ * vertical or horizontal orientation, grouped or signed stacks, multiple value
+ * axes, threshold bands, controlled legend filtering, selection and active
+ * states, keyboard targets, and consumer-owned SVG slots. Bars always use
+ * square corners in every orientation and mode.
+ *
+ * The component is deliberately presentational: consumers retain fetching,
+ * sorting, Top-K/Other aggregation, formatting, tooltip content, links, frozen
+ * interaction state, and the loading and empty states — pair it with
+ * `ChartCard`, `ChartTooltip`, and `EmptyState`. Reach for `slots` before asking
+ * for a new prop; each slot receives the resolved scales and geometry.
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   aria-label="Requests by environment"
+ *   series={[{ id: 'prod', label: 'Production', data }]}
+ *   selectedIds={selectedIds}
+ *   legendProps={{ onItemClick: (item) => toggleId(item.id) }}
+ * />
+ * ```
+ */
+export declare const BarChart: ({ series, categoryAxis, valueAxes, mode, orientation, selectedIds, grid, valueBands, activeCategory, activeGuideBarId, activeBarId, activeLegendItemId, selectionRange, categoryPadding, plotPadding, minimumPlotWidth, groupPadding, minimumBarSize, shouldAnimate, slots, isRendering, showLegend, legendProps, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, getBarAriaLabel, getCategoryAriaLabel, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, onDatumActivate, onDatumFocus, onDatumBlur, onBarPointerMove, onBarPointerOut, onBarActivate, onBarFocus, onBarBlur, ...rest }: BarChartProps) => import("react").JSX.Element;