npm - prompt-area - Versions diffs - 0.1.0 - Mend

prompt-area 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/LICENSE +21 -0
package/README.md +120 -0
package/dist/action-bar/index.d.ts +60 -0
package/dist/action-bar/index.js +5 -0
package/dist/action-bar/index.js.map +1 -0
package/dist/chat-prompt-layout/index.d.ts +53 -0
package/dist/chat-prompt-layout/index.js +5 -0
package/dist/chat-prompt-layout/index.js.map +1 -0
package/dist/chunk-ANZZEZP2.js +38 -0
package/dist/chunk-ANZZEZP2.js.map +1 -0
package/dist/chunk-BPJO4DGM.js +198 -0
package/dist/chunk-BPJO4DGM.js.map +1 -0
package/dist/chunk-BWVBDP7C.js +38 -0
package/dist/chunk-BWVBDP7C.js.map +1 -0
package/dist/chunk-E7HUXORB.js +2692 -0
package/dist/chunk-E7HUXORB.js.map +1 -0
package/dist/chunk-NF2LHZIE.js +12 -0
package/dist/chunk-NF2LHZIE.js.map +1 -0
package/dist/chunk-UBBCAMJA.js +116 -0
package/dist/chunk-UBBCAMJA.js.map +1 -0
package/dist/chunk-XDKRP7UE.js +125 -0
package/dist/chunk-XDKRP7UE.js.map +1 -0
package/dist/compact-prompt-area/index.d.ts +86 -0
package/dist/compact-prompt-area/index.js +6 -0
package/dist/compact-prompt-area/index.js.map +1 -0
package/dist/helpers/index.d.ts +374 -0
package/dist/helpers/index.js +291 -0
package/dist/helpers/index.js.map +1 -0
package/dist/index.d.ts +7 -0
package/dist/index.js +10 -0
package/dist/index.js.map +1 -0
package/dist/prompt-area/index.d.ts +327 -0
package/dist/prompt-area/index.js +6 -0
package/dist/prompt-area/index.js.map +1 -0
package/dist/status-bar/index.d.ts +50 -0
package/dist/status-bar/index.js +5 -0
package/dist/status-bar/index.js.map +1 -0
package/dist/styles.css +2 -0
package/dist/tailwind.css +181 -0
package/dist/types-C4BgDEpe.d.ts +271 -0
package/package.json +102 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 Ilko Kacharov
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,120 @@
+# prompt-area
+An opinionated, dependency-light React rich-text **prompt input** — trigger-based chips (`@mentions`, `/commands`, `#tags`), inline markdown, undo/redo, file & image attachments, and a complete chat-input layout.
+Ships **two ways** from the same source:
+- **npm package** (this package) — `npm install prompt-area`, import the component and a stylesheet. Versioned, opinionated, batteries-included.
+- **[shadcn registry](https://prompt-area.com)** — `npx shadcn@latest add https://prompt-area.com/r/prompt-area.json` to copy the source into your project and own it.
+## Install
+```bash
+npm install prompt-area
+# peer deps (most React apps already have these)
+npm install react react-dom
+```
+## Quick start
+```tsx
+'use client'
+import { useState } from 'react'
+import { PromptArea, mentionTrigger, type Segment } from 'prompt-area'
+import 'prompt-area/styles.css'
+export function Composer() {
+  const [value, setValue] = useState<Segment[]>([])
+  return (
+    <PromptArea
+      value={value}
+      onChange={setValue}
+      placeholder="Type a message…"
+      autoGrow
+      triggers={[
+        mentionTrigger({
+          onSearch: async (q) =>
+            [
+              { id: '1', label: 'Ada Lovelace', value: 'ada' },
+              { id: '2', label: 'Alan Turing', value: 'alan' },
+            ].filter((u) => u.label.toLowerCase().includes(q.toLowerCase())),
+        }),
+      ]}
+      onSubmit={(segments) => console.log(segments)}
+    />
+  )
+}
+```
+## Styling
+The components are styled with Tailwind utility classes plus a small set of design tokens. You can use them **with or without** Tailwind.
+### Option A — prebuilt CSS (zero config)
+Import the compiled stylesheet once. It is self-contained, ships **no global reset** (it won't restyle the rest of your app), and works in any React app.
+```ts
+import 'prompt-area/styles.css'
+```
+Theme it by overriding the CSS variables (same names as shadcn/ui):
+```css
+:root {
+  --primary: oklch(0.62 0.19 260);
+  --radius: 0.5rem;
+}
+```
+Dark mode follows a `.dark` ancestor (add `class="dark"` to `<html>` or a wrapper).
+### Option B — Tailwind v4 preset (themeable)
+If you run Tailwind yourself, import the preset from your CSS entry instead. It registers the tokens and component styles and points Tailwind at the built files so the utilities are generated in your pipeline.
+```css
+@import 'tailwindcss';
+@import 'prompt-area/tailwind.css';
+/* for the entrance/spinner animations: */
+@import 'tw-animate-css';
+```
+In a shadcn project the token names already exist, so the component automatically inherits your theme — you usually don't need to do anything.
+## Exports
+| Import                            | Description                                               |
+| --------------------------------- | --------------------------------------------------------- |
+| `prompt-area`                     | Everything: components, hooks, helpers, and types         |
+| `prompt-area/prompt-area`         | `PromptArea` + its types/hooks                            |
+| `prompt-area/action-bar`          | `ActionBar`                                               |
+| `prompt-area/status-bar`          | `StatusBar`                                               |
+| `prompt-area/compact-prompt-area` | `CompactPromptArea`                                       |
+| `prompt-area/chat-prompt-layout`  | `ChatPromptLayout`                                        |
+| `prompt-area/helpers`             | Framework-agnostic helpers, **safe in Server Components** |
+| `prompt-area/styles.css`          | Prebuilt stylesheet                                       |
+| `prompt-area/tailwind.css`        | Tailwind v4 preset                                        |
+All blocks are tree-shakeable, so deep-importing a single block keeps your bundle small.
+### React Server Components
+The components are client components and carry a `'use client'` boundary, so you can render them directly from a Server Component. The pure helpers (e.g. `segmentsToPlainText`, `parseInlineMarkdown`, trigger presets) are also re-exported from `prompt-area/helpers` **without** the client boundary, so they can run on the server too.
+## Dependencies
+- **Peer:** `react`, `react-dom` (>= 18)
+- **Runtime:** `clsx`, `tailwind-merge` — the two `cn` helpers, both already
+  present in any shadcn/Tailwind project.
+No animation library and no icon library: animations use CSS (`tw-animate-css`
+utilities) and icons are inline SVGs. No editor framework (ProseMirror, Slate,
+Lexical) either.
+ESM-only. Requires Node 18+ / a modern bundler (Next.js, Vite, etc.).
+## License
+MIT

package/dist/action-bar/index.d.ts ADDED Viewed

@@ -0,0 +1,60 @@
+import * as react from 'react';
+/**
+ * ActionBar component types
+ *
+ * A horizontal toolbar with left and right slots, designed to sit
+ * below a text input (e.g., PromptArea) and stay anchored via
+ * normal document flow.
+ */
+/**
+ * Props for the ActionBar component.
+ */
+type ActionBarProps = {
+    /** Content rendered on the left side of the bar */
+    left?: React.ReactNode;
+    /** Content rendered on the right side of the bar */
+    right?: React.ReactNode;
+    /** Additional CSS class for the root element */
+    className?: string;
+    /** Whether the action bar is disabled (visually dims and disables pointer events) */
+    disabled?: boolean;
+    /** Accessible label for the toolbar */
+    'aria-label'?: string;
+    /** data-test-id for e2e testing */
+    'data-test-id'?: string;
+};
+/**
+ * ActionBar - A horizontal toolbar with left and right slots.
+ *
+ * Designed to sit below a text input (e.g., PromptArea) and stay
+ * anchored via normal document flow. Place it as a sibling after
+ * the input inside a shared wrapper.
+ *
+ * @example
+ * ```tsx
+ * <div className="rounded-lg border p-4">
+ *   <PromptArea value={segments} onChange={setSegments} ... />
+ *   <ActionBar
+ *     left={
+ *       <>
+ *         <button><PlusCircle /></button>
+ *         <button><AtSign /></button>
+ *       </>
+ *     }
+ *     right={
+ *       <>
+ *         <button><Mic /></button>
+ *         <button onClick={handleSubmit}><ArrowUp /></button>
+ *       </>
+ *     }
+ *   />
+ * </div>
+ * ```
+ */
+declare function ActionBar({ left, right, className, disabled, 'aria-label': ariaLabel, 'data-test-id': dataTestId, ref, }: ActionBarProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): react.JSX.Element;
+export { ActionBar, type ActionBarProps };

package/dist/action-bar/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+'use client';
+export { ActionBar } from '../chunk-BWVBDP7C.js';
+import '../chunk-NF2LHZIE.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/action-bar/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/chat-prompt-layout/index.d.ts ADDED Viewed

@@ -0,0 +1,53 @@
+import * as react from 'react';
+/**
+ * ChatPromptLayout component types
+ *
+ * A full-height chat layout with a scrollable messages area and
+ * a bottom-anchored prompt slot. Includes contextual scroll
+ * navigation buttons.
+ */
+/**
+ * Props for the ChatPromptLayout component.
+ */
+type ChatPromptLayoutProps = {
+    /** Chat messages rendered in the scrollable area */
+    children: React.ReactNode;
+    /** Prompt area rendered at the bottom of the layout (slot) */
+    prompt: React.ReactNode;
+    /** Additional CSS class for the root container */
+    className?: string;
+    /** Accessible label for the layout region */
+    'aria-label'?: string;
+    /** data-test-id for e2e testing */
+    'data-test-id'?: string;
+};
+/**
+ * ChatPromptLayout - A full-height chat layout with scrollable messages
+ * and a bottom-anchored prompt slot.
+ *
+ * Pass chat messages as `children` and the prompt area via the `prompt`
+ * prop. Contextual scroll buttons appear when the user scrolls away
+ * from the top or bottom of the messages area.
+ *
+ * @example
+ * ```tsx
+ * <ChatPromptLayout
+ *   className="h-[600px]"
+ *   prompt={
+ *     <div className="border-t p-4">
+ *       <PromptArea ... />
+ *       <ActionBar ... />
+ *     </div>
+ *   }
+ * >
+ *   {messages.map(msg => <ChatBubble key={msg.id} {...msg} />)}
+ * </ChatPromptLayout>
+ * ```
+ */
+declare function ChatPromptLayout({ children, prompt, className, 'aria-label': ariaLabel, 'data-test-id': dataTestId, ref, }: ChatPromptLayoutProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): react.JSX.Element;
+export { ChatPromptLayout, type ChatPromptLayoutProps };

package/dist/chat-prompt-layout/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+'use client';
+export { ChatPromptLayout } from '../chunk-XDKRP7UE.js';
+import '../chunk-NF2LHZIE.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/chat-prompt-layout/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/chunk-ANZZEZP2.js ADDED Viewed

@@ -0,0 +1,38 @@
+'use client';
+import { cn } from './chunk-NF2LHZIE.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+function StatusBar({
+  left,
+  right,
+  className,
+  disabled = false,
+  "aria-label": ariaLabel,
+  "data-test-id": dataTestId,
+  ref
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": ariaLabel ?? "Status bar",
+      "aria-disabled": disabled || void 0,
+      "data-test-id": dataTestId,
+      className: cn(
+        "status-bar",
+        "flex items-center justify-between gap-2 px-3 py-1.5 text-xs",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      children: [
+        left && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: left }),
+        right && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1.5", children: right })
+      ]
+    }
+  );
+}
+export { StatusBar };
+//# sourceMappingURL=chunk-ANZZEZP2.js.map
+//# sourceMappingURL=chunk-ANZZEZP2.js.map

package/dist/chunk-ANZZEZP2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/status-bar/status-bar.tsx"],"names":[],"mappings":";;;AAuBO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,EAAc,SAAA;AAAA,EACd,cAAA,EAAgB,UAAA;AAAA,EAChB;AACF,CAAA,EAAyD;AACvD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,cAAY,SAAA,IAAa,YAAA;AAAA,MACzB,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,cAAA,EAAc,UAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,YAAA;AAAA,QACA,6DAAA;AAAA,QACA,QAAA,IAAY,gCAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EAA6B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QACzD,KAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAqC,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACtE;AAEJ","file":"chunk-ANZZEZP2.js","sourcesContent":["'use client'\n\nimport { cn } from '@/lib/utils'\nimport type { StatusBarProps } from './types'\n\n/**\n * StatusBar - A horizontal bar with left and right slots.\n *\n * Designed to sit above or below a text input (e.g., PromptArea) to\n * display contextual information. Place it as a sibling before or\n * after the input inside a shared wrapper.\n *\n * @example\n * ```tsx\n * <div className=\"rounded-lg border\">\n * <StatusBar\n * left={<span>prompt-area</span>}\n * right={<span>Default</span>}\n * />\n * <PromptArea value={segments} onChange={setSegments} ... />\n * </div>\n * ```\n */\nexport function StatusBar({\n left,\n right,\n className,\n disabled = false,\n 'aria-label': ariaLabel,\n 'data-test-id': dataTestId,\n ref,\n}: StatusBarProps & { ref?: React.Ref<HTMLDivElement> }) {\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-label={ariaLabel ?? 'Status bar'}\n aria-disabled={disabled || undefined}\n data-test-id={dataTestId}\n className={cn(\n 'status-bar',\n 'flex items-center justify-between gap-2 px-3 py-1.5 text-xs',\n disabled && 'pointer-events-none opacity-50',\n className,\n )}>\n {left && <div className=\"flex items-center gap-1.5\">{left}</div>}\n {right && <div className=\"ml-auto flex items-center gap-1.5\">{right}</div>}\n </div>\n )\n}\n"]}

package/dist/chunk-BPJO4DGM.js ADDED Viewed

@@ -0,0 +1,198 @@
+'use client';
+import { BLUR_DELAY_MS, PromptArea } from './chunk-E7HUXORB.js';
+import { cn } from './chunk-NF2LHZIE.js';
+import { useRef, useState, useImperativeHandle, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+function Svg({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children
+    }
+  );
+}
+var Plus = ({ className }) => /* @__PURE__ */ jsxs(Svg, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+] });
+var ArrowUp = ({ className }) => /* @__PURE__ */ jsxs(Svg, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 19V5" })
+] });
+function CompactPromptArea({
+  value,
+  onChange,
+  triggers,
+  placeholder,
+  disabled = false,
+  markdown,
+  onSubmit,
+  onEscape,
+  onChipClick,
+  onChipAdd,
+  onChipDelete,
+  onPaste,
+  images,
+  onImagePaste,
+  onImageRemove,
+  files,
+  onFileRemove,
+  plusButtonIcon,
+  onPlusClick,
+  submitButtonIcon,
+  beforeSubmitSlot,
+  maxHeight = 320,
+  className,
+  "aria-label": ariaLabel,
+  "data-test-id": dataTestId,
+  ref
+}) {
+  const promptRef = useRef(null);
+  const containerRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  useImperativeHandle(ref, () => promptRef.current, []);
+  const isEmpty = value.length === 0 || value.length === 1 && value[0].type === "text" && value[0].text === "";
+  const isExpanded = isFocused || !isEmpty;
+  const handleContainerFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+  const handleContainerBlur = useCallback(() => {
+    setTimeout(() => {
+      if (!containerRef.current?.contains(document.activeElement)) {
+        setIsFocused(false);
+      }
+    }, BLUR_DELAY_MS);
+  }, []);
+  const handleSubmit = useCallback(() => {
+    onSubmit?.(value);
+  }, [onSubmit, value]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      onFocus: handleContainerFocus,
+      onBlur: handleContainerBlur,
+      "aria-label": ariaLabel,
+      "data-test-id": dataTestId,
+      className: cn(
+        "compact-prompt-area",
+        "bg-background border transition-all duration-200 ease-out",
+        isExpanded ? "rounded-2xl" : "rounded-full",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex", isExpanded ? "flex-col" : "items-center p-1.5"), children: [
+        !isExpanded && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onPlusClick,
+            disabled,
+            className: cn(
+              "flex shrink-0 items-center justify-center rounded-xl transition-colors",
+              "bg-muted text-muted-foreground size-9",
+              "hover:bg-accent hover:text-foreground",
+              "disabled:pointer-events-none disabled:opacity-50"
+            ),
+            "aria-label": "Add attachment",
+            children: plusButtonIcon ?? /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("min-w-0 flex-1", isExpanded ? "px-5 pt-4 pb-2" : "overflow-hidden px-3"),
+            onClick: () => promptRef.current?.focus(),
+            children: /* @__PURE__ */ jsx(
+              PromptArea,
+              {
+                ref: promptRef,
+                value,
+                onChange,
+                triggers,
+                placeholder,
+                disabled,
+                markdown,
+                onSubmit: handleSubmit,
+                onEscape,
+                onChipClick,
+                onChipAdd,
+                onChipDelete,
+                onPaste,
+                images,
+                onImagePaste,
+                onImageRemove,
+                files,
+                onFileRemove,
+                autoGrow: true,
+                minHeight: isExpanded ? 48 : 24,
+                maxHeight
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 items-center",
+              isExpanded ? "justify-between px-3 pt-1 pb-3" : "gap-1.5"
+            ),
+            children: [
+              isExpanded && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onPlusClick,
+                  disabled,
+                  className: cn(
+                    "flex shrink-0 items-center justify-center rounded-xl transition-colors",
+                    "bg-muted text-muted-foreground size-9",
+                    "hover:bg-accent hover:text-foreground",
+                    "disabled:pointer-events-none disabled:opacity-50"
+                  ),
+                  "aria-label": "Add attachment",
+                  children: plusButtonIcon ?? /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                beforeSubmitSlot,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleSubmit,
+                    disabled: disabled || isEmpty,
+                    className: cn(
+                      "flex shrink-0 items-center justify-center rounded-xl transition-colors",
+                      "bg-primary text-primary-foreground size-9",
+                      "hover:bg-primary/90",
+                      "disabled:pointer-events-none disabled:opacity-50"
+                    ),
+                    "aria-label": "Send message",
+                    children: submitButtonIcon ?? /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+export { CompactPromptArea };
+//# sourceMappingURL=chunk-BPJO4DGM.js.map
+//# sourceMappingURL=chunk-BPJO4DGM.js.map

package/dist/chunk-BPJO4DGM.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/compact-prompt-area/compact-prompt-area.tsx"],"names":[],"mappings":"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","file":"chunk-BPJO4DGM.js","sourcesContent":["'use client'\n\nimport { useCallback, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '@/lib/utils'\nimport { PromptArea } from '@/registry/new-york/blocks/prompt-area/prompt-area'\nimport { BLUR_DELAY_MS } from '@/registry/new-york/blocks/prompt-area/use-prompt-area-events'\nimport type { PromptAreaHandle } from '@/registry/new-york/blocks/prompt-area/types'\nimport type { CompactPromptAreaProps } from './types'\n\ntype IconProps = { className?: string }\n\n/** Shared SVG wrapper matching the lucide icon defaults (no dependency). */\nfunction Svg({ className, children }: IconProps & { children: React.ReactNode }) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n className={className}>\n {children}\n </svg>\n )\n}\n\nconst Plus = ({ className }: IconProps) => (\n <Svg className={className}>\n <path d=\"M5 12h14\" />\n <path d=\"M12 5v14\" />\n </Svg>\n)\nconst ArrowUp = ({ className }: IconProps) => (\n <Svg className={className}>\n <path d=\"m5 12 7-7 7 7\" />\n <path d=\"M12 19V5\" />\n </Svg>\n)\n\n/**\n * CompactPromptArea – A pill-shaped prompt input that sits on a single row\n * and expands downward on focus.\n *\n * - Left: circular plus button\n * - Middle: PromptArea text input (expands down when focused)\n * - Right: optional slot + circular submit button\n *\n * Reuses PromptArea internally with autoGrow enabled.\n *\n * @example\n * ```tsx\n * <CompactPromptArea\n * value={segments}\n * onChange={setSegments}\n * placeholder=\"Ask anything...\"\n * onSubmit={handleSubmit}\n * onPlusClick={() => setMenuOpen(true)}\n * beforeSubmitSlot={<button aria-label=\"Voice\"><Mic className=\"size-4\" /></button>}\n * />\n * ```\n */\nexport function CompactPromptArea({\n value,\n onChange,\n triggers,\n placeholder,\n disabled = false,\n markdown,\n onSubmit,\n onEscape,\n onChipClick,\n onChipAdd,\n onChipDelete,\n onPaste,\n images,\n onImagePaste,\n onImageRemove,\n files,\n onFileRemove,\n plusButtonIcon,\n onPlusClick,\n submitButtonIcon,\n beforeSubmitSlot,\n maxHeight = 320,\n className,\n 'aria-label': ariaLabel,\n 'data-test-id': dataTestId,\n ref,\n}: CompactPromptAreaProps & { ref?: React.Ref<PromptAreaHandle> }) {\n const promptRef = useRef<PromptAreaHandle>(null)\n const containerRef = useRef<HTMLDivElement>(null)\n const [isFocused, setIsFocused] = useState(false)\n\n useImperativeHandle(ref, () => promptRef.current!, [])\n\n const isEmpty =\n value.length === 0 || (value.length === 1 && value[0].type === 'text' && value[0].text === '')\n\n const isExpanded = isFocused || !isEmpty\n\n const handleContainerFocus = useCallback(() => {\n setIsFocused(true)\n }, [])\n\n const handleContainerBlur = useCallback(() => {\n setTimeout(() => {\n if (!containerRef.current?.contains(document.activeElement)) {\n setIsFocused(false)\n }\n }, BLUR_DELAY_MS)\n }, [])\n\n const handleSubmit = useCallback(() => {\n onSubmit?.(value)\n }, [onSubmit, value])\n\n return (\n <div\n ref={containerRef}\n onFocus={handleContainerFocus}\n onBlur={handleContainerBlur}\n aria-label={ariaLabel}\n data-test-id={dataTestId}\n className={cn(\n 'compact-prompt-area',\n 'bg-background border transition-all duration-200 ease-out',\n isExpanded ? 'rounded-2xl' : 'rounded-full',\n className,\n )}>\n <div className={cn('flex', isExpanded ? 'flex-col' : 'items-center p-1.5')}>\n {/* Plus button – left side in collapsed mode */}\n {!isExpanded && (\n <button\n type=\"button\"\n onClick={onPlusClick}\n disabled={disabled}\n className={cn(\n 'flex shrink-0 items-center justify-center rounded-xl transition-colors',\n 'bg-muted text-muted-foreground size-9',\n 'hover:bg-accent hover:text-foreground',\n 'disabled:pointer-events-none disabled:opacity-50',\n )}\n aria-label=\"Add attachment\">\n {plusButtonIcon ?? <Plus className=\"size-4\" />}\n </button>\n )}\n\n {/* Prompt area region */}\n <div\n className={cn('min-w-0 flex-1', isExpanded ? 'px-5 pt-4 pb-2' : 'overflow-hidden px-3')}\n onClick={() => promptRef.current?.focus()}>\n <PromptArea\n ref={promptRef}\n value={value}\n onChange={onChange}\n triggers={triggers}\n placeholder={placeholder}\n disabled={disabled}\n markdown={markdown}\n onSubmit={handleSubmit}\n onEscape={onEscape}\n onChipClick={onChipClick}\n onChipAdd={onChipAdd}\n onChipDelete={onChipDelete}\n onPaste={onPaste}\n images={images}\n onImagePaste={onImagePaste}\n onImageRemove={onImageRemove}\n files={files}\n onFileRemove={onFileRemove}\n autoGrow\n minHeight={isExpanded ? 48 : 24}\n maxHeight={maxHeight}\n />\n </div>\n\n {/* Button bar */}\n <div\n className={cn(\n 'flex shrink-0 items-center',\n isExpanded ? 'justify-between px-3 pt-1 pb-3' : 'gap-1.5',\n )}>\n {/* Plus button – bottom-left in expanded mode */}\n {isExpanded && (\n <button\n type=\"button\"\n onClick={onPlusClick}\n disabled={disabled}\n className={cn(\n 'flex shrink-0 items-center justify-center rounded-xl transition-colors',\n 'bg-muted text-muted-foreground size-9',\n 'hover:bg-accent hover:text-foreground',\n 'disabled:pointer-events-none disabled:opacity-50',\n )}\n aria-label=\"Add attachment\">\n {plusButtonIcon ?? <Plus className=\"size-4\" />}\n </button>\n )}\n\n {/* Right side: slot + submit */}\n <div className=\"flex items-center gap-1.5\">\n {beforeSubmitSlot}\n <button\n type=\"button\"\n onClick={handleSubmit}\n disabled={disabled || isEmpty}\n className={cn(\n 'flex shrink-0 items-center justify-center rounded-xl transition-colors',\n 'bg-primary text-primary-foreground size-9',\n 'hover:bg-primary/90',\n 'disabled:pointer-events-none disabled:opacity-50',\n )}\n aria-label=\"Send message\">\n {submitButtonIcon ?? <ArrowUp className=\"size-4\" />}\n </button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"]}

package/dist/chunk-BWVBDP7C.js ADDED Viewed

@@ -0,0 +1,38 @@
+'use client';
+import { cn } from './chunk-NF2LHZIE.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+function ActionBar({
+  left,
+  right,
+  className,
+  disabled = false,
+  "aria-label": ariaLabel,
+  "data-test-id": dataTestId,
+  ref
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "toolbar",
+      "aria-label": ariaLabel ?? "Action bar",
+      "aria-disabled": disabled || void 0,
+      "data-test-id": dataTestId,
+      className: cn(
+        "action-bar",
+        "flex items-center justify-between gap-2 pt-2",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      children: [
+        left && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: left }),
+        right && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1", children: right })
+      ]
+    }
+  );
+}
+export { ActionBar };
+//# sourceMappingURL=chunk-BWVBDP7C.js.map
+//# sourceMappingURL=chunk-BWVBDP7C.js.map

package/dist/chunk-BWVBDP7C.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/action-bar/action-bar.tsx"],"names":[],"mappings":";;;AAiCO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA,EAAc,SAAA;AAAA,EACd,cAAA,EAAgB,UAAA;AAAA,EAChB;AACF,CAAA,EAAyD;AACvD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,SAAA;AAAA,MACL,cAAY,SAAA,IAAa,YAAA;AAAA,MACzB,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,cAAA,EAAc,UAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,YAAA;AAAA,QACA,8CAAA;AAAA,QACA,QAAA,IAAY,gCAAA;AAAA,QACZ;AAAA,OACF;AAAA,MACC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QACvD,KAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAmC,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GACpE;AAEJ","file":"chunk-BWVBDP7C.js","sourcesContent":["'use client'\n\nimport { cn } from '@/lib/utils'\nimport type { ActionBarProps } from './types'\n\n/**\n * ActionBar - A horizontal toolbar with left and right slots.\n *\n * Designed to sit below a text input (e.g., PromptArea) and stay\n * anchored via normal document flow. Place it as a sibling after\n * the input inside a shared wrapper.\n *\n * @example\n * ```tsx\n * <div className=\"rounded-lg border p-4\">\n * <PromptArea value={segments} onChange={setSegments} ... />\n * <ActionBar\n * left={\n * <>\n * <button><PlusCircle /></button>\n * <button><AtSign /></button>\n * </>\n * }\n * right={\n * <>\n * <button><Mic /></button>\n * <button onClick={handleSubmit}><ArrowUp /></button>\n * </>\n * }\n * />\n * </div>\n * ```\n */\nexport function ActionBar({\n left,\n right,\n className,\n disabled = false,\n 'aria-label': ariaLabel,\n 'data-test-id': dataTestId,\n ref,\n}: ActionBarProps & { ref?: React.Ref<HTMLDivElement> }) {\n return (\n <div\n ref={ref}\n role=\"toolbar\"\n aria-label={ariaLabel ?? 'Action bar'}\n aria-disabled={disabled || undefined}\n data-test-id={dataTestId}\n className={cn(\n 'action-bar',\n 'flex items-center justify-between gap-2 pt-2',\n disabled && 'pointer-events-none opacity-50',\n className,\n )}>\n {left && <div className=\"flex items-center gap-1\">{left}</div>}\n {right && <div className=\"ml-auto flex items-center gap-1\">{right}</div>}\n </div>\n )\n}\n"]}