entangle-ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # entangle-ui
 
+## 0.5.0
+
+### Minor Changes
+
+- [#30](https://github.com/SebastianWebdev/entangle-ui/pull/30) [`a471804`](https://github.com/SebastianWebdev/entangle-ui/commit/a4718046f68e41953c3efcf1987c82daf1a124ad) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - ### Breaking Changes
+  - **Shell component props**: Removed `$` prefix from all shell component props. `$size` → `size`, `$variant` → `variant`, `$side` → `side`, `$orientation` → `orientation` across StatusBar, Toolbar, and MenuBar.
+  - **BaseButton removed**: Deleted dead `BaseButton` primitive (was not exported from public API).
+
+  ### Fixes
+  - **sideEffects**: Changed `sideEffects: false` to `["*.css", "*.css.ts"]` so bundlers preserve Vanilla Extract CSS.
+  - **Theme export**: Added `entangle-ui/theme` export path for `darkThemeValues` and `DarkThemeValues` type.
+  - **Hardcoded 26px**: Replaced hardcoded StatusBar medium height with `vars.shell.statusBar.heightMd` theme token.
+  - **Lockfile**: Regenerated `package-lock.json` to remove stale Emotion peerDeps.
+
+  ### Performance
+  - **Icons memoized**: All 63 icon components wrapped with `React.memo` and `/*#__PURE__*/` annotations for better tree-shaking and fewer re-renders.
+
+  ### Internal
+  - **Chat SVG deduplication**: Extracted shared mini-icons into `ChatIcons.tsx`, removed duplicated inline SVGs from `ChatAttachment` and `ChatContextChip`.
+  - **`cn` deprecated**: `cn` utility is now a re-export alias of `cx`. Use `cx` directly.
+  - **`'use client'` directives**: Added to all icon files for Next.js App Router compatibility.
+
+### Patch Changes
+
+- [#32](https://github.com/SebastianWebdev/entangle-ui/pull/32) [`c080cd7`](https://github.com/SebastianWebdev/entangle-ui/commit/c080cd7def25fca19061ff366ea98144fcd4b6ba) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - ### Internal
+  - **ChatToolCall SVG deduplication**: Moved inline `WrenchIcon` and `ChevronIcon` from `ChatToolCall.tsx` to shared `ChatIcons.tsx` as `MiniWrenchIcon` and `MiniChevronIcon`.
+  - **vite.config.ts cleanup**: Removed stale `build.lib` section with UMD format reference (Rollup handles the real build, Vite is only used for Storybook).
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/esm/assets/src/components/shell/StatusBar/{StatusBar.css.ts.vanilla-BwO7oAZi.css → StatusBar.css.ts.vanilla-BqpCJsZ1.css}

@@ -25,7 +25,7 @@
   height: var(--etui-shell-statusbar-height);
 }
 .StatusBar_statusBarRoot_size_md__1kv0a05 {
-  height: 26px;
+  height: var(--etui-shell-statusbar-height-md);
 }
 .StatusBar_statusBarSection__1kv0a06 {
   display: flex;

package/dist/esm/assets/src/theme/{darkTheme.css.ts.vanilla-V8lWHaQH.css → darkTheme.css.ts.vanilla-DCe89yCJ.css}

@@ -75,6 +75,7 @@
   --etui-shell-toolbar-bg: #2d2d2d;
   --etui-shell-toolbar-separator: #4a4a4a;
   --etui-shell-statusbar-height: 22px;
+  --etui-shell-statusbar-height-md: 26px;
   --etui-shell-statusbar-bg: #007acc;
   --etui-shell-statusbar-text: #ffffff;
   --etui-shell-dock-tab-height: 28px;

package/dist/esm/components/Icons/AddIcon.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';
+
+/**
+ * Add icon component for create/add actions.
+ *
+ * A standard plus icon commonly used for adding new items,
+ * creating content, and expand functionality in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AddIcon />
+ *
+ * // With custom size and color
+ * <AddIcon size="lg" color="primary" />
+ *
+ * // In an add button
+ * <Button icon={<AddIcon />}>Add Item</Button>
+ * ```
+ */
+const AddIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+});
+AddIcon.displayName = 'AddIcon';
+
+export { AddIcon };
+//# sourceMappingURL=AddIcon.js.map

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

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

package/dist/esm/components/Icons/AiChatIcon.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';
+
+/**
+ * AI Chat icon component for AI assistant chat interfaces.
+ *
+ * A chat bubble with a sparkle accent, commonly used for
+ * AI chat panels, assistant toggles, and conversational
+ * AI features in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AiChatIcon />
+ *
+ * // With custom size and color
+ * <AiChatIcon size="lg" color="accent" />
+ *
+ * // In a toolbar toggle
+ * <Toolbar.Toggle icon={<AiChatIcon size="sm" />} tooltip="AI Chat" />
+ * ```
+ */
+const AiChatIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }), jsx("path", { d: "M14.5 7l.5 1.5L16.5 9l-1.5.5L14.5 11l-.5-1.5L12.5 9l1.5-.5Z" })] }));
+});
+AiChatIcon.displayName = 'AiChatIcon';
+
+export { AiChatIcon };
+//# sourceMappingURL=AiChatIcon.js.map

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

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

package/dist/esm/components/Icons/AiSparklesIcon.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';
+
+/**
+ * AI sparkles icon component representing artificial intelligence.
+ *
+ * Three 4-pointed sparkle stars at different sizes,
+ * commonly used for AI features, generative tools,
+ * and smart suggestions in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <AiSparklesIcon />
+ *
+ * // With custom size and color
+ * <AiSparklesIcon size="lg" color="primary" />
+ *
+ * // In an AI action button
+ * <Button icon={<AiSparklesIcon />}>Generate</Button>
+ * ```
+ */
+const AiSparklesIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("path", { d: "M9 1l2 6L17 9l-6 2L9 17l-2-6L1 9l6-2Z" }), jsx("path", { d: "M19 1l1 3L23 5l-3 1L19 9l-1-3L15 5l3-1Z" }), jsx("path", { d: "M19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75Z" })] }));
+});
+AiSparklesIcon.displayName = 'AiSparklesIcon';
+
+export { AiSparklesIcon };
+//# sourceMappingURL=AiSparklesIcon.js.map

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

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

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Arrow Down icon component for downward navigation and expansion.
+ *
+ * A standard downward-pointing arrow commonly used for dropdown menus,
+ * expanding content, and downward navigation in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArrowDownIcon />
+ *
+ * // With custom size and color
+ * <ArrowDownIcon size="lg" color="primary" />
+ *
+ * // In a dropdown button
+ * <Button icon={<ArrowDownIcon />}>Expand</Button>
+ * ```
+ */
+const ArrowDownIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("path", { d: "M7 10l5 5 5-5z" }) }));
+});
+ArrowDownIcon.displayName = 'ArrowDownIcon';
+
+export { ArrowDownIcon };
+//# sourceMappingURL=ArrowDownIcon.js.map

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

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

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Arrow Left icon component for leftward navigation and back actions.
+ *
+ * A standard leftward-pointing arrow commonly used for back buttons,
+ * previous navigation, and leftward movement in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArrowLeftIcon />
+ *
+ * // With custom size and color
+ * <ArrowLeftIcon size="lg" color="primary" />
+ *
+ * // In a back button
+ * <Button icon={<ArrowLeftIcon />}>Back</Button>
+ * ```
+ */
+const ArrowLeftIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("path", { d: "M14 7l-5 5 5 5V7z" }) }));
+});
+ArrowLeftIcon.displayName = 'ArrowLeftIcon';
+
+export { ArrowLeftIcon };
+//# sourceMappingURL=ArrowLeftIcon.js.map

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

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

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Arrow Right icon component for rightward navigation and forward actions.
+ *
+ * A standard rightward-pointing arrow commonly used for next buttons,
+ * forward navigation, and rightward movement in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArrowRightIcon />
+ *
+ * // With custom size and color
+ * <ArrowRightIcon size="lg" color="primary" />
+ *
+ * // In a next button
+ * <Button icon={<ArrowRightIcon />}>Next</Button>
+ * ```
+ */
+const ArrowRightIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("path", { d: "M10 17l5-5-5-5v10z" }) }));
+});
+ArrowRightIcon.displayName = 'ArrowRightIcon';
+
+export { ArrowRightIcon };
+//# sourceMappingURL=ArrowRightIcon.js.map

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

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

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Arrow Up icon component for upward navigation and collapse actions.
+ *
+ * A standard upward-pointing arrow commonly used for collapse buttons,
+ * upward navigation, and minimizing content in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ArrowUpIcon />
+ *
+ * // With custom size and color
+ * <ArrowUpIcon size="lg" color="primary" />
+ *
+ * // In a collapse button
+ * <Button icon={<ArrowUpIcon />}>Collapse</Button>
+ * ```
+ */
+const ArrowUpIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("path", { d: "M17 14l-5-5-5 5h10z" }) }));
+});
+ArrowUpIcon.displayName = 'ArrowUpIcon';
+
+export { ArrowUpIcon };
+//# sourceMappingURL=ArrowUpIcon.js.map

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

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

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Icon } from '../primitives/Icon/Icon.js';
+
+/**
+ * Bookmark icon component for saving and marking content.
+ *
+ * A standard bookmark icon commonly used for saving items,
+ * marking favorites, and bookmarking content in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BookmarkIcon />
+ *
+ * // With custom size and color
+ * <BookmarkIcon size="lg" color="accent" />
+ *
+ * // In a bookmark button
+ * <Button icon={<BookmarkIcon />}>Bookmark</Button>
+ * ```
+ */
+const BookmarkIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsx(Icon, { ...props, children: jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" }) }));
+});
+BookmarkIcon.displayName = 'BookmarkIcon';
+
+export { BookmarkIcon };
+//# sourceMappingURL=BookmarkIcon.js.map

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

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

package/dist/esm/components/Icons/CalendarIcon.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';
+
+/**
+ * Calendar icon component for date and scheduling functionality.
+ *
+ * A standard calendar icon commonly used for date pickers,
+ * scheduling, and time-related features in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CalendarIcon />
+ *
+ * // With custom size and color
+ * <CalendarIcon size="lg" color="primary" />
+ *
+ * // In a date picker
+ * <Button icon={<CalendarIcon />}>Select Date</Button>
+ * ```
+ */
+const CalendarIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }));
+});
+CalendarIcon.displayName = 'CalendarIcon';
+
+export { CalendarIcon };
+//# sourceMappingURL=CalendarIcon.js.map

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

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

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

@@ -1,4 +1,6 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Icon } from '../primitives/Icon/Icon.js';
 
 /**
@@ -19,9 +21,10 @@ import { Icon } from '../primitives/Icon/Icon.js';
  * <Button icon={<CheckIcon />}>Confirm</Button>
  * ```
  */
-const CheckIcon = props => {
+const CheckIcon = /*#__PURE__*/ React.memo(props => {
     return (jsx(Icon, { ...props, children: jsx("polyline", { points: "20,6 9,17 4,12" }) }));
-};
+});
+CheckIcon.displayName = 'CheckIcon';
 
 export { CheckIcon };
 //# sourceMappingURL=CheckIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckIcon.js","sources":["../../../../../src/components/Icons/CheckIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAKA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,SAAS,GAA0C,KAAK,IAAG;AACtE,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,gBAAgB,EAAA,CAAG,EAAA,CAC/B;AAEX;;;;"}
+{"version":3,"file":"CheckIcon.js","sources":["../../../../../src/components/Icons/CheckIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAKF;AAGF;;"}

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

@@ -1,4 +1,6 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Icon } from '../primitives/Icon/Icon.js';
 
 /**
@@ -19,9 +21,10 @@ import { Icon } from '../primitives/Icon/Icon.js';
  * <Select icon={<ChevronDownIcon />}>Options</Select>
  * ```
  */
-const ChevronDownIcon = props => {
+const ChevronDownIcon = /*#__PURE__*/ React.memo(props => {
     return (jsx(Icon, { ...props, children: jsx("polyline", { points: "6,9 12,15 18,9" }) }));
-};
+});
+ChevronDownIcon.displayName = 'ChevronDownIcon';
 
 export { ChevronDownIcon };
 //# sourceMappingURL=ChevronDownIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChevronDownIcon.js","sources":["../../../../../src/components/Icons/ChevronDownIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,gBAAgB,EAAA,CAAG,EAAA,CAC/B;AAEX;;;;"}
+{"version":3,"file":"ChevronDownIcon.js","sources":["../../../../../src/components/Icons/ChevronDownIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AAKF;AAEA;;"}

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

@@ -1,4 +1,6 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Icon } from '../primitives/Icon/Icon.js';
 
 /**
@@ -19,9 +21,10 @@ import { Icon } from '../primitives/Icon/Icon.js';
  * <Button icon={<ChevronUpIcon />}>Collapse</Button>
  * ```
  */
-const ChevronUpIcon = props => {
+const ChevronUpIcon = /*#__PURE__*/ React.memo(props => {
     return (jsx(Icon, { ...props, children: jsx("polyline", { points: "18,15 12,9 6,15" }) }));
-};
+});
+ChevronUpIcon.displayName = 'ChevronUpIcon';
 
 export { ChevronUpIcon };
 //# sourceMappingURL=ChevronUpIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChevronUpIcon.js","sources":["../../../../../src/components/Icons/ChevronUpIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,aAAa,GAA0C,KAAK,IAAG;AAC1E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,UAAA,EAAA,EAAU,MAAM,EAAC,iBAAiB,EAAA,CAAG,EAAA,CAChC;AAEX;;;;"}
+{"version":3,"file":"ChevronUpIcon.js","sources":["../../../../../src/components/Icons/ChevronUpIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAGL;AAKF;AAEA;;"}

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

@@ -1,4 +1,6 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Icon } from '../primitives/Icon/Icon.js';
 
 /**
@@ -19,9 +21,10 @@ import { Icon } from '../primitives/Icon/Icon.js';
  * <Button icon={<CircleIcon />}>Option</Button>
  * ```
  */
-const CircleIcon = props => {
+const CircleIcon = /*#__PURE__*/ React.memo(props => {
     return (jsx(Icon, { ...props, children: jsx("circle", { cx: "12", cy: "12", r: "10" }) }));
-};
+});
+CircleIcon.displayName = 'CircleIcon';
 
 export { CircleIcon };
 //# sourceMappingURL=CircleIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CircleIcon.js","sources":["../../../../../src/components/Icons/CircleIcon.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAKA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,UAAU,GAA0C,KAAK,IAAG;IACvE,QACEA,IAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG,EAAA,CAC5B;AAEX;;;;"}
+{"version":3,"file":"CircleIcon.js","sources":["../../../../../src/components/Icons/CircleIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACI;;AAOL;AAGF;;"}

package/dist/esm/components/Icons/ClockIcon.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';
+
+/**
+ * Clock icon component for time and scheduling functionality.
+ *
+ * A standard clock icon commonly used for time displays,
+ * scheduling features, and temporal indicators in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ClockIcon />
+ *
+ * // With custom size and color
+ * <ClockIcon size="lg" color="primary" />
+ *
+ * // In a time picker
+ * <Button icon={<ClockIcon />}>Set Time</Button>
+ * ```
+ */
+const ClockIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("polyline", { points: "12,6 12,12 16,14" })] }));
+});
+ClockIcon.displayName = 'ClockIcon';
+
+export { ClockIcon };
+//# sourceMappingURL=ClockIcon.js.map

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

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

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

@@ -1,4 +1,6 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { Icon } from '../primitives/Icon/Icon.js';
 
 /**
@@ -19,9 +21,10 @@ import { Icon } from '../primitives/Icon/Icon.js';
  * <IconButton icon={<CloseIcon />} aria-label="Close" />
  * ```
  */
-const CloseIcon = props => {
+const CloseIcon = /*#__PURE__*/ React.memo(props => {
     return (jsxs(Icon, { ...props, children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
-};
+});
+CloseIcon.displayName = 'CloseIcon';
 
 export { CloseIcon };
 //# sourceMappingURL=CloseIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CloseIcon.js","sources":["../../../../../src/components/Icons/CloseIcon.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAIA;;;;;;;;;;;;;;;;;AAiBG;AACI,MAAM,SAAS,GAA0C,KAAK,IAAG;AACtE,IAAA,QACEA,IAAA,CAAC,IAAI,OAAK,KAAK,EAAA,QAAA,EAAA,CACbC,cAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,EACtCA,cAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,CAAA,EAAA,CACjC;AAEX;;;;"}
+{"version":3,"file":"CloseIcon.js","sources":["../../../../../src/components/Icons/CloseIcon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AACI;AAEH;AAMF;AAGF;;"}

package/dist/esm/components/Icons/CodeIcon.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';
+
+/**
+ * Code icon component for code and development actions.
+ *
+ * A standard code brackets icon commonly used for code editing,
+ * development tools, and programming features in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CodeIcon />
+ *
+ * // With custom size and color
+ * <CodeIcon size="md" color="accent" />
+ *
+ * // In a code context
+ * <Button icon={<CodeIcon />}>View Code</Button>
+ * ```
+ */
+const CodeIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("polyline", { points: "16,18 22,12 16,6" }), jsx("polyline", { points: "8,6 2,12 8,18" })] }));
+});
+CodeIcon.displayName = 'CodeIcon';
+
+export { CodeIcon };
+//# sourceMappingURL=CodeIcon.js.map

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

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

package/dist/esm/components/Icons/CopyIcon.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';
+
+/**
+ * Copy icon component for duplication and clipboard actions.
+ *
+ * A standard copy icon commonly used for copying content,
+ * duplicating items, and clipboard operations in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CopyIcon />
+ *
+ * // With custom size and color
+ * <CopyIcon size="md" color="primary" />
+ *
+ * // In a copy button
+ * <Button icon={<CopyIcon />}>Copy</Button>
+ * ```
+ */
+const CopyIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }));
+});
+CopyIcon.displayName = 'CopyIcon';
+
+export { CopyIcon };
+//# sourceMappingURL=CopyIcon.js.map

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

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

package/dist/esm/components/Icons/CutIcon.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';
+
+/**
+ * Cut icon component for cutting and removal actions.
+ *
+ * A standard scissors icon commonly used for cutting content,
+ * removing items, and clipboard cut operations in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CutIcon />
+ *
+ * // With custom size and color
+ * <CutIcon size="md" color="primary" />
+ *
+ * // In a cut button
+ * <Button icon={<CutIcon />}>Cut</Button>
+ * ```
+ */
+const CutIcon = /*#__PURE__*/ React.memo(props => {
+    return (jsxs(Icon, { ...props, children: [jsx("circle", { cx: "6", cy: "6", r: "3" }), jsx("circle", { cx: "6", cy: "18", r: "3" }), jsx("line", { x1: "20", y1: "4", x2: "8.12", y2: "15.88" }), jsx("line", { x1: "14.47", y1: "14.48", x2: "20", y2: "20" }), jsx("line", { x1: "8.12", y1: "8.12", x2: "12", y2: "12" })] }));
+});
+CutIcon.displayName = 'CutIcon';
+
+export { CutIcon };
+//# sourceMappingURL=CutIcon.js.map

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

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