entangle-ui 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # entangle-ui
 
+## 0.8.1
+
+### Patch Changes
+
+- [#66](https://github.com/SebastianWebdev/entangle-ui/pull/66) [`ca1fc51`](https://github.com/SebastianWebdev/entangle-ui/commit/ca1fc51fa0db1aac0a090f940886bab8aba02962) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Fix runtime crash in `Slider`, `NumberInput`, and `VectorInput` when used without a manual `KeyboardContextProvider` wrapper, and expose the icon set and provider from the package barrel.
+  - `useKeyboardContext` now returns a neutral keyboard state (no pressed keys, all modifiers `false`) when no provider is mounted, instead of throwing. This unblocks every minimal setup that renders a `Slider` / `NumberInput` directly under `ThemeProvider`.
+  - `ThemeProvider` now auto-mounts `KeyboardContextProvider` so apps get full Shift/Ctrl modifier awareness in `Slider` / `NumberInput` for free.
+  - `KeyboardContextProvider`, `useKeyboardContext`, `useEffectsOnKeyboard`, and the `KeyboardContextProviderProps` type are now exported from the package entry for explicit use in apps that don't render a `ThemeProvider`.
+  - The 63 built-in icon components (`SaveIcon`, `PlayIcon`, `AddIcon`, …) are now re-exported from the package entry, matching the documentation.
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/esm/context/KeyboardContext.js

@@ -1,16 +1,40 @@
 "use client";
-import 'react/jsx-runtime';
-import { useContext, createContext } from 'react';
-import '../utils/devWarn.js';
+import { jsx } from 'react/jsx-runtime';
+import { memo, useCallback, useEffect, useContext, createContext } from 'react';
+import { useKeyboard } from '../hooks/useKeyboard/useKeyboard.js';
+import { isKeyPressed } from '../hooks/useKeyboard/utils.js';
 
-const KeyboardContext = /*#__PURE__*/ createContext(null);
-const useKeyboardContext = () => {
-    const context = useContext(KeyboardContext);
-    if (!context) {
-        throw new Error('useKeyboardContext must be used within a KeyboardContextProvider');
-    }
-    return context;
+const NEUTRAL_KEYBOARD_STATE = {
+    pressedKeys: [],
+    modifiers: { control: false, shift: false, alt: false, meta: false },
 };
+const KeyboardContext = /*#__PURE__*/ createContext(NEUTRAL_KEYBOARD_STATE);
+const KeyboardContextProvider = /*#__PURE__*/ memo(({ children }) => {
+    const keyboardState = useKeyboard();
+    return (jsx(KeyboardContext.Provider, { value: keyboardState, children: children }));
+});
+const useKeyboardContext = () => useContext(KeyboardContext);
+function useEffectsOnKeyboard(actions) {
+    const keyboard = useKeyboardContext();
+    const handleKeyDown = useCallback(() => {
+        actions.forEach(action => {
+            if (isKeyPressed(keyboard, action.key) && action.actions.keydown) {
+                action.actions.keydown();
+            }
+        });
+    }, [keyboard, actions]);
+    const handleKeyUp = useCallback(() => {
+        actions.forEach(action => {
+            if (isKeyPressed(keyboard, action.key) && action.actions.keyup) {
+                action.actions.keyup();
+            }
+        });
+    }, [keyboard, actions]);
+    useEffect(() => {
+        handleKeyDown();
+        handleKeyUp();
+    }, [handleKeyDown, handleKeyUp]);
+}
 
-export { useKeyboardContext };
+export { KeyboardContextProvider, useEffectsOnKeyboard, useKeyboardContext };
 //# sourceMappingURL=KeyboardContext.js.map

package/dist/esm/context/KeyboardContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardContext.js","sources":["../../../../src/context/KeyboardContext.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAQA;AAiBO;AACL;;AAEE;;AAIF;AACF;;"}
+{"version":3,"file":"KeyboardContext.js","sources":["../../../../src/context/KeyboardContext.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAQA;AACE;AACA;;AAGF;AAQO;AAEH;AACA;AAKF;AAGK;AAYD;AACJ;AAEA;AACE;AACE;AACE;;AAEJ;AACF;AAEA;AACE;AACE;AACE;;AAEJ;AACF;;AAGE;AACA;AACF;AACF;;"}

package/dist/esm/hooks/useTheme/useTheme.js

@@ -7,6 +7,7 @@ import '../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js'
 import './../../assets/src/theme/darkTheme.css.ts.vanilla-ab1WD4dr.css';
 import 'react/jsx-runtime';
 import './../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../utils/devWarn.js';
 
 const VAR_REF_PATTERN = /^var\((--[^,)]+)/;
 /**

package/dist/esm/hooks/useTheme/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sources":["../../../../../src/hooks/useTheme/useTheme.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAUA;AAEA;;;;;;;;;;AAUG;AACH;;;AAGE;;;;AAMI;;;AAEA;;;;AAG0B;;AAE9B;AACF;AAEA;AACE;;AAEF;AAEA;;;;;AAKG;AACH;AACE;AACE;;AAEE;;AAEE;AACA;;;AAGJ;;;;;AAKE;AACA;AAGA;;AAEF;;AAEF;AACF;AAEA;;;AAGE;;;;AAMI;;;AAEA;;;AAGJ;AACF;AAEA;;;;;;;AAOG;AACH;;AACuC;;AAGnC;;AAEF;AACF;AAOA;AACE;AACA;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;;;;;;;AAOC;AACA;;;;AAIA;;;AAIF;AACE;;;AAE0B;AAE1B;;AAEE;AACA;;AAGF;;AAEE;AACA;;AAGF;;AAEG;;AAEH;AACA;;AAGF;AAEA;;;;;;AASF;;"}
+{"version":3,"file":"useTheme.js","sources":["../../../../../src/hooks/useTheme/useTheme.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAUA;AAEA;;;;;;;;;;AAUG;AACH;;;AAGE;;;;AAMI;;;AAEA;;;;AAG0B;;AAE9B;AACF;AAEA;AACE;;AAEF;AAEA;;;;;AAKG;AACH;AACE;AACE;;AAEE;;AAEE;AACA;;;AAGJ;;;;;AAKE;AACA;AAGA;;AAEF;;AAEF;AACF;AAEA;;;AAGE;;;;AAMI;;;AAEA;;;AAGJ;AACF;AAEA;;;;;;;AAOG;AACH;;AACuC;;AAGnC;;AAEF;AACF;AAOA;AACE;AACA;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;;;;;;;AAOC;AACA;;;;AAIA;;;AAIF;AACE;;;AAE0B;AAE1B;;AAEE;AACA;;AAGF;;AAEE;AACA;;AAGF;;AAEG;;AAEH;AACA;;AAGF;AAEA;;;;;;AASF;;"}

package/dist/esm/index.js

@@ -57,8 +57,7 @@ export { MATERIAL_PALETTE } from './components/controls/ColorPicker/palettes/mat
 export { TAILWIND_PALETTE } from './components/controls/ColorPicker/palettes/tailwind.js';
 export { EARTH_PALETTE, MONOCHROME_PALETTE, NEON_PALETTE, PASTEL_PALETTE, PROFESSIONAL_PALETTES, SKIN_TONES_PALETTE, VINTAGE_PALETTE } from './components/controls/ColorPicker/palettes/professional.js';
 export { NumberInput } from './components/controls/NumberInput/NumberInput.js';
-import 'react/jsx-runtime';
-export { useKeyboard } from './hooks/useKeyboard/useKeyboard.js';
+export { KeyboardContextProvider, useEffectsOnKeyboard, useKeyboardContext } from './context/KeyboardContext.js';
 import './utils/mathExpression.js';
 import './utils/devWarn.js';
 export { Select } from './components/controls/Select/Select.js';
@@ -133,6 +132,70 @@ export { FloatingManager, FloatingPanel } from './components/shell/FloatingPanel
 export { MenuBar } from './components/shell/MenuBar/MenuBar.js';
 export { StatusBar } from './components/shell/StatusBar/StatusBar.js';
 export { Toolbar } from './components/shell/Toolbar/Toolbar.js';
+export { AddIcon } from './components/Icons/AddIcon.js';
+export { AiChatIcon } from './components/Icons/AiChatIcon.js';
+export { AiSparklesIcon } from './components/Icons/AiSparklesIcon.js';
+export { ArrowDownIcon } from './components/Icons/ArrowDownIcon.js';
+export { ArrowLeftIcon } from './components/Icons/ArrowLeftIcon.js';
+export { ArrowRightIcon } from './components/Icons/ArrowRightIcon.js';
+export { ArrowUpIcon } from './components/Icons/ArrowUpIcon.js';
+export { BookmarkIcon } from './components/Icons/BookmarkIcon.js';
+export { CalendarIcon } from './components/Icons/CalendarIcon.js';
+export { ChevronDownIcon } from './components/Icons/ChevronDownIcon.js';
+export { ChevronUpIcon } from './components/Icons/ChevronUpIcon.js';
+export { ClockIcon } from './components/Icons/ClockIcon.js';
+export { CloseIcon } from './components/Icons/CloseIcon.js';
+export { CodeIcon } from './components/Icons/CodeIcon.js';
+export { CopyIcon } from './components/Icons/CopyIcon.js';
+export { CutIcon } from './components/Icons/CutIcon.js';
+export { DownloadIcon } from './components/Icons/DownloadIcon.js';
+export { EditIcon } from './components/Icons/EditIcon.js';
+export { ErrorIcon } from './components/Icons/ErrorIcon.js';
+export { EyeDropperIcon } from './components/Icons/EyeDropperIcon.js';
+export { EyeIcon } from './components/Icons/EyeIcon.js';
+export { FilterIcon } from './components/Icons/FilterIcon.js';
+export { FolderIcon } from './components/Icons/FolderIcon.js';
+export { FullscreenIcon } from './components/Icons/FullscreenIcon.js';
+export { GridIcon } from './components/Icons/GridIcon.js';
+export { HeartIcon } from './components/Icons/HeartIcon.js';
+export { HelpIcon } from './components/Icons/HelpIcon.js';
+export { HomeIcon } from './components/Icons/HomeIcon.js';
+export { InfoIcon } from './components/Icons/InfoIcon.js';
+export { LinkIcon } from './components/Icons/LinkIcon.js';
+export { ListIcon } from './components/Icons/ListIcon.js';
+export { LockIcon } from './components/Icons/LockIcon.js';
+export { MaximizeIcon } from './components/Icons/MaximizeIcon.js';
+export { MenuIcon } from './components/Icons/MenuIcon.js';
+export { MinimizeIcon } from './components/Icons/MinimizeIcon.js';
+export { PasteIcon } from './components/Icons/PasteIcon.js';
+export { PlayIcon } from './components/Icons/PlayIcon.js';
+export { RedoIcon } from './components/Icons/RedoIcon.js';
+export { RefreshIcon } from './components/Icons/RefreshIcon.js';
+export { RobotIcon } from './components/Icons/RobotIcon.js';
+export { SaveIcon } from './components/Icons/SaveIcon.js';
+export { SearchIcon } from './components/Icons/SearchIcon.js';
+export { SettingsIcon } from './components/Icons/SettingsIcon.js';
+export { SortIcon } from './components/Icons/SortIcon.js';
+export { StarIcon } from './components/Icons/StarIcon.js';
+export { SuccessIcon } from './components/Icons/SuccessIcon.js';
+export { TagIcon } from './components/Icons/TagIcon.js';
+export { TrashIcon } from './components/Icons/TrashIcon.js';
+export { UndoIcon } from './components/Icons/UndoIcon.js';
+export { UnlockIcon } from './components/Icons/UnlockIcon.js';
+export { UploadIcon } from './components/Icons/UploadIcon.js';
+export { UserIcon } from './components/Icons/UserIcon.js';
+export { WarningIcon } from './components/Icons/WarningIcon.js';
+export { ZoomInIcon } from './components/Icons/ZoomInIcon.js';
+export { ZoomOutIcon } from './components/Icons/ZoomOutIcon.js';
+export { CheckIcon } from './components/Icons/CheckIcon.js';
+export { CircleIcon } from './components/Icons/CircleIcon.js';
+export { TangentFreeIcon } from './components/Icons/TangentFreeIcon.js';
+export { TangentAlignedIcon } from './components/Icons/TangentAlignedIcon.js';
+export { TangentMirroredIcon } from './components/Icons/TangentMirroredIcon.js';
+export { TangentAutoIcon } from './components/Icons/TangentAutoIcon.js';
+export { TangentLinearIcon } from './components/Icons/TangentLinearIcon.js';
+export { TangentStepIcon } from './components/Icons/TangentStepIcon.js';
+export { useKeyboard } from './hooks/useKeyboard/useKeyboard.js';
 export { useControlledState } from './hooks/useControlledState/useControlledState.js';
 export { useFocusTrap } from './hooks/useFocusTrap/useFocusTrap.js';
 export { useMergedRef } from './hooks/useMergedRef/useMergedRef.js';

package/dist/esm/index.js.map

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

package/dist/esm/theme/ThemeProvider.js

@@ -1,7 +1,8 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { GLOBAL_SCROLLBARS_CLASS } from './globalScrollbars.css.js';
+import { KeyboardContextProvider } from '../context/KeyboardContext.js';
 
 /**
  * Theme provider for Entangle UI components.
@@ -25,7 +26,7 @@ const ThemeProvider = ({ children, globalScrollbars = false, }) => {
             body.classList.remove(GLOBAL_SCROLLBARS_CLASS);
         };
     }, [globalScrollbars]);
-    return jsx(Fragment, { children: children });
+    return jsx(KeyboardContextProvider, { children: children });
 };
 
 export { ThemeProvider };

package/dist/esm/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../../src/theme/ThemeProvider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAoBA;;;;;;;;;AASG;AACI;;AAKH;;;;AAGA;AACA;AACA;AACE;AACF;AACF;;AAGF;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../../src/theme/ThemeProvider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqBA;;;;;;;;;AASG;AACI;;AAKH;;;;AAGA;AACA;AACA;AACE;AACF;AACF;AAEA;AACF;;"}

package/dist/tokens/tokens.dark.css

@@ -1,4 +1,4 @@
-/* Entangle UI dark theme — token export (v0.8.0) */
+/* Entangle UI dark theme — token export (v0.8.1) */
 /* Generated by scripts/export-tokens.ts — do not edit by hand. */
 :root {
   --etui-color-accent-error: #f44336;

package/dist/tokens/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://design-tokens.org/schema.json",
   "$description": "Entangle UI design tokens",
-  "$version": "0.8.0",
+  "$version": "0.8.1",
   "themes": {
     "dark": {
       "colors": {

package/dist/tokens/tokens.light.css

@@ -1,4 +1,4 @@
-/* Entangle UI light theme — token export (v0.8.0) */
+/* Entangle UI light theme — token export (v0.8.1) */
 /* Generated by scripts/export-tokens.ts — do not edit by hand. */
 .etui-theme-light {
   --etui-color-accent-error: #d32f2f;

package/dist/types/components/Icons/AddIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } 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>
+ * ```
+ */
+declare const AddIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { AddIcon };

package/dist/types/components/Icons/AiChatIcon.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconSize, IconColor } 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" />
+ * ```
+ */
+declare const AiChatIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { AiChatIcon };

package/dist/types/components/Icons/AiSparklesIcon.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconSize, IconColor } 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>
+ * ```
+ */
+declare const AiSparklesIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { AiSparklesIcon };

package/dist/types/components/Icons/ArrowDownIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } 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>
+ * ```
+ */
+declare const ArrowDownIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ArrowDownIcon };

package/dist/types/components/Icons/ArrowLeftIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } 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>
+ * ```
+ */
+declare const ArrowLeftIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ArrowLeftIcon };

package/dist/types/components/Icons/ArrowRightIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } 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>
+ * ```
+ */
+declare const ArrowRightIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ArrowRightIcon };

package/dist/types/components/Icons/ArrowUpIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } 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>
+ * ```
+ */
+declare const ArrowUpIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ArrowUpIcon };

package/dist/types/components/Icons/BookmarkIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } 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>
+ * ```
+ */
+declare const BookmarkIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { BookmarkIcon };

package/dist/types/components/Icons/CalendarIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } 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>
+ * ```
+ */
+declare const CalendarIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CalendarIcon };

package/dist/types/components/Icons/CheckIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Check icon component for confirmation and selection states.
+ *
+ * A standard checkmark icon commonly used for checkboxes, confirmation dialogs,
+ * completed tasks, and success states in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CheckIcon />
+ *
+ * // With custom size and color
+ * <CheckIcon size="lg" color="success" />
+ *
+ * // In a confirmation button
+ * <Button icon={<CheckIcon />}>Confirm</Button>
+ * ```
+ */
+declare const CheckIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CheckIcon };

package/dist/types/components/Icons/ChevronDownIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Chevron Down icon component for dropdown and expansion indicators.
+ *
+ * A subtle downward chevron commonly used for dropdown menus,
+ * accordion expansion, and subtle directional cues in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ChevronDownIcon />
+ *
+ * // With custom size and color
+ * <ChevronDownIcon size="sm" color="muted" />
+ *
+ * // In a dropdown
+ * <Select icon={<ChevronDownIcon />}>Options</Select>
+ * ```
+ */
+declare const ChevronDownIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ChevronDownIcon };

package/dist/types/components/Icons/ChevronUpIcon.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Chevron Up icon component for collapse and upward indicators.
+ *
+ * A subtle upward chevron commonly used for collapsing content,
+ * accordion collapse, and subtle directional cues in editor interfaces.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ChevronUpIcon />
+ *
+ * // With custom size and color
+ * <ChevronUpIcon size="sm" color="muted" />
+ *
+ * // In a collapsible section
+ * <Button icon={<ChevronUpIcon />}>Collapse</Button>
+ * ```
+ */
+declare const ChevronUpIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ChevronUpIcon };