@stll/ui 0.55.1 → 0.57.0

package/dist/lib/scroll-edge-fade.js

@@ -0,0 +1,62 @@
+//#region src/lib/scroll-edge-fade.ts
+/**
+* Fades a horizontal scroller's edges while content continues past them.
+*
+* A mask, not a painted gradient: it works over any background, including
+* translucent windows. `--fade-size` sets the width (as in `ScrollArea`); the
+* measured overflow at each physical edge narrows it, so an edge with nothing
+* behind it stays sharp.
+*/
+const SCROLL_EDGE_FADE_CLASS = "mask-l-from-[calc(100%-min(var(--fade-size,1.5rem),var(--scroll-fade-left,0px)))] mask-r-from-[calc(100%-min(var(--fade-size,1.5rem),var(--scroll-fade-right,0px)))]";
+/** Above any `--fade-size` in use; CSS takes the smaller of the two. */
+const MAX_FADE_PX = 64;
+const fadeWidth = (overflow) => `${Math.min(Math.max(overflow, 0), MAX_FADE_PX)}px`;
+const writeProperty = (node, name, value) => {
+	if (node.style.getPropertyValue(name) !== value) node.style.setProperty(name, value);
+};
+/**
+* Measures `node` and writes the overflow its `SCROLL_EDGE_FADE_CLASS` reads.
+* For a scroller that already measures itself on scroll and resize.
+*/
+const writeScrollEdgeFade = (node) => {
+	const maximum = node.scrollWidth - node.clientWidth;
+	const fromLeft = getComputedStyle(node).direction === "rtl" ? maximum + node.scrollLeft : node.scrollLeft;
+	writeProperty(node, "--scroll-fade-left", fadeWidth(fromLeft));
+	writeProperty(node, "--scroll-fade-right", fadeWidth(maximum - fromLeft));
+};
+/**
+* Ref callback keeping `writeScrollEdgeFade` current for a scroller that does
+* not measure itself. Content can move the end without a scroll or resize (an
+* item added, removed or relabelled), so mutations re-measure too, once per
+* frame.
+*/
+const fadeScrollEdges = (node) => {
+	if (!node) return;
+	let frame = 0;
+	const measure = () => {
+		frame = 0;
+		writeScrollEdgeFade(node);
+	};
+	const schedule = () => {
+		if (frame === 0) frame = requestAnimationFrame(measure);
+	};
+	measure();
+	node.addEventListener("scroll", schedule, { passive: true });
+	const resizes = new ResizeObserver(schedule);
+	resizes.observe(node);
+	const mutations = new MutationObserver(schedule);
+	mutations.observe(node, {
+		attributeFilter: ["style"],
+		characterData: true,
+		childList: true,
+		subtree: true
+	});
+	return () => {
+		cancelAnimationFrame(frame);
+		node.removeEventListener("scroll", schedule);
+		resizes.disconnect();
+		mutations.disconnect();
+	};
+};
+//#endregion
+export { SCROLL_EDGE_FADE_CLASS, fadeScrollEdges, writeScrollEdgeFade };

package/dist/native-env.d.ts

@@ -0,0 +1 @@
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.55.1",
+  "version": "0.57.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -22,7 +22,8 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "THIRD_PARTY_NOTICES"
   ],
   "type": "module",
   "sideEffects": [
@@ -65,6 +66,10 @@
       "types": "./dist/components/avatar.d.ts",
       "import": "./dist/components/avatar.js"
     },
+    "./badge": {
+      "types": "./dist/components/badge.d.ts",
+      "import": "./dist/components/badge.js"
+    },
     "./bidi-text": {
       "types": "./dist/components/bidi-text.d.ts",
       "import": "./dist/components/bidi-text.js"
@@ -78,6 +83,10 @@
       "import": "./dist/components/breadcrumb.js"
     },
     "./button": {
+      "react-native": {
+        "types": "./dist/components/button.native.d.ts",
+        "import": "./dist/components/button.native.js"
+      },
       "types": "./dist/components/button.d.ts",
       "import": "./dist/components/button.js"
     },
@@ -137,9 +146,17 @@
       "types": "./dist/components/copy-button.d.ts",
       "import": "./dist/components/copy-button.js"
     },
-    "./calendar": {
-      "types": "./dist/calendar/index.d.ts",
-      "import": "./dist/calendar/index.js"
+    "./calendar-primitives": {
+      "types": "./dist/calendar/primitives.d.ts",
+      "import": "./dist/calendar/primitives.js"
+    },
+    "./resource-calendar": {
+      "types": "./dist/calendar/resource-calendar.d.ts",
+      "import": "./dist/calendar/resource-calendar.js"
+    },
+    "./resource-calendar.logic": {
+      "types": "./dist/calendar/resource-calendar.logic.d.ts",
+      "import": "./dist/calendar/resource-calendar.logic.js"
     },
     "./data-table": {
       "types": "./dist/data-table/index.d.ts",
@@ -190,6 +207,10 @@
       "import": "./dist/icons.js"
     },
     "./input": {
+      "react-native": {
+        "types": "./dist/components/input.native.d.ts",
+        "import": "./dist/components/input.native.js"
+      },
       "types": "./dist/components/input.d.ts",
       "import": "./dist/components/input.js"
     },
@@ -230,6 +251,10 @@
       "import": "./dist/components/landing.js"
     },
     "./matter-icon": {
+      "react-native": {
+        "types": "./dist/components/matter-icon.native.d.ts",
+        "import": "./dist/components/matter-icon.native.js"
+      },
       "types": "./dist/components/matter-icon.d.ts",
       "import": "./dist/components/matter-icon.js"
     },
@@ -261,6 +286,10 @@
       "types": "./dist/lib/overlay-layer.d.ts",
       "import": "./dist/lib/overlay-layer.js"
     },
+    "./scroll-edge-fade": {
+      "types": "./dist/lib/scroll-edge-fade.d.ts",
+      "import": "./dist/lib/scroll-edge-fade.js"
+    },
     "./panel-inset": {
       "types": "./dist/lib/panel-inset.d.ts",
       "import": "./dist/lib/panel-inset.js"
@@ -366,14 +395,26 @@
       "import": "./dist/components/split-button.js"
     },
     "./switch": {
+      "react-native": {
+        "types": "./dist/components/switch.native.d.ts",
+        "import": "./dist/components/switch.native.js"
+      },
       "types": "./dist/components/switch.d.ts",
       "import": "./dist/components/switch.js"
     },
     "./separator": {
+      "react-native": {
+        "types": "./dist/components/separator.native.d.ts",
+        "import": "./dist/components/separator.native.js"
+      },
       "types": "./dist/components/separator.d.ts",
       "import": "./dist/components/separator.js"
     },
     "./sheet": {
+      "react-native": {
+        "types": "./dist/components/sheet.native.d.ts",
+        "import": "./dist/components/sheet.native.js"
+      },
       "types": "./dist/components/sheet.d.ts",
       "import": "./dist/components/sheet.js"
     },
@@ -382,6 +423,10 @@
       "import": "./dist/components/sidebar.js"
     },
     "./loader": {
+      "react-native": {
+        "types": "./dist/components/loader.native.d.ts",
+        "import": "./dist/components/loader.native.js"
+      },
       "types": "./dist/components/loader.d.ts",
       "import": "./dist/components/loader.js"
     },
@@ -402,6 +447,10 @@
       "import": "./dist/components/stella-mark.js"
     },
     "./stella-wordmark": {
+      "react-native": {
+        "types": "./dist/components/stella-wordmark.native.d.ts",
+        "import": "./dist/components/stella-wordmark.native.js"
+      },
       "types": "./dist/components/stella-wordmark.d.ts",
       "import": "./dist/components/stella-wordmark.js"
     },
@@ -418,9 +467,21 @@
       "import": "./dist/components/tabs.js"
     },
     "./textarea": {
+      "react-native": {
+        "types": "./dist/components/textarea.native.d.ts",
+        "import": "./dist/components/textarea.native.js"
+      },
       "types": "./dist/components/textarea.d.ts",
       "import": "./dist/components/textarea.js"
     },
+    "./text": {
+      "react-native": {
+        "types": "./dist/components/text.native.d.ts",
+        "import": "./dist/components/text.native.js"
+      },
+      "types": "./dist/components/text.d.ts",
+      "import": "./dist/components/text.js"
+    },
     "./toast": {
       "types": "./dist/components/toast.d.ts",
       "import": "./dist/components/toast.js"
@@ -429,6 +490,10 @@
       "types": "./dist/components/tooltip.d.ts",
       "import": "./dist/components/tooltip.js"
     },
+    "./truncated-text": {
+      "types": "./dist/components/truncated-text.d.ts",
+      "import": "./dist/components/truncated-text.js"
+    },
     "./typed-character": {
       "types": "./dist/lib/typed-character.d.ts",
       "import": "./dist/lib/typed-character.js"
@@ -515,6 +580,10 @@
       "import": "./dist/components/breadcrumb.js"
     },
     "./components/button": {
+      "react-native": {
+        "types": "./dist/components/button.native.d.ts",
+        "import": "./dist/components/button.native.js"
+      },
       "types": "./dist/components/button.d.ts",
       "import": "./dist/components/button.js"
     },
@@ -571,6 +640,10 @@
       "import": "./dist/components/hex-color-picker.js"
     },
     "./components/input": {
+      "react-native": {
+        "types": "./dist/components/input.native.d.ts",
+        "import": "./dist/components/input.native.js"
+      },
       "types": "./dist/components/input.d.ts",
       "import": "./dist/components/input.js"
     },
@@ -647,10 +720,18 @@
       "import": "./dist/components/select.js"
     },
     "./components/separator": {
+      "react-native": {
+        "types": "./dist/components/separator.native.d.ts",
+        "import": "./dist/components/separator.native.js"
+      },
       "types": "./dist/components/separator.d.ts",
       "import": "./dist/components/separator.js"
     },
     "./components/sheet": {
+      "react-native": {
+        "types": "./dist/components/sheet.native.d.ts",
+        "import": "./dist/components/sheet.native.js"
+      },
       "types": "./dist/components/sheet.d.ts",
       "import": "./dist/components/sheet.js"
     },
@@ -667,6 +748,10 @@
       "import": "./dist/components/stella-mark.js"
     },
     "./components/stella-wordmark": {
+      "react-native": {
+        "types": "./dist/components/stella-wordmark.native.d.ts",
+        "import": "./dist/components/stella-wordmark.native.js"
+      },
       "types": "./dist/components/stella-wordmark.d.ts",
       "import": "./dist/components/stella-wordmark.js"
     },
@@ -679,6 +764,10 @@
       "import": "./dist/components/tabs.js"
     },
     "./components/textarea": {
+      "react-native": {
+        "types": "./dist/components/textarea.native.d.ts",
+        "import": "./dist/components/textarea.native.js"
+      },
       "types": "./dist/components/textarea.d.ts",
       "import": "./dist/components/textarea.js"
     },
@@ -749,7 +838,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "input-otp": "^1.5.0",
-    "lucide-react": "1.60.0",
+    "lucide-react": "1.61.0",
     "tailwind-merge": "^3.7.0",
     "temporal-polyfill": "1.0.5"
   },
@@ -784,9 +873,13 @@
     "@tanstack/react-virtual": "^3.14.13",
     "@types/react": ">=19",
     "@types/react-dom": ">=19",
+    "lucide-react-native": ">=1.41.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "tailwindcss": "^4.3.0"
+    "react-native": ">=0.88.0",
+    "react-native-svg": ">=15.16.0",
+    "tailwindcss": "^4.3.0",
+    "uniwind": ">=1.13.0"
   },
   "peerDependenciesMeta": {
     "@playwright/test": {
@@ -797,6 +890,18 @@
     },
     "@types/react-dom": {
       "optional": true
+    },
+    "lucide-react-native": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    },
+    "uniwind": {
+      "optional": true
     }
   },
   "main": "./dist/index.js",

package/dist/calendar/index.d.ts

@@ -1,4 +0,0 @@
-import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow } from "./primitives.js";
-import { CalendarDateRange, ResourceCalendarLaneLayout, ResourceCalendarLanePlacement, ResourceCalendarPlacement, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate } from "./resource-calendar.logic.js";
-import { ResourceCalendar, ResourceCalendarColumn, ResourceCalendarEntry, ResourceCalendarEntryTone, ResourceCalendarResource } from "./resource-calendar.js";
-export { CalendarCell, type CalendarDateRange, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, ResourceCalendar, type ResourceCalendarColumn, type ResourceCalendarEntry, type ResourceCalendarEntryTone, type ResourceCalendarLaneLayout, type ResourceCalendarLanePlacement, type ResourceCalendarPlacement, type ResourceCalendarResource, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate };

package/dist/calendar/index.js

@@ -1,4 +0,0 @@
-import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow } from "./primitives.js";
-import { assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate } from "./resource-calendar.logic.js";
-import { ResourceCalendar } from "./resource-calendar.js";
-export { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow, ResourceCalendar, assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate };