@langchain/macaw-components 1.0.0-beta.0

package/dist/components/GroupedTabs/GroupedTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedTabs.js","names":[],"sources":["../../../src/components/GroupedTabs/GroupedTabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport type { IconComponent, IconWeight } from '../../utils/icon-types';\nimport { Text } from '../Text';\nimport type { TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nexport interface GroupedTabOption<T> {\n  display?: ReactNode | ((isActive: boolean) => ReactNode);\n  value: T;\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;\n  icon?: IconComponent;\n  iconWeight?: IconWeight;\n  leftDecorator?: ReactNode;\n  rightDecorator?: ReactNode;\n  className?: string;\n  size?: 'xs' | 'sm' | 'md';\n  textClassName?: string;\n  'aria-label'?: string;\n}\n\nexport type GroupedTabsProps<T extends string | number> = {\n  value: T;\n  onChange: (value: T) => void;\n  options: readonly GroupedTabOption<T>[];\n  className?: string;\n  size?: 'xs' | 'sm' | 'md';\n  disabled?: boolean;\n  tooltip?: string | ReactNode;\n  selectionClassName?: string;\n  /** Optional class for the indicator (e.g. to override top/height for custom margins) */\n  indicatorClassName?: string;\n};\n\nexport const GroupedTabs = <T extends string | number>({\n  value,\n  onChange,\n  options,\n  className,\n  size = 'sm',\n  disabled,\n  tooltip,\n  selectionClassName,\n  indicatorClassName,\n}: GroupedTabsProps<T>) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [clipState, setClipState] = useState<{\n    path: string;\n    isFirst: boolean;\n    animate: boolean;\n  }>({ path: '', isFirst: true, animate: false });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const activeIndex = options.findIndex((option) => option.value === value);\n    const activeButton = buttonRefs.current[activeIndex];\n\n    if (activeButton && container) {\n      const containerRect = container.getBoundingClientRect();\n      const buttonRect = activeButton.getBoundingClientRect();\n      const roundValue = size === 'xs' ? '1px' : size === 'sm' ? '2px' : '4px';\n\n      const top = buttonRect.top - containerRect.top - container.clientTop;\n      const bottom =\n        containerRect.bottom - buttonRect.bottom - container.clientTop;\n      const left = buttonRect.left - containerRect.left - container.clientLeft;\n      const right =\n        containerRect.right - buttonRect.right - container.clientLeft;\n\n      setClipState((prev) => ({\n        path: `inset(${top}px ${right}px ${bottom}px ${left}px round ${roundValue})`,\n        isFirst: false,\n        animate: !prev.isFirst,\n      }));\n    }\n  }, [size, value, options]);\n\n  const isActive = (option: GroupedTabOption<T>) => option.value === value;\n  return (\n    <Tooltip title={tooltip}>\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative flex w-fit border border-subtle bg-surface-level-1 p-0.5 dark:border-muted',\n          size === 'xs' ? 'gap-px' : 'gap-0.5',\n          size === 'xs'\n            ? 'rounded-[2px]'\n            : size === 'sm'\n              ? 'rounded-[3px]'\n              : 'rounded-sm',\n          className\n        )}\n      >\n        {/* Clip-path animated background indicator */}\n        {clipState.path && (\n          <div\n            aria-hidden\n            className={cn(\n              'pointer-events-none absolute inset-0 bg-surface-level-4',\n              selectionClassName,\n              indicatorClassName\n            )}\n            style={{\n              clipPath: clipState.path,\n              transition: clipState.animate\n                ? 'clip-path 0.25s ease-out, background-color 0.25s ease-out'\n                : 'none',\n            }}\n          />\n        )}\n\n        {options.map((option, idx) => (\n          <Tooltip\n            key={option.value}\n            title={option.tooltip}\n            {...option.tooltipProps}\n          >\n            {/* eslint-disable-next-line react/forbid-elements */}\n            <button\n              ref={(el) => {\n                buttonRefs.current[idx] = el;\n              }}\n              type=\"button\"\n              aria-label={option['aria-label']}\n              onClick={() => onChange(option.value)}\n              disabled={option.disabled || disabled}\n              className={cn(\n                'relative flex items-center gap-space-1',\n                'transition-colors duration-fast',\n                {\n                  'rounded-xs px-space-1 py-px': size === 'xs',\n                  'rounded-xs px-space-2 py-0.5': size === 'sm',\n                  'rounded-sm px-space-2 py-space-1': size === 'md',\n                },\n                {\n                  'text-primary': isActive(option),\n                  'text-secondary hover:bg-surface-level-1-hover':\n                    !isActive(option),\n                },\n                (option.disabled || disabled) &&\n                  'text-disabled hover:bg-transparent',\n                option.className\n              )}\n            >\n              {option.icon && (\n                <option.icon\n                  aria-hidden\n                  className={size === 'xs' ? 'size-3' : 'size-4'}\n                  weight={option.iconWeight}\n                />\n              )}\n              {option.leftDecorator}\n              {option.display &&\n                (typeof option.display === 'function' ? (\n                  option.display(isActive(option))\n                ) : (\n                  <Text\n                    variant={size === 'xs' ? 'xs' : 'sm'}\n                    className={cn('font-medium', option.textClassName)}\n                  >\n                    {option.display}\n                  </Text>\n                ))}\n              {option.rightDecorator}\n            </button>\n          </Tooltip>\n        ))}\n      </div>\n    </Tooltip>\n  );\n};\n"],"mappings":";;;;;;AAsCA,IAAa,eAA0C,EACrD,OACA,UACA,SACA,WACA,OAAO,MACP,UACA,SACA,oBACA,yBACyB;CACzB,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,aAAa,OAAqC,CAAC,CAAC;CAC1D,MAAM,CAAC,WAAW,gBAAgB,SAI/B;EAAE,MAAM;EAAI,SAAS;EAAM,SAAS;CAAM,CAAC;CAE9C,gBAAgB;EACd,MAAM,YAAY,aAAa;EAC/B,MAAM,cAAc,QAAQ,WAAW,WAAW,OAAO,UAAU,KAAK;EACxE,MAAM,eAAe,WAAW,QAAQ;EAExC,IAAI,gBAAgB,WAAW;GAC7B,MAAM,gBAAgB,UAAU,sBAAsB;GACtD,MAAM,aAAa,aAAa,sBAAsB;GACtD,MAAM,aAAa,SAAS,OAAO,QAAQ,SAAS,OAAO,QAAQ;GAEnE,MAAM,MAAM,WAAW,MAAM,cAAc,MAAM,UAAU;GAC3D,MAAM,SACJ,cAAc,SAAS,WAAW,SAAS,UAAU;GACvD,MAAM,OAAO,WAAW,OAAO,cAAc,OAAO,UAAU;GAC9D,MAAM,QACJ,cAAc,QAAQ,WAAW,QAAQ,UAAU;GAErD,cAAc,UAAU;IACtB,MAAM,SAAS,IAAI,KAAK,MAAM,KAAK,OAAO,KAAK,KAAK,WAAW,WAAW;IAC1E,SAAS;IACT,SAAS,CAAC,KAAK;GACjB,EAAE;EACJ;CACF,GAAG;EAAC;EAAM;EAAO;CAAO,CAAC;CAEzB,MAAM,YAAY,WAAgC,OAAO,UAAU;CACnE,OACE,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,GACT,uFACA,SAAS,OAAO,WAAW,WAC3B,SAAS,OACL,kBACA,SAAS,OACP,kBACA,cACN,SACF;GAXF,UAAA,CAcG,UAAU,QACT,oBAAC,OAAD;IACE,eAAA;IACA,WAAW,GACT,2DACA,oBACA,kBACF;IACA,OAAO;KACL,UAAU,UAAU;KACpB,YAAY,UAAU,UAClB,8DACA;IACN;GACD,CAAA,GAGF,QAAQ,KAAK,QAAQ,QACpB,oBAAC,SAAD;IAEE,OAAO,OAAO;IACd,GAAI,OAAO;IAGX,UAAA,qBAAC,UAAD;KACE,MAAM,OAAO;MACX,WAAW,QAAQ,OAAO;KAC5B;KACA,MAAK;KACL,cAAY,OAAO;KACnB,eAAe,SAAS,OAAO,KAAK;KACpC,UAAU,OAAO,YAAY;KAC7B,WAAW,GACT,0CACA,mCACA;MACE,+BAA+B,SAAS;MACxC,gCAAgC,SAAS;MACzC,oCAAoC,SAAS;KAC/C,GACA;MACE,gBAAgB,SAAS,MAAM;MAC/B,iDACE,CAAC,SAAS,MAAM;KACpB,IACC,OAAO,YAAY,aAClB,sCACF,OAAO,SACT;KAxBF,UAAA;MA0BG,OAAO,QACN,oBAAC,OAAO,MAAR;OACE,eAAA;OACA,WAAW,SAAS,OAAO,WAAW;OACtC,QAAQ,OAAO;MAChB,CAAA;MAEF,OAAO;MACP,OAAO,YACL,OAAO,OAAO,YAAY,aACzB,OAAO,QAAQ,SAAS,MAAM,CAAC,IAE/B,oBAAC,MAAD;OACE,SAAS,SAAS,OAAO,OAAO;OAChC,WAAW,GAAG,eAAe,OAAO,aAAa;OAEhD,UAAA,OAAO;MACJ,CAAA;MAET,OAAO;KACF;;GACD,GApDF,OAAO,KAoDL,CACV,CACE;;CACE,CAAA;AAEb"}

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

@@ -0,0 +1,2 @@
+export { GroupedTabs } from './GroupedTabs.js';
+export type { GroupedTabOption, GroupedTabsProps } from './GroupedTabs.js';

package/dist/components/GroupedTabs/index.js

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

package/dist/components/HoverCard.d.ts

@@ -0,0 +1,4 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+export declare const HoverCard: import("react").FC<HoverCardPrimitive.HoverCardProps>;
+export declare const HoverCardTrigger: import("react").ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const HoverCardContent: import("react").ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/HoverCard.js

@@ -0,0 +1,34 @@
+import { cn } from "../utils/cn.js";
+import zIndices from "../utils/zIndices.js";
+import { useZIndex } from "../utils/useZIndex.js";
+import { ZIndexProvider } from "../utils/ZIndexContext.js";
+import { popoverSurfaceClassName } from "./Popover/constants.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+//#region packages/components/src/components/HoverCard.tsx
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = forwardRef(({ className, align = "center", sideOffset = 4, children, ...props }, ref) => {
+	const zIndex = useZIndex(zIndices.popover);
+	return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
+		ref,
+		align,
+		sideOffset,
+		className: cn(popoverSurfaceClassName, className),
+		...props,
+		style: {
+			zIndex,
+			...props.style
+		},
+		children: /* @__PURE__ */ jsx(ZIndexProvider, {
+			value: zIndex,
+			children
+		})
+	}) });
+});
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+
+//# sourceMappingURL=HoverCard.js.map

package/dist/components/HoverCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.js","names":[],"sources":["../../src/components/HoverCard.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ElementRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card';\n\nimport { cn } from '../utils/cn';\nimport { useZIndex } from '../utils/useZIndex';\nimport { ZIndexProvider } from '../utils/ZIndexContext';\nimport zIndices from '../utils/zIndices';\nimport { popoverSurfaceClassName } from './Popover/constants';\n\nexport const HoverCard = HoverCardPrimitive.Root;\n\nexport const HoverCardTrigger = HoverCardPrimitive.Trigger;\n\nexport const HoverCardContent = forwardRef<\n  ElementRef<typeof HoverCardPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(\n  (\n    { className, align = 'center', sideOffset = 4, children, ...props },\n    ref\n  ) => {\n    const zIndex = useZIndex(zIndices.popover);\n\n    return (\n      <HoverCardPrimitive.Portal>\n        <HoverCardPrimitive.Content\n          ref={ref}\n          align={align}\n          sideOffset={sideOffset}\n          className={cn(popoverSurfaceClassName, className)}\n          {...props}\n          style={{ zIndex, ...props.style }}\n        >\n          <ZIndexProvider value={zIndex}>{children}</ZIndexProvider>\n        </HoverCardPrimitive.Content>\n      </HoverCardPrimitive.Portal>\n    );\n  }\n);\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;;AAWA,IAAa,YAAY,mBAAmB;AAE5C,IAAa,mBAAmB,mBAAmB;AAEnD,IAAa,mBAAmB,YAK5B,EAAE,WAAW,QAAQ,UAAU,aAAa,GAAG,UAAU,GAAG,SAC5D,QACG;CACH,MAAM,SAAS,UAAU,SAAS,OAAO;CAEzC,OACE,oBAAC,mBAAmB,QAApB,EAAA,UACE,oBAAC,mBAAmB,SAApB;EACO;EACE;EACK;EACZ,WAAW,GAAG,yBAAyB,SAAS;EAChD,GAAI;EACJ,OAAO;GAAE;GAAQ,GAAG,MAAM;EAAM;EAEhC,UAAA,oBAAC,gBAAD;GAAgB,OAAO;GAAS;EAAyB,CAAA;CAC/B,CAAA,EACH,CAAA;AAE/B,CACF;AACA,iBAAiB,cAAc,mBAAmB,QAAQ"}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,25 @@
+import type { VisualElementSize } from '../../utils/componentSizes.js';
+import type { IconComponent, IconWeight } from '../../utils/icon-types.js';
+import type { TooltipProps } from '../Tooltip/index.js';
+export type { IconComponent } from '../../utils/icon-types.js';
+type IconSize = VisualElementSize | 'lg' | 'xl';
+export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Icon component to display */
+    icon: IconComponent;
+    /** Color scheme for the icon */
+    color?: 'neutral' | 'brand' | 'success' | 'warning' | 'info' | 'error' | 'special';
+    /** Whether the background should be rounded */
+    rounded?: boolean;
+    /** Optional label - renders a tooltip when provided */
+    label?: React.ReactNode;
+    /** The size of the icon. Decorated icons also receive the corresponding presentation box. */
+    size?: IconSize;
+    /** Class name for the icon */
+    iconClassName?: string;
+    /** Weight used to render the icon */
+    weight?: IconWeight;
+    /** Tooltip props */
+    tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
+}
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Icon };

package/dist/components/Icon/Icon.js

@@ -0,0 +1,57 @@
+import { cn } from "../../utils/cn.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/Icon/Icon.tsx
+var ICON_GLYPH_SIZE = {
+	xxs: "size-3",
+	xs: "size-3",
+	sm: "size-3",
+	md: "size-4",
+	lg: "size-5",
+	xl: "size-6"
+};
+var Icon = forwardRef(({ icon: IconElement, color, rounded = false, label, size = "md", className, iconClassName, weight, tooltipProps, ...props }, ref) => {
+	const baseStyles = cn("inline-flex flex-shrink-0 items-center justify-center [&_path]:stroke-[1.5px]", color && {
+		"p-[2px]": size === "xs",
+		"p-space-1": size === "sm" || size === "md",
+		"p-space-2": size === "lg",
+		"p-space-3": size === "xl"
+	}, color && {
+		"rounded-full": rounded,
+		"rounded-md": !rounded
+	});
+	const getColorStyles = () => {
+		switch (color) {
+			case "success": return "bg-success-subtle text-status-green dark:bg-success";
+			case "warning": return "bg-warning-subtle dark:bg-warning text-status-orange";
+			case "brand":
+			case "info": return "bg-brand-subtle text-brand-primary";
+			case "error": return "bg-error-subtle text-status-red dark:bg-error";
+			case "special": return "bg-ls-acid-50 text-ls-acid-700";
+			case "neutral": return "bg-surface-level-4 text-secondary";
+			default: return "text-primary";
+		}
+	};
+	const content = /* @__PURE__ */ jsx("span", {
+		ref,
+		className: cn(baseStyles, getColorStyles(), className),
+		...props,
+		children: /* @__PURE__ */ jsx(IconElement, {
+			className: cn(ICON_GLYPH_SIZE[size], "flex-shrink-0", iconClassName),
+			weight
+		})
+	});
+	if (label) return /* @__PURE__ */ jsx(Tooltip, {
+		...tooltipProps,
+		title: label,
+		side: tooltipProps?.side ?? "top",
+		children: content
+	});
+	return content;
+});
+Icon.displayName = "Icon";
+//#endregion
+export { Icon };
+
+//# sourceMappingURL=Icon.js.map

package/dist/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport type { VisualElementSize } from '../../utils/componentSizes';\nimport type { IconComponent, IconWeight } from '../../utils/icon-types';\nimport type { TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nexport type { IconComponent } from '../../utils/icon-types';\n\ntype IconSize = VisualElementSize | 'lg' | 'xl';\n\nconst ICON_GLYPH_SIZE: Record<IconSize, string> = {\n  xxs: 'size-3',\n  xs: 'size-3',\n  sm: 'size-3',\n  md: 'size-4',\n  lg: 'size-5',\n  xl: 'size-6',\n};\n\nexport interface IconProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon component to display */\n  icon: IconComponent;\n  /** Color scheme for the icon */\n  color?:\n    | 'neutral'\n    | 'brand'\n    | 'success'\n    | 'warning'\n    | 'info'\n    | 'error'\n    | 'special';\n  /** Whether the background should be rounded */\n  rounded?: boolean;\n  /** Optional label - renders a tooltip when provided */\n  label?: React.ReactNode;\n  /** The size of the icon. Decorated icons also receive the corresponding presentation box. */\n  size?: IconSize;\n  /** Class name for the icon */\n  iconClassName?: string;\n  /** Weight used to render the icon */\n  weight?: IconWeight;\n  /** Tooltip props */\n  tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;\n}\n\nconst Icon = forwardRef<HTMLDivElement, IconProps>(\n  (\n    {\n      icon: IconElement,\n      color,\n      rounded = false,\n      label,\n      size = 'md',\n      className,\n      iconClassName,\n      weight,\n      tooltipProps,\n      ...props\n    },\n    ref\n  ) => {\n    const baseStyles = cn(\n      'inline-flex flex-shrink-0 items-center justify-center [&_path]:stroke-[1.5px]',\n      color && {\n        'p-[2px]': size === 'xs',\n        'p-space-1': size === 'sm' || size === 'md',\n        'p-space-2': size === 'lg',\n        'p-space-3': size === 'xl',\n      },\n      color && {\n        'rounded-full': rounded,\n        'rounded-md': !rounded,\n      }\n    );\n\n    const getColorStyles = () => {\n      switch (color) {\n        case 'success':\n          return 'bg-success-subtle text-status-green dark:bg-success';\n        case 'warning':\n          return 'bg-warning-subtle dark:bg-warning text-status-orange';\n        case 'brand':\n        case 'info':\n          return 'bg-brand-subtle text-brand-primary';\n        case 'error':\n          return 'bg-error-subtle text-status-red dark:bg-error';\n        case 'special':\n          return 'bg-ls-acid-50 text-ls-acid-700';\n        case 'neutral':\n          return 'bg-surface-level-4 text-secondary';\n        default:\n          return 'text-primary';\n      }\n    };\n\n    const content = (\n      <span\n        ref={ref}\n        className={cn(baseStyles, getColorStyles(), className)}\n        {...props}\n      >\n        <IconElement\n          className={cn(ICON_GLYPH_SIZE[size], 'flex-shrink-0', iconClassName)}\n          weight={weight}\n        />\n      </span>\n    );\n\n    if (label) {\n      return (\n        <Tooltip\n          {...tooltipProps}\n          title={label}\n          side={tooltipProps?.side ?? 'top'}\n        >\n          {content}\n        </Tooltip>\n      );\n    }\n\n    return content;\n  }\n);\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\n"],"mappings":";;;;;AAYA,IAAM,kBAA4C;CAChD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AA4BA,IAAM,OAAO,YAET,EACE,MAAM,aACN,OACA,UAAU,OACV,OACA,OAAO,MACP,WACA,eACA,QACA,cACA,GAAG,SAEL,QACG;CACH,MAAM,aAAa,GACjB,iFACA,SAAS;EACP,WAAW,SAAS;EACpB,aAAa,SAAS,QAAQ,SAAS;EACvC,aAAa,SAAS;EACtB,aAAa,SAAS;CACxB,GACA,SAAS;EACP,gBAAgB;EAChB,cAAc,CAAC;CACjB,CACF;CAEA,MAAM,uBAAuB;EAC3B,QAAQ,OAAR;GACE,KAAK,WACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK;GACL,KAAK,QACH,OAAO;GACT,KAAK,SACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,SACE,OAAO;EACX;CACF;CAEA,MAAM,UACJ,oBAAC,QAAD;EACO;EACL,WAAW,GAAG,YAAY,eAAe,GAAG,SAAS;EACrD,GAAI;EAEJ,UAAA,oBAAC,aAAD;GACE,WAAW,GAAG,gBAAgB,OAAO,iBAAiB,aAAa;GAC3D;EACT,CAAA;CACG,CAAA;CAGR,IAAI,OACF,OACE,oBAAC,SAAD;EACE,GAAI;EACJ,OAAO;EACP,MAAM,cAAc,QAAQ;EAE3B,UAAA;CACM,CAAA;CAIb,OAAO;AACT,CACF;AAEA,KAAK,cAAc"}

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

@@ -0,0 +1,2 @@
+export { Icon } from './Icon.js';
+export type { IconComponent, IconProps } from './Icon.js';

package/dist/components/Icon/index.js

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

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,35 @@
+import { type ControlSize } from '../../utils/componentSizes.js';
+import type { IconComponent, IconWeight } from '../../utils/icon-types.js';
+import type { TooltipProps } from '../Tooltip/index.js';
+type IconButtonSize = 'xxs' | Exclude<ControlSize, 'lg'>;
+interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Button color scheme */
+    color?: 'primary' | 'secondary' | 'error';
+    /** Button visual variant */
+    variant?: 'normal' | 'outlined' | 'plain';
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button should have rounded-full styling */
+    round?: boolean;
+    /** Icon component to display */
+    icon: IconComponent;
+    /** Label for the button tooltip and aria-label */
+    label: string;
+    /** Class name for the icon */
+    iconClassName?: string;
+    /** Phosphor weight used to render the icon */
+    iconWeight?: IconWeight;
+    /** Square outer box. xxs=16px is reserved for dense icon-only actions. */
+    size?: IconButtonSize;
+    /** Whether the button is loading */
+    loading?: boolean;
+    /** Tooltip props */
+    tooltipProps?: Omit<TooltipProps, 'children'>;
+    /** Pass through the `<button>` props to a child component */
+    asChild?: boolean;
+}
+declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { IconButton };
+export type { IconButtonProps };

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,73 @@
+import { cn } from "../../utils/cn.js";
+import { CONTROL_SIZES } from "../../utils/componentSizes.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { buttonStyleMap } from "../Button/constants.js";
+import { Spinner } from "../Spinner/Spinner.js";
+import { cloneElement, forwardRef, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/IconButton/IconButton.tsx
+var IconButton = forwardRef(({ color = "primary", variant = "normal", onClick, disabled = false, round = false, size = "sm", icon: Icon, label, className, iconClassName, iconWeight, tooltipProps, asChild = false, loading = false, ...props }, ref) => {
+	const baseStyles = cn("lc-button relative box-border inline-flex flex-none items-center justify-center p-0 transition-all duration-200", {
+		"size-4": size === "xxs",
+		[CONTROL_SIZES.xs.heightClassName]: size === "xs",
+		[CONTROL_SIZES.sm.heightClassName]: size === "sm",
+		[CONTROL_SIZES.md.heightClassName]: size === "md"
+	}, {
+		"w-5": size === "xs",
+		"w-6": size === "sm",
+		"w-8": size === "md"
+	}, {
+		"shadow-[0px_1px_2px_0px_var(--shadow-color-subtle)]": (variant === "normal" || variant === "outlined") && !disabled,
+		"rounded-full": round,
+		"rounded-xs": !round && (size === "xxs" || size === "xs"),
+		"rounded-sm": !round && size === "sm",
+		"rounded-md": !round && size === "md"
+	});
+	const children = loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "xxs" || size === "xs" ? "xxs" : "xs" }) : /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": true,
+		className: cn(size === "xxs" && "size-3", size === "xs" && "size-3.5", (size === "sm" || size === "md") && "size-4", "flex-shrink-0", "[&_path]:stroke-[1.5px]", iconClassName),
+		weight: iconWeight
+	});
+	const getColorVariantStyles = () => {
+		const key = `${color}-${variant}-${disabled ? "disabled" : "enabled"}`;
+		return buttonStyleMap[key] || "";
+	};
+	const tooltipTitle = tooltipProps && "title" in tooltipProps ? tooltipProps.title : label;
+	if (asChild) {
+		if (!isValidElement(props.children)) return null;
+		return /* @__PURE__ */ jsx(Tooltip, {
+			...tooltipProps,
+			title: tooltipTitle,
+			side: tooltipProps?.side ?? "top",
+			children: cloneElement(props.children, {
+				className: cn(baseStyles, getColorVariantStyles(), className),
+				disabled,
+				onClick,
+				"aria-label": label,
+				ref,
+				...props,
+				children
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(Tooltip, {
+		...tooltipProps,
+		title: tooltipTitle,
+		side: tooltipProps?.side ?? "top",
+		children: /* @__PURE__ */ jsx("button", {
+			ref,
+			type: "button",
+			className: cn(baseStyles, getColorVariantStyles(), className),
+			disabled,
+			onClick,
+			"aria-label": label,
+			...props,
+			children
+		})
+	});
+});
+IconButton.displayName = "IconButton";
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":[],"sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { CONTROL_SIZES, type ControlSize } from '../../utils/componentSizes';\nimport type { IconComponent, IconWeight } from '../../utils/icon-types';\nimport { buttonStyleMap } from '../Button/constants';\nimport { Spinner } from '../Spinner';\nimport type { TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\ntype IconButtonSize = 'xxs' | Exclude<ControlSize, 'lg'>;\n\ninterface IconButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick'\n> {\n  /** Button color scheme */\n  color?: 'primary' | 'secondary' | 'error';\n  /** Button visual variant */\n  variant?: 'normal' | 'outlined' | 'plain';\n  /** Click handler */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Whether the button should have rounded-full styling */\n  round?: boolean;\n  /** Icon component to display */\n  icon: IconComponent;\n  /** Label for the button tooltip and aria-label */\n  label: string;\n  /** Class name for the icon */\n  iconClassName?: string;\n  /** Phosphor weight used to render the icon */\n  iconWeight?: IconWeight;\n  /** Square outer box. xxs=16px is reserved for dense icon-only actions. */\n  size?: IconButtonSize;\n  /** Whether the button is loading */\n  loading?: boolean;\n  /** Tooltip props */\n  tooltipProps?: Omit<TooltipProps, 'children'>;\n  /** Pass through the `<button>` props to a child component */\n  asChild?: boolean;\n}\n\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      color = 'primary',\n      variant = 'normal',\n      onClick,\n      disabled = false,\n      round = false,\n      size = 'sm',\n      icon: Icon,\n      label,\n      className,\n      iconClassName,\n      iconWeight,\n      tooltipProps,\n      asChild = false,\n      loading = false,\n      ...props\n    },\n    ref\n  ) => {\n    const baseStyles = cn(\n      'lc-button relative box-border inline-flex flex-none items-center justify-center p-0 transition-all duration-200',\n      {\n        'size-4': size === 'xxs',\n        [CONTROL_SIZES.xs.heightClassName]: size === 'xs',\n        [CONTROL_SIZES.sm.heightClassName]: size === 'sm',\n        [CONTROL_SIZES.md.heightClassName]: size === 'md',\n      },\n      {\n        'w-5': size === 'xs',\n        'w-6': size === 'sm',\n        'w-8': size === 'md',\n      },\n      {\n        'shadow-[0px_1px_2px_0px_var(--shadow-color-subtle)]':\n          (variant === 'normal' || variant === 'outlined') && !disabled,\n        // Apply rounded-full if round prop is true, otherwise use rounded-md\n        'rounded-full': round,\n        'rounded-xs': !round && (size === 'xxs' || size === 'xs'),\n        'rounded-sm': !round && size === 'sm',\n        'rounded-md': !round && size === 'md',\n      }\n    );\n\n    const children = loading ? (\n      <Spinner size={size === 'xxs' || size === 'xs' ? 'xxs' : 'xs'} />\n    ) : (\n      <Icon\n        aria-hidden\n        className={cn(\n          size === 'xxs' && 'size-3',\n          size === 'xs' && 'size-3.5',\n          (size === 'sm' || size === 'md') && 'size-4',\n          'flex-shrink-0',\n          '[&_path]:stroke-[1.5px]',\n          iconClassName\n        )}\n        weight={iconWeight}\n      />\n    );\n\n    // Generate unique class combinations for each color/variant combination\n    // This logic is extracted from the Button component to maintain consistency\n    // Generate unique class combinations for each color/variant combination\n    const getColorVariantStyles = () => {\n      const state = disabled ? 'disabled' : 'enabled';\n      const key = `${color}-${variant}-${state}` as keyof typeof buttonStyleMap;\n      return buttonStyleMap[key] || '';\n    };\n    const tooltipTitle =\n      tooltipProps && 'title' in tooltipProps ? tooltipProps.title : label;\n\n    if (asChild) {\n      if (\n        !isValidElement<React.ComponentPropsWithRef<'button'>>(props.children)\n      )\n        return null;\n\n      return (\n        <Tooltip\n          {...tooltipProps}\n          title={tooltipTitle}\n          side={tooltipProps?.side ?? 'top'}\n        >\n          {cloneElement(props.children, {\n            className: cn(baseStyles, getColorVariantStyles(), className),\n            disabled,\n            onClick,\n            'aria-label': label,\n            ref,\n            ...props,\n            children,\n          })}\n        </Tooltip>\n      );\n    }\n\n    return (\n      <Tooltip\n        {...tooltipProps}\n        title={tooltipTitle}\n        side={tooltipProps?.side ?? 'top'}\n      >\n        {/* eslint-disable-next-line react/forbid-elements */}\n        <button\n          ref={ref}\n          type=\"button\"\n          className={cn(baseStyles, getColorVariantStyles(), className)}\n          disabled={disabled}\n          onClick={onClick}\n          aria-label={label}\n          {...props}\n        >\n          {children}\n        </button>\n      </Tooltip>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],"mappings":";;;;;;;;AA4CA,IAAM,aAAa,YAEf,EACE,QAAQ,WACR,UAAU,UACV,SACA,WAAW,OACX,QAAQ,OACR,OAAO,MACP,MAAM,MACN,OACA,WACA,eACA,YACA,cACA,UAAU,OACV,UAAU,OACV,GAAG,SAEL,QACG;CACH,MAAM,aAAa,GACjB,mHACA;EACE,UAAU,SAAS;GAClB,cAAc,GAAG,kBAAkB,SAAS;GAC5C,cAAc,GAAG,kBAAkB,SAAS;GAC5C,cAAc,GAAG,kBAAkB,SAAS;CAC/C,GACA;EACE,OAAO,SAAS;EAChB,OAAO,SAAS;EAChB,OAAO,SAAS;CAClB,GACA;EACE,wDACG,YAAY,YAAY,YAAY,eAAe,CAAC;EAEvD,gBAAgB;EAChB,cAAc,CAAC,UAAU,SAAS,SAAS,SAAS;EACpD,cAAc,CAAC,SAAS,SAAS;EACjC,cAAc,CAAC,SAAS,SAAS;CACnC,CACF;CAEA,MAAM,WAAW,UACf,oBAAC,SAAD,EAAS,MAAM,SAAS,SAAS,SAAS,OAAO,QAAQ,KAAO,CAAA,IAEhE,oBAAC,MAAD;EACE,eAAA;EACA,WAAW,GACT,SAAS,SAAS,UAClB,SAAS,QAAQ,aAChB,SAAS,QAAQ,SAAS,SAAS,UACpC,iBACA,2BACA,aACF;EACA,QAAQ;CACT,CAAA;CAMH,MAAM,8BAA8B;EAElC,MAAM,MAAM,GAAG,MAAM,GAAG,QAAQ,GADlB,WAAW,aAAa;EAEtC,OAAO,eAAe,QAAQ;CAChC;CACA,MAAM,eACJ,gBAAgB,WAAW,eAAe,aAAa,QAAQ;CAEjE,IAAI,SAAS;EACX,IACE,CAAC,eAAsD,MAAM,QAAQ,GAErE,OAAO;EAET,OACE,oBAAC,SAAD;GACE,GAAI;GACJ,OAAO;GACP,MAAM,cAAc,QAAQ;GAE3B,UAAA,aAAa,MAAM,UAAU;IAC5B,WAAW,GAAG,YAAY,sBAAsB,GAAG,SAAS;IAC5D;IACA;IACA,cAAc;IACd;IACA,GAAG;IACH;GACF,CAAC;EACM,CAAA;CAEb;CAEA,OACE,oBAAC,SAAD;EACE,GAAI;EACJ,OAAO;EACP,MAAM,cAAc,QAAQ;EAG5B,UAAA,oBAAC,UAAD;GACO;GACL,MAAK;GACL,WAAW,GAAG,YAAY,sBAAsB,GAAG,SAAS;GAClD;GACD;GACT,cAAY;GACZ,GAAI;GAEH;EACK,CAAA;CACD,CAAA;AAEb,CACF;AAEA,WAAW,cAAc"}

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

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

package/dist/components/IconButton/index.js

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

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

@@ -0,0 +1,72 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { IconComponent } from '../../utils/icon-types.js';
+import { IconButton } from '../IconButton/index.js';
+import type { InputSize } from './inputStyles.js';
+export type InputIconAction = Pick<ComponentProps<typeof IconButton>, 'icon' | 'label' | 'disabled' | 'tooltipProps'> & {
+    onClick: NonNullable<ComponentProps<typeof IconButton>['onClick']>;
+};
+export interface InputProps {
+    /** Exact outer height. The default lg tier preserves the legacy 40px field. */
+    size?: InputSize;
+    variant?: 'outlined' | 'plain';
+    /** Decorative icon. Input owns its size and color. */
+    leftIcon?: IconComponent;
+    /** Decorative icon. Input owns its size and color. */
+    rightIcon?: IconComponent;
+    /** Plain icon button. Takes precedence over leftIcon. */
+    leftAction?: InputIconAction;
+    /** Plain icon button. Takes precedence over rightIcon; precedes the password toggle. */
+    rightAction?: InputIconAction;
+    /** Custom content; overrides leftIcon/leftAction and the default file icon. */
+    leftDecorator?: ReactNode;
+    /** Custom content; overrides rightIcon/rightAction. The password toggle remains last. */
+    rightDecorator?: ReactNode;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input has an error state */
+    isError?: boolean;
+    /** Label text displayed above the input */
+    label?: string | ReactNode;
+    /** Hint text displayed below the input */
+    hintText?: string;
+    /** Current input value */
+    value?: string | null;
+    /** Change handler that will be debounced */
+    onChange: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /**
+     * Input type. Limited to the "text-like" native types that share this
+     * component's styled-text rendering and string value contract. `password`
+     * renders a masked secret field with a show/hide toggle. `date` uses the
+     * browser's native date picker; its value is a `YYYY-MM-DD` string.
+     * `datetime-local` uses the native date+time picker; its value is a
+     * `YYYY-MM-DDTHH:mm` string in the viewer's local time. `file` is
+     * uncontrolled: read the selection from `event.target.files` on the change
+     * event, and scope it with `accept`/`multiple`.
+     */
+    type?: 'text' | 'email' | 'password' | 'number' | 'url' | 'date' | 'datetime-local' | 'file';
+    /** Debounce delay in milliseconds (default: 300). Ignored for `type="file"`. */
+    debounceMs?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Input ID for accessibility */
+    id?: string;
+    /** Input name for forms */
+    name?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Auto focus on mount */
+    autoFocus?: boolean;
+    /** CSS class for the input container */
+    inputContainerClassName?: string;
+    /**
+     * Which files the picker offers, as a comma-separated list of extensions or
+     * MIME types (`'.csv,.json'`, `'image/*'`). `type="file"` only. The browser
+     * treats this as a filter, not a guarantee — validate the selection too.
+     */
+    accept?: string;
+    /** Whether more than one file can be picked. `type="file"` only. */
+    multiple?: boolean;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, keyof InputProps> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -0,0 +1,221 @@
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/Text.js";
+import { Icon } from "../Icon/Icon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { INPUT_TEXT_CLASSES, getInputContainerClasses, getInputElementClasses } from "./inputStyles.js";
+import { CONTROL_ICON_SIZES } from "../../utils/controlIconSizes.js";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useDebouncedCallback } from "use-debounce";
+import { CalendarBlankIcon } from "@phosphor-icons/react/dist/ssr/CalendarBlank";
+import { EyeIcon } from "@phosphor-icons/react/dist/ssr/Eye";
+import { EyeSlashIcon } from "@phosphor-icons/react/dist/ssr/EyeSlash";
+import { PaperclipIcon } from "@phosphor-icons/react/dist/ssr/Paperclip";
+//#region packages/components/src/components/Input/Input.tsx
+function InputIconSlot({ icon, action, size, disabled }) {
+	const isDisabled = disabled || action?.disabled;
+	const colorClassName = isDisabled ? "text-icon-disabled" : "text-icon-secondary";
+	return action ? /* @__PURE__ */ jsx(IconButton, {
+		...action,
+		color: "secondary",
+		variant: "plain",
+		size: CONTROL_ICON_SIZES[size].buttonSize,
+		className: colorClassName,
+		iconWeight: "regular",
+		disabled: isDisabled,
+		onMouseDown: (event) => event.preventDefault()
+	}) : icon ? /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": true,
+		icon,
+		iconClassName: CONTROL_ICON_SIZES[size].iconClassName,
+		className: colorClassName,
+		weight: "regular"
+	}) : null;
+}
+function FileSelection({ size, fileNames, placeholder }) {
+	const summary = fileNames.length > 1 ? `${fileNames.length} files selected` : fileNames[0];
+	const textClasses = INPUT_TEXT_CLASSES[size];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
+		"aria-hidden": true,
+		as: "span",
+		className: cn(textClasses, "min-w-0 flex-1 truncate", summary ? "text-primary" : "text-placeholder"),
+		children: summary ?? placeholder ?? "No file selected"
+	}), /* @__PURE__ */ jsx(Text, {
+		"aria-hidden": true,
+		as: "span",
+		weight: "medium",
+		className: cn(textClasses, "shrink-0 text-secondary"),
+		children: "Browse"
+	})] });
+}
+var Input = forwardRef(({ size = "lg", variant = "outlined", leftIcon, rightIcon, leftAction, rightAction, leftDecorator, rightDecorator, disabled = false, isError = false, label, hintText, value, onChange, placeholder, type = "text", debounceMs = 0, className, inputContainerClassName, id, name, required = false, autoFocus = false, accept, multiple, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+	const generatedId = useId();
+	const inputId = id || generatedId;
+	const hintTextId = `${inputId}-hint`;
+	const describedBy = [hintText ? hintTextId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+	const shouldDebounce = debounceMs > 0;
+	const isFileInput = type === "file";
+	const isPasswordInput = type === "password";
+	const isDateInput = type === "date" || type === "datetime-local";
+	const [internalValue, setInternalValue] = useState(value);
+	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+	const [selectedFileNames, setSelectedFileNames] = useState([]);
+	const debouncedOnChange = useDebouncedCallback(onChange, debounceMs);
+	const fileInputRef = useRef(null);
+	useEffect(() => {
+		if (!shouldDebounce) return;
+		return () => debouncedOnChange.flush();
+	}, [shouldDebounce, debouncedOnChange]);
+	const openFilePicker = (event) => {
+		const target = event.target;
+		if (disabled || target instanceof Element && target.closest("button, a, input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"]")) return;
+		fileInputRef.current?.click();
+	};
+	useEffect(() => {
+		if (shouldDebounce) setInternalValue(value);
+	}, [shouldDebounce, value]);
+	useEffect(() => {
+		if (!isPasswordInput) setIsPasswordVisible(false);
+	}, [isPasswordInput]);
+	useEffect(() => {
+		const form = isFileInput ? fileInputRef.current?.form : null;
+		if (!form) return;
+		const clearFileSelection = () => setSelectedFileNames([]);
+		form.addEventListener("reset", clearFileSelection);
+		return () => form.removeEventListener("reset", clearFileSelection);
+	}, [isFileInput]);
+	const handleInputChange = (e) => {
+		const newValue = e.target.value;
+		if (isFileInput) {
+			onChange(newValue, e);
+			setSelectedFileNames(Array.from(e.target.files ?? []).map((file) => file.name));
+			return;
+		}
+		if (shouldDebounce) {
+			setInternalValue(newValue);
+			debouncedOnChange(newValue);
+		} else onChange(newValue, e);
+	};
+	const inputContainerClasses = getInputContainerClasses({
+		size,
+		variant,
+		isError,
+		disabled,
+		className: inputContainerClassName
+	});
+	const inputClasses = isFileInput ? "sr-only" : getInputElementClasses({
+		size,
+		disabled,
+		className: cn(isPasswordInput && !isPasswordVisible && "text-security", isDateInput && [
+			"supports-[selector(input::-webkit-calendar-picker-indicator)]:[&::-webkit-calendar-picker-indicator]:size-[var(--control-icon-size)]",
+			"supports-[selector(input::-webkit-calendar-picker-indicator)]:[&::-webkit-calendar-picker-indicator]:m-0",
+			"supports-[selector(input::-webkit-calendar-picker-indicator)]:[&::-webkit-calendar-picker-indicator]:p-0",
+			"supports-[selector(input::-webkit-calendar-picker-indicator)]:[&::-webkit-calendar-picker-indicator]:opacity-0"
+		])
+	});
+	const effectiveLeftIcon = leftIcon ?? (isFileInput ? PaperclipIcon : void 0);
+	const hasCustomLeftDecorator = leftDecorator != null;
+	const hasCustomRightDecorator = rightDecorator != null;
+	const effectiveLeftDecorator = leftDecorator ?? (effectiveLeftIcon || leftAction ? /* @__PURE__ */ jsx(InputIconSlot, {
+		icon: effectiveLeftIcon,
+		action: leftAction,
+		size,
+		disabled
+	}) : null);
+	const rightContent = rightDecorator ?? (rightIcon || rightAction ? /* @__PURE__ */ jsx(InputIconSlot, {
+		icon: rightIcon,
+		action: rightAction,
+		size,
+		disabled
+	}) : null);
+	const leftActionOffset = !hasCustomLeftDecorator && leftAction ? CONTROL_ICON_SIZES[size].actionOffset : void 0;
+	const rightActionOffset = isPasswordInput || !hasCustomRightDecorator && rightAction ? CONTROL_ICON_SIZES[size].actionOffset : void 0;
+	const effectiveRightDecorator = rightContent || isPasswordInput ? /* @__PURE__ */ jsxs(Fragment$1, { children: [rightContent, isPasswordInput && /* @__PURE__ */ jsx(InputIconSlot, {
+		size,
+		disabled,
+		action: {
+			icon: isPasswordVisible ? EyeSlashIcon : EyeIcon,
+			label: "toggle password visibility",
+			tooltipProps: { disabled: true },
+			onClick: () => setIsPasswordVisible((show) => !show)
+		}
+	})] }) : null;
+	const nativeInput = /* @__PURE__ */ jsx("input", {
+		ref: isFileInput ? mergeRefs([fileInputRef, ref]) : ref,
+		id: inputId,
+		name: name ?? (typeof label === "string" ? label : void 0),
+		type: isPasswordInput ? isPasswordVisible ? "text" : "password" : type,
+		value: isFileInput ? void 0 : shouldDebounce ? internalValue ?? "" : value === null ? "" : value,
+		onChange: handleInputChange,
+		placeholder,
+		disabled,
+		required,
+		autoFocus,
+		accept,
+		multiple,
+		"aria-describedby": describedBy,
+		"aria-invalid": isError || void 0,
+		className: inputClasses,
+		...rest
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full", className),
+		children: [
+			label && /* @__PURE__ */ jsxs(Text, {
+				as: "label",
+				htmlFor: inputId,
+				className: cn("mb-space-1 block text-sm font-medium text-primary", disabled && "text-disabled"),
+				variant: "xs",
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "ml-space-1 text-error-secondary",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn(inputContainerClasses, isFileInput && !disabled && "cursor-pointer"),
+				onClick: isFileInput ? openFilePicker : void 0,
+				children: [
+					effectiveLeftDecorator && /* @__PURE__ */ jsx("div", {
+						className: "flex items-center text-tertiary",
+						style: { marginInlineStart: leftActionOffset },
+						children: effectiveLeftDecorator
+					}),
+					isFileInput && /* @__PURE__ */ jsx(FileSelection, {
+						size,
+						fileNames: selectedFileNames,
+						placeholder
+					}),
+					isDateInput ? /* @__PURE__ */ jsxs("div", {
+						className: cn("relative flex min-w-0 flex-1 items-center", CONTROL_ICON_SIZES[size].sizeVariableClassName),
+						children: [nativeInput, /* @__PURE__ */ jsx("span", {
+							className: "pointer-events-none absolute inset-y-0 end-0 hidden items-center supports-[selector(input::-webkit-calendar-picker-indicator)]:flex",
+							children: /* @__PURE__ */ jsx(InputIconSlot, {
+								icon: CalendarBlankIcon,
+								size,
+								disabled
+							})
+						})]
+					}) : nativeInput,
+					effectiveRightDecorator && /* @__PURE__ */ jsx("div", {
+						className: cn("flex items-center text-tertiary", "gap-space-1"),
+						style: { marginInlineEnd: rightActionOffset },
+						children: effectiveRightDecorator
+					})
+				]
+			}),
+			hintText && /* @__PURE__ */ jsx(Text, {
+				id: hintTextId,
+				className: cn("mt-space-1 text-xs", isError ? "text-error-secondary" : "text-tertiary"),
+				variant: "xs",
+				weight: "normal",
+				children: hintText
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+//#endregion
+export { Input };
+
+//# sourceMappingURL=Input.js.map