@korsolutions/ui 0.0.56 → 0.0.58

package/dist/module/components/index.js

@@ -24,5 +24,6 @@ export * from "./select/index.js";
 export * from "./tabs/index.js";
 export * from "./textarea/index.js";
 export * from "./toast/index.js";
+export * from "./touchable/index.js";
 export * from "./typography/index.js";
 //# sourceMappingURL=index.js.map

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,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,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":[]}

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

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

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

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

package/dist/module/components/touchable/touchable.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import React, { useState } from "react";
+import { Pressable } from "react-native";
+import { PressableVariants } from "./variants/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const calculateState = (props, isPressed, isHovered) => {
+  if (props.isDisabled) return "disabled";
+  if (isPressed) return "pressed";
+  if (isHovered) return "hovered";
+  return "default";
+};
+export function Touchable(props) {
+  const {
+    variant = "default",
+    isDisabled,
+    style,
+    children,
+    ...rest
+  } = props;
+  const variantStyles = PressableVariants[variant]();
+  const [isHovered, setIsHovered] = useState(false);
+  const handlePress = event => {
+    if (isDisabled) return;
+    rest.onPress?.(event);
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    ...rest,
+    onPress: handlePress,
+    onHoverIn: e => {
+      setIsHovered(true);
+      rest.onHoverIn?.(e);
+    },
+    onHoverOut: e => {
+      setIsHovered(false);
+      rest.onHoverOut?.(e);
+    },
+    disabled: isDisabled,
+    style: styleState => {
+      const currentState = calculateState(props, styleState.pressed, isHovered);
+      return [variantStyles?.default, variantStyles?.[currentState], typeof style === "function" ? style(styleState) : style];
+    },
+    children: children
+  });
+}
+//# sourceMappingURL=touchable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Pressable","PressableVariants","jsx","_jsx","calculateState","props","isPressed","isHovered","isDisabled","Touchable","variant","style","children","rest","variantStyles","setIsHovered","handlePress","event","onPress","onHoverIn","e","onHoverOut","disabled","styleState","currentState","pressed","default"],"sourceRoot":"../../../../src","sources":["components/touchable/touchable.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA6B,cAAc;AAE7D,SAASC,iBAAiB,QAAQ,qBAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU/C,MAAMC,cAAc,GAAGA,CACrBC,KAAqB,EACrBC,SAAkB,EAClBC,SAAkB,KACC;EACnB,IAAIF,KAAK,CAACG,UAAU,EAAE,OAAO,UAAU;EACvC,IAAIF,SAAS,EAAE,OAAO,SAAS;EAC/B,IAAIC,SAAS,EAAE,OAAO,SAAS;EAC/B,OAAO,SAAS;AAClB,CAAC;AAED,OAAO,SAASE,SAASA,CAACJ,KAAqB,EAAE;EAC/C,MAAM;IAAEK,OAAO,GAAG,SAAS;IAAEF,UAAU;IAAEG,KAAK;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGR,KAAK;EAC3E,MAAMS,aAAa,GAAGb,iBAAiB,CAACS,OAAO,CAAC,CAAC,CAAC;EAClD,MAAM,CAACH,SAAS,EAAEQ,YAAY,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMiB,WAAsC,GAAIC,KAAK,IAAK;IACxD,IAAIT,UAAU,EAAE;IAChBK,IAAI,CAACK,OAAO,GAAGD,KAAK,CAAC;EACvB,CAAC;EAED,oBACEd,IAAA,CAACH,SAAS;IAAA,GACJa,IAAI;IACRK,OAAO,EAAEF,WAAY;IACrBG,SAAS,EAAGC,CAAC,IAAK;MAChBL,YAAY,CAAC,IAAI,CAAC;MAClBF,IAAI,CAACM,SAAS,GAAGC,CAAC,CAAC;IACrB,CAAE;IACFC,UAAU,EAAGD,CAAC,IAAK;MACjBL,YAAY,CAAC,KAAK,CAAC;MACnBF,IAAI,CAACQ,UAAU,GAAGD,CAAC,CAAC;IACtB,CAAE;IACFE,QAAQ,EAAEd,UAAW;IACrBG,KAAK,EAAGY,UAAU,IAAK;MACrB,MAAMC,YAAY,GAAGpB,cAAc,CACjCC,KAAK,EACLkB,UAAU,CAACE,OAAO,EAClBlB,SACF,CAAC;MAED,OAAO,CACLO,aAAa,EAAEY,OAAO,EACtBZ,aAAa,GAAGU,YAAY,CAAC,EAC7B,OAAOb,KAAK,KAAK,UAAU,GAAGA,KAAK,CAACY,UAAU,CAAC,GAAGZ,KAAK,CACxD;IACH,CAAE;IAAAC,QAAA,EAEDA;EAAQ,CACA,CAAC;AAEhB","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+
+export const usePressableVariantDefault = () => {
+  return {
+    default: {
+      cursor: "pointer",
+      pointerEvents: "box-only"
+    },
+    pressed: {
+      opacity: 0.8,
+      transform: [{
+        scale: 0.98
+      }]
+    },
+    hovered: {
+      opacity: 0.9
+    },
+    disabled: {
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    }
+  };
+};
+//# sourceMappingURL=default.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["usePressableVariantDefault","default","cursor","pointerEvents","pressed","opacity","transform","scale","hovered","disabled"],"sourceRoot":"../../../../../src","sources":["components/touchable/variants/default.tsx"],"mappings":";;AAEA,OAAO,MAAMA,0BAA0B,GAAGA,CAAA,KAAuB;EAC/D,OAAO;IACLC,OAAO,EAAE;MACPC,MAAM,EAAE,SAAS;MACjBC,aAAa,EAAE;IACjB,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,GAAG;MACZC,SAAS,EAAE,CAAC;QAAEC,KAAK,EAAE;MAAK,CAAC;IAC7B,CAAC;IACDC,OAAO,EAAE;MACPH,OAAO,EAAE;IACX,CAAC;IACDI,QAAQ,EAAE;MACRP,MAAM,EAAE,aAAoB;MAC5BC,aAAa,EAAE;IACjB;EACF,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+"use strict";
+
+import { usePressableVariantDefault } from "./default.js";
+export const PressableVariants = {
+  default: usePressableVariantDefault
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["usePressableVariantDefault","PressableVariants","default"],"sourceRoot":"../../../../../src","sources":["components/touchable/variants/index.ts"],"mappings":";;AAAA,SAASA,0BAA0B,QAAQ,cAAW;AAEtD,OAAO,MAAMC,iBAAiB,GAAG;EAC/BC,OAAO,EAAEF;AACX,CAAC","ignoreList":[]}

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

@@ -22,5 +22,6 @@ export * from "./select";
 export * from "./tabs";
 export * from "./textarea";
 export * from "./toast";
+export * from "./touchable";
 export * from "./typography";
 //# sourceMappingURL=index.d.ts.map

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,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,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"}

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

@@ -0,0 +1,2 @@
+export { Touchable, type TouchableProps } from "./touchable";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { type PressableProps } from "react-native";
+import { PressableVariants } from "./variants";
+type ExtendablePressableProps = Omit<PressableProps, "disabled">;
+export interface TouchableProps extends ExtendablePressableProps {
+    variant?: keyof typeof PressableVariants;
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+}
+export declare function Touchable(props: TouchableProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=touchable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"touchable.d.ts","sourceRoot":"","sources":["../../../../../src/components/touchable/touchable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE/C,KAAK,wBAAwB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;AAEjE,MAAM,WAAW,cAAe,SAAQ,wBAAwB;IAC9D,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAaD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAwC9C"}

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

@@ -0,0 +1,4 @@
+import type { ViewStyle } from "react-native";
+export type PressableState = "default" | "pressed" | "hovered" | "disabled";
+export type PressableStyles = Partial<Record<PressableState, ViewStyle>>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/touchable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5E,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC"}

package/dist/typescript/src/components/touchable/variants/default.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/touchable/variants/default.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,0BAA0B,QAAO,eAkB7C,CAAC"}

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

@@ -0,0 +1,4 @@
+export declare const PressableVariants: {
+    default: () => import("../types").PressableStyles;
+};
+//# sourceMappingURL=index.d.ts.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,12 +29,16 @@
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "react-native-builder-bob": "^0.40.17",
+    "react-native-reanimated": "catalog:",
+    "react-native-worklets": "catalog:",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*",
     "react-native": "*",
-    "react-native-web": "*"
+    "react-native-reanimated": "*",
+    "react-native-web": "*",
+    "react-native-worklets": "*"
   }
 }

package/src/components/index.ts

@@ -22,4 +22,5 @@ export * from "./select";
 export * from "./tabs";
 export * from "./textarea";
 export * from "./toast";
+export * from "./touchable";
 export * from "./typography";

package/src/components/touchable/index.ts

@@ -0,0 +1 @@
+export { Touchable, type TouchableProps } from "./touchable";

package/src/components/touchable/touchable.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { Pressable, type PressableProps } from "react-native";
+import type { PressableState } from "./types";
+import { PressableVariants } from "./variants";
+
+type ExtendablePressableProps = Omit<PressableProps, "disabled">;
+
+export interface TouchableProps extends ExtendablePressableProps {
+  variant?: keyof typeof PressableVariants;
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+}
+
+const calculateState = (
+  props: TouchableProps,
+  isPressed: boolean,
+  isHovered: boolean,
+): PressableState => {
+  if (props.isDisabled) return "disabled";
+  if (isPressed) return "pressed";
+  if (isHovered) return "hovered";
+  return "default";
+};
+
+export function Touchable(props: TouchableProps) {
+  const { variant = "default", isDisabled, style, children, ...rest } = props;
+  const variantStyles = PressableVariants[variant]();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handlePress: PressableProps["onPress"] = (event) => {
+    if (isDisabled) return;
+    rest.onPress?.(event);
+  };
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={handlePress}
+      onHoverIn={(e) => {
+        setIsHovered(true);
+        rest.onHoverIn?.(e);
+      }}
+      onHoverOut={(e) => {
+        setIsHovered(false);
+        rest.onHoverOut?.(e);
+      }}
+      disabled={isDisabled}
+      style={(styleState) => {
+        const currentState = calculateState(
+          props,
+          styleState.pressed,
+          isHovered,
+        );
+
+        return [
+          variantStyles?.default,
+          variantStyles?.[currentState],
+          typeof style === "function" ? style(styleState) : style,
+        ];
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}

package/src/components/touchable/types.ts

@@ -0,0 +1,5 @@
+import type { ViewStyle } from "react-native";
+
+export type PressableState = "default" | "pressed" | "hovered" | "disabled";
+
+export type PressableStyles = Partial<Record<PressableState, ViewStyle>>;

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

@@ -0,0 +1,21 @@
+import type { PressableStyles } from "../types";
+
+export const usePressableVariantDefault = (): PressableStyles => {
+  return {
+    default: {
+      cursor: "pointer",
+      pointerEvents: "box-only",
+    },
+    pressed: {
+      opacity: 0.8,
+      transform: [{ scale: 0.98 }],
+    },
+    hovered: {
+      opacity: 0.9,
+    },
+    disabled: {
+      cursor: "not-allowed" as any,
+      pointerEvents: "none",
+    },
+  };
+};

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

@@ -0,0 +1,5 @@
+import { usePressableVariantDefault } from "./default";
+
+export const PressableVariants = {
+  default: usePressableVariantDefault,
+};