@luxfi/ui 7.0.0 → 7.2.0

package/src/input.tsx

@@ -1,41 +1,32 @@
-import { cva } from 'class-variance-authority';
 import React from 'react';
 
 import { cn } from './utils';
 
-const inputVariants = cva(
-  [
-    'w-full appearance-none outline-none transition-colors',
-    'bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]',
-    'placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]',
-    'hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]',
-    'focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]',
-    'focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]',
-    'disabled:opacity-40 disabled:cursor-not-allowed',
-    'read-only:opacity-70',
-    'data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]',
-  ].join(' '),
-  {
-    variants: {
-      size: {
-        xs: 'h-6 px-2 text-xs rounded',
-        sm: 'h-8 px-3 text-sm rounded-md',
-        md: 'h-10 px-4 text-base rounded-md',
-        lg: 'h-12 px-4 text-lg rounded-lg',
-        '2xl': 'h-14 px-4 text-xl rounded-lg',
-      },
-      variant: {
-        outline: 'border border-solid',
-        filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
-        unstyled: 'border-0 bg-transparent p-0 h-auto',
-      },
-    },
-    defaultVariants: {
-      size: 'md',
-      variant: 'outline',
-    },
-  },
-);
+const INPUT_BASE = [
+  'w-full appearance-none outline-none transition-colors',
+  'bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]',
+  'placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]',
+  'hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]',
+  'focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]',
+  'focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]',
+  'disabled:opacity-40 disabled:cursor-not-allowed',
+  'read-only:opacity-70',
+  'data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]',
+].join(' ');
+
+const INPUT_SIZE_CLASSES: Record<string, string> = {
+  xs: 'h-6 px-2 text-xs rounded',
+  sm: 'h-8 px-3 text-sm rounded-md',
+  md: 'h-10 px-4 text-base rounded-md',
+  lg: 'h-12 px-4 text-lg rounded-lg',
+  '2xl': 'h-14 px-4 text-xl rounded-lg',
+};
+
+const INPUT_VARIANT_CLASSES: Record<string, string> = {
+  outline: 'border border-solid',
+  filled: 'border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]',
+  unstyled: 'border-0 bg-transparent p-0 h-auto',
+};
 
 type InputSize = 'xs' | 'sm' | 'md' | 'lg' | '2xl';
 type InputVariant = 'outline' | 'filled' | 'unstyled';
@@ -46,11 +37,11 @@ export interface InputProps extends Omit<React.ComponentPropsWithRef<'input'>, '
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ size, variant, className, ...rest }, ref) => {
+  ({ size = 'md', variant = 'outline', className, ...rest }, ref) => {
     return (
       <input
         ref={ ref }
-        className={ cn(inputVariants({ size, variant }), className) }
+        className={ cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className) }
         { ...rest }
       />
     );

package/src/popover.tsx

@@ -1,11 +1,11 @@
-import * as RadixPopover from '@radix-ui/react-popover';
+import { Popover as GuiPopover } from '@hanzogui/popover';
 import * as React from 'react';
 
 import { cn } from './utils';
 
 import { CloseButton } from './close-button';
 
-// --- Utility: map Chakra-style placement string to Radix side + align ---
+// --- Utility: map Chakra-style placement string to @hanzogui placement ---
 
 type Side = 'top' | 'right' | 'bottom' | 'left';
 type Align = 'start' | 'center' | 'end';
@@ -61,7 +61,7 @@ export interface PopoverRootProps {
 }
 
 // Stash positioning info in context so PopoverContent can read it.
-interface PopoverPositioning {
+interface PopoverPositioningCtx {
   readonly side: Side;
   readonly align: Align;
   readonly sideOffset: number;
@@ -71,7 +71,7 @@ interface PopoverPositioning {
   readonly closeOnInteractOutside: boolean;
 }
 
-const PositioningContext = React.createContext<PopoverPositioning>({
+const PositioningContext = React.createContext<PopoverPositioningCtx>({
   side: 'bottom',
   align: 'start',
   sideOffset: 4,
@@ -90,8 +90,7 @@ export const PopoverRoot = (props: PopoverRootProps): React.ReactElement => {
     positioning,
     autoFocus = false,
     closeOnInteractOutside = true,
-    modal = false,
-    // lazyMount and unmountOnExit are handled via forceMount on Portal/Content
+    // lazyMount and unmountOnExit are handled via keepChildrenMounted
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     lazyMount: _lazyMount,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -111,7 +110,7 @@ export const PopoverRoot = (props: PopoverRootProps): React.ReactElement => {
 
   const { side, align } = parsePlacement(mergedPositioning.placement);
 
-  const positioningValue = React.useMemo<PopoverPositioning>(() => ({
+  const positioningValue = React.useMemo<PopoverPositioningCtx>(() => ({
     side,
     align,
     sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
@@ -125,21 +124,26 @@ export const PopoverRoot = (props: PopoverRootProps): React.ReactElement => {
     mergedPositioning.overflowPadding, autoFocus, closeOnInteractOutside,
   ]);
 
-  // Bridge Chakra-style onOpenChange ({ open }) to Radix (open)
+  // Bridge Chakra-style onOpenChange ({ open }) to @hanzogui (open)
   const handleOpenChange = React.useCallback((isOpen: boolean) => {
     onOpenChange?.({ open: isOpen });
   }, [ onOpenChange ]);
 
+  const placement = mergedPositioning.placement ?? 'bottom-start';
+  const offset = mergedPositioning.offset?.mainAxis ?? 4;
+
   return (
     <PositioningContext.Provider value={ positioningValue }>
-      <RadixPopover.Root
+      <GuiPopover
         open={ open }
         defaultOpen={ defaultOpen }
         onOpenChange={ handleOpenChange }
-        modal={ modal }
+        placement={ placement as any }
+        offset={ offset }
+        disableFocus={ !autoFocus }
       >
         { children }
-      </RadixPopover.Root>
+      </GuiPopover>
     </PositioningContext.Provider>
   );
 };
@@ -155,7 +159,7 @@ export const PopoverTrigger = React.forwardRef<
   PopoverTriggerProps
 >(function PopoverTrigger(props, ref) {
   const { asChild = true, ...rest } = props;
-  return <RadixPopover.Trigger asChild={ asChild } ref={ ref } { ...rest }/>;
+  return <GuiPopover.Trigger asChild={ asChild ? 'except-style' : undefined } ref={ ref } { ...rest as any }/>;
 });
 
 // --- PopoverContent ---
@@ -174,7 +178,7 @@ export const PopoverContent = React.forwardRef<
   HTMLDivElement,
   PopoverContentProps
 >(function PopoverContent(props, ref) {
-  const { portalled = true, portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
+  const { portalled = true, portalRef: _portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
   const resolvedW = typeof w === 'object' ? (w as Record<string, string>).base ?? (w as Record<string, string>).lg : w;
   const contentStyle: React.CSSProperties = {
     ...styleProp,
@@ -183,21 +187,11 @@ export const PopoverContent = React.forwardRef<
     ...(maxW ? { maxWidth: maxW } : {}),
     ...(paddingTop !== undefined ? { paddingTop: typeof paddingTop === 'number' ? `${ paddingTop * 4 }px` : paddingTop } : {}),
   };
-  const positioning = React.useContext(PositioningContext);
-
-  const preventFocus = React.useCallback((e: Event) => e.preventDefault(), []);
-  const preventInteract = React.useCallback((e: Event) => e.preventDefault(), []);
 
-  const content = (
-    <RadixPopover.Content
+  return (
+    <GuiPopover.Content
       ref={ ref }
-      side={ positioning.side }
-      align={ positioning.align }
-      sideOffset={ positioning.sideOffset }
-      alignOffset={ positioning.alignOffset }
-      collisionPadding={ positioning.collisionPadding }
-      onOpenAutoFocus={ positioning.autoFocus ? undefined : preventFocus }
-      onInteractOutside={ positioning.closeOnInteractOutside ? undefined : preventInteract }
+      unstyled
       className={ cn(
         'z-50 rounded-lg border border-[var(--color-popover-border,var(--color-border-divider))]',
         'bg-[var(--color-popover-bg,var(--color-dialog-bg))]',
@@ -210,19 +204,9 @@ export const PopoverContent = React.forwardRef<
         className,
       ) }
       style={ Object.keys(contentStyle).length > 0 ? contentStyle : undefined }
-      { ...rest }
+      { ...rest as any }
     />
   );
-
-  if (!portalled) {
-    return content;
-  }
-
-  return (
-    <RadixPopover.Portal container={ portalRef?.current ?? undefined }>
-      { content }
-    </RadixPopover.Portal>
-  );
 });
 
 // --- PopoverArrow ---
@@ -235,10 +219,11 @@ export const PopoverArrow = React.forwardRef<
 >(function PopoverArrow(props, ref) {
   const { className, ...rest } = props;
   return (
-    <RadixPopover.Arrow
+    <GuiPopover.Arrow
       ref={ ref }
+      unstyled
       className={ cn('fill-[var(--color-popover-bg,var(--color-dialog-bg))]', className) }
-      { ...rest }
+      { ...rest as any }
     />
   );
 });
@@ -253,14 +238,15 @@ export const PopoverCloseTrigger = React.forwardRef<
 >(function PopoverCloseTrigger(props, ref) {
   const { className, ...rest } = props;
   return (
-    <RadixPopover.Close
+    <GuiPopover.Close
+      unstyled
       className={ cn('absolute top-1 right-1', className) }
-      { ...rest }
+      { ...rest as any }
       asChild
       ref={ ref }
     >
       <CloseButton/>
-    </RadixPopover.Close>
+    </GuiPopover.Close>
   );
 });
 
@@ -281,9 +267,9 @@ export const PopoverCloseTriggerWrapper = React.forwardRef<
   }
 
   return (
-    <RadixPopover.Close ref={ ref } { ...rest } asChild>
+    <GuiPopover.Close ref={ ref } { ...rest as any } asChild>
       { children }
-    </RadixPopover.Close>
+    </GuiPopover.Close>
   );
 });
 

package/src/skeleton.tsx

@@ -12,7 +12,7 @@ export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /** 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 className / inline style.
+  // 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
@@ -59,166 +59,124 @@ export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   readonly background?: string;
 }
 
-const SPACING_SCALE = 4;
-
-function toStylePx(value: number | string | undefined): string | undefined {
-  if (value === undefined) return undefined;
-  if (typeof value === 'string') return value;
-  return `${ value * SPACING_SCALE }px`;
+// 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;
 }
 
-function extractSkeletonStyleProps(props: Record<string, unknown>): {
-  style: React.CSSProperties;
-  rest: Record<string, unknown>;
-} {
-  const style: React.CSSProperties = {};
-  const rest: Record<string, unknown> = {};
-
-  function resolveDimension(value: unknown): string | undefined {
-    if (value === undefined || value === null) return undefined;
-    if (typeof value === 'number') return `${ value * SPACING_SCALE }px`;
-    if (typeof value === 'string') return value;
-    if (typeof value === 'object') {
-      const obj = value as Record<string, string>;
-      return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[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;
+}
 
-  for (const [ key, value ] of Object.entries(props)) {
-    if (value === undefined) continue;
-    switch (key) {
-      case 'w': {
-        const v = resolveDimension(value); if (v) style.width = v; break;
-      }
-      case 'h': {
-        const v = resolveDimension(value); if (v) style.height = v; break;
-      }
-      case 'minW': {
-        const v = resolveDimension(value); if (v) style.minWidth = v; break;
-      }
-      case 'maxW': {
-        const v = resolveDimension(value); if (v) style.maxWidth = v; break;
-      }
-      case 'height': style.height = value as string; break;
-      case 'display': style.display = value as string; break;
-      case 'flexGrow': style.flexGrow = value as number; break;
-      case 'flexShrink': style.flexShrink = value as number; break;
-      case 'flexBasis': style.flexBasis = value as string; break;
-      case 'fontWeight': style.fontWeight = value as number | string; break;
-      case 'borderRadius': style.borderRadius = value as string; break;
-      case 'alignSelf': style.alignSelf = value as string; break;
-      case 'alignItems': style.alignItems = value as string; break;
-      case 'justifyContent': style.justifyContent = value as string; break;
-      case 'color': style.color = value as string; break;
-      case 'mt': style.marginTop = toStylePx(value as number | string); break;
-      case 'mb': style.marginBottom = toStylePx(value as number | string); break;
-      case 'ml': style.marginLeft = toStylePx(value as number | string); break;
-      case 'mr': style.marginRight = toStylePx(value as number | string); break;
-      case 'overflow': style.overflow = value as string; break;
-      case 'whiteSpace': style.whiteSpace = value as string; break;
-      case 'textOverflow': style.textOverflow = value as string; break;
-      case 'textTransform': style.textTransform = value as string; break;
-      case 'gap': style.gap = typeof value === 'number' ? `${ value * SPACING_SCALE }px` : value as string; break;
-      case 'gridTemplateColumns': style.gridTemplateColumns = value as string; break;
-      case 'minWidth': style.minWidth = value as string; break;
-      case 'boxSize': {
-        const s = typeof value === 'number' ? `${ value * SPACING_SCALE }px` : value as string; style.width = s; style.height = s; break;
-      }
-      case 'py': {
-        const v = toStylePx(value as number | string); style.paddingTop = v; style.paddingBottom = v; break;
-      }
-      case 'px': {
-        const v = toStylePx(value as number | string); style.paddingLeft = v; style.paddingRight = v; break;
-      }
-      case 'p': {
-        const v = toStylePx(value as number | string); style.padding = v; break;
-      }
-      case 'hideBelow': break; // handled via className
-      case 'textStyle': break; // drop textStyle, not directly applicable
-      case 'fontSize': style.fontSize = value as string; break;
-      case 'flexWrap': style.flexWrap = value as React.CSSProperties['flexWrap']; break;
-      case 'wordBreak': style.wordBreak = value as React.CSSProperties['wordBreak']; break;
-      case 'lineHeight': style.lineHeight = value as string; break;
-      case 'marginRight': style.marginRight = value as string; break;
-      case 'position': style.position = value as React.CSSProperties['position']; break;
-      case 'background': style.background = value as string; break;
-      default: rest[key] = value; break;
-    }
+/** 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;
+}
 
-  return { style, rest };
+/** 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]>;
 }
 
+const 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(' ');
+
+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,
-      // Destructure style-prop shims so they don't leak into DOM
-      w: _w, h: _h, minW: _minW, maxW: _maxW, display: _display,
-      flexGrow: _flexGrow, flexShrink: _flexShrink, flexBasis: _flexBasis,
-      fontWeight: _fontWeight, textStyle: _textStyle, borderRadius: _borderRadius,
-      alignSelf: _alignSelf, alignItems: _alignItems, justifyContent: _justifyContent,
-      color: _color, mt: _mt, mb: _mb, ml: _ml, mr: _mr, height: _height,
-      overflow: _overflow, whiteSpace: _whiteSpace, textOverflow: _textOverflow,
-      textTransform: _textTransform, gap: _gap, gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth, boxSize: _boxSize, py: _py, px: _px, p: _p,
-      hideBelow: _hideBelow, fontSize: _fontSize, flexWrap: _flexWrap, wordBreak: _wordBreak, lineHeight: _lineHeight,
-      marginRight: _marginRight, position: _position, background: _background,
-      as: Component = 'div',
-      ...htmlRest
-    } = props;
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = 'div', ...allRest } = props;
 
-    // Collect legacy style props into a CSSProperties object
-    const { style: shimStyle } = extractSkeletonStyleProps({
-      w: _w, h: _h, minW: _minW, maxW: _maxW, display: _display,
-      flexGrow: _flexGrow, flexShrink: _flexShrink, flexBasis: _flexBasis,
-      fontWeight: _fontWeight, textStyle: _textStyle, borderRadius: _borderRadius,
-      alignSelf: _alignSelf, alignItems: _alignItems, justifyContent: _justifyContent,
-      color: _color, mt: _mt, mb: _mb, ml: _ml, mr: _mr, height: _height,
-      overflow: _overflow, whiteSpace: _whiteSpace, textOverflow: _textOverflow,
-      textTransform: _textTransform, gap: _gap, gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth, boxSize: _boxSize, py: _py, px: _px, p: _p,
-      hideBelow: _hideBelow, fontSize: _fontSize, flexWrap: _flexWrap, wordBreak: _wordBreak, lineHeight: _lineHeight,
-      marginRight: _marginRight, position: _position, background: _background,
-    });
-    const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ?
-      { ...shimStyle, ...styleProp } :
-      undefined;
+    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;
 
-    const HIDE_BELOW_MAP: Record<string, string> = { lg: 'lg:hidden', md: 'md:hidden', sm: 'sm:hidden' };
-    const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : undefined;
-    const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
+    // Strip shim props from what reaches the DOM.
+    const htmlRest = stripShims(allRest);
 
     if (!loading) {
-      // When asChild is true, render children directly without a wrapper div
-      if (asChild && React.isValidElement(children)) {
-        return children;
-      }
+      if (asChild && React.isValidElement(children)) return children;
       return (
-        <Component ref={ ref } className={ finalClassName } style={ mergedStyle } { ...htmlRest }>
+        <Component ref={ ref } className={ cls } style={ mergedStyle } { ...htmlRest }>
           { children }
         </Component>
       );
     }
 
-    // When asChild is true and loading, wrap the child in skeleton styles
     if (asChild && React.isValidElement(children)) {
       return (
         <Component
           ref={ ref }
           data-loading
-          className={ cn(
-            '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%]',
-            'text-transparent [&_*]:invisible',
-            finalClassName,
-          ) }
+          className={ cn(SKELETON_CLASSES, 'text-transparent [&_*]:invisible', cls) }
           style={ mergedStyle }
           { ...htmlRest }
         >
@@ -231,13 +189,7 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
       <Component
         ref={ ref }
         data-loading
-        className={ cn(
-          '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%]',
-          children ? 'text-transparent [&_*]:invisible' : 'min-h-5',
-          finalClassName,
-        ) }
+        className={ cn(SKELETON_CLASSES, children ? 'text-transparent [&_*]:invisible' : 'min-h-5', cls) }
         style={ mergedStyle }
         { ...htmlRest }
       >

package/src/tag.tsx

@@ -1,4 +1,3 @@
-import { cva } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -22,39 +21,20 @@ function TruncatedTextTooltip({ label, children }: { readonly label: React.React
 type TagVariant = 'subtle' | 'clickable' | 'filter' | 'select';
 type TagSize = 'sm' | 'md' | 'lg';
 
-const tagVariants = cva(
-  [
-    'inline-flex items-center align-top max-w-full select-text rounded-sm',
-    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500',
-  ].join(' '),
-  {
-    variants: {
-      variant: {
-        subtle: 'bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]',
-        clickable: [
-          'cursor-pointer',
-          'bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)]',
-          'hover:opacity-76',
-        ].join(' '),
-        filter: 'bg-[var(--color-tag-filter-bg)]',
-        select: [
-          'cursor-pointer',
-          'bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)]',
-          'hover:text-[var(--color-hover)] hover:opacity-76',
-        ].join(' '),
-      },
-      size: {
-        sm: 'px-1 py-0.5 min-h-5 gap-1 text-xs',
-        md: 'px-1 py-0.5 min-h-6 gap-1 text-sm',
-        lg: 'px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm',
-      },
-    },
-    defaultVariants: {
-      variant: 'subtle',
-      size: 'md',
-    },
-  },
-);
+const TAG_BASE = 'inline-flex items-center align-top max-w-full select-text rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500';
+
+const TAG_VARIANT_CLASSES: Record<TagVariant, string> = {
+  subtle: 'bg-[var(--color-tag-subtle-bg)] text-[var(--color-tag-subtle-fg)]',
+  clickable: 'cursor-pointer bg-[var(--color-tag-clickable-bg)] text-[var(--color-tag-clickable-fg)] hover:opacity-76',
+  filter: 'bg-[var(--color-tag-filter-bg)]',
+  select: 'cursor-pointer bg-[var(--color-tag-select-bg)] text-[var(--color-tag-select-fg)] hover:text-[var(--color-hover)] hover:opacity-76',
+};
+
+const TAG_SIZE_CLASSES: Record<TagSize, string> = {
+  sm: 'px-1 py-0.5 min-h-5 gap-1 text-xs',
+  md: 'px-1 py-0.5 min-h-6 gap-1 text-sm',
+  lg: 'px-1.5 py-1.5 min-h-8 min-w-8 gap-1 text-sm',
+};
 
 const TAG_SELECTED_CLASSES = [
   'bg-[var(--color-tag-select-selected-bg)]',
@@ -121,7 +101,9 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
         <span
           ref={ ref }
           className={ cn(
-            tagVariants({ variant, size }),
+            TAG_BASE,
+            TAG_VARIANT_CLASSES[variant ?? 'subtle'],
+            TAG_SIZE_CLASSES[size ?? 'md'],
             selected && !loading && TAG_SELECTED_CLASSES,
             disabled && TAG_DISABLED_CLASSES,
             className,