@tangible/ui 0.0.2 → 0.0.4

package/components/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState, cloneElement, isValidElement, } from 'react';
-import { useFloating, offset, flip, shift, autoUpdate, FloatingPortal, } from '@floating-ui/react';
+import { useFloating, offset, flip, shift, arrow, autoUpdate, FloatingPortal, FloatingArrow, } from '@floating-ui/react';
 import { cx } from '../../utils/cx.js';
 import { getPortalRootFor } from '../../utils/portal.js';
 import { TooltipContext, TooltipProviderContext, useTooltipContext, useTooltipProviderContext, } from './TooltipContext.js';
@@ -8,7 +8,7 @@ import { toPlacement } from './types.js';
 // =============================================================================
 // TooltipProvider
 // =============================================================================
-function TooltipProviderComponent({ delayDuration = 400, closeDelayDuration = 0, children, }) {
+function TooltipProviderComponent({ delayDuration = 400, closeDelayDuration = 150, children, }) {
     const value = useMemo(() => ({ delayDuration, closeDelayDuration }), [delayDuration, closeDelayDuration]);
     return (_jsx(TooltipProviderContext.Provider, { value: value, children: children }));
 }
@@ -28,46 +28,63 @@ function TooltipRoot({ open: controlledOpen, onOpenChange, defaultOpen = false,
     }, [isControlled, onOpenChange]);
     const triggerRef = useRef(null);
     const contentId = useId();
-    const contextValue = useMemo(() => ({
-        open,
-        setOpen,
-        triggerRef,
-        contentId,
-        delayDuration: localDelay ?? providerContext.delayDuration,
-        closeDelayDuration: providerContext.closeDelayDuration,
-    }), [open, setOpen, contentId, localDelay, providerContext]);
-    return (_jsx(TooltipContext.Provider, { value: contextValue, children: children }));
-}
-// =============================================================================
-// TooltipTrigger
-// =============================================================================
-function TooltipTriggerComponent({ asChild = false, children }) {
-    const { open, setOpen, triggerRef, contentId, delayDuration, closeDelayDuration } = useTooltipContext();
+    // Shared timer refs — lifted here so both Trigger and Content can
+    // cancel/schedule close for WCAG 1.4.13 hover persistence.
     const openTimeoutRef = useRef(null);
     const closeTimeoutRef = useRef(null);
-    const clearTimeouts = useCallback(() => {
-        if (openTimeoutRef.current)
+    const resolvedDelay = localDelay ?? providerContext.delayDuration;
+    const resolvedCloseDelay = providerContext.closeDelayDuration;
+    const clearAllTimeouts = useCallback(() => {
+        if (openTimeoutRef.current) {
             clearTimeout(openTimeoutRef.current);
-        if (closeTimeoutRef.current)
+            openTimeoutRef.current = null;
+        }
+        if (closeTimeoutRef.current) {
             clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    const cancelClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
     }, []);
     const handleOpen = useCallback(() => {
-        clearTimeouts();
-        openTimeoutRef.current = setTimeout(() => setOpen(true), delayDuration);
-    }, [clearTimeouts, delayDuration, setOpen]);
+        clearAllTimeouts();
+        openTimeoutRef.current = setTimeout(() => setOpen(true), resolvedDelay);
+    }, [clearAllTimeouts, resolvedDelay, setOpen]);
     const handleClose = useCallback(() => {
-        clearTimeouts();
-        if (closeDelayDuration > 0) {
-            closeTimeoutRef.current = setTimeout(() => setOpen(false), closeDelayDuration);
+        clearAllTimeouts();
+        if (resolvedCloseDelay > 0) {
+            closeTimeoutRef.current = setTimeout(() => setOpen(false), resolvedCloseDelay);
         }
         else {
             setOpen(false);
         }
-    }, [clearTimeouts, closeDelayDuration, setOpen]);
+    }, [clearAllTimeouts, resolvedCloseDelay, setOpen]);
     // Cleanup on unmount
     useEffect(() => {
-        return () => clearTimeouts();
-    }, [clearTimeouts]);
+        return () => clearAllTimeouts();
+    }, [clearAllTimeouts]);
+    const contextValue = useMemo(() => ({
+        open,
+        setOpen,
+        triggerRef,
+        contentId,
+        delayDuration: resolvedDelay,
+        closeDelayDuration: resolvedCloseDelay,
+        handleOpen,
+        handleClose,
+        cancelClose,
+    }), [open, setOpen, contentId, resolvedDelay, resolvedCloseDelay, handleOpen, handleClose, cancelClose]);
+    return (_jsx(TooltipContext.Provider, { value: contextValue, children: children }));
+}
+// =============================================================================
+// TooltipTrigger
+// =============================================================================
+function TooltipTriggerComponent({ asChild = false, 'aria-label': ariaLabel, children, }) {
+    const { open, triggerRef, contentId, handleOpen, handleClose } = useTooltipContext();
     // Merge child ref with our triggerRef
     const setRefs = useCallback((node) => {
         triggerRef.current = node;
@@ -97,20 +114,22 @@ function TooltipTriggerComponent({ asChild = false, children }) {
         });
     }
     // Wrapper needs tabIndex to be keyboard-focusable for non-interactive children
-    return (_jsx("span", { ref: setRefs, ...triggerProps, tabIndex: 0, style: { display: 'inline-flex' }, children: children }));
+    return (_jsx("span", { ref: setRefs, ...triggerProps, tabIndex: 0, "aria-label": ariaLabel, style: { display: 'inline-flex' }, children: children }));
 }
 // =============================================================================
 // TooltipContent
 // =============================================================================
-function TooltipContentComponent({ side = 'top', align = 'center', sideOffset = 8, className, children, }) {
-    const { open, setOpen, triggerRef, contentId } = useTooltipContext();
-    const { refs, floatingStyles } = useFloating({
+function TooltipContentComponent({ side = 'top', align = 'center', sideOffset = 8, theme = 'dark', className, children, }) {
+    const { open, setOpen, triggerRef, contentId, cancelClose, handleClose } = useTooltipContext();
+    const arrowRef = useRef(null);
+    const { refs, floatingStyles, context } = useFloating({
         placement: toPlacement(side, align),
         open,
         middleware: [
             offset(sideOffset),
             flip(),
             shift({ padding: 8 }),
+            arrow({ element: arrowRef }),
         ],
         whileElementsMounted: autoUpdate,
     });
@@ -121,17 +140,19 @@ function TooltipContentComponent({ side = 'top', align = 'center', sideOffset =
             refs.setReference(triggerRef.current);
         }
     }, [triggerRef, refs]);
-    // Close on Escape — scoped to trigger focus to avoid closing modal + tooltip together
+    // Close on Escape
+    // - Focus on trigger: close + stopPropagation (avoid closing parent modal)
+    // - Hover-only (focus elsewhere): close without stopPropagation
     useEffect(() => {
         if (!open)
             return;
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
-                // Only close if focus is on or within the trigger element
                 const activeEl = document.activeElement;
                 const trigger = triggerRef.current;
-                if (trigger && (trigger === activeEl || trigger.contains(activeEl))) {
-                    setOpen(false);
+                const focusIsOnTrigger = trigger && (trigger === activeEl || trigger.contains(activeEl));
+                setOpen(false);
+                if (focusIsOnTrigger) {
                     e.stopPropagation(); // Prevent bubbling to modal's Escape handler
                 }
             }
@@ -151,10 +172,10 @@ function TooltipContentComponent({ side = 'top', align = 'center', sideOffset =
                     'Tooltips should only contain plain text. Use Popover for interactive content.');
             }
         }
-    }, [open, refs.floating, children]);
+    }, [open, refs.floating]);
     if (!open)
         return null;
-    return (_jsx(FloatingPortal, { root: portalRoot, children: _jsx("div", { ref: refs.setFloating, id: contentId, role: "tooltip", className: cx('tui-tooltip', className), style: floatingStyles, children: children }) }));
+    return (_jsx(FloatingPortal, { root: portalRoot, children: _jsxs("div", { ref: refs.setFloating, id: contentId, role: "tooltip", className: cx('tui-tooltip', theme === 'light' && 'is-theme-light', className), style: floatingStyles, onMouseEnter: cancelClose, onMouseLeave: handleClose, children: [children, _jsx(FloatingArrow, { ref: arrowRef, context: context, className: "tui-tooltip__arrow" })] }) }));
 }
 export const Tooltip = TooltipRoot;
 Tooltip.Provider = TooltipProviderComponent;

package/components/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
 export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from './Tooltip';
-export type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipContentProps, Side, Align, } from './types';
+export type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipContentProps, TooltipTheme, Side, Align, } from './types';

package/components/Tooltip/types.d.ts

@@ -15,7 +15,9 @@ export type TooltipProviderProps = {
     delayDuration?: number;
     /**
      * Delay in ms before tooltip closes after pointer leaves.
-     * @default 0
+     * Provides a brief window for users to move their pointer to the tooltip
+     * content (partial WCAG 1.4.13 compliance).
+     * @default 150
      */
     closeDelayDuration?: number;
     children: React.ReactNode;
@@ -47,8 +49,22 @@ export type TooltipTriggerProps = {
      * @default false
      */
     asChild?: boolean;
+    /**
+     * Accessible label for the non-asChild wrapper span. When `asChild` is false,
+     * the trigger renders as a `<span>` with no semantic role — this label gives
+     * assistive technology a name for the focusable element. Omitting this when
+     * the span wraps non-descriptive content (e.g. an icon) means screen readers
+     * will announce the element with no accessible name.
+     */
+    'aria-label'?: string;
     children: React.ReactNode;
 };
+/**
+ * Visual theme for the tooltip.
+ * - `'dark'` (default): inverted background, high contrast against page content.
+ * - `'light'`: surface background with border, blends with surrounding UI.
+ */
+export type TooltipTheme = 'dark' | 'light';
 export type TooltipContentProps = {
     /**
      * Preferred side of the trigger to place the tooltip.
@@ -65,6 +81,11 @@ export type TooltipContentProps = {
      * @default 8
      */
     sideOffset?: number;
+    /**
+     * Visual theme variant.
+     * @default 'dark'
+     */
+    theme?: TooltipTheme;
     /**
      * Additional CSS class names.
      */
@@ -78,6 +99,12 @@ export type TooltipContextValue = {
     contentId: string;
     delayDuration: number;
     closeDelayDuration: number;
+    /** Open tooltip after delayDuration. Cancels any pending close. */
+    handleOpen: () => void;
+    /** Close tooltip after closeDelayDuration. Cancels any pending open. */
+    handleClose: () => void;
+    /** Cancel any pending close timeout (for WCAG 1.4.13 hover persistence). */
+    cancelClose: () => void;
 };
 /**
  * Convert side + align to Floating UI placement.

package/components/index.d.ts

@@ -11,13 +11,14 @@ export { ChipGroup } from './ChipGroup';
 export { Chips } from './Chips';
 export { ContentIndicator } from './ContentIndicator';
 export { Combobox, ComboboxContent, ComboboxOption, ComboboxGroup, ComboboxLabel, useCombobox } from './Combobox';
-export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, useDropdown } from './Dropdown';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator, DropdownHeader, useDropdown } from './Dropdown';
 export { Field } from './Field';
 export { MultiSelect, MultiSelectTrigger, MultiSelectContent, MultiSelectOption, MultiSelectGroup, MultiSelectLabel, useMultiSelect } from './MultiSelect';
 export { Select, SelectTrigger, SelectContent, SelectOption, SelectGroup, SelectLabel, useSelect } from './Select';
 export { Icon } from './Icon';
 export { IconButton } from './IconButton';
 export { Modal } from './Modal';
+export { MoveHandle } from './MoveHandle';
 export { Notice } from './Notice';
 export { OverlapStack } from './OverlapStack';
 export { Pager } from './Pager';
@@ -45,7 +46,7 @@ export type { ChipProps } from './Chip';
 export type { ChipGroupProps, ChipGroupSingleProps, ChipGroupMultipleProps } from './ChipGroup';
 export type { ChipsProps, ChipOption } from './Chips';
 export type { ContentIndicatorProps } from './ContentIndicator';
-export type { DropdownProps, DropdownTriggerProps, DropdownContentProps, DropdownItemProps, } from './Dropdown';
+export type { DropdownProps, DropdownTriggerProps, DropdownContentProps, DropdownItemProps, DropdownSeparatorProps, DropdownHeaderProps, } from './Dropdown';
 export type { ComboboxProps, ComboboxContentProps, ComboboxOptionProps, ComboboxGroupProps, ComboboxLabelProps, ComboboxRegisteredOption, } from './Combobox';
 export type { FieldProps } from './Field';
 export type { MultiSelectProps, MultiSelectTriggerProps, MultiSelectContentProps, MultiSelectOptionProps, MultiSelectGroupProps, MultiSelectLabelProps, MultiSelectValue, OptionValue as MultiSelectOptionValue, DisplayMode as MultiSelectDisplayMode, MultiSelectRegisteredOption, } from './MultiSelect';
@@ -53,6 +54,7 @@ export type { SelectProps, SelectTriggerProps, SelectContentProps, SelectOptionP
 export type { IconProps } from './Icon';
 export type { IconButtonProps } from './IconButton';
 export type { ModalProps } from './Modal';
+export type { MoveHandleLabels, MoveHandleMode, MoveHandleProps, MoveHandleSize } from './MoveHandle';
 export type { NoticeProps } from './Notice';
 export type { OverlapStackProps, OverlapStackOverflowProps } from './OverlapStack';
 export type { PagerProps, PagerMode } from './Pager';

package/components/index.js

@@ -9,13 +9,14 @@ export { ChipGroup } from './ChipGroup/index.js';
 export { Chips } from './Chips/index.js';
 export { ContentIndicator } from './ContentIndicator/index.js';
 export { Combobox, ComboboxContent, ComboboxOption, ComboboxGroup, ComboboxLabel, useCombobox } from './Combobox/index.js';
-export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, useDropdown } from './Dropdown/index.js';
+export { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator, DropdownHeader, useDropdown } from './Dropdown/index.js';
 export { Field } from './Field/index.js';
 export { MultiSelect, MultiSelectTrigger, MultiSelectContent, MultiSelectOption, MultiSelectGroup, MultiSelectLabel, useMultiSelect } from './MultiSelect/index.js';
 export { Select, SelectTrigger, SelectContent, SelectOption, SelectGroup, SelectLabel, useSelect } from './Select/index.js';
 export { Icon } from './Icon/index.js';
 export { IconButton } from './IconButton/index.js';
 export { Modal } from './Modal/index.js';
+export { MoveHandle } from './MoveHandle/index.js';
 export { Notice } from './Notice/index.js';
 export { OverlapStack } from './OverlapStack/index.js';
 export { Pager } from './Pager/index.js';

package/icons/icons.svg

@@ -109,6 +109,7 @@
 <symbol id="tui-system-cog" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.29 4.836A1 1 0 0 1 11.275 4h1.306a1 1 0 0 1 .986.836l.244 1.466c.788.26 1.503.679 2.108 1.218l1.393-.522a1 1 0 0 1 1.217.437l.653 1.13a1 1 0 0 1-.23 1.273l-1.148.944a6 6 0 0 1 0 2.435l1.148.946a1 1 0 0 1 .23 1.272l-.652 1.13a1 1 0 0 1-1.217.437l-1.394-.522c-.605.54-1.32.958-2.108 1.218l-.244 1.466a1 1 0 0 1-.986.836h-1.306a1 1 0 0 1-.987-.836l-.244-1.466a6 6 0 0 1-2.108-1.218l-1.394.522a1 1 0 0 1-1.217-.436l-.652-1.131a1 1 0 0 1 .23-1.272l1.148-.946a6 6 0 0 1 0-2.435l-1.147-.944a1 1 0 0 1-.23-1.272l.652-1.131a1 1 0 0 1 1.217-.437l1.393.522a6 6 0 0 1 2.108-1.218zM14.928 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0" clip-rule="evenodd"/></symbol>
 <symbol id="tui-system-copy" viewBox="0 0 24 24"><path d="M17 10.25h-7v1.5h7zm-7 2.5h7v1.5h-7zm7 2.5h-7v1.5h7z"/><path fill-rule="evenodd" d="M17 6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-1zm1 2.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5H9a.5.5 0 0 1-.5-.5V9a.5.5 0 0 1 .5-.5zm-12 7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1H9a2 2 0 0 0-2 2v6.5z" clip-rule="evenodd"/></symbol>
 <symbol id="tui-system-download" viewBox="0 0 24 24"><path d="M5.5 9a.5.5 0 0 1 .5-.5h3V7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.75A1.75 1.75 0 0 0 18.25 7H15v1.5h3.25a.25.25 0 0 1 .25.25V18a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5z"/><path d="M12 17.004 7.002 12.56l.996-1.122 3.252 2.89V4h1.5v10.33l3.252-2.89.996 1.12z"/></symbol>
+<symbol id="tui-system-drag" viewBox="0 0 24 24"><path d="M10 4.99976H8V6.99976H10V4.99976Z"/><path d="M10 10.9998H8V12.9998H10V10.9998Z"/><path d="M8 16.9998H10V18.9998H8V16.9998Z"/><path d="M16 4.99976H14V6.99976H16V4.99976Z"/><path d="M14 10.9998H16V12.9998H14V10.9998Z"/><path d="M16 16.9998H14V18.9998H16V16.9998Z"/></symbol>
 <symbol id="tui-system-duplicate" viewBox="0 0 24 24"><path d="M14.25 12.75H17v1.5h-2.75V17h-1.5v-2.75H10v-1.5h2.75V10h1.5z"/><path fill-rule="evenodd" d="M17 7h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-1H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2zm-2-1.5H6a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h1V9a2 2 0 0 1 2-2h6.5V6a.5.5 0 0 0-.5-.5m-6 3h9a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5H9a.5.5 0 0 1-.5-.5V9a.5.5 0 0 1 .5-.5" clip-rule="evenodd"/></symbol>
 <symbol id="tui-system-edit" viewBox="0 0 24 24"><path d="M19.864 4.304a2 2 0 0 0-2.733.732l-.635 1.1 3.464 2 .636-1.1a2 2 0 0 0-.732-2.732m-.746 5.292-3.464-2-4.903 8.49.062 3.893 3.402-1.892zM4 5.25h9v1.5H4zm7 4H4v1.5h7zm-7 4h5v1.5H4zm5 4H4v1.5h5z"/></symbol>
 <symbol id="tui-system-ellipsis-h" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5 11h2v2H5zm6 0h2v2h-2zm6 0h2v2h-2z" clip-rule="evenodd"/></symbol>

package/icons/manifest.json

@@ -879,6 +879,14 @@
     "viewBox": "0 0 24 24",
     "sprite": true
   },
+  "system/drag": {
+    "id": "tui-system-drag",
+    "set": "system",
+    "name": "drag",
+    "file": "system/drag.svg",
+    "viewBox": "0 0 24 24",
+    "sprite": true
+  },
   "system/duplicate": {
     "id": "tui-system-duplicate",
     "set": "system",

package/icons/registry.d.ts

@@ -113,6 +113,7 @@ export type IconName =
   | 'system/cog'
   | 'system/copy'
   | 'system/download'
+  | 'system/drag'
   | 'system/duplicate'
   | 'system/edit'
   | 'system/ellipsis-h'
@@ -269,6 +270,7 @@ export declare const iconRegistry: {
   'system/cog': IconComponent;
   'system/copy': IconComponent;
   'system/download': IconComponent;
+  'system/drag': IconComponent;
   'system/duplicate': IconComponent;
   'system/edit': IconComponent;
   'system/ellipsis-h': IconComponent;

package/icons/registry.js

@@ -115,6 +115,7 @@ export const iconRegistry = {
   'system/cog': systemIcons['cog'],
   'system/copy': systemIcons['copy'],
   'system/download': systemIcons['download'],
+  'system/drag': systemIcons['drag'],
   'system/duplicate': systemIcons['duplicate'],
   'system/edit': systemIcons['edit'],
   'system/ellipsis-h': systemIcons['ellipsis-h'],

package/icons/system/index.d.ts

@@ -33,6 +33,7 @@ export declare const Close: IconComponent;
 export declare const Cog: IconComponent;
 export declare const Copy: IconComponent;
 export declare const Download: IconComponent;
+export declare const Drag: IconComponent;
 export declare const Duplicate: IconComponent;
 export declare const Edit: IconComponent;
 export declare const EllipsisH: IconComponent;
@@ -110,6 +111,7 @@ export declare const systemIcons: {
   'cog': IconComponent;
   'copy': IconComponent;
   'download': IconComponent;
+  'drag': IconComponent;
   'duplicate': IconComponent;
   'edit': IconComponent;
   'ellipsis-h': IconComponent;

package/icons/system/index.js

@@ -310,6 +310,16 @@ export function Download(props) {
   }, props), [_c("path", {d:"M5.5 9a.5.5 0 0 1 .5-.5h3V7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.75A1.75 1.75 0 0 0 18.25 7H15v1.5h3.25a.25.25 0 0 1 .25.25V18a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5z"}), _c("path", {d:"M12 17.004 7.002 12.56l.996-1.122 3.252 2.89V4h1.5v10.33l3.252-2.89.996 1.12z"})]);
 }
 
+export function Drag(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), [_c("path", {d:"M10 4.99976H8V6.99976H10V4.99976Z"}), _c("path", {d:"M10 10.9998H8V12.9998H10V10.9998Z"}), _c("path", {d:"M8 16.9998H10V18.9998H8V16.9998Z"}), _c("path", {d:"M16 4.99976H14V6.99976H16V4.99976Z"}), _c("path", {d:"M14 10.9998H16V12.9998H14V10.9998Z"}), _c("path", {d:"M16 16.9998H14V18.9998H16V16.9998Z"})]);
+}
+
 export function Duplicate(props) {
   return _c("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -782,6 +792,7 @@ export const systemIcons = {
   'cog': Cog,
   'copy': Copy,
   'download': Download,
+  'drag': Drag,
   'duplicate': Duplicate,
   'edit': Edit,
   'ellipsis-h': EllipsisH,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangible/ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Tangible Design System",
   "type": "module",
   "main": "./components/index.js",