@cyberkaidev/ui 0.1.0

package/lib/typescript/src/icons/Icon.d.ts

@@ -0,0 +1,64 @@
+declare const names: {
+    check: {
+        ios: "checkmark";
+        android: "check";
+    };
+    remove: {
+        ios: "minus";
+        android: "remove";
+    };
+    add: {
+        ios: "plus";
+        android: "add";
+    };
+    settings: {
+        ios: "gear";
+        android: "settings";
+    };
+    arrow_back: {
+        ios: "chevron.left";
+        android: "arrow_back";
+    };
+    search: {
+        ios: "magnifyingglass";
+        android: "search";
+    };
+    edit: {
+        ios: "pencil";
+        android: "edit";
+    };
+    error: {
+        ios: "x.circle";
+        android: "error";
+    };
+    close: {
+        ios: "xmark";
+        android: "close";
+    };
+    folder: {
+        ios: "folder";
+        android: "folder";
+    };
+    question: {
+        ios: "questionmark";
+        android: "question_mark";
+    };
+    filter: {
+        ios: "line.3.horizontal.decrease";
+        android: "filter_list";
+    };
+};
+export type IconNameType = keyof typeof names;
+type Props = {
+    /** One of the curated icon names. */
+    name: IconNameType;
+    /** Icon color. Defaults to the theme `primary`. */
+    color?: string;
+    /** Size in dp. Defaults to the theme `iconSize.m`. */
+    size?: number;
+    testID?: string;
+};
+/** Renders a curated UI icon via `expo-symbols` (`SymbolView`). */
+export declare function Icon({ name, color, size, testID }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/lib/typescript/src/icons/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/icons/Icon.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa0D,CAAC;AAEtE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,IAAI,EAAE,YAAY,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,mEAAmE;AACnE,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,+BAexD"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,30 @@
+export * from './components/AppBar.js';
+export * from './components/BounceEffect.js';
+export * from './components/Button.js';
+export * from './components/Chips.js';
+export * from './components/IconButton.js';
+export * from './components/InforList.js';
+export * from './components/LoadingApp.js';
+export * from './components/Overlays.js';
+export * from './components/RippleEffect.js';
+export * from './components/Scaffold.js';
+export * from './components/SearchBar.js';
+export * from './components/SegmentedButton.js';
+export * from './components/ShapedButton.js';
+export * from './components/SlideModal.js';
+export * from './components/TabBar.js';
+export * from './components/Text.js';
+export * from './components/TextButton.js';
+export * from './components/TextInput.js';
+export * from './components/Toast.js';
+export * from './icons/Icon.js';
+export { ThemeProvider, useTheme, useColors, useThemedStyles, } from './ThemeProvider.js';
+export { colors, fontSizes, iconSize, spaces, borderRadius, pageSpacing, defaultTokens, } from './theme.js';
+export type { ThemeType, ThemeTokensType, FontSizesType, IconSizesType, SpacesType, SpaceScaleType, BorderRadiusType, PageSpacingType, } from './theme.js';
+export { widthDP, heightDP } from './responsive.js';
+export * from './hooks/useAppBarScroll.js';
+export * from './hooks/usePressAndHoldRepeat.js';
+export { useToast } from './stores/useToast.js';
+export { useLoadingApp } from './stores/useLoadingApp.js';
+export type * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,wBAAqB,CAAC;AACpC,cAAc,8BAA2B,CAAC;AAC1C,cAAc,wBAAqB,CAAC;AACpC,cAAc,uBAAoB,CAAC;AACnC,cAAc,4BAAyB,CAAC;AACxC,cAAc,2BAAwB,CAAC;AACvC,cAAc,4BAAyB,CAAC;AACxC,cAAc,0BAAuB,CAAC;AACtC,cAAc,8BAA2B,CAAC;AAC1C,cAAc,0BAAuB,CAAC;AACtC,cAAc,2BAAwB,CAAC;AACvC,cAAc,iCAA8B,CAAC;AAC7C,cAAc,8BAA2B,CAAC;AAC1C,cAAc,4BAAyB,CAAC;AACxC,cAAc,wBAAqB,CAAC;AACpC,cAAc,sBAAmB,CAAC;AAClC,cAAc,4BAAyB,CAAC;AACxC,cAAc,2BAAwB,CAAC;AACvC,cAAc,uBAAoB,CAAC;AAGnC,cAAc,iBAAc,CAAC;AAG7B,OAAO,EACL,aAAa,EACb,QAAQ,EACR,SAAS,EACT,eAAe,GAChB,MAAM,oBAAiB,CAAC;AACzB,OAAO,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,YAAS,CAAC;AACjB,YAAY,EACV,SAAS,EACT,eAAe,EACf,aAAa,EACb,aAAa,EACb,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,eAAe,GAChB,MAAM,YAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAc,CAAC;AAGjD,cAAc,4BAAyB,CAAC;AACxC,cAAc,kCAA+B,CAAC;AAG9C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAAwB,CAAC;AAGvD,mBAAmB,YAAS,CAAC"}

package/lib/typescript/src/responsive.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Convert a percentage of the screen width to a density-independent pixel value.
+ *
+ * @param widthPercent Percentage of the screen width (number, or numeric string).
+ * @returns The value in dp, rounded to the nearest physical pixel.
+ */
+export declare function widthDP(widthPercent: string | number): number;
+/**
+ * Convert a percentage of the screen height to a density-independent pixel value.
+ *
+ * @param heightPercent Percentage of the screen height (number, or numeric string).
+ * @returns The value in dp, rounded to the nearest physical pixel.
+ */
+export declare function heightDP(heightPercent: string | number): number;
+//# sourceMappingURL=responsive.d.ts.map

package/lib/typescript/src/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../../src/responsive.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAK7D;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAO/D"}

package/lib/typescript/src/stores/useLoadingApp.d.ts

@@ -0,0 +1,14 @@
+type State = {
+    visible: boolean;
+};
+type Actions = {
+    /** Toggle the blocking loading overlay. */
+    setLoadingVisible: (visible: boolean) => void;
+};
+/**
+ * Global state for the blocking `<LoadingApp />` overlay. Render it once near
+ * the root and drive it with `useLoadingApp.getState().setLoadingVisible(...)`.
+ */
+export declare const useLoadingApp: import("zustand").UseBoundStore<import("zustand").StoreApi<State & Actions>>;
+export {};
+//# sourceMappingURL=useLoadingApp.d.ts.map

package/lib/typescript/src/stores/useLoadingApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoadingApp.d.ts","sourceRoot":"","sources":["../../../../src/stores/useLoadingApp.ts"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,2CAA2C;IAC3C,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,8EAGvB,CAAC"}

package/lib/typescript/src/stores/useToast.d.ts

@@ -0,0 +1,25 @@
+import type { ToastVariantType } from '../types.js';
+type ShowToastArgs = {
+    /** Text shown in the toast. */
+    message: string;
+    /** Visual intent. Defaults to `'info'`. */
+    variant?: ToastVariantType;
+};
+type State = {
+    visible: boolean;
+    variant: ToastVariantType;
+    message: string;
+};
+type Actions = {
+    /** Show the toast with a message and optional variant. */
+    showToast: (args: ShowToastArgs) => void;
+    /** Hide the toast. */
+    hideToast: () => void;
+};
+/**
+ * Global toast state. Render `<Toast />` once near the root; call
+ * `useToast.getState().showToast(...)` (or the hook) from anywhere.
+ */
+export declare const useToast: import("zustand").UseBoundStore<import("zustand").StoreApi<State & Actions>>;
+export {};
+//# sourceMappingURL=useToast.d.ts.map

package/lib/typescript/src/stores/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../../src/stores/useToast.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAU,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,0DAA0D;IAC1D,SAAS,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,sBAAsB;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,8EAOlB,CAAC"}

package/lib/typescript/src/theme.d.ts

@@ -0,0 +1,51 @@
+import type { ColorsType, FontSizeType, IconSizeType } from './types.js';
+/**
+ * A ready-made color palette. `ThemeProvider` **requires** a `colors` prop — pass
+ * this, spread from it, or provide your own `ColorsType`.
+ */
+export declare const colors: ColorsType;
+export type FontSizesType = Record<FontSizeType, number>;
+/** Default font sizes, in dp. */
+export declare const fontSizes: FontSizesType;
+export type IconSizesType = Record<IconSizeType, number>;
+/** Default icon sizes, in dp. */
+export declare const iconSize: IconSizesType;
+export type SpaceScaleType = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+export type SpacesType = {
+    horizontal: Record<SpaceScaleType, number>;
+    vertical: Record<SpaceScaleType, number>;
+};
+/** Default spacing scale, in dp. */
+export declare const spaces: SpacesType;
+export type BorderRadiusType = {
+    radius_5: number;
+    radius_10: number;
+    radius_15: number;
+    radius_20: number;
+    radius_100: number | string;
+};
+/** Default border radius scale. */
+export declare const borderRadius: BorderRadiusType;
+export type PageSpacingType = {
+    horizontal: number;
+    top: number;
+    bottom: number;
+};
+/** Default page insets used by `Scaffold` and the fixed bars. */
+export declare const pageSpacing: PageSpacingType;
+export type ThemeType = {
+    colors: ColorsType;
+    fontSizes: FontSizesType;
+    iconSize: IconSizesType;
+    spaces: SpacesType;
+    borderRadius: BorderRadiusType;
+    pageSpacing: PageSpacingType;
+};
+/** Everything in `ThemeType` except `colors`. */
+export type ThemeTokensType = Omit<ThemeType, 'colors'>;
+/**
+ * Defaults for the non-color token groups. `ThemeProvider` merges any override
+ * on top of these (there is no default palette — `colors` is required).
+ */
+export declare const defaultTokens: ThemeTokensType;
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/src/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,YAAS,CAAC;AAEtE;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,UAapB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAEzD,iCAAiC;AACjC,eAAO,MAAM,SAAS,EAAE,aAQvB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAEzD,iCAAiC;AACjC,eAAO,MAAM,QAAQ,EAAE,aAKtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;CAC1C,CAAC;AAEF,oCAAoC;AACpC,eAAO,MAAM,MAAM,EAAE,UAiBpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,YAAY,EAAE,gBAM1B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,WAAW,EAAE,eAIzB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,EAAE,aAAa,CAAC;IACzB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,EAAE,gBAAgB,CAAC;IAC/B,WAAW,EAAE,eAAe,CAAC;CAC9B,CAAC;AAEF,iDAAiD;AACjD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,eAM3B,CAAC"}

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,26 @@
+export type FontSizeType = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+export type IconSizeType = 's' | 'm' | 'l' | 'xl';
+export type TextAlignType = 'left' | 'center' | 'right';
+export type FontWeightType = 'regular' | 'medium' | 'bold';
+/**
+ * Shape of the color palette consumed by every component in the library.
+ * All values are plain color strings so they can be dropped straight into
+ * React Native styles.
+ */
+export type ColorsType = {
+    background: string;
+    background_60: string;
+    on_surface: string;
+    surface: string;
+    surface_90: string;
+    border: string;
+    text: string;
+    primary: string;
+    red: string;
+    green: string;
+    amber: string;
+    transparent: string;
+};
+/** Visual intent of a `Toast`. Replaces the domain-specific `ToastType` enum. */
+export type ToastVariantType = 'error' | 'success' | 'info';
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAC1E,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,iFAAiF;AACjF,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC"}

package/package.json

@@ -0,0 +1,189 @@
+{
+  "name": "@cyberkaidev/ui",
+  "version": "0.1.0",
+  "description": "Components for React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "cyberkaidev-ui-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @cyberkaidev/ui-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cyberkaidev/ui.git"
+  },
+  "author": "Kaique Dourado <cyberkaidev@gmail.com> (https://github.com/cyberkaidev)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cyberkaidev/ui/issues"
+  },
+  "homepage": "https://github.com/cyberkaidev/ui#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@release-it/conventional-changelog": "^11.0.1",
+    "@shopify/flash-list": "2.0.2",
+    "@testing-library/react-native": "^13.2.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "commitlint": "^21.0.2",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "expo": "~55.0.30",
+    "expo-blur": "~55.0.18",
+    "expo-constants": "~55.0.17",
+    "expo-symbols": "~55.0.9",
+    "jest": "^29.7.0",
+    "lefthook": "^2.1.9",
+    "prettier": "^3.8.3",
+    "react": "19.2.0",
+    "react-native": "0.83.10",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-reanimated": "4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-worklets": "0.7.4",
+    "react-test-renderer": "19.2.0",
+    "release-it": "^20.2.0",
+    "typescript": "^6.0.3"
+  },
+  "dependencies": {
+    "zustand": "^5.0.8"
+  },
+  "peerDependencies": {
+    "@shopify/flash-list": ">=2.0.0",
+    "expo": "*",
+    "expo-blur": "*",
+    "expo-constants": "*",
+    "expo-symbols": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": "*",
+    "react-native-worklets": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.ts"
+    ],
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "require",
+        "react-native",
+        "cyberkaidev-ui-source"
+      ]
+    },
+    "transformIgnorePatterns": [
+      "node_modules/(?!(?:jest-)?react-native|@react-native(-community)?|react-native-reanimated|react-native-worklets|react-native-safe-area-context|@shopify/flash-list|@expo|expo(-.*)?|expo-modules-core)"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.(test|spec).(ts|tsx)"
+    ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.63.0"
+  }
+}

package/src/ThemeProvider.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { defaultTokens } from './theme';
+import type {
+  BorderRadiusType,
+  FontSizesType,
+  IconSizesType,
+  PageSpacingType,
+  SpacesType,
+  ThemeType,
+} from './theme';
+import type { ColorsType } from './types';
+
+type Props = {
+  /**
+   * The full color palette. **Required** — there is no default. Pass the
+   * exported `colors` palette, spread from it, or provide your own.
+   */
+  colors: ColorsType;
+  /** Partial overrides for the non-color token groups; missing keys fall back
+   *  to the parent `ThemeProvider`, or to the built-in defaults. */
+  fontSizes?: Partial<FontSizesType>;
+  iconSize?: Partial<IconSizesType>;
+  spaces?: {
+    horizontal?: Partial<SpacesType['horizontal']>;
+    vertical?: Partial<SpacesType['vertical']>;
+  };
+  borderRadius?: Partial<BorderRadiusType>;
+  pageSpacing?: Partial<PageSpacingType>;
+  children: React.ReactNode;
+};
+
+const ThemeContext = React.createContext<ThemeType | null>(null);
+
+/**
+ * Injects the theme into the tree. `colors` is required; the other token groups
+ * are optional and merge over the nearest parent `ThemeProvider` (or the
+ * defaults). Providers nest.
+ */
+export function ThemeProvider({
+  colors,
+  fontSizes,
+  iconSize,
+  spaces,
+  borderRadius,
+  pageSpacing,
+  children,
+}: Props) {
+  const parent = React.useContext(ThemeContext);
+
+  const value = React.useMemo<ThemeType>(() => {
+    const baseSpaces = parent?.spaces ?? defaultTokens.spaces;
+    return {
+      colors,
+      fontSizes: {
+        ...(parent?.fontSizes ?? defaultTokens.fontSizes),
+        ...fontSizes,
+      },
+      iconSize: {
+        ...(parent?.iconSize ?? defaultTokens.iconSize),
+        ...iconSize,
+      },
+      spaces: {
+        horizontal: { ...baseSpaces.horizontal, ...spaces?.horizontal },
+        vertical: { ...baseSpaces.vertical, ...spaces?.vertical },
+      },
+      borderRadius: {
+        ...(parent?.borderRadius ?? defaultTokens.borderRadius),
+        ...borderRadius,
+      },
+      pageSpacing: {
+        ...(parent?.pageSpacing ?? defaultTokens.pageSpacing),
+        ...pageSpacing,
+      },
+    };
+  }, [parent, colors, fontSizes, iconSize, spaces, borderRadius, pageSpacing]);
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+/** The resolved theme. Throws if used outside a `ThemeProvider`. */
+export function useTheme(): ThemeType {
+  const theme = React.useContext(ThemeContext);
+  if (!theme) {
+    throw new Error(
+      '@cyberkaidev/ui: a component was rendered outside <ThemeProvider>. ' +
+        'Wrap your app in <ThemeProvider colors={...}>.'
+    );
+  }
+  return theme;
+}
+
+/** Convenience: the resolved color palette (`useTheme().colors`). */
+export function useColors(): ColorsType {
+  return useTheme().colors;
+}
+
+/**
+ * Builds a value (usually a `StyleSheet`) from the resolved theme, memoized
+ * against it. Pass a module-level factory so it stays referentially stable and
+ * the memo only recomputes when the theme actually changes.
+ */
+export function useThemedStyles<T>(factory: (theme: ThemeType) => T): T {
+  const theme = useTheme();
+  return React.useMemo(() => factory(theme), [theme, factory]);
+}