@nwartz/design-system 0.1.0

package/components/DatePicker.tsx

@@ -0,0 +1,410 @@
+import { useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  View,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+
+import { spacing } from '../tokens/spacing';
+import { elevation } from '../tokens/elevation';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+export interface DatePickerProps {
+  label?: string;
+  startDate?: Date | null;
+  endDate?: Date | null;
+  onChange?: (start: Date | null, end: Date | null) => void;
+  disabled?: boolean;
+  errorMessage?: string;
+  placeholder?: string;
+  open?: boolean;
+  onToggle?: () => void;
+}
+
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const MONTH_NAMES = [
+  'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+  'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro',
+];
+
+function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function getFirstDayOfMonth(year: number, month: number): number {
+  const day = new Date(year, month, 1).getDay();
+
+  return day === 0 ? 6 : day - 1;
+}
+
+function formatDate(date: Date): string {
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const year = date.getFullYear();
+
+  return `${day}/${month}/${year}`;
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+function isInRange(date: Date, start: Date | null, end: Date | null): boolean {
+  if (!start || !end) {
+    return false;
+  }
+
+  const time = date.getTime();
+
+  return time > start.getTime() && time < end.getTime();
+}
+
+/**
+ * Date range picker with calendar grid, month navigation, input fields, and action buttons.
+ *
+ * ```tsx
+ * <DatePicker startDate={start} endDate={end} onChange={setDates} />
+ * ```
+ */
+export function DatePicker({
+  startDate,
+  endDate,
+  onChange,
+  disabled = false,
+  errorMessage,
+  placeholder = 'Selecione as datas',
+  open = false,
+  onToggle,
+}: DatePickerProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [viewYear, setViewYear] = useState(startDate?.getFullYear() ?? new Date().getFullYear());
+  const [viewMonth, setViewMonth] = useState(startDate?.getMonth() ?? new Date().getMonth());
+  const [selectingEnd, setSelectingEnd] = useState(false);
+
+  const showError = !!errorMessage;
+  const today = new Date();
+
+  const navigateMonth = (delta: number) => {
+    const newDate = new Date(viewYear, viewMonth + delta, 1);
+
+    setViewYear(newDate.getFullYear());
+    setViewMonth(newDate.getMonth());
+  };
+
+  const handleDayPress = (day: number) => {
+    const date = new Date(viewYear, viewMonth, day);
+
+    if (!selectingEnd) {
+      onChange?.(date, null);
+      setSelectingEnd(true);
+    } else {
+      if (startDate && date < startDate) {
+        onChange?.(date, startDate);
+      } else {
+        onChange?.(startDate ?? date, date);
+      }
+
+      setSelectingEnd(false);
+    }
+  };
+
+  const handleCancel = () => {
+    onChange?.(null, null);
+    setSelectingEnd(false);
+    onToggle?.();
+  };
+
+  const handleApply = () => {
+    onToggle?.();
+  };
+
+  const daysInMonth = getDaysInMonth(viewYear, viewMonth);
+  const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
+
+  const triggerStyle: StyleProp<ViewStyle> = [
+    styles.trigger,
+    {
+      backgroundColor: '#faf9f7',
+      borderColor: showError ? '#bb4355' : '#d9d8d7',
+      borderWidth: 1,
+      borderRadius: 8,
+    },
+    elevation.xs,
+  ];
+
+  return (
+    <View style={styles.wrapper}>
+      <Pressable
+        disabled={disabled}
+        onPress={onToggle}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        style={[
+          triggerStyle,
+          isHovered && !disabled && { backgroundColor: '#e9e8e7' },
+        ]}>
+        <Icon name="timer" size={20} color="#101828" />
+        <Text
+          variant="body"
+          textStyle={[
+            styles.triggerText,
+            {
+              color: startDate ? '#101828' : '#8e8d8b',
+              fontWeight: startDate ? '600' : '400',
+            },
+          ]}>
+          {(() => {
+            if (startDate && endDate) {
+              return `${formatDate(startDate)} -- ${formatDate(endDate)}`;
+            }
+
+            if (startDate) {
+              return `${formatDate(startDate)} --`;
+            }
+
+            return placeholder;
+          })()}
+        </Text>
+      </Pressable>
+
+      {showError && (
+        <View style={styles.errorRow}>
+          <Icon name="warning-circle" size={16} color="#bb4355" />
+          <Text variant="body" textStyle={[styles.errorText, { color: '#737271' }]}>
+            {errorMessage}
+          </Text>
+        </View>
+      )}
+
+      {open && (
+        <View
+          style={[
+            styles.calendar,
+            {
+              backgroundColor: '#f6f5f4',
+              borderColor: '#e9e8e7',
+            },
+            elevation.lg,
+          ]}>
+          <View style={styles.contentArea}>
+            <View style={styles.inputRow}>
+              <View style={[styles.dateInput, { borderColor: '#d9d8d7' }]}>
+                <Text variant="body" textStyle={{ color: startDate ? '#141414' : '#8e8d8b', fontSize: 14 }}>
+                  {startDate ? formatDate(startDate) : 'Data inicial'}
+                </Text>
+              </View>
+              <Text variant="body" textStyle={{ color: '#d9d8d7', fontSize: 16 }}>--</Text>
+              <View style={[styles.dateInput, { borderColor: '#d0d5dd' }]}>
+                <Text variant="body" textStyle={{ color: endDate ? '#101828' : '#8e8d8b', fontSize: 14 }}>
+                  {endDate ? formatDate(endDate) : 'Data final'}
+                </Text>
+              </View>
+            </View>
+
+            <View style={styles.header}>
+              <Pressable onPress={() => navigateMonth(-1)} hitSlop={8} style={styles.navButton}>
+                <View style={{ transform: [{ rotate: '180deg' }] }}>
+                  <Icon name="caret-right" size={16} color="#737271" />
+                </View>
+              </Pressable>
+
+              <Text variant="body" textStyle={styles.monthLabel}>
+                {MONTH_NAMES[viewMonth]} {viewYear}
+              </Text>
+
+              <Pressable onPress={() => navigateMonth(1)} hitSlop={8} style={styles.navButton}>
+                <Icon name="caret-right" size={16} color="#737271" />
+              </Pressable>
+            </View>
+
+            <View style={styles.weekdayRow}>
+              {WEEKDAYS.map((day) => (
+                <Text key={day} variant="caption" textStyle={styles.weekdayText}>
+                  {day}
+                </Text>
+              ))}
+            </View>
+
+            <View style={styles.daysGrid}>
+              {Array.from({ length: firstDay }).map((_, i) => (
+                <View key={`empty-${i}`} style={styles.dayCell} />
+              ))}
+
+              {Array.from({ length: daysInMonth }).map((_, i) => {
+                const day = i + 1;
+                const date = new Date(viewYear, viewMonth, day);
+                const isStartDate = !!startDate && isSameDay(date, startDate);
+                const isEndDate = !!endDate && isSameDay(date, endDate);
+                const isSelected = isStartDate || isEndDate;
+                const inRange = isInRange(date, startDate ?? null, endDate ?? null);
+                const isTodayDate = isSameDay(date, today);
+
+                return (
+                  <Pressable
+                    key={day}
+                    onPress={() => handleDayPress(day)}
+                    style={[
+                      styles.dayCell,
+                      inRange && { backgroundColor: '#d9d8d7' },
+                      (isStartDate || (!endDate && selectingEnd && startDate && isSameDay(date, startDate))) && {
+                        borderRadius: 20,
+                        backgroundColor: '#cefe00',
+                      },
+                      isEndDate && {
+                        borderRadius: 20,
+                        backgroundColor: '#cefe00',
+                      },
+                    ]}>
+                    <Text
+                      variant="caption"
+                      textStyle={[
+                        styles.dayText,
+                        {
+                          color: isSelected ? '#000000' : '#141414',
+                          fontWeight: isTodayDate || isSelected ? '500' : '400',
+                        },
+                      ]}>
+                      {day}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </View>
+          </View>
+
+          <View style={styles.bottomPanel}>
+            <Pressable
+              onPress={handleCancel}
+              style={[styles.actionButton, { borderColor: '#d9d8d7', backgroundColor: '#faf9f7' }]}>
+              <Text variant="body" textStyle={{ color: '#101828', fontSize: 14, fontWeight: '600' }}>
+                Cancelar
+              </Text>
+            </Pressable>
+
+            <Pressable
+              onPress={handleApply}
+              style={[styles.actionButton, { borderColor: '#cefe00', backgroundColor: '#cefe00' }]}>
+              <Text variant="body" textStyle={{ color: '#000000', fontSize: 14, fontWeight: '600' }}>
+                Aplicar
+              </Text>
+            </Pressable>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: spacing.xs,
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 40,
+    paddingHorizontal: 16,
+    gap: 8,
+  },
+  triggerText: {
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  errorRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  errorText: {
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  calendar: {
+    borderRadius: 12,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  contentArea: {
+    padding: 20,
+    gap: 16,
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  dateInput: {
+    flex: 1,
+    height: 44,
+    borderWidth: 1,
+    borderRadius: 12,
+    backgroundColor: '#faf9f7',
+    paddingHorizontal: 14,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  navButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: '#d9d8d7',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  monthLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 24,
+    color: '#141414',
+  },
+  weekdayRow: {
+    flexDirection: 'row',
+  },
+  weekdayText: {
+    flex: 1,
+    textAlign: 'center',
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '500',
+    color: '#101828',
+  },
+  daysGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  dayCell: {
+    width: '14.28%',
+    aspectRatio: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 20,
+  },
+  dayText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  bottomPanel: {
+    flexDirection: 'row',
+    padding: 16,
+    gap: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#e9e8e7',
+  },
+  actionButton: {
+    flex: 1,
+    height: 40,
+    borderRadius: 16,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/components/DropdownSelect.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import {
+  FlatList,
+  Pressable,
+  StyleSheet,
+  View,
+  type ViewProps,
+} from 'react-native';
+
+import { useTheme } from '../theme';
+import { radius } from '../tokens/radius';
+import { spacing } from '../tokens/spacing';
+import { elevation } from '../tokens/elevation';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+export interface DropdownItem {
+  key: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface DropdownSelectProps extends ViewProps {
+  /** List of items to display. */
+  items: DropdownItem[];
+  /** Currently selected item key. */
+  value?: string | null;
+  /** Called when an item is selected. */
+  onSelect?: (item: DropdownItem) => void;
+  /** Show the dropdown list. */
+  open?: boolean;
+  /** Max visible items before scroll. */
+  maxVisible?: number;
+}
+
+/**
+ * Dropdown select list with check indicator and hover/focus states.
+ *
+ * ```tsx
+ * <DropdownSelect
+ *   items={[{ key: '1', label: 'Option 1' }]}
+ *   value="1"
+ *   onSelect={handleSelect}
+ * />
+ * ```
+ */
+export function DropdownSelect({
+  items,
+  value,
+  onSelect,
+  open = true,
+  maxVisible = 5,
+  style,
+  ...rest
+}: DropdownSelectProps) {
+  const theme = useTheme();
+  const [hoveredKey, setHoveredKey] = useState<string | null>(null);
+
+  if (!open) return null;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.backgroundScreen,
+          borderColor: theme.colors.shapeSecondary,
+        },
+        elevation.xl,
+        style,
+      ]}
+      {...rest}>
+      <FlatList
+        data={items}
+        keyExtractor={(item) => item.key}
+        bounces={false}
+        showsVerticalScrollIndicator={items.length > maxVisible}
+        nestedScrollEnabled
+        renderItem={({ item }) => {
+          const isSelected = item.key === value;
+          const isHovered = item.key === hoveredKey;
+          const isDisabled = item.disabled;
+
+          let itemBg: string;
+
+          if (isHovered) {
+            itemBg = theme.colors.shapeSecondary;
+          } else if (isSelected) {
+            itemBg = theme.colors.backgroundScreen;
+          } else {
+            itemBg = 'transparent';
+          }
+
+          return (
+            <View>
+              <Pressable
+                disabled={isDisabled}
+                onPress={() => onSelect?.(item)}
+                onHoverIn={() => setHoveredKey(item.key)}
+                onHoverOut={() => setHoveredKey(null)}
+                style={() => [
+                  styles.item,
+                  { backgroundColor: itemBg },
+                  isDisabled && styles.disabled,
+                ]}>
+                <Text
+                  variant="body"
+                  color="textSecondary"
+                  textStyle={[
+                    styles.itemLabel,
+                    { color: isDisabled ? theme.colors.textTertiary : theme.colors.textSecondary },
+                  ]}>
+                  {item.label}
+                </Text>
+                {isSelected && (
+                  <Icon name="check" size={16} color={theme.colors.textSecondary} />
+                )}
+              </Pressable>
+              {item.key !== items[items.length - 1]?.key && (
+                <View
+                  style={[styles.divider, { backgroundColor: theme.colors.shapePrimary }]}
+                />
+              )}
+            </View>
+          );
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: radius.sm,
+    borderWidth: 1,
+    padding: spacing.xs,
+    gap: spacing.xxs,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.lg,
+    height: 40,
+    borderRadius: radius.sm,
+  },
+  disabled: {
+    opacity: 0.32,
+  },
+  itemLabel: {
+    fontSize: 14,
+    lineHeight: 21,
+  },
+  divider: {
+    height: 1,
+    marginHorizontal: spacing.lg,
+  },
+});

package/components/Icon.tsx

@@ -0,0 +1,131 @@
+import {
+  CaretDown as CaretDownIcon,
+  CaretUp as CaretUpIcon,
+  CaretRight as CaretRightIcon,
+  Check as CheckIcon,
+  XCircle as XCircleIcon,
+  X as XIcon,
+  WarningCircle as WarningCircleIcon,
+  WarningOctagon as WarningOctagonIcon,
+  House as HouseIcon,
+  Bell as BellIcon,
+  Broadcast as BroadcastIcon,
+  ChatCircle as ChatCircleIcon,
+  CheckCircle as CheckCircleIcon,
+  Truck as TruckIcon,
+  CreditCard as CreditCardIcon,
+  Crown as CrownIcon,
+  CrosshairSimple as CrosshairSimpleIcon,
+  Gauge as GaugeIcon,
+  Lightning as LightningIcon,
+  ThumbsUp as ThumbsUpIcon,
+  MapTrifold as MapTrifoldIcon,
+  MapPin as MapPinIcon,
+  Medal as MedalIcon,
+  Microphone as MicrophoneIcon,
+  SpeakerSimpleX as SpeakerSimpleXIcon,
+  Play as PlayIcon,
+  Plus as PlusIcon,
+  RadioButton as RadioButtonIcon,
+  Radio as RadioIcon,
+  ChartBar as ChartBarIcon,
+  Receipt as ReceiptIcon,
+  PathIcon,
+  MagnifyingGlass as MagnifyingGlassIcon,
+  GearSix as GearSixIcon,
+  ShareNetwork as ShareNetworkIcon,
+  Star as StarIcon,
+  SignOut as SignOutIcon,
+  SteeringWheel as SteeringWheelIcon,
+  Timer as TimerIcon,
+  Pencil as PencilIcon,
+  User as UserIcon,
+  UserMinus as UserMinusIcon,
+  Users as UsersIcon,
+  Globe as GlobeIcon,
+  Wallet as WalletIcon,
+  Lock as LockIcon,
+} from "phosphor-react-native";
+
+/**
+ * Icon name registry. Maps a string name to a Phosphor icon component.
+ * Add new icons here as they're needed across the design system.
+ */
+export const iconMap = {
+  "caret-down": CaretDownIcon,
+  "caret-up": CaretUpIcon,
+  "caret-right": CaretRightIcon,
+  check: CheckIcon,
+  "x-circle": XCircleIcon,
+  x: XIcon,
+  "warning-circle": WarningCircleIcon,
+  "warning-octagon": WarningOctagonIcon,
+  house: HouseIcon,
+  bell: BellIcon,
+  broadcast: BroadcastIcon,
+  "chat-circle": ChatCircleIcon,
+  "check-circle": CheckCircleIcon,
+  truck: TruckIcon,
+  "credit-card": CreditCardIcon,
+  crown: CrownIcon,
+  "crosshair-simple": CrosshairSimpleIcon,
+  gauge: GaugeIcon,
+  lightning: LightningIcon,
+  "thumbs-up": ThumbsUpIcon,
+  "map-trifold": MapTrifoldIcon,
+  "map-pin": MapPinIcon,
+  medal: MedalIcon,
+  microphone: MicrophoneIcon,
+  "speaker-simple-x": SpeakerSimpleXIcon,
+  play: PlayIcon,
+  plus: PlusIcon,
+  "radio-button": RadioButtonIcon,
+  radio: RadioIcon,
+  "chart-bar": ChartBarIcon,
+  receipt: ReceiptIcon,
+  path: PathIcon,
+  "magnifying-glass": MagnifyingGlassIcon,
+  "gear-six": GearSixIcon,
+  "share-network": ShareNetworkIcon,
+  star: StarIcon,
+  "sign-out": SignOutIcon,
+  "steering-wheel": SteeringWheelIcon,
+  timer: TimerIcon,
+  pencil: PencilIcon,
+  user: UserIcon,
+  "user-minus": UserMinusIcon,
+  users: UsersIcon,
+  globe: GlobeIcon,
+  wallet: WalletIcon,
+  lock: LockIcon,
+} as const;
+
+export type IconName = keyof typeof iconMap;
+
+export interface IconProps {
+  /** Icon name from the registry. */
+  name: IconName;
+  /** Icon size in pixels. Defaults to 16. */
+  size?: number;
+  /** Icon color. */
+  color?: string;
+  /** Icon weight / stroke thickness. */
+  weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+}
+
+/**
+ * Design-system icon component backed by Phosphor.
+ *
+ * ```tsx
+ * <Icon name="caret-down" size={16} color="#737271" />
+ * ```
+ */
+export function Icon({ name, size = 16, color, weight = "regular" }: IconProps) {
+  const IconComponent = iconMap[name];
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  return <IconComponent size={size} color={color} weight={weight} />;
+}