@newtonedev/components 0.1.0 → 0.1.2

package/src/Select/Select.styles.ts

@@ -2,28 +2,67 @@ import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
 import type { ResolvedTokens } from '../tokens/types';
 
-export function getSelectStyles(tokens: ResolvedTokens, disabled: boolean) {
+export function getSelectStyles(
+  tokens: ResolvedTokens,
+  disabled: boolean,
+  size: 'sm' | 'md',
+  isOpen: boolean
+) {
+  const isSm = size === 'sm';
+  const fontSize = isSm ? tokens.typography.size.sm : tokens.typography.size.base;
+  const iconSize = fontSize + 2;
+  const iconSpace = iconSize + tokens.spacing.sm;
+  const paddingVertical = isSm ? tokens.spacing.xs : tokens.spacing.sm;
+  const paddingHorizontal = isSm ? tokens.spacing.sm : tokens.spacing.md;
+
   return StyleSheet.create({
     container: {
-      gap: 4,
+      gap: tokens.spacing.xs,
+      zIndex: isOpen ? 999 : 0,
     },
     label: {
-      fontSize: 12,
-      fontWeight: '600',
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
-    select: {
+    trigger: {
+      flexDirection: 'row',
+      alignItems: 'center',
       backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: 6,
-      paddingVertical: 8,
-      paddingHorizontal: 12,
-      fontSize: 14,
+      borderRadius: tokens.radius.md,
+      paddingVertical,
+      paddingLeft: paddingHorizontal,
+      paddingRight: iconSpace + (isSm ? tokens.spacing.xs : tokens.spacing.sm),
+      opacity: disabled ? 0.5 : 1,
+    },
+    triggerText: {
+      flex: 1,
+      fontFamily: tokens.typography.fonts.default,
+      fontSize,
       color: disabled
         ? srgbToHex(tokens.textSecondary.srgb)
         : srgbToHex(tokens.textPrimary.srgb),
-      opacity: disabled ? 0.5 : 1,
+    },
+    iconWrapper: {
+      position: 'absolute',
+      right: isSm ? tokens.spacing.xs : tokens.spacing.sm,
+      top: 0,
+      bottom: 0,
+      justifyContent: 'center',
+    },
+    groupLabel: {
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.xs,
+      fontWeight: tokens.typography.weight.semibold as any,
+      color: srgbToHex(tokens.textSecondary.srgb),
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: isSm ? tokens.spacing.sm : tokens.spacing.md,
+      paddingTop: tokens.spacing.sm,
     },
   });
 }

package/src/Select/Select.tsx

@@ -1,60 +1,151 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import type { SelectProps } from './Select.types';
+import React, { useMemo } from 'react';
+import { View, Text, Pressable, ScrollView } from 'react-native';
+import type { SelectProps, SelectOption } from './Select.types';
+import { isOptionGroup } from './Select.types';
 import { useTokens } from '../tokens/useTokens';
 import { getSelectStyles } from './Select.styles';
+import { Icon } from '../Icon/Icon';
+import { Popover } from '../Popover/Popover';
+import { usePopover } from '../Popover/usePopover';
+import { useSelect } from './useSelect';
+import { SelectOptionRow } from './SelectOption';
+import { srgbToHex } from 'newtone';
+
+function flattenOptions(items: readonly (SelectOption | { readonly label: string; readonly options: readonly SelectOption[] })[]): SelectOption[] {
+  const result: SelectOption[] = [];
+  for (const item of items) {
+    if ('options' in item) {
+      result.push(...item.options);
+    } else {
+      result.push(item);
+    }
+  }
+  return result;
+}
 
-/**
- * Select dropdown component.
- *
- * Renders a native HTML <select> element styled with design tokens.
- * On web (via react-native-web), View renders as a div which can contain
- * standard HTML elements.
- */
 export function Select({
   options,
   value,
   onValueChange,
   label,
+  placeholder,
   disabled = false,
+  renderOption,
+  renderValue,
+  size = 'md',
   style,
 }: SelectProps) {
   const tokens = useTokens(1);
+  const { isOpen, open, close, toggle } = usePopover();
 
-  const styles = React.useMemo(
-    () => getSelectStyles(tokens, disabled),
-    [tokens, disabled]
-  );
+  const flatOptions = useMemo(() => flattenOptions(options), [options]);
 
-  const handleChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => {
-      onValueChange(e.target.value);
+  const { focusedIndex, handleKeyDown } = useSelect({
+    flatOptions,
+    value,
+    isOpen,
+    onSelect: (v) => {
+      onValueChange(v);
+      close();
     },
-    [onValueChange]
+    onClose: close,
+    onOpen: open,
+  });
+
+  const styles = useMemo(
+    () => getSelectStyles(tokens, disabled, size, isOpen),
+    [tokens, disabled, size, isOpen]
   );
 
-  // Flatten StyleSheet styles into inline style for the native <select>
-  const selectStyle = StyleSheet.flatten(styles.select);
+  const selectedOption = flatOptions.find((o) => o.value === value);
+  const displayLabel = selectedOption?.label ?? placeholder ?? value;
+
+  const iconColor = disabled
+    ? srgbToHex(tokens.textSecondary.srgb)
+    : srgbToHex(tokens.textPrimary.srgb);
+
+  // onKeyDown is a web-only prop supported by react-native-web but not in RN types
+  const triggerWebProps = { onKeyDown: handleKeyDown } as any;
+
+  const trigger = (
+    <Pressable
+      onPress={disabled ? undefined : toggle}
+      disabled={disabled}
+      role="combobox"
+      aria-expanded={isOpen}
+      aria-haspopup={'listbox' as any}
+      {...triggerWebProps}
+      style={styles.trigger}
+    >
+      {renderValue ? (
+        renderValue(selectedOption)
+      ) : (
+        <Text style={styles.triggerText} numberOfLines={1}>
+          {displayLabel}
+        </Text>
+      )}
+      <View style={styles.iconWrapper} pointerEvents="none">
+        <Icon
+          name={isOpen ? 'expand_less' : 'expand_more'}
+          size={size === 'sm' ? tokens.typography.size.sm + 2 : tokens.typography.size.base + 2}
+          color={iconColor}
+        />
+      </View>
+    </Pressable>
+  );
 
   return (
-    <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
+    <View style={[styles.container, ...(Array.isArray(style) ? style : style ? [style] : [])]}>
       {label && <Text style={styles.label}>{label}</Text>}
-      <select
-        value={value}
-        onChange={handleChange}
-        disabled={disabled}
-        style={{
-          ...selectStyle,
-          cursor: disabled ? 'default' : 'pointer',
-          appearance: 'auto',
-        } as React.CSSProperties}
+      <Popover
+        isOpen={isOpen && !disabled}
+        onClose={close}
+        trigger={trigger}
       >
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+        <ScrollView
+          bounces={false}
+          keyboardShouldPersistTaps="handled"
+          role={'listbox' as any}
+        >
+          {options.map((item) => {
+            if (isOptionGroup(item)) {
+              return (
+                <View key={item.label}>
+                  <Text style={styles.groupLabel}>{item.label}</Text>
+                  {item.options.map((opt) => (
+                    <SelectOptionRow
+                      key={opt.value}
+                      option={opt}
+                      isSelected={opt.value === value}
+                      isFocused={flatOptions[focusedIndex]?.value === opt.value}
+                      onSelect={() => {
+                        onValueChange(opt.value);
+                        close();
+                      }}
+                      renderOption={renderOption}
+                      size={size}
+                    />
+                  ))}
+                </View>
+              );
+            }
+            return (
+              <SelectOptionRow
+                key={item.value}
+                option={item}
+                isSelected={item.value === value}
+                isFocused={flatOptions[focusedIndex]?.value === item.value}
+                onSelect={() => {
+                  onValueChange(item.value);
+                  close();
+                }}
+                renderOption={renderOption}
+                size={size}
+              />
+            );
+          })}
+        </ScrollView>
+      </Popover>
     </View>
   );
 }

package/src/Select/Select.types.ts

@@ -3,13 +3,42 @@ import type { ViewStyle } from 'react-native';
 export interface SelectOption {
   readonly label: string;
   readonly value: string;
+  readonly disabled?: boolean;
 }
 
-export interface SelectProps {
+export interface SelectOptionGroup {
+  readonly label: string;
   readonly options: readonly SelectOption[];
+}
+
+export type SelectItem = SelectOption | SelectOptionGroup;
+
+export function isOptionGroup(item: SelectItem): item is SelectOptionGroup {
+  return 'options' in item;
+}
+
+export interface SelectProps {
+  /** Flat options or grouped options */
+  readonly options: readonly SelectItem[];
+  /** Currently selected value */
   readonly value: string;
+  /** Callback when selection changes */
   readonly onValueChange: (value: string) => void;
+  /** Field label displayed above the trigger */
   readonly label?: string;
+  /** Placeholder text when no value is selected */
+  readonly placeholder?: string;
+  /** Disabled state */
   readonly disabled?: boolean;
+  /** Custom render for each option row */
+  readonly renderOption?: (
+    option: SelectOption,
+    state: { readonly isSelected: boolean; readonly isFocused: boolean }
+  ) => React.ReactNode;
+  /** Custom render for the trigger display text */
+  readonly renderValue?: (option: SelectOption | undefined) => React.ReactNode;
+  /** Size variant. @default 'md' */
+  readonly size?: 'sm' | 'md';
+  /** Container style override */
   readonly style?: ViewStyle | ViewStyle[];
 }

package/src/Select/SelectOption.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import type { SelectOption as SelectOptionType, SelectProps } from './Select.types';
+import { useTokens } from '../tokens/useTokens';
+import { Icon } from '../Icon/Icon';
+import { srgbToHex } from 'newtone';
+
+interface SelectOptionRowProps {
+  readonly option: SelectOptionType;
+  readonly isSelected: boolean;
+  readonly isFocused: boolean;
+  readonly onSelect: () => void;
+  readonly renderOption?: SelectProps['renderOption'];
+  readonly size: 'sm' | 'md';
+}
+
+export function SelectOptionRow({
+  option,
+  isSelected,
+  isFocused,
+  onSelect,
+  renderOption,
+  size,
+}: SelectOptionRowProps) {
+  const tokens = useTokens(1);
+
+  const paddingVertical = size === 'sm' ? tokens.spacing.xs : tokens.spacing.sm;
+  const paddingHorizontal = size === 'sm' ? tokens.spacing.sm : tokens.spacing.md;
+  const fontSize = size === 'sm' ? tokens.typography.size.sm : tokens.typography.size.base;
+
+  if (renderOption) {
+    return (
+      <Pressable
+        onPress={option.disabled ? undefined : onSelect}
+        disabled={option.disabled}
+        role="option"
+        aria-selected={isSelected}
+      >
+        {renderOption(option, { isSelected, isFocused })}
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={option.disabled ? undefined : onSelect}
+      disabled={option.disabled}
+      role="option"
+      aria-selected={isSelected}
+      style={({ pressed }) => [
+        {
+          flexDirection: 'row' as const,
+          alignItems: 'center' as const,
+          justifyContent: 'space-between' as const,
+          paddingVertical,
+          paddingHorizontal,
+        },
+        isSelected && {
+          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+        },
+        isFocused &&
+          !isSelected && {
+            backgroundColor: `${srgbToHex(tokens.border.srgb)}20`,
+          },
+        option.disabled && {
+          opacity: 0.5,
+        },
+        pressed && {
+          opacity: 0.7,
+        },
+      ]}
+    >
+      <Text
+        style={[
+          {
+            flex: 1,
+            fontFamily: tokens.typography.fonts.default,
+            fontSize,
+            color: srgbToHex(tokens.textPrimary.srgb),
+          },
+          isSelected && {
+            fontWeight: tokens.typography.weight.semibold as any,
+            color: srgbToHex(tokens.interactive.srgb),
+          },
+          option.disabled && {
+            color: srgbToHex(tokens.textSecondary.srgb),
+          },
+        ]}
+        numberOfLines={1}
+      >
+        {option.label}
+      </Text>
+      {isSelected && (
+        <View style={{ marginLeft: tokens.spacing.sm }}>
+          <Icon
+            name="check"
+            size={fontSize}
+            color={srgbToHex(tokens.interactive.srgb)}
+          />
+        </View>
+      )}
+    </Pressable>
+  );
+}

package/src/Select/useSelect.ts

@@ -0,0 +1,129 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { SelectOption } from './Select.types';
+
+interface UseSelectOptions {
+  readonly flatOptions: readonly SelectOption[];
+  readonly value: string;
+  readonly isOpen: boolean;
+  readonly onSelect: (value: string) => void;
+  readonly onClose: () => void;
+  readonly onOpen: () => void;
+}
+
+function findNextEnabled(
+  options: readonly SelectOption[],
+  startIndex: number,
+  direction: 1 | -1
+): number {
+  const len = options.length;
+  if (len === 0) return -1;
+
+  for (let i = 1; i <= len; i++) {
+    const idx = (startIndex + i * direction + len) % len;
+    if (!options[idx].disabled) return idx;
+  }
+  return -1;
+}
+
+export function useSelect({
+  flatOptions,
+  value,
+  isOpen,
+  onSelect,
+  onClose,
+  onOpen,
+}: UseSelectOptions) {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const typeAheadRef = useRef('');
+  const typeAheadTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // When opening, focus the selected option or first enabled option
+  useEffect(() => {
+    if (isOpen) {
+      const selectedIdx = flatOptions.findIndex((o) => o.value === value);
+      if (selectedIdx >= 0 && !flatOptions[selectedIdx].disabled) {
+        setFocusedIndex(selectedIdx);
+      } else {
+        const firstEnabled = flatOptions.findIndex((o) => !o.disabled);
+        setFocusedIndex(firstEnabled >= 0 ? firstEnabled : -1);
+      }
+    } else {
+      setFocusedIndex(-1);
+    }
+  }, [isOpen, flatOptions, value]);
+
+  const handleKeyDown = useCallback(
+    (e: any) => {
+      const key: string = e.key;
+
+      // When closed, open on ArrowDown/ArrowUp/Enter/Space
+      if (!isOpen) {
+        if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter' || key === ' ') {
+          e.preventDefault();
+          onOpen();
+        }
+        return;
+      }
+
+      switch (key) {
+        case 'ArrowDown': {
+          e.preventDefault();
+          const next = findNextEnabled(flatOptions, focusedIndex, 1);
+          if (next >= 0) setFocusedIndex(next);
+          break;
+        }
+        case 'ArrowUp': {
+          e.preventDefault();
+          const prev = findNextEnabled(flatOptions, focusedIndex, -1);
+          if (prev >= 0) setFocusedIndex(prev);
+          break;
+        }
+        case 'Enter':
+        case ' ': {
+          e.preventDefault();
+          if (focusedIndex >= 0 && !flatOptions[focusedIndex].disabled) {
+            onSelect(flatOptions[focusedIndex].value);
+          }
+          break;
+        }
+        case 'Escape': {
+          e.preventDefault();
+          onClose();
+          break;
+        }
+        case 'Home': {
+          e.preventDefault();
+          const first = flatOptions.findIndex((o) => !o.disabled);
+          if (first >= 0) setFocusedIndex(first);
+          break;
+        }
+        case 'End': {
+          e.preventDefault();
+          const lastEnabled = [...flatOptions].reverse().findIndex((o) => !o.disabled);
+          if (lastEnabled >= 0) setFocusedIndex(flatOptions.length - 1 - lastEnabled);
+          break;
+        }
+        default: {
+          // Type-ahead: single character matching
+          if (key.length === 1 && !e.ctrlKey && !e.metaKey) {
+            clearTimeout(typeAheadTimerRef.current);
+            typeAheadRef.current += key.toLowerCase();
+
+            const match = flatOptions.findIndex(
+              (o) => !o.disabled && o.label.toLowerCase().startsWith(typeAheadRef.current)
+            );
+            if (match >= 0) setFocusedIndex(match);
+
+            typeAheadTimerRef.current = setTimeout(() => {
+              typeAheadRef.current = '';
+            }, 500);
+          }
+          break;
+        }
+      }
+    },
+    [isOpen, focusedIndex, flatOptions, onSelect, onClose, onOpen]
+  );
+
+  return { focusedIndex, handleKeyDown };
+}

package/src/Sidebar/Sidebar.styles.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+interface SidebarStyleInput {
+  readonly tokens: ResolvedTokens;
+  readonly width: number;
+  readonly bordered: boolean;
+}
+
+export function getSidebarStyles({ tokens, width, bordered }: SidebarStyleInput) {
+  const borderColor = srgbToHex(tokens.border.srgb);
+
+  return StyleSheet.create({
+    container: {
+      width,
+      flexShrink: 0,
+      flexDirection: 'column',
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      borderRightWidth: bordered ? 1 : 0,
+      borderRightColor: borderColor,
+    },
+    header: {
+      flexShrink: 0,
+      borderBottomWidth: 1,
+      borderBottomColor: borderColor,
+    },
+    body: {
+      flex: 1,
+    },
+    footer: {
+      flexShrink: 0,
+      borderTopWidth: 1,
+      borderTopColor: borderColor,
+    },
+  });
+}

package/src/Sidebar/Sidebar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View, ScrollView } from 'react-native';
+import type { SidebarProps } from './Sidebar.types';
+import { useTokens } from '../tokens/useTokens';
+import { getSidebarStyles } from './Sidebar.styles';
+
+export function Sidebar({
+  children,
+  header,
+  footer,
+  width = 260,
+  bordered = true,
+}: SidebarProps) {
+  const tokens = useTokens();
+  const styles = React.useMemo(
+    () => getSidebarStyles({ tokens, width, bordered }),
+    [tokens, width, bordered]
+  );
+
+  return (
+    <View style={styles.container}>
+      {header && <View style={styles.header}>{header}</View>}
+      <ScrollView style={styles.body}>{children}</ScrollView>
+      {footer && <View style={styles.footer}>{footer}</View>}
+    </View>
+  );
+}

package/src/Sidebar/Sidebar.types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export interface SidebarProps {
+  /** Scrollable body content (navigation items, etc.) */
+  readonly children?: ReactNode;
+  /** Sticky header slot (logo, brand) */
+  readonly header?: ReactNode;
+  /** Sticky footer slot (user menu, settings) */
+  readonly footer?: ReactNode;
+  /** Fixed width in pixels. @default 260 */
+  readonly width?: number;
+  /** Show right border. @default true */
+  readonly bordered?: boolean;
+}

package/src/Sidebar/index.ts

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