@langchain/macaw-components 1.0.0-beta.0

package/dist/_chunks/LoadingIndicator-DgtU9aqD.js

@@ -0,0 +1,80 @@
+import { cn } from "../utils/cn.js";
+import { VISUAL_ELEMENT_SIZES } from "../utils/componentSizes.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var ThinkingState_module_default = {
+	grid: "_grid_hucnx_2",
+	pixel: "_pixel_hucnx_8",
+	"pixel-on": "_pixel-on_hucnx_1",
+	dot: "_dot_hucnx_14",
+	inactive: "_inactive_hucnx_18",
+	shimmer: "_shimmer_hucnx_31",
+	"shimmer-text": "_shimmer-text_hucnx_1",
+	brandShimmer: "_brandShimmer_hucnx_37"
+};
+//#endregion
+//#region packages/components/src/components/ThinkingState/LoadingIndicator.tsx
+var SIZES = {
+	sm: VISUAL_ELEMENT_SIZES.xs.className,
+	md: VISUAL_ELEMENT_SIZES.sm.className,
+	lg: VISUAL_ELEMENT_SIZES.md.className
+};
+var CHEVRON_DELAYS = [
+	90,
+	180,
+	270,
+	0,
+	90,
+	180,
+	90,
+	180,
+	270
+];
+var PATTERNS = {
+	drive: {
+		delays: CHEVRON_DELAYS,
+		duration: "650ms"
+	},
+	dots: {
+		delays: CHEVRON_DELAYS,
+		duration: "650ms"
+	},
+	orbit: {
+		delays: [
+			0,
+			110,
+			220,
+			770,
+			null,
+			330,
+			660,
+			550,
+			440
+		],
+		duration: "950ms"
+	}
+};
+/** Decorative indicator. Announce loading on the surrounding control or region. */
+var LoadingIndicator = forwardRef(function LoadingIndicator({ variant = "drive", size = "sm", tone = "neutral", animated = true, className, style, ...props }, ref) {
+	const pattern = PATTERNS[variant];
+	const indicatorStyle = {
+		"--loading-cycle": pattern.duration,
+		...style
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		"aria-hidden": "true",
+		"data-animated": animated,
+		className: cn(ThinkingState_module_default.grid, SIZES[size], "shrink-0", tone === "brand" ? "text-icon-brand" : "text-icon-primary", className),
+		style: indicatorStyle,
+		children: pattern.delays.map((delay, index) => /* @__PURE__ */ jsx("span", {
+			className: cn(ThinkingState_module_default.pixel, "bg-current", variant === "dots" && ThinkingState_module_default.dot, delay === null && ThinkingState_module_default.inactive),
+			style: { animationDelay: `${delay ?? 0}ms` }
+		}, index))
+	});
+});
+//#endregion
+export { ThinkingState_module_default as n, LoadingIndicator as t };
+
+//# sourceMappingURL=LoadingIndicator-DgtU9aqD.js.map

package/dist/_chunks/LoadingIndicator-DgtU9aqD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator-DgtU9aqD.js","names":[],"sources":["../../src/components/ThinkingState/ThinkingState.module.css","../../src/components/ThinkingState/LoadingIndicator.tsx"],"sourcesContent":["/* Adapted from TurboKach/ai-native-react-components (MIT). See NOTICE. */\n.grid {\n  display: inline-grid;\n  grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));\n  gap: 10%;\n}\n\n.pixel {\n  border-radius: 1px;\n  opacity: 0.15;\n  animation: pixel-on var(--loading-cycle) ease-in-out infinite;\n}\n\n.dot {\n  @apply rounded-full;\n}\n\n.inactive {\n  opacity: 0.07;\n  animation: none;\n}\n\n.grid[data-animated='false'] .pixel {\n  animation: none;\n}\n\n.grid[data-animated='false'] .pixel:not(.inactive) {\n  opacity: 0.5;\n}\n\n.shimmer {\n  @apply bg-gradient-to-r from-text-tertiary from-35% via-text-primary via-50% to-text-tertiary to-65% bg-clip-text text-transparent;\n  background-size: 200% 100%;\n  animation: shimmer-text 1.4s linear infinite;\n}\n\n.brandShimmer {\n  @apply via-text-brand-primary to-text-tertiary;\n}\n\n@keyframes pixel-on {\n  0%,\n  100% {\n    opacity: 0.15;\n  }\n  18%,\n  42% {\n    opacity: 1;\n  }\n  62% {\n    opacity: 0.15;\n  }\n}\n\n@keyframes shimmer-text {\n  from {\n    background-position: 150% 50%;\n  }\n  to {\n    background-position: -50% 50%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pixel,\n  .shimmer {\n    animation: none;\n  }\n\n  .pixel:not(.inactive) {\n    opacity: 0.5;\n  }\n  .shimmer {\n    @apply text-secondary;\n    background: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .shimmer {\n    background: none;\n    color: CanvasText;\n  }\n  .pixel {\n    background: CanvasText;\n  }\n}\n","// Adapted from TurboKach/ai-native-react-components (MIT). See NOTICE.\nimport { forwardRef } from 'react';\nimport type { ComponentPropsWithRef, CSSProperties } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport { VISUAL_ELEMENT_SIZES } from '../../utils/componentSizes';\n\nimport styles from './ThinkingState.module.css';\n\ntype ThinkingStateVariant = 'drive' | 'dots' | 'orbit';\n\nconst SIZES = {\n  sm: VISUAL_ELEMENT_SIZES.xs.className,\n  md: VISUAL_ELEMENT_SIZES.sm.className,\n  lg: VISUAL_ELEMENT_SIZES.md.className,\n};\n\ninterface LoadingIndicatorProps extends Omit<\n  ComponentPropsWithRef<'span'>,\n  'children'\n> {\n  variant?: ThinkingStateVariant;\n  /** Indicator outer size: sm=16px, md=20px, lg=24px. */\n  size?: keyof typeof SIZES;\n  tone?: 'neutral' | 'brand';\n  /** Reduced-motion preferences always take precedence. */\n  animated?: boolean;\n}\n\nconst CHEVRON_DELAYS = [90, 180, 270, 0, 90, 180, 90, 180, 270];\nconst PATTERNS: Record<\n  ThinkingStateVariant,\n  { delays: (number | null)[]; duration: string }\n> = {\n  drive: { delays: CHEVRON_DELAYS, duration: '650ms' },\n  dots: { delays: CHEVRON_DELAYS, duration: '650ms' },\n  orbit: {\n    delays: [0, 110, 220, 770, null, 330, 660, 550, 440],\n    duration: '950ms',\n  },\n};\n\ninterface IndicatorStyle extends CSSProperties {\n  '--loading-cycle': string;\n}\n\n/** Decorative indicator. Announce loading on the surrounding control or region. */\nconst LoadingIndicator = forwardRef<HTMLSpanElement, LoadingIndicatorProps>(\n  function LoadingIndicator(\n    {\n      variant = 'drive',\n      size = 'sm',\n      tone = 'neutral',\n      animated = true,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) {\n    const pattern = PATTERNS[variant];\n    const indicatorStyle: IndicatorStyle = {\n      '--loading-cycle': pattern.duration,\n      ...style,\n    };\n\n    return (\n      <span\n        {...props}\n        ref={ref}\n        aria-hidden=\"true\"\n        data-animated={animated}\n        className={cn(\n          styles.grid,\n          SIZES[size],\n          'shrink-0',\n          tone === 'brand' ? 'text-icon-brand' : 'text-icon-primary',\n          className\n        )}\n        style={indicatorStyle}\n      >\n        {pattern.delays.map((delay, index) => (\n          <span\n            key={index}\n            className={cn(\n              styles.pixel,\n              'bg-current',\n              variant === 'dots' && styles.dot,\n              delay === null && styles.inactive\n            )}\n            style={{ animationDelay: `${delay ?? 0}ms` }}\n          />\n        ))}\n      </span>\n    );\n  }\n);\n\nexport { LoadingIndicator };\nexport type { LoadingIndicatorProps, ThinkingStateVariant };\n"],"mappings":";;;;;;;;;;;;;;;;ACWA,IAAM,QAAQ;CACZ,IAAI,qBAAqB,GAAG;CAC5B,IAAI,qBAAqB,GAAG;CAC5B,IAAI,qBAAqB,GAAG;AAC9B;AAcA,IAAM,iBAAiB;CAAC;CAAI;CAAK;CAAK;CAAG;CAAI;CAAK;CAAI;CAAK;AAAG;AAC9D,IAAM,WAGF;CACF,OAAO;EAAE,QAAQ;EAAgB,UAAU;CAAQ;CACnD,MAAM;EAAE,QAAQ;EAAgB,UAAU;CAAQ;CAClD,OAAO;EACL,QAAQ;GAAC;GAAG;GAAK;GAAK;GAAK;GAAM;GAAK;GAAK;GAAK;EAAG;EACnD,UAAU;CACZ;AACF;;AAOA,IAAM,mBAAmB,WACvB,SAAS,iBACP,EACE,UAAU,SACV,OAAO,MACP,OAAO,WACP,WAAW,MACX,WACA,OACA,GAAG,SAEL,KACA;CACA,MAAM,UAAU,SAAS;CACzB,MAAM,iBAAiC;EACrC,mBAAmB,QAAQ;EAC3B,GAAG;CACL;CAEA,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,eAAY;EACZ,iBAAe;EACf,WAAW,GACT,6BAAO,MACP,MAAM,OACN,YACA,SAAS,UAAU,oBAAoB,qBACvC,SACF;EACA,OAAO;EAEN,UAAA,QAAQ,OAAO,KAAK,OAAO,UAC1B,oBAAC,QAAD;GAEE,WAAW,GACT,6BAAO,OACP,cACA,YAAY,UAAU,6BAAO,KAC7B,UAAU,QAAQ,6BAAO,QAC3B;GACA,OAAO,EAAE,gBAAgB,GAAG,SAAS,EAAE,IAAI;EAC5C,GARM,KAQN,CACF;CACG,CAAA;AAEV,CACF"}

package/dist/base.css

@@ -0,0 +1,305 @@
+/* Standalone design-system base and component support styles. */
+
+/*
+ * These are native, package-owned cascade layers. Tailwind reserves the layer
+ * names `base`, `components`, and `utilities` for files that also contain its
+ * matching directives; namespacing ours keeps this precompiled stylesheet safe
+ * when a consumer's PostCSS pipeline runs Tailwind over package CSS again.
+ */
+@layer langchain-ds-base, langchain-ds-components, langchain-ds-utilities;
+
+@layer langchain-ds-base {
+  input:focus,
+  textarea:focus,
+  select:focus {
+    box-shadow: none !important;
+  }
+
+  /* Set default outline color to match our brand color */
+  * {
+    outline-color: var(--brand-400);
+  }
+
+  html {
+    color-scheme: light;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  html.dark,
+  .dark[data-theme-scope] {
+    color-scheme: dark;
+  }
+
+  .dark[data-theme-scope] {
+    color: var(--text-primary);
+  }
+
+  /* Default page typography and theme surface. */
+  body {
+    min-height: 100vh;
+    background-color: var(--bg-surface-level-1);
+    color: var(--text-primary);
+    font-family:
+      'Inter',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol';
+  }
+}
+
+@layer langchain-ds-components {
+  .lc-button {
+    --button-primary-foreground: var(--white);
+    --button-primary-foreground-hover: var(--white);
+    --button-primary-bg: var(--brand-400);
+    --button-primary-bg-hover: var(--brand-300);
+    --button-primary-border: var(--brand-500);
+    --button-primary-border-hover: var(--brand-400);
+    /* Button-owned tokens for exact underlined variant colors. */
+    --button-primary-underlined-foreground: var(--brand-400);
+    --button-primary-underlined-foreground-hover: var(--brand-300);
+    --button-primary-underlined-border: var(--brand-400);
+    --button-primary-underlined-border-hover: var(--brand-300);
+    --button-primary-error-foreground: var(--white);
+    --button-primary-error-foreground-hover: var(--white);
+    --button-primary-error-bg: var(--red-600);
+    --button-primary-error-bg-hover: var(--red-700);
+    --button-primary-error-border: var(--red-600);
+    --button-primary-error-border-hover: var(--red-700);
+    --button-secondary-foreground: var(--neutral-700);
+    --button-secondary-foreground-hover: var(--neutral-800);
+    --button-secondary-bg: var(--white);
+    --button-secondary-bg-hover: var(--neutral-50);
+    --button-secondary-border: var(--neutral-300);
+    --button-secondary-border-hover: var(--neutral-300);
+    /* Button-owned tokens for exact underlined variant colors. */
+    --button-secondary-underlined-border: var(--neutral-700);
+    --button-secondary-underlined-border-hover: var(--neutral-800);
+    --button-secondary-color-foreground: var(--brand-700);
+    --button-secondary-color-foreground-hover: var(--brand-900);
+    --button-secondary-color-bg: var(--white);
+    --button-secondary-color-bg-hover: var(--brand-50);
+    --button-secondary-color-border: var(--brand-700);
+    --button-secondary-color-border-hover: var(--brand-300);
+    /* Button-owned tokens for exact error variant colors. */
+    --button-error-underlined-foreground-hover: var(--red-400);
+    --button-error-underlined-border: var(--red-600);
+    --button-error-underlined-border-hover: var(--red-400);
+    --button-error-disabled-foreground: var(--red-300);
+    --button-error-disabled-border: var(--red-100);
+  }
+
+  html.dark .lc-button,
+  .dark[data-theme-scope] .lc-button {
+    --button-primary-foreground: var(--black);
+    --button-primary-foreground-hover: var(--black);
+    --button-primary-bg: var(--brand-400);
+    --button-primary-bg-hover: var(--brand-500);
+    --button-primary-border: var(--brand-500);
+    --button-primary-border-hover: var(--brand-400);
+    --button-primary-underlined-foreground: var(--brand-700);
+    --button-primary-underlined-foreground-hover: var(--brand-500);
+    --button-primary-underlined-border: var(--brand-700);
+    --button-primary-underlined-border-hover: var(--brand-500);
+    --button-primary-error-foreground: var(--black);
+    --button-primary-error-foreground-hover: var(--black);
+    --button-primary-error-bg: var(--red-600);
+    --button-primary-error-bg-hover: var(--red-700);
+    --button-primary-error-border: var(--red-600);
+    --button-primary-error-border-hover: var(--red-700);
+    --button-secondary-foreground: var(--neutral-300);
+    --button-secondary-foreground-hover: var(--neutral-100);
+    --button-secondary-bg: var(--neutral-900);
+    --button-secondary-bg-hover: var(--neutral-800);
+    --button-secondary-border: var(--neutral-700);
+    --button-secondary-border-hover: var(--neutral-700);
+    --button-secondary-underlined-border: var(--neutral-700);
+    --button-secondary-underlined-border-hover: var(--neutral-800);
+    --button-secondary-color-foreground: var(--brand-500);
+    --button-secondary-color-foreground-hover: var(--brand-950);
+    --button-secondary-color-bg: var(--black);
+    --button-secondary-color-bg-hover: var(--brand-950);
+    --button-secondary-color-border: var(--brand-500);
+    --button-secondary-color-border-hover: var(--brand-700);
+    --button-error-underlined-foreground-hover: var(--red-400);
+    --button-error-underlined-border: var(--red-600);
+    --button-error-underlined-border-hover: var(--red-400);
+    --button-error-disabled-foreground: var(--red-300);
+    --button-error-disabled-border: var(--red-100);
+  }
+}
+
+@keyframes slideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(2rem) scaleX(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scaleX(1);
+  }
+}
+
+@keyframes slideRight {
+  from {
+    opacity: 1;
+    transform: translateX(0) scaleX(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(2rem) scaleX(0.98);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@layer langchain-ds-utilities {
+  .animate-slide-left {
+    animation: slideLeft var(--duration-normal) cubic-bezier(0.25, 1, 0.5, 1);
+    transform-origin: right center;
+  }
+
+  .animate-slide-right {
+    animation: slideRight var(--duration-normal) cubic-bezier(0.4, 0, 1, 1);
+    transform-origin: right center;
+  }
+
+  .animate-overlay-in {
+    animation: fadeIn var(--duration-normal) ease-out;
+  }
+
+  .animate-overlay-out {
+    animation: fadeOut var(--duration-normal) ease-in;
+  }
+}
+
+@property --scroll-mask-t-from {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+@property --scroll-mask-b-from {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+@property --scroll-mask-l-from {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+@property --scroll-mask-r-from {
+  syntax: '<length-percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+
+@keyframes scroll-mask-y-scroll {
+  0% {
+    --scroll-mask-t-from: 100%;
+  }
+  10%,
+  100% {
+    --scroll-mask-t-from: var(--scroll-mask-fade-from-t, 100%);
+  }
+  0%,
+  90% {
+    --scroll-mask-b-from: var(--scroll-mask-fade-from-b, 100%);
+  }
+  100% {
+    --scroll-mask-b-from: 100%;
+  }
+}
+
+@keyframes scroll-mask-x-scroll {
+  0% {
+    --scroll-mask-l-from: 100%;
+  }
+  10%,
+  100% {
+    --scroll-mask-l-from: var(--scroll-mask-fade-from-l, 100%);
+  }
+  0%,
+  90% {
+    --scroll-mask-r-from: var(--scroll-mask-fade-from-r, 100%);
+  }
+  100% {
+    --scroll-mask-r-from: 100%;
+  }
+}
+
+@supports (animation-timeline: scroll()) {
+  :where([class^='scroll-mask-'], [class*=' scroll-mask-']) {
+    --scroll-mask-t: linear-gradient(
+      to top,
+      black,
+      black var(--scroll-mask-t-from),
+      transparent
+    );
+    --scroll-mask-b: linear-gradient(
+      to bottom,
+      black,
+      black var(--scroll-mask-b-from),
+      transparent
+    );
+    --scroll-mask-l: linear-gradient(
+      to left,
+      black,
+      black var(--scroll-mask-l-from),
+      transparent
+    );
+    --scroll-mask-r: linear-gradient(
+      to right,
+      black,
+      black var(--scroll-mask-r-from),
+      transparent
+    );
+    mask-image:
+      var(--scroll-mask-t), var(--scroll-mask-b), var(--scroll-mask-l),
+      var(--scroll-mask-r);
+    mask-composite: intersect;
+    -webkit-mask-composite: source-in;
+    animation:
+      scroll-mask-y-scroll linear,
+      scroll-mask-x-scroll linear;
+    animation-timeline: scroll(self block), scroll(self inline);
+  }
+}
+
+.scroll-mask-l {
+  --scroll-mask-fade-from-l: 80%;
+}
+.scroll-mask-r {
+  --scroll-mask-fade-from-r: 80%;
+}
+
+.scroll-mask-t {
+  --scroll-mask-fade-from-t: 80%;
+}
+.scroll-mask-b {
+  --scroll-mask-fade-from-b: 80%;
+}