@timmbr/native-ui 0.0.0-stage → 1.0.0

package/dist/theme/config.d.ts

@@ -0,0 +1,360 @@
+import * as React from 'react';
+export declare const vars: <T extends Record<string, string | number>>(variables: T) => T;
+export declare const nativeThemes: {
+    light: {
+        '--background': string;
+        '--foreground': string;
+        '--card': string;
+        '--card-foreground': string;
+        '--popover': string;
+        '--popover-foreground': string;
+        '--primary': string;
+        '--primary-foreground': string;
+        '--secondary': string;
+        '--secondary-foreground': string;
+        '--muted': string;
+        '--muted-foreground': string;
+        '--accent': string;
+        '--accent-foreground': string;
+        '--destructive': string;
+        '--destructive-foreground': string;
+        '--success': string;
+        '--warning': string;
+        '--info': string;
+        '--border': string;
+        '--input': string;
+        '--ring': string;
+    };
+    dark: {
+        '--background': string;
+        '--foreground': string;
+        '--card': string;
+        '--card-foreground': string;
+        '--popover': string;
+        '--popover-foreground': string;
+        '--primary': string;
+        '--primary-foreground': string;
+        '--secondary': string;
+        '--secondary-foreground': string;
+        '--muted': string;
+        '--muted-foreground': string;
+        '--accent': string;
+        '--accent-foreground': string;
+        '--destructive': string;
+        '--destructive-foreground': string;
+        '--success': string;
+        '--warning': string;
+        '--info': string;
+        '--border': string;
+        '--input': string;
+        '--ring': string;
+    };
+};
+export declare const nativeTokens: {
+    themes: {
+        light: {
+            '--background': string;
+            '--foreground': string;
+            '--card': string;
+            '--card-foreground': string;
+            '--popover': string;
+            '--popover-foreground': string;
+            '--primary': string;
+            '--primary-foreground': string;
+            '--secondary': string;
+            '--secondary-foreground': string;
+            '--muted': string;
+            '--muted-foreground': string;
+            '--accent': string;
+            '--accent-foreground': string;
+            '--destructive': string;
+            '--destructive-foreground': string;
+            '--success': string;
+            '--warning': string;
+            '--info': string;
+            '--border': string;
+            '--input': string;
+            '--ring': string;
+        };
+        dark: {
+            '--background': string;
+            '--foreground': string;
+            '--card': string;
+            '--card-foreground': string;
+            '--popover': string;
+            '--popover-foreground': string;
+            '--primary': string;
+            '--primary-foreground': string;
+            '--secondary': string;
+            '--secondary-foreground': string;
+            '--muted': string;
+            '--muted-foreground': string;
+            '--accent': string;
+            '--accent-foreground': string;
+            '--destructive': string;
+            '--destructive-foreground': string;
+            '--success': string;
+            '--warning': string;
+            '--info': string;
+            '--border': string;
+            '--input': string;
+            '--ring': string;
+        };
+    };
+    colors: {
+        readonly primary: {
+            readonly 50: "#E0B29D";
+            readonly 100: "#D9A289";
+            readonly 200: "#D39375";
+            readonly 300: "#CD8361";
+            readonly 400: "#C6744E";
+            readonly 500: "#C0643A";
+            readonly DEFAULT: "#C0643A";
+            readonly 600: "#AD5A34";
+            readonly 700: "#9A502E";
+            readonly 800: "#864629";
+            readonly 900: "#733C23";
+            readonly 1000: "#60321D";
+        };
+        readonly brand: {
+            readonly 50: "#E0B29D";
+            readonly 100: "#D9A289";
+            readonly 200: "#D39375";
+            readonly 300: "#CD8361";
+            readonly 400: "#C6744E";
+            readonly 500: "#C0643A";
+            readonly DEFAULT: "#C0643A";
+            readonly 600: "#AD5A34";
+            readonly 700: "#9A502E";
+            readonly 800: "#864629";
+            readonly 900: "#733C23";
+            readonly 950: "#60321D";
+            readonly 1000: "#60321D";
+        };
+        readonly backgrounds: {
+            readonly subtle: "#DDD5CA";
+            readonly surface1: "#F5EDE0";
+            readonly surface2: "#F7F1E6";
+        };
+        readonly greys: {
+            readonly 50: "#FFFFFF";
+            readonly 100: "#E7E7E7";
+            readonly 200: "#CECECE";
+            readonly 300: "#B6B6B6";
+            readonly 400: "#9D9D9D";
+            readonly 500: "#858585";
+            readonly DEFAULT: "#858585";
+            readonly 600: "#6D6D6D";
+            readonly 700: "#545454";
+            readonly 800: "#3C3C3C";
+            readonly 900: "#232323";
+            readonly 1000: "#0B0B0B";
+        };
+        readonly misc: {
+            readonly surfaceDark: "#1A1714";
+            readonly sandMuted: "#B7AEA2";
+            readonly borderWarm: "#E8DFD1";
+        };
+        readonly semantic: {
+            readonly success: "#059669";
+            readonly warning: "#D97706";
+            readonly error: "#DC2626";
+            readonly info: "#2563EB";
+        };
+    };
+    typography: {
+        readonly fonts: {
+            readonly display: "\"DM Serif Display\", serif";
+            readonly sans: "\"Manrope\", sans-serif";
+            readonly title: "\"Outfit\", sans-serif";
+        };
+        readonly styles: {
+            readonly h1: {
+                readonly fontFamily: "\"DM Serif Display\", serif";
+                readonly fontSize: "64px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly h2: {
+                readonly fontFamily: "\"DM Serif Display\", serif";
+                readonly fontSize: "48px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly h3: {
+                readonly fontFamily: "\"DM Serif Display\", serif";
+                readonly fontSize: "32px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly h4: {
+                readonly fontFamily: "\"DM Serif Display\", serif";
+                readonly fontSize: "24px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+                readonly letterSpacing: "-0.02em";
+            };
+            readonly h5: {
+                readonly fontFamily: "\"DM Serif Display\", serif";
+                readonly fontSize: "20px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly h6: {
+                readonly fontFamily: "\"DM Serif Display\", serif";
+                readonly fontSize: "20px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly subtitle1: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "18px";
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.3;
+            };
+            readonly subtitle2: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "18px";
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.3;
+            };
+            readonly body1: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "16px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly body2: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "14px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly body2Medium: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "14px";
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.3;
+            };
+            readonly body2Semibold: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "14px";
+                readonly fontWeight: 600;
+                readonly lineHeight: 1.3;
+            };
+            readonly body2Light: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "14px";
+                readonly fontWeight: 300;
+                readonly lineHeight: 1.3;
+            };
+            readonly body3: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "12px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly body3Light: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "12px";
+                readonly fontWeight: 300;
+                readonly lineHeight: 1.3;
+            };
+            readonly pageTitle: {
+                readonly fontFamily: "\"Outfit\", sans-serif";
+                readonly fontSize: "48px";
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.3;
+            };
+            readonly captionLg: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "11px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+            readonly caption: {
+                readonly fontFamily: "\"Manrope\", sans-serif";
+                readonly fontSize: "10px";
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.3;
+            };
+        };
+    };
+    radius: {
+        readonly none: "0px";
+        readonly sm: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly xl: "0.75rem";
+        readonly full: "9999px";
+    };
+    spacing: {
+        readonly 0.5: "2px";
+        readonly 1: "4px";
+        readonly 1.5: "6px";
+        readonly 2: "8px";
+        readonly 2.5: "10px";
+        readonly 3: "12px";
+        readonly 4: "16px";
+        readonly 5: "20px";
+        readonly 6: "24px";
+        readonly 8: "32px";
+        readonly 10: "40px";
+        readonly 12: "48px";
+        readonly 16: "64px";
+        readonly 20: "80px";
+        readonly 24: "96px";
+    };
+    shadows: {
+        readonly none: "none";
+        readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    };
+    breakpoints: {
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly "2xl": "1536px";
+    };
+    animation: {
+        readonly duration: {
+            readonly fast: "150ms";
+            readonly normal: "300ms";
+            readonly slow: "500ms";
+        };
+        readonly timing: {
+            readonly easeOut: "cubic-bezier(0.16, 1, 0.3, 1)";
+            readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        };
+    };
+};
+export type VariantConfig<V> = {
+    base?: string;
+    variants?: V;
+    compoundVariants?: Array<{
+        [K in keyof V]?: keyof V[K] | boolean | string;
+    } & {
+        class?: string;
+        className?: string;
+    }>;
+    defaultVariants?: {
+        [K in keyof V]?: keyof V[K] | boolean | string;
+    };
+};
+export declare function tva<V extends Record<string, Record<string, string>>>(config: VariantConfig<V>): (props?: { [K in keyof V]?: keyof V[K] | boolean | string; } & {
+    class?: string;
+    className?: string;
+}) => string;
+export declare function createStyleContext<T = Record<string, any>>(): {
+    Context: React.Context<T>;
+    Provider: React.Provider<T>;
+    useStyleContext: () => T;
+    withStyleContext: <P extends object>(Component: React.ComponentType<P>, _scope?: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
+};
+export declare const useStyleContext: () => Record<string, any>;
+export declare const withStyleContext: <P extends object>(Component: React.ComponentType<P>, _scope?: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
+//# sourceMappingURL=config.d.ts.map

package/dist/theme/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/theme/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,EAAE,WAAW,CAAC,KAAG,CAE9E,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGxB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,gBAAgB,CAAC,EAAE,KAAK,CACtB;SAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,MAAM;KAAE,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAC5F,CAAC;IACF,eAAe,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,MAAM;KAAE,CAAC;CACtE,CAAC;AAEF,wBAAgB,GAAG,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,IACpF,QAAQ,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,GAAG,MAAM,GAAE,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,MAAM,CA6CrH;AAED,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;;;uBAK9B,CAAC,SAAS,MAAM,aAC7B,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;EAoBpC;AAGD,eAAO,MAAM,eAAe,2BAAsC,CAAC;AACnE,eAAO,MAAM,gBAAgB,GAzBD,CAAC,SAAS,MAAM,6IAyBwB,CAAC"}

package/dist/theme/config.js

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { tokens } from '@timmbr/theme';
+import { cn } from '@timmbr/utils';
+
+const vars = (variables) => {
+  return variables;
+};
+const nativeThemes = {
+  light: vars({
+    "--background": "#FFFFFF",
+    "--foreground": "#0B0B0B",
+    "--card": "#FFFFFF",
+    "--card-foreground": "#0B0B0B",
+    "--popover": "#FFFFFF",
+    "--popover-foreground": "#0B0B0B",
+    "--primary": "#C0643A",
+    "--primary-foreground": "#FFFFFF",
+    "--secondary": "#F5EDE0",
+    "--secondary-foreground": "#60321D",
+    "--muted": "#DDD5CA",
+    "--muted-foreground": "#6D6D6D",
+    "--accent": "#F7F1E6",
+    "--accent-foreground": "#60321D",
+    "--destructive": "#DC2626",
+    "--destructive-foreground": "#FFFFFF",
+    "--success": "#059669",
+    "--warning": "#D97706",
+    "--info": "#2563EB",
+    "--border": "#E7E7E7",
+    "--input": "#E7E7E7",
+    "--ring": "#C0643A"
+  }),
+  dark: vars({
+    "--background": "#0B0B0B",
+    "--foreground": "#F7F1E6",
+    "--card": "#232323",
+    "--card-foreground": "#F7F1E6",
+    "--popover": "#232323",
+    "--popover-foreground": "#F7F1E6",
+    "--primary": "#C0643A",
+    "--primary-foreground": "#FFFFFF",
+    "--secondary": "#3C3C3C",
+    "--secondary-foreground": "#F5EDE0",
+    "--muted": "#3C3C3C",
+    "--muted-foreground": "#9D9D9D",
+    "--accent": "#3C3C3C",
+    "--accent-foreground": "#F5EDE0",
+    "--destructive": "#7f1d1d",
+    "--destructive-foreground": "#F7F1E6",
+    "--success": "#059669",
+    "--warning": "#D97706",
+    "--info": "#2563EB",
+    "--border": "#3C3C3C",
+    "--input": "#3C3C3C",
+    "--ring": "#C0643A"
+  })
+};
+const nativeTokens = {
+  ...tokens,
+  themes: nativeThemes
+};
+function tva(config) {
+  return (props) => {
+    const mergedProps = {
+      ...config.defaultVariants ?? {},
+      ...props ?? {}
+    };
+    const classes = [];
+    if (config.base) {
+      classes.push(config.base);
+    }
+    if (config.variants) {
+      for (const [variantKey, variantValues] of Object.entries(config.variants)) {
+        const propValue = mergedProps[variantKey];
+        if (propValue !== void 0 && propValue !== null) {
+          const stringVal = String(propValue);
+          if (variantValues[stringVal]) {
+            classes.push(variantValues[stringVal]);
+          }
+        }
+      }
+    }
+    if (config.compoundVariants) {
+      for (const cv of config.compoundVariants) {
+        const { class: cvClass, className: cvClassName, ...cvConditions } = cv;
+        const matches = Object.entries(cvConditions).every(([key, val]) => {
+          return String(mergedProps[key]) === String(val);
+        });
+        if (matches) {
+          if (cvClass) classes.push(cvClass);
+          if (cvClassName) classes.push(cvClassName);
+        }
+      }
+    }
+    if (props?.class) {
+      classes.push(props.class);
+    }
+    if (props?.className) {
+      classes.push(props.className);
+    }
+    return cn(...classes);
+  };
+}
+function createStyleContext() {
+  const Context = React.createContext({});
+  const useStyleContext2 = () => React.useContext(Context);
+  const withStyleContext2 = (Component, _scope = "GLOBAL") => {
+    const ForwardedComponent = React.forwardRef((props, ref) => {
+      return React.createElement(
+        Context.Provider,
+        { value: props },
+        React.createElement(Component, { ...props, ref })
+      );
+    });
+    ForwardedComponent.displayName = `withStyleContext(${Component.displayName || Component.name || "Component"})`;
+    return ForwardedComponent;
+  };
+  return {
+    Context,
+    Provider: Context.Provider,
+    useStyleContext: useStyleContext2,
+    withStyleContext: withStyleContext2
+  };
+}
+const defaultStyleContext = createStyleContext();
+const useStyleContext = defaultStyleContext.useStyleContext;
+const withStyleContext = defaultStyleContext.withStyleContext;
+
+export { createStyleContext, nativeThemes, nativeTokens, tva, useStyleContext, vars, withStyleContext };

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@timmbr/native-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "Unbundled Gluestack UI v2 primitives with shared Timmbr design tokens for React Native and Web",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/native/index.tsx",
+  "exports": {
+    ".": {
+      "react-native": "./src/native/index.tsx",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./native": "./src/native/index.tsx",
+    "./theme": {
+      "types": "./dist/theme/config.d.ts",
+      "import": "./dist/theme/config.js",
+      "default": "./dist/theme/config.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src/native"
+  ],
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "@timmbr/icons": "1.7.0",
+    "@timmbr/theme": "1.3.0",
+    "@timmbr/utils": "1.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@storybook/react": "^10.6.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.5",
+    "@timmbr/tsconfig": "1.0.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc --project tsconfig.build.json",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rimraf dist"
+  }
 }