midestic-rn-library 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.1] - 2026-11-07
+
+### Added
+
+- Composable React Native tabs with controlled/uncontrolled selection, accessibility state, and NativeWind styling
+- Tabs usage documentation, Storybook example, and component/CLI tests
+
 ## [0.1.0] - 2026-09-28
 
 ### Added

package/README.md

@@ -27,7 +27,7 @@ Some components require additional native packages, such as `react-native-svg`,
 
 ## Available components
 
-`app-image`, `app-switch`, `button`, `calendar`, `celebration-shower`, `checkbox`, `draggable-drawer`, `drawer`, `header-back`, `icons`, `input`, `modal`, `my-text`, `number-input`, `otp-input`, `otp-input-square`, `phone-input`, `safe-top-view`, `search-input`, `select-input`, `status-switch`, `textarea`, `themed-scrollview`, `themed-text`, `themed-title`, `themed-view`.
+`app-image`, `app-switch`, `button`, `calendar`, `celebration-shower`, `checkbox`, `draggable-drawer`, `drawer`, `header-back`, `icons`, `input`, `modal`, `my-text`, `number-input`, `otp-input`, `otp-input-square`, `phone-input`, `safe-top-view`, `search-input`, `select-input`, `status-switch`, `tabs`, `textarea`, `themed-scrollview`, `themed-text`, `themed-title`, `themed-view`.
 
 The `icons` entry adds the current icon set as one source file.
 

package/dist/types/components/ui/tabs.d.ts

@@ -0,0 +1,19 @@
+import { type GestureResponderEvent, type PressableProps, type ViewProps } from "react-native";
+export type TabsProps = ViewProps & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare function Tabs({ value, defaultValue, onValueChange, children, className, ...props }: TabsProps): import("react").JSX.Element;
+export type TabsListProps = ViewProps;
+export declare function TabsList({ children, className, ...props }: TabsListProps): import("react").JSX.Element;
+export type TabsTriggerProps = Omit<PressableProps, "onPress"> & {
+    value: string;
+    onPress?: (event: GestureResponderEvent) => void;
+};
+export declare function TabsTrigger({ value, children, className, disabled, accessibilityState, onPress, ...props }: TabsTriggerProps): import("react").JSX.Element;
+export type TabsContentProps = ViewProps & {
+    value: string;
+};
+export declare function TabsContent({ value, children, className, ...props }: TabsContentProps): import("react").JSX.Element | null;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/types/components/ui/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAiBtB,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAkBpG;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC;AAEtC,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAYxE;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,GAAG;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,kBAAkB,EAClB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA4BlB;AAED,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,sCAWrF"}

package/dist/types/index.d.ts

@@ -26,5 +26,6 @@ export { ThemedScrollView, type ThemedScrollViewProps } from "./components/ui/th
 export { ThemedText, type ThemedTextProps } from "./components/ui/themed-text";
 export { ThemedTitle, type ThemedTitleProps } from "./components/ui/themed-title";
 export { ThemedView, type ThemedViewProps } from "./components/ui/themed-view";
+export { Tabs, TabsList, TabsTrigger, TabsContent, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps, } from "./components/ui/tabs";
 export * from "./icons";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,gBAAgB,GACtB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACrG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE/E,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,gBAAgB,GACtB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACrG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,WAAW,EACX,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,GACtB,MAAM,sBAAsB,CAAC;AAE9B,cAAc,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "midestic-rn-library",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "CLI for adding individual, editable NativeWind React Native components to your app.",
   "keywords": [
     "react-native",

package/src/components/ui/tabs.tsx

@@ -0,0 +1,126 @@
+import { cn } from "../../lib/utils";
+import { createContext, useContext, useState } from "react";
+import {
+  Pressable,
+  View,
+  type GestureResponderEvent,
+  type PressableProps,
+  type ViewProps,
+} from "react-native";
+
+type TabsContextValue = {
+  value: string | undefined;
+  setValue: (value: string) => void;
+};
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext(componentName: string) {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(`${componentName} must be used within a Tabs component.`);
+  }
+  return context;
+}
+
+export type TabsProps = ViewProps & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+
+export function Tabs({ value, defaultValue, onValueChange, children, className, ...props }: TabsProps) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const selectedValue = value === undefined ? uncontrolledValue : value;
+
+  const setValue = (nextValue: string) => {
+    if (value === undefined) {
+      setUncontrolledValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+
+  return (
+    <TabsContext.Provider value={{ value: selectedValue, setValue }}>
+      <View className={cn("flex-col", className)} {...props}>
+        {children}
+      </View>
+    </TabsContext.Provider>
+  );
+}
+
+export type TabsListProps = ViewProps;
+
+export function TabsList({ children, className, ...props }: TabsListProps) {
+  useTabsContext("TabsList");
+
+  return (
+    <View
+      accessibilityRole="tablist"
+      className={cn("flex-row items-center rounded-md bg-gray-100 p-1 dark:bg-gray-800", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+export type TabsTriggerProps = Omit<PressableProps, "onPress"> & {
+  value: string;
+  onPress?: (event: GestureResponderEvent) => void;
+};
+
+export function TabsTrigger({
+  value,
+  children,
+  className,
+  disabled = false,
+  accessibilityState,
+  onPress,
+  ...props
+}: TabsTriggerProps) {
+  const tabs = useTabsContext("TabsTrigger");
+  const selected = tabs.value === value;
+
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityState={{
+        ...accessibilityState,
+        selected,
+        disabled: disabled || accessibilityState?.disabled,
+      }}
+      className={cn(
+        "flex-1 items-center justify-center rounded-sm px-3 py-2",
+        selected && "bg-white dark:bg-gray-700",
+        disabled && "opacity-50",
+        className,
+      )}
+      disabled={disabled}
+      onPress={(event) => {
+        tabs.setValue(value);
+        onPress?.(event);
+      }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export type TabsContentProps = ViewProps & {
+  value: string;
+};
+
+export function TabsContent({ value, children, className, ...props }: TabsContentProps) {
+  const tabs = useTabsContext("TabsContent");
+  if (tabs.value !== value) {
+    return null;
+  }
+
+  return (
+    <View className={cn("mt-2", className)} {...props}>
+      {children}
+    </View>
+  );
+}

package/src/index.ts

@@ -33,5 +33,15 @@ export { ThemedScrollView, type ThemedScrollViewProps } from "./components/ui/th
 export { ThemedText, type ThemedTextProps } from "./components/ui/themed-text";
 export { ThemedTitle, type ThemedTitleProps } from "./components/ui/themed-title";
 export { ThemedView, type ThemedViewProps } from "./components/ui/themed-view";
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+} from "./components/ui/tabs";
 
 export * from "./icons";