@frosted-ui/react-native 0.0.1-canary.91

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@frosted-ui/react-native",
+  "version": "0.0.1-canary.91",
+  "main": "expo-router/entry",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./global.css": "./global.css",
+    "./tailwind-preset": "./tailwind-preset.js"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist",
+    "global.css",
+    "tailwind-preset.js"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "nativewind": "^4.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-screens": ">=3.0.0",
+    "react-native-svg": ">=13.0.0",
+    "lucide-react-native": ">=0.300.0"
+  },
+  "scripts": {
+    "dev": "expo start -c",
+    "android": "expo start -c --android",
+    "ios": "expo start -c --ios",
+    "web": "expo start -c --web",
+    "build": "pnpm clean:dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "clean": "rm -rf .expo node_modules",
+    "clean:dist": "rm -rf dist",
+    "generate:global-css": "node scripts/generate-global-css.js",
+    "release": "turbo-module publish"
+  },
+  "dependencies": {
+    "@frosted-ui/colors": "workspace:*",
+    "@rn-primitives/accordion": "^1.2.0",
+    "@rn-primitives/alert-dialog": "^1.2.0",
+    "@rn-primitives/aspect-ratio": "^1.2.0",
+    "@rn-primitives/avatar": "^1.2.0",
+    "@rn-primitives/checkbox": "^1.2.0",
+    "@rn-primitives/collapsible": "^1.2.0",
+    "@rn-primitives/context-menu": "^1.2.0",
+    "@rn-primitives/dialog": "^1.2.0",
+    "@rn-primitives/dropdown-menu": "^1.2.0",
+    "@rn-primitives/hover-card": "^1.2.0",
+    "@rn-primitives/label": "^1.2.0",
+    "@rn-primitives/menubar": "^1.2.0",
+    "@rn-primitives/popover": "^1.2.0",
+    "@rn-primitives/portal": "~1.3.0",
+    "@rn-primitives/progress": "^1.2.0",
+    "@rn-primitives/radio-group": "^1.2.0",
+    "@rn-primitives/select": "^1.2.0",
+    "@rn-primitives/separator": "^1.2.0",
+    "@rn-primitives/slot": "^1.2.0",
+    "@rn-primitives/switch": "^1.2.0",
+    "@rn-primitives/tabs": "^1.2.0",
+    "@rn-primitives/toggle": "^1.2.0",
+    "@rn-primitives/toggle-group": "^1.2.0",
+    "@rn-primitives/tooltip": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@react-navigation/native": "^7.0.0",
+    "@types/react": "~19.1.10",
+    "expo": "^54.0.26",
+    "expo-linking": "~8.0.9",
+    "expo-router": "~6.0.16",
+    "expo-splash-screen": "~31.0.11",
+    "expo-status-bar": "~3.0.8",
+    "expo-system-ui": "~6.0.8",
+    "lucide-react-native": "^0.545.0",
+    "nativewind": "^4.2.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-css-interop": "^0.2.1",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "15.12.1",
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": "0.5.1",
+    "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
+    "tsc-alias": "^1.8.16",
+    "typescript": "~5.9.2",
+    "@whop-sdk/turbo-module": "^0.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/whopio/frosted-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/whopio/frosted-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/whopio/frosted-ui/issues"
+  }
+}

package/tailwind-preset.js

@@ -0,0 +1,310 @@
+/* eslint-env node */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+/**
+ * Frosted UI Tailwind Preset for React Native / NativeWind
+ *
+ * Usage in your tailwind.config.js:
+ *
+ * const { frostedPreset } = require('@frosted-ui/react-native/tailwind-preset');
+ *
+ * module.exports = {
+ *   content: ['./App.{js,jsx,ts,tsx}', './src/**\/*.{js,jsx,ts,tsx}'],
+ *   presets: [require('nativewind/preset'), frostedPreset],
+ *   // your custom theme extensions...
+ * };
+ */
+
+const { hairlineWidth } = require('nativewind/theme');
+const frostedColors = require('@frosted-ui/colors');
+
+// ============================================================================
+// Semantic color tokens (CSS variable references)
+// ============================================================================
+
+const semanticColorVars = {
+  background: 'var(--color-background)',
+  overlay: 'var(--color-overlay)',
+  'panel-solid': 'var(--color-panel-solid)',
+  'panel-translucent': 'var(--color-panel-translucent)',
+  surface: 'var(--color-surface)',
+  stroke: 'var(--color-stroke)',
+  'gray-2-translucent': 'var(--gray-2-translucent)',
+  'mauve-2-translucent': 'var(--mauve-2-translucent)',
+  'slate-2-translucent': 'var(--slate-2-translucent)',
+  'sage-2-translucent': 'var(--sage-2-translucent)',
+  'olive-2-translucent': 'var(--olive-2-translucent)',
+  'sand-2-translucent': 'var(--sand-2-translucent)',
+};
+
+// ============================================================================
+// Typography scale (CSS variable references)
+// ============================================================================
+
+const typographyScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].reduce(
+  (acc, step) => ({
+    ...acc,
+    [`${step}`]: [
+      `var(--font-size-${step})`,
+      {
+        lineHeight: `var(--line-height-${step})`,
+        letterSpacing: `var(--letter-spacing-${step})`,
+      },
+    ],
+  }),
+  {}
+);
+
+const fontWeightScale = {
+  thin: '100',
+  extralight: '200',
+  light: 'var(--font-weight-light)',
+  normal: 'var(--font-weight-regular)',
+  medium: 'var(--font-weight-medium)',
+  semibold: '600',
+  bold: 'var(--font-weight-bold)',
+  extrabold: '800',
+  black: '900',
+};
+
+const lineHeightScale = {
+  none: '1',
+  tight: '1.25',
+  snug: '1.375',
+  normal: '1.5',
+  relaxed: '1.625',
+  loose: '2',
+};
+
+const letterSpacingScale = {
+  tighter: '-0.05em',
+  tight: '-0.025em',
+  normal: '0',
+  wide: '0.025em',
+  wider: '0.05em',
+  widest: '0.1em',
+};
+
+// ============================================================================
+// Color tokens
+// ============================================================================
+
+const contrastColorNames = [
+  'tomato',
+  'red',
+  'ruby',
+  'crimson',
+  'pink',
+  'plum',
+  'purple',
+  'violet',
+  'iris',
+  'cyan',
+  'teal',
+  'jade',
+  'green',
+  'grass',
+  'brown',
+  'sky',
+  'mint',
+  'yellow',
+  'amber',
+  'gold',
+  'bronze',
+  'gray',
+  'blue',
+  'orange',
+  'indigo',
+  'magenta',
+  'lemon',
+  'lime',
+];
+
+const contrastColorTokens = contrastColorNames.reduce((acc, name) => {
+  acc[`${name}-9-contrast`] = `var(--${name}-9-contrast)`;
+  return acc;
+}, {});
+
+/**
+ * Creates color tokens from @frosted-ui/colors exports
+ */
+const createFrostedColorTokens = (paletteExports) =>
+  Object.entries(paletteExports).reduce((acc, [paletteName, paletteValues]) => {
+    const isObjectPalette =
+      paletteValues && typeof paletteValues === 'object' && !Array.isArray(paletteValues);
+    const isAlphaPalette = paletteName.endsWith('A');
+    const baseName = (isAlphaPalette ? paletteName.slice(0, -1) : paletteName) || '';
+    const normalizedBase = baseName.toLowerCase();
+    const isSupportedName = /^[a-z]+$/.test(normalizedBase) && !paletteName.includes('P3');
+
+    if (!isObjectPalette || !isSupportedName) {
+      return acc;
+    }
+
+    Object.entries(paletteValues).forEach(([shadeKey]) => {
+      const stepMatch = shadeKey.match(/(\d+)$/);
+
+      if (!stepMatch) {
+        return;
+      }
+
+      const variantSuffix = `${isAlphaPalette ? 'a' : ''}${stepMatch[1]}`;
+      const cssVarName = `--${normalizedBase}-${variantSuffix}`;
+      acc[`${normalizedBase}-${variantSuffix}`] = `var(${cssVarName})`;
+    });
+
+    return acc;
+  }, {});
+
+const frostedColorTokens = createFrostedColorTokens(frostedColors);
+
+// Accent color tokens (defaults to blue, overridable via CSS variables)
+const accentColorTokens = {
+  1: 'var(--accent-1)',
+  2: 'var(--accent-2)',
+  3: 'var(--accent-3)',
+  4: 'var(--accent-4)',
+  5: 'var(--accent-5)',
+  6: 'var(--accent-6)',
+  7: 'var(--accent-7)',
+  8: 'var(--accent-8)',
+  9: 'var(--accent-9)',
+  '9-contrast': 'var(--accent-9-contrast)',
+  10: 'var(--accent-10)',
+  11: 'var(--accent-11)',
+  12: 'var(--accent-12)',
+  a1: 'var(--accent-a1)',
+  a2: 'var(--accent-a2)',
+  a3: 'var(--accent-a3)',
+  a4: 'var(--accent-a4)',
+  a5: 'var(--accent-a5)',
+  a6: 'var(--accent-a6)',
+  a7: 'var(--accent-a7)',
+  a8: 'var(--accent-a8)',
+  a9: 'var(--accent-a9)',
+  a10: 'var(--accent-a10)',
+  a11: 'var(--accent-a11)',
+  a12: 'var(--accent-a12)',
+};
+
+// ============================================================================
+// Frosted UI Preset
+// ============================================================================
+
+/** @type {import('tailwindcss').Config} */
+const frostedPreset = {
+  darkMode: 'class',
+  theme: {
+    fontSize: typographyScale,
+    lineHeight: lineHeightScale,
+    letterSpacing: letterSpacingScale,
+    fontWeight: fontWeightScale,
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      inherit: 'inherit',
+      accent: accentColorTokens,
+      ...frostedColorTokens,
+      ...contrastColorTokens,
+      ...semanticColorVars,
+    },
+    extend: {
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  plugins: [require('tailwindcss-animate')],
+};
+
+// ============================================================================
+// Helper to create content paths for frosted-ui components
+// ============================================================================
+
+/**
+ * Returns the content paths needed for Tailwind to scan frosted-ui components.
+ * Add these to your tailwind.config.js content array.
+ *
+ * @example
+ * content: [
+ *   './App.{js,jsx,ts,tsx}',
+ *   ...getFrostedUIContentPaths(),
+ * ],
+ */
+function getFrostedUIContentPaths() {
+  return [
+    './node_modules/@frosted-ui/react-native/dist/**/*.js',
+    // Also include src for development/linking scenarios
+    './node_modules/@frosted-ui/react-native/src/**/*.{ts,tsx}',
+  ];
+}
+
+/**
+ * Utility to merge your Tailwind config with Frosted UI preset.
+ * This is an alternative to using presets if you need more control.
+ *
+ * @param {import('tailwindcss').Config} userConfig - Your Tailwind config
+ * @returns {import('tailwindcss').Config} - Merged config with Frosted UI theme
+ *
+ * @example
+ * const { withFrostedUI } = require('@frosted-ui/react-native/tailwind-preset');
+ *
+ * module.exports = withFrostedUI({
+ *   content: ['./App.{js,jsx,ts,tsx}'],
+ *   theme: {
+ *     extend: {
+ *       // your customizations
+ *     },
+ *   },
+ * });
+ */
+function withFrostedUI(userConfig = {}) {
+  const contentPaths = getFrostedUIContentPaths();
+
+  return {
+    ...userConfig,
+    darkMode: userConfig.darkMode || 'class',
+    content: [...(userConfig.content || []), ...contentPaths],
+    presets: [require('nativewind/preset'), frostedPreset, ...(userConfig.presets || [])],
+    theme: {
+      ...userConfig.theme,
+      extend: {
+        ...frostedPreset.theme.extend,
+        ...(userConfig.theme?.extend || {}),
+      },
+    },
+    future: {
+      ...frostedPreset.future,
+      ...(userConfig.future || {}),
+    },
+    plugins: [...(frostedPreset.plugins || []), ...(userConfig.plugins || [])],
+  };
+}
+
+module.exports = {
+  frostedPreset,
+  getFrostedUIContentPaths,
+  withFrostedUI,
+};