manuo
Version:
UI component library for React Native + NativeWind, mobile-first and platform-specific.
1,211 lines (1,167 loc) • 126 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
ActivityIndicator: () => ActivityIndicator3,
AlertDialog: () => AlertDialog_default,
BottomSheet: () => BottomSheet3,
Button: () => Button,
ButtonAndroid: () => ButtonAndroid,
ButtonIOS: () => ButtonIOS,
Card: () => Card,
CardAndroid: () => CardAndroid,
CardIOS: () => CardIOS,
Checkbox: () => Checkbox,
DateTimeField: () => DateTimeField,
ListItemAndroid: () => ListItemAndroid,
ListItemIOS: () => ListItemIOS,
ListSection: () => ListSection,
PlatformDrawer: () => PlatformDrawer,
ProgressBar: () => ProgressBar,
SegmentedControl: () => SegmentedControl,
SegmentedControlAndroid: () => SegmentedControlAndroid,
SegmentedControlIOS: () => SegmentedControlIOS,
Skeleton: () => Skeleton,
SkeletonGroup: () => SkeletonGroup,
Stepper: () => Stepper,
Testing: () => Testing,
Text: () => Text16,
TextAndroid: () => TextAndroid,
TextDemo: () => TextDemo,
TextIOS: () => TextIOS,
Toast: () => Toast,
ToastNotification: () => ToastNotification_default,
Toggle: () => Toggle,
cn: () => cn
});
module.exports = __toCommonJS(index_exports);
// src/nativeWindInterop.ts
var import_react_native = require("react-native");
var import_nativewind = require("nativewind");
(0, import_nativewind.cssInterop)(import_react_native.Text, { className: "style" });
// src/components/Button.tsx
var import_react_native4 = require("react-native");
// src/components/ios/ButtonIOS.tsx
var import_react_native2 = require("react-native");
var import_nativewind2 = require("nativewind");
var import_jsx_runtime = require("react/jsx-runtime");
var Text2 = (0, import_nativewind2.cssInterop)(import_react_native2.Text, { className: "style" });
var View = (0, import_nativewind2.cssInterop)(import_react_native2.View, { className: "style" });
var ButtonIOS = ({
title,
icon,
onPress,
className,
textClassName,
variant = "primary",
loading = false,
loaderColor,
...rest
}) => {
const baseContainer = "px-4 py-2 min-w-[44px] min-h-[44px] rounded-xl flex-row items-center justify-center gap-2 active:opacity-70 transition";
const variants = {
primary: "bg-blue-500",
secondary: "bg-white border border-blue-500",
tonal: "bg-blue-100",
plain: "bg-transparent"
};
const textStyles = {
primary: "text-white text-xl font-semibold",
// ⬅️ mai mare, bold
secondary: "text-blue-500 text-xl font-medium",
// ⬅️ mai mic, ca în poză
tonal: "text-blue-700 text-base font-semibold",
// ⬅️ ca primary, dar cu altă culoare
plain: "text-blue-500 text-base font-medium"
// ⬅️ subtil
};
const defaultLoaderColor = loaderColor ?? (variant === "primary" ? "#ffffff" : "#007AFF");
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_native2.Pressable,
{
onPress,
disabled: loading,
accessibilityRole: "button",
accessibilityLabel: title,
...rest,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(View, { className: `${baseContainer} ${variants[variant]} ${className ?? ""}`, children: [
loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.ActivityIndicator, { size: "small", color: defaultLoaderColor }) : icon,
!!title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Text2,
{
className: `${textStyles[variant]} ${textClassName ?? ""}`,
children: title
}
)
] })
}
);
};
// src/components/android/ButtonAndroid.tsx
var import_react_native3 = require("react-native");
var import_nativewind3 = require("nativewind");
var import_jsx_runtime2 = require("react/jsx-runtime");
var Text3 = (0, import_nativewind3.cssInterop)(import_react_native3.Text, { className: "style" });
var View2 = (0, import_nativewind3.cssInterop)(import_react_native3.View, { className: "style" });
var ButtonAndroid = ({
title,
icon,
onPress,
className,
textClassName,
variant = "primary",
loading = false,
loaderColor
}) => {
const baseContainer = "px-4 py-2 min-w-[48px] min-h-[48px] rounded-full flex-row items-center justify-center gap-2 overflow-hidden";
const variants = {
primary: "bg-blue-500",
secondary: "bg-white border border-gray-400",
tonal: "bg-blue-100",
plain: "bg-transparent"
};
const textStyles = {
primary: "text-white text-lg font-semibold uppercase",
secondary: "text-black text-lg font-medium uppercase",
tonal: "text-blue-800 text-base font-semibold uppercase",
plain: "text-black text-base font-medium uppercase"
};
const defaultLoaderColor = loaderColor ?? (variant === "primary" ? "#fff" : "#2196F3");
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_native3.TouchableNativeFeedback,
{
onPress,
disabled: loading,
background: import_react_native3.TouchableNativeFeedback.Ripple("#B0BEC5", false),
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(View2, { className: `${baseContainer} ${variants[variant]} ${className ?? ""}`, children: [
loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.ActivityIndicator, { size: "small", color: defaultLoaderColor }) : icon,
!!title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text3, { className: `${textStyles[variant]} ${textClassName ?? ""}`, children: title })
] })
}
);
};
// src/components/Button.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Button = (props) => {
const isIOS2 = import_react_native4.Platform.OS === "ios" || import_react_native4.Platform.OS === "web";
return isIOS2 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonIOS, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonAndroid, { ...props });
};
// src/components/TextDemo.tsx
var import_react_native5 = require("react-native");
var import_nativewind4 = require("nativewind");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Text4 = (0, import_nativewind4.cssInterop)(import_react_native5.Text, { className: "style" });
var TextDemo = ({ children, className, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Text4, { className: `text-base ${className ?? ""}`, ...props, children });
};
// src/utils/cn.ts
function cn(...classes) {
return classes.filter(Boolean).join(" ");
}
// src/components/Card.tsx
var import_react_native8 = require("react-native");
// src/components/ios/CardIOS.tsx
var import_react_native6 = require("react-native");
var import_nativewind5 = require("nativewind");
var import_jsx_runtime5 = require("react/jsx-runtime");
var View3 = (0, import_nativewind5.cssInterop)(import_react_native6.View, { className: "style" });
var Text5 = (0, import_nativewind5.cssInterop)(import_react_native6.Text, { className: "style" });
var Image = (0, import_nativewind5.cssInterop)(import_react_native6.Image, { className: "style" });
var Pressable2 = (0, import_nativewind5.cssInterop)(import_react_native6.Pressable, { className: "style" });
var CardIOS = ({
image,
badge,
title,
subtitle,
description,
buttonLabel = "GET",
icon,
onPress,
className,
style,
bodyClassName = "p-4",
bodyStyle,
imageContainerClassName,
imageClassName,
imageStyle,
imageAspectRatio,
imageResizeMode = "cover"
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
Pressable2,
{
onPress,
className: `rounded-2xl bg-white shadow-md overflow-hidden ${className ?? ""}`,
style,
children: [
!!image && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(View3, { className: imageContainerClassName, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
Image,
{
source: { uri: image },
className: imageClassName ?? "w-full h-48",
style: imageAspectRatio ? [{ aspectRatio: imageAspectRatio }, imageStyle] : imageStyle,
resizeMode: imageResizeMode
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(View3, { className: bodyClassName, style: bodyStyle, children: [
!!badge && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text5, { className: "mb-2 self-start rounded-full bg-gray-100 px-2 py-0.5 text-xs font-semibold uppercase text-gray-500", children: badge }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text5, { className: "text-3xl font-bold text-black", children: title }),
!!subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text5, { className: "text-sm text-gray-500", children: subtitle }),
!!description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text5, { className: "mt-1 text-sm text-gray-600", children: description }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(View3, { className: "mt-4 flex-row items-center justify-between", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(View3, { className: "flex-row items-center", children: [
icon,
!!subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(View3, { className: "ml-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text5, { className: "text-sm font-medium text-black", children: subtitle }),
!!description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text5, { className: "text-xs text-gray-400", children: description })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(View3, { className: "rounded-full bg-blue-500 px-4 py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text5, { className: "text-sm font-bold text-white", children: buttonLabel }) })
] })
] })
]
}
);
};
// src/components/android/CardAndroid.tsx
var import_react_native7 = require("react-native");
var import_nativewind6 = require("nativewind");
var import_jsx_runtime6 = require("react/jsx-runtime");
var View4 = (0, import_nativewind6.cssInterop)(import_react_native7.View, { className: "style" });
var Text6 = (0, import_nativewind6.cssInterop)(import_react_native7.Text, { className: "style" });
var Image2 = (0, import_nativewind6.cssInterop)(import_react_native7.Image, { className: "style" });
var CardAndroid = ({
image,
title,
subtitle,
description,
buttonLabel = "Install",
onPress,
className,
icon
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_react_native7.TouchableNativeFeedback,
{
onPress,
background: import_react_native7.TouchableNativeFeedback.Ripple("#E0E0E0", false),
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(View4, { className: `bg-white rounded-xl shadow-sm p-4 ${className ?? ""}`, children: [
image && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
Image2,
{
source: { uri: image },
className: "mb-4 h-40 w-full rounded-lg",
resizeMode: "cover"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text6, { className: "text-3xl font-bold text-black", children: title }),
!!subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text6, { className: "mt-0.5 text-xs uppercase text-gray-500 tracking-wider", children: subtitle }),
!!description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text6, { className: "mt-1 text-sm text-gray-600 leading-tight", children: description }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(View4, { className: "mt-4 flex-row items-center justify-between", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(View4, { className: "flex-row items-center gap-2", children: [
icon,
!!subtitle && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text6, { className: "text-xs text-gray-500", children: subtitle })
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(View4, { className: "rounded-full bg-gray-100 px-4 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text6, { className: "text-sm font-semibold text-blue-600", children: buttonLabel }) })
] })
] })
}
);
};
// src/components/Card.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var Card = (props) => {
const isIOS2 = import_react_native8.Platform.OS === "ios" || import_react_native8.Platform.OS === "web";
return isIOS2 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardIOS, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardAndroid, { ...props });
};
// src/components/ListItem.tsx
var import_react_native11 = require("react-native");
// src/components/ios/ListItemIOS.tsx
var import_react_native9 = require("react-native");
var import_nativewind7 = require("nativewind");
var import_jsx_runtime8 = require("react/jsx-runtime");
var View5 = (0, import_nativewind7.cssInterop)(import_react_native9.View, { className: "style" });
var Text7 = (0, import_nativewind7.cssInterop)(import_react_native9.Text, { className: "style" });
var Image3 = (0, import_nativewind7.cssInterop)(import_react_native9.Image, { className: "style" });
var ListItemIOS = ({
title,
subtitle,
rightText = "100+",
icon,
className,
onPress
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.Pressable, { onPress, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(View5, { className: `flex-row items-center justify-between bg-white px-4 py-3 ${className ?? ""}`, children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(View5, { className: "flex-row items-center gap-3", children: [
icon ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(View5, { className: "h-10 w-10 rounded-xl bg-blue-500" }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(View5, { children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text7, { className: "text-base font-semibold text-black", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text7, { className: "text-sm text-gray-500", children: subtitle })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text7, { className: "text-xs text-gray-500", children: rightText })
] }) });
};
// src/components/android/ListItemAndroid.tsx
var import_react_native10 = require("react-native");
var import_nativewind8 = require("nativewind");
var import_jsx_runtime9 = require("react/jsx-runtime");
var View6 = (0, import_nativewind8.cssInterop)(import_react_native10.View, { className: "style" });
var Text8 = (0, import_nativewind8.cssInterop)(import_react_native10.Text, { className: "style" });
var ListItemAndroid = ({
title,
subtitle,
rightText = "100+",
icon,
className,
onPress
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.TouchableNativeFeedback, { onPress, background: import_react_native10.TouchableNativeFeedback.Ripple("#E0E0E0", false), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View6, { className: `flex-row items-center justify-between bg-white px-4 py-3 border-b border-gray-100 ${className ?? ""}`, children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View6, { className: "flex-row items-center gap-3", children: [
icon ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(View6, { className: "h-10 w-10 rounded-md bg-blue-500" }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(View6, { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text8, { className: "text-sm font-semibold text-black", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text8, { className: "text-xs text-gray-500", children: subtitle })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text8, { className: "text-xs text-gray-500", children: rightText })
] }) });
};
// src/components/ListItem.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var ListSection = ({
sections,
renderItem,
sectionHeaderClassName
}) => {
const renderDefaultItem = ({ item }) => import_react_native11.Platform.OS === "ios" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListItemIOS, { ...item }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListItemAndroid, { ...item });
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
import_react_native11.SectionList,
{
sections,
keyExtractor: (item, index) => `${item.title}-${index}`,
renderItem: renderItem ?? renderDefaultItem,
renderSectionHeader: ({ section }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
import_react_native11.Text,
{
className: `text-xs uppercase font-bold text-gray-400 px-4 py-2 ${sectionHeaderClassName ?? ""}`,
children: section.title
}
),
stickySectionHeadersEnabled: true,
contentContainerStyle: { paddingBottom: 24 }
}
);
};
// src/components/ProgressIndicator.tsx
var import_react = require("react");
var import_react_native12 = require("react-native");
var import_nativewind9 = require("nativewind");
var import_jsx_runtime11 = require("react/jsx-runtime");
var View8 = (0, import_nativewind9.cssInterop)(import_react_native12.View, { className: "style" });
var Text10 = (0, import_nativewind9.cssInterop)(import_react_native12.Text, { className: "style" });
var AnimatedView = (0, import_nativewind9.cssInterop)(import_react_native12.Animated.View, { className: "style" });
var ProgressBar = ({
progress,
label = "Progress Indicator",
className = "",
barClassName = "",
trackClassName = "",
thickness = 5
}) => {
const animatedWidth = (0, import_react.useRef)(new import_react_native12.Animated.Value(0)).current;
(0, import_react.useEffect)(() => {
import_react_native12.Animated.timing(animatedWidth, {
toValue: progress,
duration: 300,
useNativeDriver: false
}).start();
}, [progress]);
const widthInterpolation = animatedWidth.interpolate({
inputRange: [0, 1],
outputRange: ["0%", "100%"]
});
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(View8, { className: `w-full ${className}`, children: [
!!label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text10, { className: "mb-2 text-center text-xs font-medium text-gray-600", children: label }),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
View8,
{
style: { height: thickness },
className: `w-full overflow-hidden rounded-full bg-gray-200 ${trackClassName}`,
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
AnimatedView,
{
style: { width: widthInterpolation, height: thickness },
className: `rounded-full bg-blue-500 ${barClassName}`
}
)
}
)
] });
};
// src/components/SegmentControl.tsx
var import_react_native16 = require("react-native");
// src/components/ios/SegmentedControlIOS.tsx
var import_react2 = require("react");
var import_react_native13 = require("react-native");
var import_nativewind10 = require("nativewind");
var import_jsx_runtime12 = require("react/jsx-runtime");
var View9 = (0, import_nativewind10.cssInterop)(import_react_native13.View, { className: "style" });
var Text11 = (0, import_nativewind10.cssInterop)(import_react_native13.Text, { className: "style" });
var AnimatedView2 = (0, import_nativewind10.cssInterop)(import_react_native13.Animated.View, { className: "style" });
var SegmentedControlIOS = ({
options,
selectedIndex = 0,
onChange
}) => {
const [containerWidth, setContainerWidth] = (0, import_react2.useState)(0);
const [itemWidth, setItemWidth] = (0, import_react2.useState)(0);
const translateX = (0, import_react2.useRef)(new import_react_native13.Animated.Value(selectedIndex)).current;
const [currentIndex, setCurrentIndex] = (0, import_react2.useState)(selectedIndex);
(0, import_react2.useEffect)(() => {
if (itemWidth === 0) return;
animateTo(selectedIndex);
setCurrentIndex(selectedIndex);
}, [selectedIndex, itemWidth]);
const animateTo = (toIndex) => {
import_react_native13.Animated.timing(translateX, {
toValue: toIndex,
duration: 400,
useNativeDriver: false
}).start();
};
const onLayout = (e) => {
const width = e.nativeEvent.layout.width;
const totalGap = 4;
const adjustedItemWidth = (width - totalGap) / options.length;
setContainerWidth(width);
setItemWidth(adjustedItemWidth);
};
const interpolatedX = translateX.interpolate({
inputRange: options.map((_, i) => i),
outputRange: options.map((_, i) => 2 + i * itemWidth),
extrapolate: "clamp"
});
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
View9,
{
onLayout,
className: "flex-row overflow-hidden rounded-[9px] bg-[#f0f0f5] p-[2px]",
children: [
itemWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
AnimatedView2,
{
style: {
width: itemWidth,
transform: [{ translateX: interpolatedX }]
},
className: "absolute bottom-[2px] left-0 top-[2px] z-0 rounded-[7px] bg-white shadow-sm"
}
),
options.map((label, index) => {
const isActive = index === currentIndex;
const isBeforeActive = index === currentIndex + 1;
const showDivider = index > 0 && !isActive && !isBeforeActive;
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
import_react_native13.Pressable,
{
onPress: () => onChange?.(index),
className: "relative z-10 flex-1 items-center justify-center px-3 py-[7px]",
children: [
showDivider && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(View9, { className: "absolute bottom-[7px] left-0 top-[7px] w-[1px] bg-gray-300" }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
Text11,
{
className: `text-base font-semibold ${isActive ? "text-black" : "text-gray-500"}`,
children: label
}
)
]
},
index
);
})
]
}
);
};
// src/components/android/SegmentedControlAndroid.tsx
var import_react_native14 = require("react-native");
var import_jsx_runtime13 = require("react/jsx-runtime");
var SegmentedControlAndroid = ({
options,
selectedIndex = 0,
onChange
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
import_react_native14.View,
{
style: {
flexDirection: "row",
borderWidth: 1,
borderColor: "#D1D5DB",
borderRadius: 24,
overflow: "hidden"
},
children: options.map((option, index) => {
const isFirst = index === 0;
const isLast = index === options.length - 1;
const isSelected = selectedIndex === index;
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
import_react_native14.Pressable,
{
onPress: () => onChange?.(index),
style: {
flex: 1,
backgroundColor: isSelected ? "#E0F2FE" : "#fff",
paddingVertical: 10,
alignItems: "center",
borderRightWidth: index < options.length - 1 ? 1 : 0,
borderRightColor: "#D1D5DB",
borderTopLeftRadius: isFirst ? 999 : 0,
borderBottomLeftRadius: isFirst ? 999 : 0,
borderTopRightRadius: isLast ? 999 : 0,
borderBottomRightRadius: isLast ? 999 : 0
},
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
import_react_native14.Text,
{
style: {
fontSize: 14,
fontWeight: isSelected ? "600" : "400",
color: "#111827"
},
children: option
}
)
},
index
);
})
}
);
};
// src/components/web/SegmentControlWeb.tsx
var import_react3 = require("react");
var import_react_native15 = require("react-native");
var import_nativewind11 = require("nativewind");
var import_jsx_runtime14 = require("react/jsx-runtime");
var View11 = (0, import_nativewind11.cssInterop)(import_react_native15.View, { className: "style" });
var Text13 = (0, import_nativewind11.cssInterop)(import_react_native15.Text, { className: "style" });
var Pressable6 = (0, import_nativewind11.cssInterop)(import_react_native15.Pressable, { className: "style" });
var AnimatedView3 = (0, import_nativewind11.cssInterop)(import_react_native15.Animated.View, { className: "style" });
function SegmentedControlWeb({
options,
selectedIndex = 0,
onChange
}) {
const [itemWidth, setItemWidth] = (0, import_react3.useState)(0);
const [currentIndex, setCurrentIndex] = (0, import_react3.useState)(selectedIndex);
const animIndex = (0, import_react3.useRef)(new import_react_native15.Animated.Value(selectedIndex)).current;
(0, import_react3.useEffect)(() => {
if (!itemWidth) return;
import_react_native15.Animated.timing(animIndex, {
toValue: selectedIndex,
duration: 400,
useNativeDriver: false
}).start(() => setCurrentIndex(selectedIndex));
}, [selectedIndex, itemWidth]);
const onLayout = (e) => {
const width = e.nativeEvent.layout.width;
const w = Math.floor((width - 4) / options.length);
setItemWidth(w);
};
const translateX = import_react_native15.Animated.add(new import_react_native15.Animated.Value(2), import_react_native15.Animated.multiply(animIndex, itemWidth));
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
View11,
{
onLayout,
className: "flex-row items-stretch overflow-hidden rounded-[9px] bg-[#f0f0f5] p-[2px]",
style: { willChange: "transform" },
children: [
itemWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
AnimatedView3,
{
pointerEvents: "none",
className: "absolute bottom-[2px] left-0 top-[2px] z-0 rounded-[7px] bg-white",
style: { width: itemWidth, transform: [{ translateX }] }
}
),
options.map((label, index) => {
const isActive = index === currentIndex;
const isBeforeActive = index === currentIndex + 1;
const showDivider = index > 0 && !isActive && !isBeforeActive;
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
Pressable6,
{
onPress: () => onChange?.(index),
className: "relative z-10 flex-1 basis-0 items-center justify-center px-3 py-[7px]",
accessibilityRole: "button",
accessibilityState: { selected: isActive },
children: [
showDivider && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(View11, { className: "absolute bottom-[7px] left-0 top-[7px] w-[1px] bg-gray-300 opacity-60" }),
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text13, { className: `text-base font-semibold ${isActive ? "text-black" : "text-gray-500"}`, children: label })
]
},
index
);
})
]
}
);
}
// src/components/SegmentControl.tsx
var import_jsx_runtime15 = require("react/jsx-runtime");
var SegmentedControl = (props) => {
if (import_react_native16.Platform.OS === "web") return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SegmentedControlWeb, { ...props });
if (import_react_native16.Platform.OS === "ios") return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SegmentedControlIOS, { ...props });
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SegmentedControlAndroid, { ...props });
};
// src/components/Text.tsx
var import_react_native19 = require("react-native");
// src/components/ios/TextIOS.tsx
var import_react_native17 = require("react-native");
var import_nativewind12 = require("nativewind");
var import_jsx_runtime16 = require("react/jsx-runtime");
var Text14 = (0, import_nativewind12.cssInterop)(import_react_native17.Text, { className: "style" });
var iosVariants = {
hero: "text-[34px] font-bold",
pageTitle: "text-[28px] font-semibold",
sectionTitle: "text-[22px] font-semibold",
cardTitle: "text-[20px] font-semibold",
header: "text-[17px] font-semibold",
paragraph: "text-[16px] font-normal",
hint: "text-[16px] font-normal",
label: "text-[15px] font-normal",
footnote: "text-[13px] font-normal",
caption: "text-[12px] font-normal",
captionSmall: "text-[11px] font-normal"
};
var TextIOS = ({ variant = "paragraph", className = "", ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text14, { className: `${iosVariants[variant]} ${className}`, ...props });
};
// src/components/android/TextAndroid.tsx
var import_react_native18 = require("react-native");
var import_nativewind13 = require("nativewind");
var import_jsx_runtime17 = require("react/jsx-runtime");
var Text15 = (0, import_nativewind13.cssInterop)(import_react_native18.Text, { className: "style" });
var androidVariants = {
hero: "text-[34px] font-bold",
pageTitle: "text-[28px] font-bold",
sectionTitle: "text-[22px] font-semibold",
cardTitle: "text-[20px] font-semibold",
header: "text-[18px] font-medium",
paragraph: "text-[16px] font-normal",
hint: "text-[15px] font-normal",
label: "text-[14px] font-normal",
footnote: "text-[13px] font-normal",
caption: "text-[12px] font-normal",
captionSmall: "text-[11px] font-normal"
};
var TextAndroid = ({
variant = "paragraph",
className = "",
...props
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text15, { className: `${androidVariants[variant]} ${className}`, ...props });
};
// src/components/Text.tsx
var import_jsx_runtime18 = require("react/jsx-runtime");
var Text16 = (props) => {
const isIOS2 = import_react_native19.Platform.OS === "ios" || import_react_native19.Platform.OS === "macos" || import_react_native19.Platform.OS === "web";
return isIOS2 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextIOS, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TextAndroid, { ...props });
};
// src/components/PlatformDrawer.tsx
var import_react5 = require("react");
var import_react_native21 = require("react-native");
// src/components/ios/SimplePlatformDrawerIOS.tsx
var import_vector_icons = require("@expo/vector-icons");
var import_react4 = require("react");
var import_react_native20 = require("react-native");
var import_jsx_runtime19 = require("react/jsx-runtime");
var renderIcon = (icon, isSelected = false) => {
const { library, name, size = 26 } = icon;
const iconColor = isSelected ? "#FFFFFF" : "#007AFF";
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vector_icons.MaterialIcons, { name, size, color: iconColor });
};
var PlatformDrawerIOS = (0, import_react4.forwardRef)((props, ref) => {
const {
title = "",
sections = [],
onOpen,
onClose,
className = "",
drawerWidth = 320,
backgroundColor = "#F8F9FA",
activeColor = "#007AFF",
inactiveColor = "#000000",
activeBackgroundColor = "#007AFF",
enableBackdropPress = true,
animationDuration = 300,
hasNavigationBar = true
} = props;
const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
const slideAnim = (0, import_react4.useRef)(new import_react_native20.Animated.Value(-drawerWidth)).current;
(0, import_react4.useImperativeHandle)(ref, () => ({
open: () => {
setIsOpen(true);
onOpen?.();
import_react_native20.Animated.timing(slideAnim, {
toValue: 0,
duration: animationDuration,
useNativeDriver: true
}).start();
},
close: () => {
import_react_native20.Animated.timing(slideAnim, {
toValue: -drawerWidth,
duration: animationDuration,
useNativeDriver: true
}).start(() => {
setIsOpen(false);
onClose?.();
});
},
toggle: () => {
if (isOpen) {
ref?.current?.close();
} else {
ref?.current?.open();
}
}
}));
const handleBackdropPress = () => {
if (enableBackdropPress && isOpen) {
ref?.current?.close();
}
};
if (!isOpen) return null;
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react_native20.TouchableOpacity,
{
style: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0, 0, 0, 0.4)",
zIndex: 999
},
activeOpacity: 1,
onPress: handleBackdropPress
}
),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react_native20.Animated.View,
{
style: {
position: "absolute",
top: 0,
left: 0,
width: drawerWidth,
height: "100%",
backgroundColor,
transform: [{ translateX: slideAnim }],
zIndex: hasNavigationBar ? 999 : 1e3,
shadowColor: "#000",
shadowOffset: {
width: 1,
height: 0
},
shadowOpacity: 0.15,
shadowRadius: 10
},
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native20.View, { style: { flex: 1, paddingTop: 60 }, children: [
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native20.View, { style: { paddingHorizontal: 24, paddingBottom: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react_native20.Text,
{
style: {
fontSize: 38,
fontWeight: "700",
color: "#000000",
letterSpacing: -1,
lineHeight: 46
},
children: title
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native20.View, { style: { flex: 1, paddingHorizontal: 20 }, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native20.View, { style: { marginBottom: 30 }, children: [
section.title && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react_native20.Text,
{
style: {
fontSize: 22,
fontWeight: "600",
color: "#000000",
marginBottom: 16,
marginLeft: 4
},
children: section.title
}
),
section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
import_react_native20.TouchableOpacity,
{
style: {
flexDirection: "row",
alignItems: "center",
paddingVertical: 15,
paddingHorizontal: 16,
marginBottom: 3,
backgroundColor: item.isSelected ? "#007AFF" : "transparent",
borderRadius: 12
},
onPress: item.onPress,
activeOpacity: 0.8,
children: [
item.icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native20.View, { style: { marginRight: 15 }, children: renderIcon(item.icon, item.isSelected) }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react_native20.Text,
{
style: {
flex: 1,
fontSize: 17,
fontWeight: item.isSelected ? "600" : "400",
color: item.isSelected ? "#FFFFFF" : "#000000",
letterSpacing: -0.3
},
children: item.label
}
),
item.badge && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react_native20.View,
{
style: {
backgroundColor: item.isSelected ? "rgba(255,255,255,0.25)" : "#FF3B30",
borderRadius: 15,
paddingHorizontal: 8,
paddingVertical: 4,
minWidth: 26,
alignItems: "center",
justifyContent: "center"
},
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react_native20.Text,
{
style: {
fontSize: 13,
fontWeight: "600",
color: "#FFFFFF"
},
children: item.badge
}
)
}
)
]
},
item.id
))
] }, sectionIndex)) })
] })
}
)
] });
});
PlatformDrawerIOS.displayName = "PlatformDrawer";
// src/components/PlatformDrawer.tsx
var import_jsx_runtime20 = require("react/jsx-runtime");
var PlatformDrawer = (0, import_react5.forwardRef)((props, ref) => {
const isIOS2 = import_react_native21.Platform.OS === "ios" || import_react_native21.Platform.OS === "web";
return isIOS2 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlatformDrawerIOS, { ref, ...props }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlatformDrawer, { ref, ...props });
});
PlatformDrawer.displayName = "";
// src/components/Toggle.tsx
var import_react_native24 = require("react-native");
// src/components/ios/ToggleIOS.tsx
var import_react_native22 = require("react-native");
var import_nativewind14 = require("nativewind");
var import_jsx_runtime21 = require("react/jsx-runtime");
var NativeSwitch = (0, import_nativewind14.cssInterop)(import_react_native22.Switch, { className: "style" });
var ToggleIOS = ({ className = "", ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
NativeSwitch,
{
className: `ios-toggle-base ${className}`,
ios_backgroundColor: "#E5E7EB",
trackColor: { false: "#E5E7EB", true: "#007AFF" },
thumbColor: "#FFFFFF",
...props
}
);
};
// src/components/android/ToggleAndroid.tsx
var import_react_native23 = require("react-native");
var import_nativewind15 = require("nativewind");
var import_jsx_runtime22 = require("react/jsx-runtime");
var NativeSwitch2 = (0, import_nativewind15.cssInterop)(import_react_native23.Switch, { className: "style" });
var ToggleAndroid = ({ className = "", ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
NativeSwitch2,
{
className: `android-toggle-base ${className}`,
trackColor: { false: "#9CA3AF", true: "#2563EB" },
thumbColor: props.value ? "#FFFFFF" : "#F3F4F6",
...props
}
);
};
// src/components/Toggle.tsx
var import_jsx_runtime23 = require("react/jsx-runtime");
var Toggle = (props) => {
const isIOS2 = import_react_native24.Platform.OS === "ios" || import_react_native24.Platform.OS === "web";
return isIOS2 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToggleIOS, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ToggleAndroid, { ...props });
};
// src/components/ActivityIndicator.tsx
var import_react_native27 = require("react-native");
// src/components/ios/ActivityIndicatorIOS.tsx
var import_react_native25 = require("react-native");
var import_jsx_runtime24 = require("react/jsx-runtime");
var ActivityIndicatorIOS = ({
size = "small",
className = ""
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
import_react_native25.ActivityIndicator,
{
className,
size,
color: "#007AFF"
}
);
};
// src/components/android/ActivityIndicatorAndroid.tsx
var import_react_native26 = require("react-native");
var import_jsx_runtime25 = require("react/jsx-runtime");
var ActivityIndicatorAndroid = ({
size = "small",
className = ""
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
import_react_native26.ActivityIndicator,
{
className,
size,
color: "#2563EB"
}
);
};
// src/components/ActivityIndicator.tsx
var import_jsx_runtime26 = require("react/jsx-runtime");
var ActivityIndicator3 = (props) => {
const isIOS2 = import_react_native27.Platform.OS === "ios" || import_react_native27.Platform.OS === "web";
return isIOS2 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ActivityIndicatorIOS, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ActivityIndicatorAndroid, { ...props });
};
// src/components/Checkbox.tsx
var import_react_native30 = require("react-native");
// src/components/ios/CheckBoxIOS.tsx
var import_react_native28 = require("react-native");
var import_vector_icons2 = require("@expo/vector-icons");
var import_jsx_runtime27 = require("react/jsx-runtime");
var CheckboxIOS = ({ value, onValueChange, className = "" }) => {
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.Pressable, { onPress: () => onValueChange(!value), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
import_react_native28.View,
{
className: `
h-5 w-5 items-center justify-center rounded-full border
${value ? "border-[#007AFF] bg-[#007AFF]" : "border-gray-300 bg-white"}
${className}
`,
children: value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_vector_icons2.Ionicons, { name: "checkmark", size: 12, color: "white" })
}
) });
};
// src/components/android/CheckBoxAndroid.tsx
var import_react_native29 = require("react-native");
var import_vector_icons3 = require("@expo/vector-icons");
var import_jsx_runtime28 = require("react/jsx-runtime");
var CheckboxAndroid = ({ value, onValueChange, className = "" }) => {
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Pressable, { onPress: () => onValueChange(!value), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
import_react_native29.View,
{
className: `
h-5 w-5 items-center justify-center rounded-sm border
${value ? "border-[#2563EB] bg-[#2563EB]" : "border-gray-400 bg-white"}
${className}
`,
children: value && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_vector_icons3.Ionicons, { name: "checkmark", size: 14, color: "white" })
}
) });
};
// src/components/Checkbox.tsx
var import_jsx_runtime29 = require("react/jsx-runtime");
var Checkbox = (props) => {
const isIOS2 = import_react_native30.Platform.OS === "ios" || import_react_native30.Platform.OS === "web";
return isIOS2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CheckboxIOS, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CheckboxAndroid, { ...props });
};
// src/components/DateTimeField.tsx
var import_react6 = require("react");
var import_react_native31 = require("react-native");
var import_datetimepicker = __toESM(require("@react-native-community/datetimepicker"));
var import_nativewind16 = require("nativewind");
var import_jsx_runtime30 = require("react/jsx-runtime");
var View15 = (0, import_nativewind16.cssInterop)(import_react_native31.View, { className: "style" });
var Text18 = (0, import_nativewind16.cssInterop)(import_react_native31.Text, { className: "style" });
var Pressable9 = (0, import_nativewind16.cssInterop)(import_react_native31.Pressable, { className: "style" });
var VALID_MINUTE_INTERVALS = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30];
var DateTimeField = ({
value,
onChange,
label,
helperText,
errorText,
className = "",
triggerClassName = "",
showInlineOnIOS = true,
locale,
format = { dateStyle: "medium", timeStyle: "short" },
mode = "date",
minimumDate,
maximumDate,
// iOS/web
minuteInterval,
themeVariant,
accentColor,
textColor,
// Android
is24Hour,
positiveButtonLabel,
negativeButtonLabel,
neutralButtonLabel,
// nou
pickerBackgroundColor,
pickerContainerClassName
}) => {
const [open, setOpen] = (0, import_react6.useState)(false);
const formatted = (0, import_react6.useMemo)(() => {
try {
return new Intl.DateTimeFormat(locale || void 0, format).format(value);
} catch {
return value.toLocaleString();
}
}, [value, locale, format]);
const handleChange = (e, selected) => {
if (import_react_native31.Platform.OS === "android") {
setOpen(false);
if (e.type === "set" && selected) onChange(selected);
if (e.type === "neutralButtonPressed") onChange(null);
} else {
if (selected) onChange(selected);
}
};
const safeMinuteInterval = minuteInterval && VALID_MINUTE_INTERVALS.includes(minuteInterval) ? minuteInterval : void 0;
const isCupertino = import_react_native31.Platform.OS === "ios" || import_react_native31.Platform.OS === "web";
const cupertinoDisplay = showInlineOnIOS ? "inline" : "compact";
const resolvedPickerBg = isCupertino ? pickerBackgroundColor ?? "#ffffff" : void 0;
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(View15, { className: `w-full ${className}`, children: [
!!label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text18, { className: "mb-1 text-sm text-gray-500", children: label }),
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
Pressable9,
{
onPress: () => setOpen(true),
accessibilityRole: "button",
accessibilityLabel: label || "Open date time picker",
className: `rounded-xl border border-gray-200 bg-white px-3 py-2 ${triggerClassName}`,
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text18, { className: "text-base text-gray-900", children: formatted })
}
),
!!helperText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text18, { className: "mt-1 text-xs text-gray-500", children: helperText }),
!!errorText && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text18, { className: "mt-1 text-xs text-red-600", children: errorText }),
open && (isCupertino ? (
// iOS și WEB
cupertinoDisplay === "inline" ? (
// placă albă cu colțuri ca în iOS
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
View15,
{
className: `mt-2 rounded-2xl border border-black/5 shadow-sm p-2 ${pickerContainerClassName || ""}`,
style: { backgroundColor: resolvedPickerBg },
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(View15, { className: "overflow-hidden rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
import_datetimepicker.default,
{
value,
mode,
display: "inline",
onChange: handleChange,
minimumDate,
maximumDate,
minuteInterval: safeMinuteInterval,
themeVariant,
accentColor,
textColor
}
) })
}
)
) : (
// compact: lăsăm nativ (arată ca field-ul iOS)
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(View15, { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
import_datetimepicker.default,
{
value,
mode,
display: "compact",
onChange: handleChange,
minimumDate,
maximumDate,
minuteInterval: safeMinuteInterval,
themeVariant,
accentColor,
textColor
}
) })
)
) : (
// ANDROID (dialog nativ)
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
import_datetimepicker.default,
{
value,
mode,
display: "default",
onChange: handleChange,
minimumDate,
maximumDate,
is24Hour,
positiveButton: { label: positiveButtonLabel },
negativeButton: { label: negativeButtonLabel },
neutralButton: neutralButtonLabel ? { label: neutralButtonLabel } : void 0
}
)
))
] });
};
// src/components/Stepper.tsx
var import_react_native34 = require("react-native");
// src/components/ios/StepperIOS.tsx
var import_react7 = require("react");
var import_react_native32