@butternutbox/pawprint-native 0.22.0 → 0.23.0

package/.turbo/turbo-build.log

@@ -7,12 +7,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-ESM dist/index.js     518.12 KB
-ESM dist/index.js.map 1.06 MB
-ESM ⚡️ Build success in 7711ms
-CJS dist/index.cjs     548.33 KB
-CJS dist/index.cjs.map 1.06 MB
-CJS ⚡️ Build success in 7715ms
-DTS ⚡️ Build success in 22565ms
-DTS dist/index.d.cts 102.08 KB
-DTS dist/index.d.ts  102.08 KB
+CJS dist/index.cjs     551.83 KB
+CJS dist/index.cjs.map 1.07 MB
+CJS ⚡️ Build success in 7688ms
+ESM dist/index.js     521.42 KB
+ESM dist/index.js.map 1.07 MB
+ESM ⚡️ Build success in 7691ms
+DTS ⚡️ Build success in 21136ms
+DTS dist/index.d.cts 102.54 KB
+DTS dist/index.d.ts  102.54 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @butternutbox/pawprint-native
 
+## 0.23.0
+
+### Minor Changes
+
+- a970fa5: SelectField: add async search. Pass `onSearchQuery` alongside `searchable` to run a debounced query as the user types, with the returned items replacing the list. The component renders a loading spinner while the query runs, `errorText` if it rejects, and `noResultsText` if it resolves empty; any `children` act as the default list before the user types. New props: `onSearchQuery`, `debounceMs` (default 300), `errorText`. Exports a `SelectFieldSearchResult` type for the resolver's return shape.
+- 1ba9b0f: update checkbox, badge and buttons to allow for multiple lines
+
+### Patch Changes
+
+- Updated dependencies [1ba9b0f]
+  - @butternutbox/pawprint-tokens@0.5.0
+
 ## 0.22.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -1201,7 +1201,7 @@ var IconWrapper = styled51__default.default(reactNative.View)({
 });
 var StyledButton = styled51__default.default(reactNative.Pressable)(
   ({
-    buttonHeight,
+    buttonMinHeight,
     buttonMinWidth,
     buttonPaddingHorizontal,
     buttonPaddingVertical,
@@ -1217,7 +1217,7 @@ var StyledButton = styled51__default.default(reactNative.Pressable)(
     alignItems: "center",
     justifyContent: "center",
     position: "relative",
-    height: buttonHeight,
+    minHeight: buttonMinHeight,
     minWidth: buttonMinWidth,
     paddingHorizontal: buttonPaddingHorizontal,
     paddingVertical: buttonPaddingVertical,
@@ -1229,7 +1229,7 @@ var StyledButton = styled51__default.default(reactNative.Pressable)(
 );
 var StyledTextWrapper = styled51__default.default(reactNative.View)(({ textOpacity }) => ({
   opacity: textOpacity,
-  flexShrink: 0
+  flex: 1
 }));
 var StyledSpinnerWrapper = styled51__default.default(reactNative.View)({
   position: "absolute",
@@ -1305,7 +1305,7 @@ var Button = React66__default.default.forwardRef(
         accessibilityState: { disabled: isDisabled, busy: loading },
         onPressIn: () => setPressed(true),
         onPressOut: () => setPressed(false),
-        buttonHeight: parseTokenValue7(sizeTokens.height),
+        buttonMinHeight: parseTokenValue7(sizeTokens.minHeight),
         buttonMinWidth: parseTokenValue7(sizeTokens.minWidth),
         buttonPaddingHorizontal: parseTokenValue7(
           spacingTokens.horizontalPadding
@@ -1332,6 +1332,7 @@ var Button = React66__default.default.forwardRef(
                 letterSpacing: typography.letterSpacing
               },
               color: variantStyles.textColor,
+              align: "center",
               children
             }
           ) }),
@@ -1467,7 +1468,7 @@ var IconButton = React66__default.default.forwardRef(
     const isDisabled = disabled || loading;
     const buttons = theme2.tokens.components.buttons;
     const sizeTokens = buttons.size[size];
-    const dimension = parseTokenValue10(sizeTokens.height);
+    const dimension = parseTokenValue10(sizeTokens.minHeight);
     const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
     const iconDimension = parseTokenValue10(iconSizing[sizeToIconSizeToken[size]]);
     const [pressed, setPressed] = React66__default.default.useState(false);
@@ -4899,6 +4900,7 @@ Switch.displayName = "Switch";
 var parseTokenValue18 = (value) => parseFloat(value);
 var StyledTag = styled51__default.default(reactNative.View)(({ theme: theme2, tagVariant, tagSize }) => {
   const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
+  const { spacing: semanticSpacing } = theme2.tokens.semantics.dimensions;
   const backgroundColorMap = {
     primary: colour.primary.background,
     secondary: colour.primary.secondary,
@@ -4908,13 +4910,21 @@ var StyledTag = styled51__default.default(reactNative.View)(({ theme: theme2, ta
     warning: colour.primary.warning,
     error: colour.primary.error
   };
+  const verticalPaddingMap = {
+    small: semanticSpacing["2xs"],
+    medium: semanticSpacing["3xs"],
+    large: semanticSpacing["2xs"]
+  };
   return {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    height: parseTokenValue18(sizing[tagSize].height),
+    minHeight: parseTokenValue18(sizing[tagSize].minHeight),
     minWidth: parseTokenValue18(sizing[tagSize].minWidth),
-    paddingHorizontal: parseTokenValue18(spacing.horizontalPadding),
+    paddingLeft: parseTokenValue18(spacing.horizontalPadding) * 2,
+    paddingRight: parseTokenValue18(spacing.horizontalPadding) * 2,
+    paddingTop: parseTokenValue18(verticalPaddingMap[tagSize]),
+    paddingBottom: parseTokenValue18(verticalPaddingMap[tagSize]),
     gap: parseTokenValue18(spacing[tagSize].gap),
     borderRadius: parseTokenValue18(badge.borderRadius.default),
     backgroundColor: backgroundColorMap[tagVariant]
@@ -6363,7 +6373,7 @@ var DrawerBody = React66__default.default.forwardRef(
     const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
     const topPadding = parseTokenValue27(content.slot.verticalPadding);
     const bodyMaxHeight = providedMaxHeight != null ? providedMaxHeight : windowHeight - 300;
-    const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.height) : horizontalPadding;
+    const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.minHeight) : horizontalPadding;
     const bodyPaddingBottom = !footerContext ? Math.max(
       parseTokenValue27(theme2.tokens.semantics.dimensions.spacing["2xl"]),
       insets.bottom
@@ -6733,7 +6743,7 @@ var StyledRootPressable = styled51__default.default(reactNative.Pressable)(
     alignItems: rootFlexAlign,
     gap: rootGap,
     opacity: rootOpacity
-  }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? rootFitContent ? { maxWidth: rootMaxWidth, alignSelf: "flex-start" } : { maxWidth: rootMaxWidth, width: "100%" } : { width: "100%" }), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
+  }, rootPaddingVertical !== void 0 ? { paddingVertical: rootPaddingVertical } : {}), rootPaddingHorizontal !== void 0 ? { paddingHorizontal: rootPaddingHorizontal } : {}), rootMaxWidth !== void 0 ? rootFitContent ? { maxWidth: rootMaxWidth, alignSelf: "flex-start" } : { maxWidth: rootMaxWidth, width: "100%" } : {}), rootBgColor ? { backgroundColor: rootBgColor } : {}), rootBorderWidth !== void 0 ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor } : {}), rootBorderRadius !== void 0 ? { borderRadius: rootBorderRadius } : {})
 );
 var StyledControl = styled51__default.default(reactNative.View)(
   ({
@@ -6754,12 +6764,12 @@ var StyledControl = styled51__default.default(reactNative.View)(
     justifyContent: "center"
   })
 );
-var StyledContent2 = styled51__default.default(reactNative.View)(({ contentGap }) => ({
+var StyledContent2 = styled51__default.default(reactNative.View)(({ contentGap, contentFlex, contentFitContent }) => __spreadValues({
   flexDirection: "column",
   gap: contentGap,
-  flex: 1,
+  flex: contentFlex,
   minWidth: 0
-}));
+}, contentFitContent ? { maxWidth: "85%" } : {}));
 var StyledIllustration = styled51__default.default(reactNative.View)(({ illustrationSize }) => ({
   flexShrink: 0,
   width: illustrationSize,
@@ -6846,6 +6856,8 @@ var Checkbox = React66__default.default.forwardRef(
             StyledContent2,
             {
               contentGap: parseTokenValue31(checkbox.spacing.content.gap),
+              contentFlex: isTile && fitContent ? 0 : 1,
+              contentFitContent: isTile && fitContent,
               children: [
                 label && /* @__PURE__ */ jsxRuntime.jsx(
                   Typography,
@@ -9010,7 +9022,7 @@ var SelectFieldItem = React66__default.default.forwardRef(
 );
 SelectFieldItem.displayName = "SelectField.Item";
 var parseTokenValue48 = (value) => parseFloat(value);
-var StyledNoResults = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
+var StyledStatusRow = styled51__default.default(reactNative.View)(({ theme: theme2 }) => {
   const { dropdown } = theme2.tokens.components.dropdownList;
   return {
     paddingVertical: parseTokenValue48(dropdown.listItem.spacing.verticalPadding),
@@ -9043,7 +9055,10 @@ var SelectFieldRoot = React66__default.default.forwardRef(
       disabled,
       searchable = false,
       searchPlaceholder,
-      noResultsText = "No results found"
+      noResultsText = "No results found",
+      onSearchQuery,
+      debounceMs = 300,
+      errorText = "Something went wrong"
     } = _b, rest = __objRest(_b, [
       "label",
       "placeholder",
@@ -9059,7 +9074,10 @@ var SelectFieldRoot = React66__default.default.forwardRef(
       "disabled",
       "searchable",
       "searchPlaceholder",
-      "noResultsText"
+      "noResultsText",
+      "onSearchQuery",
+      "debounceMs",
+      "errorText"
     ]);
     const [isOpen, setIsOpen] = React66__default.default.useState(false);
     const [showContent, setShowContent] = React66__default.default.useState(false);
@@ -9069,6 +9087,44 @@ var SelectFieldRoot = React66__default.default.forwardRef(
     const [searchQuery, setSearchQuery] = React66__default.default.useState("");
     const [clearKey, setClearKey] = React66__default.default.useState(0);
     const searchInputRef = React66__default.default.useRef(null);
+    const isQueryMode = searchable && typeof onSearchQuery === "function";
+    const [searchResults, setSearchResults] = React66__default.default.useState([]);
+    const [isSearching, setIsSearching] = React66__default.default.useState(false);
+    const [searchFailed, setSearchFailed] = React66__default.default.useState(false);
+    const searchRequestIdRef = React66__default.default.useRef(0);
+    const onSearchQueryRef = React66__default.default.useRef(onSearchQuery);
+    React66__default.default.useEffect(() => {
+      onSearchQueryRef.current = onSearchQuery;
+    });
+    React66__default.default.useEffect(() => {
+      if (!isQueryMode) return;
+      if (searchQuery.length === 0) {
+        searchRequestIdRef.current += 1;
+        setSearchResults([]);
+        setIsSearching(false);
+        setSearchFailed(false);
+        return;
+      }
+      const requestId = searchRequestIdRef.current + 1;
+      searchRequestIdRef.current = requestId;
+      setIsSearching(true);
+      setSearchFailed(false);
+      const debounceTimer = setTimeout(() => {
+        const runQuery = onSearchQueryRef.current;
+        if (!runQuery) return;
+        Promise.resolve(runQuery(searchQuery)).then((items) => {
+          if (searchRequestIdRef.current !== requestId) return;
+          setSearchResults(items);
+          setIsSearching(false);
+        }).catch(() => {
+          if (searchRequestIdRef.current !== requestId) return;
+          setSearchResults([]);
+          setSearchFailed(true);
+          setIsSearching(false);
+        });
+      }, debounceMs);
+      return () => clearTimeout(debounceTimer);
+    }, [searchQuery, isQueryMode, debounceMs]);
     React66__default.default.useEffect(() => {
       if (!isOpen) {
         setShowContent(false);
@@ -9101,7 +9157,7 @@ var SelectFieldRoot = React66__default.default.forwardRef(
         clearTimeout(hardwareKeyboardTimer);
         keyboardSub.remove();
       };
-    }, [isOpen, searchable]);
+    }, [isOpen, searchable, isSearching, searchQuery]);
     const isCompound = React66__default.default.Children.toArray(children).some(
       (child) => React66__default.default.isValidElement(child) && child.type === SelectFieldContent
     );
@@ -9119,7 +9175,7 @@ var SelectFieldRoot = React66__default.default.forwardRef(
     };
     const currentValue = value !== void 0 ? value : internalValue;
     const allItems = React66__default.default.Children.toArray(children);
-    const filteredItems = searchable ? allItems.filter((child) => {
+    const localFilteredItems = searchable && !isQueryMode ? allItems.filter((child) => {
       var _a2;
       if (!searchQuery) return true;
       if (React66__default.default.isValidElement(child) && child.type === SelectFieldItem) {
@@ -9130,7 +9186,21 @@ var SelectFieldRoot = React66__default.default.forwardRef(
       }
       return true;
     }) : allItems;
-    const hasNoResults = searchable && searchQuery.length > 0 && filteredItems.length === 0;
+    const isQueryActive = isQueryMode && searchQuery.length > 0;
+    const queryResultItems = searchResults.map((result) => /* @__PURE__ */ jsxRuntime.jsx(
+      SelectFieldItem,
+      {
+        value: result.value,
+        leadingIcon: result.leadingIcon,
+        hintText: result.hintText,
+        disabled: result.disabled,
+        children: result.label
+      },
+      String(result.value)
+    ));
+    const itemsToRender = isQueryActive ? queryResultItems : localFilteredItems;
+    const hasNoResults = isQueryMode ? isQueryActive && !isSearching && !searchFailed && searchResults.length === 0 : searchable && searchQuery.length > 0 && localFilteredItems.length === 0;
+    const hasContentToShow = isSearching || searchFailed || hasNoResults || itemsToRender.length > 0;
     const searchActionIcon = (() => {
       if (!searchable) return void 0;
       const showClear = isOpen && searchQuery.length > 0 || !isOpen && Boolean(currentValue);
@@ -9189,8 +9259,8 @@ var SelectFieldRoot = React66__default.default.forwardRef(
             description && /* @__PURE__ */ jsxRuntime.jsx(InputDescription, { state, children: description }),
             error && state === "error" && /* @__PURE__ */ jsxRuntime.jsx(InputError, { children: error })
           ] })),
-          showContent && /* @__PURE__ */ jsxRuntime.jsxs(SelectFieldContent, { children: [
-            filteredItems.map((child) => {
+          showContent && hasContentToShow && /* @__PURE__ */ jsxRuntime.jsx(SelectFieldContent, { children: isSearching ? /* @__PURE__ */ jsxRuntime.jsx(StyledStatusRow, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm" }) }) : searchFailed ? /* @__PURE__ */ jsxRuntime.jsx(StyledStatusRow, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { size: "sm", children: errorText }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            itemsToRender.map((child) => {
               if (React66__default.default.isValidElement(child) && child.type === SelectFieldItem) {
                 const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
                 const childProps = child.props;
@@ -9203,8 +9273,8 @@ var SelectFieldRoot = React66__default.default.forwardRef(
               }
               return child;
             }),
-            hasNoResults && /* @__PURE__ */ jsxRuntime.jsx(StyledNoResults, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { size: "sm", children: noResultsText }) })
-          ] })
+            hasNoResults && /* @__PURE__ */ jsxRuntime.jsx(StyledStatusRow, { children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { size: "sm", children: noResultsText }) })
+          ] }) })
         ]
       },
       clearKey
@@ -9569,7 +9639,7 @@ var Slider = React66__default.default.forwardRef(
     const isControlled = controlledValue !== void 0;
     const [internalValue, setInternalValue] = React66__default.default.useState(defaultValue);
     const currentValue = isControlled ? controlledValue : internalValue;
-    const thumbSize = parseTokenValue49(buttons.size.md.height);
+    const thumbSize = parseTokenValue49(buttons.size.md.minHeight);
     const trackHeight = parseTokenValue49(slider.sizing.track.height);
     const isWeb = reactNative.Platform.OS === "web";
     const [trackLayoutWidth, setTrackLayoutWidth] = React66.useState(0);