@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-UC2WGUP3.js → chunk-2SWKL3AJ.js}

@@ -1,198 +1,15 @@
-import { Sheet } from './chunk-ZVFE5QGU.js';
-import { Input } from './chunk-ITTYJZWX.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React2 from 'react';
-import { ScrollView, View, Text, Pressable } from 'react-native';
+import { DEFAULT_LABELS, MonthList } from './chunk-DW3L54DQ.js';
+import { Sheet } from './chunk-QYPE5JX3.js';
+import { Input } from './chunk-7BUIKDD6.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React from 'react';
+import { View, Text, Pressable, ScrollView } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { monthGrid, weekdayOrder, WEEKDAY_ABBR, dayDisabled, WEEKDAY_NAMES, dayLabel, dateZone, resolveDateValue, validateDateValue, DATE_PRESETS, PRESET_GROUP_ORDER, valueLabel, preset, timeLabel, durationLabel, stamp, rangeLabel, absolute, endOf } from '@btndprojects/loam-date';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { dateZone, resolveDateValue, validateDateValue, DATE_PRESETS, PRESET_GROUP_ORDER, valueLabel, presetGroupLabel, presetLabel, preset, timeLabel, durationLabel, stamp, rangeLabel, absolute, endOf } from '@btndprojects/loam-date';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-function MonthList({
-  Z,
-  anchorMs,
-  radius,
-  ctx,
-  from,
-  to,
-  constraints,
-  dayMeta,
-  weekNumbers = false,
-  onPick,
-  scrollNonce = 0
-}) {
-  const { styles } = useStyles(sheet);
-  const months = React2.useMemo(() => {
-    const out = [];
-    for (let i = -radius; i <= radius; i += 1) {
-      out.push(monthGrid(Z, Z.addMonths(Z.startOfMonth(anchorMs), i), ctx));
-    }
-    return out;
-  }, [Z, anchorMs, radius, ctx]);
-  const order = weekdayOrder(ctx.weekStartsOn ?? 1);
-  const scroller = React2.useRef(null);
-  const offsets = React2.useRef([]);
-  const anchorKey = Z.monthKey(anchorMs);
-  React2.useEffect(() => {
-    const y = offsets.current[radius];
-    if (y != null) scroller.current?.scrollTo({ y, animated: false });
-  }, [anchorKey, radius, scrollNonce]);
-  const measure = (index) => (event) => {
-    offsets.current[index] = event.nativeEvent.layout.y;
-    if (index === radius) scroller.current?.scrollTo({ y: event.nativeEvent.layout.y, animated: false });
-  };
-  return /* @__PURE__ */ jsx(ScrollView, { ref: scroller, showsVerticalScrollIndicator: true, children: months.map((item, index) => /* @__PURE__ */ jsxs(View, { style: styles.month, onLayout: measure(index), children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.monthLabel, role: "heading", ...{ "aria-level": 3 }, children: item.label }),
-    /* @__PURE__ */ jsxs(View, { style: styles.weekdayRow, children: [
-      weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber }) : null,
-      order.map((dow) => /* @__PURE__ */ jsx(View, { style: styles.weekdayCell, children: /* @__PURE__ */ jsx(Text, { style: styles.weekdayText, ...{ "aria-hidden": true }, children: WEEKDAY_ABBR[dow] }) }, dow))
-    ] }),
-    item.weeks.map((week) => /* @__PURE__ */ jsxs(View, { style: styles.weekRow, children: [
-      weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber, children: /* @__PURE__ */ jsx(Text, { style: styles.weekNumberText, children: week.week }) }) : null,
-      week.days.map(
-        (day) => (
-          // A day borrowed from the neighbouring month is **not** rendered
-          // as a cell here, unlike in the web picker's two-month view. In a
-          // continuous scroll that month is a thumb-flick away, so a
-          // borrowed day is not a shortcut — it is the same date appearing
-          // twice, pickable twice, and announced twice. The blank keeps the
-          // six-row height so the grid does not jump.
-          day.inMonth ? /* @__PURE__ */ jsx(
-            DayCell,
-            {
-              Z,
-              day,
-              ctx,
-              from,
-              to,
-              constraints,
-              meta: dayMeta?.(day.ms),
-              onPick
-            },
-            day.key
-          ) : /* @__PURE__ */ jsx(View, { style: styles.dayBlank }, day.key)
-        )
-      )
-    ] }, `${week.week}-${week.days[0].key}`))
-  ] }, `${item.y}-${item.mo}`)) });
-}
-function DayCell({
-  Z,
-  day,
-  ctx,
-  from,
-  to,
-  constraints,
-  meta,
-  onPick
-}) {
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const reason = dayDisabled(Z, day.ms, constraints, ctx, meta);
-  const disabled = reason !== false || meta?.loading === true;
-  const today = Z.sameDay(day.ms, ctx.now ?? Date.now());
-  const dayEnd = Z.endOfDay(day.ms);
-  const isStart = from != null && Z.sameDay(day.ms, from);
-  const isEnd = to != null && Z.sameDay(day.ms, to - 1);
-  const inside = from != null && to != null && day.ms >= from && dayEnd < to;
-  const selection = isStart && isEnd ? "both" : isStart ? "start" : isEnd ? "end" : inside ? "inside" : "none";
-  const role = selection === "both" ? ", the whole range" : selection === "start" ? ", range start" : selection === "end" ? ", range end" : selection === "inside" ? ", in the range" : "";
-  const name = `${WEEKDAY_NAMES[day.dow]} ${dayLabel(Z, day.ms, { longMonth: true, locale: ctx.locale })}${today ? ", today" : ""}${role}${reason ? `, unavailable: ${reason}` : ""}`;
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel: name,
-      accessibilityState: { selected: selection !== "none", disabled },
-      disabled,
-      onPress: () => onPick(day.ms),
-      style: ({ pressed }) => [
-        styles.day,
-        inside && styles.dayInside,
-        (isStart || isEnd) && styles.dayEnd,
-        pressed && !disabled && styles.pressed
-      ],
-      children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            style: [
-              styles.dayText,
-              today && styles.dayToday,
-              (isStart || isEnd) && styles.dayEndText,
-              disabled && styles.dayDisabled
-            ],
-            children: day.day
-          }
-        ),
-        meta?.density != null && meta.density > 0 ? /* @__PURE__ */ jsx(
-          View,
-          {
-            style: [
-              styles.densityBar,
-              {
-                height: Math.max(theme.borderWidth.heavy, Math.round(meta.density * theme.space.s2))
-              }
-            ]
-          }
-        ) : null
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  month: { gap: theme.space.s1, paddingBottom: theme.space.s4 },
-  monthLabel: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.headline.fontSize,
-    lineHeight: theme.type.headline.lineHeight,
-    fontWeight: theme.type.headline.fontWeight,
-    color: theme.color.text,
-    paddingVertical: theme.space.s1
-  },
-  weekdayRow: { flexDirection: "row" },
-  weekdayCell: { flex: 1, alignItems: "center", paddingVertical: theme.space[2] },
-  weekdayText: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.caption2.fontSize,
-    lineHeight: theme.type.caption2.lineHeight,
-    color: theme.color.text2
-  },
-  weekRow: { flexDirection: "row", alignItems: "stretch" },
-  weekNumber: { width: theme.space.s6, alignItems: "center", justifyContent: "center" },
-  weekNumberText: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3
-  },
-  day: {
-    flex: 1,
-    minHeight: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.space[1]
-  },
-  // The in-range wash is a state layer, not a tint: it has to composite over the
-  // sheet surface and over a pressed cell without either turning muddy.
-  dayInside: { backgroundColor: theme.state.selected },
-  dayEnd: { backgroundColor: theme.color.accent, borderRadius: theme.radius.md },
-  dayText: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.subheadline.fontSize,
-    lineHeight: theme.type.subheadline.lineHeight,
-    color: theme.color.text
-  },
-  dayBlank: { flex: 1, minHeight: theme.tapMin },
-  dayToday: { fontWeight: theme.fontWeight.bold, color: theme.color.accentOnSoft },
-  dayEndText: { color: theme.color.accentInk, fontWeight: theme.fontWeight.bold },
-  dayDisabled: { color: theme.color.text3, textDecorationLine: "line-through" },
-  densityBar: {
-    width: theme.space.s3,
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.accent
-  },
-  pressed: { opacity: theme.state.pressedOpacity }
-}));
 var MONTH_RADIUS = 6;
 function DateRangePicker({
   value: controlled,
@@ -200,7 +17,7 @@ function DateRangePicker({
   onChange,
   mode = "range",
   label,
-  placeholder = "Any time",
+  placeholder: placeholderProp,
   presets = true,
   customPresets,
   constraints,
@@ -209,20 +26,26 @@ function DateRangePicker({
   weekNumbers = false,
   time = false,
   ampm,
-  locale,
+  locale: localeProp,
   timeZone,
   now,
   dayMeta,
   clearable = true,
   disabled = false,
   applyMode = "apply",
-  style
+  style,
+  motion = "full",
+  labels: labelsProp
 }) {
-  const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
-  const Z = React2.useMemo(() => dateZone(timeZone), [timeZone]);
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("dateRangePicker", DEFAULT_LABELS, labelsProp);
+  const contextLocale = useLoamLocale();
+  const locale = localeProp ?? contextLocale;
+  const placeholder = placeholderProp ?? labels.anyTime;
+  const theme = useLoamTheme("date-range-picker");
+  const Z = React.useMemo(() => dateZone(timeZone), [timeZone]);
   const clock = now ?? Date.now();
-  const ctx = React2.useMemo(
+  const ctx = React.useMemo(
     () => ({
       Z,
       now: clock,
@@ -235,30 +58,41 @@ function DateRangePicker({
       placeholder,
       time,
       locale,
-      customPresets
+      customPresets,
+      labels
     }),
-    [Z, clock, weekStartsOn, fiscalStart, time, ampm, mode, constraints, placeholder, locale, customPresets]
+    [
+      Z,
+      clock,
+      weekStartsOn,
+      fiscalStart,
+      time,
+      ampm,
+      mode,
+      constraints,
+      placeholder,
+      locale,
+      customPresets,
+      labels
+    ]
   );
-  const [internal, setInternal] = React2.useState(defaultValue);
+  const [internal, setInternal] = React.useState(defaultValue);
   const committed = controlled !== void 0 ? controlled : internal;
-  const [open, setOpen] = React2.useState(false);
-  const [draft, setDraft] = React2.useState(committed);
-  const [anchor, setAnchor] = React2.useState(null);
-  const [view, setView] = React2.useState(null);
-  const [viewNonce, setViewNonce] = React2.useState(0);
+  const [open, setOpen] = React.useState(false);
+  const [draft, setDraft] = React.useState(committed);
+  const [anchor, setAnchor] = React.useState(null);
+  const [view, setView] = React.useState(null);
+  const [viewNonce, setViewNonce] = React.useState(0);
   const openSheet = () => {
     setDraft(committed);
     setAnchor(null);
     setView(null);
     setOpen(true);
   };
-  const resolved = React2.useMemo(() => resolveDateValue(draft, ctx), [draft, ctx]);
-  const committedResolved = React2.useMemo(
-    () => resolveDateValue(committed, ctx),
-    [committed, ctx]
-  );
-  const validation = React2.useMemo(() => validateDateValue(draft, ctx), [draft, ctx]);
-  const commit = React2.useCallback(
+  const resolved = React.useMemo(() => resolveDateValue(draft, ctx), [draft, ctx]);
+  const committedResolved = React.useMemo(() => resolveDateValue(committed, ctx), [committed, ctx]);
+  const validation = React.useMemo(() => validateDateValue(draft, ctx), [draft, ctx]);
+  const commit = React.useCallback(
     (next) => {
       if (controlled === void 0) setInternal(next);
       onChange?.(next, resolveDateValue(next, ctx));
@@ -270,8 +104,8 @@ function DateRangePicker({
     setView(null);
     if (applyMode === "live") commit(next);
   };
-  const [startClock, setStartClock] = React2.useState(null);
-  const [endClock, setEndClock] = React2.useState(null);
+  const [startClock, setStartClock] = React.useState(null);
+  const [endClock, setEndClock] = React.useState(null);
   const pick = (ms) => {
     const dayStart = Z.startOfDay(ms);
     if (mode === "single") {
@@ -312,7 +146,7 @@ function DateRangePicker({
     const to = which === "end" && resolved.to != null ? withTime(Z, Z.startOfDay(resolved.to - 1), minutes) : resolved.to;
     setDraftValue(absolute(from, to, ctx.granularity));
   };
-  const rail = React2.useMemo(() => {
+  const rail = React.useMemo(() => {
     if (presets === false) return [];
     const all = [...DATE_PRESETS, ...customPresets ?? []];
     const allowed = Array.isArray(presets) ? all.filter((p) => presets.includes(p.id)) : all;
@@ -324,7 +158,7 @@ function DateRangePicker({
       )
     );
   }, [presets, customPresets, constraints?.disableFuture, time]);
-  const railGroups = React2.useMemo(() => {
+  const railGroups = React.useMemo(() => {
     const byGroup = /* @__PURE__ */ new Map();
     for (const p of rail) {
       const list = byGroup.get(p.group) ?? [];
@@ -345,8 +179,8 @@ function DateRangePicker({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: label ? `${label}, ${triggerLabel}` : triggerLabel,
-        accessibilityHint: "Double tap to change the date range",
+        accessibilityLabel: label ? labels.triggerNamed(label, triggerLabel) : triggerLabel,
+        accessibilityHint: labels.triggerHint,
         accessibilityState: { disabled },
         disabled,
         onPress: openSheet,
@@ -375,7 +209,7 @@ function DateRangePicker({
       {
         open,
         onClose: () => setOpen(false),
-        title: label ?? (mode === "single" ? "Pick a date" : "Pick a range"),
+        title: label ?? (mode === "single" ? labels.pickDate : labels.pickRange),
         detents: ["half", "full"],
         children: /* @__PURE__ */ jsxs(View, { style: styles.panel, children: [
           railGroups.length > 0 ? /* @__PURE__ */ jsx(
@@ -385,7 +219,7 @@ function DateRangePicker({
               showsHorizontalScrollIndicator: false,
               contentContainerStyle: styles.rail,
               children: railGroups.map(({ group, items }) => /* @__PURE__ */ jsxs(View, { style: styles.railGroup, children: [
-                /* @__PURE__ */ jsx(Text, { style: styles.railGroupLabel, children: group }),
+                /* @__PURE__ */ jsx(Text, { style: styles.railGroupLabel, children: presetGroupLabel(group, labels) }),
                 /* @__PURE__ */ jsx(View, { style: styles.railChips, children: items.map((p) => {
                   const on = activePreset === p.id;
                   return /* @__PURE__ */ jsx(
@@ -393,7 +227,7 @@ function DateRangePicker({
                     {
                       accessibilityRole: "button",
                       accessibilityState: { selected: on },
-                      accessibilityLabel: p.label,
+                      accessibilityLabel: presetLabel(p, labels),
                       onPress: () => {
                         setAnchor(null);
                         setDraftValue(preset(p.id));
@@ -403,7 +237,7 @@ function DateRangePicker({
                         on && styles.chipOn,
                         pressed && styles.pressed
                       ],
-                      children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, on && styles.chipTextOn], children: p.label })
+                      children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, on && styles.chipTextOn], children: presetLabel(p, labels) })
                     },
                     p.id
                   );
@@ -424,6 +258,8 @@ function DateRangePicker({
               dayMeta,
               weekNumbers,
               scrollNonce: viewNonce,
+              motion,
+              labels,
               onPick: pick
             }
           ) }),
@@ -434,27 +270,37 @@ function DateRangePicker({
                 size: "sm",
                 style: styles.clock,
                 placeholder: "09:00",
-                accessibilityLabel: "Start time, 24-hour",
+                accessibilityLabel: labels.startTime,
                 defaultValue: resolved.from != null ? timeLabel(Z, resolved.from, false) : "",
                 onChangeText: (text) => applyClock("start", text)
               }
             ),
-            /* @__PURE__ */ jsx(Text, { style: styles.clockDash, children: "to" }),
+            /* @__PURE__ */ jsx(Text, { style: styles.clockDash, children: labels.timeTo }),
             /* @__PURE__ */ jsx(
               Input,
               {
                 size: "sm",
                 style: styles.clock,
                 placeholder: "17:00",
-                accessibilityLabel: "End time, 24-hour",
+                accessibilityLabel: labels.endTime,
                 defaultValue: resolved.to != null ? timeLabel(Z, resolved.to, false) : "",
                 onChangeText: (text) => applyClock("end", text)
               }
             )
           ] }) : null,
-          /* @__PURE__ */ jsx(Receipt, { Z, resolved, ctx, validation, anchor }),
+          /* @__PURE__ */ jsx(
+            Receipt,
+            {
+              Z,
+              resolved,
+              ctx,
+              validation,
+              anchor,
+              labels
+            }
+          ),
           /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
-            clearable ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: () => setDraftValue(null), children: "Clear" }) : null,
+            clearable ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: () => setDraftValue(null), children: labels.clearButton }) : null,
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -464,11 +310,11 @@ function DateRangePicker({
                   setView(clock);
                   setViewNonce((n) => n + 1);
                 },
-                children: "Go to today"
+                children: labels.goToToday
               }
             ),
             /* @__PURE__ */ jsx(View, { style: styles.footerSpacer }),
-            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: () => setOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: () => setOpen(false), children: labels.cancel }),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -478,7 +324,7 @@ function DateRangePicker({
                   commit(draft);
                   setOpen(false);
                 },
-                children: "Apply"
+                children: labels.apply
               }
             )
           ] })
@@ -492,25 +338,18 @@ function Receipt({
   resolved,
   ctx,
   validation,
-  anchor
+  anchor,
+  labels
 }) {
-  const { styles } = useStyles(sheet2);
-  const duration = durationLabel(resolved.from, resolved.to);
+  const { styles } = useStyles(sheet);
+  const duration = durationLabel(resolved.from, resolved.to, labels);
   const half = anchor !== null;
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      style: styles.receipt,
-      role: "status",
-      ...{ "aria-live": "polite" },
-      children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.receiptRange, children: half ? `${stamp(Z, anchor, ctx)} \u2014 pick the other end` : rangeLabel(Z, resolved.from, resolved.to, ctx) }),
-        !half && duration ? /* @__PURE__ */ jsx(Text, { style: styles.receiptMeta, children: duration }) : null,
-        !half && resolved.kind && !resolved.exact ? /* @__PURE__ */ jsx(Text, { style: styles.receiptMeta, children: "Re-resolves on load" }) : null,
-        validation.message ? /* @__PURE__ */ jsx(Text, { style: validation.ok ? styles.receiptWarn : styles.receiptError, children: validation.message }) : null
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(View, { style: styles.receipt, role: "status", accessibilityLiveRegion: "polite", children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.receiptRange, children: half ? labels.pickOtherEnd(stamp(Z, anchor, ctx)) : rangeLabel(Z, resolved.from, resolved.to, ctx) }),
+    !half && duration ? /* @__PURE__ */ jsx(Text, { style: styles.receiptMeta, children: duration }) : null,
+    !half && resolved.kind && !resolved.exact ? /* @__PURE__ */ jsx(Text, { style: styles.receiptMeta, children: labels.reResolvesNote }) : null,
+    validation.message ? /* @__PURE__ */ jsx(Text, { style: validation.ok ? styles.receiptWarn : styles.receiptError, children: validation.message }) : null
+  ] });
 }
 function withTime(Z, ms, minutes) {
   const start = Z.startOfDay(ms);
@@ -524,7 +363,7 @@ function parseClock(text) {
   if (h > 23 || mi > 59) return null;
   return h * 60 + mi;
 }
-var sheet2 = createStyleSheet((theme) => ({
+var sheet = createStyleSheet((theme) => ({
   root: { alignSelf: "stretch", gap: theme.space.s1 },
   fieldLabel: {
     fontFamily: theme.font.sans,
@@ -624,4 +463,4 @@ var sheet2 = createStyleSheet((theme) => ({
   pressed: { opacity: theme.state.pressedOpacity }
 }));
 
-export { DateRangePicker, MonthList };
+export { DateRangePicker };

package/dist/{chunk-AI4DWZCD.js → chunk-2SY63FCH.js}

@@ -1,14 +1,38 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { useColorTransition } from './chunk-7BUIKDD6.js';
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { Easing, Animated, Text, Pressable, View } from 'react-native';
+import { Easing, Animated, Text, Pressable, View, LayoutAnimation } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
+function SlideIn({ children }) {
+  const theme = useLoamTheme("chip");
+  const p = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    Animated.spring(p, { ...springConfig(theme, "fs"), toValue: 1, useNativeDriver: true }).start();
+  }, [p, theme]);
+  const from = theme.rtl ? 6 : -6;
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: {
+        opacity: p.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }),
+        transform: [{ translateX: p.interpolate({ inputRange: [0, 1], outputRange: [from, 0] }) }]
+      },
+      children
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  remove: "Remove",
+  removeNamed: (name) => `Remove ${name}`
+};
 function useForeground(variant, isSelected) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("chip");
   if (isSelected) return theme.color.accentOnSoft;
   if (variant === "input") return theme.color.onSurface;
   return theme.color.onSurface2;
@@ -29,16 +53,18 @@ function Chip({
   leadingIcon,
   disabled = false,
   motion = "full",
-  accessibilityLabel
+  accessibilityLabel,
+  labels: labelsProp
 }) {
-  const resolvedMotion = useResolvedMotion(motion);
+  const labels = useLabels("chip", DEFAULT_LABELS, labelsProp);
+  const resolvedMotion = useResolvedMotion(motion, "chip");
   const animateColour = resolvedMotion !== "none";
   const animatePress = resolvedMotion === "full";
   const variant = variantProp === "filled" ? "input" : variantProp === "outline" ? "filter" : variantProp ?? (legacySelectable ? "filter" : "input");
   const isFilter = variant === "filter";
   const isSelected = isFilter && selected;
   const { styles } = useStyles(sheet, { size, disabled });
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("chip");
   const fg = useForeground(variant, isSelected);
   const iconSize = theme.ctl.icon[size];
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
@@ -47,18 +73,18 @@ function Chip({
   const restingFill = variant === "input" ? theme.color.surface2 : theme.color.surface;
   const backgroundColor = useColorTransition(
     isSelected ? theme.color.accentSoft : restingFill,
-    theme.duration.fast,
+    theme.spring.fe.duration,
     easing,
     animateColour
   );
   const edgeTarget = isSelected ? theme.color.accent : variant === "input" ? theme.color.border : theme.color.borderStrong;
-  const borderColor = useColorTransition(edgeTarget, theme.duration.fast, easing, animateColour);
+  const borderColor = useColorTransition(edgeTarget, theme.spring.fe.duration, easing, animateColour);
   const borderWidth = variant === "input" ? theme.borderWidth.base : theme.borderWidth.thick;
   const scale = React.useRef(new Animated.Value(1)).current;
   const spring = (to) => Animated.spring(scale, {
+    ...springConfig(theme, "fs"),
     toValue: to,
-    useNativeDriver: true,
-    ...theme.spring.press
+    useNativeDriver: true
   }).start();
   const handlePress = () => {
     if (isFilter) {
@@ -70,12 +96,20 @@ function Chip({
   };
   const handleRemove = (event) => {
     event.stopPropagation();
+    if (animatePress) {
+      const fs = theme.spring.fs;
+      LayoutAnimation.configureNext({
+        duration: fs.duration,
+        update: { type: "spring", springDamping: fs.dampingRatio },
+        delete: { type: "easeInEaseOut", property: "opacity" }
+      });
+    }
     onRemove?.();
   };
   const leading = isSelected ? "check" : leadingIcon;
-  const resolvedRemoveLabel = removeLabel ?? (children ? `Remove ${children}` : "Remove");
+  const resolvedRemoveLabel = removeLabel ?? (children ? labels.removeNamed(children) : labels.remove);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    leading ? /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: fg }) : null,
+    leading ? isSelected && animatePress ? /* @__PURE__ */ jsx(SlideIn, { children: /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: fg }) }) : /* @__PURE__ */ jsx(Icon, { name: leading, size: iconSize, color: fg }) : null,
     children !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : null
   ] });
   return /* @__PURE__ */ jsxs(
@@ -98,13 +132,26 @@ function Chip({
             style: styles.body,
             children: body
           }
-        ) : /* @__PURE__ */ jsx(View, { accessibilityLabel: accessibilityLabel ?? children, style: styles.body, children: body }),
+        ) : /* @__PURE__ */ jsx(
+          View,
+          {
+            accessibilityRole: NAMED_ROLE,
+            accessibilityLabel: accessibilityLabel ?? children,
+            style: styles.body,
+            children: body
+          }
+        ),
         removable ? /* @__PURE__ */ jsx(
           Pressable,
           {
             accessibilityRole: "button",
             accessibilityLabel: resolvedRemoveLabel,
-            hitSlop: 8,
+            hitSlop: {
+              top: Math.max(8, (theme.tapMin - iconSize) / 2),
+              bottom: Math.max(8, (theme.tapMin - iconSize) / 2),
+              left: theme.space[2],
+              right: theme.space[2]
+            },
             disabled,
             onPress: disabled ? void 0 : handleRemove,
             children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: fg })