@ankhorage/surface 6.0.0 → 7.0.0

package/src/components/list-item/ListItem.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { View as ReactNativeView } from 'react-native';
-
-import { View } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { ButtonBase } from '../../primitives/button-base';
-import { useTheme } from '../../theme/ThemeContext';
-import type { ListItemProps } from './types';
-
-/*** Renders the content row shared by static and interactive ListItem variants. */
-function ListItemContent({
-  title,
-  description,
-  leading,
-  trailing,
-  testID,
-}: Omit<ListItemProps, 'disabled' | 'onPress'>) {
-  const { theme } = useTheme();
-
-  return (
-    <View
-      px="m"
-      py="m"
-      testID={testID}
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-      }}
-    >
-      {leading ? (
-        <ReactNativeView style={{ marginRight: theme.spacing.m }}>{leading}</ReactNativeView>
-      ) : null}
-      <View flex={1}>
-        {title ? (
-          <Text numberOfLines={1} variant="body" weight="medium">
-            {title}
-          </Text>
-        ) : null}
-        {description ? (
-          <Text emphasis="muted" numberOfLines={2} variant="bodySmall">
-            {description}
-          </Text>
-        ) : null}
-      </View>
-      {trailing ? (
-        <ReactNativeView style={{ marginLeft: theme.spacing.m }}>{trailing}</ReactNativeView>
-      ) : null}
-    </View>
-  );
-}
-
-/*** Renders a static or pressable list item. */
-export function ListItem({ onPress, disabled = false, testID, ...content }: ListItemProps) {
-  const { theme } = useTheme();
-
-  if (!onPress) return <ListItemContent {...content} testID={testID} />;
-
-  return (
-    <ButtonBase accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
-      {(state) => (
-        <View
-          style={{
-            backgroundColor: state.pressed
-              ? theme.semantics.neutral.surfaceActive
-              : state.hovered
-                ? theme.semantics.neutral.surfaceHover
-                : 'transparent',
-            opacity: state.disabled ? 0.72 : 1,
-          }}
-        >
-          <ListItemContent {...content} />
-        </View>
-      )}
-    </ButtonBase>
-  );
-}

package/src/components/list-item/index.ts

@@ -1,2 +0,0 @@
-export { ListItem } from './ListItem';
-export type { ListItemProps } from './types';

package/src/components/list-item/types.ts

@@ -1,11 +0,0 @@
-import type React from 'react';
-
-export interface ListItemProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  onPress?: (() => void) | undefined;
-  disabled?: boolean;
-  testID?: string;
-}

package/src/components/switch/Switch.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-
-import { View } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import {
-  resolveFieldState,
-  resolveIndicatorSize,
-  resolveSelectionControlColors,
-  resolveSelectionControlNextChecked,
-} from '../../internal/resolvers';
-import { useControllableState } from '../../internal/useControllableState';
-import { ButtonBase } from '../../primitives/button-base';
-import { useTheme } from '../../theme/ThemeContext';
-import type { SwitchProps } from './types';
-
-/*** Renders a controlled or uncontrolled accessible switch. */
-export function Switch({
-  children,
-  checked,
-  defaultChecked = false,
-  onCheckedChange,
-  color = 'primary',
-  size = 'm',
-  disabled = false,
-  invalid = false,
-  readOnly = false,
-  accessibilityLabel,
-  testID,
-  ...props
-}: SwitchProps) {
-  const { theme } = useTheme();
-  const [isChecked, setChecked] = useControllableState<boolean>({
-    value: checked,
-    defaultValue: defaultChecked,
-    onChange: onCheckedChange,
-  });
-  const indicatorSize = resolveIndicatorSize(size);
-  const nextChecked = resolveSelectionControlNextChecked({
-    checked: isChecked,
-    disabled,
-    kind: 'switch',
-    readOnly,
-  });
-
-  return (
-    <ButtonBase
-      {...props}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="switch"
-      accessibilityState={{ checked: isChecked }}
-      disabled={disabled}
-      onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}
-      testID={testID}
-    >
-      {(interactionState) => {
-        const fieldState = resolveFieldState({
-          disabled,
-          focused: interactionState.focused,
-          invalid,
-          readOnly,
-        });
-        const colors = resolveSelectionControlColors(theme, {
-          checked: isChecked,
-          fieldState,
-          hovered: interactionState.hovered,
-          pressed: interactionState.pressed,
-          color,
-        });
-        const labelEmphasis =
-          colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
-
-        return (
-          <View
-            style={{
-              alignItems: 'center',
-              flexDirection: 'row',
-              opacity: colors.opacity,
-            }}
-          >
-            <View
-              radius="full"
-              style={{
-                backgroundColor: colors.trackColor,
-                borderColor: colors.borderColor,
-                borderWidth: 1,
-                justifyContent: 'center',
-                minWidth: indicatorSize.switchWidth,
-                paddingHorizontal: 2,
-                width: indicatorSize.switchWidth,
-                height: indicatorSize.switchHeight,
-              }}
-            >
-              <View
-                radius="full"
-                style={{
-                  alignSelf: isChecked ? 'flex-end' : 'flex-start',
-                  backgroundColor: colors.thumbColor,
-                  height: indicatorSize.switchThumb,
-                  width: indicatorSize.switchThumb,
-                }}
-              />
-            </View>
-            {children ? (
-              <View ml="s">
-                <Text emphasis={labelEmphasis}>{children}</Text>
-              </View>
-            ) : null}
-          </View>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/switch/index.ts

@@ -1,2 +0,0 @@
-export { Switch } from './Switch';
-export type { SwitchProps } from './types';

package/src/components/textarea/Textarea.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { TextInput } from '../../features/form/text-input/public';
-import type { TextareaProps } from './types';
-
-export function Textarea({ rows = 4, numberOfLines, style, ...props }: TextareaProps) {
-  return (
-    <TextInput
-      {...props}
-      multiline
-      numberOfLines={numberOfLines ?? rows}
-      style={[{ textAlignVertical: 'top' }, style]}
-    />
-  );
-}

package/src/components/textarea/index.ts

@@ -1,2 +0,0 @@
-export { Textarea } from './Textarea';
-export type { TextareaProps } from './types';

package/src/components/textarea/types.ts

@@ -1,5 +0,0 @@
-import type { TextInputProps } from '../../types/text-input';
-
-export interface TextareaProps extends Omit<TextInputProps, 'multiline'> {
-  rows?: number;
-}