@luxfi/ui 7.4.6 → 7.4.7

package/dist/collapsible.cjs

@@ -146,11 +146,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React3__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -170,7 +166,7 @@ var Skeleton = React3__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -182,7 +178,7 @@ var Skeleton = React3__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/collapsible.js

@@ -124,11 +124,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React3.forwardRef(
   function Skeleton2(props, ref) {
@@ -148,7 +144,7 @@ var Skeleton = React3.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -160,7 +156,7 @@ var Skeleton = React3.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/icon-button.cjs

@@ -145,11 +145,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -169,7 +165,7 @@ var Skeleton = React__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -181,7 +177,7 @@ var Skeleton = React__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/icon-button.js

@@ -123,11 +123,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React.forwardRef(
   function Skeleton2(props, ref) {
@@ -147,7 +143,7 @@ var Skeleton = React.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -159,7 +155,7 @@ var Skeleton = React.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/icons.cjs

@@ -1,4 +1,3 @@
-"use client";
 'use strict';
 
 var lucideReact = require('lucide-react');

package/dist/icons.js

@@ -1,2 +1 @@
-"use client";
 export * from 'lucide-react';

package/dist/image.cjs

@@ -144,11 +144,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -168,7 +164,7 @@ var Skeleton = React2__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -180,7 +176,7 @@ var Skeleton = React2__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/image.js

@@ -123,11 +123,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2.forwardRef(
   function Skeleton2(props, ref) {
@@ -147,7 +143,7 @@ var Skeleton = React2.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -159,7 +155,7 @@ var Skeleton = React2.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/index.cjs

@@ -1591,11 +1591,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React33__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -1615,7 +1611,7 @@ var Skeleton = React33__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -1627,7 +1623,7 @@ var Skeleton = React33__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -1664,6 +1660,10 @@ var SkeletonText = React33__namespace.forwardRef(
     )) });
   }
 );
+function LoadingBar({ loading = true }) {
+  if (!loading) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
+}
 var IndicatorIcon2 = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
 var ALERT_BASE = "w-full flex items-start relative rounded text-[var(--color-alert-fg)]";
 var STATUS_CLASSES = {
@@ -1978,7 +1978,7 @@ var Tooltip = React33__namespace.forwardRef(
             {
               ref: triggerRef,
               asChild: true,
-              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...isMobile ? { onClick: handleTriggerClick } : {},
               ...triggerProps,
               children
             }
@@ -7904,6 +7904,7 @@ exports.Link = Link;
 exports.LinkBox = LinkBox;
 exports.LinkExternalIcon = LinkExternalIcon;
 exports.LinkOverlay = LinkOverlay;
+exports.LoadingBar = LoadingBar;
 exports.MenuArrow = MenuArrow;
 exports.MenuCheckboxItem = MenuCheckboxItem;
 exports.MenuContent = MenuContent;

package/dist/index.d.cts

@@ -34,7 +34,7 @@ export { Radio, RadioGroup } from './radio.cjs';
 export { Rating } from './rating.cjs';
 export { ListCollection, Select, SelectAsync, SelectAsyncProps, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectOption, SelectProps, SelectRoot, SelectRootProps, SelectValueText, createListCollection } from './select.cjs';
 export { Separator, SeparatorProps } from './separator.cjs';
-export { Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps } from './skeleton.cjs';
+export { LoadingBar, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps } from './skeleton.cjs';
 export { Slider } from './slider.cjs';
 export { Switch } from './switch.cjs';
 export { TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper } from './table.cjs';

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { Radio, RadioGroup } from './radio.js';
 export { Rating } from './rating.js';
 export { ListCollection, Select, SelectAsync, SelectAsyncProps, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectOption, SelectProps, SelectRoot, SelectRootProps, SelectValueText, createListCollection } from './select.js';
 export { Separator, SeparatorProps } from './separator.js';
-export { Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps } from './skeleton.js';
+export { LoadingBar, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps } from './skeleton.js';
 export { Slider } from './slider.js';
 export { Switch } from './switch.js';
 export { TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper } from './table.js';

package/dist/index.js

@@ -1563,11 +1563,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React33.forwardRef(
   function Skeleton2(props, ref) {
@@ -1587,7 +1583,7 @@ var Skeleton = React33.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -1599,7 +1595,7 @@ var Skeleton = React33.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -1636,6 +1632,10 @@ var SkeletonText = React33.forwardRef(
     )) });
   }
 );
+function LoadingBar({ loading = true }) {
+  if (!loading) return null;
+  return /* @__PURE__ */ jsx("div", { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
+}
 var IndicatorIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 10a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3z" }) });
 var ALERT_BASE = "w-full flex items-start relative rounded text-[var(--color-alert-fg)]";
 var STATUS_CLASSES = {
@@ -1950,7 +1950,7 @@ var Tooltip = React33.forwardRef(
             {
               ref: triggerRef,
               asChild: true,
-              ...isMobile ? { onPress: handleTriggerClick } : {},
+              ...isMobile ? { onClick: handleTriggerClick } : {},
               ...triggerProps,
               children
             }
@@ -7806,4 +7806,4 @@ var BankPage = styled(View, {
   padding: 16
 });
 
-export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppNav, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DEFAULT_ORG, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IAM_PAGE_SIZE, IamError, IconButton, IdentityProvider, Image, Input, InputGroup, LUX_BRAND, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NARROW_PX, OptionChain, OptionPositionCard, OrgSwitcher, PARS_GOLD, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, ProjectSwitcher, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, SettingsMenu, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, Switcher, TOUCH_PX, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, UserMenu, bankColors, buttonVariants, cn, config, createListCollection, currentHost, lux_config_default as guiConfig, iam, iamBase, initials, luxThemes, orgIdentity, ORGS as orgs, resolveWhiteLabel, toaster, useAccordion, useBelow, useColorMode, useColorModeValue, useIdentity, useIsNarrow, useIsTouch, useWhiteLabel };
+export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppNav, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DEFAULT_ORG, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IAM_PAGE_SIZE, IamError, IconButton, IdentityProvider, Image, Input, InputGroup, LUX_BRAND, Link, LinkBox, LinkExternalIcon, LinkOverlay, LoadingBar, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, NARROW_PX, OptionChain, OptionPositionCard, OrgSwitcher, PARS_GOLD, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, ProjectSwitcher, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, SettingsMenu, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, Switcher, TOUCH_PX, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, UserMenu, bankColors, buttonVariants, cn, config, createListCollection, currentHost, lux_config_default as guiConfig, iam, iamBase, initials, luxThemes, orgIdentity, ORGS as orgs, resolveWhiteLabel, toaster, useAccordion, useBelow, useColorMode, useColorModeValue, useIdentity, useIsNarrow, useIsTouch, useWhiteLabel };

package/dist/link.cjs

@@ -144,11 +144,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -168,7 +164,7 @@ var Skeleton = React__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -180,7 +176,7 @@ var Skeleton = React__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/link.js

@@ -123,11 +123,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React.forwardRef(
   function Skeleton2(props, ref) {
@@ -147,7 +143,7 @@ var Skeleton = React.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -159,7 +155,7 @@ var Skeleton = React.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/next.cjs

@@ -80,11 +80,17 @@ var GUI_DEFINES = {
   "process.env.EXPO_OS": JSON.stringify("web"),
   "process.env.IS_WEB": JSON.stringify("true")
 };
+var ENGINE_DEDUPE = [
+  "react",
+  "react-dom",
+  "@tanstack/react-query",
+  ...GUI_PACKAGES
+];
 function guiAliases(from) {
   const { createRequire } = __require("module");
   const require_ = createRequire(`${from.replace(/\/?$/, "/")}noop.js`);
   const alias = {};
-  for (const pkg of GUI_PACKAGES) {
+  for (const pkg of ENGINE_DEDUPE) {
     try {
       alias[`${pkg}$`] = require_.resolve(pkg);
     } catch {
@@ -97,6 +103,9 @@ function guiAliases(from) {
 function withLuxUi(config = {}) {
   const userWebpack = config.webpack;
   const engine = guiAliases(config.dir ?? process.cwd());
+  const engineTurbopack = Object.fromEntries(
+    Object.entries(engine).map(([k, v]) => [k.replace(/\$$/, ""), v])
+  );
   const { dir: _dir, ...rest } = config;
   return {
     ...rest,
@@ -105,6 +114,7 @@ function withLuxUi(config = {}) {
       ...config.turbopack,
       resolveAlias: {
         "react-native": "react-native-web",
+        ...engineTurbopack,
         ...config.turbopack?.resolveAlias
       }
     },

package/dist/next.js

@@ -78,11 +78,17 @@ var GUI_DEFINES = {
   "process.env.EXPO_OS": JSON.stringify("web"),
   "process.env.IS_WEB": JSON.stringify("true")
 };
+var ENGINE_DEDUPE = [
+  "react",
+  "react-dom",
+  "@tanstack/react-query",
+  ...GUI_PACKAGES
+];
 function guiAliases(from) {
   const { createRequire } = __require("module");
   const require_ = createRequire(`${from.replace(/\/?$/, "/")}noop.js`);
   const alias = {};
-  for (const pkg of GUI_PACKAGES) {
+  for (const pkg of ENGINE_DEDUPE) {
     try {
       alias[`${pkg}$`] = require_.resolve(pkg);
     } catch {
@@ -95,6 +101,9 @@ function guiAliases(from) {
 function withLuxUi(config = {}) {
   const userWebpack = config.webpack;
   const engine = guiAliases(config.dir ?? process.cwd());
+  const engineTurbopack = Object.fromEntries(
+    Object.entries(engine).map(([k, v]) => [k.replace(/\$$/, ""), v])
+  );
   const { dir: _dir, ...rest } = config;
   return {
     ...rest,
@@ -103,6 +112,7 @@ function withLuxUi(config = {}) {
       ...config.turbopack,
       resolveAlias: {
         "react-native": "react-native-web",
+        ...engineTurbopack,
         ...config.turbopack?.resolveAlias
       }
     },

package/dist/select.cjs

@@ -146,11 +146,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -170,7 +166,7 @@ var Skeleton = React2__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -182,7 +178,7 @@ var Skeleton = React2__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/select.js

@@ -123,11 +123,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2.forwardRef(
   function Skeleton2(props, ref) {
@@ -147,7 +143,7 @@ var Skeleton = React2.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -159,7 +155,7 @@ var Skeleton = React2.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children

package/dist/skeleton.cjs

@@ -144,11 +144,7 @@ function stripShims(props) {
   for (const k of SHIM_PROPS) delete out[k];
   return out;
 }
-var SKELETON_CLASSES = [
-  "animate-skeleton-shimmer rounded-sm",
-  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-  "bg-[length:200%_100%]"
-].join(" ");
+var SKELETON_CLASSES = "lux-skeleton rounded-sm";
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React__namespace.forwardRef(
   function Skeleton2(props, ref) {
@@ -168,7 +164,7 @@ var Skeleton = React__namespace.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
+          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -180,7 +176,7 @@ var Skeleton = React__namespace.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
+        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -217,7 +213,12 @@ var SkeletonText = React__namespace.forwardRef(
     )) });
   }
 );
+function LoadingBar({ loading = true }) {
+  if (!loading) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
+}
 
+exports.LoadingBar = LoadingBar;
 exports.Skeleton = Skeleton;
 exports.SkeletonCircle = SkeletonCircle;
 exports.SkeletonText = SkeletonText;

package/dist/skeleton.d.cts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
 interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
@@ -56,5 +57,20 @@ interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly loading?: boolean;
 }
 declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The page-level "work is in flight" signal — one animated element, however
+ * many skeletons are on screen. Mount it while any request is outstanding.
+ *
+ * It is `position: fixed` and 2px tall, so it is out of flow: it cannot shift
+ * layout (CLS 0) and it cannot tint content. Under prefers-reduced-motion the
+ * sweep stops and the track stays lit, so the state is still legible.
+ *
+ * This is what replaces a bare spinner. A spinner says "something is
+ * happening somewhere"; a skeleton plus this bar says "here is the shape of
+ * what is coming, and it is still coming".
+ */
+declare function LoadingBar({ loading }: {
+    readonly loading?: boolean;
+}): react_jsx_runtime.JSX.Element | null;
 
-export { Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };
+export { LoadingBar, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };

package/dist/skeleton.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
 interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
@@ -56,5 +57,20 @@ interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly loading?: boolean;
 }
 declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The page-level "work is in flight" signal — one animated element, however
+ * many skeletons are on screen. Mount it while any request is outstanding.
+ *
+ * It is `position: fixed` and 2px tall, so it is out of flow: it cannot shift
+ * layout (CLS 0) and it cannot tint content. Under prefers-reduced-motion the
+ * sweep stops and the track stays lit, so the state is still legible.
+ *
+ * This is what replaces a bare spinner. A spinner says "something is
+ * happening somewhere"; a skeleton plus this bar says "here is the shape of
+ * what is coming, and it is still coming".
+ */
+declare function LoadingBar({ loading }: {
+    readonly loading?: boolean;
+}): react_jsx_runtime.JSX.Element | null;
 
-export { Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };
+export { LoadingBar, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };