@tangible/ui 0.0.5 → 0.0.6

package/README.md

@@ -1,17 +1,17 @@
 # Tangible UI
 
-Design system for Tangible WordPress plugins. React components + CSS tokens + utility classes.
+Design system for Tangible WordPress plugins. React components, CSS custom property tokens, and CSS-only form elements.
 
 **Live Storybook:** https://storybook-tangible-ui.pages.dev
 
 ## Components
 
-- **Primitives:** Button, Chip, ChipGroup, Icon, IconButton, Progress, Rating, Tooltip
+- **Primitives:** Button, IconButton, Chip, ChipGroup, Icon, Progress, Rating, Tooltip
 - **Layout:** Accordion, Card, Modal, Notice, Sidebar, Tabs, Toolbar
 - **Data:** DataTable, StepList, StepIndicator, Pager
-- **Form Controls:** Select, MultiSelect, Combobox, TextInput, Textarea, Checkbox, Switch, Radio
+- **Form Controls:** Select, MultiSelect, Combobox, TextInput, Textarea, Checkbox, Switch, Radio/RadioGroup
 - **Composites:** Avatar, Dropdown, MoveHandle, OverlapStack, SegmentedControl, Field
-- **CSS-only Inputs:** Text, textarea, select, checkbox, radio, toggle, file
+- **CSS-only Inputs:** Text, textarea, select, checkbox, radio, toggle, file (no JS required)
 
 ## Getting Started
 
@@ -21,21 +21,40 @@ Design system for Tangible WordPress plugins. React components + CSS tokens + ut
 npm install @tangible/ui
 ```
 
+#### Optional peer dependencies
+
+Some components require additional packages. Install only what you use:
+
+| Package | Required by | Size |
+|---------|-------------|------|
+| `@floating-ui/react` | Select, MultiSelect, Combobox, Dropdown, Tooltip | ~90 KB |
+| `@tanstack/react-table` | DataTable | ~50 KB |
+
+```bash
+# If using Select, Dropdown, Tooltip, etc.
+npm install @floating-ui/react
+
+# If using DataTable
+npm install @tanstack/react-table
+```
+
+Components without these dependencies (Button, Card, Accordion, Modal, Tabs, etc.) work with zero additional installs.
+
 ### Import styles
 
 ```tsx
-// In your app entry point
 import '@tangible/ui/styles';
 ```
 
-Or for WordPress contexts (no CSS layers):
+For WordPress plugin contexts where CSS layers can lose to unlayered theme styles:
+
 ```tsx
 import '@tangible/ui/styles/unlayered';
 ```
 
-### Wrap your app
+### Set up the interface wrapper
 
-Components require the `.tui-interface` wrapper to access design tokens:
+All components require the `.tui-interface` wrapper to access design tokens:
 
 ```tsx
 function App() {
@@ -47,34 +66,112 @@ function App() {
 }
 ```
 
-Dark mode via `data-theme="dark"` on the wrapper.
+### Dark mode
+
+Set `data-theme` on the wrapper:
+
+```tsx
+<div className="tui-interface" data-theme="dark">
+```
+
+- `"dark"` — force dark mode
+- `"auto"` — follow `prefers-color-scheme`
+- Omit attribute — light mode (inherits host colour)
 
 ### Use components
 
 ```tsx
-import { Button, Card, Tooltip, IconButton } from '@tangible/ui';
+import { Button, Card, Select, SelectOption } from '@tangible/ui';
 
 function Example() {
   return (
     <Card>
       <Card.Body>
-        <Button label="Click me" theme="primary" />
-
-        <IconButton icon="system/settings" label="Settings" showTooltip />
-
-        <Tooltip>
-          <Tooltip.Trigger asChild>
-            <Button label="Hover me" variant="outline" />
-          </Tooltip.Trigger>
-          <Tooltip.Content>Hello!</Tooltip.Content>
-        </Tooltip>
+        <Button label="Save" theme="primary" />
+
+        <Select placeholder="Choose..." onValueChange={(v) => console.log(v)}>
+          <Select.Trigger />
+          <Select.Content>
+            <Select.Option value="a">Option A</Select.Option>
+            <Select.Option value="b">Option B</Select.Option>
+          </Select.Content>
+        </Select>
       </Card.Body>
     </Card>
   );
 }
 ```
 
-See the [Storybook](https://storybook-tangible-ui.pages.dev) for full component documentation and examples.
+### Tree-shaking
+
+Individual component imports are available if your bundler doesn't tree-shake the barrel export:
+
+```tsx
+import { Button } from '@tangible/ui/components/Button';
+import { Tooltip } from '@tangible/ui/components/Tooltip';
+```
+
+## Customisation
+
+### Token overrides
+
+Components are styled via CSS custom properties. Override them on `.tui-interface` or any ancestor:
+
+```css
+/* Global overrides */
+.tui-interface {
+  --tui-radius-md: 2px;
+  --tui-focus-ring-color: hotpink;
+}
+
+/* Scoped to a specific context */
+.my-sidebar .tui-interface {
+  --tui-button-radius: 0;
+  --tui-control-height-md: 32px;
+}
+```
+
+### Component API tokens
+
+Each component reads its own `--tui-{component}-*` tokens via fallback chains. These are never defined by TUI — only read. Set them from consuming code:
+
+```css
+.compact-form {
+  --tui-accordion-padding: 8px;
+  --tui-select-trigger-radius: 2px;
+  --tui-modal-spacing: 24px;
+}
+```
+
+See each component's `styles.scss` header for its full token API.
+
+### Form control sizing
+
+All form controls share a unified sizing system:
+
+```css
+.my-context .tui-interface {
+  --tui-control-height-sm: 28px;
+  --tui-control-height-md: 32px;
+  --tui-control-height-lg: 40px;
+
+  /* Optional: decouple font size from size tier */
+  --tui-control-font-size-sm: 13px;
+  --tui-control-font-size-md: 13px;
+  --tui-control-font-size-lg: 14px;
+}
+```
+
+### Icons
+
+Four icon sets available via the registry: `system`, `cred`, `reaction`, `player`.
+
+```tsx
+import { Icon } from '@tangible/ui';
+
+<Icon name="system/check" />
+<Icon name="reaction/clap-fill" size="lg" />
+```
 
 ## Development
 
@@ -83,7 +180,7 @@ npm install
 npm run storybook   # Dev server on port 6006
 ```
 
-## Commands
+### Commands
 
 ```bash
 npm run storybook          # Dev server
@@ -97,12 +194,12 @@ npm run test:visual:update # Regenerate visual baselines
 
 ## Documentation
 
-- `CLAUDE.md` — Development guide (architecture, patterns, conventions)
-- `CONTEXT.md` — Project background and LMS requirements
-- `TIMELINE.md` — Development roadmap (Jan–Mar 2026)
+- `CLAUDE.md` — Architecture, patterns, conventions, gotchas
+- `CONTEXT.md` — Project background and design philosophy
+- `TIMELINE.md` — Development roadmap
 - `TESTING.md` — Testing strategy and infrastructure
-- `AGENTS.md` — Quality gate agent configurations
+- `CHANGELOG.md` — Release history
 
 ## Status
 
-Under active development for Course Builder (LMS) and Quiz modules. Component APIs are stabilising but may change before 1.0.
+Under active development. Component APIs are stabilising but may change before 1.0.

package/components/Accordion/Accordion.js

@@ -233,7 +233,7 @@ function AccordionTrigger({ asChild = false, 'aria-label': ariaLabel, children,
         return element;
     }
     // Default: render as button with built-in chevron indicator
-    const button = (_jsxs("button", { ref: triggerRef, type: "button", id: triggerId, className: cx('tui-accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": panelId, "aria-label": ariaLabel, disabled: disabled, "data-state": state, "data-disabled": disabled || undefined, onClick: handleClick, onKeyDown: handleKeyDown, children: [_jsx("span", { className: "tui-accordion__trigger-content", children: children }), _jsx(Icon, { name: "system/chevron-down", size: "lg", className: "tui-accordion__indicator", "aria-hidden": "true" })] }));
+    const button = (_jsxs("button", { ref: triggerRef, type: "button", id: triggerId, className: cx('tui-accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": panelId, "aria-label": ariaLabel, disabled: disabled, "data-state": state, "data-disabled": disabled || undefined, onClick: handleClick, onKeyDown: handleKeyDown, children: [children && _jsx("span", { className: "tui-accordion__trigger-content", children: children }), _jsx(Icon, { name: "system/chevron-down", size: "lg", className: "tui-accordion__indicator", "aria-hidden": "true" })] }));
     // Wrap in heading if headingLevel is specified
     if (headingLevel) {
         const Heading = `h${headingLevel}`;

package/components/Combobox/Combobox.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { isDev } from '../../utils/is-dev.js';
 import { useFloating, offset, flip, shift, size as sizeMiddleware, autoUpdate, FloatingPortal, useDismiss, useInteractions, useListNavigation, useRole, } from '@floating-ui/react';
 import { cx } from '../../utils/cx.js';
 import { toKey } from '../../utils/value-key.js';
@@ -396,7 +397,7 @@ function ComboboxOptionComponent({ value: optionValue, disabled = false, textVal
     const textValue = explicitTextValue ?? (typeof children === 'string' ? children : '');
     // Warn in dev if textValue couldn't be derived
     useEffect(() => {
-        if (import.meta.env.DEV && !textValue) {
+        if (isDev() && !textValue) {
             console.warn(`Combobox.Option with value="${optionValue}" has no textValue. Provide textValue prop when children is not a string.`);
         }
     }, [textValue, optionValue]);

package/components/Icon/Icon.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { cx } from '../../utils/cx.js';
+import { isDev } from '../../utils/is-dev.js';
 import { iconRegistry } from '../../icons/registry.js';
 /**
  * Icon component for SVG icons from the registry or emoji characters.
@@ -12,7 +13,7 @@ import { iconRegistry } from '../../icons/registry.js';
 export const Icon = React.forwardRef(({ name, emoji, label, size, className }, ref) => {
     const SvgIcon = name ? iconRegistry[name] : null;
     // Dev warning for invalid icon name
-    if (import.meta.env.DEV && name && !SvgIcon) {
+    if (isDev() && name && !SvgIcon) {
         console.warn(`[Icon] Unknown icon name: "${name}". Check the registry.`);
     }
     // Decorative if no label provided

package/components/Modal/Modal.js

@@ -108,7 +108,7 @@ function ModalRoot({ open, onClose, size = 'md', stickyHead, stickyFoot, 'aria-l
         let target = null;
         if (initialFocusSelector) {
             target = dialog.querySelector(initialFocusSelector);
-            if (!target && import.meta.env.DEV) {
+            if (!target && isDev()) {
                 console.warn(`Modal: initialFocusSelector="${initialFocusSelector}" did not match any element. ` +
                     `Falling back to first focusable element.`);
             }
@@ -118,7 +118,7 @@ function ModalRoot({ open, onClose, size = 'md', stickyHead, stickyFoot, 'aria-l
         }
         target.focus({ preventScroll: true });
         // Development warning for missing labelledBy target
-        if (import.meta.env.DEV && labelledBy) {
+        if (isDev() && labelledBy) {
             const labelElement = document.getElementById(labelledBy);
             if (!labelElement) {
                 console.warn(`Modal: aria-labelledby="${labelledBy}" references a non-existent element. ` +

package/components/MoveHandle/MoveHandle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from 'react';
 import { cx } from '../../utils/cx.js';
 import { isDev } from '../../utils/is-dev.js';
 import { Icon } from '../Icon/index.js';
@@ -64,6 +64,17 @@ export const MoveHandle = forwardRef(function MoveHandle({ mode = 'full', size =
             fallback?.focus();
         }
     }, [mode, canMoveUp, canMoveDown]);
+    // Debounce the lock icon — prevents visual jitter when `locked` flashes
+    // briefly (e.g. during a save). Behaviour (disabled buttons) applies
+    // immediately; only the icon swap is delayed.
+    const [showLockIcon, setShowLockIcon] = useState(locked);
+    useEffect(() => {
+        if (locked) {
+            const id = setTimeout(() => setShowLockIcon(true), 150);
+            return () => clearTimeout(id);
+        }
+        setShowLockIcon(false);
+    }, [locked]);
     // Drag handle label precedence: dragHandleProps > labels.drag > default
     const resolvedDragLabel = dragHandleProps?.['aria-label'] ?? labels?.drag ?? 'Drag to reorder';
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -80,5 +91,5 @@ export const MoveHandle = forwardRef(function MoveHandle({ mode = 'full', size =
     const resolvedLockedDesc = locked
         ? (labels?.locked ?? 'This item is locked and cannot be reordered')
         : undefined;
-    return (_jsxs("div", { ref: mergedRef, role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": locked ? lockedDescId : undefined, "aria-disabled": locked || undefined, className: cx('tui-move-handle', `is-size-${size}`, locked && 'is-locked', hasIndex && 'has-index', className), children: [locked && (_jsx("span", { id: lockedDescId, className: "tui-visually-hidden", children: resolvedLockedDesc })), onMoveUp && (_jsx("button", { type: "button", className: "tui-move-handle__up", "data-direction": "up", "aria-label": labels?.moveUp ?? 'Move up', disabled: locked || !canMoveUp, onClick: onMoveUp, children: _jsx(Icon, { name: "system/chevron-up" }) })), _jsx("div", { className: "tui-move-handle__center", children: locked ? (_jsx("span", { className: "tui-move-handle__lock", "aria-hidden": "true", children: _jsx(Icon, { name: "system/lock" }) })) : (_jsxs(_Fragment, { children: [hasIndex && (_jsx("span", { className: "tui-move-handle__index", "aria-hidden": "true", children: index })), _jsx("button", { type: "button", className: "tui-move-handle__handle", "data-role": "drag-handle", "aria-label": resolvedDragLabel, tabIndex: hasArrows ? -1 : 0, ...restDragProps, children: _jsx(Icon, { name: "system/handle-alt" }) })] })) }), onMoveDown && (_jsx("button", { type: "button", className: "tui-move-handle__down", "data-direction": "down", "aria-label": labels?.moveDown ?? 'Move down', disabled: locked || !canMoveDown, onClick: onMoveDown, children: _jsx(Icon, { name: "system/chevron-down" }) }))] }));
+    return (_jsxs("div", { ref: mergedRef, role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": locked ? lockedDescId : undefined, "aria-disabled": locked || undefined, className: cx('tui-move-handle', `is-size-${size}`, locked && 'is-locked', hasIndex && 'has-index', className), children: [locked && (_jsx("span", { id: lockedDescId, className: "tui-visually-hidden", children: resolvedLockedDesc })), onMoveUp && (_jsx("button", { type: "button", className: "tui-move-handle__up", "data-direction": "up", "aria-label": labels?.moveUp ?? 'Move up', disabled: locked || !canMoveUp, onClick: onMoveUp, children: _jsx(Icon, { name: "system/chevron-up" }) })), _jsx("div", { className: "tui-move-handle__center", children: showLockIcon ? (_jsx("span", { className: "tui-move-handle__lock", "aria-hidden": "true", children: _jsx(Icon, { name: "system/lock" }) })) : (_jsxs(_Fragment, { children: [hasIndex && (_jsx("span", { className: "tui-move-handle__index", "aria-hidden": "true", children: index })), _jsx("button", { type: "button", className: "tui-move-handle__handle", "data-role": "drag-handle", "aria-label": resolvedDragLabel, tabIndex: hasArrows ? -1 : 0, ...restDragProps, children: _jsx(Icon, { name: "system/handle-alt" }) })] })) }), onMoveDown && (_jsx("button", { type: "button", className: "tui-move-handle__down", "data-direction": "down", "aria-label": labels?.moveDown ?? 'Move down', disabled: locked || !canMoveDown, onClick: onMoveDown, children: _jsx(Icon, { name: "system/chevron-down" }) }))] }));
 });

package/components/MultiSelect/MultiSelect.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, cloneElement, isValidElement, } from 'react';
+import { isDev } from '../../utils/is-dev.js';
 import { useFloating, offset, flip, shift, size as sizeMiddleware, autoUpdate, FloatingPortal, useDismiss, useInteractions, useListNavigation, useTypeahead, useRole, useClick, } from '@floating-ui/react';
 import { cx } from '../../utils/cx.js';
 import { getPortalRootFor } from '../../utils/portal.js';
@@ -549,7 +550,7 @@ function MultiSelectOptionComponent({ value: optionValue, disabled = false, text
     const textValue = explicitTextValue ?? (typeof children === 'string' ? children : '');
     // Warn in dev if textValue couldn't be derived
     useEffect(() => {
-        if (import.meta.env.DEV && !textValue) {
+        if (isDev() && !textValue) {
             console.warn(`MultiSelect.Option with value="${optionValue}" has no textValue. Provide textValue prop when children is not a string.`);
         }
     }, [textValue, optionValue]);

package/components/Progress/Progress.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { useProgressSegments } from './useProgressSegments.js';
 import { cx } from '../../utils/cx.js';
+import { isDev } from '../../utils/is-dev.js';
 // =============================================================================
 // COMPONENT
 // =============================================================================
@@ -23,7 +24,7 @@ export function Progress(props) {
     // Calculate percentages for standard mode
     const pct = Math.max(0, Math.min(100, (value / max) * 100));
     // Dev warning: inside position only supports labelStart (or children)
-    if (import.meta.env.DEV && labelPosition === 'inside' && labelStart && labelEnd) {
+    if (isDev() && labelPosition === 'inside' && labelStart && labelEnd) {
         console.warn('Progress: labelPosition="inside" only supports a single label. ' +
             'labelEnd will be ignored. Use labelStart or children for inside content.');
     }

package/components/Select/Select.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, cloneElement, isValidElement, } from 'react';
+import { isDev } from '../../utils/is-dev.js';
 import { useFloating, offset, flip, shift, size as sizeMiddleware, autoUpdate, FloatingPortal, useDismiss, useInteractions, useListNavigation, useTypeahead, useRole, useClick, } from '@floating-ui/react';
 import { cx } from '../../utils/cx.js';
 import { toKey } from '../../utils/value-key.js';
@@ -435,7 +436,7 @@ function SelectOptionComponent({ value: optionValue, disabled = false, textValue
     const textValue = explicitTextValue ?? (typeof children === 'string' ? children : '');
     // Warn in dev if textValue couldn't be derived
     useEffect(() => {
-        if (import.meta.env.DEV && !textValue) {
+        if (isDev() && !textValue) {
             console.warn(`Select.Option with value="${optionValue}" has no textValue. Provide textValue prop when children is not a string.`);
         }
     }, [textValue, optionValue]);

package/components/StepList/StepList.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { cx } from '../../utils/cx.js';
+import { isDev } from '../../utils/is-dev.js';
 import { StepListContext, useStepListContext } from './StepListContext.js';
 import { StepIndicator } from '../StepIndicator/index.js';
 // =============================================================================
@@ -9,7 +10,7 @@ import { StepIndicator } from '../StepIndicator/index.js';
 function StepListRoot(props) {
     const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCurrent = 'step', current, onSelect, children, className, } = props;
     // Dev warning for missing nav label
-    if (import.meta.env.DEV && !ariaLabel && !ariaLabelledBy) {
+    if (isDev() && !ariaLabel && !ariaLabelledBy) {
         console.warn('StepList: Navigation landmark requires a label. ' +
             'Provide either `aria-label` or `aria-labelledby` prop for screen reader users.');
     }

package/components/Tabs/Tabs.js

@@ -104,7 +104,7 @@ function TabsRoot({ variant = 'underline', activationMode = 'auto', value: contr
     }, [registryVersion, activeValue, focusedValue, isControlled, onValueChange, getOrderedTabs]);
     // Dev-only: Tab-Panel pairing validation
     useEffect(() => {
-        if (import.meta.env.DEV) {
+        if (isDev()) {
             // Defer validation to next microtask so all tabs/panels have registered
             queueMicrotask(() => {
                 const tabValues = new Set(Array.from(tabsRef.current.keys()));
@@ -167,7 +167,7 @@ function TabsList({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy,
     const { orientation, activationMode, activeValue, focusedValue, getOrderedTabs, onSelect, setFocusedValue, tabsRef, } = useTabsContext();
     // Dev-only: Warn if missing accessible name
     useEffect(() => {
-        if (import.meta.env.DEV) {
+        if (isDev()) {
             if (!ariaLabel && !ariaLabelledBy) {
                 console.warn('Tabs.List: Missing accessible name. Provide aria-label or aria-labelledby.');
             }

package/components/Toolbar/Toolbar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, cloneElement, isValidElement, } from 'react';
 import { cx } from '../../utils/cx.js';
+import { isDev } from '../../utils/is-dev.js';
 // =============================================================================
 // Toolbar Component
 // =============================================================================
@@ -66,7 +67,7 @@ function ToolbarRoot({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledB
     const originalTabIndexMapRef = useRef(new WeakMap());
     // Dev warning for missing accessible name
     useEffect(() => {
-        if (import.meta.env?.DEV && !ariaLabel && !ariaLabelledBy) {
+        if (isDev() && !ariaLabel && !ariaLabelledBy) {
             console.warn('[Toolbar] aria-label or aria-labelledby is required for accessibility.');
         }
     }, [ariaLabel, ariaLabelledBy]);

package/components/Tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState, cloneElement, isValidElement, } from 'react';
+import { isDev } from '../../utils/is-dev.js';
 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';
@@ -165,7 +166,7 @@ function TooltipContentComponent({ side = 'top', align = 'center', sideOffset =
     // Dev warning: tooltips should not contain interactive content (WCAG 1.4.13)
     // Use Popover for interactive overlays instead
     useEffect(() => {
-        if (import.meta.env?.DEV && open && refs.floating.current) {
+        if (isDev() && open && refs.floating.current) {
             const interactive = refs.floating.current.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
             if (interactive.length > 0) {
                 console.warn('[Tooltip] Contains interactive elements which violates WCAG 1.4.13. ' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangible/ui",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Tangible Design System",
   "type": "module",
   "main": "./components/index.js",
@@ -79,20 +79,18 @@
       "types": "./components/Dropdown/Dropdown.d.ts"
     }
   },
-  "dependencies": {
-    "@floating-ui/react": "^0.27.16",
-    "@tanstack/react-table": "^8.21.3"
-  },
   "peerDependencies": {
+    "@floating-ui/react": ">=0.27.0",
+    "@tanstack/react-table": ">=8.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "peerDependenciesMeta": {
-    "react": {
-      "optional": false
+    "@floating-ui/react": {
+      "optional": true
     },
-    "react-dom": {
-      "optional": false
+    "@tanstack/react-table": {
+      "optional": true
     }
   },
   "homepage": "https://github.com/tangibleinc/tangible-ui",