@korsolutions/ui 0.0.60 → 0.0.62

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/button/variants/ghost.d.ts

@@ -0,0 +1,3 @@
+import { type ButtonStyles } from "../..";
+export declare const useButtonVariantGhost: () => ButtonStyles;
+//# sourceMappingURL=ghost.d.ts.map

package/dist/typescript/src/components/button/variants/ghost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ghost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/ghost.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,eAAO,MAAM,qBAAqB,QAAO,YAkDxC,CAAC"}

package/dist/typescript/src/components/button/variants/index.d.ts

@@ -1,5 +1,6 @@
 export declare const ButtonVariants: {
     default: () => import("..").ButtonStyles;
     secondary: () => import("..").ButtonStyles;
+    ghost: () => import("..").ButtonStyles;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/button/variants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc;;;CAG1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/variants/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc;;;;CAI1B,CAAC"}

package/dist/typescript/src/components/icon-button/icon-button.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import type { SvgProps } from "../../types/props.types";
+import { IconButtonVariants } from "./variants";
+export interface IconButtonProps extends Omit<PressableProps, "disabled" | "children"> {
+    render: (props: SvgProps) => React.ReactNode;
+    variant?: keyof typeof IconButtonVariants;
+    isDisabled?: boolean;
+    size?: number;
+    color?: SvgProps["color"];
+    strokeWidth?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function IconButton(props: IconButtonProps): React.JSX.Element;
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/typescript/src/components/icon-button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,CAAC;IACrD,MAAM,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,OAAO,kBAAkB,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAsDhD"}

package/dist/typescript/src/components/icon-button/index.d.ts

@@ -0,0 +1,3 @@
+export { IconButton, type IconButtonProps } from "./icon-button";
+export type { IconButtonStyles } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/icon-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/typescript/src/components/icon-button/types.d.ts

@@ -0,0 +1,8 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { SvgProps } from "../../types/props.types";
+export type IconButtonState = "default" | "disabled" | "hovered";
+export interface IconButtonStyles {
+    root?: Partial<Record<IconButtonState, StyleProp<ViewStyle>>>;
+    icon?: Partial<Record<IconButtonState, SvgProps>>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/components/icon-button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/icon-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;CACnD"}

package/dist/typescript/src/components/icon-button/variants/default.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonStyles } from "../types";
+export declare const useIconButtonVariantDefault: () => IconButtonStyles;
+//# sourceMappingURL=default.d.ts.map

package/dist/typescript/src/components/icon-button/variants/default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/icon-button/variants/default.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,eAAO,MAAM,2BAA2B,QAAO,gBA2B9C,CAAC"}

package/dist/typescript/src/components/icon-button/variants/ghost.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonStyles } from "../types";
+export declare const useIconButtonVariantGhost: () => IconButtonStyles;
+//# sourceMappingURL=ghost.d.ts.map

package/dist/typescript/src/components/icon-button/variants/ghost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ghost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/icon-button/variants/ghost.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,eAAO,MAAM,yBAAyB,QAAO,gBA4B5C,CAAC"}

package/dist/typescript/src/components/icon-button/variants/index.d.ts

@@ -0,0 +1,6 @@
+export declare const IconButtonVariants: {
+    default: () => import("..").IconButtonStyles;
+    secondary: () => import("..").IconButtonStyles;
+    ghost: () => import("..").IconButtonStyles;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/icon-button/variants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/icon-button/variants/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB;;;;CAI9B,CAAC"}

package/dist/typescript/src/components/icon-button/variants/secondary.d.ts

@@ -0,0 +1,3 @@
+import type { IconButtonStyles } from "../types";
+export declare const useIconButtonVariantSecondary: () => IconButtonStyles;
+//# sourceMappingURL=secondary.d.ts.map

package/dist/typescript/src/components/icon-button/variants/secondary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secondary.d.ts","sourceRoot":"","sources":["../../../../../../src/components/icon-button/variants/secondary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,eAAO,MAAM,6BAA6B,QAAO,gBA8BhD,CAAC"}

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

@@ -9,6 +9,7 @@ export * from "./checkbox";
 export * from "./empty";
 export * from "./field";
 export * from "./icon";
+export * from "./icon-button";
 export * from "./input";
 export * from "./link";
 export * from "./list";
@@ -19,6 +20,7 @@ export * from "./portal";
 export * from "./progress";
 export * from "./scroll-bar";
 export * from "./select";
+export * from "./separator";
 export * from "./tabs";
 export * from "./textarea";
 export * from "./toast";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Separator, type SeparatorProps } from "./separator";
+export type { SeparatorStyles } from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/separator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/dist/typescript/src/components/separator/separator.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { SeparatorVariants } from "./variants";
+export interface SeparatorProps {
+    variant?: keyof typeof SeparatorVariants;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function Separator(props: SeparatorProps): React.JSX.Element;
+//# sourceMappingURL=separator.d.ts.map

package/dist/typescript/src/components/separator/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAK9C"}

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

@@ -0,0 +1,5 @@
+import type { StyleProp, ViewStyle } from "react-native";
+export interface SeparatorStyles {
+    root?: StyleProp<ViewStyle>;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/separator/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B"}

package/dist/typescript/src/components/separator/variants/horizontal.d.ts

@@ -0,0 +1,3 @@
+import type { SeparatorStyles } from "../types";
+export declare const useSeparatorVariantHorizontal: () => SeparatorStyles;
+//# sourceMappingURL=horizontal.d.ts.map

package/dist/typescript/src/components/separator/variants/horizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"horizontal.d.ts","sourceRoot":"","sources":["../../../../../../src/components/separator/variants/horizontal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,6BAA6B,QAAO,eAUhD,CAAC"}

package/dist/typescript/src/components/separator/variants/index.d.ts

@@ -0,0 +1,5 @@
+export declare const SeparatorVariants: {
+    horizontal: () => import("..").SeparatorStyles;
+    vertical: () => import("..").SeparatorStyles;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/separator/variants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/separator/variants/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;CAG7B,CAAC"}

package/dist/typescript/src/components/separator/variants/vertical.d.ts

@@ -0,0 +1,3 @@
+import type { SeparatorStyles } from "../types";
+export declare const useSeparatorVariantVertical: () => SeparatorStyles;
+//# sourceMappingURL=vertical.d.ts.map

package/dist/typescript/src/components/separator/variants/vertical.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical.d.ts","sourceRoot":"","sources":["../../../../../../src/components/separator/variants/vertical.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,2BAA2B,QAAO,eAU9C,CAAC"}

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.60",
+  "version": "0.0.62",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/components/button/variants/ghost.tsx

@@ -0,0 +1,55 @@
+import { type ButtonStyles } from "../..";
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+
+export const useButtonVariantGhost = (): ButtonStyles => {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ButtonStyles => ({
+      root: {
+        default: {
+          flexDirection: "row",
+          paddingVertical: 12,
+          paddingHorizontal: 16,
+          borderRadius: radius,
+          gap: 8,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "transparent",
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+        loading: {
+          opacity: 0.5,
+        },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
+        },
+      },
+      label: {
+        default: {
+          color: colors.foreground,
+          fontSize,
+          fontFamily,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        loading: {
+          color: colors.mutedForeground,
+        },
+      },
+      spinner: {
+        default: {
+          color: colors.foreground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+        loading: {
+          color: colors.mutedForeground,
+        },
+      },
+    }),
+  );
+};

package/src/components/button/variants/index.ts

@@ -1,7 +1,9 @@
 import { useButtonVariantDefault } from "./default";
+import { useButtonVariantGhost } from "./ghost";
 import { useButtonVariantSecondary } from "./secondary";
 
 export const ButtonVariants = {
   default: useButtonVariantDefault,
   secondary: useButtonVariantSecondary,
+  ghost: useButtonVariantGhost,
 };

package/src/components/icon-button/icon-button.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import {
+  Pressable,
+  type CursorValue,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import type { SvgProps } from "../../types/props.types";
+import type { IconButtonState } from "./types";
+import { IconButtonVariants } from "./variants";
+
+export interface IconButtonProps
+  extends Omit<PressableProps, "disabled" | "children"> {
+  render: (props: SvgProps) => React.ReactNode;
+  variant?: keyof typeof IconButtonVariants;
+  isDisabled?: boolean;
+  size?: number;
+  color?: SvgProps["color"];
+  strokeWidth?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+const calculateState = (
+  props: IconButtonProps,
+  isHovered: boolean,
+): IconButtonState => {
+  if (props.isDisabled) return "disabled";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+const cursorValue = (state: IconButtonState): CursorValue => {
+  if (state === "disabled") return "not-allowed" as CursorValue;
+  return "pointer";
+};
+
+export function IconButton(props: IconButtonProps) {
+  const {
+    render: IconComponent,
+    variant = "default",
+    isDisabled,
+    size,
+    color,
+    strokeWidth,
+    style,
+    ...rest
+  } = props;
+
+  const variantStyles = IconButtonVariants[variant]();
+  const [isHovered, setIsHovered] = useState(false);
+  const state = calculateState(props, isHovered);
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    if (isDisabled) {
+      event.preventDefault();
+      return;
+    }
+    rest.onPress?.(event);
+  };
+
+  const iconProps: SvgProps = {
+    size: size ?? variantStyles.icon?.default?.size,
+    color: color ?? variantStyles.icon?.[state]?.color ?? variantStyles.icon?.default?.color,
+    strokeWidth,
+    absoluteStrokeWidth: true,
+  };
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={handlePress}
+      onHoverIn={(e) => {
+        setIsHovered(true);
+        rest.onHoverIn?.(e);
+      }}
+      onHoverOut={(e) => {
+        setIsHovered(false);
+        rest.onHoverOut?.(e);
+      }}
+      disabled={isDisabled}
+      style={[
+        variantStyles.root?.default,
+        variantStyles.root?.[state],
+        { cursor: cursorValue(state) },
+        style,
+      ]}
+    >
+      <IconComponent {...iconProps} />
+    </Pressable>
+  );
+}

package/src/components/icon-button/index.ts

@@ -0,0 +1,2 @@
+export { IconButton, type IconButtonProps } from "./icon-button";
+export type { IconButtonStyles } from "./types";

package/src/components/icon-button/types.ts

@@ -0,0 +1,9 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { SvgProps } from "../../types/props.types";
+
+export type IconButtonState = "default" | "disabled" | "hovered";
+
+export interface IconButtonStyles {
+  root?: Partial<Record<IconButtonState, StyleProp<ViewStyle>>>;
+  icon?: Partial<Record<IconButtonState, SvgProps>>;
+}