@pharos-ds/core 0.1.9

package/dist/Center/Center.js

@@ -0,0 +1,92 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Center.tsx
+ * @input Uses React, StyleX for centering styles
+ * @output Exports Center component and CenterProps
+ * @position Center component for centering children horizontally/vertically
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Center/Center.doc.mjs
+ * - /packages/core/src/Center/Center.test.tsx
+ * - /apps/storybook/stories/Center.stories.tsx
+ * - /packages/cli/templates/blocks/components/Center/ (showcase blocks)
+ */
+import * as stylex from '@stylexjs/stylex';
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    k1xSpc: "x78zum5",
+    $$css: true
+  },
+  inline: {
+    k1xSpc: "x3nfvp2",
+    $$css: true
+  },
+  alignItemsCenter: {
+    kGNEyG: "x6s0dn4",
+    $$css: true
+  },
+  justifyContentCenter: {
+    kjj79g: "xl56j7k",
+    $$css: true
+  }
+};
+
+// Dynamic styles for sizing props
+const dynamicStyles = {
+  sizing: (width, height, maxWidth, minHeight) => [{
+    kzqmXN: width != null ? "x5lhr3w" : width,
+    kZKoxP: height != null ? "x16ye13r" : height,
+    ks0D6T: maxWidth != null ? "xf68679" : maxWidth,
+    kAzted: minHeight != null ? "x82snj4" : minHeight,
+    $$css: true
+  }, {
+    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width),
+    "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(height),
+    "--x-maxWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(maxWidth),
+    "--x-minHeight": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(minHeight)
+  }]
+};
+/**
+ * Center component for centering children horizontally and/or vertically.
+ *
+ * Uses flexbox for centering. By default, centers on both axes.
+ * Use the `axis` prop to center on only one axis.
+ *
+ * @example
+ * ```
+ * <Center width={300} height={200}>
+ *   <Content />
+ * </Center>
+ * ```
+ */
+export function Center({
+  axis = 'both',
+  width,
+  height,
+  maxWidth,
+  minHeight,
+  isInline = false,
+  children,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...props
+}) {
+  const stylexProps = mergeProps(themeProps('center', {
+    axis
+  }), stylex.props(isInline ? styles.inline : styles.base, (axis === 'both' || axis === 'vertical') && styles.alignItemsCenter, (axis === 'both' || axis === 'horizontal') && styles.justifyContentCenter, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), xstyle), className, style);
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    ...stylexProps,
+    ...props,
+    children: children
+  });
+}
+Center.displayName = 'Center';

package/dist/Center/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @input Imports Center component
+ * @output Exports Center and types for @pharos-ds/core/Center
+ * @position Entry point for Center component
+ *
+ * SYNC: When modified, update /packages/core/src/Center/Center.doc.mjs
+ */
+export { Center } from './Center';
+export type { CenterProps, CenterAxis } from './Center';
+//# sourceMappingURL=index.d.ts.map

package/dist/Center/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Center/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,UAAU,CAAC"}

package/dist/Center/index.js

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports Center component
+ * @output Exports Center and types for @pharos-ds/core/Center
+ * @position Entry point for Center component
+ *
+ * SYNC: When modified, update /packages/core/src/Center/Center.doc.mjs
+ */
+export { Center } from "./Center.js";

package/dist/Chat/ChatComposer.d.ts

@@ -0,0 +1,89 @@
+/**
+ * @file ChatComposer.tsx
+ * @input Uses React, StyleX, BaseProps
+ * @output Exports ChatComposer layout shell component
+ * @position Core implementation; consumed by index.ts
+ *
+ * Layout shell for a chat composer. Arranges slots (drawer, header,
+ * input, footer actions, send button, status) in a vertical stack with
+ * page-radius container, hover/focus shadows, and concentric inner radius.
+ *
+ * Component CSS vars (themeable via defineTheme):
+ * - `--_chat-composer-radius` (default: --radius-chat) — outer border radius
+ * - `--_chat-composer-padding` (default: --spacing-3) — body padding
+ * - Inner element radius = calc(--_chat-composer-radius - --_chat-composer-padding)
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Chat/Chat.doc.mjs
+ * - /apps/storybook/stories/ChatComposer.stories.tsx
+ * - /packages/cli/templates/blocks/components/ChatComposer/ (block examples)
+ */
+import React, { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+export type ChatComposerStatus = {
+    type: 'error' | 'warning';
+    message?: string;
+};
+export type ChatComposerDensity = 'compact' | 'balanced' | 'spacious';
+export interface ChatComposerProps extends Omit<BaseProps<HTMLDivElement>, 'onChange' | 'onSubmit'> {
+    ref?: React.Ref<HTMLDivElement>;
+    /** Called when the user submits the message */
+    onSubmit: (value: string) => void;
+    /** Called when the user clicks the stop button */
+    onStop?: () => void;
+    /** Whether the stop button is shown instead of the send button. @default false */
+    isStopShown?: boolean;
+    /** Controlled value of the input */
+    value?: string;
+    /** Called when the input value changes */
+    onChange?: (value: string) => void;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether the composer is disabled */
+    isDisabled?: boolean;
+    /** Density variant */
+    density?: ChatComposerDensity;
+    /**
+     * Resting elevation of the composer body. `low` (the default) keeps today's
+     * raised look — low at rest, bumping to med on hover / focus. `none` flattens
+     * it and draws a border with the same rest / hover / focus treatment as a
+     * text input (emphasized border → accent on focus, with matching inset rings).
+     * @default 'low'
+     */
+    elevation?: 'none' | 'low';
+    /** Collapsible drawer rendered above the input — attachments, context chips, etc. Use ChatComposerDrawer. */
+    drawer?: ReactNode;
+    /** Actions rendered on the left side of the header (e.g. attach, mention buttons). Use icon-only `size="sm"` buttons. */
+    headerActions?: ReactNode;
+    /** Contextual info rendered on the right side of the header (e.g. context window usage, ProgressBar). */
+    headerContext?: ReactNode;
+    /** Custom input element — replaces the default textarea */
+    input?: ReactNode;
+    /** Actions rendered on the left side of the footer. Use `size="md"` buttons to match the send button height. */
+    footerActions?: ReactNode;
+    /** Actions rendered to the left of the send button. Use `size="md"` buttons to match the send button height. */
+    sendActions?: ReactNode;
+    /** Custom send button — replaces the default */
+    sendButton?: ReactNode;
+    /** Status message rendered below (or above) the composer body */
+    status?: ChatComposerStatus;
+    /** Where to render the status. @default 'bottom' */
+    statusPosition?: 'top' | 'bottom';
+}
+/**
+ * Layout shell for a chat composer with slots for drawer, input,
+ * actions, and a send button.
+ *
+ * @example
+ * ```
+ * <ChatComposer
+ *   onSubmit={(value) => console.log(value)}
+ *   placeholder="Type a message..."
+ * />
+ * ```
+ */
+export declare function ChatComposer(props: ChatComposerProps): React.JSX.Element;
+export declare namespace ChatComposer {
+    var displayName: string;
+}
+//# sourceMappingURL=ChatComposer.d.ts.map

package/dist/Chat/ChatComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0B5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAI3B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AA8LD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAiLpD;yBAjLe,YAAY"}

package/dist/Chat/ChatComposer.js

@@ -0,0 +1,282 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ChatComposer.tsx
+ * @input Uses React, StyleX, BaseProps
+ * @output Exports ChatComposer layout shell component
+ * @position Core implementation; consumed by index.ts
+ *
+ * Layout shell for a chat composer. Arranges slots (drawer, header,
+ * input, footer actions, send button, status) in a vertical stack with
+ * page-radius container, hover/focus shadows, and concentric inner radius.
+ *
+ * Component CSS vars (themeable via defineTheme):
+ * - `--_chat-composer-radius` (default: --radius-chat) — outer border radius
+ * - `--_chat-composer-padding` (default: --spacing-3) — body padding
+ * - Inner element radius = calc(--_chat-composer-radius - --_chat-composer-padding)
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Chat/Chat.doc.mjs
+ * - /apps/storybook/stories/ChatComposer.stories.tsx
+ * - /packages/cli/templates/blocks/components/ChatComposer/ (block examples)
+ */
+import React, { useState, useCallback, useRef, useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, shadowVars, durationVars, easeVars, borderVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { Icon } from "../Icon/index.js";
+import { ChatComposerInput } from "./ChatComposerInput.js";
+import { ChatComposerContext } from "./ChatContext.js";
+import { ChatSendButton } from "./ChatSendButton.js";
+import { themeProps } from "../utils/themeProps.js";
+import { useTranslator } from "../i18n/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = {
+  body: {
+    kVAEAm: "x1n2onr6",
+    kY2c9j: "xhtitgo",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kmVPX3: "x18oj4ui",
+    kOIVth: "x1txdalj",
+    kaIpWk: "x1xunbrq",
+    kWkggS: "x1prclbq",
+    kkrTdU: "x1ed109x",
+    kmkexE: "xrg7dcy",
+    $$css: true
+  },
+  compact: {
+    "--_chat-composer-padding": "x18zce08",
+    kOIVth: "xzye2dw",
+    $$css: true
+  }
+};
+
+// Resting elevation for the composer body, narrowed to two steps.
+// - `low` (default) preserves today's look: low at rest, bumping to med on
+//   hover / focus-within (a CSS-only interaction state the component owns).
+// - `none` is flat; depth comes from a border + inset rings instead. The
+//   border is drawn *inside* the padding — its width is subtracted from every
+//   side (like Card) so total inset (border + padding) equals the elevated
+//   case and content geometry is unchanged. Border color, hover, and focus
+//   states mirror TextInput (shared `inputWrapperStyles.base` treatment):
+//   emphasized border at rest → accent on focus-within, with the same inset
+//   shadow rings on hover and focus.
+const elevationStyles = {
+  low: {
+    kGVxlE: "x1i5ehqx xhouywz",
+    knuKkz: "xyavpck",
+    $$css: true
+  },
+  none: {
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "xvy26l8 x6q1khz",
+    kmVPX3: "x1b50gpf",
+    kGVxlE: "x1gnnqk1 x12y27fx xuihb5h",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * Layout shell for a chat composer with slots for drawer, input,
+ * actions, and a send button.
+ *
+ * @example
+ * ```
+ * <ChatComposer
+ *   onSubmit={(value) => console.log(value)}
+ *   placeholder="Type a message..."
+ * />
+ * ```
+ */
+export function ChatComposer(props) {
+  const t = useTranslator();
+  const {
+    ref,
+    onSubmit,
+    onStop,
+    isStopShown = false,
+    value: controlledValue,
+    onChange,
+    placeholder: placeholderFromProps,
+    isDisabled = false,
+    density = 'balanced',
+    elevation = 'low',
+    drawer,
+    headerActions,
+    headerContext,
+    input,
+    footerActions,
+    sendActions,
+    sendButton,
+    status,
+    statusPosition = 'bottom',
+    xstyle,
+    className,
+    style,
+    ...rest
+  } = props;
+  const placeholder = placeholderFromProps ?? t('@pharos.chat.composer.placeholder');
+  const [internalValue, setInternalValue] = useState('');
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const updateValue = useCallback(newValue => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  }, [isControlled, onChange]);
+  const handleSubmit = useCallback(() => {
+    const trimmed = currentValue.trim();
+    if (!trimmed || isDisabled) {
+      return;
+    }
+    onSubmit(trimmed);
+    updateValue('');
+  }, [currentValue, isDisabled, onSubmit, updateValue]);
+  const canSend = currentValue.trim().length > 0 && !isDisabled;
+  const bodyRef = useRef(null);
+
+  // Input slot registers its focus (and future) control here so the shell can
+  // drive it without knowing its DOM shape. Stable ref — safe in the memoized
+  // context value.
+  const inputControlRef = useRef(null);
+  const handleBodyClick = useCallback(e => {
+    // Focus the input when clicking empty space in the body.
+    // Skip if the click target is a button, link, or interactive element.
+    const target = e.target;
+    if (target.closest('button, a, [role="button"], [contenteditable="true"], [data-pharos-token]')) {
+      return;
+    }
+    // Prefer the input's registered control (works for any input shape,
+    // including editors whose focusable node isn't a bare
+    // contenteditable/textarea). Fall back to a DOM query so uninstrumented
+    // custom inputs still get click-to-focus.
+    if (inputControlRef.current) {
+      inputControlRef.current.focus();
+      return;
+    }
+    const editable = bodyRef.current?.querySelector('[contenteditable="true"], textarea');
+    editable?.focus();
+  }, []);
+  const statusEl = status ? /*#__PURE__*/_jsxs("div", {
+    role: status.type === 'error' ? 'alert' : 'status',
+    ...{
+      0: {
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf x6bqyzk x2gnncy"
+      },
+      4: {
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o"
+      },
+      2: {
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf x6bqyzk x2gnncy x1pritpl x1joocv1"
+      },
+      6: {
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o x1pritpl x1joocv1"
+      },
+      1: {
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf x6bqyzk x2gnncy x24i8r5 xdhq94a"
+      },
+      5: {
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o x24i8r5 xdhq94a"
+      },
+      3: {
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x1htvmrp xvpcij2 xckg3cf x6bqyzk x2gnncy x24i8r5 xdhq94a"
+      },
+      7: {
+        className: "x1n2onr6 x1ja2u2z x78zum5 x6s0dn4 x1txdalj x1pzlopt x141an7d x1ltkj2j x9ynric x2gtn7z x9jihrk x1z0f2p2 xtqab0c x122jk3o x24i8r5 xdhq94a"
+      }
+    }[!!(statusPosition === 'top') << 2 | !!(status.type === 'error') << 1 | !!(status.type === 'warning') << 0],
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: status.type === 'error' ? 'error' : 'warning',
+      size: "md",
+      color: status.type === 'error' ? 'error' : 'warning'
+    }), status.message]
+  }) : null;
+  const composerContext = useMemo(() => ({
+    value: currentValue,
+    onChange: updateValue,
+    onSubmit: handleSubmit,
+    placeholder,
+    isDisabled,
+    isStopShown,
+    canSend,
+    onStop,
+    inputControlRef
+  }), [currentValue, updateValue, handleSubmit, placeholder, isDisabled, isStopShown, canSend, onStop]);
+  return /*#__PURE__*/_jsx(ChatComposerContext, {
+    value: composerContext,
+    children: /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      ...mergeProps(themeProps('chat-composer', {
+        density
+      }), {
+        0: {
+          className: "x1n2onr6 x1ja2u2z xc8icb0 x78zum5 xdt5ytf xx161y6 xk0ittl xcw7vlg"
+        },
+        1: {
+          className: "x1n2onr6 x1ja2u2z xc8icb0 x78zum5 xdt5ytf xx161y6 xk0ittl xcw7vlg x197sbye x47corl"
+        }
+      }[!!isDisabled << 0], className, style),
+      ...rest,
+      children: [statusPosition === 'top' && statusEl, drawer, /*#__PURE__*/_jsxs("div", {
+        ref: bodyRef,
+        onClick: handleBodyClick,
+        ...stylex.props(styles.body, elevationStyles[elevation], density === 'compact' && styles.compact, xstyle),
+        children: [(headerActions || headerContext) && /*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 x6s0dn4 x1qughib x1txdalj xe0p6wg"
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x78zum5 x6s0dn4 xzye2dw"
+            },
+            children: headerActions
+          }), /*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x78zum5 x6s0dn4 x1txdalj xvc5jky x141an7d x1ltkj2j xv1l7n4"
+            },
+            children: headerContext
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x78zum5 xdt5ytf"
+          },
+          children: input ?? /*#__PURE__*/_jsx(ChatComposerInput, {})
+        }), /*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 x6s0dn4 x1qughib x1txdalj x21xpn4"
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x78zum5 x6s0dn4 xzye2dw"
+            },
+            children: footerActions
+          }), /*#__PURE__*/_jsxs("div", {
+            ...{
+              className: "x78zum5 x6s0dn4 xzye2dw"
+            },
+            children: [sendActions, sendButton ?? /*#__PURE__*/_jsx(ChatSendButton, {})]
+          })]
+        })]
+      }), statusPosition === 'bottom' && statusEl]
+    })
+  });
+}
+ChatComposer.displayName = 'ChatComposer';

package/dist/Chat/ChatComposerDrawer.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @file ChatComposerDrawer.tsx
+ * @input Uses React, StyleX, theme tokens
+ * @output Exports ChatComposerDrawer component
+ * @position Collapsible drawer panel for ChatComposer.
+ *   Supports expanded (full content) and collapsed (count + label) states
+ *   with fade animation and grid-template-rows height transition.
+ *   The collapse toggle exposes aria-expanded + aria-controls linking it to
+ *   the content region (disclosure pattern).
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Chat/index.ts (exports)
+ * - /packages/cli/templates/blocks/components/ChatComposerDrawer/ (block examples)
+ */
+import { type ReactNode } from 'react';
+import type { StyleXStyles } from '@stylexjs/stylex';
+import type { BaseProps } from '../BaseProps';
+export interface ChatComposerDrawerProps extends BaseProps<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Content to render inside the drawer — attachments, context chips, previews, etc.
+     */
+    children: ReactNode;
+    /**
+     * Total item count — shown in the collapsed badge.
+     * When omitted, the component doesn't support collapse.
+     */
+    count?: number;
+    /**
+     * Label shown next to the count in collapsed state.
+     * @default 'Items'
+     */
+    label?: string;
+    /**
+     * Whether the drawer is collapsed.
+     * Uncontrolled by default (internal toggle).
+     */
+    isCollapsed?: boolean;
+    /**
+     * Default collapsed state for uncontrolled usage.
+     * @default false
+     */
+    defaultIsCollapsed?: boolean;
+    /**
+     * Callback when collapsed state changes.
+     */
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    /**
+     * StyleX styles for layout customization (margins, positioning, sizing).
+     * Must be a `stylex.create()` value — not an inline style object.
+     *
+     * @example
+     * ```
+     * const styles = stylex.create({ wrapper: { marginTop: 8 } });
+     * <ChatComposerDrawer xstyle={styles.wrapper} />
+     * ```
+     */
+    xstyle?: StyleXStyles;
+    className?: string;
+    style?: React.CSSProperties;
+    'data-testid'?: string;
+}
+/**
+ * Collapsible drawer panel for a chat composer.
+ * Use for attachments, context chips, or any supplementary content above the input.
+ *
+ * @example
+ * ```
+ * <ChatComposerDrawer count={3}>
+ *   <AttachmentThumbnail />
+ *   <AttachmentThumbnail />
+ * </ChatComposerDrawer>
+ * ```
+ */
+export declare function ChatComposerDrawer({ ref, children, count, label: labelFromProps, isCollapsed: controlledCollapsed, defaultIsCollapsed, onCollapsedChange, xstyle, className, style, 'data-testid': testId, ...htmlProps }: ChatComposerDrawerProps): React.ReactElement;
+export declare namespace ChatComposerDrawer {
+    var displayName: string;
+}
+//# sourceMappingURL=ChatComposerDrawer.d.ts.map

package/dist/Chat/ChatComposerDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposerDrawer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerDrawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAYnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,uBAAwB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnD;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgID;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,QAAQ,EACR,KAAK,EACL,KAAK,EAAE,cAAc,EACrB,WAAW,EAAE,mBAAmB,EAChC,kBAA0B,EAC1B,iBAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CA6F9C;yBA1Ge,kBAAkB"}