@cdx-ui/primitives 0.0.1-beta.65 → 0.0.1-beta.67

package/src/switch/useSwitch.ts

@@ -0,0 +1,75 @@
+import { useCallback, useRef } from 'react';
+import { useFocusRing } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { useToggleState } from '@react-stately/toggle';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { ISwitchProps, IUseSwitchReturn } from './types';
+
+/**
+ * Headless behavioral primitive for `Switch`.
+ *
+ * Owns the controlled/uncontrolled toggle state, ARIA `role="switch"` semantics
+ * (consumers must wire `aria-checked`/`accessibilityRole` to the host element they
+ * render), and interaction tracking (hover, focus-visible). Surfaces a
+ * platform-aware `dataAttrs` object so the styled layer can emit interaction-state
+ * `data-*` attributes (Standard 1) without re-implementing the toggle machinery.
+ *
+ * Standards mapping (per `.cursor/plans/primitive_design_standards_0d0ca4b1.plan.md`):
+ *   - Standard 3 #1 — controlled state via `useToggleState`.
+ *   - Standard 3 #2 — `role="switch"` semantics (consumer wires to host).
+ *
+ * The styled layer renders the host element (`RNSwitch` on native, a custom
+ * `Pressable` + `View` toggle on web) and is the sole owner of className/styling
+ * machinery — primitives never carry Uniwind className passthrough.
+ */
+export function useSwitch(props: ISwitchProps = {}): IUseSwitchReturn {
+  const { disabled, isDisabled, isChecked, isInvalid, defaultValue, value, onValueChange } = props;
+
+  const formControlContext = useFormControlContext();
+  const controlledValue = value ?? isChecked;
+
+  const state = useToggleState({
+    defaultSelected: defaultValue ?? false,
+    isSelected: controlledValue,
+    onChange: onValueChange,
+  });
+
+  const checked = controlledValue ?? state.isSelected;
+
+  const hostRef = useRef<unknown>(null);
+  const { isHovered, hoverProps } = useHover({}, hostRef);
+  const { isFocusVisible, focusProps } = useFocusRing() as {
+    isFocusVisible: boolean;
+    focusProps: { onFocus?: () => void; onBlur?: () => void };
+  };
+
+  const isDisabledResolved = Boolean(disabled || isDisabled || formControlContext.isDisabled);
+  const isInvalidResolved = Boolean(isInvalid || formControlContext.isInvalid);
+
+  const setChecked = useCallback(
+    (next: boolean) => {
+      state.setSelected(next);
+    },
+    [state],
+  );
+
+  return {
+    checked,
+    isDisabled: isDisabledResolved,
+    isInvalid: isInvalidResolved,
+    isHovered,
+    isFocusVisible,
+    setChecked,
+    hoverProps,
+    focusProps,
+    dataAttrs: dataAttributes({
+      hover: isHovered,
+      disabled: isDisabledResolved,
+      invalid: isInvalidResolved,
+      checked,
+      focusVisible: isFocusVisible,
+    }),
+    hostRef,
+  };
+}

package/src/tile/TileGroup.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { TileGroupContextProvider } from './context';
+import type { ITileGroupProps, TileGroupType } from './types';
+
+/**
+ * Internal widening of the public discriminated union: the runtime accepts any value
+ * shape and reads `type` to decide branch behavior. The public API stays narrow.
+ */
+type WidenedTileGroupProps = ViewProps & {
+  asChild?: boolean;
+  type: TileGroupType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  max?: number;
+  isDisabled?: boolean;
+  'aria-label'?: string;
+};
+
+export type TileGroupProps = ITileGroupProps;
+
+export const TileGroup = forwardRef<ComponentRef<typeof View>, TileGroupProps>((props, ref) => {
+  const {
+    asChild = false,
+    children,
+    type,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    max: maxProp,
+    isDisabled = false,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props as WidenedTileGroupProps;
+
+  const max = maxProp ?? Number.POSITIVE_INFINITY;
+
+  const defaultProp =
+    defaultValue !== undefined ? defaultValue : type === 'multiple' ? [] : undefined;
+
+  const [state, setState] = useControllableState<string | string[] | undefined>({
+    prop: valueProp,
+    defaultProp,
+    onChange: (next) => {
+      if (next !== undefined) {
+        onValueChange?.(next);
+      }
+    },
+  });
+
+  const isSelected = useCallback(
+    (tileValue: string) => {
+      if (type === 'single') {
+        return state === tileValue;
+      }
+      return Array.isArray(state) && state.includes(tileValue);
+    },
+    [type, state],
+  );
+
+  const isTileDisabledByGroup = useCallback(
+    (tileValue: string) => {
+      if (isDisabled) {
+        return true;
+      }
+      if (type !== 'multiple') {
+        return false;
+      }
+      const arr = Array.isArray(state) ? state : [];
+      if (arr.length < max) {
+        return false;
+      }
+      return !arr.includes(tileValue);
+    },
+    [isDisabled, type, state, max],
+  );
+
+  const toggleValue = useCallback(
+    (tileValue: string) => {
+      if (isDisabled) {
+        return;
+      }
+      if (type === 'single') {
+        if (state === tileValue) {
+          return;
+        }
+        setState(tileValue);
+        return;
+      }
+      const arr = Array.isArray(state) ? [...state] : [];
+      const idx = arr.indexOf(tileValue);
+      if (idx >= 0) {
+        arr.splice(idx, 1);
+        setState(arr);
+      } else if (arr.length < max) {
+        arr.push(tileValue);
+        setState(arr);
+      }
+    },
+    [isDisabled, type, state, setState, max],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      type,
+      value: state,
+      toggleValue,
+      isSelected,
+      isTileDisabledByGroup,
+      isGroupDisabled: isDisabled,
+      max,
+    }),
+    [type, state, toggleValue, isSelected, isTileDisabledByGroup, isDisabled, max],
+  );
+
+  const role = type === 'single' ? 'radiogroup' : 'group';
+  const Comp = asChild ? Slot : View;
+
+  return (
+    <TileGroupContextProvider value={contextValue}>
+      <Comp
+        ref={ref}
+        role={role}
+        {...(type === 'single' ? { accessibilityRole: 'radiogroup' as const } : {})}
+        {...(ariaLabel ? { 'aria-label': ariaLabel, accessibilityLabel: ariaLabel } : {})}
+        {...(rest as ViewProps)}
+      >
+        {children}
+      </Comp>
+    </TileGroupContextProvider>
+  );
+});
+
+TileGroup.displayName = 'TileGroup';

package/src/tile/{createTileRoot.tsx → TileRoot.tsx}

@@ -1,8 +1,10 @@
-import React, { forwardRef, useMemo } from 'react';
-import { composeEventHandlers, mergeRefs, useControllableState } from '@cdx-ui/utils';
-import { useFocus } from '@react-native-aria/focus';
+import { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, useControllableState } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
-import { dataAttributes } from '../utils/dataAttributes';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { TileProvider, useOptionalTileGroupContext } from './context';
 import type { ITileProps, ITilePressablePassthrough } from './types';
 
@@ -12,9 +14,12 @@ const rowStyle = {
   alignItems: 'center' as const,
 };
 
-export const createTileRoot = <T,>(BasePressable: React.ComponentType<T>) =>
-  forwardRef((props: ITileProps, ref: React.Ref<unknown>) => {
-    const {
+export interface TileRootProps extends ITileProps {}
+
+export const TileRoot = forwardRef<ComponentRef<typeof Pressable>, TileRootProps>(
+  (
+    {
+      asChild = false,
       value,
       disabled: disabledProp = false,
       isSelected: controlledSelected,
@@ -25,14 +30,12 @@ export const createTileRoot = <T,>(BasePressable: React.ComponentType<T>) =>
       onFocus,
       onBlur,
       style,
-      /** Consumed by styled `withStyleContext` root. */
-      context: _styleContext,
       ...rest
-    } = props;
-
+    },
+    ref,
+  ) => {
     const group = useOptionalTileGroupContext();
 
-    // Standalone selection state — only meaningful when no group owns selection.
     const [standaloneSelected = false, setStandaloneSelected] = useControllableState<boolean>({
       prop: controlledSelected,
       defaultProp: defaultSelected ?? false,
@@ -47,6 +50,10 @@ export const createTileRoot = <T,>(BasePressable: React.ComponentType<T>) =>
     const cannotToggle = isDisabled;
 
     const { focusProps, isFocused } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
     const { pressProps, isPressed } = usePress({ isDisabled: cannotToggle });
     const { hoverProps, isHovered } = useHover();
 
@@ -79,46 +86,52 @@ export const createTileRoot = <T,>(BasePressable: React.ComponentType<T>) =>
       }
     });
 
-    const sharedHandlers = {
-      onPress: isDisabled ? undefined : composedOnPress,
-      onPressIn: composeEventHandlers(passthrough.onPressIn, pressProps.onPressIn),
-      onPressOut: composeEventHandlers(passthrough.onPressOut, pressProps.onPressOut),
-      onHoverIn: composeEventHandlers(passthrough.onHoverIn, hoverProps.onHoverIn),
-      onHoverOut: composeEventHandlers(passthrough.onHoverOut, hoverProps.onHoverOut),
-      onFocus: composeEventHandlers(onFocus, focusProps.onFocus),
-      onBlur: composeEventHandlers(onBlur, focusProps.onBlur),
-    } as const;
-
     const role = selectionType === 'single' ? 'radio' : 'checkbox';
 
-    const sharedAttrs = {
-      accessibilityRole: role,
-      role,
-      accessibilityState,
-      'aria-checked': isSelected,
-      ...(isDisabled ? { 'aria-disabled': true as const } : {}),
-      ...dataAttributes({
-        slot: 'tile',
-        state: isSelected ? 'selected' : 'unselected',
-        disabled: isDisabled,
-        active: isPressed,
-        hover: isHovered,
-        focused: isFocused,
-      }),
-    };
+    const Comp = asChild ? Slot : Pressable;
 
     return (
       <TileProvider value={tileContext}>
-        <BasePressable
-          {...(rest as T)}
-          context={_styleContext}
-          ref={mergeRefs(ref) as React.Ref<T>}
-          {...sharedAttrs}
-          {...sharedHandlers}
+        <Comp
+          ref={ref}
+          accessibilityRole={role}
+          role={role}
+          accessibilityState={accessibilityState}
+          aria-checked={isSelected}
+          {...(isDisabled ? { 'aria-disabled': true as const } : {})}
+          disabled={isDisabled}
+          {...(rest as PressableProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              state: isSelected ? 'selected' : 'unselected',
+              disabled: isDisabled,
+              active: isPressed,
+              hover: isHovered,
+              focus: isFocused,
+              focusVisible: isFocusVisible,
+            }),
+          )}
           style={[rowStyle, style]}
+          onPress={isDisabled ? undefined : composedOnPress}
+          onPressIn={composeEventHandlers(passthrough.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(passthrough.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(passthrough.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(passthrough.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(onFocus, focusProps.onFocus),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
         >
           {children}
-        </BasePressable>
+        </Comp>
       </TileProvider>
     );
-  });
+  },
+);
+
+TileRoot.displayName = 'TileRoot';

package/src/tile/index.ts

@@ -1,19 +1,5 @@
-import type React from 'react';
-import { createTileContent } from './createTileContent';
-import { createTileDescription } from './createTileDescription';
-import { createTileGroup } from './createTileGroup';
-import { createTileIndicator } from './createTileIndicator';
-import { createTileLeadingSlot } from './createTileLeadingSlot';
-import { createTileRoot } from './createTileRoot';
-import { createTileTitle } from './createTileTitle';
-import { createTileTrailingSlot } from './createTileTrailingSlot';
-import type { ITileComponentType } from './types';
-
 export type {
-  ITileComponentType,
-  ITileContentProps,
   ITileContextValue,
-  ITileDescriptionProps,
   ITileGroupMultipleProps,
   ITileGroupProps,
   ITileGroupSingleProps,
@@ -22,67 +8,11 @@ export type {
   ITileLeadingSlotProps,
   ITilePressablePassthrough,
   ITileProps,
-  ITileTitleProps,
   ITileTrailingSlotProps,
   TileGroupType,
   TileGroupValue,
 } from './types';
 
 export { TileProvider, useTileContext } from './context';
-
-export function createTile<
-  Pressable,
-  Leading,
-  Content,
-  Title,
-  Description,
-  Indicator,
-  TrailingSlot,
-  Group,
->(BaseComponents: {
-  Pressable: React.ComponentType<Pressable>;
-  LeadingSlot: React.ComponentType<Leading>;
-  Content: React.ComponentType<Content>;
-  Title: React.ComponentType<Title>;
-  Description: React.ComponentType<Description>;
-  Indicator: React.ComponentType<Indicator>;
-  TrailingSlot: React.ComponentType<TrailingSlot>;
-  Group: React.ComponentType<Group>;
-}) {
-  const Tile = createTileRoot(BaseComponents.Pressable);
-  const Group = createTileGroup(BaseComponents.Group);
-  const LeadingSlot = createTileLeadingSlot(BaseComponents.LeadingSlot);
-  const Content = createTileContent(BaseComponents.Content);
-  const Title = createTileTitle(BaseComponents.Title);
-  const Description = createTileDescription(BaseComponents.Description);
-  const Indicator = createTileIndicator(BaseComponents.Indicator);
-  const TrailingSlot = createTileTrailingSlot(BaseComponents.TrailingSlot);
-
-  Tile.displayName = 'TilePrimitive';
-  Group.displayName = 'TilePrimitive.Group';
-  LeadingSlot.displayName = 'TilePrimitive.LeadingSlot';
-  Content.displayName = 'TilePrimitive.Content';
-  Title.displayName = 'TilePrimitive.Title';
-  Description.displayName = 'TilePrimitive.Description';
-  Indicator.displayName = 'TilePrimitive.Indicator';
-  TrailingSlot.displayName = 'TilePrimitive.TrailingSlot';
-
-  return Object.assign(Tile, {
-    Group,
-    LeadingSlot,
-    Content,
-    Title,
-    Description,
-    Indicator,
-    TrailingSlot,
-  }) as ITileComponentType<
-    Pressable,
-    Leading,
-    Content,
-    Title,
-    Description,
-    Indicator,
-    TrailingSlot,
-    Group
-  >;
-}
+export { TileRoot, type TileRootProps } from './TileRoot';
+export { TileGroup, type TileGroupProps } from './TileGroup';

package/src/tile/types.ts

@@ -1,12 +1,12 @@
-import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
-import type { PressableProps, TextProps, ViewProps } from 'react-native';
-import type { WithStyleContextProps } from '@cdx-ui/utils';
+import type { PressableProps, ViewProps } from 'react-native';
 
 export type TileGroupType = 'single' | 'multiple';
 
 export type TileGroupValue = string | string[] | undefined;
 
-interface ITileGroupBaseProps extends ViewProps, WithStyleContextProps {
+interface ITileGroupBaseProps extends ViewProps {
+  /** Merge group props onto a single child instead of rendering the default View. */
+  asChild?: boolean;
   /** Disables the whole group. */
   isDisabled?: boolean;
   /** Accessible name for the group (radiogroup / group). */
@@ -68,8 +68,9 @@ export type ITilePressablePassthrough = Partial<
   Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
 >;
 
-export interface ITileProps
-  extends PressableProps, ITilePressablePassthrough, WithStyleContextProps {
+export interface ITileProps extends PressableProps, ITilePressablePassthrough {
+  /** Merge tile props onto a single child instead of rendering the default Pressable. */
+  asChild?: boolean;
   /**
    * Identifies this tile within `Tile.Group`. Must be unique within the group.
    * Standalone tiles still require a value (useful for form submission, analytics, etc.).
@@ -103,9 +104,6 @@ export interface ITileLeadingSlotProps extends ViewProps {
   'aria-hidden'?: boolean;
 }
 
-export type ITileContentProps = ViewProps;
-export type ITileTitleProps = TextProps;
-export type ITileDescriptionProps = TextProps;
 export interface ITileIndicatorProps extends ViewProps {
   /**
    * Explicit indicator visual. When inside a `Tile.Group`, auto-infers from `type`
@@ -114,7 +112,6 @@ export interface ITileIndicatorProps extends ViewProps {
    * a radio-style visual is needed.
    */
   indicatorType?: 'radio' | 'checkbox';
-  children?: ReactNode;
 }
 
 /**
@@ -122,32 +119,3 @@ export interface ITileIndicatorProps extends ViewProps {
  * is **not** the radio/checkbox selection affordance. For that, use `Tile.Indicator`.
  */
 export type ITileTrailingSlotProps = ViewProps;
-
-export type ITileComponentType<
-  RootRef,
-  LeadingSlot,
-  Content,
-  Title,
-  Description,
-  Indicator,
-  TrailingSlot,
-  Group,
-> = ForwardRefExoticComponent<RefAttributes<RootRef> & ITileProps> & {
-  Group: ForwardRefExoticComponent<RefAttributes<Group> & PropsWithoutRef<Group> & ITileGroupProps>;
-  LeadingSlot: ForwardRefExoticComponent<
-    RefAttributes<LeadingSlot> & PropsWithoutRef<LeadingSlot> & ITileLeadingSlotProps
-  >;
-  Content: ForwardRefExoticComponent<
-    RefAttributes<Content> & PropsWithoutRef<Content> & ITileContentProps
-  >;
-  Title: ForwardRefExoticComponent<RefAttributes<Title> & PropsWithoutRef<Title> & ITileTitleProps>;
-  Description: ForwardRefExoticComponent<
-    RefAttributes<Description> & PropsWithoutRef<Description> & ITileDescriptionProps
-  >;
-  Indicator: ForwardRefExoticComponent<
-    RefAttributes<Indicator> & PropsWithoutRef<Indicator> & ITileIndicatorProps
-  >;
-  TrailingSlot: ForwardRefExoticComponent<
-    RefAttributes<TrailingSlot> & PropsWithoutRef<TrailingSlot> & ITileTrailingSlotProps
-  >;
-};

package/src/utils/dataAttributes.ts

@@ -4,4 +4,7 @@
  *
  * Delegates to `domDataAttributes` so the conversion logic has a single source of truth.
  */
-export { domDataAttributes as dataAttributes } from './domDataAttributes';
+export {
+  domDataAttributes as dataAttributes,
+  mergeDomDataAttributes as mergeDataAttributes,
+} from './domDataAttributes';

package/src/utils/dataAttributes.web.ts

@@ -22,3 +22,27 @@ export function dataAttributes(attrs: Record<string, DataAttributeValue>): {
   }
   return { dataSet };
 }
+
+/**
+ * Merges multiple sources of data attributes into a single `{ dataSet }` prop
+ * on web. Each source may be a `dataAttributes()` output (`{ dataSet: {...} }`)
+ * or any props object that contains a `dataSet` key — other keys are ignored.
+ * Later sources override earlier sources on inner-key conflicts.
+ *
+ * Required when an element receives data attributes from more than one source:
+ * a plain prop spread merges by replacing the `dataSet` key entirely, so e.g.
+ * `{...dataAttributes({ slot })} {...dataAttributes({ hover })}` keeps only the
+ * second `dataSet`. Use `mergeDataAttributes(...)` to combine them safely.
+ */
+export function mergeDataAttributes(
+  ...sources: ({ dataSet?: Record<string, unknown> } | Record<string, unknown> | undefined)[]
+): { dataSet: Record<string, unknown> } {
+  const dataSet: Record<string, unknown> = {};
+  for (const source of sources) {
+    if (!source) continue;
+    const sourceDataSet = (source as { dataSet?: Record<string, unknown> }).dataSet;
+    if (!sourceDataSet) continue;
+    Object.assign(dataSet, sourceDataSet);
+  }
+  return { dataSet };
+}

package/src/utils/domDataAttributes.ts

@@ -30,3 +30,34 @@ export function domDataAttributes(
   }
   return result;
 }
+
+/**
+ * Merges multiple sources of DOM data attributes into a single flat object of
+ * `data-*` keys. Each source can be a `domDataAttributes()` output or any props
+ * object — non-`data-*` keys are ignored. Later sources override earlier sources
+ * on key conflicts.
+ *
+ * Use this when an element receives `data-*` attributes from more than one
+ * source (e.g. a styled layer's `data-slot` and a primitive's interaction-state
+ * `data-hover`/`data-focus` etc.) and a plain prop spread would otherwise be
+ * fine on native but lose attributes on web (where `dataAttributes()` returns
+ * `{ dataSet }` — see the `.web.ts` sibling for the web merge).
+ */
+export function mergeDomDataAttributes(
+  ...sources: (Record<string, unknown> | undefined)[]
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const source of sources) {
+    if (!source) continue;
+    for (const key in source) {
+      if (!key.startsWith('data-')) continue;
+      const value = source[key];
+      if (typeof value === 'boolean') {
+        result[key] = String(value);
+      } else if (typeof value === 'string') {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}

package/lib/commonjs/avatar/createAvatarBadge.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createAvatarBadge = void 0;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-const createAvatarBadge = BaseBadge => /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseBadge, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-});
-exports.createAvatarBadge = createAvatarBadge;
-//# sourceMappingURL=createAvatarBadge.js.map

package/lib/commonjs/avatar/createAvatarBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_jsxRuntime","createAvatarBadge","BaseBadge","forwardRef","children","props","ref","jsx","exports"],"sourceRoot":"../../../src","sources":["avatar/createAvatarBadge.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAAmC,IAAAC,WAAA,GAAAD,OAAA;AAG5B,MAAME,iBAAiB,GAAQC,SAAiC,iBACrE,IAAAC,iBAAU,EAA6B,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACtE,oBACE,IAAAN,WAAA,CAAAO,GAAA,EAACL,SAAS;IAACI,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAAD,QAAA,EAC5BA;EAAQ,CACA,CAAC;AAEhB,CAAC,CAAC;AAACI,OAAA,CAAAP,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/lib/commonjs/avatar/createAvatarIcon.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createAvatarIcon = void 0;
-var _react = require("react");
-var _context = require("./context");
-var _jsxRuntime = require("react/jsx-runtime");
-const createAvatarIcon = BaseIcon => /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  style,
-  ...props
-}, ref) => {
-  const {
-    imageLoaded,
-    imageError
-  } = (0, _context.useAvatarContext)();
-  const visible = !imageLoaded || imageError;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseIcon, {
-    ref: ref,
-    style: [style, !visible && {
-      opacity: 0
-    }],
-    ...props,
-    children: children
-  });
-});
-exports.createAvatarIcon = createAvatarIcon;
-//# sourceMappingURL=createAvatarIcon.js.map

package/lib/commonjs/avatar/createAvatarIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_context","_jsxRuntime","createAvatarIcon","BaseIcon","forwardRef","children","style","props","ref","imageLoaded","imageError","useAvatarContext","visible","jsx","opacity","exports"],"sourceRoot":"../../../src","sources":["avatar/createAvatarIcon.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAA6C,IAAAE,WAAA,GAAAF,OAAA;AAGtC,MAAMG,gBAAgB,GAAQC,QAAgC,iBACnE,IAAAC,iBAAU,EAA4B,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC5E,MAAM;IAAEC,WAAW;IAAEC;EAAW,CAAC,GAAG,IAAAC,yBAAgB,EAAC,CAAC;EACtD,MAAMC,OAAO,GAAG,CAACH,WAAW,IAAIC,UAAU;EAE1C,oBACE,IAAAT,WAAA,CAAAY,GAAA,EAACV,QAAQ;IAACK,GAAG,EAAEA,GAAI;IAACF,KAAK,EAAE,CAACA,KAAK,EAAE,CAACM,OAAO,IAAI;MAAEE,OAAO,EAAE;IAAE,CAAC,CAAE;IAAA,GAAMP,KAAK;IAAAF,QAAA,EACvEA;EAAQ,CACD,CAAC;AAEf,CAAC,CAAC;AAACU,OAAA,CAAAb,gBAAA,GAAAA,gBAAA","ignoreList":[]}