@lmb-it/kitsconcerto-native 0.1.236

package/hooks/useKeyboardNavigation.js

@@ -0,0 +1,55 @@
+import { createContext, useContext, useRef, useCallback } from 'react';
+
+const KeyboardNavContext = createContext(null);
+const useKeyboardNav = () => useContext(KeyboardNavContext);
+function useKeyboardNavProvider() {
+  const refsMap = useRef(/* @__PURE__ */ new Map());
+  const elementsOrder = useRef([]);
+  const register = useCallback((id, ref) => {
+    refsMap.current.set(id, ref);
+  }, []);
+  const unregister = useCallback((id) => {
+    refsMap.current.delete(id);
+  }, []);
+  const setElementsOrder = useCallback((ids) => {
+    elementsOrder.current = ids;
+  }, []);
+  const getNavProps = useCallback((id) => {
+    const visibleOrder = elementsOrder.current.filter(
+      (eid) => refsMap.current.has(eid)
+    );
+    const idx = visibleOrder.indexOf(id);
+    const isLast = idx !== -1 && idx === visibleOrder.length - 1;
+    return {
+      returnKeyType: isLast ? "done" : "next",
+      blurOnSubmit: isLast,
+      // Read from refs at call time via focusNext — avoids stale closure
+      onSubmitEditing: () => {
+        focusNext(id);
+      }
+    };
+  }, [focusNext]);
+  const focusNext = useCallback((currentId) => {
+    const visibleOrder = elementsOrder.current.filter(
+      (eid) => refsMap.current.has(eid)
+    );
+    const idx = visibleOrder.indexOf(currentId);
+    if (idx === -1 || idx === visibleOrder.length - 1) return;
+    const nextId = visibleOrder[idx + 1];
+    if (nextId) {
+      const nextRef = refsMap.current.get(nextId);
+      nextRef?.current?.focus();
+    }
+  }, []);
+  const contextValue = {
+    register,
+    unregister,
+    setElementsOrder,
+    getNavProps,
+    focusNext
+  };
+  return contextValue;
+}
+
+export { KeyboardNavContext, useKeyboardNav, useKeyboardNavProvider };
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/hooks/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../src/hooks/useKeyboardNavigation.native.ts"],"sourcesContent":["import {createContext, useCallback, useContext, useRef} from 'react';\nimport type {TextInput} from 'react-native';\n\nexport interface KeyboardNavContextValue {\n    register: (id: string, ref: React.RefObject<TextInput | null>) => void;\n    unregister: (id: string) => void;\n    setElementsOrder: (ids: string[]) => void;\n    getNavProps: (id: string) => {\n        returnKeyType: 'next' | 'done';\n        blurOnSubmit: boolean;\n        onSubmitEditing: () => void;\n    };\n    focusNext: (currentId: string) => void;\n}\n\nexport const KeyboardNavContext = createContext<KeyboardNavContextValue | null>(null);\n\nexport const useKeyboardNav = () => useContext(KeyboardNavContext);\n\n/**\n * Creates the keyboard navigation provider value.\n * Maintains a ref registry and element order to wire up\n * returnKeyType / blurOnSubmit / onSubmitEditing on native TextInputs.\n */\nexport function useKeyboardNavProvider() {\n    const refsMap = useRef<Map<string, React.RefObject<TextInput | null>>>(new Map());\n    const elementsOrder = useRef<string[]>([]);\n\n    const register = useCallback((id: string, ref: React.RefObject<TextInput | null>) => {\n        refsMap.current.set(id, ref);\n    }, []);\n\n    const unregister = useCallback((id: string) => {\n        refsMap.current.delete(id);\n    }, []);\n\n    const setElementsOrder = useCallback((ids: string[]) => {\n        elementsOrder.current = ids;\n    }, []);\n\n    const getNavProps = useCallback((id: string) => {\n        // Filter to only registered (visible) fields\n        const visibleOrder = elementsOrder.current.filter(\n            (eid) => refsMap.current.has(eid)\n        );\n\n        const idx = visibleOrder.indexOf(id);\n        // Default to 'next' when field not yet registered (idx === -1 on first render)\n        const isLast = idx !== -1 && idx === visibleOrder.length - 1;\n\n        return {\n            returnKeyType: isLast ? 'done' as const : 'next' as const,\n            blurOnSubmit: isLast,\n            // Read from refs at call time via focusNext — avoids stale closure\n            onSubmitEditing: () => {\n                focusNext(id);\n            },\n        };\n    }, [focusNext]);\n\n    const focusNext = useCallback((currentId: string) => {\n        const visibleOrder = elementsOrder.current.filter(\n            (eid) => refsMap.current.has(eid)\n        );\n        const idx = visibleOrder.indexOf(currentId);\n        if (idx === -1 || idx === visibleOrder.length - 1) return;\n        const nextId = visibleOrder[idx + 1];\n        if (nextId) {\n            const nextRef = refsMap.current.get(nextId);\n            nextRef?.current?.focus();\n        }\n    }, []);\n\n    const contextValue: KeyboardNavContextValue = {\n        register,\n        unregister,\n        setElementsOrder,\n        getNavProps,\n        focusNext,\n    };\n\n    return contextValue;\n}\n"],"names":[],"mappings":";;AAeO,MAAM,kBAAA,GAAqB,cAA8C,IAAI;AAE7E,MAAM,cAAA,GAAiB,MAAM,UAAA,CAAW,kBAAkB;AAO1D,SAAS,sBAAA,GAAyB;AACrC,EAAA,MAAM,OAAA,GAAU,MAAA,iBAAuD,IAAI,GAAA,EAAK,CAAA;AAChF,EAAA,MAAM,aAAA,GAAgB,MAAA,CAAiB,EAAE,CAAA;AAEzC,EAAA,MAAM,QAAA,GAAW,WAAA,CAAY,CAAC,EAAA,EAAY,GAAA,KAA2C;AACjF,IAAA,OAAA,CAAQ,OAAA,CAAQ,GAAA,CAAI,EAAA,EAAI,GAAG,CAAA;AAAA,EAC/B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAA,GAAa,WAAA,CAAY,CAAC,EAAA,KAAe;AAC3C,IAAA,OAAA,CAAQ,OAAA,CAAQ,OAAO,EAAE,CAAA;AAAA,EAC7B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,gBAAA,GAAmB,WAAA,CAAY,CAAC,GAAA,KAAkB;AACpD,IAAA,aAAA,CAAc,OAAA,GAAU,GAAA;AAAA,EAC5B,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,EAAA,KAAe;AAE5C,IAAA,MAAM,YAAA,GAAe,cAAc,OAAA,CAAQ,MAAA;AAAA,MACvC,CAAC,GAAA,KAAQ,OAAA,CAAQ,OAAA,CAAQ,IAAI,GAAG;AAAA,KACpC;AAEA,IAAA,MAAM,GAAA,GAAM,YAAA,CAAa,OAAA,CAAQ,EAAE,CAAA;AAEnC,IAAA,MAAM,MAAA,GAAS,GAAA,KAAQ,EAAA,IAAM,GAAA,KAAQ,aAAa,MAAA,GAAS,CAAA;AAE3D,IAAA,OAAO;AAAA,MACH,aAAA,EAAe,SAAS,MAAA,GAAkB,MAAA;AAAA,MAC1C,YAAA,EAAc,MAAA;AAAA;AAAA,MAEd,iBAAiB,MAAM;AACnB,QAAA,SAAA,CAAU,EAAE,CAAA;AAAA,MAChB;AAAA,KACJ;AAAA,EACJ,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,MAAM,SAAA,GAAY,WAAA,CAAY,CAAC,SAAA,KAAsB;AACjD,IAAA,MAAM,YAAA,GAAe,cAAc,OAAA,CAAQ,MAAA;AAAA,MACvC,CAAC,GAAA,KAAQ,OAAA,CAAQ,OAAA,CAAQ,IAAI,GAAG;AAAA,KACpC;AACA,IAAA,MAAM,GAAA,GAAM,YAAA,CAAa,OAAA,CAAQ,SAAS,CAAA;AAC1C,IAAA,IAAI,GAAA,KAAQ,EAAA,IAAM,GAAA,KAAQ,YAAA,CAAa,SAAS,CAAA,EAAG;AACnD,IAAA,MAAM,MAAA,GAAS,YAAA,CAAa,GAAA,GAAM,CAAC,CAAA;AACnC,IAAA,IAAI,MAAA,EAAQ;AACR,MAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,OAAA,CAAQ,GAAA,CAAI,MAAM,CAAA;AAC1C,MAAA,OAAA,EAAS,SAAS,KAAA,EAAM;AAAA,IAC5B;AAAA,EACJ,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAA,GAAwC;AAAA,IAC1C,QAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACJ;AAEA,EAAA,OAAO,YAAA;AACX;;;;"}

package/hooks/useResolvedElementStyles.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useResolvedStyle = require('./useResolvedStyle.cjs');
+var KitsThemeProvider_native = require('../contexts/Theme/KitsThemeProvider.cjs');
+
+function useResolvedElementStyles(elementStyles) {
+  const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
+  return React.useMemo(() => {
+    if (!elementStyles || Object.keys(elementStyles).length === 0) return {};
+    const result = {};
+    for (const [slot, styleObj] of Object.entries(elementStyles)) {
+      if (styleObj && Object.keys(styleObj).length > 0) {
+        result[slot] = useResolvedStyle.resolveStyleRecord(styleObj, resolveToken);
+      }
+    }
+    return result;
+  }, [elementStyles, resolveToken]);
+}
+
+exports.default = useResolvedElementStyles;
+//# sourceMappingURL=useResolvedElementStyles.cjs.map

package/hooks/useResolvedElementStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedElementStyles.cjs","sources":["../../../src/hooks/useResolvedElementStyles.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport {useKitsTheme} from '../contexts/Theme';\nimport {resolveStyleRecord} from './useResolvedStyle';\n\n/**\n * Resolves all element slot styles at once, converting IStyleClasses\n * aliases and theme tokens to platform-appropriate style objects per slot.\n *\n * Platform-agnostic — output is compatible with both web CSSProperties\n * and native ViewStyle since resolveStyleRecord is platform-agnostic.\n *\n * @example\n * const { elementStyles } = useComponentDefaults('InputText', rawProps, 'Input');\n * const resolved = useResolvedElementStyles(elementStyles);\n * // resolved.container → resolved styles for the container\n * // resolved.label     → resolved styles for the label\n * // resolved.root      → resolved styles for the input element\n */\nexport default function useResolvedElementStyles(\n    elementStyles: Record<string, Record<string, any>>,\n): Record<string, Record<string, any>> {\n    const {resolveToken} = useKitsTheme();\n\n    return useMemo(() => {\n        if (!elementStyles || Object.keys(elementStyles).length === 0) return {};\n\n        const result: Record<string, Record<string, any>> = {};\n        for (const [slot, styleObj] of Object.entries(elementStyles)) {\n            if (styleObj && Object.keys(styleObj).length > 0) {\n                result[slot] = resolveStyleRecord(styleObj, resolveToken);\n            }\n        }\n        return result;\n    }, [elementStyles, resolveToken]);\n}\n"],"names":["useKitsTheme","useMemo","resolveStyleRecord"],"mappings":";;;;;;;;AAkBA,SAAwB,yBACpB,aAAA,EACmC;AACnC,EAAA,MAAM,EAAC,YAAA,EAAY,GAAIA,qCAAA,EAAa;AAEpC,EAAA,OAAOC,cAAQ,MAAM;AACjB,IAAA,IAAI,CAAC,iBAAiB,MAAA,CAAO,IAAA,CAAK,aAAa,CAAA,CAAE,MAAA,KAAW,CAAA,EAAG,OAAO,EAAC;AAEvE,IAAA,MAAM,SAA8C,EAAC;AACrD,IAAA,KAAA,MAAW,CAAC,IAAA,EAAM,QAAQ,KAAK,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAA,EAAG;AAC1D,MAAA,IAAI,YAAY,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAA,CAAE,SAAS,CAAA,EAAG;AAC9C,QAAA,MAAA,CAAO,IAAI,CAAA,GAAIC,mCAAA,CAAmB,QAAA,EAAU,YAAY,CAAA;AAAA,MAC5D;AAAA,IACJ;AACA,IAAA,OAAO,MAAA;AAAA,EACX,CAAA,EAAG,CAAC,aAAA,EAAe,YAAY,CAAC,CAAA;AACpC;;;;"}

package/hooks/useResolvedElementStyles.js

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { resolveStyleRecord } from './useResolvedStyle.js';
+import { useKitsTheme } from '../contexts/Theme/KitsThemeProvider.js';
+
+function useResolvedElementStyles(elementStyles) {
+  const { resolveToken } = useKitsTheme();
+  return useMemo(() => {
+    if (!elementStyles || Object.keys(elementStyles).length === 0) return {};
+    const result = {};
+    for (const [slot, styleObj] of Object.entries(elementStyles)) {
+      if (styleObj && Object.keys(styleObj).length > 0) {
+        result[slot] = resolveStyleRecord(styleObj, resolveToken);
+      }
+    }
+    return result;
+  }, [elementStyles, resolveToken]);
+}
+
+export { useResolvedElementStyles as default };
+//# sourceMappingURL=useResolvedElementStyles.js.map

package/hooks/useResolvedElementStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedElementStyles.js","sources":["../../../src/hooks/useResolvedElementStyles.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport {useKitsTheme} from '../contexts/Theme';\nimport {resolveStyleRecord} from './useResolvedStyle';\n\n/**\n * Resolves all element slot styles at once, converting IStyleClasses\n * aliases and theme tokens to platform-appropriate style objects per slot.\n *\n * Platform-agnostic — output is compatible with both web CSSProperties\n * and native ViewStyle since resolveStyleRecord is platform-agnostic.\n *\n * @example\n * const { elementStyles } = useComponentDefaults('InputText', rawProps, 'Input');\n * const resolved = useResolvedElementStyles(elementStyles);\n * // resolved.container → resolved styles for the container\n * // resolved.label     → resolved styles for the label\n * // resolved.root      → resolved styles for the input element\n */\nexport default function useResolvedElementStyles(\n    elementStyles: Record<string, Record<string, any>>,\n): Record<string, Record<string, any>> {\n    const {resolveToken} = useKitsTheme();\n\n    return useMemo(() => {\n        if (!elementStyles || Object.keys(elementStyles).length === 0) return {};\n\n        const result: Record<string, Record<string, any>> = {};\n        for (const [slot, styleObj] of Object.entries(elementStyles)) {\n            if (styleObj && Object.keys(styleObj).length > 0) {\n                result[slot] = resolveStyleRecord(styleObj, resolveToken);\n            }\n        }\n        return result;\n    }, [elementStyles, resolveToken]);\n}\n"],"names":[],"mappings":";;;;AAkBA,SAAwB,yBACpB,aAAA,EACmC;AACnC,EAAA,MAAM,EAAC,YAAA,EAAY,GAAI,YAAA,EAAa;AAEpC,EAAA,OAAO,QAAQ,MAAM;AACjB,IAAA,IAAI,CAAC,iBAAiB,MAAA,CAAO,IAAA,CAAK,aAAa,CAAA,CAAE,MAAA,KAAW,CAAA,EAAG,OAAO,EAAC;AAEvE,IAAA,MAAM,SAA8C,EAAC;AACrD,IAAA,KAAA,MAAW,CAAC,IAAA,EAAM,QAAQ,KAAK,MAAA,CAAO,OAAA,CAAQ,aAAa,CAAA,EAAG;AAC1D,MAAA,IAAI,YAAY,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAA,CAAE,SAAS,CAAA,EAAG;AAC9C,QAAA,MAAA,CAAO,IAAI,CAAA,GAAI,kBAAA,CAAmB,QAAA,EAAU,YAAY,CAAA;AAAA,MAC5D;AAAA,IACJ;AACA,IAAA,OAAO,MAAA;AAAA,EACX,CAAA,EAAG,CAAC,aAAA,EAAe,YAAY,CAAC,CAAA;AACpC;;;;"}

package/hooks/useResolvedStyle.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var shadowPresets_native = require('./shadowPresets.cjs');
+var KitsThemeProvider_native = require('../contexts/Theme/KitsThemeProvider.cjs');
+
+const CSS_PROP_MAP = {
+  bg: "backgroundColor",
+  bgColor: "backgroundColor",
+  w: "width",
+  h: "height",
+  minW: "minWidth",
+  maxW: "maxWidth",
+  minH: "minHeight",
+  maxH: "maxHeight",
+  p: "padding",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  m: "margin",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  fontColor: "color",
+  borderW: "borderWidth",
+  flexOrder: "order"
+  // NOTE: `shadow` is intentionally NOT mapped here — it is handled as a
+  // cross-platform special case in `resolveStyleRecord` (see `expandShadow`),
+  // expanding to `boxShadow` on web and `shadow*`/`elevation` on native.
+};
+const EXPAND_MAP = {
+  px: ["paddingLeft", "paddingRight"],
+  py: ["paddingTop", "paddingBottom"],
+  mx: ["marginLeft", "marginRight"],
+  my: ["marginTop", "marginBottom"],
+  paddingHorizontal: ["paddingLeft", "paddingRight"],
+  paddingVertical: ["paddingTop", "paddingBottom"],
+  borderX: ["borderLeft", "borderRight"],
+  borderY: ["borderTop", "borderBottom"]
+};
+const TEXT_STYLE_KEYS = /* @__PURE__ */ new Set([
+  "color",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "fontStyle",
+  "lineHeight",
+  "letterSpacing",
+  "textAlign",
+  "textTransform",
+  "textDecoration",
+  "textDecorationLine",
+  "textDecorationColor",
+  "textDecorationStyle",
+  "whiteSpace",
+  "wordBreak",
+  "wordWrap"
+]);
+function splitTextStyle(resolved) {
+  const wrapper = {};
+  const text = {};
+  for (const key of Object.keys(resolved)) {
+    if (TEXT_STYLE_KEYS.has(key)) text[key] = resolved[key];
+    else wrapper[key] = resolved[key];
+  }
+  return { wrapper, text };
+}
+function resolveStyleRecord(themeStyle, resolveToken) {
+  if (!themeStyle || Object.keys(themeStyle).length === 0) return {};
+  const resolved = {};
+  for (const [key, value] of Object.entries(themeStyle)) {
+    if (key === "shadow") {
+      Object.assign(resolved, shadowPresets_native.expandShadow(typeof value === "string" ? value : ""));
+      continue;
+    }
+    const resolvedValue = typeof value === "string" ? resolveToken(value) : value;
+    if (key in EXPAND_MAP) {
+      for (const cssKey of EXPAND_MAP[key]) {
+        resolved[cssKey] = resolvedValue;
+      }
+      continue;
+    }
+    resolved[CSS_PROP_MAP[key] ?? key] = resolvedValue;
+  }
+  return resolved;
+}
+function useResolvedStyle(themeStyle) {
+  const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
+  return React.useMemo(() => resolveStyleRecord(themeStyle, resolveToken), [themeStyle, resolveToken]);
+}
+
+exports.TEXT_STYLE_KEYS = TEXT_STYLE_KEYS;
+exports.default = useResolvedStyle;
+exports.resolveStyleRecord = resolveStyleRecord;
+exports.splitTextStyle = splitTextStyle;
+//# sourceMappingURL=useResolvedStyle.cjs.map

package/hooks/useResolvedStyle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedStyle.cjs","sources":["../../../src/hooks/useResolvedStyle.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport {useKitsTheme} from '../contexts/Theme';\nimport {expandShadow} from './shadowPresets';\n\n/** Single alias → single camelCase CSS key (platform-agnostic) */\nconst CSS_PROP_MAP: Record<string, string> = {\n    bg: 'backgroundColor',\n    bgColor: 'backgroundColor',\n    w: 'width',\n    h: 'height',\n    minW: 'minWidth',\n    maxW: 'maxWidth',\n    minH: 'minHeight',\n    maxH: 'maxHeight',\n    p: 'padding',\n    pt: 'paddingTop',\n    pr: 'paddingRight',\n    pb: 'paddingBottom',\n    pl: 'paddingLeft',\n    m: 'margin',\n    mt: 'marginTop',\n    mr: 'marginRight',\n    mb: 'marginBottom',\n    ml: 'marginLeft',\n    fontColor: 'color',\n    borderW: 'borderWidth',\n    flexOrder: 'order',\n    // NOTE: `shadow` is intentionally NOT mapped here — it is handled as a\n    // cross-platform special case in `resolveStyleRecord` (see `expandShadow`),\n    // expanding to `boxShadow` on web and `shadow*`/`elevation` on native.\n};\n\n/**\n * Shorthands that expand to multiple CSS properties.\n * React Native equivalents (paddingHorizontal / paddingVertical) are handled here too.\n */\nconst EXPAND_MAP: Record<string, string[]> = {\n    px: ['paddingLeft', 'paddingRight'],\n    py: ['paddingTop', 'paddingBottom'],\n    mx: ['marginLeft', 'marginRight'],\n    my: ['marginTop', 'marginBottom'],\n    paddingHorizontal: ['paddingLeft', 'paddingRight'],\n    paddingVertical: ['paddingTop', 'paddingBottom'],\n    borderX: ['borderLeft', 'borderRight'],\n    borderY: ['borderTop', 'borderBottom'],\n};\n\n/**\n * Style properties that belong on a text element (RN `Text`, web `span`)\n * rather than a layout container. Used by `splitTextStyle` to auto-route\n * cascading CSS-like text props from an item-level style object to the\n * inner Text node, while keeping layout props (padding, border, bg, etc.)\n * on the wrapper Flex.\n *\n * Keys are in resolved/expanded form — apply AFTER `resolveStyleRecord`\n * which has already converted aliases (`fontColor` → `color`).\n */\nexport const TEXT_STYLE_KEYS = new Set<string>([\n    'color',\n    'fontSize',\n    'fontWeight',\n    'fontFamily',\n    'fontStyle',\n    'lineHeight',\n    'letterSpacing',\n    'textAlign',\n    'textTransform',\n    'textDecoration',\n    'textDecorationLine',\n    'textDecorationColor',\n    'textDecorationStyle',\n    'whiteSpace',\n    'wordBreak',\n    'wordWrap',\n]);\n\n/**\n * Splits a resolved style record into two halves:\n *   - `text`:    properties that cascade to the inner `Text` node\n *   - `wrapper`: everything else (layout / box props on the outer Flex)\n *\n * Mirrors how CSS naturally cascades on a `<div><span>text</span></div>`:\n * `color`, `fontSize`, etc. would inherit to the span; `padding`, `bg`,\n * `border` stay on the div. Consumers pass a single style object and\n * the renderer routes properties to the correct element.\n */\nexport function splitTextStyle(\n    resolved: Record<string, any>,\n): { wrapper: Record<string, any>; text: Record<string, any> } {\n    const wrapper: Record<string, any> = {};\n    const text: Record<string, any> = {};\n    for (const key of Object.keys(resolved)) {\n        if (TEXT_STYLE_KEYS.has(key)) text[key] = resolved[key];\n        else wrapper[key] = resolved[key];\n    }\n    return {wrapper, text};\n}\n\n/**\n * Pure function: resolves theme tokens and maps CSS prop aliases to standard style keys.\n * Platform-agnostic — output is compatible with both web CSSProperties and native ViewStyle.\n * Extracted for reuse by useResolvedElementStyles without hook constraints.\n */\nexport function resolveStyleRecord(\n    themeStyle: Record<string, any>,\n    resolveToken: (token: string) => string,\n): Record<string, any> {\n    if (!themeStyle || Object.keys(themeStyle).length === 0) return {};\n\n    const resolved: Record<string, any> = {};\n    for (const [key, value] of Object.entries(themeStyle)) {\n        // Cross-platform shadow: `shadow: 'md'` expands to a `boxShadow` on web\n        // and to `shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`\n        // on native. Platform output comes from the `./shadowPresets` module,\n        // resolved per-bundle via moduleSuffixes.\n        if (key === 'shadow') {\n            Object.assign(resolved, expandShadow(typeof value === 'string' ? value : '', resolveToken));\n            continue;\n        }\n\n        const resolvedValue = typeof value === 'string' ? resolveToken(value) : value;\n\n        if (key in EXPAND_MAP) {\n            for (const cssKey of EXPAND_MAP[key]!) {\n                resolved[cssKey] = resolvedValue;\n            }\n            continue;\n        }\n\n        resolved[CSS_PROP_MAP[key] ?? key] = resolvedValue;\n    }\n    return resolved;\n}\n\n/**\n * Resolves theme tokens in a style object and maps KitsConcerto\n * CSS prop aliases to standard style keys (platform-agnostic).\n *\n * Used by components that don't use ResponsiveElement (e.g. PrimeReact form controls)\n * to apply theme.components[name].style as inline styles.\n */\nexport default function useResolvedStyle(themeStyle: Record<string, any>): Record<string, any> {\n    const {resolveToken} = useKitsTheme();\n    return useMemo(() => resolveStyleRecord(themeStyle, resolveToken), [themeStyle, resolveToken]);\n}\n"],"names":["expandShadow","useKitsTheme","useMemo"],"mappings":"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"}

package/hooks/useResolvedStyle.js

@@ -0,0 +1,93 @@
+import { useMemo } from 'react';
+import { expandShadow } from './shadowPresets.js';
+import { useKitsTheme } from '../contexts/Theme/KitsThemeProvider.js';
+
+const CSS_PROP_MAP = {
+  bg: "backgroundColor",
+  bgColor: "backgroundColor",
+  w: "width",
+  h: "height",
+  minW: "minWidth",
+  maxW: "maxWidth",
+  minH: "minHeight",
+  maxH: "maxHeight",
+  p: "padding",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  m: "margin",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  fontColor: "color",
+  borderW: "borderWidth",
+  flexOrder: "order"
+  // NOTE: `shadow` is intentionally NOT mapped here — it is handled as a
+  // cross-platform special case in `resolveStyleRecord` (see `expandShadow`),
+  // expanding to `boxShadow` on web and `shadow*`/`elevation` on native.
+};
+const EXPAND_MAP = {
+  px: ["paddingLeft", "paddingRight"],
+  py: ["paddingTop", "paddingBottom"],
+  mx: ["marginLeft", "marginRight"],
+  my: ["marginTop", "marginBottom"],
+  paddingHorizontal: ["paddingLeft", "paddingRight"],
+  paddingVertical: ["paddingTop", "paddingBottom"],
+  borderX: ["borderLeft", "borderRight"],
+  borderY: ["borderTop", "borderBottom"]
+};
+const TEXT_STYLE_KEYS = /* @__PURE__ */ new Set([
+  "color",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "fontStyle",
+  "lineHeight",
+  "letterSpacing",
+  "textAlign",
+  "textTransform",
+  "textDecoration",
+  "textDecorationLine",
+  "textDecorationColor",
+  "textDecorationStyle",
+  "whiteSpace",
+  "wordBreak",
+  "wordWrap"
+]);
+function splitTextStyle(resolved) {
+  const wrapper = {};
+  const text = {};
+  for (const key of Object.keys(resolved)) {
+    if (TEXT_STYLE_KEYS.has(key)) text[key] = resolved[key];
+    else wrapper[key] = resolved[key];
+  }
+  return { wrapper, text };
+}
+function resolveStyleRecord(themeStyle, resolveToken) {
+  if (!themeStyle || Object.keys(themeStyle).length === 0) return {};
+  const resolved = {};
+  for (const [key, value] of Object.entries(themeStyle)) {
+    if (key === "shadow") {
+      Object.assign(resolved, expandShadow(typeof value === "string" ? value : ""));
+      continue;
+    }
+    const resolvedValue = typeof value === "string" ? resolveToken(value) : value;
+    if (key in EXPAND_MAP) {
+      for (const cssKey of EXPAND_MAP[key]) {
+        resolved[cssKey] = resolvedValue;
+      }
+      continue;
+    }
+    resolved[CSS_PROP_MAP[key] ?? key] = resolvedValue;
+  }
+  return resolved;
+}
+function useResolvedStyle(themeStyle) {
+  const { resolveToken } = useKitsTheme();
+  return useMemo(() => resolveStyleRecord(themeStyle, resolveToken), [themeStyle, resolveToken]);
+}
+
+export { TEXT_STYLE_KEYS, useResolvedStyle as default, resolveStyleRecord, splitTextStyle };
+//# sourceMappingURL=useResolvedStyle.js.map

package/hooks/useResolvedStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedStyle.js","sources":["../../../src/hooks/useResolvedStyle.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport {useKitsTheme} from '../contexts/Theme';\nimport {expandShadow} from './shadowPresets';\n\n/** Single alias → single camelCase CSS key (platform-agnostic) */\nconst CSS_PROP_MAP: Record<string, string> = {\n    bg: 'backgroundColor',\n    bgColor: 'backgroundColor',\n    w: 'width',\n    h: 'height',\n    minW: 'minWidth',\n    maxW: 'maxWidth',\n    minH: 'minHeight',\n    maxH: 'maxHeight',\n    p: 'padding',\n    pt: 'paddingTop',\n    pr: 'paddingRight',\n    pb: 'paddingBottom',\n    pl: 'paddingLeft',\n    m: 'margin',\n    mt: 'marginTop',\n    mr: 'marginRight',\n    mb: 'marginBottom',\n    ml: 'marginLeft',\n    fontColor: 'color',\n    borderW: 'borderWidth',\n    flexOrder: 'order',\n    // NOTE: `shadow` is intentionally NOT mapped here — it is handled as a\n    // cross-platform special case in `resolveStyleRecord` (see `expandShadow`),\n    // expanding to `boxShadow` on web and `shadow*`/`elevation` on native.\n};\n\n/**\n * Shorthands that expand to multiple CSS properties.\n * React Native equivalents (paddingHorizontal / paddingVertical) are handled here too.\n */\nconst EXPAND_MAP: Record<string, string[]> = {\n    px: ['paddingLeft', 'paddingRight'],\n    py: ['paddingTop', 'paddingBottom'],\n    mx: ['marginLeft', 'marginRight'],\n    my: ['marginTop', 'marginBottom'],\n    paddingHorizontal: ['paddingLeft', 'paddingRight'],\n    paddingVertical: ['paddingTop', 'paddingBottom'],\n    borderX: ['borderLeft', 'borderRight'],\n    borderY: ['borderTop', 'borderBottom'],\n};\n\n/**\n * Style properties that belong on a text element (RN `Text`, web `span`)\n * rather than a layout container. Used by `splitTextStyle` to auto-route\n * cascading CSS-like text props from an item-level style object to the\n * inner Text node, while keeping layout props (padding, border, bg, etc.)\n * on the wrapper Flex.\n *\n * Keys are in resolved/expanded form — apply AFTER `resolveStyleRecord`\n * which has already converted aliases (`fontColor` → `color`).\n */\nexport const TEXT_STYLE_KEYS = new Set<string>([\n    'color',\n    'fontSize',\n    'fontWeight',\n    'fontFamily',\n    'fontStyle',\n    'lineHeight',\n    'letterSpacing',\n    'textAlign',\n    'textTransform',\n    'textDecoration',\n    'textDecorationLine',\n    'textDecorationColor',\n    'textDecorationStyle',\n    'whiteSpace',\n    'wordBreak',\n    'wordWrap',\n]);\n\n/**\n * Splits a resolved style record into two halves:\n *   - `text`:    properties that cascade to the inner `Text` node\n *   - `wrapper`: everything else (layout / box props on the outer Flex)\n *\n * Mirrors how CSS naturally cascades on a `<div><span>text</span></div>`:\n * `color`, `fontSize`, etc. would inherit to the span; `padding`, `bg`,\n * `border` stay on the div. Consumers pass a single style object and\n * the renderer routes properties to the correct element.\n */\nexport function splitTextStyle(\n    resolved: Record<string, any>,\n): { wrapper: Record<string, any>; text: Record<string, any> } {\n    const wrapper: Record<string, any> = {};\n    const text: Record<string, any> = {};\n    for (const key of Object.keys(resolved)) {\n        if (TEXT_STYLE_KEYS.has(key)) text[key] = resolved[key];\n        else wrapper[key] = resolved[key];\n    }\n    return {wrapper, text};\n}\n\n/**\n * Pure function: resolves theme tokens and maps CSS prop aliases to standard style keys.\n * Platform-agnostic — output is compatible with both web CSSProperties and native ViewStyle.\n * Extracted for reuse by useResolvedElementStyles without hook constraints.\n */\nexport function resolveStyleRecord(\n    themeStyle: Record<string, any>,\n    resolveToken: (token: string) => string,\n): Record<string, any> {\n    if (!themeStyle || Object.keys(themeStyle).length === 0) return {};\n\n    const resolved: Record<string, any> = {};\n    for (const [key, value] of Object.entries(themeStyle)) {\n        // Cross-platform shadow: `shadow: 'md'` expands to a `boxShadow` on web\n        // and to `shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`\n        // on native. Platform output comes from the `./shadowPresets` module,\n        // resolved per-bundle via moduleSuffixes.\n        if (key === 'shadow') {\n            Object.assign(resolved, expandShadow(typeof value === 'string' ? value : '', resolveToken));\n            continue;\n        }\n\n        const resolvedValue = typeof value === 'string' ? resolveToken(value) : value;\n\n        if (key in EXPAND_MAP) {\n            for (const cssKey of EXPAND_MAP[key]!) {\n                resolved[cssKey] = resolvedValue;\n            }\n            continue;\n        }\n\n        resolved[CSS_PROP_MAP[key] ?? key] = resolvedValue;\n    }\n    return resolved;\n}\n\n/**\n * Resolves theme tokens in a style object and maps KitsConcerto\n * CSS prop aliases to standard style keys (platform-agnostic).\n *\n * Used by components that don't use ResponsiveElement (e.g. PrimeReact form controls)\n * to apply theme.components[name].style as inline styles.\n */\nexport default function useResolvedStyle(themeStyle: Record<string, any>): Record<string, any> {\n    const {resolveToken} = useKitsTheme();\n    return useMemo(() => resolveStyleRecord(themeStyle, resolveToken), [themeStyle, resolveToken]);\n}\n"],"names":[],"mappings":"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"}

package/hooks/useRtlLineHeight.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var locale = require('./locale.cjs');
+var KitsThemeProvider_native = require('../contexts/Theme/KitsThemeProvider.cjs');
+
+const REM_PX = 16;
+const RTL_MULTIPLIER = 1.5;
+function useRtlLineHeight(sizeToken, explicitFontSize) {
+  const { theme } = KitsThemeProvider_native.useKitsTheme();
+  const { isRTL } = locale.useLanguage();
+  if (!isRTL) return void 0;
+  let px = explicitFontSize;
+  if (px == null) {
+    const tok = theme.fontSizes?.[sizeToken ?? "md"];
+    px = typeof tok === "number" ? tok : typeof tok === "string" ? parseFloat(tok) * REM_PX : REM_PX;
+  }
+  if (!Number.isFinite(px) || px <= 0) px = REM_PX;
+  return Math.round(px * RTL_MULTIPLIER);
+}
+
+exports.default = useRtlLineHeight;
+//# sourceMappingURL=useRtlLineHeight.cjs.map

package/hooks/useRtlLineHeight.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRtlLineHeight.cjs","sources":["../../../src/hooks/useRtlLineHeight.ts"],"sourcesContent":["import {useKitsTheme} from '../contexts/Theme';\nimport {useLanguage} from './locale';\n\nconst REM_PX = 16;\n// Tall RTL scripts (Arabic NotoKufi) clip at the top with a tight line-box.\n// 1.5× gives enough headroom without looking excessively loose. Tunable.\nconst RTL_MULTIPLIER = 1.5;\n\n/**\n * Returns an explicit line-height (px) for RTL text so tall scripts aren't\n * clipped at the top, or `undefined` for LTR — in which case the caller keeps\n * the font's natural line-height (English/LTR is never changed).\n *\n * NATIVE-ONLY concern: React Native's line-box for some custom fonts is too\n * short for Arabic glyphs. `pass` the resolved size token (e.g. 'md') and, if\n * the caller has an explicit numeric fontSize, pass that too.\n */\nexport default function useRtlLineHeight(\n    sizeToken?: string,\n    explicitFontSize?: number,\n): number | undefined {\n    const {theme} = useKitsTheme();\n    const {isRTL} = useLanguage();\n    if (!isRTL) return undefined;\n\n    let px = explicitFontSize;\n    if (px == null) {\n        const tok = (theme.fontSizes as Record<string, unknown> | undefined)?.[\n            sizeToken ?? 'md'\n        ];\n        px =\n            typeof tok === 'number'\n                ? tok\n                : typeof tok === 'string'\n                  ? parseFloat(tok) * REM_PX\n                  : REM_PX;\n    }\n    if (!Number.isFinite(px as number) || (px as number) <= 0) px = REM_PX;\n    return Math.round((px as number) * RTL_MULTIPLIER);\n}\n"],"names":["useKitsTheme","useLanguage"],"mappings":";;;;;;;AAGA,MAAM,MAAA,GAAS,EAAA;AAGf,MAAM,cAAA,GAAiB,GAAA;AAWvB,SAAwB,gBAAA,CACpB,WACA,gBAAA,EACkB;AAClB,EAAA,MAAM,EAAC,KAAA,EAAK,GAAIA,qCAAA,EAAa;AAC7B,EAAA,MAAM,EAAC,KAAA,EAAK,GAAIC,kBAAA,EAAY;AAC5B,EAAA,IAAI,CAAC,OAAO,OAAO,MAAA;AAEnB,EAAA,IAAI,EAAA,GAAK,gBAAA;AACT,EAAA,IAAI,MAAM,IAAA,EAAM;AACZ,IAAA,MAAM,GAAA,GAAO,KAAA,CAAM,SAAA,GACf,SAAA,IAAa,IACjB,CAAA;AACA,IAAA,EAAA,GACI,OAAO,GAAA,KAAQ,QAAA,GACT,GAAA,GACA,OAAO,QAAQ,QAAA,GACb,UAAA,CAAW,GAAG,CAAA,GAAI,MAAA,GAClB,MAAA;AAAA,EAChB;AACA,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,EAAY,CAAA,IAAM,EAAA,IAAiB,GAAG,EAAA,GAAK,MAAA;AAChE,EAAA,OAAO,IAAA,CAAK,KAAA,CAAO,EAAA,GAAgB,cAAc,CAAA;AACrD;;;;"}

package/hooks/useRtlLineHeight.js

@@ -0,0 +1,20 @@
+import { useLanguage } from './locale.js';
+import { useKitsTheme } from '../contexts/Theme/KitsThemeProvider.js';
+
+const REM_PX = 16;
+const RTL_MULTIPLIER = 1.5;
+function useRtlLineHeight(sizeToken, explicitFontSize) {
+  const { theme } = useKitsTheme();
+  const { isRTL } = useLanguage();
+  if (!isRTL) return void 0;
+  let px = explicitFontSize;
+  if (px == null) {
+    const tok = theme.fontSizes?.[sizeToken ?? "md"];
+    px = typeof tok === "number" ? tok : typeof tok === "string" ? parseFloat(tok) * REM_PX : REM_PX;
+  }
+  if (!Number.isFinite(px) || px <= 0) px = REM_PX;
+  return Math.round(px * RTL_MULTIPLIER);
+}
+
+export { useRtlLineHeight as default };
+//# sourceMappingURL=useRtlLineHeight.js.map

package/hooks/useRtlLineHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRtlLineHeight.js","sources":["../../../src/hooks/useRtlLineHeight.ts"],"sourcesContent":["import {useKitsTheme} from '../contexts/Theme';\nimport {useLanguage} from './locale';\n\nconst REM_PX = 16;\n// Tall RTL scripts (Arabic NotoKufi) clip at the top with a tight line-box.\n// 1.5× gives enough headroom without looking excessively loose. Tunable.\nconst RTL_MULTIPLIER = 1.5;\n\n/**\n * Returns an explicit line-height (px) for RTL text so tall scripts aren't\n * clipped at the top, or `undefined` for LTR — in which case the caller keeps\n * the font's natural line-height (English/LTR is never changed).\n *\n * NATIVE-ONLY concern: React Native's line-box for some custom fonts is too\n * short for Arabic glyphs. `pass` the resolved size token (e.g. 'md') and, if\n * the caller has an explicit numeric fontSize, pass that too.\n */\nexport default function useRtlLineHeight(\n    sizeToken?: string,\n    explicitFontSize?: number,\n): number | undefined {\n    const {theme} = useKitsTheme();\n    const {isRTL} = useLanguage();\n    if (!isRTL) return undefined;\n\n    let px = explicitFontSize;\n    if (px == null) {\n        const tok = (theme.fontSizes as Record<string, unknown> | undefined)?.[\n            sizeToken ?? 'md'\n        ];\n        px =\n            typeof tok === 'number'\n                ? tok\n                : typeof tok === 'string'\n                  ? parseFloat(tok) * REM_PX\n                  : REM_PX;\n    }\n    if (!Number.isFinite(px as number) || (px as number) <= 0) px = REM_PX;\n    return Math.round((px as number) * RTL_MULTIPLIER);\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,MAAA,GAAS,EAAA;AAGf,MAAM,cAAA,GAAiB,GAAA;AAWvB,SAAwB,gBAAA,CACpB,WACA,gBAAA,EACkB;AAClB,EAAA,MAAM,EAAC,KAAA,EAAK,GAAI,YAAA,EAAa;AAC7B,EAAA,MAAM,EAAC,KAAA,EAAK,GAAI,WAAA,EAAY;AAC5B,EAAA,IAAI,CAAC,OAAO,OAAO,MAAA;AAEnB,EAAA,IAAI,EAAA,GAAK,gBAAA;AACT,EAAA,IAAI,MAAM,IAAA,EAAM;AACZ,IAAA,MAAM,GAAA,GAAO,KAAA,CAAM,SAAA,GACf,SAAA,IAAa,IACjB,CAAA;AACA,IAAA,EAAA,GACI,OAAO,GAAA,KAAQ,QAAA,GACT,GAAA,GACA,OAAO,QAAQ,QAAA,GACb,UAAA,CAAW,GAAG,CAAA,GAAI,MAAA,GAClB,MAAA;AAAA,EAChB;AACA,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,EAAY,CAAA,IAAM,EAAA,IAAiB,GAAG,EAAA,GAAK,MAAA;AAChE,EAAA,OAAO,IAAA,CAAK,KAAA,CAAO,EAAA,GAAgB,cAAc,CAAA;AACrD;;;;"}

package/hooks/useScrollState/helper.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+function computeScrollState(prevY, currentY, threshold) {
+  return {
+    y: currentY,
+    isScrolled: currentY > threshold,
+    direction: currentY > prevY ? "down" : "up"
+  };
+}
+
+exports.computeScrollState = computeScrollState;
+//# sourceMappingURL=helper.cjs.map

package/hooks/useScrollState/helper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.cjs","sources":["../../../../src/hooks/useScrollState/helper.ts"],"sourcesContent":["// scrollCore.ts\nexport type ScrollDirection = \"up\" | \"down\";\n\nexport type ScrollState = {\n    y: number;\n    isScrolled: boolean;\n    direction: ScrollDirection;\n};\n\nexport function computeScrollState(\n    prevY: number,\n    currentY: number,\n    threshold: number\n) {\n    return {\n        y: currentY,\n        isScrolled: currentY > threshold,\n        direction: currentY > prevY ? \"down\" : \"up\",\n    } as const;\n}"],"names":[],"mappings":";;AASO,SAAS,kBAAA,CACZ,KAAA,EACA,QAAA,EACA,SAAA,EACF;AACE,EAAA,OAAO;AAAA,IACH,CAAA,EAAG,QAAA;AAAA,IACH,YAAY,QAAA,GAAW,SAAA;AAAA,IACvB,SAAA,EAAW,QAAA,GAAW,KAAA,GAAQ,MAAA,GAAS;AAAA,GAC3C;AACJ;;;;"}

package/hooks/useScrollState/helper.js

@@ -0,0 +1,10 @@
+function computeScrollState(prevY, currentY, threshold) {
+  return {
+    y: currentY,
+    isScrolled: currentY > threshold,
+    direction: currentY > prevY ? "down" : "up"
+  };
+}
+
+export { computeScrollState };
+//# sourceMappingURL=helper.js.map

package/hooks/useScrollState/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sources":["../../../../src/hooks/useScrollState/helper.ts"],"sourcesContent":["// scrollCore.ts\nexport type ScrollDirection = \"up\" | \"down\";\n\nexport type ScrollState = {\n    y: number;\n    isScrolled: boolean;\n    direction: ScrollDirection;\n};\n\nexport function computeScrollState(\n    prevY: number,\n    currentY: number,\n    threshold: number\n) {\n    return {\n        y: currentY,\n        isScrolled: currentY > threshold,\n        direction: currentY > prevY ? \"down\" : \"up\",\n    } as const;\n}"],"names":[],"mappings":"AASO,SAAS,kBAAA,CACZ,KAAA,EACA,QAAA,EACA,SAAA,EACF;AACE,EAAA,OAAO;AAAA,IACH,CAAA,EAAG,QAAA;AAAA,IACH,YAAY,QAAA,GAAW,SAAA;AAAA,IACvB,SAAA,EAAW,QAAA,GAAW,KAAA,GAAQ,MAAA,GAAS;AAAA,GAC3C;AACJ;;;;"}

package/hooks/useScrollState/index.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var helper = require('./helper.cjs');
+
+const useScrollState = (options = {}) => {
+  const { threshold = 60 } = options;
+  const lastY = React.useRef(0);
+  const [scrollState, setScrollState] = React.useState({
+    y: 0,
+    isScrolled: false,
+    direction: "up"
+  });
+  const onScroll = (e) => {
+    const y = e.nativeEvent.contentOffset.y;
+    setScrollState(
+      helper.computeScrollState(lastY.current, y, threshold)
+    );
+    lastY.current = y;
+  };
+  return { scrollState, onScroll };
+};
+
+exports.default = useScrollState;
+//# sourceMappingURL=index.cjs.map

package/hooks/useScrollState/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/hooks/useScrollState/index.native.ts"],"sourcesContent":["import {useEffect, useRef, useState} from \"react\";\nimport {computeScrollState, type ScrollState} from \"./helper\";\n\ntype Options = {\n    threshold?: number;\n    target?: any;\n};\n\nconst useScrollState = (options: Options = {}) => {\n    const { threshold = 60 } = options;\n\n\n    const lastY = useRef(0);\n    const [scrollState, setScrollState] = useState<ScrollState>({\n        y: 0,\n        isScrolled: false,\n        direction: \"up\" as const,\n    });\n\n    const onScroll = (e: any) => {\n        const y = e.nativeEvent.contentOffset.y;\n\n        setScrollState(\n            computeScrollState(lastY.current, y, threshold)\n        );\n\n        lastY.current = y;\n    };\n\n    return { scrollState, onScroll };\n}\n\nexport default useScrollState"],"names":["useRef","useState","computeScrollState"],"mappings":";;;;;;;AAQA,MAAM,cAAA,GAAiB,CAAC,OAAA,GAAmB,EAAC,KAAM;AAC9C,EAAA,MAAM,EAAE,SAAA,GAAY,EAAA,EAAG,GAAI,OAAA;AAG3B,EAAA,MAAM,KAAA,GAAQA,aAAO,CAAC,CAAA;AACtB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,cAAA,CAAsB;AAAA,IACxD,CAAA,EAAG,CAAA;AAAA,IACH,UAAA,EAAY,KAAA;AAAA,IACZ,SAAA,EAAW;AAAA,GACd,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAW;AACzB,IAAA,MAAM,CAAA,GAAI,CAAA,CAAE,WAAA,CAAY,aAAA,CAAc,CAAA;AAEtC,IAAA,cAAA;AAAA,MACIC,yBAAA,CAAmB,KAAA,CAAM,OAAA,EAAS,CAAA,EAAG,SAAS;AAAA,KAClD;AAEA,IAAA,KAAA,CAAM,OAAA,GAAU,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,OAAO,EAAE,aAAa,QAAA,EAAS;AACnC;;;;"}

package/hooks/useScrollState/index.js

@@ -0,0 +1,23 @@
+import { useRef, useState } from 'react';
+import { computeScrollState } from './helper.js';
+
+const useScrollState = (options = {}) => {
+  const { threshold = 60 } = options;
+  const lastY = useRef(0);
+  const [scrollState, setScrollState] = useState({
+    y: 0,
+    isScrolled: false,
+    direction: "up"
+  });
+  const onScroll = (e) => {
+    const y = e.nativeEvent.contentOffset.y;
+    setScrollState(
+      computeScrollState(lastY.current, y, threshold)
+    );
+    lastY.current = y;
+  };
+  return { scrollState, onScroll };
+};
+
+export { useScrollState as default };
+//# sourceMappingURL=index.js.map

package/hooks/useScrollState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/hooks/useScrollState/index.native.ts"],"sourcesContent":["import {useEffect, useRef, useState} from \"react\";\nimport {computeScrollState, type ScrollState} from \"./helper\";\n\ntype Options = {\n    threshold?: number;\n    target?: any;\n};\n\nconst useScrollState = (options: Options = {}) => {\n    const { threshold = 60 } = options;\n\n\n    const lastY = useRef(0);\n    const [scrollState, setScrollState] = useState<ScrollState>({\n        y: 0,\n        isScrolled: false,\n        direction: \"up\" as const,\n    });\n\n    const onScroll = (e: any) => {\n        const y = e.nativeEvent.contentOffset.y;\n\n        setScrollState(\n            computeScrollState(lastY.current, y, threshold)\n        );\n\n        lastY.current = y;\n    };\n\n    return { scrollState, onScroll };\n}\n\nexport default useScrollState"],"names":[],"mappings":";;;AAQA,MAAM,cAAA,GAAiB,CAAC,OAAA,GAAmB,EAAC,KAAM;AAC9C,EAAA,MAAM,EAAE,SAAA,GAAY,EAAA,EAAG,GAAI,OAAA;AAG3B,EAAA,MAAM,KAAA,GAAQ,OAAO,CAAC,CAAA;AACtB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAA,CAAsB;AAAA,IACxD,CAAA,EAAG,CAAA;AAAA,IACH,UAAA,EAAY,KAAA;AAAA,IACZ,SAAA,EAAW;AAAA,GACd,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,CAAC,CAAA,KAAW;AACzB,IAAA,MAAM,CAAA,GAAI,CAAA,CAAE,WAAA,CAAY,aAAA,CAAc,CAAA;AAEtC,IAAA,cAAA;AAAA,MACI,kBAAA,CAAmB,KAAA,CAAM,OAAA,EAAS,CAAA,EAAG,SAAS;AAAA,KAClD;AAEA,IAAA,KAAA,CAAM,OAAA,GAAU,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,OAAO,EAAE,aAAa,QAAA,EAAS;AACnC;;;;"}

package/hooks/useSelectionController.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const isEqual = (a, b) => Object.is(a, b);
+function useSelectionController(params) {
+  const isControlled = "value" in params && params.value !== void 0;
+  const [internalValue, setInternalValue] = React.useState(() => {
+    if (params.defaultValue !== void 0) return params.defaultValue;
+    if (params.mode === "multiple") return [];
+    if (params.mode === "tristate") return null;
+    if (params.mode === "boolean") return false;
+    return void 0;
+  });
+  const value = isControlled ? params.value : internalValue;
+  const triggerChange = React.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      if (params.onChange) {
+        params.onChange(newValue);
+      }
+    },
+    [isControlled, params]
+  );
+  const onChange = React.useCallback(
+    (input) => {
+      const rawValue = input && typeof input === "object" && "value" in input ? input.value : input;
+      switch (params.mode) {
+        case "boolean": {
+          const next = !value;
+          triggerChange(next);
+          break;
+        }
+        case "tristate": {
+          let next = false;
+          if (value === false) next = true;
+          else if (value === true) next = null;
+          else if (value === null) next = false;
+          triggerChange(next);
+          break;
+        }
+        case "single": {
+          if (isEqual(value, rawValue)) {
+            if (params.allowDeselect) {
+              triggerChange(void 0);
+            }
+          } else {
+            triggerChange(rawValue);
+          }
+          break;
+        }
+        case "multiple": {
+          const currentArray = value || [];
+          const exists = currentArray.some((v) => isEqual(v, rawValue));
+          let nextArray;
+          if (exists) {
+            nextArray = currentArray.filter((v) => !isEqual(v, rawValue));
+          } else {
+            nextArray = [...currentArray, rawValue];
+          }
+          triggerChange(nextArray);
+          break;
+        }
+      }
+    },
+    [params.mode, value, triggerChange, params]
+    // Added params to dependency
+  );
+  const isSelected = React.useCallback(
+    (itemValue) => {
+      const target = itemValue && typeof itemValue === "object" && "value" in itemValue ? itemValue.value : itemValue;
+      if (params.mode === "multiple") {
+        return (value || []).some((v) => isEqual(v, target));
+      }
+      if (params.mode === "single") {
+        return isEqual(value, target);
+      }
+      return value === true;
+    },
+    [value, params.mode]
+  );
+  const checked = React.useMemo(() => {
+    if (params.mode === "multiple") return Array.isArray(value) && value.length > 0;
+    if (params.mode === "single") return value !== void 0 && value !== null;
+    return value;
+  }, [value, params.mode]);
+  return {
+    mode: params.mode,
+    /**
+     * The current state.
+     * Type: boolean | null | T | T[]
+     */
+    value,
+    /**
+     * Call this to toggle or select an item.
+     * @param input Optional. The value or item object (required for single/multi).
+     */
+    onChange,
+    /**
+     * Helper to check if a specific value is selected.
+     */
+    isSelected,
+    /**
+     * Derived boolean state (mostly for simple checkboxes).
+     */
+    checked
+  };
+}
+
+exports.default = useSelectionController;
+//# sourceMappingURL=useSelectionController.cjs.map