@luxfi/ui 8.0.0 → 8.2.0

package/src/site/style/lux-colors.css

@@ -0,0 +1,84 @@
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+
+@layer base {
+
+  :root, .hanzo-ui-light-theme {
+    --hz-ui-fg-0: hsl(0 0% 0%);
+    --hz-ui-fg-body: hsl(0 0% 10%);
+    --hz-ui-fg-1: hsl(0 0% 20%);
+    --hz-ui-fg-2: hsl(0 0% 35%);
+    --hz-ui-fg-3: hsl(0 0% 50%);
+    --hz-ui-fg-4: hsl(0 0% 70%);
+    --hz-ui-fg-5: hsl(0 0% 90%);
+
+    --hz-ui-bg-0: hsl(0 0% 100%);
+    --hz-ui-bg-1: hsl(0 0% 90%);
+    --hz-ui-bg-2: hsl(0 0% 75%);
+    --hz-ui-bg-3: hsl(0 0% 55%);
+
+    --hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
+
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 0%, 0.85);
+
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(262, 7%, 82%);
+    --hz-ui-secondary-1: hsl(258, 7%, 72%);
+    --hz-ui-secondary-2: hsl(254, 7%, 62%);
+    --hz-ui-secondary-3: hsl(250, 5%, 53%);
+
+    --hz-ui-primary: var(--hz-ui-bg-inverted);
+    --hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
+    --hz-ui-primary-fg: var(--hz-ui-fg-inverted);
+
+    --hz-ui-secondary: var(--hz-ui-secondary-0);
+    --hz-ui-secondary-hover: var(--hz-ui-secondary-2);
+    --hz-ui-secondary-fg: var(--hz-ui-bg-0);
+
+    --hz-ui-nav: var(--hz-ui-fg-4);
+    --hz-ui-nav-current: var(--hz-ui-fg-0);
+    --hz-ui-nav-hover: var(--hz-ui-fg-0);
+
+    --hz-ui-destructive: hsl(0 62.8% 45%);
+    --hz-ui-destructive-hover: hsl(0 62.8% 25%);
+    --hz-ui-destructive-fg: hsl(0 0% 100%);
+
+    --hz-ui-ring: var(--hz-ui-fg-1);
+
+    --hz-ui-radius: 0.5rem;
+  }
+ 
+  .hanzo-ui-dark-theme {
+
+    --hz-ui-fg-0: hsl(0 0% 100%);
+    --hz-ui-fg-body: hsl(0, 0%, 97%);
+    --hz-ui-fg-1: hsl(0 0% 85%);
+    --hz-ui-fg-2: hsl(0 0% 70%);
+    --hz-ui-fg-3: hsl(0 0% 55%);
+    --hz-ui-fg-4: hsl(0 0% 40%);
+    --hz-ui-fg-5: hsl(0 0% 25%);
+
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover:  hsla(0, 0%, 100%, 0.85);
+
+    --hz-ui-bg-3: hsl(0 0% 25%);
+    --hz-ui-bg-2: hsl(0 0% 18%);
+    --hz-ui-bg-1: hsl(0 0% 12%);
+    --hz-ui-bg-0: hsl(0 0% 0%);
+
+    --hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
+
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+
+    --hz-ui-secondary-0: hsl(250, 5%, 53%);
+    --hz-ui-secondary-1: hsl(254, 7%, 62%);
+    --hz-ui-secondary-2: hsl(258, 7%, 72%);
+    --hz-ui-secondary-3: hsl(262, 7%, 82%);
+
+    --hz-ui-secondary-fg: var(--hz-ui-fg-0);
+
+  }
+
+}
+

package/src/site/style/lux-fonts.css

@@ -0,0 +1,24 @@
+/* Both faces are served from the app's own /fonts. The Next path (../next/font)
+   emits the same two through next/font instead. */
+@layer base {
+  @font-face {
+    font-family: "Zen";
+    src: url("/fonts/Zen-Variable.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "inter";
+    src: url("/fonts/InterVariable.woff2") format("woff2"),
+      url("/fonts/InterVariable.ttf") format("ttf");
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "inter";
+    src: url("/fonts/InterVariable-Italic.woff2") format("woff2"),
+      url("/fonts/InterVariable-Italic.ttf") format("ttf");
+    font-weight: 500;
+    font-style: italic;
+  }
+}

package/src/site/style/lux-global-non-next.css

@@ -0,0 +1,52 @@
+/* Note, preflight is applied first:
+  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
+*/
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+/* @import "@hanzo/ui/style/hanzo-common"; */
+@import "./lux-colors.css";
+@import "./lux-fonts.css";
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
+  display: none;
+}
+
+/* Headings are Zen cut wide: the '.zen-wide' preset from @hanzo/font, fitted
+   against Druk Wide Bold. The preset's scaleX(1.56) is left out on purpose -- a
+   transform does not reflow, and these land on block h1-h4 that would overrun
+   their container. Use the class itself where a word has room to be monumental. */
+.font-heading {
+  text-transform: uppercase;
+  font-variation-settings: 'wght' 845;
+  letter-spacing: -0.04em;
+}
+
+/* Specific style fixes for react-square-web-payments-sdk -
+ * reduce gap between card input and pay button
+ */
+#rswps-card-container {
+  min-height: unset !important;
+}
+
+.sq-card-wrapper .sq-card-message {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+
+.element-container:hover .icon-container-nor {
+  display: none;
+}
+
+.icon-container-hov {
+  display: none;
+}
+
+.element-container:hover .icon-container-hov {
+  display: block !important;
+}
+
+.element-container:hover .text-container {
+  background: transparent;
+}
+.overflow-scroll::-webkit-scrollbar{
+  display:none;
+}

package/src/site/style/lux-global.css

@@ -0,0 +1,135 @@
+/* The Lux surface.
+ *
+ * No utility engine. @hanzo/ui ships the reset and the token scale (theme.css +
+ * styles.css, imported by name in each app's layout), so what is left here is
+ * what is actually Lux: the colour set, the display face, the one place Hanzo
+ * IAM's unskinned sign-in markup meets this surface, and a few corrections to
+ * third-party widgets.
+ *
+ * The Tailwind layers this used to open with — base, components, utilities —
+ * generated every class the chrome was written against. Removing them without
+ * the rest of the migration is what leaves a site rendering with browser
+ * defaults, so `body` states its own ground here.
+ */
+@import "./lux-colors.css";
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  min-height: 100%;
+  /* One column, floored at 0 so long content wraps instead of widening the
+     page. A row track of 1fr lets a short page still fill the viewport. */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 1fr;
+  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+}
+
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
+  display: none;
+}
+
+/* Headings are Zen cut wide: the '.zen-wide' preset from @hanzo/font, fitted
+   against Druk Wide Bold. The preset's scaleX(1.56) is left out on purpose --
+   a transform does not reflow, and these land on block h1-h4 that would overrun
+   their container. Use the class itself where a word has room to be monumental. */
+.font-heading {
+  font-family: var(--font-zen-sans), var(--font-inter), sans-serif;
+  text-transform: uppercase;
+  font-variation-settings: 'wght' 845;
+  letter-spacing: -0.04em;
+}
+
+/* Hanzo IAM's sign-in views ship structure, not skin. This is the one place
+ * that markup meets the Lux surface -- colours come from lux-colors so the
+ * form follows the theme like everything else.
+ */
+.hanzo-iam-card,
+.hanzo-iam-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.hanzo-iam-form input {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-base);
+  background-color: var(--hz-ui-bg-1);
+  color: var(--hz-ui-fg-body);
+  border: 1px solid var(--hz-ui-bg-2);
+}
+
+.hanzo-iam-form input::placeholder {
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-form input:focus {
+  outline: none;
+  border-color: var(--hz-ui-fg-body);
+}
+
+.hanzo-iam-btn {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-base);
+  font-weight: 600;
+  cursor: pointer;
+  background-color: var(--hz-ui-bg-inverted);
+  color: var(--hz-ui-fg-inverted);
+}
+
+.hanzo-iam-btn:hover {
+  background-color: var(--hz-ui-bg-inverted-hover);
+}
+
+.hanzo-iam-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.hanzo-iam-divider {
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  color: var(--hz-ui-fg-3);
+}
+
+.hanzo-iam-error {
+  font-size: var(--text-sm);
+  color: hsl(0 70% 60%);
+}
+
+/* Specific style fixes for react-square-web-payments-sdk -
+ * reduce gap between card input and pay button
+ */
+#rswps-card-container {
+  min-height: unset !important;
+}
+
+.sq-card-wrapper .sq-card-message {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.element-container:hover .icon-container-nor {
+  display: none;
+}
+
+.icon-container-hov {
+  display: none;
+}
+
+.element-container:hover .icon-container-hov {
+  display: block !important;
+}
+
+.element-container:hover .text-container {
+  background: transparent;
+}
+
+.overflow-scroll::-webkit-scrollbar {
+  display: none;
+}

package/src/site/types/chatbot-config.ts

@@ -0,0 +1,7 @@
+import type ChatbotSuggestQuestion from './chatbot-suggested-question'
+
+interface ChatbotConfig {
+  suggestedQuestions?: ChatbotSuggestQuestion[] 
+}
+
+export { type ChatbotConfig as default } 

package/src/site/types/chatbot-suggested-question.ts

@@ -0,0 +1,7 @@
+interface ChatbotSuggestedQuestion {
+  heading: string 
+  message: string 
+  icon?: string
+}
+
+export { type ChatbotSuggestedQuestion as default }

package/src/site/types/contact-info.ts

@@ -0,0 +1,11 @@
+interface ContactInfo {
+  email: string
+  phone?: string
+}
+
+type ContactInfoFields = keyof ContactInfo
+
+export {
+  type ContactInfo,
+  type ContactInfoFields
+}

package/src/site/types/index.ts

@@ -0,0 +1,4 @@
+export type { ContactInfo, ContactInfoFields } from './contact-info'
+export type { default as SiteDef } from './site-def'
+export type { default as ChatbotSuggestedQuestion } from './chatbot-suggested-question'
+export type { default as ChatbotConfig } from './chatbot-config'

package/src/site/types/site-def.ts

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import type { CommerceConfig }  from '@hanzo/commerce/types'
+
+import type ChatbotConfig from './chatbot-config'
+
+interface SiteDef {
+
+    /**
+     * Short name of this site, which with the org names the IAM application it
+     * signs in as: 'quest' is the client `lux-quest` on lux.id. Required, so a
+     * site cannot ship a login button that belongs to no one.
+     */
+  app: string
+
+    /** url of this site.  All nav links in the system will show it in 'current' state */
+  currentAs?: string
+
+  nav: {
+      /** common elements (will auto-select currentAs if it's provide) */
+      /** optional feature element. right-most after 'elements' (any min-w is ignored) */
+    common: LinkDef[]       
+    featured?: LinkDef[]
+  }
+
+    /** 
+     * Array of columns, each of which itself is an array of links 
+     * (or "title defs" where href='' and variant='linkFG')  
+     * Common use case: To render a site-specific first column: 
+     * {
+     *    footer[myColumn, ...commonColumnsFromUi]
+     * }
+     * see: @hanzo/ui/siteDef/footer (default export)
+     * or @hanzo/ui/siteDef/footer/common
+     */
+  footer: LinkDef[][]  
+
+    /** 
+     * optional override of default 'above copyright' horizantal links 
+      default (undefined / absent): links in side-def/footer/legal are rendered 
+      [] renders nothing above the copyright 
+    */
+  aboveCopyright?: LinkDef[] 
+
+  commerce?: CommerceConfig
+  chatbot?: ChatbotConfig
+
+    // Do not render login / avatar widget
+  noAuth?: boolean
+}
+
+export { type SiteDef as default }

package/src/site/util/index.ts

@@ -0,0 +1,11 @@
+import { compiler } from 'markdown-to-jsx'
+
+  // Compiles markdown to JSX. `wrapper: null` yields the bare nodes rather than
+  // a wrapping element, so callers can drop the result straight into a
+  // ReactNode-typed field. Inline HTML (<br/>, <cite>) is parsed natively.
+export const markdown = (s: string, options?: any) => (
+  compiler(s, {
+    wrapper: null,
+    ...options
+  })
+)

package/src/skeleton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-
+import { Box, sx } from '@hanzo/ui'
 import { cn } from './utils';
 
 // ---------------------------------------------------------------------------
@@ -7,139 +7,11 @@ import { cn } from './utils';
 // ---------------------------------------------------------------------------
 
 export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
-  readonly loading: boolean | undefined;
+  /** 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;
-
-  // Legacy Chakra style-prop shims — converted to inline style.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly w?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly h?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  readonly minW?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-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;
-}
-
-// Style-prop shim names that must NOT leak into the DOM.
-const 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',
-] as const;
-
-const S = 4; // Chakra spacing scale
-
-/** Resolve a dimension value (number → px via spacing scale, responsive object → first value). */
-function dim(v: unknown): string | undefined {
-  if (v == null) return undefined;
-  if (typeof v === 'number') return `${ v * S }px`;
-  if (typeof v === 'string') return v;
-  if (typeof v === 'object') {
-    const o = v as Record<string, string>;
-    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
-  }
-  return undefined;
-}
-
-/** Convert a spacing number|string via the 4px scale. */
-function sp(v: number | string | undefined): string | undefined {
-  if (v === undefined) return undefined;
-  return typeof v === 'number' ? `${ v * S }px` : v;
-}
-
-/** Build a CSSProperties object from legacy Chakra style-prop shims. */
-function shimToStyle(props: SkeletonProps): React.CSSProperties {
-  const s: React.CSSProperties = {};
-  if (props.w !== undefined) s.width = dim(props.w);
-  if (props.h !== undefined) s.height = dim(props.h);
-  if (props.minW !== undefined) s.minWidth = dim(props.minW);
-  if (props.maxW !== undefined) s.maxWidth = dim(props.maxW);
-  if (props.display !== undefined) s.display = props.display;
-  if (props.flexGrow !== undefined) s.flexGrow = props.flexGrow;
-  if (props.flexShrink !== undefined) s.flexShrink = props.flexShrink;
-  if (props.flexBasis !== undefined) s.flexBasis = props.flexBasis;
-  if (props.fontWeight !== undefined) s.fontWeight = props.fontWeight;
-  if (props.borderRadius !== undefined) s.borderRadius = props.borderRadius;
-  if (props.alignSelf !== undefined) s.alignSelf = props.alignSelf;
-  if (props.alignItems !== undefined) s.alignItems = props.alignItems;
-  if (props.justifyContent !== undefined) s.justifyContent = props.justifyContent;
-  if (props.color !== undefined) s.color = props.color;
-  if (props.mt !== undefined) s.marginTop = sp(props.mt);
-  if (props.mb !== undefined) s.marginBottom = sp(props.mb);
-  if (props.ml !== undefined) s.marginLeft = sp(props.ml);
-  if (props.mr !== undefined) s.marginRight = sp(props.mr);
-  if (props.height !== undefined) s.height = props.height;
-  if (props.overflow !== undefined) s.overflow = props.overflow;
-  if (props.whiteSpace !== undefined) s.whiteSpace = props.whiteSpace;
-  if (props.textOverflow !== undefined) s.textOverflow = props.textOverflow;
-  if (props.textTransform !== undefined) s.textTransform = props.textTransform;
-  if (props.gap !== undefined) s.gap = sp(props.gap);
-  if (props.gridTemplateColumns !== undefined) s.gridTemplateColumns = props.gridTemplateColumns;
-  if (props.minWidth !== undefined) s.minWidth = props.minWidth;
-  if (props.boxSize !== undefined) {
-    const v = typeof props.boxSize === 'number' ? `${ props.boxSize * S }px` : props.boxSize;
-    s.width = v; s.height = v;
-  }
-  if (props.py !== undefined) { const v = sp(props.py); s.paddingTop = v; s.paddingBottom = v; }
-  if (props.px !== undefined) { const v = sp(props.px); s.paddingLeft = v; s.paddingRight = v; }
-  if (props.p !== undefined) s.padding = sp(props.p);
-  if (props.fontSize !== undefined) s.fontSize = props.fontSize;
-  if (props.flexWrap !== undefined) s.flexWrap = props.flexWrap;
-  if (props.wordBreak !== undefined) s.wordBreak = props.wordBreak;
-  if (props.lineHeight !== undefined) s.lineHeight = props.lineHeight;
-  if (props.marginRight !== undefined) s.marginRight = props.marginRight;
-  if (props.position !== undefined) s.position = props.position;
-  if (props.background !== undefined) s.background = props.background;
-  return s;
-}
-
-/** Strip shim keys from props so they don't leak into the DOM. */
-function stripShims<T extends Record<string, unknown>>(props: T): Omit<T, (typeof SHIM_PROPS)[number]> {
-  const out = { ...props };
-  for (const k of SHIM_PROPS) delete out[k];
-  return out as Omit<T, (typeof SHIM_PROPS)[number]>;
 }
 
 // A skeleton reserves space. It does not move.
@@ -156,53 +28,33 @@ function stripShims<T extends Record<string, unknown>>(props: T): Omit<T, (typeo
 // live next to the CSS, in section 6c of @luxfi/ui/tokens.css.
 const SKELETON_CLASSES = 'lux-skeleton rounded-sm';
 
-const HIDE_BELOW_MAP: Record<string, string> = { lg: 'lg:hidden', md: 'md:hidden', sm: 'sm:hidden' };
-
 export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
   function Skeleton(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 } : undefined;
-    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : undefined;
-    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
-
-    // Strip shim props from what reaches the DOM.
-    const htmlRest = stripShims(allRest);
+    const { loading = true, asChild, className, children, style, ...rest } = props;
 
     if (!loading) {
       if (asChild && React.isValidElement(children)) return children;
       return (
-        <Component ref={ ref } className={ cls } style={ mergedStyle } { ...htmlRest }>
-          { children }
-        </Component>
-      );
-    }
-
-    if (asChild && React.isValidElement(children)) {
-      return (
-        <Component
-          ref={ ref }
-          data-loading
-          className={ cn(SKELETON_CLASSES, '[&_*]:invisible', cls) }
-          style={ mergedStyle }
-          { ...htmlRest }
-        >
+        <Box ref={ ref } className={ className } style={ style } { ...rest }>
           { children }
-        </Component>
+        </Box>
       );
     }
 
     return (
-      <Component
+      <div
         ref={ ref }
         data-loading
-        className={ cn(SKELETON_CLASSES, children ? '[&_*]:invisible' : 'min-h-5', cls) }
-        style={ mergedStyle }
-        { ...htmlRest }
+        {...sx(
+          SKELETON_CLASSES,
+          asChild || children ? '[&_*]:invisible' : 'min-h-5',
+          className,
+        )}
+        style={ style }
+        { ...rest }
       >
         { children }
-      </Component>
+      </div>
     );
   },
 );
@@ -226,7 +78,7 @@ export const SkeletonCircle = React.forwardRef<HTMLDivElement, SkeletonCirclePro
       <Skeleton
         ref={ ref }
         loading={ loading }
-        className={ cn('rounded-full shrink-0', className) }
+        {...sx('rounded-full shrink-0', className)}
         style={{ width: dimension, height: dimension, ...rest.style }}
         { ...rest }
       />
@@ -248,15 +100,15 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
     const { noOfLines = 3, loading = true, className, ...rest } = props;
 
     return (
-      <div ref={ ref } className={ cn('flex w-full flex-col gap-2', className) } { ...rest }>
+      <Box ref={ ref } className={ cn('flex w-full flex-col gap-2', className) } { ...rest }>
         { Array.from({ length: noOfLines }).map((_, index) => (
           <Skeleton
             key={ index }
             loading={ loading }
-            className={ cn('h-4', index === noOfLines - 1 && 'max-w-[80%]') }
+            {...sx( cn('h-4', index === noOfLines - 1 && 'max-w-[80%]') )}
           />
         )) }
-      </div>
+      </Box>
     );
   },
 );
@@ -279,5 +131,5 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
  */
 export function LoadingBar({ loading = true }: { readonly loading?: boolean }) {
   if (!loading) return null;
-  return <div className="lux-loading" role="progressbar" aria-busy="true" aria-label="Loading"/>;
+  return <Box className="lux-loading" role="progressbar" aria-busy="true" aria-label="Loading"/>;
 }

package/src/slider.tsx

@@ -12,6 +12,7 @@ export 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;