@lotics/ui 1.27.0 → 2.0.0

package/src/picker_menu.tsx

@@ -1,16 +1,14 @@
-import { StyleSheet, View, ScrollView, Pressable } from "react-native";
+import { StyleSheet, View, ScrollView, Pressable, TextInput } from "react-native";
 import { useState, useCallback, useMemo, useRef } from "react";
 import { colors } from "./colors";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { Checkbox } from "./checkbox";
 import { Spacer } from "./spacer";
-import { TextInputField } from "./text_input_field";
 import { MenuButton } from "./menu_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { PickerOption, PickerValue, PickerOnValueChange, PickerOnClose } from "./picker";
 import { useScreenSize } from "./use_screen_size";
-import { customOptionFor } from "./custom_option";
 
 export interface PickerMenuProps<T extends string = string, MULTI extends boolean = false> {
   testID?: string;
@@ -21,31 +19,13 @@ export interface PickerMenuProps<T extends string = string, MULTI extends boolea
   onClose?: PickerOnClose<T, MULTI>;
   onRequestClose?: () => void;
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
-  /** Enable search input to filter options */
-  enableSearch?: boolean;
-  /** Single-select + search only: when the typed query matches no option, append
-   *  a trailing row that selects the raw query as a custom value (free entry).
-   *  `onValueChange` then receives the typed string. */
-  allowCustom?: boolean;
-  /** Label for the free-entry row (default: the raw query). Return `null` to
-   *  suppress the row for a given query — e.g. while it is still incomplete or
-   *  invalid — so "add" only appears when it is a meaningful thing to add. */
-  customOptionLabel?: (query: string) => string | null;
   enableSelectAll?: boolean;
   includeEmptyOption?: boolean;
-  /** Called whenever the search text changes. Provide it to drive server-side
-   *  search — the consumer refreshes `options` in response. Omit for the default
-   *  local filtering of `options`. */
-  onSearchChange?: (query: string) => void;
-  /** When true, `options` are treated as already filtered (server-side), so the
-   *  local label filter is skipped and the full result set shows. */
-  serverFiltered?: boolean;
-  /** Show a loading indicator (e.g. while async results are in flight). */
+  /** Show a loading indicator (e.g. while async results are in flight — the
+   *  parent owns fetching and passes the resulting `options`). */
   loading?: boolean;
   /** Shown when there are no options and not loading. Default: "No results". */
   emptyText?: string;
-  /** Placeholder for the search input. Pass a translated string. Default: "Search..." */
-  searchPlaceholder?: string;
   /** Label for the "select all" link in multi-select mode. Default: "Select all" */
   selectAllLabel?: string;
   /** Label for the "deselect all" link in multi-select mode. Default: "Deselect all" */
@@ -53,8 +33,11 @@ export interface PickerMenuProps<T extends string = string, MULTI extends boolea
 }
 
 /**
- * The dropdown menu component for the custom picker.
- * Can be used standalone (inside a Popover) or as part of the Picker component.
+ * The option list for a Picker — a keyboard-navigable list with native-`<select>`
+ * typeahead (type to jump focus). It has NO search box: filtering a long/async
+ * list is the job of `Combobox`, whose input drives the search and passes the
+ * already-filtered `options` to render. Use standalone inside a Popover, or via
+ * the `Picker` component.
  */
 export function PickerMenu<T extends string, MULTI extends boolean = false>(
   props: PickerMenuProps<T, MULTI>,
@@ -69,15 +52,9 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
     onClose,
     onRequestClose,
     enableSelectAll,
-    enableSearch,
-    allowCustom,
-    customOptionLabel,
     includeEmptyOption,
-    onSearchChange,
-    serverFiltered,
     loading,
     emptyText = "No results",
-    searchPlaceholder = "Search...",
     selectAllLabel = "Select all",
     deselectAllLabel = "Deselect all",
   } = props;
@@ -101,38 +78,16 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
     };
   }, [multi, value]);
 
-  const [searchQuery, setSearchQuery] = useState("");
-
-  // Free entry: a trailing selectable row carrying the raw query as its value
-  // (recognised below for distinct styling). See `customOptionFor` for the rules.
-  const customOpt = useMemo(
-    () => customOptionFor({ allowCustom, multi, query: searchQuery, options, customOptionLabel }),
-    [allowCustom, multi, searchQuery, options, customOptionLabel],
-  );
-
-  const filteredOptions = useMemo(() => {
-    let result = options;
-    // Skip the local filter in server-driven mode — `options` already reflect
-    // the query for `searchQuery`.
-    if (enableSearch && searchQuery && !serverFiltered) {
-      const query = searchQuery.toLowerCase();
-      result = options.filter((opt) => opt && opt.label?.toLowerCase().includes(query));
-    }
-    if (includeEmptyOption && (!enableSearch || !searchQuery)) {
-      const emptyOption: PickerOption<T> = {
-        label: "",
-        value: "" as T,
-      };
-      result = [emptyOption, ...result];
-    }
-    if (customOpt) {
-      result = [...result, customOpt];
+  const displayOptions = useMemo(() => {
+    if (includeEmptyOption) {
+      const emptyOption: PickerOption<T> = { label: "", value: "" as T };
+      return [emptyOption, ...options];
     }
-    return result;
-  }, [options, enableSearch, searchQuery, includeEmptyOption, serverFiltered, customOpt]);
+    return options;
+  }, [options, includeEmptyOption]);
 
   const [focusedIndex, setFocusedIndex] = useState<number>(() => {
-    const selectedIndex = filteredOptions.findIndex((opt) => {
+    const selectedIndex = displayOptions.findIndex((opt) => {
       if (!opt || opt.disabled) return false;
       if (multi && Array.isArray(multiValue)) {
         return multiValue.includes(opt.value);
@@ -140,19 +95,10 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
       return opt.value === singleValue;
     });
     if (selectedIndex >= 0) return selectedIndex;
-    const firstValid = filteredOptions.findIndex((opt) => opt && !opt.disabled);
+    const firstValid = displayOptions.findIndex((opt) => opt && !opt.disabled);
     return firstValid >= 0 ? firstValid : 0;
   });
 
-  const handleSearchChange = useCallback(
-    (text: string) => {
-      setSearchQuery(text);
-      setFocusedIndex(0);
-      onSearchChange?.(text);
-    },
-    [onSearchChange],
-  );
-
   const handleClose = useCallback(() => {
     onRequestClose?.();
     if (onClose) {
@@ -168,13 +114,9 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
     (itemValue: T) => {
       if (!multi || !onValueChange) return;
       const currentValues = multiValue ?? [];
-      let newValue: T[];
-      if (currentValues.includes(itemValue)) {
-        newValue = currentValues.filter((v) => v !== itemValue);
-      } else {
-        newValue = [...currentValues, itemValue];
-      }
-
+      const newValue = currentValues.includes(itemValue)
+        ? currentValues.filter((v) => v !== itemValue)
+        : [...currentValues, itemValue];
       (onValueChange as (value: T[]) => void)(newValue);
     },
     [multi, multiValue, onValueChange],
@@ -216,8 +158,8 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
       switch (key) {
         case "ArrowDown": {
           let next = focusedIndex + 1;
-          while (next < filteredOptions.length) {
-            const opt = filteredOptions[next];
+          while (next < displayOptions.length) {
+            const opt = displayOptions[next];
             if (opt && !opt.disabled) {
               setFocusedIndex(next);
               scrollToIndex(next);
@@ -230,7 +172,7 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
         case "ArrowUp": {
           let next = focusedIndex - 1;
           while (next >= 0) {
-            const opt = filteredOptions[next];
+            const opt = displayOptions[next];
             if (opt && !opt.disabled) {
               setFocusedIndex(next);
               scrollToIndex(next);
@@ -241,14 +183,11 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
           return true;
         }
         case "Enter":
-          if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
-            const focusedOption = filteredOptions[focusedIndex];
+          if (focusedIndex >= 0 && focusedIndex < displayOptions.length) {
+            const focusedOption = displayOptions[focusedIndex];
             if (focusedOption && !focusedOption.disabled) {
-              if (multi) {
-                handleMultiSelect(focusedOption.value);
-              } else {
-                handleSingleSelect(focusedOption.value);
-              }
+              if (multi) handleMultiSelect(focusedOption.value);
+              else handleSingleSelect(focusedOption.value);
             }
           }
           return true;
@@ -262,90 +201,108 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
           return false;
       }
     },
-    [focusedIndex, filteredOptions, multi, handleMultiSelect, handleSingleSelect, handleClose, scrollToIndex],
+    [focusedIndex, displayOptions, multi, handleMultiSelect, handleSingleSelect, handleClose, scrollToIndex],
   );
 
-  const hasOptions = filteredOptions.some((opt) => opt && !opt.disabled);
-  const hasSelectedOptions = multi && Array.isArray(multiValue) && multiValue.length > 0;
-  const showSelectAllLink = multi && hasOptions && enableSelectAll;
-  const showDeselectAllLink = multi && hasOptions && hasSelectedOptions && enableSelectAll;
-  const showLinks = showSelectAllLink || showDeselectAllLink;
+  // Native-select typeahead: accumulate printable keys into a short-lived buffer
+  // and jump focus to the first option whose label starts with it.
+  const typeaheadBufferRef = useRef("");
+  const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const handleSearchKeyPress = useCallback(
+  const handleTypeahead = useCallback(
+    (char: string) => {
+      if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
+      typeaheadBufferRef.current += char.toLowerCase();
+      const buffer = typeaheadBufferRef.current;
+      const match = displayOptions.findIndex(
+        (opt) => opt && !opt.disabled && (opt.label ?? "").toLowerCase().startsWith(buffer),
+      );
+      if (match >= 0) {
+        setFocusedIndex(match);
+        scrollToIndex(match);
+      }
+      typeaheadTimerRef.current = setTimeout(() => {
+        typeaheadBufferRef.current = "";
+      }, 600);
+    },
+    [displayOptions, scrollToIndex],
+  );
+
+  const handleKeyPress = useCallback(
     (e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-      if (handleKeyNavigation(e.nativeEvent.key)) {
+      const key = e.nativeEvent.key;
+      if (handleKeyNavigation(key)) {
         e.preventDefault();
+        return;
       }
+      if (key.length === 1) handleTypeahead(key);
     },
-    [handleKeyNavigation],
+    [handleKeyNavigation, handleTypeahead],
   );
 
+  const hasOptions = displayOptions.some((opt) => opt && !opt.disabled);
+  const hasSelectedOptions = multi && Array.isArray(multiValue) && multiValue.length > 0;
+  const showSelectAllLink = multi && hasOptions && enableSelectAll;
+  const showDeselectAllLink = multi && hasOptions && hasSelectedOptions && enableSelectAll;
+  const showLinks = showSelectAllLink || showDeselectAllLink;
+
   return (
     <View
       testID={testID}
       style={[styles.container, screenSize.small ? { flex: 1 } : { maxHeight: 480 }]}
     >
-      {enableSearch && (
-        <TextInputField
-          autoFocus={!screenSize.small}
-          icon="search"
-          value={searchQuery}
-          onChangeText={handleSearchChange}
-          placeholder={searchPlaceholder}
-          placeholderTextColor={colors.zinc["400"]}
-          autoCapitalize="none"
-          autoCorrect={false}
-          onKeyPress={handleSearchKeyPress}
-        />
-      )}
+      {/* Visually hidden but focusable: captures typeahead + arrow/enter keys
+          while the popover is open, giving native-<select> behavior. */}
+      <TextInput
+        autoFocus={!screenSize.small}
+        value=""
+        onChangeText={() => {}}
+        onKeyPress={handleKeyPress}
+        style={styles.typeaheadCapture}
+      />
       <ScrollView ref={scrollViewRef} style={styles.optionsList}>
         {loading && (
           <View style={styles.statusRow}>
             <ActivityIndicator />
           </View>
         )}
-        {!loading && filteredOptions.length === 0 && (
+        {!loading && displayOptions.length === 0 && (
           <View style={styles.statusRow}>
             <Text color="zinc-500" size="sm">
               {emptyText}
             </Text>
           </View>
         )}
-        {filteredOptions.map((item, index) => {
+        {displayOptions.map((item, index) => {
           if (!item) return null;
 
           const isSelected = multi
             ? Array.isArray(multiValue) && multiValue.includes(item.value)
             : item.value === singleValue;
           const isFocused = index === focusedIndex;
-          const isCustom = !!customOpt && item.value === customOpt.value;
 
           return (
             <MenuButton
               key={item.value}
-              testID={isCustom ? "picker-custom-option" : item.testID || `picker-option-${item.value}`}
+              testID={item.testID || `picker-option-${item.value}`}
               icon={multi ? <Checkbox checked={isSelected} /> : undefined}
               title={
-                renderOptionContent && !isCustom ? (
+                renderOptionContent ? (
                   renderOptionContent(item)
                 ) : (
-                  <Text userSelect="none" numberOfLines={1} color={isCustom ? "zinc-500" : undefined}>
+                  <Text userSelect="none" numberOfLines={1}>
                     {item.label}
                   </Text>
                 )
               }
               right={
-                isCustom ? (
-                  <Icon name="plus" size={16} color={colors.zinc["400"]} />
-                ) : !multi && isSelected ? (
+                !multi && isSelected ? (
                   <Icon name="check" size={18} color={colors.zinc["950"]} />
                 ) : undefined
               }
               focused={isFocused}
               disabled={item.disabled}
-              onPress={() =>
-                multi ? handleMultiSelect(item.value) : handleSingleSelect(item.value)
-              }
+              onPress={() => (multi ? handleMultiSelect(item.value) : handleSingleSelect(item.value))}
               onHoverIn={() => setFocusedIndex(index)}
               style={styles.option}
             />
@@ -397,4 +354,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingVertical: 16,
   },
+  typeaheadCapture: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
 });

package/src/switcher.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useState } from "react";
-import { Pressable, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { Icon } from "./icon";
 import { MenuButton } from "./menu_button";
+import { PressableHighlight } from "./pressable_highlight";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Stack } from "./stack";
 import { Text } from "./text";
@@ -67,12 +68,12 @@ export function Switcher(props: SwitcherProps) {
   return (
     <Popover open={open} onOpenChange={setOpen} side={side} align={align}>
       <PopoverTrigger>
-        <Pressable style={[styles.trigger, { maxWidth: maxTriggerWidth }]}>
+        <PressableHighlight style={[styles.trigger, { maxWidth: maxTriggerWidth }]}>
           <Text size="sm" weight="medium" color="zinc-700" numberOfLines={1}>
             {label}
           </Text>
           <Icon name="chevrons-up-down" size={14} color={colors.zinc["500"]} />
-        </Pressable>
+        </PressableHighlight>
       </PopoverTrigger>
       <PopoverContent>
         <Stack style={styles.popoverBody}>

package/src/chart_area.tsx

@@ -1,105 +0,0 @@
-import { useId } from "react";
-import { View } from "react-native";
-import {
-  Area,
-  AreaChart,
-  CartesianGrid,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { colors } from "./colors";
-import { useLoticsTheme } from "./theme";
-import { chartAxisTickStyle, chartTooltipLabelStyle, chartTooltipStyle } from "./chart_internals";
-
-interface ChartAreaProps<T> {
-  data: T[];
-  /** Property to use as the X-axis category (e.g. month label). */
-  xKey: keyof T & string;
-  /** Property to use as the Y-axis value. */
-  yKey: keyof T & string;
-  /** Pixel height. Default 200. Charts shorter than ~120 lose readability;
-   * taller than ~280 dominate the card. */
-  height?: number;
-  /** Override the theme accent for this chart instance. */
-  color?: string;
-  /** Format the Y value in tooltips. Defaults to `Intl.NumberFormat` for
-   * numbers, identity for strings. */
-  formatValue?: (value: number) => string;
-  /** Label shown next to the value in the tooltip. Default `Value`. */
-  valueLabel?: string;
-}
-
-/**
- * Shadcn-style area chart — gradient fill, dashed horizontal-only
- * gridlines, clean axes (no axisLine, no tickLine), tooltip with the
- * standard chart tooltip chrome.
- *
- * Defaults pulled from the `useLoticsTheme()` accent so consumers don't
- * need to think about color choice. Override via the `color` prop for
- * one-off charts that need a different hue.
- *
- * Why a wrapper instead of just exposing Recharts to consumers: the
- * "shadcn pattern" is a dozen non-obvious Recharts props (axisLine={false},
- * tickLine={false}, monotone interpolation, gradient stops at 5% and 95%,
- * stroke-dasharray "3 3" on grid, …). Without the wrapper, every
- * consumer has to remember the full recipe; with it, they pass data and
- * get the polish.
- */
-export function ChartArea<T extends Record<string, unknown>>(props: ChartAreaProps<T>) {
-  const { data, xKey, yKey, height = 200, color, formatValue, valueLabel = "Value" } = props;
-  const theme = useLoticsTheme();
-  const fill = color ?? theme.accent;
-  // `useId` guarantees the gradient `id` is unique even when multiple
-  // ChartArea instances render on the same page — without it, two charts
-  // would share the same `url(#revenueFill)` and the second would lose
-  // its gradient.
-  const gradientId = `chartArea-${useId()}`;
-  return (
-    <View style={{ height }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={data} margin={{ top: 12, right: 8, left: 8, bottom: 0 }}>
-          <defs>
-            {/* 3-stop gradient: deeper top (55%), accelerated mid-fade,
-                clean bottom. Single 5%→95% linear stop reads as "tinted",
-                3-stop with the middle inflection at 50%/18% reads as
-                "designed". Stripe / Mercury use the multi-stop shape; the
-                eye picks up the non-linear falloff as intentional. */}
-            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor={fill} stopOpacity={0.55} />
-              <stop offset="50%" stopColor={fill} stopOpacity={0.18} />
-              <stop offset="100%" stopColor={fill} stopOpacity={0} />
-            </linearGradient>
-          </defs>
-          <CartesianGrid vertical={false} stroke={colors.zinc[200]} strokeDasharray="3 3" />
-          <XAxis
-            dataKey={xKey as string}
-            axisLine={false}
-            tickLine={false}
-            tickMargin={10}
-            tick={chartAxisTickStyle}
-          />
-          <YAxis hide />
-          <Tooltip
-            cursor={{ stroke: colors.zinc[300], strokeDasharray: "3 3" }}
-            contentStyle={chartTooltipStyle}
-            labelStyle={chartTooltipLabelStyle}
-            formatter={(val: unknown) => {
-              if (typeof val !== "number") return [String(val), valueLabel];
-              return [formatValue ? formatValue(val) : val.toLocaleString(), valueLabel];
-            }}
-          />
-          <Area
-            type="monotone"
-            dataKey={yKey as string}
-            stroke={fill}
-            strokeWidth={2.5}
-            fill={`url(#${gradientId})`}
-            animationDuration={600}
-          />
-        </AreaChart>
-      </ResponsiveContainer>
-    </View>
-  );
-}

package/src/chart_bar.tsx

@@ -1,154 +0,0 @@
-import { View } from "react-native";
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from "recharts";
-import { colors } from "./colors";
-import { useLoticsTheme } from "./theme";
-import {
-  chartAxisTickStyle,
-  chartTooltipLabelStyle,
-  chartTooltipStyle,
-  chartYAxisCategoryTickStyle,
-} from "./chart_internals";
-
-interface ChartBarProps<T> {
-  data: T[];
-  /** Property to use as the category axis. */
-  categoryKey: keyof T & string;
-  /** Property to use as the value axis. */
-  valueKey: keyof T & string;
-  /** Per-row fill color. Optional — when omitted, all bars use the theme
-   * accent. Set this when each category needs its own color (funnel
-   * stages, status breakdowns, etc.). */
-  fillKey?: keyof T & string;
-  /** Orientation. Default `vertical` (category on X, value on Y). Use
-   * `horizontal` for "rank by value" lists where category names are
-   * long (member names, account labels). */
-  orientation?: "vertical" | "horizontal";
-  /** Pixel height. Default 220 vertical / row-count × 56 horizontal.
-   * Pass explicit value for fixed-height layouts. */
-  height?: number;
-  /** Override the theme accent for this chart instance. */
-  color?: string;
-  /** Format the value in tooltips + value labels. */
-  formatValue?: (value: number) => string;
-  /** Label shown next to the value in the tooltip. Default `Value`. */
-  valueLabel?: string;
-}
-
-/**
- * Shadcn-style bar chart. Vertical (categories on X axis) is the default;
- * pass `orientation="horizontal"` for rank-by-value lists where labels are
- * long.
- *
- * Vertical: rounded TOP corners only (radius 6) — the shadcn pattern.
- * Horizontal: rounded RIGHT corners only.
- *
- * Per-bar colors via `fillKey`: each data row carries its own color. Use
- * for funnel/category breakdowns. Omit for single-hue bar charts (the
- * theme accent fills every bar).
- */
-export function ChartBar<T extends Record<string, unknown>>(props: ChartBarProps<T>) {
-  const {
-    data,
-    categoryKey,
-    valueKey,
-    fillKey,
-    orientation = "vertical",
-    height,
-    color,
-    formatValue,
-    valueLabel = "Value",
-  } = props;
-  const theme = useLoticsTheme();
-  const fill = color ?? theme.accent;
-  const isHorizontal = orientation === "horizontal";
-  const resolvedHeight = height ?? (isHorizontal ? Math.max(120, data.length * 56) : 220);
-  return (
-    <View style={{ height: resolvedHeight }}>
-      <ResponsiveContainer width="100%" height="100%">
-        <BarChart
-          data={data}
-          layout={isHorizontal ? "vertical" : "horizontal"}
-          margin={
-            isHorizontal
-              ? { top: 4, right: 40, left: 4, bottom: 4 }
-              : { top: 8, right: 0, left: 0, bottom: 0 }
-          }
-          barCategoryGap={isHorizontal ? "35%" : undefined}
-        >
-          <CartesianGrid
-            vertical={isHorizontal ? false : false}
-            horizontal={isHorizontal ? false : true}
-            stroke={colors.zinc[200]}
-            strokeDasharray="3 3"
-          />
-          {isHorizontal ? (
-            <>
-              <XAxis type="number" hide />
-              <YAxis
-                type="category"
-                dataKey={categoryKey as string}
-                axisLine={false}
-                tickLine={false}
-                width={160}
-                tick={chartYAxisCategoryTickStyle}
-              />
-            </>
-          ) : (
-            <>
-              {/* Recharts v3's dataKey expects a TypedDataKey resolved from the
-                  generic; our wrapper is generic over T so we pass the raw
-                  string key. Cast at the boundary — consumers' data shape is
-                  validated via the categoryKey: keyof T constraint. */}
-              <XAxis
-                dataKey={categoryKey as string}
-                axisLine={false}
-                tickLine={false}
-                tickMargin={8}
-                tick={chartAxisTickStyle}
-              />
-              <YAxis hide />
-            </>
-          )}
-          <Tooltip
-            cursor={{ fill: colors.zinc[100] }}
-            contentStyle={chartTooltipStyle}
-            labelStyle={chartTooltipLabelStyle}
-            formatter={(val: unknown) => {
-              if (typeof val !== "number") return [String(val), valueLabel];
-              return [formatValue ? formatValue(val) : val.toLocaleString(), valueLabel];
-            }}
-          />
-          <Bar
-            dataKey={valueKey as string}
-            fill={fill}
-            radius={isHorizontal ? [0, 4, 4, 0] : [6, 6, 0, 0]}
-            label={
-              isHorizontal
-                ? {
-                    position: "right",
-                    fill: colors.zinc[700],
-                    fontSize: 13,
-                    fontWeight: 500,
-                  }
-                : undefined
-            }
-          >
-            {fillKey &&
-              data.map((row, i) => (
-                <Cell key={i} fill={String(row[fillKey] ?? fill)} />
-              ))}
-          </Bar>
-        </BarChart>
-      </ResponsiveContainer>
-    </View>
-  );
-}