@luxfi/ui 7.4.15 → 8.1.0

package/dist/simple-navigation-bar.cjs

@@ -0,0 +1,45 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var ui = require('@hanzo/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var SimpleNavigationBar = React__namespace.forwardRef(({ className, logo, items = [], ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "nav", ref, className: ui.cn("border-b", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "container flex h-16 items-center justify-between", children: [
+    logo && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "font-semibold", children: logo }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "flex gap-6", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Box,
+      {
+        tag: "a",
+        href: item.href,
+        className: "text-sm font-medium transition-colors hover:text-primary",
+        children: item.label
+      },
+      item.href
+    )) })
+  ] }) });
+});
+SimpleNavigationBar.displayName = "SimpleNavigationBar";
+
+exports.SimpleNavigationBar = SimpleNavigationBar;

package/dist/simple-navigation-bar.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface SimpleNavigationBarProps extends React.HTMLAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+    items?: Array<{
+        label: string;
+        href: string;
+    }>;
+}
+declare const SimpleNavigationBar: React.ForwardRefExoticComponent<SimpleNavigationBarProps & React.RefAttributes<HTMLElement>>;
+export { SimpleNavigationBar };
+//# sourceMappingURL=simple-navigation-bar.d.ts.map

package/dist/simple-navigation-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-navigation-bar.d.ts","sourceRoot":"","sources":["../src/simple-navigation-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,wBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC/C;AAED,QAAA,MAAM,mBAAmB,8FAsBvB,CAAA;AAGF,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/simple-navigation-bar.js

@@ -0,0 +1,23 @@
+"use client";
+import * as React from 'react';
+import { Box, cn } from '@hanzo/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SimpleNavigationBar = React.forwardRef(({ className, logo, items = [], ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { tag: "nav", ref, className: cn("border-b", className), ...props, children: /* @__PURE__ */ jsxs(Box, { className: "container flex h-16 items-center justify-between", children: [
+    logo && /* @__PURE__ */ jsx(Box, { className: "font-semibold", children: logo }),
+    /* @__PURE__ */ jsx(Box, { className: "flex gap-6", children: items.map((item) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        tag: "a",
+        href: item.href,
+        className: "text-sm font-medium transition-colors hover:text-primary",
+        children: item.label
+      },
+      item.href
+    )) })
+  ] }) });
+});
+SimpleNavigationBar.displayName = "SimpleNavigationBar";
+
+export { SimpleNavigationBar };

package/dist/skeleton.cjs

@@ -2,8 +2,7 @@
 'use strict';
 
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
+var ui = require('@hanzo/ui');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -27,158 +26,26 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/skeleton.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var SHIM_PROPS = [
-  "w",
-  "h",
-  "minW",
-  "maxW",
-  "display",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "fontWeight",
-  "textStyle",
-  "borderRadius",
-  "alignSelf",
-  "alignItems",
-  "justifyContent",
-  "color",
-  "mt",
-  "mb",
-  "ml",
-  "mr",
-  "height",
-  "overflow",
-  "whiteSpace",
-  "textOverflow",
-  "textTransform",
-  "gap",
-  "gridTemplateColumns",
-  "minWidth",
-  "boxSize",
-  "py",
-  "px",
-  "p",
-  "hideBelow",
-  "fontSize",
-  "flexWrap",
-  "wordBreak",
-  "lineHeight",
-  "marginRight",
-  "position",
-  "background"
-];
-var S = 4;
-function dim(v) {
-  if (v == null) return void 0;
-  if (typeof v === "number") return `${v * S}px`;
-  if (typeof v === "string") return v;
-  if (typeof v === "object") {
-    const o = v;
-    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
-  }
-  return void 0;
-}
-function sp(v) {
-  if (v === void 0) return void 0;
-  return typeof v === "number" ? `${v * S}px` : v;
-}
-function shimToStyle(props) {
-  const s = {};
-  if (props.w !== void 0) s.width = dim(props.w);
-  if (props.h !== void 0) s.height = dim(props.h);
-  if (props.minW !== void 0) s.minWidth = dim(props.minW);
-  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
-  if (props.display !== void 0) s.display = props.display;
-  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
-  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
-  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
-  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
-  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
-  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
-  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
-  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
-  if (props.color !== void 0) s.color = props.color;
-  if (props.mt !== void 0) s.marginTop = sp(props.mt);
-  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
-  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
-  if (props.mr !== void 0) s.marginRight = sp(props.mr);
-  if (props.height !== void 0) s.height = props.height;
-  if (props.overflow !== void 0) s.overflow = props.overflow;
-  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
-  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
-  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
-  if (props.gap !== void 0) s.gap = sp(props.gap);
-  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
-  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
-  if (props.boxSize !== void 0) {
-    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
-    s.width = v;
-    s.height = v;
-  }
-  if (props.py !== void 0) {
-    const v = sp(props.py);
-    s.paddingTop = v;
-    s.paddingBottom = v;
-  }
-  if (props.px !== void 0) {
-    const v = sp(props.px);
-    s.paddingLeft = v;
-    s.paddingRight = v;
-  }
-  if (props.p !== void 0) s.padding = sp(props.p);
-  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
-  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
-  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
-  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
-  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
-  if (props.position !== void 0) s.position = props.position;
-  if (props.background !== void 0) s.background = props.background;
-  return s;
-}
-function stripShims(props) {
-  const out = { ...props };
-  for (const k of SHIM_PROPS) delete out[k];
-  return out;
-}
 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) {
-    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
-    const shimStyle = shimToStyle(props);
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
-    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
-    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
-    const htmlRest = stripShims(allRest);
+    const { loading = true, asChild, className, children, style, ...rest } = props;
     if (!loading) {
       if (asChild && React__namespace.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React__namespace.isValidElement(children)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Component,
-        {
-          ref,
-          "data-loading": true,
-          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
-          style: mergedStyle,
-          ...htmlRest,
-          children
-        }
-      );
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className, style, ...rest, children });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
+      "div",
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
-        style: mergedStyle,
-        ...htmlRest,
+        ...ui.sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
         children
       }
     );
@@ -193,7 +60,7 @@ var SkeletonCircle = React__namespace.forwardRef(
       {
         ref,
         loading,
-        className: cn("rounded-full shrink-0", className),
+        ...ui.sx("rounded-full shrink-0", className),
         style: { width: dimension, height: dimension, ...rest.style },
         ...rest
       }
@@ -203,11 +70,11 @@ var SkeletonCircle = React__namespace.forwardRef(
 var SkeletonText = React__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { ref, className: ui.cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton,
       {
         loading,
-        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+        ...ui.sx(ui.cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
       },
       index
     )) });
@@ -215,7 +82,7 @@ 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" });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
 }
 
 exports.LoadingBar = LoadingBar;

package/dist/skeleton.d.ts

@@ -1,62 +1,21 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-
-interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
-    readonly loading: boolean | undefined;
+export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+    /** A skeleton with nothing said about it is loading; that is what one is for. */
+    readonly loading?: boolean;
     /** When true, the Skeleton wraps its single child element instead of adding a wrapper div. */
     readonly asChild?: boolean;
-    readonly w?: any;
-    readonly h?: any;
-    readonly minW?: any;
-    readonly maxW?: any;
-    readonly display?: string;
-    readonly flexGrow?: number;
-    readonly flexShrink?: number;
-    readonly flexBasis?: string;
-    readonly fontWeight?: number | string;
-    readonly textStyle?: string;
-    readonly borderRadius?: string;
-    readonly alignSelf?: string;
-    readonly alignItems?: string;
-    readonly justifyContent?: string;
-    readonly color?: string;
-    readonly mt?: number | string;
-    readonly mb?: number | string;
-    readonly ml?: number | string;
-    readonly mr?: number | string;
-    readonly height?: string;
-    readonly overflow?: string;
-    readonly whiteSpace?: string;
-    readonly textOverflow?: string;
-    readonly textTransform?: string;
-    readonly gap?: number | string;
-    readonly gridTemplateColumns?: string;
-    readonly minWidth?: string;
-    readonly boxSize?: number | string;
-    readonly py?: number | string;
-    readonly px?: number | string;
-    readonly p?: number | string;
-    readonly hideBelow?: string;
-    readonly as?: React.ElementType;
-    readonly fontSize?: string;
-    readonly flexWrap?: React.CSSProperties['flexWrap'];
-    readonly wordBreak?: React.CSSProperties['wordBreak'];
-    readonly lineHeight?: string;
-    readonly marginRight?: string;
-    readonly position?: React.CSSProperties['position'];
-    readonly background?: string;
 }
-declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
-interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+export interface SkeletonCircleProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly size?: string | number;
     readonly loading?: boolean;
 }
-declare const SkeletonCircle: React.ForwardRefExoticComponent<SkeletonCircleProps & React.RefAttributes<HTMLDivElement>>;
-interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
+export declare const SkeletonCircle: React.ForwardRefExoticComponent<SkeletonCircleProps & React.RefAttributes<HTMLDivElement>>;
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly noOfLines?: number;
     readonly loading?: boolean;
 }
-declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+export 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.
@@ -69,8 +28,7 @@ declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps &
  * 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 }: {
+export declare function LoadingBar({ loading }: {
     readonly loading?: boolean;
-}): react_jsx_runtime.JSX.Element | null;
-
-export { LoadingBar, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonText, type SkeletonTextProps };
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../src/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,iFAAiF;IACjF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE3B,8FAA8F;IAC9F,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAgBD,eAAO,MAAM,QAAQ,sFA6BpB,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,4FAgB1B,CAAC;AAMF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,0FAgBxB,CAAC;AAMF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAc,EAAE,EAAE;IAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,kDAG5E"}

package/dist/skeleton.js

@@ -1,162 +1,29 @@
 "use client";
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Box, sx, cn } from '@hanzo/ui';
 import { jsx } from 'react/jsx-runtime';
 
 // src/skeleton.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var SHIM_PROPS = [
-  "w",
-  "h",
-  "minW",
-  "maxW",
-  "display",
-  "flexGrow",
-  "flexShrink",
-  "flexBasis",
-  "fontWeight",
-  "textStyle",
-  "borderRadius",
-  "alignSelf",
-  "alignItems",
-  "justifyContent",
-  "color",
-  "mt",
-  "mb",
-  "ml",
-  "mr",
-  "height",
-  "overflow",
-  "whiteSpace",
-  "textOverflow",
-  "textTransform",
-  "gap",
-  "gridTemplateColumns",
-  "minWidth",
-  "boxSize",
-  "py",
-  "px",
-  "p",
-  "hideBelow",
-  "fontSize",
-  "flexWrap",
-  "wordBreak",
-  "lineHeight",
-  "marginRight",
-  "position",
-  "background"
-];
-var S = 4;
-function dim(v) {
-  if (v == null) return void 0;
-  if (typeof v === "number") return `${v * S}px`;
-  if (typeof v === "string") return v;
-  if (typeof v === "object") {
-    const o = v;
-    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
-  }
-  return void 0;
-}
-function sp(v) {
-  if (v === void 0) return void 0;
-  return typeof v === "number" ? `${v * S}px` : v;
-}
-function shimToStyle(props) {
-  const s = {};
-  if (props.w !== void 0) s.width = dim(props.w);
-  if (props.h !== void 0) s.height = dim(props.h);
-  if (props.minW !== void 0) s.minWidth = dim(props.minW);
-  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
-  if (props.display !== void 0) s.display = props.display;
-  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
-  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
-  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
-  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
-  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
-  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
-  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
-  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
-  if (props.color !== void 0) s.color = props.color;
-  if (props.mt !== void 0) s.marginTop = sp(props.mt);
-  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
-  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
-  if (props.mr !== void 0) s.marginRight = sp(props.mr);
-  if (props.height !== void 0) s.height = props.height;
-  if (props.overflow !== void 0) s.overflow = props.overflow;
-  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
-  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
-  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
-  if (props.gap !== void 0) s.gap = sp(props.gap);
-  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
-  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
-  if (props.boxSize !== void 0) {
-    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
-    s.width = v;
-    s.height = v;
-  }
-  if (props.py !== void 0) {
-    const v = sp(props.py);
-    s.paddingTop = v;
-    s.paddingBottom = v;
-  }
-  if (props.px !== void 0) {
-    const v = sp(props.px);
-    s.paddingLeft = v;
-    s.paddingRight = v;
-  }
-  if (props.p !== void 0) s.padding = sp(props.p);
-  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
-  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
-  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
-  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
-  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
-  if (props.position !== void 0) s.position = props.position;
-  if (props.background !== void 0) s.background = props.background;
-  return s;
-}
-function stripShims(props) {
-  const out = { ...props };
-  for (const k of SHIM_PROPS) delete out[k];
-  return out;
-}
 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) {
-    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
-    const shimStyle = shimToStyle(props);
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
-    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
-    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
-    const htmlRest = stripShims(allRest);
+    const { loading = true, asChild, className, children, style, ...rest } = props;
     if (!loading) {
       if (asChild && React.isValidElement(children)) return children;
-      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
-    }
-    if (asChild && React.isValidElement(children)) {
-      return /* @__PURE__ */ jsx(
-        Component,
-        {
-          ref,
-          "data-loading": true,
-          className: cn(SKELETON_CLASSES, "[&_*]:invisible", cls),
-          style: mergedStyle,
-          ...htmlRest,
-          children
-        }
-      );
+      return /* @__PURE__ */ jsx(Box, { ref, className, style, ...rest, children });
     }
     return /* @__PURE__ */ jsx(
-      Component,
+      "div",
       {
         ref,
         "data-loading": true,
-        className: cn(SKELETON_CLASSES, children ? "[&_*]:invisible" : "min-h-5", cls),
-        style: mergedStyle,
-        ...htmlRest,
+        ...sx(
+          SKELETON_CLASSES,
+          asChild || children ? "[&_*]:invisible" : "min-h-5",
+          className
+        ),
+        style,
+        ...rest,
         children
       }
     );
@@ -171,7 +38,7 @@ var SkeletonCircle = React.forwardRef(
       {
         ref,
         loading,
-        className: cn("rounded-full shrink-0", className),
+        ...sx("rounded-full shrink-0", className),
         style: { width: dimension, height: dimension, ...rest.style },
         ...rest
       }
@@ -181,11 +48,11 @@ var SkeletonCircle = React.forwardRef(
 var SkeletonText = React.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
       Skeleton,
       {
         loading,
-        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+        ...sx(cn("h-4", index === noOfLines - 1 && "max-w-[80%]"))
       },
       index
     )) });
@@ -193,7 +60,7 @@ var SkeletonText = React.forwardRef(
 );
 function LoadingBar({ loading = true }) {
   if (!loading) return null;
-  return /* @__PURE__ */ jsx("div", { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
+  return /* @__PURE__ */ jsx(Box, { className: "lux-loading", role: "progressbar", "aria-busy": "true", "aria-label": "Loading" });
 }
 
 export { LoadingBar, Skeleton, SkeletonCircle, SkeletonText };

package/dist/slider.cjs

@@ -102,7 +102,7 @@ var Slider = React__namespace.forwardRef(
                 borderWidth: 2,
                 borderColor: ACTIVE,
                 backgroundColor: WHITE,
-                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                boxShadow: "var(--shadow-sm)",
                 transition: "quick",
                 hoverStyle: { borderColor: ACTIVE_HOVER },
                 focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },

package/dist/slider.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-interface SliderProps {
+export interface SliderProps {
     readonly marks?: Array<number | {
         readonly value: number;
         readonly label: React.ReactNode;
@@ -14,11 +13,11 @@ interface SliderProps {
     readonly step?: number;
     readonly disabled?: boolean;
     readonly orientation?: 'horizontal' | 'vertical';
+    readonly id?: string;
     readonly name?: string;
     readonly onValueChange?: (value: Array<number>) => void;
     readonly onValueCommit?: (value: Array<number>) => void;
     readonly className?: string;
 }
-declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
-
-export { Slider, type SliderProps };
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=slider.d.ts.map

package/dist/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../src/slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC7F,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAYD,eAAO,MAAM,MAAM,qFAwGlB,CAAC"}

package/dist/slider.js

@@ -80,7 +80,7 @@ var Slider = React.forwardRef(
                 borderWidth: 2,
                 borderColor: ACTIVE,
                 backgroundColor: WHITE,
-                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                boxShadow: "var(--shadow-sm)",
                 transition: "quick",
                 hoverStyle: { borderColor: ACTIVE_HOVER },
                 focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },