@langchain/macaw-components 1.0.0-beta.0

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { forwardRef, useEffect, useId, useRef, useState } from 'react';\n\nimport { useDebouncedCallback } from 'use-debounce';\n\nimport { CalendarBlankIcon } from '@phosphor-icons/react/dist/ssr/CalendarBlank';\nimport { EyeIcon } from '@phosphor-icons/react/dist/ssr/Eye';\nimport { EyeSlashIcon } from '@phosphor-icons/react/dist/ssr/EyeSlash';\nimport { PaperclipIcon } from '@phosphor-icons/react/dist/ssr/Paperclip';\n\nimport { cn } from '../../utils/cn';\nimport { CONTROL_ICON_SIZES } from '../../utils/controlIconSizes';\nimport type { IconComponent } from '../../utils/icon-types';\nimport { mergeRefs } from '../../utils/merge-refs';\nimport { Icon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { Text } from '../Text';\nimport {\n  DECORATOR_CLASSES,\n  getInputContainerClasses,\n  getInputElementClasses,\n  INPUT_TEXT_CLASSES,\n} from './inputStyles';\nimport type { InputSize } from './inputStyles';\n\nexport type InputIconAction = Pick<\n  ComponentProps<typeof IconButton>,\n  'icon' | 'label' | 'disabled' | 'tooltipProps'\n> & {\n  onClick: NonNullable<ComponentProps<typeof IconButton>['onClick']>;\n};\n\nexport interface InputProps {\n  /** Exact outer height. The default lg tier preserves the legacy 40px field. */\n  size?: InputSize;\n  variant?: 'outlined' | 'plain';\n  /** Decorative icon. Input owns its size and color. */\n  leftIcon?: IconComponent;\n  /** Decorative icon. Input owns its size and color. */\n  rightIcon?: IconComponent;\n  /** Plain icon button. Takes precedence over leftIcon. */\n  leftAction?: InputIconAction;\n  /** Plain icon button. Takes precedence over rightIcon; precedes the password toggle. */\n  rightAction?: InputIconAction;\n  /** Custom content; overrides leftIcon/leftAction and the default file icon. */\n  leftDecorator?: ReactNode;\n  /** Custom content; overrides rightIcon/rightAction. The password toggle remains last. */\n  rightDecorator?: ReactNode;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether the input has an error state */\n  isError?: boolean;\n  /** Label text displayed above the input */\n  label?: string | ReactNode;\n  /** Hint text displayed below the input */\n  hintText?: string;\n  /** Current input value */\n  value?: string | null;\n  /** Change handler that will be debounced */\n  onChange: (\n    value: string,\n    event?: React.ChangeEvent<HTMLInputElement>\n  ) => void;\n  /** Placeholder text */\n  placeholder?: string;\n  /**\n   * Input type. Limited to the \"text-like\" native types that share this\n   * component's styled-text rendering and string value contract. `password`\n   * renders a masked secret field with a show/hide toggle. `date` uses the\n   * browser's native date picker; its value is a `YYYY-MM-DD` string.\n   * `datetime-local` uses the native date+time picker; its value is a\n   * `YYYY-MM-DDTHH:mm` string in the viewer's local time. `file` is\n   * uncontrolled: read the selection from `event.target.files` on the change\n   * event, and scope it with `accept`/`multiple`.\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'url'\n    | 'date'\n    | 'datetime-local'\n    | 'file';\n  /** Debounce delay in milliseconds (default: 300). Ignored for `type=\"file\"`. */\n  debounceMs?: number;\n  /** Additional CSS classes */\n  className?: string;\n  /** Input ID for accessibility */\n  id?: string;\n  /** Input name for forms */\n  name?: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Auto focus on mount */\n  autoFocus?: boolean;\n  /** CSS class for the input container */\n  inputContainerClassName?: string;\n  /**\n   * Which files the picker offers, as a comma-separated list of extensions or\n   * MIME types (`'.csv,.json'`, `'image/*'`). `type=\"file\"` only. The browser\n   * treats this as a filter, not a guarantee — validate the selection too.\n   */\n  accept?: string;\n  /** Whether more than one file can be picked. `type=\"file\"` only. */\n  multiple?: boolean;\n}\n\nfunction InputIconSlot({\n  icon,\n  action,\n  size,\n  disabled,\n}: {\n  icon?: IconComponent;\n  action?: InputIconAction;\n  size: InputSize;\n  disabled: boolean;\n}) {\n  const isDisabled = disabled || action?.disabled;\n  const colorClassName = isDisabled\n    ? 'text-icon-disabled'\n    : 'text-icon-secondary';\n\n  return action ? (\n    <IconButton\n      {...action}\n      color=\"secondary\"\n      variant=\"plain\"\n      size={CONTROL_ICON_SIZES[size].buttonSize}\n      className={colorClassName}\n      iconWeight=\"regular\"\n      disabled={isDisabled}\n      onMouseDown={(event) => event.preventDefault()}\n    />\n  ) : icon ? (\n    <Icon\n      aria-hidden\n      icon={icon}\n      iconClassName={CONTROL_ICON_SIZES[size].iconClassName}\n      className={colorClassName}\n      weight=\"regular\"\n    />\n  ) : null;\n}\n\nfunction FileSelection({\n  size,\n  fileNames,\n  placeholder,\n}: {\n  size: InputSize;\n  fileNames: string[];\n  placeholder?: string;\n}) {\n  const summary =\n    fileNames.length > 1 ? `${fileNames.length} files selected` : fileNames[0];\n  const textClasses = INPUT_TEXT_CLASSES[size];\n\n  return (\n    <>\n      <Text\n        aria-hidden\n        as=\"span\"\n        className={cn(\n          textClasses,\n          'min-w-0 flex-1 truncate',\n          summary ? 'text-primary' : 'text-placeholder'\n        )}\n      >\n        {summary ?? placeholder ?? 'No file selected'}\n      </Text>\n      <Text\n        aria-hidden\n        as=\"span\"\n        weight=\"medium\"\n        className={cn(textClasses, 'shrink-0 text-secondary')}\n      >\n        Browse\n      </Text>\n    </>\n  );\n}\n\nexport const Input = forwardRef<\n  HTMLInputElement,\n  InputProps &\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputProps>\n>(\n  (\n    {\n      size = 'lg',\n      variant = 'outlined',\n      leftIcon,\n      rightIcon,\n      leftAction,\n      rightAction,\n      leftDecorator,\n      rightDecorator,\n      disabled = false,\n      isError = false,\n      label,\n      hintText,\n      value,\n      onChange,\n      placeholder,\n      type = 'text',\n      debounceMs = 0,\n      className,\n      inputContainerClassName,\n      id,\n      name,\n      required = false,\n      autoFocus = false,\n      accept,\n      multiple,\n      'aria-describedby': ariaDescribedBy,\n      ...rest\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const inputId = id || generatedId;\n    const hintTextId = `${inputId}-hint`;\n    const describedBy =\n      [hintText ? hintTextId : undefined, ariaDescribedBy]\n        .filter(Boolean)\n        .join(' ') || undefined;\n    const shouldDebounce = debounceMs > 0;\n    const isFileInput = type === 'file';\n    const isPasswordInput = type === 'password';\n    const isDateInput = type === 'date' || type === 'datetime-local';\n    const [internalValue, setInternalValue] = useState(value);\n    const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n    const [selectedFileNames, setSelectedFileNames] = useState<string[]>([]);\n    const debouncedOnChange = useDebouncedCallback(onChange, debounceMs);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (!shouldDebounce) return;\n      return () => debouncedOnChange.flush();\n    }, [shouldDebounce, debouncedOnChange]);\n\n    // Skip the click forwarded below, which would otherwise re-enter here.\n    const openFilePicker = (event: React.MouseEvent<HTMLDivElement>) => {\n      const target = event.target;\n      if (\n        disabled ||\n        (target instanceof Element &&\n          target.closest(\n            'button, a, input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"]'\n          ))\n      ) {\n        return;\n      }\n      fileInputRef.current?.click();\n    };\n\n    useEffect(() => {\n      if (shouldDebounce) setInternalValue(value);\n    }, [shouldDebounce, value]);\n\n    useEffect(() => {\n      if (!isPasswordInput) {\n        setIsPasswordVisible(false);\n      }\n    }, [isPasswordInput]);\n\n    useEffect(() => {\n      const form = isFileInput ? fileInputRef.current?.form : null;\n      if (!form) return;\n\n      const clearFileSelection = () => setSelectedFileNames([]);\n      form.addEventListener('reset', clearFileSelection);\n      return () => form.removeEventListener('reset', clearFileSelection);\n    }, [isFileInput]);\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      if (isFileInput) {\n        onChange(newValue, e);\n        setSelectedFileNames(\n          Array.from(e.target.files ?? []).map((file) => file.name)\n        );\n        return;\n      }\n\n      if (shouldDebounce) {\n        setInternalValue(newValue);\n        debouncedOnChange(newValue);\n      } else {\n        onChange(newValue, e);\n      }\n    };\n\n    const inputContainerClasses = getInputContainerClasses({\n      size,\n      variant,\n      isError,\n      disabled,\n      className: inputContainerClassName,\n    });\n\n    const inputClasses = isFileInput\n      ? 'sr-only'\n      : getInputElementClasses({\n          size,\n          disabled,\n          className: cn(\n            isPasswordInput && !isPasswordVisible && 'text-security',\n            isDateInput && [\n              'supports-[selector(input::-webkit-calendar-picker-indicator)]:[&::-webkit-calendar-picker-indicator]:size-[var(--control-icon-size)]',\n              'supports-[selector(input::-webkit-calendar-picker-indicator)]:[&::-webkit-calendar-picker-indicator]:m-0',\n              'supports-[selector(input::-webkit-calendar-picker-indicator)]:[&::-webkit-calendar-picker-indicator]:p-0',\n              'supports-[selector(input::-webkit-calendar-picker-indicator)]:[&::-webkit-calendar-picker-indicator]:opacity-0',\n            ]\n          ),\n        });\n\n    const effectiveLeftIcon =\n      leftIcon ?? (isFileInput ? PaperclipIcon : undefined);\n    const hasCustomLeftDecorator = leftDecorator != null;\n    const hasCustomRightDecorator = rightDecorator != null;\n    const effectiveLeftDecorator =\n      leftDecorator ??\n      (effectiveLeftIcon || leftAction ? (\n        <InputIconSlot\n          icon={effectiveLeftIcon}\n          action={leftAction}\n          size={size}\n          disabled={disabled}\n        />\n      ) : null);\n    const rightContent =\n      rightDecorator ??\n      (rightIcon || rightAction ? (\n        <InputIconSlot\n          icon={rightIcon}\n          action={rightAction}\n          size={size}\n          disabled={disabled}\n        />\n      ) : null);\n    // Offset only known edge buttons by their glyph inset, including the border.\n    const leftActionOffset =\n      !hasCustomLeftDecorator && leftAction\n        ? CONTROL_ICON_SIZES[size].actionOffset\n        : undefined;\n    const rightActionOffset =\n      isPasswordInput || (!hasCustomRightDecorator && rightAction)\n        ? CONTROL_ICON_SIZES[size].actionOffset\n        : undefined;\n    const effectiveRightDecorator =\n      rightContent || isPasswordInput ? (\n        <>\n          {rightContent}\n          {isPasswordInput && (\n            <InputIconSlot\n              size={size}\n              disabled={disabled}\n              action={{\n                icon: isPasswordVisible ? EyeSlashIcon : EyeIcon,\n                label: 'toggle password visibility',\n                tooltipProps: { disabled: true },\n                onClick: () => setIsPasswordVisible((show) => !show),\n              }}\n            />\n          )}\n        </>\n      ) : null;\n\n    const nativeInput = (\n      // eslint-disable-next-line react/forbid-elements\n      <input\n        ref={isFileInput ? mergeRefs([fileInputRef, ref]) : ref}\n        id={inputId}\n        name={name ?? (typeof label === 'string' ? label : undefined)}\n        type={\n          isPasswordInput ? (isPasswordVisible ? 'text' : 'password') : type\n        }\n        value={\n          isFileInput\n            ? undefined\n            : shouldDebounce\n              ? (internalValue ?? '')\n              : value === null\n                ? ''\n                : value\n        }\n        onChange={handleInputChange}\n        placeholder={placeholder}\n        disabled={disabled}\n        required={required}\n        autoFocus={autoFocus}\n        accept={accept}\n        multiple={multiple}\n        aria-describedby={describedBy}\n        aria-invalid={isError || undefined}\n        className={inputClasses}\n        {...rest}\n      />\n    );\n\n    return (\n      <div className={cn('w-full', className)}>\n        {label && (\n          <Text\n            as=\"label\"\n            htmlFor={inputId}\n            className={cn(\n              'mb-space-1 block text-sm font-medium text-primary',\n              disabled && 'text-disabled'\n            )}\n            variant=\"xs\"\n          >\n            {label}\n            {required && (\n              <span className=\"ml-space-1 text-error-secondary\">*</span>\n            )}\n          </Text>\n        )}\n\n        <div\n          className={cn(\n            inputContainerClasses,\n            isFileInput && !disabled && 'cursor-pointer'\n          )}\n          onClick={isFileInput ? openFilePicker : undefined}\n        >\n          {effectiveLeftDecorator && (\n            <div\n              className={DECORATOR_CLASSES}\n              style={{ marginInlineStart: leftActionOffset }}\n            >\n              {effectiveLeftDecorator}\n            </div>\n          )}\n\n          {isFileInput && (\n            <FileSelection\n              size={size}\n              fileNames={selectedFileNames}\n              placeholder={placeholder}\n            />\n          )}\n\n          {isDateInput ? (\n            <div\n              className={cn(\n                'relative flex min-w-0 flex-1 items-center',\n                CONTROL_ICON_SIZES[size].sizeVariableClassName\n              )}\n            >\n              {nativeInput}\n              {/* The native picker target stays interactive beneath this glyph. */}\n              <span className=\"pointer-events-none absolute inset-y-0 end-0 hidden items-center supports-[selector(input::-webkit-calendar-picker-indicator)]:flex\">\n                <InputIconSlot\n                  icon={CalendarBlankIcon}\n                  size={size}\n                  disabled={disabled}\n                />\n              </span>\n            </div>\n          ) : (\n            nativeInput\n          )}\n\n          {effectiveRightDecorator && (\n            <div\n              className={cn(DECORATOR_CLASSES, 'gap-space-1')}\n              style={{ marginInlineEnd: rightActionOffset }}\n            >\n              {effectiveRightDecorator}\n            </div>\n          )}\n        </div>\n\n        {hintText && (\n          <Text\n            id={hintTextId}\n            className={cn(\n              'mt-space-1 text-xs',\n              isError ? 'text-error-secondary' : 'text-tertiary'\n            )}\n            variant=\"xs\"\n            weight=\"normal\"\n          >\n            {hintText}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { Input } from './Input.js';
+export type { InputIconAction, InputProps } from './Input.js';

package/dist/components/Input/index.js

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

package/dist/components/Input/inputStyles.d.ts

@@ -0,0 +1,28 @@
+import { type ControlSize } from '../../utils/componentSizes.js';
+export type InputSize = ControlSize;
+export type InputVariant = 'outlined' | 'plain';
+export declare const INPUT_HORIZONTAL_PADDING_CLASSES: Record<InputSize, string>;
+export declare const INPUT_RADIUS_CLASSES: Record<InputSize, string>;
+export declare const INPUT_TEXT_CLASSES: Record<InputSize, string>;
+/**
+ * Shared styling for input containers (border, padding, rounding, variant).
+ * Used by both the design system Input and CommandInput.
+ */
+export declare function getInputContainerClasses({ size, variant, isError, disabled, className, }: {
+    size: InputSize;
+    variant: InputVariant;
+    isError?: boolean;
+    disabled?: boolean;
+    className?: string;
+}): string;
+/**
+ * Shared styling for the inner input element (unstyled, fills container).
+ * Used by both the design system Input and CommandInput.
+ */
+export declare function getInputElementClasses({ size, disabled, className, }: {
+    size: InputSize;
+    disabled?: boolean;
+    className?: string;
+}): string;
+/** Shared styling for decorator wrappers. */
+export declare const DECORATOR_CLASSES = "flex items-center text-tertiary";

package/dist/components/Input/inputStyles.js

@@ -0,0 +1,45 @@
+import { cn } from "../../utils/cn.js";
+import { CONTROL_SIZES } from "../../utils/componentSizes.js";
+//#region packages/components/src/components/Input/inputStyles.ts
+var INPUT_HORIZONTAL_PADDING_CLASSES = {
+	xs: "px-space-1",
+	sm: "px-space-2",
+	md: "px-space-3",
+	lg: "px-space-3"
+};
+var INPUT_RADIUS_CLASSES = {
+	xs: "rounded-xs",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-md"
+};
+var INPUT_TEXT_CLASSES = {
+	xs: "text-xxs leading-[1.15]",
+	sm: "text-xs",
+	md: "text-sm leading-normal",
+	lg: "text-sm leading-normal"
+};
+/**
+* Shared styling for input containers (border, padding, rounding, variant).
+* Used by both the design system Input and CommandInput.
+*/
+function getInputContainerClasses({ size, variant, isError = false, disabled = false, className }) {
+	const outlined = variant === "outlined";
+	return cn("box-border flex w-full items-center gap-space-2 transition-[border-color,box-shadow,background-color]", CONTROL_SIZES[size].heightClassName, INPUT_HORIZONTAL_PADDING_CLASSES[size], INPUT_RADIUS_CLASSES[size], "focus-within:outline-none", {
+		"border border-subtle bg-transparent": variant === "outlined",
+		"border border-transparent bg-surface-level-3": variant === "plain"
+	}, outlined && !disabled && !isError && "[&:hover:not(:focus-within)]:border-default", !isError && (outlined ? "focus-within:border-focus focus-within:shadow-[0_0_0_1px_var(--border-focus)]" : "focus-within:border-focus"), isError && (outlined ? "border-error-strong focus-within:border-error-strong focus-within:shadow-[0_0_0_1px_var(--border-error-strong)]" : "border-error-strong focus-within:border-error-strong"), disabled && "cursor-not-allowed bg-disabled opacity-50", className);
+}
+/**
+* Shared styling for the inner input element (unstyled, fills container).
+* Used by both the design system Input and CommandInput.
+*/
+function getInputElementClasses({ size, disabled = false, className }) {
+	return cn("min-w-0 max-w-full flex-1 border-none bg-transparent p-0 outline-none", INPUT_TEXT_CLASSES[size], "placeholder:text-placeholder", disabled && "cursor-not-allowed", className);
+}
+/** Shared styling for decorator wrappers. */
+var DECORATOR_CLASSES = "flex items-center text-tertiary";
+//#endregion
+export { DECORATOR_CLASSES, INPUT_HORIZONTAL_PADDING_CLASSES, INPUT_RADIUS_CLASSES, INPUT_TEXT_CLASSES, getInputContainerClasses, getInputElementClasses };
+
+//# sourceMappingURL=inputStyles.js.map

package/dist/components/Input/inputStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputStyles.js","names":[],"sources":["../../../src/components/Input/inputStyles.ts"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport { CONTROL_SIZES, type ControlSize } from '../../utils/componentSizes';\n\nexport type InputSize = ControlSize;\nexport type InputVariant = 'outlined' | 'plain';\n\nexport const INPUT_HORIZONTAL_PADDING_CLASSES: Record<InputSize, string> = {\n  xs: 'px-space-1',\n  sm: 'px-space-2',\n  md: 'px-space-3',\n  lg: 'px-space-3',\n};\n\nexport const INPUT_RADIUS_CLASSES: Record<InputSize, string> = {\n  xs: 'rounded-xs',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-md',\n};\n\nexport const INPUT_TEXT_CLASSES: Record<InputSize, string> = {\n  xs: 'text-xxs leading-[1.15]',\n  sm: 'text-xs',\n  md: 'text-sm leading-normal',\n  lg: 'text-sm leading-normal',\n};\n\n/**\n * Shared styling for input containers (border, padding, rounding, variant).\n * Used by both the design system Input and CommandInput.\n */\nexport function getInputContainerClasses({\n  size,\n  variant,\n  isError = false,\n  disabled = false,\n  className,\n}: {\n  size: InputSize;\n  variant: InputVariant;\n  isError?: boolean;\n  disabled?: boolean;\n  className?: string;\n}) {\n  const outlined = variant === 'outlined';\n  return cn(\n    'box-border flex w-full items-center gap-space-2 transition-[border-color,box-shadow,background-color]',\n    CONTROL_SIZES[size].heightClassName,\n    INPUT_HORIZONTAL_PADDING_CLASSES[size],\n    INPUT_RADIUS_CLASSES[size],\n    'focus-within:outline-none',\n    {\n      'border border-subtle bg-transparent': variant === 'outlined',\n      'border border-transparent bg-surface-level-3': variant === 'plain',\n    },\n    outlined &&\n      !disabled &&\n      !isError &&\n      '[&:hover:not(:focus-within)]:border-default',\n    !isError &&\n      (outlined\n        ? 'focus-within:border-focus focus-within:shadow-[0_0_0_1px_var(--border-focus)]'\n        : 'focus-within:border-focus'),\n    isError &&\n      (outlined\n        ? 'border-error-strong focus-within:border-error-strong focus-within:shadow-[0_0_0_1px_var(--border-error-strong)]'\n        : 'border-error-strong focus-within:border-error-strong'),\n    disabled && 'cursor-not-allowed bg-disabled opacity-50',\n    className\n  );\n}\n\n/**\n * Shared styling for the inner input element (unstyled, fills container).\n * Used by both the design system Input and CommandInput.\n */\nexport function getInputElementClasses({\n  size,\n  disabled = false,\n  className,\n}: {\n  size: InputSize;\n  disabled?: boolean;\n  className?: string;\n}) {\n  return cn(\n    'min-w-0 max-w-full flex-1 border-none bg-transparent p-0 outline-none',\n    INPUT_TEXT_CLASSES[size],\n    'placeholder:text-placeholder',\n    disabled && 'cursor-not-allowed',\n    className\n  );\n}\n\n/** Shared styling for decorator wrappers. */\nexport const DECORATOR_CLASSES = 'flex items-center text-tertiary';\n"],"mappings":";;;AAMA,IAAa,mCAA8D;CACzE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,uBAAkD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,qBAAgD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;AAMA,SAAgB,yBAAyB,EACvC,MACA,SACA,UAAU,OACV,WAAW,OACX,aAOC;CACD,MAAM,WAAW,YAAY;CAC7B,OAAO,GACL,yGACA,cAAc,KAAK,CAAC,iBACpB,iCAAiC,OACjC,qBAAqB,OACrB,6BACA;EACE,uCAAuC,YAAY;EACnD,gDAAgD,YAAY;CAC9D,GACA,YACE,CAAC,YACD,CAAC,WACD,+CACF,CAAC,YACE,WACG,kFACA,8BACN,YACG,WACG,oHACA,yDACN,YAAY,6CACZ,SACF;AACF;;;;;AAMA,SAAgB,uBAAuB,EACrC,MACA,WAAW,OACX,aAKC;CACD,OAAO,GACL,yEACA,mBAAmB,OACnB,gCACA,YAAY,sBACZ,SACF;AACF;;AAGA,IAAa,oBAAoB"}

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,15 @@
+interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /** Color scheme. `inherit` adopts the ambient text color, for chips on colored/dark surfaces. */
+    variant?: 'default' | 'inherit';
+    /** Key content — a label string or an icon element. */
+    children?: React.ReactNode;
+}
+declare const Kbd: import("react").ForwardRefExoticComponent<KbdProps & import("react").RefAttributes<HTMLElement>>;
+interface KbdGroupProps extends React.HTMLAttributes<HTMLElement> {
+    /** The `Kbd` chips making up the shortcut, in order. */
+    children?: React.ReactNode;
+}
+/** Groups multiple `Kbd` chips into a single keyboard shortcut, e.g. `⌘ K`. */
+declare const KbdGroup: import("react").ForwardRefExoticComponent<KbdGroupProps & import("react").RefAttributes<HTMLElement>>;
+export { Kbd, KbdGroup };
+export type { KbdProps, KbdGroupProps };

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,30 @@
+import { cn } from "../../utils/cn.js";
+import { forwardRef, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/Kbd/Kbd.tsx
+var VARIANT_CLASSES = {
+	default: "border-subtle text-tertiary",
+	inherit: "border-current bg-transparent text-current"
+};
+var Kbd = forwardRef(({ variant = "default", className, children, ...props }, ref) => {
+	const isSingleGlyph = isValidElement(children) || typeof children === "string" && Array.from(children).length === 1;
+	return /* @__PURE__ */ jsx("kbd", {
+		ref,
+		className: cn("box-border inline-flex items-center justify-center rounded-xs border font-sans text-[0.625rem] font-medium leading-none", isSingleGlyph ? "size-4 px-0" : "h-4 min-w-4 px-space-1", VARIANT_CLASSES[variant], className),
+		...props,
+		children
+	});
+});
+Kbd.displayName = "Kbd";
+/** Groups multiple `Kbd` chips into a single keyboard shortcut, e.g. `⌘ K`. */
+var KbdGroup = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("kbd", {
+	ref,
+	className: cn("inline-flex items-center gap-space-1", className),
+	...props,
+	children
+}));
+KbdGroup.displayName = "KbdGroup";
+//#endregion
+export { Kbd, KbdGroup };
+
+//# sourceMappingURL=Kbd.js.map

package/dist/components/Kbd/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","names":[],"sources":["../../../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from 'react';\n\nimport { cn } from '../../utils/cn';\n\ninterface KbdProps extends React.HTMLAttributes<HTMLElement> {\n  /** Color scheme. `inherit` adopts the ambient text color, for chips on colored/dark surfaces. */\n  variant?: 'default' | 'inherit';\n  /** Key content — a label string or an icon element. */\n  children?: React.ReactNode;\n}\n\nconst VARIANT_CLASSES: Record<NonNullable<KbdProps['variant']>, string> = {\n  default: 'border-subtle text-tertiary',\n  inherit: 'border-current bg-transparent text-current',\n};\n\nconst Kbd = forwardRef<HTMLElement, KbdProps>(\n  ({ variant = 'default', className, children, ...props }, ref) => {\n    const isSingleGlyph =\n      isValidElement(children) ||\n      (typeof children === 'string' && Array.from(children).length === 1);\n\n    return (\n      <kbd\n        ref={ref}\n        className={cn(\n          'box-border inline-flex items-center justify-center rounded-xs border font-sans text-[0.625rem] font-medium leading-none',\n          isSingleGlyph ? 'size-4 px-0' : 'h-4 min-w-4 px-space-1',\n          VARIANT_CLASSES[variant],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </kbd>\n    );\n  }\n);\n\nKbd.displayName = 'Kbd';\n\ninterface KbdGroupProps extends React.HTMLAttributes<HTMLElement> {\n  /** The `Kbd` chips making up the shortcut, in order. */\n  children?: React.ReactNode;\n}\n\n/** Groups multiple `Kbd` chips into a single keyboard shortcut, e.g. `⌘ K`. */\nconst KbdGroup = forwardRef<HTMLElement, KbdGroupProps>(\n  ({ className, children, ...props }, ref) => (\n    <kbd\n      ref={ref}\n      className={cn('inline-flex items-center gap-space-1', className)}\n      {...props}\n    >\n      {children}\n    </kbd>\n  )\n);\n\nKbdGroup.displayName = 'KbdGroup';\n\nexport { Kbd, KbdGroup };\nexport type { KbdProps, KbdGroupProps };\n"],"mappings":";;;;AAWA,IAAM,kBAAoE;CACxE,SAAS;CACT,SAAS;AACX;AAEA,IAAM,MAAM,YACT,EAAE,UAAU,WAAW,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC/D,MAAM,gBACJ,eAAe,QAAQ,KACtB,OAAO,aAAa,YAAY,MAAM,KAAK,QAAQ,CAAC,CAAC,WAAW;CAEnE,OACE,oBAAC,OAAD;EACO;EACL,WAAW,GACT,2HACA,gBAAgB,gBAAgB,0BAChC,gBAAgB,UAChB,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,IAAI,cAAc;;AAQlB,IAAM,WAAW,YACd,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;CAEH;AACE,CAAA,CAET;AAEA,SAAS,cAAc"}

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

@@ -0,0 +1,2 @@
+export { Kbd, KbdGroup } from './Kbd.js';
+export type { KbdProps, KbdGroupProps } from './Kbd.js';

package/dist/components/Kbd/index.js

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

package/dist/components/LineChart/LineChart.d.ts

@@ -0,0 +1,8 @@
+import type { LineChartProps } from './LineChart.types.js';
+export type { LineChartDisplayAxis, LineChartDisplaySeries, LineChartGrid, LineChartInteractionDatum, LineChartInteractionPoint, LineChartPoint, LineChartProps, LineChartSelectionRange, LineChartSeries, LineChartXScale, LineChartYBand, LineChartYAxis, } from './LineChart.types.js';
+/**
+ * Responsive numeric line chart with nullable observations, multiple axes,
+ * legend filtering, configurable grids and x scales, brushing, and
+ * consumer-owned tooltip interactions.
+ */
+export declare const LineChart: ({ series, yAxes, xDomain, formatXValue, xScale: xScaleType, xTickCount, xTickValues, selectedIds, showPoints, connectNulls, grid, activeX, activeLegendItemId, selectionRange, yBands, renderActiveOverlay, shouldAnimate, isRendering, showLegend, legendProps, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, className, ...rest }: LineChartProps) => import("react").JSX.Element;

package/dist/components/LineChart/LineChart.js

@@ -0,0 +1,194 @@
+import { cn } from "../../utils/cn.js";
+import "../../utils/chartConstants.js";
+import { getCategoricalLineChartColor } from "../../utils/chartColors.js";
+import { getYAxisLeftMargin } from "../../utils/getYAxisLeftMargin.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+import "./constants.js";
+import { createLineChartXScaleAdapter, getLineChartYDomainValues, getLineSegments, getNumericDomain, normalizeLineChartSeries } from "./LineChart.utils.js";
+import { LineChartPlot } from "./LineChartPlot.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useResizeObserver } from "@mantine/hooks";
+import { scaleLinear } from "@visx/scale";
+//#region packages/components/src/components/LineChart/LineChart.tsx
+var DEFAULT_AXIS_ID = "line-chart-default-axis";
+var CHART_MARGIN_TOP = 8;
+var CHART_MARGIN_BOTTOM = 28;
+var CHART_MARGIN_RIGHT = 8;
+var DEFAULT_STROKE_WIDTH = 2;
+var NUMBER_FORMATTER = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+var defaultFormatValue = (value) => NUMBER_FORMATTER.format(value);
+var resolveAxisLayouts = (series, configuredAxes, xDomain, connectNulls) => {
+	const axisConfigs = new Map(configuredAxes?.map((axis) => [axis.id, axis]) ?? []);
+	const axisIds = Array.from(new Set(configuredAxes?.map((axis) => axis.id) ?? []));
+	for (const item of series) if (!axisIds.includes(item.yAxisId)) axisIds.push(item.yAxisId);
+	if (axisIds.length === 0) axisIds.push(DEFAULT_AXIS_ID);
+	return axisIds.map((axisId) => {
+		const config = axisConfigs.get(axisId) ?? { id: axisId };
+		const values = series.filter((item) => item.yAxisId === axisId).flatMap((item) => getLineChartYDomainValues(item.points, xDomain, connectNulls));
+		const domain = getNumericDomain(values, config.domain);
+		const nice = config.domain == null;
+		const tickLabelThickness = getYAxisLeftMargin({
+			yDomain: domain,
+			formatTick: config.formatValue ?? defaultFormatValue,
+			fontSize: 12,
+			numTicks: config.tickCount ?? 4,
+			tickValues: config.tickValues,
+			tickLength: 8,
+			nice
+		});
+		return {
+			config,
+			domain,
+			nice,
+			thickness: Math.max(64, tickLabelThickness) + (config.label == null ? 0 : 20)
+		};
+	});
+};
+var resolveAxes = (layouts, innerHeight) => layouts.map(({ config, domain, nice, thickness }) => ({
+	...config,
+	thickness,
+	scale: scaleLinear({
+		domain,
+		range: [innerHeight, 0],
+		nice
+	})
+}));
+/**
+* Responsive numeric line chart with nullable observations, multiple axes,
+* legend filtering, configurable grids and x scales, brushing, and
+* consumer-owned tooltip interactions.
+*/
+var LineChart = ({ series, yAxes, xDomain, formatXValue = defaultFormatValue, xScale: xScaleType = "linear", xTickCount, xTickValues, selectedIds, showPoints = false, connectNulls = true, grid, activeX, activeLegendItemId, selectionRange, yBands = [], renderActiveOverlay, shouldAnimate = true, isRendering = true, showLegend, legendProps, onDatumPointerDown, onDatumPointerMove, onDatumPointerOut, onDatumPointerUp, className, ...rest }) => {
+	const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState(null);
+	const ariaProps = {
+		"aria-describedby": rest["aria-describedby"],
+		"aria-label": rest["aria-label"]
+	};
+	const rootProps = { ...rest };
+	delete rootProps["aria-describedby"];
+	delete rootProps["aria-label"];
+	const [containerRef, dimensions] = useResizeObserver();
+	const normalizedSeries = normalizeLineChartSeries(series);
+	const defaultAxisId = yAxes?.[0]?.id ?? DEFAULT_AXIS_ID;
+	const displaySeries = normalizedSeries.map((item, index) => ({
+		...item,
+		color: item.color ?? getCategoricalLineChartColor(index),
+		yAxisId: item.yAxisId ?? defaultAxisId,
+		strokeWidth: item.strokeWidth == null || !Number.isFinite(item.strokeWidth) ? DEFAULT_STROKE_WIDTH : Math.max(0, item.strokeWidth),
+		opacity: item.opacity == null || !Number.isFinite(item.opacity) ? 1 : Math.min(1, Math.max(0, item.opacity)),
+		showActiveMarker: item.showActiveMarker ?? true
+	}));
+	const visibleSeries = selectedIds == null || selectedIds.size === 0 ? displaySeries : displaySeries.filter((item) => selectedIds.has(item.id));
+	const xValues = visibleSeries.flatMap((item) => item.points.map((point) => point.x));
+	const resolvedXDomain = getNumericDomain(xValues, xDomain);
+	const uniqueXValues = Array.from(new Set(xValues.filter((value) => value >= resolvedXDomain[0] && value <= resolvedXDomain[1]))).sort((left, right) => left - right);
+	const renderedSeries = xScaleType === "band" ? visibleSeries.map((item) => ({
+		...item,
+		points: item.points.filter((point) => point.x >= resolvedXDomain[0] && point.x <= resolvedXDomain[1])
+	})) : visibleSeries;
+	const renderedActiveX = xScaleType !== "band" || activeX != null && activeX >= resolvedXDomain[0] && activeX <= resolvedXDomain[1] ? activeX : void 0;
+	const axisLayouts = resolveAxisLayouts(renderedSeries, yAxes, resolvedXDomain, connectNulls);
+	const chartMargin = {
+		top: CHART_MARGIN_TOP,
+		right: CHART_MARGIN_RIGHT + axisLayouts.slice(1).reduce((total, axis) => total + axis.thickness, 0),
+		bottom: CHART_MARGIN_BOTTOM,
+		left: axisLayouts[0]?.thickness ?? 64
+	};
+	const innerWidth = Math.max(0, dimensions.width - chartMargin.left - chartMargin.right);
+	const innerHeight = Math.max(0, dimensions.height - chartMargin.top - chartMargin.bottom);
+	const xScaleAdapter = createLineChartXScaleAdapter({
+		type: xScaleType,
+		domain: resolvedXDomain,
+		values: uniqueXValues,
+		width: innerWidth,
+		nice: xDomain == null
+	});
+	const axes = resolveAxes(axisLayouts, innerHeight);
+	const activeXPos = renderedActiveX == null ? null : xScaleAdapter.getPosition(renderedActiveX);
+	const overlayX = activeXPos != null && activeXPos >= 0 && activeXPos <= innerWidth ? chartMargin.left + activeXPos : null;
+	const legendItems = displaySeries.map((item) => ({
+		id: item.id,
+		label: item.label,
+		markerColor: item.color,
+		selected: selectedIds?.has(item.id) ?? false
+	}));
+	const hasLegend = (showLegend ?? legendItems.length > 1) && legendItems.length > 0;
+	const legendLayout = legendProps?.layout ?? "inline";
+	const requestedActiveLegendItemId = (hasLegend ? activeBuiltInLegendItemId : null) ?? activeLegendItemId;
+	const renderedActiveLegendItemId = renderedSeries.some((item) => {
+		if (item.id !== requestedActiveLegendItemId) return false;
+		const [domainMinimum, domainMaximum] = resolvedXDomain;
+		if (showPoints && item.points.some((point) => point.y != null && point.x >= domainMinimum && point.x <= domainMaximum)) return true;
+		return getLineSegments(item.points, connectNulls).some((segment) => segment.some((point, index) => {
+			const nextPoint = segment[index + 1];
+			return nextPoint != null && point.x <= domainMaximum && nextPoint.x >= domainMinimum;
+		}));
+	}) ? requestedActiveLegendItemId : null;
+	const showGridRows = grid === false ? false : grid?.rows ?? true;
+	const showGridColumns = grid === false ? false : grid?.columns ?? true;
+	const plot = /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative size-full min-h-0 min-w-0",
+		children: [/* @__PURE__ */ jsx(LineChartPlot, {
+			width: dimensions.width,
+			height: dimensions.height,
+			innerWidth,
+			innerHeight,
+			chartMargin,
+			xScale: xScaleAdapter.scale,
+			getXPosition: xScaleAdapter.getPosition,
+			getXValue: xScaleAdapter.getValue,
+			getXRangePosition: xScaleAdapter.getRangePosition,
+			uniqueXValues,
+			axes,
+			series: renderedSeries,
+			formatXValue,
+			xTickCount,
+			xTickValues,
+			showPoints,
+			connectNulls,
+			showGridRows,
+			showGridColumns,
+			activeX: renderedActiveX,
+			activeLegendItemId: renderedActiveLegendItemId,
+			selectionRange,
+			yBands,
+			shouldAnimate,
+			isRendering,
+			...ariaProps,
+			onDatumPointerDown,
+			onDatumPointerMove,
+			onDatumPointerOut,
+			onDatumPointerUp
+		}), renderActiveOverlay != null && overlayX != null && renderedActiveX != null && renderActiveOverlay({
+			xPosition: overlayX,
+			activeX: renderedActiveX
+		})]
+	});
+	const legend = /* @__PURE__ */ jsx(ChartLegend, {
+		"aria-label": `${ariaProps["aria-label"]} legend`,
+		...legendProps,
+		layout: legendLayout,
+		items: legendItems,
+		onItemActiveChange: (item) => {
+			setActiveBuiltInLegendItemId(item?.id ?? null);
+			legendProps?.onItemActiveChange?.(item);
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("size-full min-h-0 min-w-0 @container", className),
+		...rootProps,
+		children: hasLegend ? /* @__PURE__ */ jsxs("div", {
+			className: cn("grid size-full min-h-0 min-w-0 grid-cols-1", legendLayout === "list" ? "grid-rows-[minmax(0,1fr)_minmax(0,35%)] gap-space-3 @[560px]:grid-cols-[minmax(0,1fr)_minmax(10rem,30%)] @[560px]:grid-rows-1 @[560px]:gap-space-5" : "grid-rows-[minmax(0,1fr)_auto] gap-space-2"),
+			children: [plot, legendLayout === "list" ? /* @__PURE__ */ jsx("div", {
+				className: "scroll-mask-t scroll-mask-b min-h-0 min-w-0 overflow-y-auto overflow-x-hidden",
+				children: legend
+			}) : legend]
+		}) : plot
+	});
+};
+//#endregion
+export { LineChart };
+
+//# sourceMappingURL=LineChart.js.map

package/dist/components/LineChart/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","names":[],"sources":["../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { useState, type HTMLAttributes } from 'react';\n\nimport { useResizeObserver } from '@mantine/hooks';\nimport { scaleLinear } from '@visx/scale';\n\nimport { getCategoricalLineChartColor } from '../../utils/chartColors';\nimport {\n  CHART_AXIS_LABEL_THICKNESS,\n  CHART_TICK_FONT_SIZE,\n  CHART_VALUE_AXIS_TICK_LENGTH,\n} from '../../utils/chartConstants';\nimport { cn } from '../../utils/cn';\nimport { getYAxisLeftMargin } from '../../utils/getYAxisLeftMargin';\nimport { ChartLegend, type ChartLegendItem } from '../ChartLegend';\nimport {\n  LINE_CHART_DEFAULT_TICK_COUNT,\n  LINE_CHART_VALUE_AXIS_THICKNESS,\n} from './constants';\nimport type {\n  LineChartDisplayAxis,\n  LineChartDisplaySeries,\n  LineChartProps,\n  LineChartYAxis,\n} from './LineChart.types';\nimport {\n  createLineChartXScaleAdapter,\n  getLineChartYDomainValues,\n  getLineSegments,\n  getNumericDomain,\n  normalizeLineChartSeries,\n} from './LineChart.utils';\nimport { LineChartPlot } from './LineChartPlot';\n\nexport type {\n  LineChartDisplayAxis,\n  LineChartDisplaySeries,\n  LineChartGrid,\n  LineChartInteractionDatum,\n  LineChartInteractionPoint,\n  LineChartPoint,\n  LineChartProps,\n  LineChartSelectionRange,\n  LineChartSeries,\n  LineChartXScale,\n  LineChartYBand,\n  LineChartYAxis,\n} from './LineChart.types';\n\ntype LineChartAxisLayout = {\n  config: LineChartYAxis;\n  domain: [number, number];\n  nice: boolean;\n  thickness: number;\n};\n\nconst DEFAULT_AXIS_ID = 'line-chart-default-axis';\nconst CHART_MARGIN_TOP = 8;\nconst CHART_MARGIN_BOTTOM = 28;\nconst CHART_MARGIN_RIGHT = 8;\nconst DEFAULT_STROKE_WIDTH = 2;\nconst NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {\n  maximumFractionDigits: 2,\n});\n\nconst defaultFormatValue = (value: number) => NUMBER_FORMATTER.format(value);\n\nconst resolveAxisLayouts = (\n  series: readonly LineChartDisplaySeries[],\n  configuredAxes: readonly LineChartYAxis[] | undefined,\n  xDomain: readonly [number, number],\n  connectNulls: boolean\n): readonly LineChartAxisLayout[] => {\n  const axisConfigs = new Map(\n    configuredAxes?.map((axis) => [axis.id, axis]) ?? []\n  );\n  const axisIds = Array.from(\n    new Set(configuredAxes?.map((axis) => axis.id) ?? [])\n  );\n\n  for (const item of series) {\n    if (!axisIds.includes(item.yAxisId)) axisIds.push(item.yAxisId);\n  }\n  if (axisIds.length === 0) axisIds.push(DEFAULT_AXIS_ID);\n\n  return axisIds.map((axisId): LineChartAxisLayout => {\n    const config = axisConfigs.get(axisId) ?? { id: axisId };\n    const values = series\n      .filter((item) => item.yAxisId === axisId)\n      .flatMap((item) =>\n        getLineChartYDomainValues(item.points, xDomain, connectNulls)\n      );\n    const domain = getNumericDomain(values, config.domain);\n    const nice = config.domain == null;\n    const tickLabelThickness = getYAxisLeftMargin({\n      yDomain: domain,\n      formatTick: config.formatValue ?? defaultFormatValue,\n      fontSize: CHART_TICK_FONT_SIZE,\n      numTicks: config.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT,\n      tickValues: config.tickValues,\n      tickLength: CHART_VALUE_AXIS_TICK_LENGTH,\n      nice,\n    });\n    return {\n      config,\n      domain,\n      nice,\n      thickness:\n        Math.max(LINE_CHART_VALUE_AXIS_THICKNESS, tickLabelThickness) +\n        (config.label == null ? 0 : CHART_AXIS_LABEL_THICKNESS),\n    };\n  });\n};\n\nconst resolveAxes = (\n  layouts: readonly LineChartAxisLayout[],\n  innerHeight: number\n): readonly LineChartDisplayAxis[] =>\n  layouts.map(({ config, domain, nice, thickness }) => ({\n    ...config,\n    thickness,\n    scale: scaleLinear<number>({\n      domain,\n      range: [innerHeight, 0],\n      nice,\n    }),\n  }));\n\n/**\n * Responsive numeric line chart with nullable observations, multiple axes,\n * legend filtering, configurable grids and x scales, brushing, and\n * consumer-owned tooltip interactions.\n */\nexport const LineChart = ({\n  series,\n  yAxes,\n  xDomain,\n  formatXValue = defaultFormatValue,\n  xScale: xScaleType = 'linear',\n  xTickCount,\n  xTickValues,\n  selectedIds,\n  showPoints = false,\n  connectNulls = true,\n  grid,\n  activeX,\n  activeLegendItemId,\n  selectionRange,\n  yBands = [],\n  renderActiveOverlay,\n  shouldAnimate = true,\n  isRendering = true,\n  showLegend,\n  legendProps,\n  onDatumPointerDown,\n  onDatumPointerMove,\n  onDatumPointerOut,\n  onDatumPointerUp,\n  className,\n  ...rest\n}: LineChartProps) => {\n  const [activeBuiltInLegendItemId, setActiveBuiltInLegendItemId] = useState<\n    string | null\n  >(null);\n  const ariaProps = {\n    'aria-describedby': rest['aria-describedby'],\n    'aria-label': rest['aria-label'],\n  };\n  const rootProps: HTMLAttributes<HTMLDivElement> = { ...rest };\n  delete rootProps['aria-describedby'];\n  delete rootProps['aria-label'];\n\n  const [containerRef, dimensions] = useResizeObserver();\n  const normalizedSeries = normalizeLineChartSeries(series);\n  const defaultAxisId = yAxes?.[0]?.id ?? DEFAULT_AXIS_ID;\n  const displaySeries: readonly LineChartDisplaySeries[] = normalizedSeries.map(\n    (item, index) => ({\n      ...item,\n      color: item.color ?? getCategoricalLineChartColor(index),\n      yAxisId: item.yAxisId ?? defaultAxisId,\n      strokeWidth:\n        item.strokeWidth == null || !Number.isFinite(item.strokeWidth)\n          ? DEFAULT_STROKE_WIDTH\n          : Math.max(0, item.strokeWidth),\n      opacity:\n        item.opacity == null || !Number.isFinite(item.opacity)\n          ? 1\n          : Math.min(1, Math.max(0, item.opacity)),\n      showActiveMarker: item.showActiveMarker ?? true,\n    })\n  );\n  const visibleSeries =\n    selectedIds == null || selectedIds.size === 0\n      ? displaySeries\n      : displaySeries.filter((item) => selectedIds.has(item.id));\n  const xValues = visibleSeries.flatMap((item) =>\n    item.points.map((point) => point.x)\n  );\n  const resolvedXDomain = getNumericDomain(xValues, xDomain);\n  const uniqueXValues = Array.from(\n    new Set(\n      xValues.filter(\n        (value) => value >= resolvedXDomain[0] && value <= resolvedXDomain[1]\n      )\n    )\n  ).sort((left, right) => left - right);\n  const renderedSeries =\n    xScaleType === 'band'\n      ? visibleSeries.map((item) => ({\n          ...item,\n          points: item.points.filter(\n            (point) =>\n              point.x >= resolvedXDomain[0] && point.x <= resolvedXDomain[1]\n          ),\n        }))\n      : visibleSeries;\n  const renderedActiveX =\n    xScaleType !== 'band' ||\n    (activeX != null &&\n      activeX >= resolvedXDomain[0] &&\n      activeX <= resolvedXDomain[1])\n      ? activeX\n      : undefined;\n  const axisLayouts = resolveAxisLayouts(\n    renderedSeries,\n    yAxes,\n    resolvedXDomain,\n    connectNulls\n  );\n  const chartMargin = {\n    top: CHART_MARGIN_TOP,\n    right:\n      CHART_MARGIN_RIGHT +\n      axisLayouts.slice(1).reduce((total, axis) => total + axis.thickness, 0),\n    bottom: CHART_MARGIN_BOTTOM,\n    left: axisLayouts[0]?.thickness ?? LINE_CHART_VALUE_AXIS_THICKNESS,\n  };\n  const innerWidth = Math.max(\n    0,\n    dimensions.width - chartMargin.left - chartMargin.right\n  );\n  const innerHeight = Math.max(\n    0,\n    dimensions.height - chartMargin.top - chartMargin.bottom\n  );\n  const xScaleAdapter = createLineChartXScaleAdapter({\n    type: xScaleType,\n    domain: resolvedXDomain,\n    values: uniqueXValues,\n    width: innerWidth,\n    nice: xDomain == null,\n  });\n  const axes = resolveAxes(axisLayouts, innerHeight);\n\n  const activeXPos =\n    renderedActiveX == null ? null : xScaleAdapter.getPosition(renderedActiveX);\n  const overlayX =\n    activeXPos != null && activeXPos >= 0 && activeXPos <= innerWidth\n      ? chartMargin.left + activeXPos\n      : null;\n\n  const legendItems: readonly ChartLegendItem[] = displaySeries.map((item) => ({\n    id: item.id,\n    label: item.label,\n    markerColor: item.color,\n    selected: selectedIds?.has(item.id) ?? false,\n  }));\n  const hasLegend =\n    (showLegend ?? legendItems.length > 1) && legendItems.length > 0;\n  const legendLayout = legendProps?.layout ?? 'inline';\n  const requestedActiveLegendItemId =\n    (hasLegend ? activeBuiltInLegendItemId : null) ?? activeLegendItemId;\n  const renderedActiveLegendItemId = renderedSeries.some((item) => {\n    if (item.id !== requestedActiveLegendItemId) return false;\n\n    const [domainMinimum, domainMaximum] = resolvedXDomain;\n    const hasVisiblePoint =\n      showPoints &&\n      item.points.some(\n        (point) =>\n          point.y != null &&\n          point.x >= domainMinimum &&\n          point.x <= domainMaximum\n      );\n    if (hasVisiblePoint) return true;\n\n    return getLineSegments(item.points, connectNulls).some((segment) =>\n      segment.some((point, index) => {\n        const nextPoint = segment[index + 1];\n        return (\n          nextPoint != null &&\n          point.x <= domainMaximum &&\n          nextPoint.x >= domainMinimum\n        );\n      })\n    );\n  })\n    ? requestedActiveLegendItemId\n    : null;\n  const showGridRows = grid === false ? false : (grid?.rows ?? true);\n  const showGridColumns = grid === false ? false : (grid?.columns ?? true);\n\n  const plot = (\n    <div ref={containerRef} className=\"relative size-full min-h-0 min-w-0\">\n      <LineChartPlot\n        width={dimensions.width}\n        height={dimensions.height}\n        innerWidth={innerWidth}\n        innerHeight={innerHeight}\n        chartMargin={chartMargin}\n        xScale={xScaleAdapter.scale}\n        getXPosition={xScaleAdapter.getPosition}\n        getXValue={xScaleAdapter.getValue}\n        getXRangePosition={xScaleAdapter.getRangePosition}\n        uniqueXValues={uniqueXValues}\n        axes={axes}\n        series={renderedSeries}\n        formatXValue={formatXValue}\n        xTickCount={xTickCount}\n        xTickValues={xTickValues}\n        showPoints={showPoints}\n        connectNulls={connectNulls}\n        showGridRows={showGridRows}\n        showGridColumns={showGridColumns}\n        activeX={renderedActiveX}\n        activeLegendItemId={renderedActiveLegendItemId}\n        selectionRange={selectionRange}\n        yBands={yBands}\n        shouldAnimate={shouldAnimate}\n        isRendering={isRendering}\n        {...ariaProps}\n        onDatumPointerDown={onDatumPointerDown}\n        onDatumPointerMove={onDatumPointerMove}\n        onDatumPointerOut={onDatumPointerOut}\n        onDatumPointerUp={onDatumPointerUp}\n      />\n      {renderActiveOverlay != null &&\n        overlayX != null &&\n        renderedActiveX != null &&\n        renderActiveOverlay({ xPosition: overlayX, activeX: renderedActiveX })}\n    </div>\n  );\n\n  const legend = (\n    <ChartLegend\n      aria-label={`${ariaProps['aria-label']} legend`}\n      {...legendProps}\n      layout={legendLayout}\n      items={legendItems}\n      onItemActiveChange={(item) => {\n        setActiveBuiltInLegendItemId(item?.id ?? null);\n        legendProps?.onItemActiveChange?.(item);\n      }}\n    />\n  );\n\n  return (\n    <div\n      className={cn('size-full min-h-0 min-w-0 @container', className)}\n      {...rootProps}\n    >\n      {hasLegend ? (\n        <div\n          className={cn(\n            'grid size-full min-h-0 min-w-0 grid-cols-1',\n            legendLayout === 'list'\n              ? 'grid-rows-[minmax(0,1fr)_minmax(0,35%)] gap-space-3 @[560px]:grid-cols-[minmax(0,1fr)_minmax(10rem,30%)] @[560px]:grid-rows-1 @[560px]:gap-space-5'\n              : 'grid-rows-[minmax(0,1fr)_auto] gap-space-2'\n          )}\n        >\n          {plot}\n          {legendLayout === 'list' ? (\n            <div className=\"scroll-mask-t scroll-mask-b min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\">\n              {legend}\n            </div>\n          ) : (\n            legend\n          )}\n        </div>\n      ) : (\n        plot\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/LineChart/LineChart.types.d.ts

@@ -0,0 +1,138 @@
+import type { AriaAttributes, HTMLAttributes, PointerEvent, ReactNode } from 'react';
+import type { scaleLinear } from '@visx/scale';
+import type { ChartLegendProps } from '../ChartLegend/index.js';
+export type LineChartPoint = {
+    x: number;
+    y: number | null;
+};
+export type LineChartSeries = {
+    id: string;
+    label: ReactNode;
+    /** Plain-text series name used by assistive technology. Defaults to `id`. */
+    'aria-label'?: AriaAttributes['aria-label'];
+    points: readonly LineChartPoint[];
+    color?: string;
+    yAxisId?: string;
+    /** Defaults to 2. */
+    strokeWidth?: number;
+    /** SVG dash pattern such as `5 4`. */
+    strokeDasharray?: string;
+    /** Series opacity from 0 to 1. Defaults to 1. */
+    opacity?: number;
+    /** Whether the controlled crosshair draws this series' marker. Defaults to true. */
+    showActiveMarker?: boolean;
+};
+export type LineChartYAxis = {
+    id: string;
+    label?: string;
+    domain?: readonly [number, number];
+    formatValue?: (value: number) => string;
+    tickCount?: number;
+    /** Fixed y-axis and horizontal-grid tick values. */
+    tickValues?: readonly number[];
+};
+export type LineChartInteractionPoint = {
+    seriesId: string;
+    seriesLabel: ReactNode;
+    color: string;
+    value: number | null;
+};
+export type LineChartInteractionDatum = {
+    /** Nearest rendered data bucket. */
+    x: number;
+    /** Unsnapped x-domain value directly beneath the pointer. */
+    pointerX: number;
+    /** Horizontal SVG coordinate for positioning consumer-owned overlays. */
+    xPosition: number;
+    points: readonly LineChartInteractionPoint[];
+};
+export type LineChartXScale = 'linear' | 'band';
+export type LineChartSelectionRange = {
+    from: number;
+    to: number;
+};
+export type LineChartGrid = {
+    /** Defaults to true. Grid guides are dashed. */
+    rows?: boolean;
+    /** Defaults to true. Grid guides are dashed. */
+    columns?: boolean;
+};
+export type LineChartYBand = {
+    id: string;
+    /** Defaults to the primary y axis. */
+    yAxisId?: string;
+    /** Defaults to the lower edge of the axis domain. */
+    from?: number;
+    /** Defaults to the upper edge of the axis domain. */
+    to?: number;
+    /** Use a design-system CSS color token. */
+    color: string;
+    opacity?: number;
+};
+export type LineChartDisplaySeries = {
+    id: string;
+    label: ReactNode;
+    'aria-label'?: AriaAttributes['aria-label'];
+    points: readonly LineChartPoint[];
+    color: string;
+    yAxisId: string;
+    strokeWidth: number;
+    strokeDasharray?: string;
+    opacity: number;
+    showActiveMarker: boolean;
+};
+export type LineChartDisplayAxis = LineChartYAxis & {
+    thickness: number;
+    scale: ReturnType<typeof scaleLinear<number>>;
+};
+type LineChartLegendProps = Omit<ChartLegendProps, 'items'>;
+type LineChartLegendConfig = {
+    showLegend?: true;
+    legendProps?: LineChartLegendProps;
+} | {
+    showLegend: false;
+    legendProps?: never;
+};
+export type LineChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onPointerLeave' | 'onPointerMove' | 'onPointerOut' | 'onPointerUp' | 'aria-describedby' | 'aria-label'> & LineChartLegendConfig & {
+    series: readonly LineChartSeries[];
+    yAxes?: readonly LineChartYAxis[];
+    xDomain?: readonly [number, number];
+    formatXValue?: (value: number) => string;
+    /** Linear preserves elapsed distance; band spaces buckets evenly. Defaults to linear. */
+    xScale?: LineChartXScale;
+    xTickCount?: number;
+    xTickValues?: readonly number[];
+    selectedIds?: ReadonlySet<string>;
+    showPoints?: boolean;
+    /** Connects valid observations across null values. Defaults to true. */
+    connectNulls?: boolean;
+    /** Visible horizontal and vertical grid lines. Pass false to hide both. */
+    grid?: LineChartGrid | false;
+    /** Draws a crosshair and point markers at this x value. */
+    activeX?: number;
+    /** Emphasizes the series represented by one external legend item. Built-in legends set this automatically. */
+    activeLegendItemId?: string | null;
+    /** Controlled x-domain range drawn over the plot for brush selection. */
+    selectionRange?: LineChartSelectionRange;
+    /** Background ranges such as warning or threshold regions. */
+    yBands?: readonly LineChartYBand[];
+    /**
+     * Rendered inside the plot's relative container at the resolved activeX
+     * position (SVG-container-relative pixels). Only invoked when activeX is
+     * inside the plot bounds.
+     */
+    renderActiveOverlay?: (info: {
+        xPosition: number;
+        activeX: number;
+    }) => ReactNode;
+    /** Animates the chart unless reduced motion is preferred. Defaults to true. */
+    shouldAnimate?: boolean;
+    isRendering?: boolean;
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    'aria-label': string;
+    onDatumPointerMove?: (datum: LineChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+    onDatumPointerDown?: (datum: LineChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+    onDatumPointerOut?: () => void;
+    onDatumPointerUp?: (datum: LineChartInteractionDatum, event: PointerEvent<SVGSVGElement>) => void;
+};
+export {};

package/dist/components/LineChart/LineChart.utils.d.ts

@@ -0,0 +1,29 @@
+import { scaleBand, scaleLinear } from '@visx/scale';
+import type { LineChartPoint, LineChartSeries, LineChartXScale } from './LineChart.types.js';
+export type NormalizedLineChartSeries = Omit<LineChartSeries, 'points'> & {
+    points: readonly LineChartPoint[];
+};
+type CreateLineChartXScaleAdapterArgs = {
+    type: LineChartXScale;
+    domain: readonly [number, number];
+    values: readonly number[];
+    width: number;
+    nice: boolean;
+};
+export type LineChartScale = ReturnType<typeof scaleBand<number>> | ReturnType<typeof scaleLinear<number>>;
+export type LineChartXScaleAdapter = {
+    scale: LineChartScale;
+    getPosition: (value: number) => number;
+    getValue: (position: number) => number;
+    getRangePosition: (value: number) => number;
+};
+export declare const getSelectionBounds: (start: number | null, end: number | null, maximum: number) => {
+    x: number;
+    width: number;
+} | null;
+export declare const createLineChartXScaleAdapter: ({ type, domain, values, width, nice, }: CreateLineChartXScaleAdapterArgs) => LineChartXScaleAdapter;
+export declare const getNumericDomain: (values: readonly number[], configuredDomain?: readonly [number, number]) => [number, number];
+export declare const normalizeLineChartSeries: (series: readonly LineChartSeries[]) => readonly NormalizedLineChartSeries[];
+export declare const getLineSegments: (points: readonly LineChartPoint[], connectNulls?: boolean) => readonly LineChartPoint[][];
+export declare const getLineChartYDomainValues: (points: readonly LineChartPoint[], domain: readonly [number, number], connectNulls?: boolean) => number[];
+export {};