@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.180

package/src/components/Select/index.tsx

@@ -1,8 +1,16 @@
-import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
-import { ArrowDropDown } from '@cdx-ui/icons';
+import { cloneElement, forwardRef, isValidElement, useMemo, type ReactNode } from 'react';
+import { Text, type TextProps, View, type ViewProps } from 'react-native';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@cdx-ui/icons';
 import {
-  createSelect,
+  SelectContent as SelectContentPrimitive,
+  SelectItem as SelectItemPrimitive,
+  SelectRoot as SelectRootPrimitive,
+  SelectTrigger as SelectTriggerPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useSelectContext,
+  useSelectItemContext,
   type ISelectContentProps,
   type ISelectItemLabelProps,
   type ISelectItemProps,
@@ -10,37 +18,27 @@ import {
   type ISelectTriggerProps,
   type ISelectValueProps,
 } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
-import { SelectTriggerHost } from './SelectTriggerHost';
+import { Menu } from '../Menu';
+import { menuItemLabelVariants, menuItemVariants } from '../Menu/styles';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   type SelectVariantProps,
-  selectContentVariants,
   selectIconVariants,
-  selectItemLabelVariants,
-  selectItemVariants,
   selectTriggerVariants,
   selectValueVariants,
 } from './styles';
 
 const SCOPE = 'SELECT';
 
-const Root = withStyleContext(View, SCOPE);
-
 const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps;
 
-const SelectPrimitive = createSelect({
-  Root,
-  Trigger: SelectTriggerHost,
-  Value: Text,
-  Icon: View,
-  Content: View,
-  Item: Pressable,
-  ItemLabel: Text,
-});
+const toMenuItemSize = (size: SelectVariantProps['size'] | undefined) =>
+  size === 'small' ? 'small' : 'default';
 
 // =============================================================================
-// STYLED ROOT COMPONENT
+// STYLED ROOT
 // =============================================================================
 
 export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps {
@@ -49,16 +47,21 @@ export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps
 
 const SelectRoot = forwardRef<View, SelectProps>(
   ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
     return (
-      <SelectPrimitive
-        ref={ref}
-        className={className}
-        style={style}
-        context={{ variant, size }}
-        {...props}
-      >
-        {children}
-      </SelectPrimitive>
+      <ParentContext.Provider value={ctx}>
+        <SelectRootPrimitive
+          ref={ref}
+          className={className}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'select' }))}
+        >
+          {children}
+        </SelectRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -66,25 +69,77 @@ const SelectRoot = forwardRef<View, SelectProps>(
 SelectRoot.displayName = 'Select';
 
 // =============================================================================
-// STYLED TRIGGER COMPONENT
+// STYLED TRIGGER
 // =============================================================================
 
 export interface SelectTriggerProps extends ISelectTriggerProps {
+  /**
+   * Substitute the rendered trigger element with the single child. The child must
+   * be another Forge primitive (IconButton, Chip, Button) — anything whose
+   * underlying Pressable accepts Pressable-shaped handlers. When set, the
+   * auto-injected arrow indicator is skipped and `selectTriggerVariants` is not
+   * applied so the substituted component's own appearance wins.
+   *
+   * On web, `<label htmlFor>` association is preserved via a `focus()` bridge
+   * registered by the primitive.
+   *
+   * NOTE — `data-slot` overlap: the substituted component's own `data-slot`
+   * (e.g. `button`, `icon-button`, `chip`) may win on the merged element.
+   * Selectors that need guaranteed `select-trigger` access should wrap the
+   * trigger instead of relying on `data-slot`.
+   */
+  asChild?: boolean;
+  /**
+   * Replaces the default open/closed chevron. Pass `null` to suppress the
+   * indicator. When `asChild` is set, only an explicitly provided indicator is
+   * appended to the substituted child.
+   */
+  indicator?: ReactNode;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectTrigger = forwardRef<View, SelectTriggerProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, indicator, className, children, style, ...props }, ref) => {
+    const { open } = useSelectContext();
     const { variant, size } = useSelectStyleContext();
 
-    const computedClassName = cn(selectTriggerVariants({ variant, size }), className);
+    const computedClassName = asChild
+      ? className
+      : cn(selectTriggerVariants({ variant, size }), className);
+    const triggerIndicator =
+      indicator === undefined ? (
+        asChild ? undefined : (
+          <SelectIcon as={open ? KeyboardArrowUp : KeyboardArrowDown} />
+        )
+      ) : (
+        indicator
+      );
+    const triggerChildren =
+      asChild &&
+      triggerIndicator !== undefined &&
+      isValidElement<{ children?: ReactNode }>(children)
+        ? cloneElement(children, undefined, children.props.children, triggerIndicator)
+        : children;
 
     return (
-      <SelectPrimitive.Trigger ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-        <SelectIcon as={ArrowDropDown} />
-      </SelectPrimitive.Trigger>
+      <SelectTriggerPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-trigger' }))}
+      >
+        {asChild ? (
+          triggerChildren
+        ) : (
+          <>
+            {children}
+            {triggerIndicator}
+          </>
+        )}
+      </SelectTriggerPrimitive>
     );
   },
 );
@@ -92,53 +147,131 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
 SelectTrigger.displayName = 'Select.Trigger';
 
 // =============================================================================
-// STYLED VALUE COMPONENT
+// STYLED VALUE (styled-only)
 // =============================================================================
 
 export interface SelectValueProps extends TextProps, ISelectValueProps {
+  asChild?: boolean;
   className?: string;
 }
 
-const SelectValue = forwardRef<Text, SelectValueProps>(({ className, style, ...props }, ref) => {
-  const { size } = useSelectStyleContext();
+const SelectValue = forwardRef<Text, SelectValueProps>(
+  ({ asChild, className, style, placeholder, children, ...props }, ref) => {
+    const { size } = useSelectStyleContext();
+    const { value, items, invalid } = useSelectContext();
+
+    const hasValue = value !== undefined && value !== '';
+    const showPlaceholder = !hasValue;
+    const displayText = hasValue ? items.find((item) => item.value === value)?.label : placeholder;
 
-  const computedClassName = cn(selectValueVariants({ size }), className);
+    const computedClassName = cn(selectValueVariants({ size }), className);
+    const Comp = asChild ? Slot : Text;
 
-  return <SelectPrimitive.Value ref={ref} className={computedClassName} style={style} {...props} />;
-});
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'select-value',
+            placeholder: showPlaceholder,
+            invalid,
+          }),
+        )}
+      >
+        {children ?? displayText}
+      </Comp>
+    );
+  },
+);
 
 SelectValue.displayName = 'Select.Value';
 
 // =============================================================================
-// STYLED ICON COMPONENT
+// STYLED ICON (styled-only, reads context for state=open / invalid)
 // =============================================================================
 
-export interface SelectIconProps extends Omit<IconProps, 'children'> {}
+export interface SelectIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set, in which
+   * case the consumer's substituted element is rendered instead.
+   */
+  as?: IconProps['as'];
+  /**
+   * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
+   * CVA uses this attribute to apply leading/trailing padding logically (RTL-aware).
+   * Omit to apply the symmetric baseline gap.
+   */
+  position?: IconSlotPosition;
+}
 
-const SelectIcon = ({ className, style, ...props }: SelectIconProps) => {
+const SelectIcon = ({ asChild, className, style, as, position, ...props }: SelectIconProps) => {
   const { size } = useSelectStyleContext();
+  const { invalid } = useSelectContext();
 
   const computedClassName = cn(selectIconVariants({ size }), className);
 
-  return <Icon className={computedClassName} style={style} {...props} />;
+  const slotData = mergeDataAttributes(
+    props,
+    dataAttributes({ slot: 'select-icon', invalid }),
+    positionToDataIcon(position),
+  );
+
+  if (asChild) {
+    return <Slot className={computedClassName} style={style} {...props} {...slotData} />;
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} {...slotData} />;
 };
 
 SelectIcon.displayName = 'Select.Icon';
 
 // =============================================================================
-// STYLED CONTENT COMPONENT
+// STYLED CONTENT — composes Menu surface (listbox semantics stay on primitive)
 // =============================================================================
 
 export interface SelectContentProps extends ViewProps, ISelectContentProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const SelectContent = forwardRef<View, SelectContentProps>(
-  ({ className, style, ...props }, ref) => {
-    const computedClassName = cn(selectContentVariants(), className);
+  ({ asChild, className, style, children, ...props }, ref) => {
+    if (asChild) {
+      return (
+        <SelectContentPrimitive
+          ref={ref}
+          asChild
+          className={className}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
+        >
+          {children}
+        </SelectContentPrimitive>
+      );
+    }
 
     return (
-      <SelectPrimitive.Content ref={ref} className={computedClassName} style={style} {...props} />
+      <SelectContentPrimitive
+        ref={ref}
+        asChild
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
+      >
+        <Menu.Content asSurface scrollable className={className}>
+          {children}
+        </Menu.Content>
+      </SelectContentPrimitive>
     );
   },
 );
@@ -146,24 +279,59 @@ const SelectContent = forwardRef<View, SelectContentProps>(
 SelectContent.displayName = 'Select.Content';
 
 // =============================================================================
-// STYLED ITEM COMPONENT
+// STYLED ITEM — composes Menu item visuals (option semantics stay on primitive)
 // =============================================================================
 
 export interface SelectItemProps extends ISelectItemProps {
+  asChild?: boolean;
+  /**
+   * Replaces the default selected-item checkmark. The replacement is rendered
+   * only while the item is selected. Pass `null` to suppress the indicator.
+   */
+  indicator?: ReactNode;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectItem = forwardRef<View, SelectItemProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, indicator, className, children, style, value: itemValue, ...props }, ref) => {
     const { size } = useSelectStyleContext();
-
-    const computedClassName = cn(selectItemVariants({ size }), className);
+    const { value: selectedValue } = useSelectContext();
+    const menuSize = toMenuItemSize(size);
+    const checked = selectedValue === itemValue;
+
+    const computedClassName = cn(menuItemVariants({ size: menuSize }), className);
+    const selectedIndicator =
+      indicator === undefined ? (
+        <Menu.ItemIndicator isChecked={checked} />
+      ) : checked ? (
+        indicator
+      ) : null;
+    const itemChildren = asChild ? (
+      isValidElement<{ children?: ReactNode }>(children) ? (
+        cloneElement(children, undefined, children.props.children, selectedIndicator)
+      ) : (
+        children
+      )
+    ) : (
+      <>
+        {children}
+        {selectedIndicator}
+      </>
+    );
 
     return (
-      <SelectPrimitive.Item ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </SelectPrimitive.Item>
+      <SelectItemPrimitive
+        ref={ref}
+        asChild={asChild}
+        value={itemValue}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-item' }))}
+      >
+        {itemChildren}
+      </SelectItemPrimitive>
     );
   },
 );
@@ -171,21 +339,39 @@ const SelectItem = forwardRef<View, SelectItemProps>(
 SelectItem.displayName = 'Select.Item';
 
 // =============================================================================
-// STYLED ITEM LABEL COMPONENT
+// STYLED ITEM LABEL — composes Menu.ItemLabel
 // =============================================================================
 
 export interface SelectItemLabelProps extends TextProps, ISelectItemLabelProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const SelectItemLabel = forwardRef<Text, SelectItemLabelProps>(
-  ({ className, style, ...props }, ref) => {
+  ({ asChild, className, style, children, ...props }, ref) => {
     const { size } = useSelectStyleContext();
-
-    const computedClassName = cn(selectItemLabelVariants({ size }), className);
+    const { checked } = useSelectItemContext();
+    const menuSize = toMenuItemSize(size);
 
     return (
-      <SelectPrimitive.ItemLabel ref={ref} className={computedClassName} style={style} {...props} />
+      <Menu.ItemLabel
+        ref={ref}
+        asChild={asChild}
+        isChecked={checked}
+        size={menuSize}
+        className={cn(menuItemLabelVariants({ size: menuSize }), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          dataAttributes({
+            slot: 'select-item-label',
+            state: checked ? 'checked' : 'unchecked',
+          }),
+          props,
+        )}
+      >
+        {children}
+      </Menu.ItemLabel>
     );
   },
 );

package/src/components/Select/styles.ts

@@ -1,44 +1,42 @@
-import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_MUTED,
-  COLOR_TEXT_PRIMARY,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  RADIUS_SM,
-  RADIUS_MD,
-  SHADOW_SM,
-  SHADOW_MD,
-  SIZE_SCALE,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 // ── Trigger ─────────────────────────────────────────────────
 
 export const selectTriggerVariants = cva(
   [
     'flex w-full min-w-0 flex-row items-center justify-between text-start',
-    RADIUS_SM,
-    SHADOW_SM,
+    'bg-surface-primary',
+    'border border-stroke-primary',
+    'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
-    COLOR_BG_PRIMARY,
-    `border ${COLOR_BORDER_DEFAULT}`,
-    DISABLED_OPACITY,
+    'data-[disabled=true]:bg-surface-secondary',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
-    'data-[state=open]:border-slate-900',
-    'data-[invalid=true]:border-red-500',
-    'data-[readonly=true]:bg-slate-50',
-    Platform.select({
-      default: 'data-[active=true]:border-slate-300',
-      web: [
-        'data-[hover=true]:border-slate-300 data-[active=true]:data-[hover=true]:border-slate-400',
-        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
-        'data-[state=open]:ring-2 data-[state=open]:ring-slate-400/50',
-      ].join(' '),
-    }),
+    'data-[readonly=true]:bg-surface-secondary',
+    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    // Web: inset ring avoids a border-width change so no padding compensation is needed.
+    // Recolor the border to match the ring so the two read as a single focus outline
+    // instead of a gray border + colored ring.
+    'web:data-[focus=true]:ring-inset',
+    'web:data-[focus=true]:ring-[length:var(--border-width-focused)]',
+    'web:data-[focus=true]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[focus=true]:data-[invalid=false]:border-stroke-action',
+    'web:data-[focus=true]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    'web:data-[state=open]:ring-inset',
+    'web:data-[state=open]:ring-[length:var(--border-width-focused)]',
+    'web:data-[state=open]:data-[invalid=false]:ring-stroke-action',
+    'web:data-[state=open]:data-[invalid=false]:border-stroke-action',
+    'web:data-[state=open]:data-[invalid=true]:ring-stroke-danger',
+    'web:data-[state=open]:data-[invalid=true]:border-stroke-danger',
+    // Native: thicker border; size variants below compensate the layout shift.
+    'native:data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'native:data-[field-state=focused]:border-stroke-action',
+    'native:data-[field-state=focused-invalid]:border-stroke-danger',
+    'native:data-[state=open]:border-[length:var(--border-width-focused)]',
+    'data-[invalid=true]:border-stroke-danger',
   ],
   {
     variants: {
@@ -46,8 +44,21 @@ export const selectTriggerVariants = cva(
         outline: [],
       },
       size: {
-        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} ${SIZE_SCALE.default.gap}`,
-        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} ${SIZE_SCALE.small.gap}`,
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          // Native only: subtract one hairline so the wider focus border doesn't shift layout.
+          'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'native:data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
+        small: [
+          'h-8 min-h-8 px-3 py-2 gap-1.5',
+          'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+          'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'native:data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+        ],
       },
     },
     defaultVariants: {
@@ -62,15 +73,15 @@ export const selectTriggerVariants = cva(
 export const selectValueVariants = cva(
   [
     'min-w-0 flex-1 text-start',
-    'data-[placeholder=true]:text-slate-400',
-    'data-[invalid=true]:text-red-600',
-    COLOR_TEXT_PRIMARY,
+    'text-content-primary',
+    'data-[placeholder=true]:text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
   ],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {
@@ -84,72 +95,14 @@ export const selectValueVariants = cva(
 export const selectIconVariants = cva(
   [
     'shrink-0 items-center justify-center self-center',
-    COLOR_TEXT_MUTED,
-    'data-[invalid=true]:text-red-500',
+    'text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
   ],
   {
     variants: {
       size: {
-        default: 'h-5 w-5',
-        small: 'h-4 w-4',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
-
-// ── Content ─────────────────────────────────────────────────
-
-export const selectContentVariants = cva([
-  COLOR_BG_PRIMARY,
-  `border ${COLOR_BORDER_DEFAULT}`,
-  'overflow-hidden',
-  RADIUS_MD,
-  Platform.select({
-    web: SHADOW_MD,
-    default: '',
-  }),
-  'max-h-60',
-  'py-1',
-]);
-
-// ── Item ────────────────────────────────────────────────────
-
-export const selectItemVariants = cva(
-  [
-    'flex-row items-center',
-    'transition-colors duration-100',
-    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[state=checked]:bg-slate-50 data-[state=checked]:font-medium',
-    Platform.select({
-      default: 'data-[active=true]:bg-slate-100',
-      web: 'data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:bg-slate-100 data-[highlighted=true]:bg-slate-50',
-    }),
-  ],
-  {
-    variants: {
-      size: {
-        default: 'px-3 py-2',
-        small: 'px-2.5 py-1.5',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
-
-// ── ItemLabel ───────────────────────────────────────────────
-
-export const selectItemLabelVariants = cva(
-  [COLOR_TEXT_PRIMARY, 'data-[state=checked]:font-medium'],
-  {
-    variants: {
-      size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'size-5',
+        small: 'size-4',
       },
     },
     defaultVariants: {

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, useEffect } from 'react';
+import { type ViewProps } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '@cdx-ui/utils';
+import { skeletonVariants } from './styles';
+
+export interface SkeletonProps extends ViewProps {
+  className?: string;
+  /** Pulse animation duration in milliseconds. @default 1000 */
+  duration?: number;
+}
+
+export const Skeleton = forwardRef<Animated.View, SkeletonProps>(
+  ({ className, style, duration = 1000, ...props }, ref) => {
+    const opacity = useSharedValue(1);
+
+    useEffect(() => {
+      opacity.set(
+        withRepeat(withTiming(0.35, { duration, easing: Easing.inOut(Easing.ease) }), -1, true),
+      );
+    }, [duration, opacity]);
+
+    // Explicit deps for Vite/web without the Reanimated Babel plugin.
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.get() }), [opacity]);
+
+    return (
+      <Animated.View
+        ref={ref}
+        className={cn(skeletonVariants(), className)}
+        style={[animatedStyle, style]}
+        {...props}
+      />
+    );
+  },
+);
+
+Skeleton.displayName = 'Skeleton';

package/src/components/Skeleton/styles.ts

@@ -0,0 +1,5 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const skeletonVariants = cva(['bg-surface-neutral-subtle', 'rounded-md']);
+
+export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;