@cdx-ui/components 0.2.2 → 0.2.4

package/src/components/ScrollShadow/useScrollShadow.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform } from 'react-native';
 import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
 export interface ScrollShadowCapability {
@@ -9,9 +10,26 @@ export interface ScrollShadowCapability {
 export interface UseScrollShadowOptions {
   orientation?: 'horizontal' | 'vertical';
   offset?: number;
+  enabled?: boolean;
   onCapabilityChange?: (capability: ScrollShadowCapability) => void;
 }
 
+export interface UseScrollShadowReturn {
+  capability: ScrollShadowCapability;
+  handleLayout: (event: LayoutChangeEvent) => void;
+  handleContentSizeChange: (width: number, height: number) => void;
+  handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+}
+
+export interface ScrollShadowDistance {
+  before: number;
+  after: number;
+}
+
+interface ScrollShadowTrackerOptions extends UseScrollShadowOptions {
+  onDistanceChange?: (distance: ScrollShadowDistance) => void;
+}
+
 interface ScrollMetrics {
   scrollOffset: number;
   viewportSize: number;
@@ -24,6 +42,20 @@ const INITIAL_METRICS: ScrollMetrics = {
   contentSize: 0,
 };
 
+export function normalizeAxisScrollOffset(
+  rawOffset: number,
+  orientation: 'horizontal' | 'vertical',
+  maxOffset: number,
+  platform: typeof Platform.OS = Platform.OS,
+): number {
+  // Web RTL reports a negative x and browsers do not rubber-band it. Native RTL
+  // stays positive, so a negative native offset is overscroll at the start edge.
+  const offset =
+    orientation === 'horizontal' && platform === 'web' ? Math.abs(rawOffset) : rawOffset;
+
+  return Math.min(Math.max(0, offset), Math.max(0, maxOffset));
+}
+
 function getScrollCapability(metrics: ScrollMetrics, offset: number): ScrollShadowCapability {
   const { scrollOffset, viewportSize, contentSize } = metrics;
 
@@ -37,18 +69,42 @@ function getScrollCapability(metrics: ScrollMetrics, offset: number): ScrollShad
   };
 }
 
-export function useScrollShadow({
-  orientation = 'horizontal',
+function getScrollDistance(metrics: ScrollMetrics, offset: number): ScrollShadowDistance {
+  const { scrollOffset, viewportSize, contentSize } = metrics;
+
+  if (viewportSize <= 0 || contentSize <= viewportSize) {
+    return { before: 0, after: 0 };
+  }
+
+  return {
+    before: Math.max(0, scrollOffset - offset),
+    after: Math.max(0, contentSize - viewportSize - scrollOffset - offset),
+  };
+}
+
+export function useScrollShadow(options: UseScrollShadowOptions = {}): UseScrollShadowReturn {
+  return useScrollShadowTracker(options);
+}
+
+export function useScrollShadowTracker({
+  orientation = 'vertical',
   offset = 0,
+  enabled = true,
   onCapabilityChange,
-}: UseScrollShadowOptions = {}) {
-  const metricsRef = useRef<ScrollMetrics>(INITIAL_METRICS);
+  onDistanceChange,
+}: ScrollShadowTrackerOptions = {}): UseScrollShadowReturn {
+  const metricsRef = useRef<ScrollMetrics>({ ...INITIAL_METRICS });
   const [capability, setCapability] = useState<ScrollShadowCapability>({
     canScrollBefore: false,
     canScrollAfter: false,
   });
 
   const updateCapability = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+
+    onDistanceChange?.(getScrollDistance(metricsRef.current, offset));
     const nextCapability = getScrollCapability(metricsRef.current, offset);
 
     setCapability((prev) => {
@@ -62,7 +118,7 @@ export function useScrollShadow({
       onCapabilityChange?.(nextCapability);
       return nextCapability;
     });
-  }, [offset, onCapabilityChange]);
+  }, [enabled, offset, onCapabilityChange, onDistanceChange]);
 
   useEffect(() => {
     updateCapability();
@@ -88,13 +144,19 @@ export function useScrollShadow({
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+      const rawOffset = orientation === 'vertical' ? contentOffset.y : contentOffset.x;
 
-      metricsRef.current.scrollOffset =
-        orientation === 'vertical' ? contentOffset.y : contentOffset.x;
-      metricsRef.current.viewportSize =
+      const viewportSize =
         orientation === 'vertical' ? layoutMeasurement.height : layoutMeasurement.width;
-      metricsRef.current.contentSize =
-        orientation === 'vertical' ? contentSize.height : contentSize.width;
+      const axisContentSize = orientation === 'vertical' ? contentSize.height : contentSize.width;
+
+      metricsRef.current.scrollOffset = normalizeAxisScrollOffset(
+        rawOffset,
+        orientation,
+        axisContentSize - viewportSize,
+      );
+      metricsRef.current.viewportSize = viewportSize;
+      metricsRef.current.contentSize = axisContentSize;
 
       updateCapability();
     },

package/src/components/Skeleton/index.tsx

@@ -11,7 +11,10 @@ import { cn } from '@cdx-ui/utils';
 import { skeletonVariants } from './styles';
 
 export interface SkeletonProps extends ViewProps {
+  /** Size and shape classes for the placeholder, such as `h-4 w-32 rounded-md`. */
   className?: string;
+  /** Optional content to render inside the placeholder. */
+  children?: ViewProps['children'];
   /**
    * Half-cycle of the opacity pulse (`1` → `0.35`) in milliseconds.
    * A full pulse takes `duration × 2`.

package/src/components/TablePagination/index.tsx

@@ -26,57 +26,111 @@ export type { TablePaginationItemToken } from './getTablePaginationItems';
 export type TablePaginationPageSizeOption = number | { value: number; label: string };
 
 export interface TablePaginationProps extends ViewProps {
+  /** Render the consumer's child element in place of the default container. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the container's own styles. */
   className?: string;
+  /** Custom layout of pagination parts. Omit to render the status, controls and generated page items. */
   children?: ReactNode;
   /** 1-based current page. Controlled when set. */
   page?: number;
+  /**
+   * Initial 1-based page when uncontrolled.
+   * @default 1
+   */
   defaultPage?: number;
   /** Total page count. When set with no children, items are generated. */
   count?: number;
+  /** Called with the new 1-based page when the user changes page. */
   onPageChange?: (page: number) => void;
+  /**
+   * Number of page items shown on each side of the current page before an ellipsis.
+   * @default 1
+   */
   siblingCount?: number;
+  /** Current rows-per-page value. When set with no children, the page-size select is rendered. */
   pageSize?: number;
+  /**
+   * Choices offered by `TablePagination.PageSize`, as numbers or `{ value, label }` pairs.
+   * @default [25, 50, 100]
+   */
   pageSizeOptions?: readonly TablePaginationPageSizeOption[];
+  /** Called with the new rows-per-page value when the user picks one. */
   onPageSizeChange?: (pageSize: number) => void;
+  /**
+   * Disables every control in the pagination.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Accessible name for the pagination.
+   * @default 'Table pagination'
+   */
   'aria-label'?: string;
 }
 
 export interface TablePaginationItemProps extends ViewProps {
+  /** Render the consumer's child element in place of the default page button. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the item's own styles. */
   className?: string;
+  /** The page number or label to display. */
   children?: ReactNode;
+  /** 1-based page this item navigates to when pressed. */
   page?: number;
+  /**
+   * Marks the item as the current page. Set automatically when `page` matches the current page.
+   * @default false
+   */
   current?: boolean;
+  /** Disables the item. Defaults to the pagination's `disabled`. */
   disabled?: boolean;
+  /** Called on press, before the pagination navigates to `page`. */
   onPress?: PressableProps['onPress'];
 }
 
 export interface TablePaginationControlProps extends ViewProps {
+  /** Render the consumer's child element in place of the default icon button. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the control's own styles. */
   className?: string;
+  /** The element to render when `asChild` is set. */
   children?: ReactNode;
+  /** Disables the control. It is also disabled at the first or last page, or when the pagination is disabled. */
   disabled?: boolean;
+  /** Called on press, before the pagination moves to the adjacent page. */
   onPress?: PressableProps['onPress'];
 }
 
 export interface TablePaginationEllipsisProps extends ViewProps {
+  /** Render the consumer's child element in place of the default `View` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the ellipsis's own styles. */
   className?: string;
+  /** Custom content in place of the default `…`. */
   children?: ReactNode;
 }
 
 export interface TablePaginationStatusProps extends ViewProps {
+  /** Render the consumer's child element in place of the default `View` host. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the status's own styles. */
   className?: string;
+  /** Custom status content in place of the default "Page N of M" text. */
   children?: ReactNode;
 }
 
 export interface TablePaginationPageSizeProps extends ViewProps {
+  /** Render the consumer's child element in place of the default select. */
   asChild?: boolean;
+  /** Additional Uniwind/Tailwind classes, merged after the select's own styles. */
   className?: string;
+  /** The element to render when `asChild` is set. */
   children?: ReactNode;
+  /**
+   * Accessible name for the page-size select.
+   * @default 'Rows per page'
+   */
   'aria-label'?: string;
 }
 

package/src/components/Tabs/index.tsx

@@ -58,8 +58,6 @@ import {
   tabsTabLabelVariants,
   tabsTabVariants,
   TABS_INDICATOR_TRANSITION_MS,
-  TABS_SOLID_SCROLL_FADE_SIZE,
-  TABS_SCROLL_FADE_SIZE,
   OUTLINE_INDICATOR_THICKNESS,
   type TabsVariant,
 } from './styles';
@@ -178,7 +176,6 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
     const { value, orientation, getTabs } = useTabsContext();
     const { variant } = useTabsVariantContext();
     const isHorizontalScroll = orientation === 'horizontal' && scrollable;
-    const isWebHorizontalScroll = isHorizontalScroll && Platform.OS === 'web';
     const shouldAutoScrollActiveTab = isHorizontalScroll && Platform.OS !== 'web';
 
     const layoutsRef = useRef<Map<string, TabLayout>>(new Map());
@@ -478,23 +475,26 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
       );
     };
 
-    const solidWebHorizontalScroll = (
+    const horizontalScroll = (
+      <ScrollShadow
+        hideScrollBar={Platform.OS === 'web'}
+        orientation="horizontal"
+        surface={isSolidHorizontalScroll ? 'secondary' : 'background'}
+        size={isSolidHorizontalScroll ? 'default' : 'small'}
+        edgeClassName={isSolidHorizontalScroll ? undefined : 'opacity-85'}
+        onCapabilityChange={setScrollCapability}
+      >
+        {horizontalScrollView}
+      </ScrollShadow>
+    );
+
+    const webHorizontalScroll = isSolidHorizontalScroll ? (
       <View className="relative min-w-0 w-full">
-        <ScrollShadow
-          hideScrollBar
-          orientation="horizontal"
-          size={TABS_SOLID_SCROLL_FADE_SIZE}
-          fadeFromClassName="from-surface-secondary"
-          onCapabilityChange={setScrollCapability}
-        >
-          {horizontalScrollView}
-        </ScrollShadow>
+        {horizontalScroll}
         {renderSolidScrollChevron('start', -1)}
         {renderSolidScrollChevron('end', 1)}
       </View>
-    );
-
-    const outlineWebHorizontalScroll = (
+    ) : (
       <View className="w-full min-w-0 flex-row items-stretch">
         {scrollCapability.canScrollBefore ? (
           <Pressable
@@ -507,17 +507,7 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
             <Icon as={ChevronLeft} className="size-4 text-content-secondary" />
           </Pressable>
         ) : null}
-        <View className="min-w-0 flex-1">
-          <ScrollShadow
-            hideScrollBar
-            orientation="horizontal"
-            size={TABS_SCROLL_FADE_SIZE}
-            fadeFromClassName="from-background/85"
-            onCapabilityChange={setScrollCapability}
-          >
-            {horizontalScrollView}
-          </ScrollShadow>
-        </View>
+        <View className="min-w-0 flex-1">{horizontalScroll}</View>
         {scrollCapability.canScrollAfter ? (
           <Pressable
             accessibilityLabel="Scroll tabs right"
@@ -542,14 +532,14 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
           {...props}
           {...mergeDataAttributes(props, dataAttributes({ slot: 'tabs-list' }))}
         >
-          {isWebHorizontalScroll ? (
-            <View className={cn(tabsListScrollContainerVariants())}>
-              {wrapSolidScrollShell(
-                isSolidHorizontalScroll ? solidWebHorizontalScroll : outlineWebHorizontalScroll,
-              )}
-            </View>
-          ) : isHorizontalScroll ? (
-            wrapSolidScrollShell(horizontalScrollView)
+          {isHorizontalScroll ? (
+            Platform.OS === 'web' ? (
+              <View className={cn(tabsListScrollContainerVariants())}>
+                {wrapSolidScrollShell(webHorizontalScroll)}
+              </View>
+            ) : (
+              wrapSolidScrollShell(horizontalScroll)
+            )
           ) : (
             listTrack
           )}

package/src/components/Tabs/styles.ts

@@ -37,15 +37,6 @@ export const OUTLINE_INDICATOR_THICKNESS = 2;
  */
 export const TABS_INDICATOR_TRANSITION_MS = 150;
 
-/** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
-export const TABS_SCROLL_FADE_SIZE = 32;
-
-/**
- * Solid horizontal scroll — wider fade so tabs dissolve smoothly into the track (and under the
- * overlay chevron) instead of ending in a hard clip at the scroll viewport edge.
- */
-export const TABS_SOLID_SCROLL_FADE_SIZE = 40;
-
 /**
  * Room reserved on the left/right sides inside the horizontal-scroll clip rect for ink that
  * paints past a tab's own box: `shadow-sm` (`0px 1px 3px`, solid only) and the web focus ring

package/src/components/Text/index.tsx

@@ -8,7 +8,7 @@ export type TextColor = NonNullable<TextVariantProps['color']>;
 export type TextSize = NonNullable<TextVariantProps['size']>;
 export type TextWeight = NonNullable<TextVariantProps['weight']>;
 
-export type TextProps = Omit<TextVariantProps, 'color' | 'size' | 'weight'> &
+export type TextProps = Omit<TextVariantProps, 'color' | 'size' | 'weight' | 'italic'> &
   ComponentPropsWithoutRef<typeof RNText> & {
     /**
      * Semantic content color, mapped to the matching `text-content-*` token.
@@ -27,7 +27,12 @@ export type TextProps = Omit<TextVariantProps, 'color' | 'size' | 'weight'> &
      * @default 'normal'
      */
     weight?: TextWeight;
+    /** Renders the text in italics. A nested `Text` inherits its parent's style when omitted. */
+    italic?: TextVariantProps['italic'];
+    /** Additional Uniwind/Tailwind classes, merged after the text's own styles. */
     className?: string;
+    /** Text content, which may include nested `Text` elements. */
+    children?: ComponentPropsWithoutRef<typeof RNText>['children'];
   };
 
 export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(

package/src/components/Tile/styles.ts

@@ -43,7 +43,10 @@ export const tileRootVariants = cva(
   {
     variants: {
       shape: {
-        flat: 'rounded-none border-0 bg-transparent',
+        flat: [
+          'rounded-none border-0 bg-transparent',
+          'data-[state=selected]:bg-surface-action-tint',
+        ].join(' '),
         card: [
           'rounded-[var(--border-radius-default)] border-1 border-solid',
           'border-stroke-secondary',

package/src/components/index.ts

@@ -52,6 +52,11 @@ export * from './ScrollShadow';
 export * from './Select';
 export * from './Slider';
 export * from './VirtualizedList';
+export type {
+  ReorderableListLabels,
+  ReorderableListProps,
+  ReorderableListRenderItemInfo,
+} from './ReorderableList/types';
 export * from './Switch';
 export * from './Tabs';
 export * from './Table';

package/src/reorderable-list.ts

@@ -0,0 +1 @@
+export * from './components/ReorderableList';