@korsolutions/ui 0.0.61 → 0.0.62

package/dist/module/components/tabs/components/tabs-item.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import React, { useState } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import { useTabsContext } from "../context.js";
+import { useOrganizedChildren } from "../use-organized-children.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const calculateState = (isActive, isDisabled, isHovered) => {
+  if (isDisabled) {
+    return "disabled";
+  }
+  if (isActive) {
+    return "active";
+  }
+  if (isHovered) {
+    return "hovered";
+  }
+  return "default";
+};
+export function TabsItem(props) {
+  const {
+    children,
+    value: triggerValue,
+    isDisabled = false,
+    style,
+    ...pressableProps
+  } = props;
+  const {
+    value,
+    onChange,
+    styles
+  } = useTabsContext();
+  const [isHovered, setIsHovered] = useState(false);
+  const isActive = value === triggerValue;
+  const state = calculateState(isActive, isDisabled, isHovered);
+  const handlePress = () => {
+    if (!isDisabled) {
+      onChange(triggerValue);
+    }
+  };
+  const calculatedStyle = StyleSheet.flatten([styles?.item?.default, styles?.item?.[state], style]);
+  const textStyles = StyleSheet.flatten([styles?.itemText?.default, styles?.itemText?.[state]]);
+  const iconStyles = StyleSheet.flatten([styles?.itemIcon?.default, styles?.itemIcon?.[state]]);
+  const organizedChildren = useOrganizedChildren(children, textStyles, iconStyles ?? undefined);
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...pressableProps,
+    onHoverIn: e => {
+      setIsHovered(true);
+      pressableProps.onHoverIn?.(e);
+    },
+    onHoverOut: e => {
+      setIsHovered(false);
+      pressableProps.onHoverOut?.(e);
+    },
+    disabled: isDisabled,
+    onPress: handlePress,
+    style: calculatedStyle,
+    children: organizedChildren
+  });
+}
+//# sourceMappingURL=tabs-item.js.map

package/dist/module/components/tabs/components/tabs-item.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","StyleSheet","useTabsContext","useOrganizedChildren","jsx","_jsx","calculateState","isActive","isDisabled","isHovered","TabsItem","props","children","value","triggerValue","style","pressableProps","onChange","styles","setIsHovered","state","handlePress","calculatedStyle","flatten","item","default","textStyles","itemText","iconStyles","itemIcon","organizedChildren","undefined","onHoverIn","e","onHoverOut","disabled","onPress"],"sourceRoot":"../../../../../src","sources":["components/tabs/components/tabs-item.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SACEC,SAAS,EACTC,UAAU,QAIL,cAAc;AACrB,SAASC,cAAc,QAAQ,eAAY;AAE3C,SAASC,oBAAoB,QAAQ,8BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AASjE,MAAMC,cAAc,GAAGA,CACrBC,QAAiB,EACjBC,UAAmB,EACnBC,SAAkB,KACA;EAClB,IAAID,UAAU,EAAE;IACd,OAAO,UAAU;EACnB;EACA,IAAID,QAAQ,EAAE;IACZ,OAAO,QAAQ;EACjB;EACA,IAAIE,SAAS,EAAE;IACb,OAAO,SAAS;EAClB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASC,QAAQA,CAACC,KAAoB,EAAE;EAC7C,MAAM;IACJC,QAAQ;IACRC,KAAK,EAAEC,YAAY;IACnBN,UAAU,GAAG,KAAK;IAClBO,KAAK;IACL,GAAGC;EACL,CAAC,GAAGL,KAAK;EACT,MAAM;IAAEE,KAAK;IAAEI,QAAQ;IAAEC;EAAO,CAAC,GAAGhB,cAAc,CAAC,CAAC;EACpD,MAAM,CAACO,SAAS,EAAEU,YAAY,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMQ,QAAQ,GAAGM,KAAK,KAAKC,YAAY;EACvC,MAAMM,KAAK,GAAGd,cAAc,CAACC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,CAAC;EAE7D,MAAMY,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAI,CAACb,UAAU,EAAE;MACfS,QAAQ,CAACH,YAAY,CAAC;IACxB;EACF,CAAC;EAED,MAAMQ,eAAe,GAAGrB,UAAU,CAACsB,OAAO,CAAC,CACzCL,MAAM,EAAEM,IAAI,EAAEC,OAAO,EACrBP,MAAM,EAAEM,IAAI,GAAGJ,KAAK,CAAC,EACrBL,KAAK,CACN,CAAC;EAEF,MAAMW,UAAU,GAAGzB,UAAU,CAACsB,OAAO,CAAC,CACpCL,MAAM,EAAES,QAAQ,EAAEF,OAAO,EACzBP,MAAM,EAAES,QAAQ,GAAGP,KAAK,CAAC,CAC1B,CAAC;EAEF,MAAMQ,UAAU,GAAG3B,UAAU,CAACsB,OAAO,CAAC,CACpCL,MAAM,EAAEW,QAAQ,EAAEJ,OAAO,EACzBP,MAAM,EAAEW,QAAQ,GAAGT,KAAK,CAAC,CAC1B,CAAC;EAEF,MAAMU,iBAAiB,GAAG3B,oBAAoB,CAC5CS,QAAQ,EACRc,UAAU,EACVE,UAAU,IAAIG,SAChB,CAAC;EAED,oBACE1B,IAAA,CAACL,SAAS;IAAA,GACJgB,cAAc;IAClBgB,SAAS,EAAGC,CAAC,IAAK;MAChBd,YAAY,CAAC,IAAI,CAAC;MAClBH,cAAc,CAACgB,SAAS,GAAGC,CAAC,CAAC;IAC/B,CAAE;IACFC,UAAU,EAAGD,CAAC,IAAK;MACjBd,YAAY,CAAC,KAAK,CAAC;MACnBH,cAAc,CAACkB,UAAU,GAAGD,CAAC,CAAC;IAChC,CAAE;IACFE,QAAQ,EAAE3B,UAAW;IACrB4B,OAAO,EAAEf,WAAY;IACrBN,KAAK,EAAEO,eAAgB;IAAAV,QAAA,EAEtBkB;EAAiB,CACT,CAAC;AAEhB","ignoreList":[]}

package/dist/module/components/tabs/components/tabs-root.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useMemo } from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { TabsContext } from "../context.js";
 import { TabsVariants } from "../variants/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,11 +19,12 @@ export function TabsRoot(props) {
     onChange,
     styles: variantStyles
   }), [value, onChange, variantStyles]);
+  const composedStyles = StyleSheet.flatten([variantStyles?.root, style]);
   return /*#__PURE__*/_jsx(TabsContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(View, {
       ...viewProps,
-      style: style,
+      style: composedStyles,
       children: children
     })
   });

package/dist/module/components/tabs/components/tabs-root.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","View","TabsContext","TabsVariants","jsx","_jsx","TabsRoot","props","children","value","onChange","style","viewProps","variantStyles","variant","contextValue","styles","Provider"],"sourceRoot":"../../../../../src","sources":["components/tabs/components/tabs-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAwD,cAAc;AACnF,SAASC,WAAW,QAAQ,eAAY;AACxC,SAASC,YAAY,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU3C,OAAO,SAASC,QAAQA,CAACC,KAAoB,EAAE;EAC7C,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGL,KAAK;EAChE,MAAMM,aAAa,GAAGV,YAAY,CAACI,KAAK,CAACO,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC;EAEhE,MAAMC,YAAY,GAAGf,OAAO,CAC1B,OAAO;IACLS,KAAK;IACLC,QAAQ;IACRM,MAAM,EAAEH;EACV,CAAC,CAAC,EACF,CAACJ,KAAK,EAAEC,QAAQ,EAAEG,aAAa,CACjC,CAAC;EAED,oBACER,IAAA,CAACH,WAAW,CAACe,QAAQ;IAACR,KAAK,EAAEM,YAAa;IAAAP,QAAA,eACxCH,IAAA,CAACJ,IAAI;MAAA,GAAKW,SAAS;MAAED,KAAK,EAAEA,KAAM;MAAAH,QAAA,EAC/BA;IAAQ,CACL;EAAC,CACa,CAAC;AAE3B","ignoreList":[]}
+{"version":3,"names":["React","useMemo","StyleSheet","View","TabsContext","TabsVariants","jsx","_jsx","TabsRoot","props","children","value","onChange","style","viewProps","variantStyles","variant","contextValue","styles","composedStyles","flatten","root","Provider"],"sourceRoot":"../../../../../src","sources":["components/tabs/components/tabs-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,UAAU,EACVC,IAAI,QAIC,cAAc;AACrB,SAASC,WAAW,QAAQ,eAAY;AACxC,SAASC,YAAY,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU3C,OAAO,SAASC,QAAQA,CAACC,KAAoB,EAAE;EAC7C,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGL,KAAK;EAChE,MAAMM,aAAa,GAAGV,YAAY,CAACI,KAAK,CAACO,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC;EAEhE,MAAMC,YAAY,GAAGhB,OAAO,CAC1B,OAAO;IACLU,KAAK;IACLC,QAAQ;IACRM,MAAM,EAAEH;EACV,CAAC,CAAC,EACF,CAACJ,KAAK,EAAEC,QAAQ,EAAEG,aAAa,CACjC,CAAC;EACD,MAAMI,cAAc,GAAGjB,UAAU,CAACkB,OAAO,CAAC,CAACL,aAAa,EAAEM,IAAI,EAAER,KAAK,CAAC,CAAC;EAEvE,oBACEN,IAAA,CAACH,WAAW,CAACkB,QAAQ;IAACX,KAAK,EAAEM,YAAa;IAAAP,QAAA,eACxCH,IAAA,CAACJ,IAAI;MAAA,GAAKW,SAAS;MAAED,KAAK,EAAEM,cAAe;MAAAT,QAAA,EACxCA;IAAQ,CACL;EAAC,CACa,CAAC;AAE3B","ignoreList":[]}

package/dist/module/components/tabs/index.js

@@ -1,14 +1,10 @@
 "use strict";
 
-import { TabsList } from "./components/tabs-list.js";
+import { TabsItem } from "./components/tabs-item.js";
 import { TabsRoot } from "./components/tabs-root.js";
-import { TabsTrigger } from "./components/tabs-trigger.js";
-import { TabsTriggerText } from "./components/tabs-trigger-text.js";
 export const Tabs = {
   Root: TabsRoot,
-  List: TabsList,
-  Trigger: TabsTrigger,
-  TriggerText: TabsTriggerText
+  Item: TabsItem
 };
 export * from "./types.js";
 //# sourceMappingURL=index.js.map

package/dist/module/components/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["TabsList","TabsRoot","TabsTrigger","TabsTriggerText","Tabs","Root","List","Trigger","TriggerText"],"sourceRoot":"../../../../src","sources":["components/tabs/index.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,WAAW,QAAQ,8BAA2B;AACvD,SAASC,eAAe,QAAQ,mCAAgC;AAEhE,OAAO,MAAMC,IAAI,GAAG;EAClBC,IAAI,EAAEJ,QAAQ;EACdK,IAAI,EAAEN,QAAQ;EACdO,OAAO,EAAEL,WAAW;EACpBM,WAAW,EAAEL;AACf,CAAC;AAMD,cAAc,YAAS","ignoreList":[]}
+{"version":3,"names":["TabsItem","TabsRoot","Tabs","Root","Item"],"sourceRoot":"../../../../src","sources":["components/tabs/index.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,QAAQ,QAAQ,2BAAwB;AAEjD,OAAO,MAAMC,IAAI,GAAG;EAClBC,IAAI,EAAEF,QAAQ;EACdG,IAAI,EAAEJ;AACR,CAAC;AAID,cAAc,YAAS","ignoreList":[]}

package/dist/module/components/tabs/use-organized-children.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import React, { useMemo } from "react";
+import { Text } from "react-native";
+import { getElementProp } from "../../utils/element-utils.js";
+import { Icon } from "../icon/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function useOrganizedChildren(children, textStyle, iconProps) {
+  const organizedChildren = useMemo(() => {
+    if (typeof children === "string") {
+      return /*#__PURE__*/_jsx(Text, {
+        style: textStyle,
+        children: children
+      });
+    }
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        if (typeof child === "string") {
+          return /*#__PURE__*/_jsx(Text, {
+            style: textStyle,
+            children: child
+          }, index);
+        } else if (/*#__PURE__*/React.isValidElement(child) && child.type === Icon) {
+          return /*#__PURE__*/React.cloneElement(child, {
+            key: child.key,
+            ...iconProps,
+            style: [iconProps?.style, getElementProp(child, "style")]
+          });
+        }
+        return child;
+      });
+    }
+    return children;
+  }, [children, iconProps, textStyle]);
+  return organizedChildren;
+}
+//# sourceMappingURL=use-organized-children.js.map

package/dist/module/components/tabs/use-organized-children.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Text","getElementProp","Icon","jsx","_jsx","useOrganizedChildren","children","textStyle","iconProps","organizedChildren","style","Array","isArray","map","child","index","isValidElement","type","cloneElement","key"],"sourceRoot":"../../../../src","sources":["components/tabs/use-organized-children.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,cAAc,QAAQ,8BAA2B;AAC1D,SAASC,IAAI,QAAwB,kBAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,SAASC,oBAAoBA,CAClCC,QAAyB,EACzBC,SAA2C,EAC3CC,SAAgC,EAChC;EACA,MAAMC,iBAAiB,GAAGV,OAAO,CAAC,MAAM;IACtC,IAAI,OAAOO,QAAQ,KAAK,QAAQ,EAAE;MAChC,oBAAOF,IAAA,CAACJ,IAAI;QAACU,KAAK,EAAEH,SAAU;QAAAD,QAAA,EAAEA;MAAQ,CAAO,CAAC;IAClD;IACA,IAAIK,KAAK,CAACC,OAAO,CAACN,QAAQ,CAAC,EAAE;MAC3B,OAAOA,QAAQ,CAACO,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;QACpC,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE;UAC7B,oBACEV,IAAA,CAACJ,IAAI;YAAaU,KAAK,EAAEH,SAAU;YAAAD,QAAA,EAChCQ;UAAK,GADGC,KAEL,CAAC;QAEX,CAAC,MAAM,IAAI,aAAAjB,KAAK,CAACkB,cAAc,CAACF,KAAK,CAAC,IAAIA,KAAK,CAACG,IAAI,KAAKf,IAAI,EAAE;UAC7D,oBAAOJ,KAAK,CAACoB,YAAY,CAACJ,KAAK,EAA6B;YAC1DK,GAAG,EAAEL,KAAK,CAACK,GAAG;YACd,GAAGX,SAAS;YACZE,KAAK,EAAE,CAACF,SAAS,EAAEE,KAAK,EAAET,cAAc,CAACa,KAAK,EAAE,OAAO,CAAC;UAC1D,CAAC,CAAC;QACJ;QACA,OAAOA,KAAK;MACd,CAAC,CAAC;IACJ;IACA,OAAOR,QAAQ;EACjB,CAAC,EAAE,CAACA,QAAQ,EAAEE,SAAS,EAAED,SAAS,CAAC,CAAC;EAEpC,OAAOE,iBAAiB;AAC1B","ignoreList":[]}

package/dist/module/components/tabs/variants/default.js

@@ -8,18 +8,23 @@ export const useTabsVariantDefault = () => {
     fontFamily,
     fontSize
   }) => ({
-    list: {
+    root: {
       flexDirection: "row",
       backgroundColor: colors.muted,
       padding: 4,
       borderRadius: radius,
       gap: 4
     },
-    trigger: {
+    item: {
       default: {
-        paddingVertical: 8,
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        paddingVertical: 6,
         paddingHorizontal: 12,
-        borderRadius: radius,
+        borderRadius: radius - 2,
         backgroundColor: "transparent"
       },
       active: {
@@ -29,19 +34,32 @@ export const useTabsVariantDefault = () => {
           width: 0,
           height: 1
         },
-        shadowOpacity: 0.1,
+        shadowOpacity: 0.05,
         shadowRadius: 2,
-        elevation: 2
+        elevation: 1
       },
       disabled: {
         opacity: 0.5
       }
     },
-    triggerText: {
+    itemText: {
       default: {
         color: colors.mutedForeground,
         fontSize,
-        fontFamily
+        fontFamily,
+        fontWeight: "500"
+      },
+      active: {
+        color: colors.foreground
+      },
+      disabled: {
+        color: colors.mutedForeground
+      }
+    },
+    itemIcon: {
+      default: {
+        color: colors.mutedForeground,
+        size: fontSize
       },
       active: {
         color: colors.foreground

package/dist/module/components/tabs/variants/default.js.map

@@ -1 +1 @@
-{"version":3,"names":["useThemedStyles","useTabsVariantDefault","colors","radius","fontFamily","fontSize","list","flexDirection","backgroundColor","muted","padding","borderRadius","gap","trigger","default","paddingVertical","paddingHorizontal","active","background","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","disabled","opacity","triggerText","color","mutedForeground","foreground"],"sourceRoot":"../../../../../src","sources":["components/tabs/variants/default.tsx"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAkB;EACrD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAkB;IACzDC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,eAAe,EAAEN,MAAM,CAACO,KAAK;MAC7BC,OAAO,EAAE,CAAC;MACVC,YAAY,EAAER,MAAM;MACpBS,GAAG,EAAE;IACP,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE;QACPC,eAAe,EAAE,CAAC;QAClBC,iBAAiB,EAAE,EAAE;QACrBL,YAAY,EAAER,MAAM;QACpBK,eAAe,EAAE;MACnB,CAAC;MACDS,MAAM,EAAE;QACNT,eAAe,EAAEN,MAAM,CAACgB,UAAU;QAClCC,WAAW,EAAE,MAAM;QACnBC,YAAY,EAAE;UAAEC,KAAK,EAAE,CAAC;UAAEC,MAAM,EAAE;QAAE,CAAC;QACrCC,aAAa,EAAE,GAAG;QAClBC,YAAY,EAAE,CAAC;QACfC,SAAS,EAAE;MACb,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,WAAW,EAAE;MACXd,OAAO,EAAE;QACPe,KAAK,EAAE3B,MAAM,CAAC4B,eAAe;QAC7BzB,QAAQ;QACRD;MACF,CAAC;MACDa,MAAM,EAAE;QACNY,KAAK,EAAE3B,MAAM,CAAC6B;MAChB,CAAC;MACDL,QAAQ,EAAE;QACRG,KAAK,EAAE3B,MAAM,CAAC4B;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useThemedStyles","useTabsVariantDefault","colors","radius","fontFamily","fontSize","root","flexDirection","backgroundColor","muted","padding","borderRadius","gap","item","default","flex","alignItems","justifyContent","paddingVertical","paddingHorizontal","active","background","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","disabled","opacity","itemText","color","mutedForeground","fontWeight","foreground","itemIcon","size"],"sourceRoot":"../../../../../src","sources":["components/tabs/variants/default.tsx"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAkB;EACrD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAkB;IACzDC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,eAAe,EAAEN,MAAM,CAACO,KAAK;MAC7BC,OAAO,EAAE,CAAC;MACVC,YAAY,EAAER,MAAM;MACpBS,GAAG,EAAE;IACP,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,IAAI,EAAE,CAAC;QACPR,aAAa,EAAE,KAAK;QACpBS,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBL,GAAG,EAAE,CAAC;QACNM,eAAe,EAAE,CAAC;QAClBC,iBAAiB,EAAE,EAAE;QACrBR,YAAY,EAAER,MAAM,GAAG,CAAC;QACxBK,eAAe,EAAE;MACnB,CAAC;MACDY,MAAM,EAAE;QACNZ,eAAe,EAAEN,MAAM,CAACmB,UAAU;QAClCC,WAAW,EAAE,MAAM;QACnBC,YAAY,EAAE;UAAEC,KAAK,EAAE,CAAC;UAAEC,MAAM,EAAE;QAAE,CAAC;QACrCC,aAAa,EAAE,IAAI;QACnBC,YAAY,EAAE,CAAC;QACfC,SAAS,EAAE;MACb,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,QAAQ,EAAE;MACRjB,OAAO,EAAE;QACPkB,KAAK,EAAE9B,MAAM,CAAC+B,eAAe;QAC7B5B,QAAQ;QACRD,UAAU;QACV8B,UAAU,EAAE;MACd,CAAC;MACDd,MAAM,EAAE;QACNY,KAAK,EAAE9B,MAAM,CAACiC;MAChB,CAAC;MACDN,QAAQ,EAAE;QACRG,KAAK,EAAE9B,MAAM,CAAC+B;MAChB;IACF,CAAC;IACDG,QAAQ,EAAE;MACRtB,OAAO,EAAE;QACPkB,KAAK,EAAE9B,MAAM,CAAC+B,eAAe;QAC7BI,IAAI,EAAEhC;MACR,CAAC;MACDe,MAAM,EAAE;QACNY,KAAK,EAAE9B,MAAM,CAACiC;MAChB,CAAC;MACDN,QAAQ,EAAE;QACRG,KAAK,EAAE9B,MAAM,CAAC+B;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/module/components/tabs/variants/line.js

@@ -7,16 +7,20 @@ export const useTabsVariantLine = () => {
     fontFamily,
     fontSize
   }) => ({
-    list: {
+    root: {
       flexDirection: "row",
       borderBottomWidth: 1,
-      borderBottomColor: colors.border,
-      gap: 0
+      borderBottomColor: colors.border
     },
-    trigger: {
+    item: {
       default: {
-        paddingVertical: 12,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        paddingVertical: 8,
         paddingHorizontal: 16,
+        marginBottom: -1,
         borderBottomWidth: 2,
         borderBottomColor: "transparent",
         backgroundColor: "transparent"
@@ -28,11 +32,24 @@ export const useTabsVariantLine = () => {
         opacity: 0.5
       }
     },
-    triggerText: {
+    itemText: {
       default: {
         color: colors.mutedForeground,
         fontSize,
-        fontFamily
+        fontFamily,
+        fontWeight: "500"
+      },
+      active: {
+        color: colors.foreground
+      },
+      disabled: {
+        color: colors.mutedForeground
+      }
+    },
+    itemIcon: {
+      default: {
+        color: colors.mutedForeground,
+        size: fontSize
       },
       active: {
         color: colors.foreground

package/dist/module/components/tabs/variants/line.js.map

@@ -1 +1 @@
-{"version":3,"names":["useThemedStyles","useTabsVariantLine","colors","fontFamily","fontSize","list","flexDirection","borderBottomWidth","borderBottomColor","border","gap","trigger","default","paddingVertical","paddingHorizontal","backgroundColor","active","primary","disabled","opacity","triggerText","color","mutedForeground","foreground"],"sourceRoot":"../../../../../src","sources":["components/tabs/variants/line.tsx"],"mappings":";;AACA,SAASA,eAAe,QAAQ,qCAAkC;AAElE,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAkB;EAClD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAkB;IACjDC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,iBAAiB,EAAE,CAAC;MACpBC,iBAAiB,EAAEN,MAAM,CAACO,MAAM;MAChCC,GAAG,EAAE;IACP,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE;QACPC,eAAe,EAAE,EAAE;QACnBC,iBAAiB,EAAE,EAAE;QACrBP,iBAAiB,EAAE,CAAC;QACpBC,iBAAiB,EAAE,aAAa;QAChCO,eAAe,EAAE;MACnB,CAAC;MACDC,MAAM,EAAE;QACNR,iBAAiB,EAAEN,MAAM,CAACe;MAC5B,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,WAAW,EAAE;MACXR,OAAO,EAAE;QACPS,KAAK,EAAEnB,MAAM,CAACoB,eAAe;QAC7BlB,QAAQ;QACRD;MACF,CAAC;MACDa,MAAM,EAAE;QACNK,KAAK,EAAEnB,MAAM,CAACqB;MAChB,CAAC;MACDL,QAAQ,EAAE;QACRG,KAAK,EAAEnB,MAAM,CAACoB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useThemedStyles","useTabsVariantLine","colors","fontFamily","fontSize","root","flexDirection","borderBottomWidth","borderBottomColor","border","item","default","alignItems","justifyContent","gap","paddingVertical","paddingHorizontal","marginBottom","backgroundColor","active","primary","disabled","opacity","itemText","color","mutedForeground","fontWeight","foreground","itemIcon","size"],"sourceRoot":"../../../../../src","sources":["components/tabs/variants/line.tsx"],"mappings":";;AACA,SAASA,eAAe,QAAQ,qCAAkC;AAElE,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAkB;EAClD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAkB;IACjDC,IAAI,EAAE;MACJC,aAAa,EAAE,KAAK;MACpBC,iBAAiB,EAAE,CAAC;MACpBC,iBAAiB,EAAEN,MAAM,CAACO;IAC5B,CAAC;IACDC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPL,aAAa,EAAE,KAAK;QACpBM,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,GAAG,EAAE,CAAC;QACNC,eAAe,EAAE,CAAC;QAClBC,iBAAiB,EAAE,EAAE;QACrBC,YAAY,EAAE,CAAC,CAAC;QAChBV,iBAAiB,EAAE,CAAC;QACpBC,iBAAiB,EAAE,aAAa;QAChCU,eAAe,EAAE;MACnB,CAAC;MACDC,MAAM,EAAE;QACNX,iBAAiB,EAAEN,MAAM,CAACkB;MAC5B,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX;IACF,CAAC;IACDC,QAAQ,EAAE;MACRZ,OAAO,EAAE;QACPa,KAAK,EAAEtB,MAAM,CAACuB,eAAe;QAC7BrB,QAAQ;QACRD,UAAU;QACVuB,UAAU,EAAE;MACd,CAAC;MACDP,MAAM,EAAE;QACNK,KAAK,EAAEtB,MAAM,CAACyB;MAChB,CAAC;MACDN,QAAQ,EAAE;QACRG,KAAK,EAAEtB,MAAM,CAACuB;MAChB;IACF,CAAC;IACDG,QAAQ,EAAE;MACRjB,OAAO,EAAE;QACPa,KAAK,EAAEtB,MAAM,CAACuB,eAAe;QAC7BI,IAAI,EAAEzB;MACR,CAAC;MACDe,MAAM,EAAE;QACNK,KAAK,EAAEtB,MAAM,CAACyB;MAChB,CAAC;MACDN,QAAQ,EAAE;QACRG,KAAK,EAAEtB,MAAM,CAACuB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/typescript/src/components/tabs/components/{tabs-trigger.d.ts → tabs-item.d.ts}

@@ -1,10 +1,10 @@
 import React from "react";
 import { type PressableProps, type StyleProp, type ViewStyle } from "react-native";
-export interface TabsTriggerProps extends PressableProps {
+export interface TabsItemProps extends PressableProps {
     children: React.ReactNode;
     value: string;
     isDisabled?: boolean;
     style?: StyleProp<ViewStyle>;
 }
-export declare function TabsTrigger(props: TabsTriggerProps): React.JSX.Element;
-//# sourceMappingURL=tabs-trigger.d.ts.map
+export declare function TabsItem(props: TabsItemProps): React.JSX.Element;
+//# sourceMappingURL=tabs-item.d.ts.map

package/dist/typescript/src/components/tabs/components/tabs-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-item.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/components/tabs-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAmBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBA2D5C"}

package/dist/typescript/src/components/tabs/components/tabs-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/components/tabs-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAoB5C"}
+{"version":3,"file":"tabs-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/components/tabs-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAqB5C"}

package/dist/typescript/src/components/tabs/index.d.ts

@@ -1,16 +1,10 @@
-import { TabsList } from "./components/tabs-list";
+import { TabsItem } from "./components/tabs-item";
 import { TabsRoot } from "./components/tabs-root";
-import { TabsTrigger } from "./components/tabs-trigger";
-import { TabsTriggerText } from "./components/tabs-trigger-text";
 export declare const Tabs: {
     Root: typeof TabsRoot;
-    List: typeof TabsList;
-    Trigger: typeof TabsTrigger;
-    TriggerText: typeof TabsTriggerText;
+    Item: typeof TabsItem;
 };
-export type { TabsListProps } from "./components/tabs-list";
+export type { TabsItemProps } from "./components/tabs-item";
 export type { TabsRootProps } from "./components/tabs-root";
-export type { TabsTriggerProps } from "./components/tabs-trigger";
-export type { TabsTriggerTextProps } from "./components/tabs-trigger-text";
 export * from "./types";
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,eAAO,MAAM,IAAI;;;;;CAKhB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,eAAO,MAAM,IAAI;;;CAGhB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,cAAc,SAAS,CAAC"}

package/dist/typescript/src/components/tabs/types.d.ts

@@ -1,11 +1,12 @@
 import type { StyleProp, TextStyle } from "react-native";
-import type { TabsListProps } from "./components/tabs-list";
-import type { TabsTriggerProps } from "./components/tabs-trigger";
-export type TabsState = "default" | "active" | "disabled";
+import type { IconProps } from "../icon";
+import type { TabsItemProps } from "./components/tabs-item";
+import type { TabsRootProps } from "./components/tabs-root";
+export type TabsItemState = "default" | "active" | "disabled" | "hovered";
 export interface TabsStyles {
-    root?: TabsListProps["style"];
-    list?: TabsListProps["style"];
-    trigger?: Partial<Record<TabsState, TabsTriggerProps["style"]>>;
-    triggerText?: Partial<Record<TabsState, StyleProp<TextStyle>>>;
+    root?: TabsRootProps["style"];
+    item?: Partial<Record<TabsItemState, TabsItemProps["style"]>>;
+    itemText?: Partial<Record<TabsItemState, StyleProp<TextStyle>>>;
+    itemIcon?: Partial<Record<TabsItemState, IconProps>>;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/components/tabs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAChE"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1E,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;CACtD"}

package/dist/typescript/src/components/tabs/use-organized-children.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+import { type IconProps } from "../icon";
+export declare function useOrganizedChildren(children: React.ReactNode, textStyle: StyleProp<TextStyle> | undefined, iconProps: IconProps | undefined): number | bigint | boolean | any[] | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+//# sourceMappingURL=use-organized-children.d.ts.map

package/dist/typescript/src/components/tabs/use-organized-children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-organized-children.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/use-organized-children.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,EAC3C,SAAS,EAAE,SAAS,GAAG,SAAS,kSA4BjC"}

package/dist/typescript/src/components/tabs/variants/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,qBAAqB,QAAO,UA4CxC,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/variants/default.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,qBAAqB,QAAO,UA8DxC,CAAC"}

package/dist/typescript/src/components/tabs/variants/line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/variants/line.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAGxC,eAAO,MAAM,kBAAkB,QAAO,UAuCrC,CAAC"}
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/variants/line.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAGxC,eAAO,MAAM,kBAAkB,QAAO,UAwDrC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/tabs/components/tabs-item.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { useTabsContext } from "../context";
+import type { TabsItemState } from "../types";
+import { useOrganizedChildren } from "../use-organized-children";
+
+export interface TabsItemProps extends PressableProps {
+  children: React.ReactNode;
+  value: string;
+  isDisabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (
+  isActive: boolean,
+  isDisabled: boolean,
+  isHovered: boolean,
+): TabsItemState => {
+  if (isDisabled) {
+    return "disabled";
+  }
+  if (isActive) {
+    return "active";
+  }
+  if (isHovered) {
+    return "hovered";
+  }
+  return "default";
+};
+
+export function TabsItem(props: TabsItemProps) {
+  const {
+    children,
+    value: triggerValue,
+    isDisabled = false,
+    style,
+    ...pressableProps
+  } = props;
+  const { value, onChange, styles } = useTabsContext();
+  const [isHovered, setIsHovered] = useState(false);
+  const isActive = value === triggerValue;
+  const state = calculateState(isActive, isDisabled, isHovered);
+
+  const handlePress = () => {
+    if (!isDisabled) {
+      onChange(triggerValue);
+    }
+  };
+
+  const calculatedStyle = StyleSheet.flatten([
+    styles?.item?.default,
+    styles?.item?.[state],
+    style,
+  ]);
+
+  const textStyles = StyleSheet.flatten([
+    styles?.itemText?.default,
+    styles?.itemText?.[state],
+  ]);
+
+  const iconStyles = StyleSheet.flatten([
+    styles?.itemIcon?.default,
+    styles?.itemIcon?.[state],
+  ]);
+
+  const organizedChildren = useOrganizedChildren(
+    children,
+    textStyles,
+    iconStyles ?? undefined,
+  );
+
+  return (
+    <Pressable
+      {...pressableProps}
+      onHoverIn={(e) => {
+        setIsHovered(true);
+        pressableProps.onHoverIn?.(e);
+      }}
+      onHoverOut={(e) => {
+        setIsHovered(false);
+        pressableProps.onHoverOut?.(e);
+      }}
+      disabled={isDisabled}
+      onPress={handlePress}
+      style={calculatedStyle}
+    >
+      {organizedChildren}
+    </Pressable>
+  );
+}

package/src/components/tabs/components/tabs-root.tsx

@@ -1,5 +1,11 @@
 import React, { useMemo } from "react";
-import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import {
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
 import { TabsContext } from "../context";
 import { TabsVariants } from "../variants";
 
@@ -23,10 +29,11 @@ export function TabsRoot(props: TabsRootProps) {
     }),
     [value, onChange, variantStyles],
   );
+  const composedStyles = StyleSheet.flatten([variantStyles?.root, style]);
 
   return (
     <TabsContext.Provider value={contextValue}>
-      <View {...viewProps} style={style}>
+      <View {...viewProps} style={composedStyles}>
         {children}
       </View>
     </TabsContext.Provider>

package/src/components/tabs/index.ts

@@ -1,17 +1,11 @@
-import { TabsList } from "./components/tabs-list";
+import { TabsItem } from "./components/tabs-item";
 import { TabsRoot } from "./components/tabs-root";
-import { TabsTrigger } from "./components/tabs-trigger";
-import { TabsTriggerText } from "./components/tabs-trigger-text";
 
 export const Tabs = {
   Root: TabsRoot,
-  List: TabsList,
-  Trigger: TabsTrigger,
-  TriggerText: TabsTriggerText,
+  Item: TabsItem,
 };
 
-export type { TabsListProps } from "./components/tabs-list";
+export type { TabsItemProps } from "./components/tabs-item";
 export type { TabsRootProps } from "./components/tabs-root";
-export type { TabsTriggerProps } from "./components/tabs-trigger";
-export type { TabsTriggerTextProps } from "./components/tabs-trigger-text";
 export * from "./types";

package/src/components/tabs/types.ts

@@ -1,12 +1,13 @@
 import type { StyleProp, TextStyle } from "react-native";
-import type { TabsListProps } from "./components/tabs-list";
-import type { TabsTriggerProps } from "./components/tabs-trigger";
+import type { IconProps } from "../icon";
+import type { TabsItemProps } from "./components/tabs-item";
+import type { TabsRootProps } from "./components/tabs-root";
 
-export type TabsState = "default" | "active" | "disabled";
+export type TabsItemState = "default" | "active" | "disabled" | "hovered";
 
 export interface TabsStyles {
-  root?: TabsListProps["style"];
-  list?: TabsListProps["style"];
-  trigger?: Partial<Record<TabsState, TabsTriggerProps["style"]>>;
-  triggerText?: Partial<Record<TabsState, StyleProp<TextStyle>>>;
+  root?: TabsRootProps["style"];
+  item?: Partial<Record<TabsItemState, TabsItemProps["style"]>>;
+  itemText?: Partial<Record<TabsItemState, StyleProp<TextStyle>>>;
+  itemIcon?: Partial<Record<TabsItemState, IconProps>>;
 }

package/src/components/tabs/use-organized-children.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from "react";
+import { Text, type StyleProp, type TextStyle } from "react-native";
+import { getElementProp } from "../../utils/element-utils";
+import { Icon, type IconProps } from "../icon";
+
+export function useOrganizedChildren(
+  children: React.ReactNode,
+  textStyle: StyleProp<TextStyle> | undefined,
+  iconProps: IconProps | undefined,
+) {
+  const organizedChildren = useMemo(() => {
+    if (typeof children === "string") {
+      return <Text style={textStyle}>{children}</Text>;
+    }
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        if (typeof child === "string") {
+          return (
+            <Text key={index} style={textStyle}>
+              {child}
+            </Text>
+          );
+        } else if (React.isValidElement(child) && child.type === Icon) {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            key: child.key,
+            ...iconProps,
+            style: [iconProps?.style, getElementProp(child, "style")],
+          });
+        }
+        return child;
+      });
+    }
+    return children;
+  }, [children, iconProps, textStyle]);
+
+  return organizedChildren;
+}

package/src/components/tabs/variants/default.tsx

@@ -4,37 +4,55 @@ import { type TabsStyles } from "../types";
 export const useTabsVariantDefault = (): TabsStyles => {
   return useThemedStyles(
     ({ colors, radius, fontFamily, fontSize }): TabsStyles => ({
-      list: {
+      root: {
         flexDirection: "row",
         backgroundColor: colors.muted,
         padding: 4,
         borderRadius: radius,
         gap: 4,
       },
-      trigger: {
+      item: {
         default: {
-          paddingVertical: 8,
+          flex: 1,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          paddingVertical: 6,
           paddingHorizontal: 12,
-          borderRadius: radius,
+          borderRadius: radius - 2,
           backgroundColor: "transparent",
         },
         active: {
           backgroundColor: colors.background,
           shadowColor: "#000",
           shadowOffset: { width: 0, height: 1 },
-          shadowOpacity: 0.1,
+          shadowOpacity: 0.05,
           shadowRadius: 2,
-          elevation: 2,
+          elevation: 1,
         },
         disabled: {
           opacity: 0.5,
         },
       },
-      triggerText: {
+      itemText: {
         default: {
           color: colors.mutedForeground,
           fontSize,
           fontFamily,
+          fontWeight: "500",
+        },
+        active: {
+          color: colors.foreground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      itemIcon: {
+        default: {
+          color: colors.mutedForeground,
+          size: fontSize,
         },
         active: {
           color: colors.foreground,

package/src/components/tabs/variants/line.tsx

@@ -4,16 +4,20 @@ import { useThemedStyles } from "../../../utils/use-themed-styles";
 export const useTabsVariantLine = (): TabsStyles => {
   return useThemedStyles(
     ({ colors, fontFamily, fontSize }): TabsStyles => ({
-      list: {
+      root: {
         flexDirection: "row",
         borderBottomWidth: 1,
         borderBottomColor: colors.border,
-        gap: 0,
       },
-      trigger: {
+      item: {
         default: {
-          paddingVertical: 12,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 8,
+          paddingVertical: 8,
           paddingHorizontal: 16,
+          marginBottom: -1,
           borderBottomWidth: 2,
           borderBottomColor: "transparent",
           backgroundColor: "transparent",
@@ -25,11 +29,24 @@ export const useTabsVariantLine = (): TabsStyles => {
           opacity: 0.5,
         },
       },
-      triggerText: {
+      itemText: {
         default: {
           color: colors.mutedForeground,
           fontSize,
           fontFamily,
+          fontWeight: "500",
+        },
+        active: {
+          color: colors.foreground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+      itemIcon: {
+        default: {
+          color: colors.mutedForeground,
+          size: fontSize,
         },
         active: {
           color: colors.foreground,

package/dist/module/components/tabs/components/tabs-list.js

@@ -1,23 +0,0 @@
-"use strict";
-
-import React from "react";
-import { View } from "react-native";
-import { useTabsContext } from "../context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function TabsList(props) {
-  const {
-    children,
-    style,
-    ...viewProps
-  } = props;
-  const {
-    styles
-  } = useTabsContext();
-  const calculatedStyle = [styles?.list, style];
-  return /*#__PURE__*/_jsx(View, {
-    ...viewProps,
-    style: calculatedStyle,
-    children: children
-  });
-}
-//# sourceMappingURL=tabs-list.js.map

package/dist/module/components/tabs/components/tabs-list.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","View","useTabsContext","jsx","_jsx","TabsList","props","children","style","viewProps","styles","calculatedStyle","list"],"sourceRoot":"../../../../../src","sources":["components/tabs/components/tabs-list.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwD,cAAc;AACnF,SAASC,cAAc,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO5C,OAAO,SAASC,QAAQA,CAACC,KAAoB,EAAE;EAC7C,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EAC/C,MAAM;IAAEI;EAAO,CAAC,GAAGR,cAAc,CAAC,CAAC;EAEnC,MAAMS,eAAe,GAAG,CAACD,MAAM,EAAEE,IAAI,EAAEJ,KAAK,CAAC;EAE7C,oBACEJ,IAAA,CAACH,IAAI;IAAA,GAAKQ,SAAS;IAAED,KAAK,EAAEG,eAAgB;IAAAJ,QAAA,EACzCA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}

package/dist/module/components/tabs/components/tabs-trigger-text.js

@@ -1,28 +0,0 @@
-"use strict";
-
-import React from "react";
-import { Text } from "react-native";
-import { useTabsContext } from "../context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function TabsTriggerText(props) {
-  const {
-    children,
-    value: triggerValue,
-    isDisabled,
-    style,
-    ...textProps
-  } = props;
-  const {
-    value,
-    styles
-  } = useTabsContext();
-  const isActive = value === triggerValue;
-  const state = isDisabled ? "disabled" : isActive ? "active" : "default";
-  const calculatedStyle = [styles?.triggerText?.default, styles?.triggerText?.[state], style];
-  return /*#__PURE__*/_jsx(Text, {
-    ...textProps,
-    style: calculatedStyle,
-    children: children
-  });
-}
-//# sourceMappingURL=tabs-trigger-text.js.map

package/dist/module/components/tabs/components/tabs-trigger-text.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Text","useTabsContext","jsx","_jsx","TabsTriggerText","props","children","value","triggerValue","isDisabled","style","textProps","styles","isActive","state","calculatedStyle","triggerText","default"],"sourceRoot":"../../../../../src","sources":["components/tabs/components/tabs-trigger-text.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwD,cAAc;AACnF,SAASC,cAAc,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS5C,OAAO,SAASC,eAAeA,CAACC,KAA2B,EAAE;EAC3D,MAAM;IAAEC,QAAQ;IAAEC,KAAK,EAAEC,YAAY;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGN,KAAK;EAChF,MAAM;IAAEE,KAAK;IAAEK;EAAO,CAAC,GAAGX,cAAc,CAAC,CAAC;EAE1C,MAAMY,QAAQ,GAAGN,KAAK,KAAKC,YAAY;EACvC,MAAMM,KAAK,GAAGL,UAAU,GAAG,UAAU,GAAGI,QAAQ,GAAG,QAAQ,GAAG,SAAS;EAEvE,MAAME,eAAe,GAAG,CAACH,MAAM,EAAEI,WAAW,EAAEC,OAAO,EAAEL,MAAM,EAAEI,WAAW,GAAGF,KAAK,CAAC,EAAEJ,KAAK,CAAC;EAE3F,oBACEP,IAAA,CAACH,IAAI;IAAA,GAAKW,SAAS;IAAED,KAAK,EAAEK,eAAgB;IAAAT,QAAA,EACzCA;EAAQ,CACL,CAAC;AAEX","ignoreList":[]}

package/dist/module/components/tabs/components/tabs-trigger.js

@@ -1,45 +0,0 @@
-"use strict";
-
-import React from "react";
-import { Pressable } from "react-native";
-import { useTabsContext } from "../context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const calculateState = (isActive, isDisabled) => {
-  if (isDisabled) {
-    return "disabled";
-  }
-  if (isActive) {
-    return "active";
-  }
-  return "default";
-};
-export function TabsTrigger(props) {
-  const {
-    children,
-    value: triggerValue,
-    isDisabled,
-    style,
-    ...pressableProps
-  } = props;
-  const {
-    value,
-    onChange,
-    styles
-  } = useTabsContext();
-  const isActive = value === triggerValue;
-  const state = calculateState(isActive, isDisabled);
-  const handlePress = () => {
-    if (!isDisabled) {
-      onChange(triggerValue);
-    }
-  };
-  const calculatedStyle = [styles?.trigger?.default, styles?.trigger?.[state], style];
-  return /*#__PURE__*/_jsx(Pressable, {
-    ...pressableProps,
-    disabled: isDisabled,
-    onPress: handlePress,
-    style: calculatedStyle,
-    children: children
-  });
-}
-//# sourceMappingURL=tabs-trigger.js.map

package/dist/module/components/tabs/components/tabs-trigger.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Pressable","useTabsContext","jsx","_jsx","calculateState","isActive","isDisabled","TabsTrigger","props","children","value","triggerValue","style","pressableProps","onChange","styles","state","handlePress","calculatedStyle","trigger","default","disabled","onPress"],"sourceRoot":"../../../../../src","sources":["components/tabs/components/tabs-trigger.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAA6D,cAAc;AAC7F,SAASC,cAAc,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU5C,MAAMC,cAAc,GAAGA,CAACC,QAAiB,EAAEC,UAA+B,KAAgB;EACxF,IAAIA,UAAU,EAAE;IACd,OAAO,UAAU;EACnB;EACA,IAAID,QAAQ,EAAE;IACZ,OAAO,QAAQ;EACjB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,WAAWA,CAACC,KAAuB,EAAE;EACnD,MAAM;IAAEC,QAAQ;IAAEC,KAAK,EAAEC,YAAY;IAAEL,UAAU;IAAEM,KAAK;IAAE,GAAGC;EAAe,CAAC,GAAGL,KAAK;EACrF,MAAM;IAAEE,KAAK;IAAEI,QAAQ;IAAEC;EAAO,CAAC,GAAGd,cAAc,CAAC,CAAC;EAEpD,MAAMI,QAAQ,GAAGK,KAAK,KAAKC,YAAY;EACvC,MAAMK,KAAK,GAAGZ,cAAc,CAACC,QAAQ,EAAEC,UAAU,CAAC;EAElD,MAAMW,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAI,CAACX,UAAU,EAAE;MACfQ,QAAQ,CAACH,YAAY,CAAC;IACxB;EACF,CAAC;EAED,MAAMO,eAAe,GAAG,CAACH,MAAM,EAAEI,OAAO,EAAEC,OAAO,EAAEL,MAAM,EAAEI,OAAO,GAAGH,KAAK,CAAC,EAAEJ,KAAK,CAAC;EAEnF,oBACET,IAAA,CAACH,SAAS;IAAA,GAAKa,cAAc;IAAEQ,QAAQ,EAAEf,UAAW;IAACgB,OAAO,EAAEL,WAAY;IAACL,KAAK,EAAEM,eAAgB;IAAAT,QAAA,EAC/FA;EAAQ,CACA,CAAC;AAEhB","ignoreList":[]}

package/dist/typescript/src/components/tabs/components/tabs-list.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-export interface TabsListProps extends ViewProps {
-    children: React.ReactNode;
-    style?: StyleProp<ViewStyle>;
-}
-export declare function TabsList(props: TabsListProps): React.JSX.Element;
-//# sourceMappingURL=tabs-list.d.ts.map

package/dist/typescript/src/components/tabs/components/tabs-list.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs-list.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/components/tabs-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpF,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAW5C"}

package/dist/typescript/src/components/tabs/components/tabs-trigger-text.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { type StyleProp, type TextProps, type TextStyle } from "react-native";
-export interface TabsTriggerTextProps extends TextProps {
-    children: React.ReactNode;
-    value: string;
-    isDisabled?: boolean;
-    style?: StyleProp<TextStyle>;
-}
-export declare function TabsTriggerText(props: TabsTriggerTextProps): React.JSX.Element;
-//# sourceMappingURL=tabs-trigger-text.d.ts.map

package/dist/typescript/src/components/tabs/components/tabs-trigger-text.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs-trigger-text.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/components/tabs-trigger-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpF,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAc1D"}

package/dist/typescript/src/components/tabs/components/tabs-trigger.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tabs-trigger.d.ts","sourceRoot":"","sources":["../../../../../../src/components/tabs/components/tabs-trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9F,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAYD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAoBlD"}

package/src/components/tabs/components/tabs-list.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
-import { useTabsContext } from "../context";
-
-export interface TabsListProps extends ViewProps {
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-export function TabsList(props: TabsListProps) {
-  const { children, style, ...viewProps } = props;
-  const { styles } = useTabsContext();
-
-  const calculatedStyle = [styles?.list, style];
-
-  return (
-    <View {...viewProps} style={calculatedStyle}>
-      {children}
-    </View>
-  );
-}

package/src/components/tabs/components/tabs-trigger-text.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
-import { useTabsContext } from "../context";
-
-export interface TabsTriggerTextProps extends TextProps {
-  children: React.ReactNode;
-  value: string;
-  isDisabled?: boolean;
-  style?: StyleProp<TextStyle>;
-}
-
-export function TabsTriggerText(props: TabsTriggerTextProps) {
-  const { children, value: triggerValue, isDisabled, style, ...textProps } = props;
-  const { value, styles } = useTabsContext();
-
-  const isActive = value === triggerValue;
-  const state = isDisabled ? "disabled" : isActive ? "active" : "default";
-
-  const calculatedStyle = [styles?.triggerText?.default, styles?.triggerText?.[state], style];
-
-  return (
-    <Text {...textProps} style={calculatedStyle}>
-      {children}
-    </Text>
-  );
-}

package/src/components/tabs/components/tabs-trigger.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
-import { useTabsContext } from "../context";
-import type { TabsState } from "../types";
-
-export interface TabsTriggerProps extends PressableProps {
-  children: React.ReactNode;
-  value: string;
-  isDisabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
-
-const calculateState = (isActive: boolean, isDisabled: boolean | undefined): TabsState => {
-  if (isDisabled) {
-    return "disabled";
-  }
-  if (isActive) {
-    return "active";
-  }
-  return "default";
-};
-
-export function TabsTrigger(props: TabsTriggerProps) {
-  const { children, value: triggerValue, isDisabled, style, ...pressableProps } = props;
-  const { value, onChange, styles } = useTabsContext();
-
-  const isActive = value === triggerValue;
-  const state = calculateState(isActive, isDisabled);
-
-  const handlePress = () => {
-    if (!isDisabled) {
-      onChange(triggerValue);
-    }
-  };
-
-  const calculatedStyle = [styles?.trigger?.default, styles?.trigger?.[state], style];
-
-  return (
-    <Pressable {...pressableProps} disabled={isDisabled} onPress={handlePress} style={calculatedStyle}>
-      {children}
-    </Pressable>
-  );
-}