ferns-ui 1.3.0 → 1.4.0

package/dist/Common.d.ts

@@ -443,11 +443,17 @@ export interface IconProps {
 }
 export type TooltipPosition = "top" | "bottom" | "left" | "right";
 export type IndicatorDirection = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+export type SegmentedControlBadgeConfig = {
+    count: number;
+    status?: "info" | "error" | "warning" | "success" | "neutral";
+};
 export interface SegmentedControlProps {
     items: string[];
     size?: "md" | "lg";
     onChange: (activeIndex: number) => void;
     selectedIndex?: number;
+    maxItems?: number;
+    badges?: SegmentedControlBadgeConfig[];
 }
 export interface TimezonePickerProps {
     timezone?: string;

package/dist/Common.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAuXA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC;AAEF,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAmB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/D,CAAC;IACD,OAAO,WAAW,CAAC,OAAyB,CAAC,CAAC;AAChD,CAAC;AAqBD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,EAAE;KACV,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAiRF,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,GAAG;IACZ,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,MAAM,UAAU,WAAW,CAAC,QAAkB;IAC5C,OAAO,YAAY,CAAC,QAAQ,CAAC,CAAC;AAChC,CAAC"}
+{"version":3,"file":"Common.js","sourceRoot":"","sources":["../src/Common.ts"],"names":[],"mappings":"AAuXA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC;AAEF,MAAM,UAAU,UAAU,CAAC,OAAqB;IAC9C,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;QAChB,OAAO,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAmB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/D,CAAC;IACD,OAAO,WAAW,CAAC,OAAyB,CAAC,CAAC;AAChD,CAAC;AAqBD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAe,EAAE,EAAE;IAClD,OAAO;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,EAAE;KACV,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC;AAClB,CAAC,CAAC;AAwRF,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,GAAG;IACZ,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,MAAM,UAAU,WAAW,CAAC,QAAkB;IAC5C,OAAO,YAAY,CAAC,QAAQ,CAAC,CAAC;AAChC,CAAC"}

package/dist/SegmentedControl.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SegmentedControlProps } from "./Common";
-export declare const SegmentedControl: ({ items, onChange, size, selectedIndex, }: SegmentedControlProps) => React.JSX.Element;
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;

package/dist/SegmentedControl.js

@@ -1,37 +1,72 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { Pressable, View } from "react-native";
+import { Badge } from "./Badge";
 import { Heading } from "./Heading";
+import { Icon } from "./Icon";
 import { useTheme } from "./Theme";
-export const SegmentedControl = ({ items, onChange = () => { }, size = "md", selectedIndex, }) => {
+export const SegmentedControl = ({ items, onChange = () => { }, size = "md", selectedIndex, maxItems, badges = [], }) => {
     const height = size === "md" ? 36 : 44;
     const { theme } = useTheme();
+    const [startIndex, setStartIndex] = useState(0);
+    const handlePrevious = useCallback(() => {
+        setStartIndex((prev) => Math.max(0, prev - (maxItems !== null && maxItems !== void 0 ? maxItems : 4)));
+    }, []);
+    const handleNext = useCallback(() => {
+        setStartIndex((prev) => Math.min(items.length - (maxItems !== null && maxItems !== void 0 ? maxItems : items.length), prev + (maxItems !== null && maxItems !== void 0 ? maxItems : 4)));
+    }, [items.length, maxItems]);
+    const visibleItems = maxItems ? items.slice(startIndex, startIndex + maxItems) : items;
+    const visibleBadges = maxItems ? badges.slice(startIndex, startIndex + maxItems) : badges;
+    const canScrollLeft = startIndex > 0;
+    const canScrollRight = maxItems ? startIndex + maxItems < items.length : false;
+    const shouldShowScrollButtons = maxItems ? maxItems < items.length : false;
     return (React.createElement(View, { style: {
             display: "flex",
-            flexGrow: 1,
             flexDirection: "row",
-            flexShrink: 1,
             alignItems: "center",
-            gap: 4,
-            height,
-            maxHeight: height,
-            borderRadius: theme.primitives.radius3xl,
-            borderColor: theme.primitives.neutral300,
-            borderWidth: 3,
-            backgroundColor: theme.primitives.neutral300,
-        } }, items.map((item, index) => (React.createElement(Pressable, { key: index, "aria-role": "button", style: {
-            display: "flex",
-            paddingHorizontal: size === "md" ? theme.spacing.sm : theme.spacing.md,
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100%",
-            flexBasis: 0,
-            gap: 12,
-            flexGrow: 1,
-            flexShrink: 0,
-            borderRadius: theme.primitives.radius3xl,
-            backgroundColor: index === selectedIndex ? theme.surface.base : undefined,
-            overflow: "hidden",
-        }, onPress: () => onChange(index) },
-        React.createElement(Heading, { size: "sm" }, item))))));
+            gap: 8,
+        } },
+        Boolean(shouldShowScrollButtons) && (React.createElement(Pressable, { disabled: !canScrollLeft, onPress: handlePrevious },
+            React.createElement(Icon, { color: canScrollLeft ? "linkLight" : "extraLight", iconName: "chevron-left", size: "lg" }))),
+        React.createElement(View, { style: {
+                display: "flex",
+                flexGrow: 1,
+                flexDirection: "row",
+                flexShrink: 1,
+                alignItems: "center",
+                height,
+                maxHeight: height,
+                backgroundColor: theme.primitives.neutral300,
+                overflow: "hidden",
+                borderRadius: theme.primitives.radius3xl,
+            } },
+            React.createElement(View, { style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: 4,
+                    flexGrow: 1,
+                    paddingHorizontal: 4,
+                    height: height - 4,
+                } }, visibleItems.map((item, index) => {
+                var _a;
+                const actualIndex = startIndex + index;
+                return (React.createElement(Pressable, { key: actualIndex, "aria-role": "button", style: {
+                        display: "flex",
+                        paddingHorizontal: 2,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        height: "100%",
+                        flexDirection: "row",
+                        gap: 8,
+                        flexGrow: 1,
+                        flexBasis: 0,
+                        borderRadius: theme.primitives.radius3xl,
+                        backgroundColor: actualIndex === selectedIndex ? theme.surface.base : undefined,
+                        overflow: "hidden",
+                    }, onPress: () => onChange(actualIndex) },
+                    React.createElement(Heading, { size: "sm" }, item),
+                    visibleBadges[index] && (React.createElement(Badge, { status: (_a = visibleBadges[index].status) !== null && _a !== void 0 ? _a : "info", value: visibleBadges[index].count, variant: "numberOnly" }))));
+            }))),
+        Boolean(shouldShowScrollButtons) && (React.createElement(Pressable, { disabled: !canScrollRight, onPress: handleNext },
+            React.createElement(Icon, { color: canScrollRight ? "linkLight" : "extraLight", iconName: "chevron-right", size: "lg" })))));
 };
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,IAAI,GAAG,IAAI,EACX,aAAa,GACS,EAAE,EAAE;IAC1B,MAAM,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,MAAM,EAAC,KAAK,EAAC,GAAG,QAAQ,EAAE,CAAC;IAC3B,OAAO,CACL,oBAAC,IAAI,IACH,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,CAAC;YACX,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,CAAC;YACb,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,MAAM;YACN,SAAS,EAAE,MAAM;YACjB,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;YACxC,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;YACxC,WAAW,EAAE,CAAC;YACd,eAAe,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU;SAC7C,IAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,SAAS,IACR,GAAG,EAAE,KAAK,eACA,QAAQ,EAClB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,iBAAiB,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;YACtE,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,CAAC;YACZ,GAAG,EAAE,EAAE;YACP,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,CAAC;YACb,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;YACxC,eAAe,EAAE,KAAK,KAAK,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACzE,QAAQ,EAAE,QAAQ;SACnB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC;QAE9B,oBAAC,OAAO,IAAC,IAAI,EAAC,IAAI,IAAE,IAAI,CAAW,CACzB,CACb,CAAC,CACG,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {

package/src/Common.ts

@@ -575,11 +575,18 @@ export type TooltipPosition = "top" | "bottom" | "left" | "right";
 
 export type IndicatorDirection = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 
+export type SegmentedControlBadgeConfig = {
+  count: number;
+  status?: "info" | "error" | "warning" | "success" | "neutral";
+};
+
 export interface SegmentedControlProps {
   items: string[];
   size?: "md" | "lg"; // default "md"
   onChange: (activeIndex: number) => void;
   selectedIndex?: number;
+  maxItems?: number;
+  badges?: SegmentedControlBadgeConfig[];
 }
 
 export interface TimezonePickerProps {

package/src/SegmentedControl.tsx

@@ -1,58 +1,124 @@
-import React from "react";
+import React, {useCallback, useState} from "react";
 import {Pressable, View} from "react-native";
 
+import {Badge} from "./Badge";
 import {SegmentedControlProps} from "./Common";
 import {Heading} from "./Heading";
+import {Icon} from "./Icon";
 import {useTheme} from "./Theme";
 
-export const SegmentedControl = ({
+export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   items,
   onChange = () => {},
   size = "md",
   selectedIndex,
-}: SegmentedControlProps) => {
+  maxItems,
+  badges = [],
+}) => {
   const height = size === "md" ? 36 : 44;
   const {theme} = useTheme();
+  const [startIndex, setStartIndex] = useState(0);
+
+  const handlePrevious = useCallback(() => {
+    setStartIndex((prev) => Math.max(0, prev - (maxItems ?? 4)));
+  }, []);
+
+  const handleNext = useCallback(() => {
+    setStartIndex((prev) => Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4)));
+  }, [items.length, maxItems]);
+
+  const visibleItems = maxItems ? items.slice(startIndex, startIndex + maxItems) : items;
+  const visibleBadges = maxItems ? badges.slice(startIndex, startIndex + maxItems) : badges;
+  const canScrollLeft = startIndex > 0;
+  const canScrollRight = maxItems ? startIndex + maxItems < items.length : false;
+  const shouldShowScrollButtons = maxItems ? maxItems < items.length : false;
+
   return (
     <View
       style={{
         display: "flex",
-        flexGrow: 1,
         flexDirection: "row",
-        flexShrink: 1,
         alignItems: "center",
-        gap: 4,
-        height,
-        maxHeight: height,
-        borderRadius: theme.primitives.radius3xl,
-        borderColor: theme.primitives.neutral300,
-        borderWidth: 3,
-        backgroundColor: theme.primitives.neutral300,
+        gap: 8,
       }}
     >
-      {items.map((item, index) => (
-        <Pressable
-          key={index}
-          aria-role="button"
+      {Boolean(shouldShowScrollButtons) && (
+        <Pressable disabled={!canScrollLeft} onPress={handlePrevious}>
+          <Icon
+            color={canScrollLeft ? "linkLight" : "extraLight"}
+            iconName="chevron-left"
+            size="lg"
+          />
+        </Pressable>
+      )}
+      <View
+        style={{
+          display: "flex",
+          flexGrow: 1,
+          flexDirection: "row",
+          flexShrink: 1,
+          alignItems: "center",
+          height,
+          maxHeight: height,
+          backgroundColor: theme.primitives.neutral300,
+          overflow: "hidden",
+          borderRadius: theme.primitives.radius3xl,
+        }}
+      >
+        <View
           style={{
             display: "flex",
-            paddingHorizontal: size === "md" ? theme.spacing.sm : theme.spacing.md,
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100%",
-            flexBasis: 0,
-            gap: 12,
+            flexDirection: "row",
+            gap: 4,
             flexGrow: 1,
-            flexShrink: 0,
-            borderRadius: theme.primitives.radius3xl,
-            backgroundColor: index === selectedIndex ? theme.surface.base : undefined,
-            overflow: "hidden",
+            paddingHorizontal: 4,
+            height: height - 4,
           }}
-          onPress={() => onChange(index)}
         >
-          <Heading size="sm">{item}</Heading>
+          {visibleItems.map((item, index) => {
+            const actualIndex = startIndex + index;
+            return (
+              <Pressable
+                key={actualIndex}
+                aria-role="button"
+                style={{
+                  display: "flex",
+                  paddingHorizontal: 2,
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%",
+                  flexDirection: "row",
+                  gap: 8,
+                  flexGrow: 1,
+                  flexBasis: 0,
+                  borderRadius: theme.primitives.radius3xl,
+                  backgroundColor: actualIndex === selectedIndex ? theme.surface.base : undefined,
+                  overflow: "hidden",
+                }}
+                onPress={() => onChange(actualIndex)}
+              >
+                <Heading size="sm">{item}</Heading>
+                {visibleBadges[index] && (
+                  <Badge
+                    status={visibleBadges[index].status ?? "info"}
+                    value={visibleBadges[index].count}
+                    variant="numberOnly"
+                  />
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+      {Boolean(shouldShowScrollButtons) && (
+        <Pressable disabled={!canScrollRight} onPress={handleNext}>
+          <Icon
+            color={canScrollRight ? "linkLight" : "extraLight"}
+            iconName="chevron-right"
+            size="lg"
+          />
         </Pressable>
-      ))}
+      )}
     </View>
   );
 };