entangle-ui 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # entangle-ui
 
+## 0.8.2
+
+### Patch Changes
+
+- [#68](https://github.com/SebastianWebdev/entangle-ui/pull/68) [`d79e066`](https://github.com/SebastianWebdev/entangle-ui/commit/d79e0667ce9d0cdb6e00832f86b6b2acdf4a42ec) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Add 18 new icons: `ArchiveIcon`, `DotsVerticalIcon`, `DotsHorizontalIcon`, `ChevronLeftIcon`, `ChevronRightIcon`, `FolderOpenIcon`, `FolderCogIcon`, `UsersIcon`, `BuildingIcon`, `FileTextIcon`, `PauseIcon`, `StopIcon`, `SendIcon`, `TerminalIcon`, `GitBranchIcon`, `BugIcon`, `MinusIcon`, `PinIcon`. The new icons cover IDE essentials (terminal, git branch, bug), playback transport (pause, stop), chat affordances (send, archive, pin), context menu triggers (dots vertical/horizontal), additional chevron directions, and folder variants (open, cog) plus new persona-style icons (users, building, file text). All icons are documented in the gallery, Storybook, the icons reference page, and the Claude Code skill.
+
 ## 0.8.1
 
 ### Patch Changes

package/dist/esm/components/Icons/ArchiveIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Archive icon component for archiving and storing items.
+ *
+ * A box with a lid commonly used for archiving content,
+ * moving items out of active views, and long-term storage actions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArchiveIcon />
+ *
+ * // With custom size and color
+ * <ArchiveIcon size="md" color="muted" />
+ *
+ * // In an archive action
+ * <Button icon={<ArchiveIcon />}>Archive</Button>
+ * ```
+ */
+const ArchiveIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("rect", { x: "3", y: "4", width: "18", height: "4", rx: "1" }), jsx("path", { d: "M5 8v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8" }), jsx("line", { x1: "10", y1: "13", x2: "14", y2: "13" })] }));
+});
+ArchiveIcon.displayName = 'ArchiveIcon';
+
+export { ArchiveIcon };
+//# sourceMappingURL=ArchiveIcon.js.map

package/dist/esm/components/Icons/ArchiveIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchiveIcon.js","sources":["../../../../../src/components/Icons/ArchiveIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}

package/dist/esm/components/Icons/BugIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Bug icon component for debugging and issue reporting.
+ *
+ * A symmetrical insect silhouette commonly used for debugger panels,
+ * "Report bug" actions, and error severity indicators.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BugIcon />
+ *
+ * // With custom size and color
+ * <BugIcon size="md" color="error" />
+ *
+ * // In a debugger panel toggle
+ * <IconButton icon={<BugIcon />} label="Toggle debugger" />
+ * ```
+ */
+const BugIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M9 9V8a3 3 0 0 1 6 0v1" }), jsx("path", { d: "M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1-10 0v-3a6 6 0 0 1 1-3z" }), jsx("line", { x1: "3", y1: "13", x2: "7", y2: "13" }), jsx("line", { x1: "17", y1: "13", x2: "21", y2: "13" }), jsx("line", { x1: "12", y1: "20", x2: "12", y2: "14" }), jsx("line", { x1: "4", y1: "19", x2: "7.35", y2: "17" }), jsx("line", { x1: "20", y1: "19", x2: "16.65", y2: "17" }), jsx("line", { x1: "4", y1: "7", x2: "7.75", y2: "9.4" }), jsx("line", { x1: "20", y1: "7", x2: "16.25", y2: "9.4" })] }));
+});
+BugIcon.displayName = 'BugIcon';
+
+export { BugIcon };
+//# sourceMappingURL=BugIcon.js.map

package/dist/esm/components/Icons/BugIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BugIcon.js","sources":["../../../../../src/components/Icons/BugIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAaF;AAGF;;"}

package/dist/esm/components/Icons/BuildingIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Building icon component for organizations and architectural contexts.
+ *
+ * A multi-story building with windows, commonly used for company entries,
+ * workspaces, and architecture-related personas or sections.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BuildingIcon />
+ *
+ * // With custom size and color
+ * <BuildingIcon size="md" color="secondary" />
+ *
+ * // In a company picker
+ * <Button icon={<BuildingIcon />}>Organization</Button>
+ * ```
+ */
+const BuildingIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "1" }), jsx("line", { x1: "9", y1: "22", x2: "9", y2: "18" }), jsx("line", { x1: "15", y1: "22", x2: "15", y2: "18" }), jsx("line", { x1: "9", y1: "18", x2: "15", y2: "18" }), jsx("line", { x1: "8", y1: "6", x2: "8", y2: "6" }), jsx("line", { x1: "12", y1: "6", x2: "12", y2: "6" }), jsx("line", { x1: "16", y1: "6", x2: "16", y2: "6" }), jsx("line", { x1: "8", y1: "10", x2: "8", y2: "10" }), jsx("line", { x1: "12", y1: "10", x2: "12", y2: "10" }), jsx("line", { x1: "16", y1: "10", x2: "16", y2: "10" }), jsx("line", { x1: "8", y1: "14", x2: "8", y2: "14" }), jsx("line", { x1: "12", y1: "14", x2: "12", y2: "14" }), jsx("line", { x1: "16", y1: "14", x2: "16", y2: "14" })] }));
+});
+BuildingIcon.displayName = 'BuildingIcon';
+
+export { BuildingIcon };
+//# sourceMappingURL=BuildingIcon.js.map

package/dist/esm/components/Icons/BuildingIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuildingIcon.js","sources":["../../../../../src/components/Icons/BuildingIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAoBP;AAEA;;"}

package/dist/esm/components/Icons/ChevronLeftIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Chevron Left icon component for backward navigation and collapse.
+ *
+ * A subtle leftward chevron commonly used for previous-page navigation,
+ * collapsing side panels, and breadcrumb separators.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ChevronLeftIcon />
+ *
+ * // With custom size and color
+ * <ChevronLeftIcon size="sm" color="muted" />
+ *
+ * // In a sidebar collapse button
+ * <IconButton icon={<ChevronLeftIcon />} label="Collapse sidebar" />
+ * ```
+ */
+const ChevronLeftIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("polyline", { points: "15,18 9,12 15,6" }) }));
+});
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+
+export { ChevronLeftIcon };
+//# sourceMappingURL=ChevronLeftIcon.js.map

package/dist/esm/components/Icons/ChevronLeftIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronLeftIcon.js","sources":["../../../../../src/components/Icons/ChevronLeftIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AAKF;AAEA;;"}

package/dist/esm/components/Icons/ChevronRightIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Chevron Right icon component for forward navigation and expand.
+ *
+ * A subtle rightward chevron commonly used for next-page navigation,
+ * expanding side panels, and disclosure indicators.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ChevronRightIcon />
+ *
+ * // With custom size and color
+ * <ChevronRightIcon size="sm" color="muted" />
+ *
+ * // In a sidebar expand button
+ * <IconButton icon={<ChevronRightIcon />} label="Expand sidebar" />
+ * ```
+ */
+const ChevronRightIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("polyline", { points: "9,18 15,12 9,6" }) }));
+});
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+
+export { ChevronRightIcon };
+//# sourceMappingURL=ChevronRightIcon.js.map

package/dist/esm/components/Icons/ChevronRightIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChevronRightIcon.js","sources":["../../../../../src/components/Icons/ChevronRightIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AAKF;AAEA;;"}

package/dist/esm/components/Icons/DotsHorizontalIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Dots Horizontal icon component for inline overflow menus.
+ *
+ * Three dots arranged horizontally, commonly used as a more-actions
+ * affordance in toolbars, card headers, and badge ends.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DotsHorizontalIcon />
+ *
+ * // With custom size and color
+ * <DotsHorizontalIcon size="sm" color="muted" />
+ *
+ * // As an overflow menu trigger
+ * <IconButton icon={<DotsHorizontalIcon />} label="More" />
+ * ```
+ */
+const DotsHorizontalIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("circle", { cx: "5", cy: "12", r: "1" }), jsx("circle", { cx: "12", cy: "12", r: "1" }), jsx("circle", { cx: "19", cy: "12", r: "1" })] }));
+});
+DotsHorizontalIcon.displayName = 'DotsHorizontalIcon';
+
+export { DotsHorizontalIcon };
+//# sourceMappingURL=DotsHorizontalIcon.js.map

package/dist/esm/components/Icons/DotsHorizontalIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotsHorizontalIcon.js","sources":["../../../../../src/components/Icons/DotsHorizontalIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}

package/dist/esm/components/Icons/DotsVerticalIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Dots Vertical icon component for contextual action menus.
+ *
+ * Three dots stacked vertically, typically used as the trigger
+ * for item-level action menus on cards, list rows, and table cells.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DotsVerticalIcon />
+ *
+ * // With custom size and color
+ * <DotsVerticalIcon size="sm" color="muted" />
+ *
+ * // As a menu trigger
+ * <IconButton icon={<DotsVerticalIcon />} label="Actions" />
+ * ```
+ */
+const DotsVerticalIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("circle", { cx: "12", cy: "5", r: "1" }), jsx("circle", { cx: "12", cy: "12", r: "1" }), jsx("circle", { cx: "12", cy: "19", r: "1" })] }));
+});
+DotsVerticalIcon.displayName = 'DotsVerticalIcon';
+
+export { DotsVerticalIcon };
+//# sourceMappingURL=DotsVerticalIcon.js.map

package/dist/esm/components/Icons/DotsVerticalIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotsVerticalIcon.js","sources":["../../../../../src/components/Icons/DotsVerticalIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAUP;AAEA;;"}

package/dist/esm/components/Icons/FileTextIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * File Text icon component for documents and text content.
+ *
+ * A document page with horizontal text lines, commonly used for
+ * documentation, notes, write-ups, and scribe-style personas.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FileTextIcon />
+ *
+ * // With custom size and color
+ * <FileTextIcon size="md" color="secondary" />
+ *
+ * // In a documentation entry
+ * <Button icon={<FileTextIcon />}>Open Document</Button>
+ * ```
+ */
+const FileTextIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), jsx("polyline", { points: "14 2 14 8 20 8" }), jsx("line", { x1: "8", y1: "13", x2: "16", y2: "13" }), jsx("line", { x1: "8", y1: "17", x2: "16", y2: "17" }), jsx("line", { x1: "8", y1: "9", x2: "10", y2: "9" })] }));
+});
+FileTextIcon.displayName = 'FileTextIcon';
+
+export { FileTextIcon };
+//# sourceMappingURL=FileTextIcon.js.map

package/dist/esm/components/Icons/FileTextIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTextIcon.js","sources":["../../../../../src/components/Icons/FileTextIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AASF;AAEA;;"}

package/dist/esm/components/Icons/FolderCogIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Folder Cog icon component for project-scoped settings.
+ *
+ * A folder with a small gear overlay, commonly used to distinguish
+ * project-level settings from general application settings.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FolderCogIcon />
+ *
+ * // With custom size and color
+ * <FolderCogIcon size="md" color="secondary" />
+ *
+ * // In a settings sidebar entry
+ * <Button icon={<FolderCogIcon />}>Project Settings</Button>
+ * ```
+ */
+const FolderCogIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M12 21H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v3" }), jsx("circle", { cx: "18", cy: "18", r: "2.5" }), jsx("line", { x1: "18", y1: "14.5", x2: "18", y2: "15.5" }), jsx("line", { x1: "18", y1: "20.5", x2: "18", y2: "21.5" }), jsx("line", { x1: "14.5", y1: "18", x2: "15.5", y2: "18" }), jsx("line", { x1: "20.5", y1: "18", x2: "21.5", y2: "18" }), jsx("line", { x1: "15.5", y1: "15.5", x2: "16.2", y2: "16.2" }), jsx("line", { x1: "19.8", y1: "19.8", x2: "20.5", y2: "20.5" }), jsx("line", { x1: "20.5", y1: "15.5", x2: "19.8", y2: "16.2" }), jsx("line", { x1: "16.2", y1: "19.8", x2: "15.5", y2: "20.5" })] }));
+});
+FolderCogIcon.displayName = 'FolderCogIcon';
+
+export { FolderCogIcon };
+//# sourceMappingURL=FolderCogIcon.js.map

package/dist/esm/components/Icons/FolderCogIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderCogIcon.js","sources":["../../../../../src/components/Icons/FolderCogIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AAcF;AAEA;;"}

package/dist/esm/components/Icons/FolderOpenIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Folder Open icon component for opened directory states.
+ *
+ * An open folder with an angled front flap, commonly paired with the closed
+ * `FolderIcon` for project switchers, file explorer reveals, and breadcrumbs.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FolderOpenIcon />
+ *
+ * // With custom size and color
+ * <FolderOpenIcon size="lg" color="primary" />
+ *
+ * // In a switch project action
+ * <Button icon={<FolderOpenIcon />}>Switch Project</Button>
+ * ```
+ */
+const FolderOpenIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v1" }), jsx("path", { d: "M3 10h18l-2 9a2 2 0 0 1-2 1.6H5a2 2 0 0 1-2-1.6z" })] }));
+});
+FolderOpenIcon.displayName = 'FolderOpenIcon';
+
+export { FolderOpenIcon };
+//# sourceMappingURL=FolderOpenIcon.js.map

package/dist/esm/components/Icons/FolderOpenIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FolderOpenIcon.js","sources":["../../../../../src/components/Icons/FolderOpenIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AAMF;AAEA;;"}

package/dist/esm/components/Icons/GitBranchIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Git Branch icon component for version-control branch contexts.
+ *
+ * A trunk line with a fork to a side node, commonly used for branch
+ * indicators in status bars, branch pickers, and VCS-related actions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <GitBranchIcon />
+ *
+ * // With custom size and color
+ * <GitBranchIcon size="sm" color="muted" />
+ *
+ * // In a status bar
+ * <Button icon={<GitBranchIcon />}>main</Button>
+ * ```
+ */
+const GitBranchIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("line", { x1: "6", y1: "3", x2: "6", y2: "15" }), jsx("circle", { cx: "18", cy: "6", r: "3" }), jsx("circle", { cx: "6", cy: "18", r: "3" }), jsx("path", { d: "M18 9a9 9 0 0 1-9 9" })] }));
+});
+GitBranchIcon.displayName = 'GitBranchIcon';
+
+export { GitBranchIcon };
+//# sourceMappingURL=GitBranchIcon.js.map

package/dist/esm/components/Icons/GitBranchIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GitBranchIcon.js","sources":["../../../../../src/components/Icons/GitBranchIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAWP;AAEA;;"}

package/dist/esm/components/Icons/MinusIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Minus icon component for remove/decrement actions.
+ *
+ * A single horizontal stroke commonly used to remove items, decrement
+ * counters, and zoom out. Pairs with `AddIcon` for [+/-] controls.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <MinusIcon />
+ *
+ * // With custom size and color
+ * <MinusIcon size="sm" color="muted" />
+ *
+ * // In a counter control
+ * <IconButton icon={<MinusIcon />} label="Decrease" />
+ * ```
+ */
+const MinusIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }));
+});
+MinusIcon.displayName = 'MinusIcon';
+
+export { MinusIcon };
+//# sourceMappingURL=MinusIcon.js.map

package/dist/esm/components/Icons/MinusIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinusIcon.js","sources":["../../../../../src/components/Icons/MinusIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAOL;AAGF;;"}

package/dist/esm/components/Icons/PauseIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Pause icon component for pausing playback and processes.
+ *
+ * Two parallel vertical bars commonly used to pause animations, video,
+ * preview playback, and long-running operations. Pairs with `PlayIcon`.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PauseIcon />
+ *
+ * // With custom size and color
+ * <PauseIcon size="lg" color="primary" />
+ *
+ * // In a transport bar
+ * <IconButton icon={<PauseIcon />} label="Pause" />
+ * ```
+ */
+const PauseIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }), jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })] }));
+});
+PauseIcon.displayName = 'PauseIcon';
+
+export { PauseIcon };
+//# sourceMappingURL=PauseIcon.js.map

package/dist/esm/components/Icons/PauseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PauseIcon.js","sources":["../../../../../src/components/Icons/PauseIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAQL;AAGF;;"}

package/dist/esm/components/Icons/PinIcon.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Pin icon component for pinning items to keep them visible.
+ *
+ * A push-pin silhouette commonly used to pin tabs, conversations,
+ * or list items so they stay in view. A filled visual variant could
+ * indicate the pinned state.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PinIcon />
+ *
+ * // With custom size and color
+ * <PinIcon size="sm" color="accent" />
+ *
+ * // In a pin/unpin toggle
+ * <IconButton icon={<PinIcon />} label="Pin item" />
+ * ```
+ */
+const PinIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("line", { x1: "12", y1: "17", x2: "12", y2: "22" }), jsx("path", { d: "M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24z" })] }));
+});
+PinIcon.displayName = 'PinIcon';
+
+export { PinIcon };
+//# sourceMappingURL=PinIcon.js.map

package/dist/esm/components/Icons/PinIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinIcon.js","sources":["../../../../../src/components/Icons/PinIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAEH;AAMF;AAGF;;"}

package/dist/esm/components/Icons/SendIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Send icon component for submitting messages and forms.
+ *
+ * A paper plane silhouette commonly used as the trigger for
+ * sending chat messages, dispatching commands, and form submissions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SendIcon />
+ *
+ * // With custom size and color
+ * <SendIcon size="md" color="accent" />
+ *
+ * // In a chat input
+ * <IconButton icon={<SendIcon />} label="Send message" />
+ * ```
+ */
+const SendIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
+});
+SendIcon.displayName = 'SendIcon';
+
+export { SendIcon };
+//# sourceMappingURL=SendIcon.js.map

package/dist/esm/components/Icons/SendIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendIcon.js","sources":["../../../../../src/components/Icons/SendIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAMF;AAGF;;"}

package/dist/esm/components/Icons/StopIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Stop icon component for halting playback and streams.
+ *
+ * A solid square commonly used to stop transport playback, abort
+ * generations, and cancel long-running streaming operations.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <StopIcon />
+ *
+ * // With custom size and color
+ * <StopIcon size="md" color="error" />
+ *
+ * // In a stop streaming button
+ * <IconButton icon={<StopIcon />} label="Stop" />
+ * ```
+ */
+const StopIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("rect", { x: "5", y: "5", width: "14", height: "14", rx: "1" }) }));
+});
+StopIcon.displayName = 'StopIcon';
+
+export { StopIcon };
+//# sourceMappingURL=StopIcon.js.map

package/dist/esm/components/Icons/StopIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StopIcon.js","sources":["../../../../../src/components/Icons/StopIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAKF;AAGF;;"}

package/dist/esm/components/Icons/TerminalIcon.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Terminal icon component for shells, command palettes, and CLI panels.
+ *
+ * A prompt caret with an underscore line, commonly used for terminal
+ * panels, command palette triggers, and shell-related actions.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TerminalIcon />
+ *
+ * // With custom size and color
+ * <TerminalIcon size="md" color="secondary" />
+ *
+ * // In a command palette trigger
+ * <IconButton icon={<TerminalIcon />} label="Open terminal" />
+ * ```
+ */
+const TerminalIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("polyline", { points: "4 17 10 11 4 5" }), jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })] }));
+});
+TerminalIcon.displayName = 'TerminalIcon';
+
+export { TerminalIcon };
+//# sourceMappingURL=TerminalIcon.js.map

package/dist/esm/components/Icons/TerminalIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalIcon.js","sources":["../../../../../src/components/Icons/TerminalIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AAMF;AAEA;;"}

package/dist/esm/components/Icons/UsersIcon.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Users icon component for groups, teams, and multi-user contexts.
+ *
+ * Two overlapping user silhouettes commonly used for team membership,
+ * shared resources, and group-level actions. Pairs with `UserIcon` for
+ * single-user contexts.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <UsersIcon />
+ *
+ * // With custom size and color
+ * <UsersIcon size="md" color="secondary" />
+ *
+ * // In a team selector
+ * <Button icon={<UsersIcon />}>Team</Button>
+ * ```
+ */
+const UsersIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), jsx("circle", { cx: "9", cy: "7", r: "4" }), jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
+});
+UsersIcon.displayName = 'UsersIcon';
+
+export { UsersIcon };
+//# sourceMappingURL=UsersIcon.js.map

package/dist/esm/components/Icons/UsersIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsersIcon.js","sources":["../../../../../src/components/Icons/UsersIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAEH;AAQF;AAGF;;"}