@dreamtree-org/twreact-ui 1.3.8 → 1.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/twreact-ui",
-  "version": "1.3.8",
+  "version": "1.3.10",
   "description": "A comprehensive React + Tailwind components library for building modern web apps",
   "author": {
     "name": "Partha Preetham Krishna",
@@ -134,6 +134,7 @@
     }
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^2.1.9",
     "@hookform/resolvers": "^3.10.0",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@reduxjs/toolkit": "^2.11.2",

package/tokens/lib.cjs

@@ -226,11 +226,45 @@ function cssVariables(tokens, { includeScales = true } = {}) {
     light[varName(name)] = hexToChannels(r.light);
     dark[varName(name)] = hexToChannels(r.dark);
   }
+  if (tokens.shadow) {
+    light['--dt-shadow-strength'] = SHADOW_STRENGTH.light;
+    dark['--dt-shadow-strength'] = SHADOW_STRENGTH.dark;
+  }
   return { light, dark };
 }
 
 const DARK_SELECTOR = '.dark, [data-theme="dark"]';
 
+/** Multiplier for shadow alpha: dark surfaces need deeper shadows to show elevation. */
+const SHADOW_STRENGTH = { light: '1', dark: '2.5' };
+
+const dim = (v) => `${v.value}${v.unit}`;
+const groupEntries = (group) => Object.entries(group || {}).filter(([k]) => !k.startsWith('$'));
+
+/**
+ * Non-colour theme scales for Tailwind `theme.extend`: type roles, radius, fonts,
+ * elevation, z-layers and motion. Works for Tailwind 3 configs and the generated preset.
+ */
+function tailwindTheme(tokens) {
+  const fontSize = {};
+  for (const [name, t] of groupEntries(tokens.font.size)) {
+    const ext = t.$extensions || {};
+    const opts = { lineHeight: ext['org.dreamtree.lineHeight'] };
+    if (ext['org.dreamtree.fontWeight']) opts.fontWeight = ext['org.dreamtree.fontWeight'];
+    fontSize[name] = [dim(t.$value), opts];
+  }
+  const map = (group, fn) => Object.fromEntries(groupEntries(group).map(([k, t]) => [k, fn(t.$value)]));
+  return {
+    fontSize,
+    fontFamily: { sans: tokens.font.family.sans.$value, mono: tokens.font.family.mono.$value },
+    borderRadius: map(tokens.radius, dim),
+    boxShadow: map(tokens.shadow, (v) => v),
+    zIndex: map(tokens.zIndex, String),
+    transitionDuration: map(tokens.duration, dim),
+    transitionTimingFunction: map(tokens.easing, (v) => `cubic-bezier(${v.join(', ')})`),
+  };
+}
+
 module.exports = {
   SCALE_STEPS,
   DARK_SELECTOR,
@@ -247,6 +281,7 @@ module.exports = {
   scales,
   roles,
   tailwindColors,
+  tailwindTheme,
   cssVariables,
   varName,
 };

package/tokens/tokens.json

@@ -122,12 +122,68 @@
     "size": {
       "$type": "dimension",
       "$description": "Type scale. micro replaces the 1,445 hand-written text-[10px]/text-[11px] found across products.",
-      "micro": { "$value": { "value": 0.6875, "unit": "rem" }, "$extensions": { "org.dreamtree.lineHeight": "1rem" } }
+      "micro": { "$value": { "value": 0.6875, "unit": "rem" }, "$extensions": { "org.dreamtree.lineHeight": "1rem" } },
+      "page-title": {
+        "$value": { "value": 1.5, "unit": "rem" },
+        "$extensions": { "org.dreamtree.lineHeight": "2rem", "org.dreamtree.fontWeight": "600" },
+        "$description": "The page h1, inside PageHeader."
+      },
+      "section-title": {
+        "$value": { "value": 1, "unit": "rem" },
+        "$extensions": { "org.dreamtree.lineHeight": "1.5rem", "org.dreamtree.fontWeight": "600" },
+        "$description": "Card and section headings."
+      },
+      "body": { "$value": { "value": 0.875, "unit": "rem" }, "$extensions": { "org.dreamtree.lineHeight": "1.25rem" }, "$description": "Default UI text." },
+      "caption": { "$value": { "value": 0.75, "unit": "rem" }, "$extensions": { "org.dreamtree.lineHeight": "1rem" }, "$description": "Secondary text, with text-muted." },
+      "kpi": {
+        "$value": { "value": 1.875, "unit": "rem" },
+        "$extensions": { "org.dreamtree.lineHeight": "2.25rem", "org.dreamtree.fontWeight": "600" },
+        "$description": "StatCard values; pair with tabular-nums."
+      }
     }
   },
   "radius": {
     "$type": "dimension",
     "control": { "$value": { "value": 0.5, "unit": "rem" }, "$description": "Buttons, inputs, menus." },
-    "card": { "$value": { "value": 0.75, "unit": "rem" }, "$description": "Cards and dialogs." }
+    "card": { "$value": { "value": 0.75, "unit": "rem" }, "$description": "Cards and dialogs." },
+    "sheet": { "$value": { "value": 1, "unit": "rem" }, "$description": "Top corners of bottom sheets." },
+    "pill": { "$value": { "value": 9999, "unit": "px" }, "$description": "Pills, badges, segmented controls." }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "$description": "Elevation, as CSS box-shadow. Light values equal Tailwind's defaults; --dt-shadow-strength deepens them in dark mode, where a 10% black shadow disappears.",
+    "xs": { "$value": "0 1px 2px 0 rgb(0 0 0 / calc(0.04 * var(--dt-shadow-strength, 1)))" },
+    "sm": { "$value": "0 1px 2px 0 rgb(0 0 0 / calc(0.05 * var(--dt-shadow-strength, 1)))" },
+    "DEFAULT": { "$value": "0 1px 3px 0 rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 1px 2px -1px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))" },
+    "md": { "$value": "0 4px 6px -1px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 2px 4px -2px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))" },
+    "lg": { "$value": "0 10px 15px -3px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 4px 6px -4px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))" },
+    "xl": {
+      "$value": "0 20px 25px -5px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1))), 0 8px 10px -6px rgb(0 0 0 / calc(0.1 * var(--dt-shadow-strength, 1)))"
+    },
+    "overlay": { "$value": "0 24px 48px -12px rgb(0 0 0 / calc(0.25 * var(--dt-shadow-strength, 1)))", "$description": "Dialogs, sheets, popovers and menus." }
+  },
+  "zIndex": {
+    "$type": "number",
+    "$description": "Stacking layers, lowest to highest. Use z-<layer>, never z-50 or an inline zIndex.",
+    "base": { "$value": 0 },
+    "sticky": { "$value": 20 },
+    "dropdown": { "$value": 30 },
+    "overlay": { "$value": 40 },
+    "modal": { "$value": 50 },
+    "popover": { "$value": 60 },
+    "toast": { "$value": 70 },
+    "tooltip": { "$value": 80 }
+  },
+  "duration": {
+    "$type": "duration",
+    "fast": { "$value": { "value": 120, "unit": "ms" }, "$description": "Hover, press, small fades." },
+    "base": { "$value": { "value": 200, "unit": "ms" }, "$description": "Most enter transitions." },
+    "slow": { "$value": { "value": 320, "unit": "ms" }, "$description": "Sheets, drawers, large surfaces." }
+  },
+  "easing": {
+    "$type": "cubicBezier",
+    "standard": { "$value": [0.2, 0, 0, 1], "$description": "Default for moving and resizing." },
+    "emphasized": { "$value": [0.05, 0.7, 0.1, 1], "$description": "Entering surfaces (decelerate)." },
+    "spring-out": { "$value": [0.34, 1.56, 0.64, 1], "$description": "Small overshoot for sheets settling and toggles." }
   }
 }

package/dist/esm/components/core/Table/useClickOutside.js

@@ -1,26 +0,0 @@
-'use client';
-import { useEffect } from 'react';
-
-/**
- * Custom hook to detect clicks outside of specified refs
- * @param {Array} refs - Array of React refs to check
- * @param {boolean} isActive - Whether the hook should be active
- * @param {Function} onClickOutside - Callback when click is detected outside
- */
-function useClickOutside(refs, isActive, onClickOutside) {
-  useEffect(function () {
-    if (!isActive) return;
-    var handler = function handler(e) {
-      var isOutside = refs.every(function (ref) {
-        return !ref.current || !ref.current.contains(e.target);
-      });
-      if (isOutside) onClickOutside();
-    };
-    document.addEventListener("mousedown", handler, true);
-    return function () {
-      return document.removeEventListener("mousedown", handler, true);
-    };
-  }, [refs, isActive, onClickOutside]);
-}
-
-export { useClickOutside };