entangle-ui 0.3.0 → 0.5.0

package/dist/esm/assets/src/theme/darkTheme.css.ts.vanilla-DCe89yCJ.css

@@ -0,0 +1,96 @@
+:root {
+  --etui-color-bg-primary: #1a1a1a;
+  --etui-color-bg-secondary: #2d2d2d;
+  --etui-color-bg-tertiary: #3a3a3a;
+  --etui-color-bg-elevated: #404040;
+  --etui-color-surface-default: #2d2d2d;
+  --etui-color-surface-hover: #363636;
+  --etui-color-surface-active: #404040;
+  --etui-color-surface-disabled: #1f1f1f;
+  --etui-color-surface-white-overlay: rgba(255, 255, 255, 0.1);
+  --etui-color-border-default: #4a4a4a;
+  --etui-color-border-focus: #007acc;
+  --etui-color-border-error: #f44336;
+  --etui-color-border-success: #4caf50;
+  --etui-color-text-primary: #ffffff;
+  --etui-color-text-secondary: #cccccc;
+  --etui-color-text-muted: #888888;
+  --etui-color-text-disabled: #555555;
+  --etui-color-accent-primary: #007acc;
+  --etui-color-accent-secondary: #005a9e;
+  --etui-color-accent-success: #4caf50;
+  --etui-color-accent-warning: #ff9800;
+  --etui-color-accent-error: #f44336;
+  --etui-color-backdrop: rgba(0, 0, 0, 0.6);
+  --etui-spacing-xs: 2px;
+  --etui-spacing-sm: 4px;
+  --etui-spacing-md: 8px;
+  --etui-spacing-lg: 12px;
+  --etui-spacing-xl: 16px;
+  --etui-spacing-xxl: 24px;
+  --etui-spacing-xxxl: 32px;
+  --etui-font-size-xxs: 9px;
+  --etui-font-size-xs: 10px;
+  --etui-font-size-sm: 11px;
+  --etui-font-size-md: 12px;
+  --etui-font-size-lg: 14px;
+  --etui-font-size-xl: 16px;
+  --etui-font-weight-normal: 400;
+  --etui-font-weight-medium: 500;
+  --etui-font-weight-semibold: 600;
+  --etui-line-height-tight: 1.2;
+  --etui-line-height-normal: 1.4;
+  --etui-line-height-relaxed: 1.6;
+  --etui-font-family-mono: SF Mono, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --etui-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --etui-radius-none: 0px;
+  --etui-radius-sm: 2px;
+  --etui-radius-md: 4px;
+  --etui-radius-lg: 6px;
+  --etui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --etui-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
+  --etui-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
+  --etui-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.5);
+  --etui-shadow-focus: 0 0 0 2px rgba(0, 122, 204, 0.4);
+  --etui-shadow-separator-bottom: 0 1px 2px rgba(0, 0, 0, 0.18);
+  --etui-shadow-separator-right: 1px 0 2px rgba(0, 0, 0, 0.18);
+  --etui-shadow-separator-left: -1px 0 2px rgba(0, 0, 0, 0.18);
+  --etui-shadow-thumb: 0 0 2px rgba(0, 0, 0, 0.5);
+  --etui-transition-fast: 100ms ease-out;
+  --etui-transition-normal: 200ms ease-out;
+  --etui-transition-slow: 300ms ease-out;
+  --etui-z-base: 1;
+  --etui-z-dropdown: 1000;
+  --etui-z-popover: 1000;
+  --etui-z-tooltip: 1000;
+  --etui-z-modal: 1100;
+  --etui-shell-menubar-height: 28px;
+  --etui-shell-menubar-bg: #2d2d2d;
+  --etui-shell-menubar-hover-bg: #363636;
+  --etui-shell-menubar-active-bg: #005a9e;
+  --etui-shell-menubar-text: #ffffff;
+  --etui-shell-menubar-shortcut-text: #888888;
+  --etui-shell-toolbar-height-sm: 32px;
+  --etui-shell-toolbar-height-md: 40px;
+  --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;
+  --etui-shell-dock-tab-bg: #2d2d2d;
+  --etui-shell-dock-tab-active-bg: #1a1a1a;
+  --etui-shell-dock-tab-hover-bg: #363636;
+  --etui-shell-dock-tab-text: #cccccc;
+  --etui-shell-dock-tab-active-text: #ffffff;
+  --etui-shell-dock-splitter-size: 4px;
+  --etui-shell-dock-splitter-color: #4a4a4a;
+  --etui-shell-dock-splitter-hover-color: #007acc;
+  --etui-shell-dock-border-bar-bg: #2d2d2d;
+  --etui-shell-dock-border-bar-size: 28px;
+  --etui-shell-dock-drop-overlay: rgba(0, 122, 204, 0.2);
+  --etui-storybook-gradient-start: #061f21;
+  --etui-storybook-gradient-mid: #031a1a;
+  --etui-storybook-gradient-end: #091010;
+}

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;AACU,MAAA,SAAS,GAA0C,KAAK,IAAG;AACtE,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAU,CAAA,UAAA,EAAA,EAAA,MAAM,EAAC,gBAAgB,EAAG,CAAA,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;AACU,MAAA,eAAe,GAA0C,KAAK,IAAG;AAC5E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAU,CAAA,UAAA,EAAA,EAAA,MAAM,EAAC,gBAAgB,EAAG,CAAA,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;AACU,MAAA,aAAa,GAA0C,KAAK,IAAG;AAC1E,IAAA,QACEA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EAAA,QAAA,EACbA,GAAU,CAAA,UAAA,EAAA,EAAA,MAAM,EAAC,iBAAiB,EAAG,CAAA,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;AACU,MAAA,UAAU,GAA0C,KAAK,IAAG;IACvE,QACEA,IAAC,IAAI,EAAA,EAAA,GAAK,KAAK,EACb,QAAA,EAAAA,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG,EAC5B,CAAA;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;AACU,MAAA,SAAS,GAA0C,KAAK,IAAG;AACtE,IAAA,QACEA,IAAC,CAAA,IAAI,OAAK,KAAK,EAAA,QAAA,EAAA,CACbC,cAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAG,CAAA,EACtCA,cAAM,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAG,CAAA,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;;"}