@korsolutions/ui 0.0.60 → 0.0.61

package/dist/module/components/button/variants/ghost.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils.js";
+import { useThemedStyles } from "../../../utils/use-themed-styles.js";
+export const useButtonVariantGhost = () => {
+  return useThemedStyles(({
+    colors,
+    radius,
+    fontFamily,
+    fontSize
+  }) => ({
+    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
+      }
+    }
+  }));
+};
+//# sourceMappingURL=ghost.js.map

package/dist/module/components/button/variants/ghost.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useButtonVariantGhost","colors","radius","fontFamily","fontSize","root","default","flexDirection","paddingVertical","paddingHorizontal","borderRadius","gap","alignItems","justifyContent","backgroundColor","disabled","opacity","loading","hovered","secondary","label","color","foreground","mutedForeground","spinner"],"sourceRoot":"../../../../../src","sources":["components/button/variants/ghost.tsx"],"mappings":";;AACA,SAASA,wBAAwB,QAAQ,8BAA2B;AACpE,SAASC,eAAe,QAAQ,qCAAkC;AAElE,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAoB;EACvD,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC;EAAS,CAAC,MAAoB;IAC3DC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,aAAa,EAAE,KAAK;QACpBC,eAAe,EAAE,EAAE;QACnBC,iBAAiB,EAAE,EAAE;QACrBC,YAAY,EAAER,MAAM;QACpBS,GAAG,EAAE,CAAC;QACNC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,eAAe,EAAE;MACnB,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX,CAAC;MACDC,OAAO,EAAE;QACPD,OAAO,EAAE;MACX,CAAC;MACDE,OAAO,EAAE;QACPJ,eAAe,EAAEhB,wBAAwB,CAACG,MAAM,CAACkB,SAAS,EAAE,CAAC,CAAC;MAChE;IACF,CAAC;IACDC,KAAK,EAAE;MACLd,OAAO,EAAE;QACPe,KAAK,EAAEpB,MAAM,CAACqB,UAAU;QACxBlB,QAAQ;QACRD;MACF,CAAC;MACDY,QAAQ,EAAE;QACRM,KAAK,EAAEpB,MAAM,CAACsB;MAChB,CAAC;MACDN,OAAO,EAAE;QACPI,KAAK,EAAEpB,MAAM,CAACsB;MAChB;IACF,CAAC;IACDC,OAAO,EAAE;MACPlB,OAAO,EAAE;QACPe,KAAK,EAAEpB,MAAM,CAACqB;MAChB,CAAC;MACDP,QAAQ,EAAE;QACRM,KAAK,EAAEpB,MAAM,CAACsB;MAChB,CAAC;MACDN,OAAO,EAAE;QACPI,KAAK,EAAEpB,MAAM,CAACsB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/module/components/button/variants/index.js

@@ -1,9 +1,11 @@
 "use strict";
 
 import { useButtonVariantDefault } from "./default.js";
+import { useButtonVariantGhost } from "./ghost.js";
 import { useButtonVariantSecondary } from "./secondary.js";
 export const ButtonVariants = {
   default: useButtonVariantDefault,
-  secondary: useButtonVariantSecondary
+  secondary: useButtonVariantSecondary,
+  ghost: useButtonVariantGhost
 };
 //# sourceMappingURL=index.js.map

package/dist/module/components/button/variants/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useButtonVariantDefault","useButtonVariantSecondary","ButtonVariants","default","secondary"],"sourceRoot":"../../../../../src","sources":["components/button/variants/index.ts"],"mappings":";;AAAA,SAASA,uBAAuB,QAAQ,cAAW;AACnD,SAASC,yBAAyB,QAAQ,gBAAa;AAEvD,OAAO,MAAMC,cAAc,GAAG;EAC5BC,OAAO,EAAEH,uBAAuB;EAChCI,SAAS,EAAEH;AACb,CAAC","ignoreList":[]}
+{"version":3,"names":["useButtonVariantDefault","useButtonVariantGhost","useButtonVariantSecondary","ButtonVariants","default","secondary","ghost"],"sourceRoot":"../../../../../src","sources":["components/button/variants/index.ts"],"mappings":";;AAAA,SAASA,uBAAuB,QAAQ,cAAW;AACnD,SAASC,qBAAqB,QAAQ,YAAS;AAC/C,SAASC,yBAAyB,QAAQ,gBAAa;AAEvD,OAAO,MAAMC,cAAc,GAAG;EAC5BC,OAAO,EAAEJ,uBAAuB;EAChCK,SAAS,EAAEH,yBAAyB;EACpCI,KAAK,EAAEL;AACT,CAAC","ignoreList":[]}

package/dist/module/components/icon-button/icon-button.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import React, { useState } from "react";
+import { Pressable } from "react-native";
+import { IconButtonVariants } from "./variants/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const calculateState = (props, isHovered) => {
+  if (props.isDisabled) return "disabled";
+  if (isHovered) return "hovered";
+  return "default";
+};
+const cursorValue = state => {
+  if (state === "disabled") return "not-allowed";
+  return "pointer";
+};
+export function IconButton(props) {
+  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 = event => {
+    if (isDisabled) {
+      event.preventDefault();
+      return;
+    }
+    rest.onPress?.(event);
+  };
+  const iconProps = {
+    size: size ?? variantStyles.icon?.default?.size,
+    color: color ?? variantStyles.icon?.[state]?.color ?? variantStyles.icon?.default?.color,
+    strokeWidth,
+    absoluteStrokeWidth: true
+  };
+  return /*#__PURE__*/_jsx(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],
+    children: /*#__PURE__*/_jsx(IconComponent, {
+      ...iconProps
+    })
+  });
+}
+//# sourceMappingURL=icon-button.js.map

package/dist/module/components/icon-button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","IconButtonVariants","jsx","_jsx","calculateState","props","isHovered","isDisabled","cursorValue","state","IconButton","render","IconComponent","variant","size","color","strokeWidth","style","rest","variantStyles","setIsHovered","handlePress","event","preventDefault","onPress","iconProps","icon","default","absoluteStrokeWidth","onHoverIn","e","onHoverOut","disabled","root","cursor","children"],"sourceRoot":"../../../../src","sources":["components/icon-button/icon-button.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SACEC,SAAS,QAKJ,cAAc;AAGrB,SAASC,kBAAkB,QAAQ,qBAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAahD,MAAMC,cAAc,GAAGA,CACrBC,KAAsB,EACtBC,SAAkB,KACE;EACpB,IAAID,KAAK,CAACE,UAAU,EAAE,OAAO,UAAU;EACvC,IAAID,SAAS,EAAE,OAAO,SAAS;EAC/B,OAAO,SAAS;AAClB,CAAC;AAED,MAAME,WAAW,GAAIC,KAAsB,IAAkB;EAC3D,IAAIA,KAAK,KAAK,UAAU,EAAE,OAAO,aAAa;EAC9C,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASC,UAAUA,CAACL,KAAsB,EAAE;EACjD,MAAM;IACJM,MAAM,EAAEC,aAAa;IACrBC,OAAO,GAAG,SAAS;IACnBN,UAAU;IACVO,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC,KAAK;IACL,GAAGC;EACL,CAAC,GAAGb,KAAK;EAET,MAAMc,aAAa,GAAGlB,kBAAkB,CAACY,OAAO,CAAC,CAAC,CAAC;EACnD,MAAM,CAACP,SAAS,EAAEc,YAAY,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMU,KAAK,GAAGL,cAAc,CAACC,KAAK,EAAEC,SAAS,CAAC;EAE9C,MAAMe,WAAsC,GAAIC,KAAK,IAAK;IACxD,IAAIf,UAAU,EAAE;MACde,KAAK,CAACC,cAAc,CAAC,CAAC;MACtB;IACF;IACAL,IAAI,CAACM,OAAO,GAAGF,KAAK,CAAC;EACvB,CAAC;EAED,MAAMG,SAAmB,GAAG;IAC1BX,IAAI,EAAEA,IAAI,IAAIK,aAAa,CAACO,IAAI,EAAEC,OAAO,EAAEb,IAAI;IAC/CC,KAAK,EAAEA,KAAK,IAAII,aAAa,CAACO,IAAI,GAAGjB,KAAK,CAAC,EAAEM,KAAK,IAAII,aAAa,CAACO,IAAI,EAAEC,OAAO,EAAEZ,KAAK;IACxFC,WAAW;IACXY,mBAAmB,EAAE;EACvB,CAAC;EAED,oBACEzB,IAAA,CAACH,SAAS;IAAA,GACJkB,IAAI;IACRM,OAAO,EAAEH,WAAY;IACrBQ,SAAS,EAAGC,CAAC,IAAK;MAChBV,YAAY,CAAC,IAAI,CAAC;MAClBF,IAAI,CAACW,SAAS,GAAGC,CAAC,CAAC;IACrB,CAAE;IACFC,UAAU,EAAGD,CAAC,IAAK;MACjBV,YAAY,CAAC,KAAK,CAAC;MACnBF,IAAI,CAACa,UAAU,GAAGD,CAAC,CAAC;IACtB,CAAE;IACFE,QAAQ,EAAEzB,UAAW;IACrBU,KAAK,EAAE,CACLE,aAAa,CAACc,IAAI,EAAEN,OAAO,EAC3BR,aAAa,CAACc,IAAI,GAAGxB,KAAK,CAAC,EAC3B;MAAEyB,MAAM,EAAE1B,WAAW,CAACC,KAAK;IAAE,CAAC,EAC9BQ,KAAK,CACL;IAAAkB,QAAA,eAEFhC,IAAA,CAACS,aAAa;MAAA,GAAKa;IAAS,CAAG;EAAC,CACvB,CAAC;AAEhB","ignoreList":[]}

package/dist/module/components/icon-button/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { IconButton } from "./icon-button.js";
+//# sourceMappingURL=index.js.map

package/dist/module/components/icon-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IconButton"],"sourceRoot":"../../../../src","sources":["components/icon-button/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAA8B,kBAAe","ignoreList":[]}

package/dist/module/components/icon-button/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/components/icon-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/icon-button/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/components/icon-button/variants/default.js

@@ -0,0 +1,34 @@
+"use strict";
+
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils.js";
+import { useThemedStyles } from "../../../utils/use-themed-styles.js";
+export const useIconButtonVariantDefault = () => {
+  return useThemedStyles(({
+    colors,
+    radius
+  }) => ({
+    root: {
+      default: {
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 8,
+        borderRadius: radius,
+        backgroundColor: colors.primary,
+        borderWidth: 1,
+        borderColor: colors.border
+      },
+      disabled: {
+        opacity: 0.5
+      },
+      hovered: {
+        backgroundColor: hslaSetRelativeLightness(colors.primary, -10)
+      }
+    },
+    icon: {
+      default: {
+        color: colors.primaryForeground
+      }
+    }
+  }));
+};
+//# sourceMappingURL=default.js.map

package/dist/module/components/icon-button/variants/default.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useIconButtonVariantDefault","colors","radius","root","default","alignItems","justifyContent","padding","borderRadius","backgroundColor","primary","borderWidth","borderColor","border","disabled","opacity","hovered","icon","color","primaryForeground"],"sourceRoot":"../../../../../src","sources":["components/icon-button/variants/default.tsx"],"mappings":";;AAAA,SAASA,wBAAwB,QAAQ,8BAA2B;AACpE,SAASC,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,2BAA2B,GAAGA,CAAA,KAAwB;EACjE,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC;EAAO,CAAC,MAAwB;IACzCC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,OAAO,EAAE,CAAC;QACVC,YAAY,EAAEN,MAAM;QACpBO,eAAe,EAAER,MAAM,CAACS,OAAO;QAC/BC,WAAW,EAAE,CAAC;QACdC,WAAW,EAAEX,MAAM,CAACY;MACtB,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX,CAAC;MACDC,OAAO,EAAE;QACPP,eAAe,EAAEX,wBAAwB,CAACG,MAAM,CAACS,OAAO,EAAE,CAAC,EAAE;MAC/D;IACF,CAAC;IACDO,IAAI,EAAE;MACJb,OAAO,EAAE;QACPc,KAAK,EAAEjB,MAAM,CAACkB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/module/components/icon-button/variants/ghost.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils.js";
+import { useThemedStyles } from "../../../utils/use-themed-styles.js";
+export const useIconButtonVariantGhost = () => {
+  return useThemedStyles(({
+    colors,
+    radius
+  }) => ({
+    root: {
+      default: {
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 8,
+        borderRadius: radius,
+        backgroundColor: "transparent"
+      },
+      disabled: {
+        opacity: 0.5
+      },
+      hovered: {
+        backgroundColor: hslaSetRelativeLightness(colors.secondary, -1)
+      }
+    },
+    icon: {
+      default: {
+        color: colors.foreground
+      },
+      disabled: {
+        color: colors.mutedForeground
+      }
+    }
+  }));
+};
+//# sourceMappingURL=ghost.js.map

package/dist/module/components/icon-button/variants/ghost.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useIconButtonVariantGhost","colors","radius","root","default","alignItems","justifyContent","padding","borderRadius","backgroundColor","disabled","opacity","hovered","secondary","icon","color","foreground","mutedForeground"],"sourceRoot":"../../../../../src","sources":["components/icon-button/variants/ghost.tsx"],"mappings":";;AAAA,SAASA,wBAAwB,QAAQ,8BAA2B;AACpE,SAASC,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,yBAAyB,GAAGA,CAAA,KAAwB;EAC/D,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC;EAAO,CAAC,MAAwB;IACzCC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,OAAO,EAAE,CAAC;QACVC,YAAY,EAAEN,MAAM;QACpBO,eAAe,EAAE;MACnB,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX,CAAC;MACDC,OAAO,EAAE;QACPH,eAAe,EAAEX,wBAAwB,CAACG,MAAM,CAACY,SAAS,EAAE,CAAC,CAAC;MAChE;IACF,CAAC;IACDC,IAAI,EAAE;MACJV,OAAO,EAAE;QACPW,KAAK,EAAEd,MAAM,CAACe;MAChB,CAAC;MACDN,QAAQ,EAAE;QACRK,KAAK,EAAEd,MAAM,CAACgB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/module/components/icon-button/variants/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+import { useIconButtonVariantDefault } from "./default.js";
+import { useIconButtonVariantGhost } from "./ghost.js";
+import { useIconButtonVariantSecondary } from "./secondary.js";
+export const IconButtonVariants = {
+  default: useIconButtonVariantDefault,
+  secondary: useIconButtonVariantSecondary,
+  ghost: useIconButtonVariantGhost
+};
+//# sourceMappingURL=index.js.map

package/dist/module/components/icon-button/variants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIconButtonVariantDefault","useIconButtonVariantGhost","useIconButtonVariantSecondary","IconButtonVariants","default","secondary","ghost"],"sourceRoot":"../../../../../src","sources":["components/icon-button/variants/index.ts"],"mappings":";;AAAA,SAASA,2BAA2B,QAAQ,cAAW;AACvD,SAASC,yBAAyB,QAAQ,YAAS;AACnD,SAASC,6BAA6B,QAAQ,gBAAa;AAE3D,OAAO,MAAMC,kBAAkB,GAAG;EAChCC,OAAO,EAAEJ,2BAA2B;EACpCK,SAAS,EAAEH,6BAA6B;EACxCI,KAAK,EAAEL;AACT,CAAC","ignoreList":[]}

package/dist/module/components/icon-button/variants/secondary.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils.js";
+import { useThemedStyles } from "../../../utils/use-themed-styles.js";
+export const useIconButtonVariantSecondary = () => {
+  return useThemedStyles(({
+    colors,
+    radius
+  }) => ({
+    root: {
+      default: {
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 8,
+        borderRadius: radius,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.secondary
+      },
+      disabled: {
+        opacity: 0.5
+      },
+      hovered: {
+        backgroundColor: hslaSetRelativeLightness(colors.secondary, -1)
+      }
+    },
+    icon: {
+      default: {
+        color: colors.secondaryForeground
+      },
+      disabled: {
+        color: colors.mutedForeground
+      }
+    }
+  }));
+};
+//# sourceMappingURL=secondary.js.map

package/dist/module/components/icon-button/variants/secondary.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hslaSetRelativeLightness","useThemedStyles","useIconButtonVariantSecondary","colors","radius","root","default","alignItems","justifyContent","padding","borderRadius","borderWidth","borderColor","border","backgroundColor","secondary","disabled","opacity","hovered","icon","color","secondaryForeground","mutedForeground"],"sourceRoot":"../../../../../src","sources":["components/icon-button/variants/secondary.tsx"],"mappings":";;AAAA,SAASA,wBAAwB,QAAQ,8BAA2B;AACpE,SAASC,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,6BAA6B,GAAGA,CAAA,KAAwB;EACnE,OAAOD,eAAe,CACpB,CAAC;IAAEE,MAAM;IAAEC;EAAO,CAAC,MAAwB;IACzCC,IAAI,EAAE;MACJC,OAAO,EAAE;QACPC,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,OAAO,EAAE,CAAC;QACVC,YAAY,EAAEN,MAAM;QACpBO,WAAW,EAAE,CAAC;QACdC,WAAW,EAAET,MAAM,CAACU,MAAM;QAC1BC,eAAe,EAAEX,MAAM,CAACY;MAC1B,CAAC;MACDC,QAAQ,EAAE;QACRC,OAAO,EAAE;MACX,CAAC;MACDC,OAAO,EAAE;QACPJ,eAAe,EAAEd,wBAAwB,CAACG,MAAM,CAACY,SAAS,EAAE,CAAC,CAAC;MAChE;IACF,CAAC;IACDI,IAAI,EAAE;MACJb,OAAO,EAAE;QACPc,KAAK,EAAEjB,MAAM,CAACkB;MAChB,CAAC;MACDL,QAAQ,EAAE;QACRI,KAAK,EAAEjB,MAAM,CAACmB;MAChB;IACF;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/module/components/index.js

@@ -11,6 +11,7 @@ export * from "./checkbox/index.js";
 export * from "./empty/index.js";
 export * from "./field/index.js";
 export * from "./icon/index.js";
+export * from "./icon-button/index.js";
 export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./list/index.js";
@@ -21,6 +22,7 @@ export * from "./portal/index.js";
 export * from "./progress/index.js";
 export * from "./scroll-bar/index.js";
 export * from "./select/index.js";
+export * from "./separator/index.js";
 export * from "./tabs/index.js";
 export * from "./textarea/index.js";
 export * from "./toast/index.js";

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

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,kBAAS;AACvB,cAAc,yBAAgB;AAC9B,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,kBAAS;AACvB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,uBAAc","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,kBAAS;AACvB,cAAc,yBAAgB;AAC9B,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,kBAAS;AACvB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,uBAAc","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Separator } from "./separator.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Separator"],"sourceRoot":"../../../../src","sources":["components/separator/index.ts"],"mappings":";;AAAA,SAASA,SAAS,QAA6B,gBAAa","ignoreList":[]}

package/dist/module/components/separator/separator.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import React from "react";
+import { View } from "react-native";
+import { SeparatorVariants } from "./variants/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Separator(props) {
+  const {
+    variant = "horizontal",
+    style
+  } = props;
+  const variantStyles = SeparatorVariants[variant]();
+  return /*#__PURE__*/_jsx(View, {
+    style: [variantStyles.root, style]
+  });
+}
+//# sourceMappingURL=separator.js.map

package/dist/module/components/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","SeparatorVariants","jsx","_jsx","Separator","props","variant","style","variantStyles","root"],"sourceRoot":"../../../../src","sources":["components/separator/separator.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAwC,cAAc;AACnE,SAASC,iBAAiB,QAAQ,qBAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO/C,OAAO,SAASC,SAASA,CAACC,KAAqB,EAAE;EAC/C,MAAM;IAAEC,OAAO,GAAG,YAAY;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAC/C,MAAMG,aAAa,GAAGP,iBAAiB,CAACK,OAAO,CAAC,CAAC,CAAC;EAElD,oBAAOH,IAAA,CAACH,IAAI;IAACO,KAAK,EAAE,CAACC,aAAa,CAACC,IAAI,EAAEF,KAAK;EAAE,CAAE,CAAC;AACrD","ignoreList":[]}

package/dist/module/components/separator/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/components/separator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/separator/types.ts"],"mappings":"","ignoreList":[]}

package/dist/module/components/separator/variants/horizontal.js

@@ -0,0 +1,15 @@
+"use strict";
+
+import { useThemedStyles } from "../../../utils/use-themed-styles.js";
+export const useSeparatorVariantHorizontal = () => {
+  return useThemedStyles(({
+    colors
+  }) => ({
+    root: {
+      height: 1,
+      alignSelf: "stretch",
+      backgroundColor: colors.border
+    }
+  }));
+};
+//# sourceMappingURL=horizontal.js.map

package/dist/module/components/separator/variants/horizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useThemedStyles","useSeparatorVariantHorizontal","colors","root","height","alignSelf","backgroundColor","border"],"sourceRoot":"../../../../../src","sources":["components/separator/variants/horizontal.tsx"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,6BAA6B,GAAGA,CAAA,KAAuB;EAClE,OAAOD,eAAe,CACpB,CAAC;IAAEE;EAAO,CAAC,MAAuB;IAChCC,IAAI,EAAE;MACJC,MAAM,EAAE,CAAC;MACTC,SAAS,EAAE,SAAS;MACpBC,eAAe,EAAEJ,MAAM,CAACK;IAC1B;EACF,CAAC,CACH,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/module/components/separator/variants/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+import { useSeparatorVariantHorizontal } from "./horizontal.js";
+import { useSeparatorVariantVertical } from "./vertical.js";
+export const SeparatorVariants = {
+  horizontal: useSeparatorVariantHorizontal,
+  vertical: useSeparatorVariantVertical
+};
+//# sourceMappingURL=index.js.map

package/dist/module/components/separator/variants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSeparatorVariantHorizontal","useSeparatorVariantVertical","SeparatorVariants","horizontal","vertical"],"sourceRoot":"../../../../../src","sources":["components/separator/variants/index.ts"],"mappings":";;AAAA,SAASA,6BAA6B,QAAQ,iBAAc;AAC5D,SAASC,2BAA2B,QAAQ,eAAY;AAExD,OAAO,MAAMC,iBAAiB,GAAG;EAC/BC,UAAU,EAAEH,6BAA6B;EACzCI,QAAQ,EAAEH;AACZ,CAAC","ignoreList":[]}

package/dist/module/components/separator/variants/vertical.js

@@ -0,0 +1,15 @@
+"use strict";
+
+import { useThemedStyles } from "../../../utils/use-themed-styles.js";
+export const useSeparatorVariantVertical = () => {
+  return useThemedStyles(({
+    colors
+  }) => ({
+    root: {
+      width: 1,
+      alignSelf: "stretch",
+      backgroundColor: colors.border
+    }
+  }));
+};
+//# sourceMappingURL=vertical.js.map

package/dist/module/components/separator/variants/vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useThemedStyles","useSeparatorVariantVertical","colors","root","width","alignSelf","backgroundColor","border"],"sourceRoot":"../../../../../src","sources":["components/separator/variants/vertical.tsx"],"mappings":";;AAAA,SAASA,eAAe,QAAQ,qCAAkC;AAGlE,OAAO,MAAMC,2BAA2B,GAAGA,CAAA,KAAuB;EAChE,OAAOD,eAAe,CACpB,CAAC;IAAEE;EAAO,CAAC,MAAuB;IAChCC,IAAI,EAAE;MACJC,KAAK,EAAE,CAAC;MACRC,SAAS,EAAE,SAAS;MACpBC,eAAe,EAAEJ,MAAM,CAACK;IAC1B;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "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>>;
+}

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

@@ -0,0 +1,32 @@
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { IconButtonStyles } from "../types";
+
+export const useIconButtonVariantDefault = (): IconButtonStyles => {
+  return useThemedStyles(
+    ({ colors, radius }): IconButtonStyles => ({
+      root: {
+        default: {
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 8,
+          borderRadius: radius,
+          backgroundColor: colors.primary,
+          borderWidth: 1,
+          borderColor: colors.border,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.primary, -10),
+        },
+      },
+      icon: {
+        default: {
+          color: colors.primaryForeground,
+        },
+      },
+    }),
+  );
+};

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

@@ -0,0 +1,33 @@
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { IconButtonStyles } from "../types";
+
+export const useIconButtonVariantGhost = (): IconButtonStyles => {
+  return useThemedStyles(
+    ({ colors, radius }): IconButtonStyles => ({
+      root: {
+        default: {
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 8,
+          borderRadius: radius,
+          backgroundColor: "transparent",
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
+        },
+      },
+      icon: {
+        default: {
+          color: colors.foreground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+    }),
+  );
+};

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

@@ -0,0 +1,9 @@
+import { useIconButtonVariantDefault } from "./default";
+import { useIconButtonVariantGhost } from "./ghost";
+import { useIconButtonVariantSecondary } from "./secondary";
+
+export const IconButtonVariants = {
+  default: useIconButtonVariantDefault,
+  secondary: useIconButtonVariantSecondary,
+  ghost: useIconButtonVariantGhost,
+};

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

@@ -0,0 +1,35 @@
+import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { IconButtonStyles } from "../types";
+
+export const useIconButtonVariantSecondary = (): IconButtonStyles => {
+  return useThemedStyles(
+    ({ colors, radius }): IconButtonStyles => ({
+      root: {
+        default: {
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 8,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.secondary,
+        },
+        disabled: {
+          opacity: 0.5,
+        },
+        hovered: {
+          backgroundColor: hslaSetRelativeLightness(colors.secondary, -1),
+        },
+      },
+      icon: {
+        default: {
+          color: colors.secondaryForeground,
+        },
+        disabled: {
+          color: colors.mutedForeground,
+        },
+      },
+    }),
+  );
+};

package/src/components/index.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/src/components/separator/index.ts

@@ -0,0 +1,2 @@
+export { Separator, type SeparatorProps } from "./separator";
+export type { SeparatorStyles } from "./types";

package/src/components/separator/separator.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { SeparatorVariants } from "./variants";
+
+export interface SeparatorProps {
+  variant?: keyof typeof SeparatorVariants;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Separator(props: SeparatorProps) {
+  const { variant = "horizontal", style } = props;
+  const variantStyles = SeparatorVariants[variant]();
+
+  return <View style={[variantStyles.root, style]} />;
+}

package/src/components/separator/types.ts

@@ -0,0 +1,5 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+export interface SeparatorStyles {
+  root?: StyleProp<ViewStyle>;
+}

package/src/components/separator/variants/horizontal.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { SeparatorStyles } from "../types";
+
+export const useSeparatorVariantHorizontal = (): SeparatorStyles => {
+  return useThemedStyles(
+    ({ colors }): SeparatorStyles => ({
+      root: {
+        height: 1,
+        alignSelf: "stretch",
+        backgroundColor: colors.border,
+      },
+    }),
+  );
+};

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

@@ -0,0 +1,7 @@
+import { useSeparatorVariantHorizontal } from "./horizontal";
+import { useSeparatorVariantVertical } from "./vertical";
+
+export const SeparatorVariants = {
+  horizontal: useSeparatorVariantHorizontal,
+  vertical: useSeparatorVariantVertical,
+};

package/src/components/separator/variants/vertical.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import type { SeparatorStyles } from "../types";
+
+export const useSeparatorVariantVertical = (): SeparatorStyles => {
+  return useThemedStyles(
+    ({ colors }): SeparatorStyles => ({
+      root: {
+        width: 1,
+        alignSelf: "stretch",
+        backgroundColor: colors.border,
+      },
+    }),
+  );
+};