@cdx-ui/components 0.0.1-beta.15 → 0.0.1-beta.151

package/src/components/ScopedTheme/index.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import { ScopedTheme as UniwindScopedTheme } from 'uniwind';
+
+export type ScopedThemeProps = ComponentProps<typeof UniwindScopedTheme>;
+
+/**
+ * Forces a specific theme on a component subtree, regardless of the application's
+ * global theme. Useful for marketing heroes, embedded widgets, or preview surfaces
+ * that must render in a fixed mode.
+ *
+ * Wraps Uniwind's `ScopedTheme` to keep `uniwind` an internal implementation detail.
+ *
+ * Web requires `@custom-variant dark (&:where(.dark, .dark *));` in the consuming
+ * app's `global.css`. See the Storybook story (`Theming/ScopedTheme`) for the full
+ * mechanism, light-vs-dark asymmetry, and dynamic-switch caveat.
+ */
+export const ScopedTheme = (props: ScopedThemeProps) => <UniwindScopedTheme {...props} />;

package/src/components/ScrollShadow/index.tsx

@@ -0,0 +1,119 @@
+import { Children, cloneElement, isValidElement, type ReactNode } from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  scrollShadowContainerVariants,
+  scrollShadowOverlayVariants,
+  scrollShadowVariants,
+  type ScrollShadowVariantProps,
+} from './styles';
+import { useScrollShadow, type ScrollShadowCapability } from './useScrollShadow';
+
+export type { ScrollShadowCapability };
+
+export interface ScrollShadowProps extends ScrollShadowVariantProps {
+  children: ReactNode;
+  className?: string;
+  /**
+   * Tailwind `from-*` utility for edge overlays — match the surface behind the scroll area.
+   * Pair with a low opacity (e.g. `from-surface-secondary/40`) for a light fade.
+   * @default 'from-background/35'
+   */
+  fadeFromClassName?: string;
+  /**
+   * Shadow fade size in pixels.
+   * @default 64
+   */
+  size?: number;
+  /**
+   * Scroll offset before showing edge shadows.
+   * @default 0
+   */
+  offset?: number;
+  onCapabilityChange?: (capability: ScrollShadowCapability) => void;
+  style?: ViewStyle;
+}
+
+interface ScrollShadowChildProps {
+  className?: string;
+  style?: ViewStyle;
+  onLayout?: (event: Parameters<ReturnType<typeof useScrollShadow>['handleLayout']>[0]) => void;
+  onContentSizeChange?: (width: number, height: number) => void;
+  onScroll?: (event: Parameters<ReturnType<typeof useScrollShadow>['handleScroll']>[0]) => void;
+  ref?: React.Ref<unknown>;
+}
+
+export function ScrollShadow({
+  children,
+  className,
+  fadeFromClassName = 'from-background/35',
+  hideScrollBar = false,
+  orientation = 'horizontal',
+  offset = 0,
+  onCapabilityChange,
+  size = 64,
+  style,
+}: ScrollShadowProps) {
+  const resolvedOrientation = orientation ?? 'horizontal';
+  const child = Children.only(children);
+
+  if (!isValidElement<ScrollShadowChildProps>(child)) {
+    throw new Error('ScrollShadow expects a single React element child.');
+  }
+
+  const { capability, handleContentSizeChange, handleLayout, handleScroll } = useScrollShadow({
+    offset,
+    onCapabilityChange,
+    orientation: resolvedOrientation,
+  });
+
+  const overlayFade = cn(fadeFromClassName, 'to-transparent');
+  const overlayAxisSize = resolvedOrientation === 'horizontal' ? { width: size } : { height: size };
+
+  return (
+    <View className={cn(scrollShadowContainerVariants(), className)} style={style}>
+      {cloneElement(child, {
+        className: cn(scrollShadowVariants({ hideScrollBar }), child.props.className),
+        onContentSizeChange: (width: number, height: number) => {
+          handleContentSizeChange(width, height);
+          child.props.onContentSizeChange?.(width, height);
+        },
+        onLayout: (event) => {
+          handleLayout(event);
+          child.props.onLayout?.(event);
+        },
+        onScroll: (event) => {
+          handleScroll(event);
+          child.props.onScroll?.(event);
+        },
+        style: StyleSheet.flatten([child.props.style]),
+      })}
+      {capability.canScrollBefore ? (
+        <View
+          pointerEvents="none"
+          className={cn(
+            scrollShadowOverlayVariants({
+              orientation: resolvedOrientation,
+              edge: 'start',
+            }),
+            overlayFade,
+          )}
+          style={overlayAxisSize}
+        />
+      ) : null}
+      {capability.canScrollAfter ? (
+        <View
+          pointerEvents="none"
+          className={cn(
+            scrollShadowOverlayVariants({
+              orientation: resolvedOrientation,
+              edge: 'end',
+            }),
+            overlayFade,
+          )}
+          style={overlayAxisSize}
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/components/ScrollShadow/styles.ts

@@ -0,0 +1,57 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const scrollShadowVariants = cva([], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+    hideScrollBar: {
+      true: 'web:[scrollbar-width:none] web:[&::-webkit-scrollbar]:hidden',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    hideScrollBar: false,
+  },
+});
+
+export const scrollShadowContainerVariants = cva('relative min-w-0 w-full');
+
+export const scrollShadowOverlayVariants = cva('pointer-events-none absolute z-10', {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+    edge: {
+      start: '',
+      end: '',
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: 'horizontal',
+      edge: 'start',
+      className: 'left-0 top-0 bottom-0 bg-gradient-to-r',
+    },
+    {
+      orientation: 'horizontal',
+      edge: 'end',
+      className: 'right-0 top-0 bottom-0 bg-gradient-to-l',
+    },
+    {
+      orientation: 'vertical',
+      edge: 'start',
+      className: 'left-0 right-0 top-0 bg-gradient-to-b',
+    },
+    {
+      orientation: 'vertical',
+      edge: 'end',
+      className: 'left-0 right-0 bottom-0 bg-gradient-to-t',
+    },
+  ],
+});
+
+export type ScrollShadowVariantProps = VariantProps<typeof scrollShadowVariants>;

package/src/components/ScrollShadow/useScrollShadow.ts

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+
+export interface ScrollShadowCapability {
+  canScrollBefore: boolean;
+  canScrollAfter: boolean;
+}
+
+export interface UseScrollShadowOptions {
+  orientation?: 'horizontal' | 'vertical';
+  offset?: number;
+  onCapabilityChange?: (capability: ScrollShadowCapability) => void;
+}
+
+interface ScrollMetrics {
+  scrollOffset: number;
+  viewportSize: number;
+  contentSize: number;
+}
+
+const INITIAL_METRICS: ScrollMetrics = {
+  scrollOffset: 0,
+  viewportSize: 0,
+  contentSize: 0,
+};
+
+function getScrollCapability(metrics: ScrollMetrics, offset: number): ScrollShadowCapability {
+  const { scrollOffset, viewportSize, contentSize } = metrics;
+
+  if (viewportSize <= 0 || contentSize <= viewportSize) {
+    return { canScrollBefore: false, canScrollAfter: false };
+  }
+
+  return {
+    canScrollBefore: scrollOffset > offset,
+    canScrollAfter: scrollOffset + viewportSize + offset < contentSize,
+  };
+}
+
+export function useScrollShadow({
+  orientation = 'horizontal',
+  offset = 0,
+  onCapabilityChange,
+}: UseScrollShadowOptions = {}) {
+  const metricsRef = useRef<ScrollMetrics>(INITIAL_METRICS);
+  const [capability, setCapability] = useState<ScrollShadowCapability>({
+    canScrollBefore: false,
+    canScrollAfter: false,
+  });
+
+  const updateCapability = useCallback(() => {
+    const nextCapability = getScrollCapability(metricsRef.current, offset);
+
+    setCapability((prev) => {
+      if (
+        prev.canScrollBefore === nextCapability.canScrollBefore &&
+        prev.canScrollAfter === nextCapability.canScrollAfter
+      ) {
+        return prev;
+      }
+
+      onCapabilityChange?.(nextCapability);
+      return nextCapability;
+    });
+  }, [offset, onCapabilityChange]);
+
+  useEffect(() => {
+    updateCapability();
+  }, [updateCapability]);
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width, height } = event.nativeEvent.layout;
+      metricsRef.current.viewportSize = orientation === 'vertical' ? height : width;
+      updateCapability();
+    },
+    [orientation, updateCapability],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (width: number, height: number) => {
+      metricsRef.current.contentSize = orientation === 'vertical' ? height : width;
+      updateCapability();
+    },
+    [orientation, updateCapability],
+  );
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+
+      metricsRef.current.scrollOffset =
+        orientation === 'vertical' ? contentOffset.y : contentOffset.x;
+      metricsRef.current.viewportSize =
+        orientation === 'vertical' ? layoutMeasurement.height : layoutMeasurement.width;
+      metricsRef.current.contentSize =
+        orientation === 'vertical' ? contentSize.height : contentSize.width;
+
+      updateCapability();
+    },
+    [orientation, updateCapability],
+  );
+
+  return {
+    capability,
+    handleLayout,
+    handleContentSizeChange,
+    handleScroll,
+  };
+}

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 { forwardRef, 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,9 +18,9 @@ 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 { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   type SelectVariantProps,
   selectContentVariants,
@@ -25,22 +33,10 @@ import {
 
 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,
-});
-
 // =============================================================================
-// STYLED ROOT COMPONENT
+// STYLED ROOT
 // =============================================================================
 
 export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps {
@@ -49,16 +45,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 +67,57 @@ 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;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectTrigger = forwardRef<View, SelectTriggerProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, 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);
 
     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 ? (
+          children
+        ) : (
+          <>
+            {children}
+            <SelectIcon as={open ? KeyboardArrowUp : KeyboardArrowDown} />
+          </>
+        )}
+      </SelectTriggerPrimitive>
     );
   },
 );
@@ -92,53 +125,115 @@ 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 computedClassName = cn(selectValueVariants({ size }), className);
+    const hasValue = value !== undefined && value !== '';
+    const showPlaceholder = !hasValue;
+    const displayText = hasValue ? items.find((item) => item.value === value)?.label : placeholder;
 
-  return <SelectPrimitive.Value ref={ref} className={computedClassName} style={style} {...props} />;
-});
+    const computedClassName = cn(selectValueVariants({ size }), className);
+    const Comp = asChild ? Slot : Text;
+
+    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
 // =============================================================================
 
 export interface SelectContentProps extends ViewProps, ISelectContentProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const SelectContent = forwardRef<View, SelectContentProps>(
-  ({ className, style, ...props }, ref) => {
+  ({ asChild, className, style, ...props }, ref) => {
     const computedClassName = cn(selectContentVariants(), className);
 
     return (
-      <SelectPrimitive.Content ref={ref} className={computedClassName} style={style} {...props} />
+      <SelectContentPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
+      />
     );
   },
 );
@@ -146,24 +241,32 @@ const SelectContent = forwardRef<View, SelectContentProps>(
 SelectContent.displayName = 'Select.Content';
 
 // =============================================================================
-// STYLED ITEM COMPONENT
+// STYLED ITEM
 // =============================================================================
 
 export interface SelectItemProps extends ISelectItemProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectItem = forwardRef<View, SelectItemProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { size } = useSelectStyleContext();
 
     const computedClassName = cn(selectItemVariants({ size }), className);
 
     return (
-      <SelectPrimitive.Item ref={ref} className={computedClassName} style={style} {...props}>
+      <SelectItemPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-item' }))}
+      >
         {children}
-      </SelectPrimitive.Item>
+      </SelectItemPrimitive>
     );
   },
 );
@@ -171,21 +274,38 @@ const SelectItem = forwardRef<View, SelectItemProps>(
 SelectItem.displayName = 'Select.Item';
 
 // =============================================================================
-// STYLED ITEM LABEL COMPONENT
+// STYLED ITEM LABEL (styled-only, reads item context for checked state)
 // =============================================================================
 
 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 { checked } = useSelectItemContext();
 
     const computedClassName = cn(selectItemLabelVariants({ size }), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <SelectPrimitive.ItemLabel ref={ref} className={computedClassName} style={style} {...props} />
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'select-item-label',
+            state: checked ? 'checked' : 'unchecked',
+          }),
+        )}
+      >
+        {children}
+      </Comp>
     );
   },
 );