create components package

Author: ahmedrezk-maker

.gitignore

@@ -4,6 +4,8 @@ apps/*/build
 apps/*/dist
 packages/*/build
 packages/*/dist
+components/*/build
+components/*/dist
 
 # Turborepo
 .turbo

components/input/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@method-inc/components/input",
+  "version": "1.1.1",
+  "description": "Method input",
+  "license": "MIT",
+  "author": "Method",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/method-inc/rnr-method.git"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "bugs": {
+    "url": "https://github.com/method-inc/rnr-method/issues"
+  },
+  "homepage": "https://github.com/method-inc/rnr-method#readme",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./dist/input": {
+      "import": "./dist/input.mjs",
+      "require": "./dist/input.js",
+      "types": "./dist/input.d.ts",
+      "default": "./dist/input.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "pub:beta": "pnpm publish --no-git-checks --access public --tag beta",
+    "pub:next": "pnpm publish --no-git-checks --access public --tag next",
+    "pub:release": "pnpm publish --access public"
+  },
+  "dependencies": {
+    "@radix-ui/react-label": "^2.1.0",
+    "@method-inc/slot": "workspace:*",
+    "@method-inc/types": "workspace:*",
+    "@method-inc/utils": "workspace:*",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.279.0",
+    "nativewind": "^4.1.23"
+  },
+  "devDependencies": {
+    "@tsconfig/react-native": "^1.0.1",
+    "@types/react": "~18.3.12",
+    "@types/react-native-web": "^0.19.0",
+    "autoprefixer": "10.4.15",
+    "postcss": "8.4.30",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "tailwindcss": "3.3.3",
+    "tsup": "^8.1.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-web": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-web": {
+      "optional": true
+    }
+  }
+}

components/input/src/ nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

components/input/src/index.ts

@@ -0,0 +1,2 @@
+export * from './input';
+export * from './types';

components/input/src/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TextInput, type TextInputProps } from 'react-native';
+import { cn } from '@method-inc/utils';
+
+const Input = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
+  ({ className, placeholderClassName, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          'web:flex h-12 native:h-14 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          props.editable === false && 'opacity-50 web:cursor-not-allowed',
+          className
+        )}
+        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export { Input };

components/input/src/types.ts

@@ -0,0 +1,27 @@
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  TextRef,
+} from '@method-inc/types';
+import type { ViewStyle } from 'react-native';
+
+type RootProps = Omit<SlottablePressableProps, 'children' | 'hitSlop' | 'style'> & {
+  children: React.ReactNode;
+  style?: ViewStyle;
+};
+
+type ExampleComponentProps = SlottableTextProps & {
+  /**
+   * Equivalent to `id` so that the same value can be passed as `aria-labelledby` to the input element.
+   */
+  nativeID?: string;
+  /**
+   * WEB ONLY
+   */
+  htmlFor?: string;
+};
+
+type RootRef = PressableRef;
+
+export type { RootProps, RootRef, ExampleComponentProps, TextRef };

components/input/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "jsxImportSource": "nativewind",
+  "jsx": "preserve",
+  "include": [
+    "./src/**/*",
+    "nativewind-env.d.ts"
+  ],
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "es2019",
+      "es2020.bigint",
+      "es2020.date",
+      "es2020.number",
+      "es2020.promise",
+      "es2020.string",
+      "es2020.symbol.wellknown",
+      "es2021.promise",
+      "es2021.string",
+      "es2021.weakref",
+      "es2022.array",
+      "es2022.object",
+      "es2022.string"
+    ],
+    "types": [
+      "react-native-web"
+    ],
+    "paths": {
+      "react-native": [
+        "react-native-web"
+      ]
+    }
+  },
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules"
+  ]
+}

components/input/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig, Options } from 'tsup';
+
+export default defineConfig((options: Options) => ({
+  entry: ['src/index.ts', 'src/input.tsx'],
+  banner: {
+    js: "'use client'",
+  },
+  clean: true,
+  format: ['cjs', 'esm'],
+  external: ['react', './input'],
+  dts: true,
+  ...options,
+  esbuildOptions(options) {
+    options.jsx = 'preserve';
+  },
+}));

package.json

@@ -4,12 +4,13 @@
   "scripts": {
     "dev": "turbo dev --concurrency=34",
     "dev:primitives": "turbo dev --filter=./packages/* --concurrency=34",
+    "dev:components": "turbo dev --filter=./components/* --concurrency=34",
     "dev:expo-nativewind": "turbo dev --filter=./apps/expo-nativewind",
     "dev:nextjs-nativewind": "turbo dev --filter=./apps/nextjs-nativewind",
     "dev:docs": "turbo dev --filter=./apps/docs",
     "lint": "turbo lint",
     "test": "turbo test",
-    "build": "turbo build --filter=./packages/*",
+    "build": "turbo build --filter=./packages/* && turbo build --filter=./components/*",
     "build:docs": "turbo build --filter=./apps/docs",
     "build:expo-nativewind": "turbo build --filter=\"...{./apps/expo-nativewind}\"",
     "publish-all:primitives:next": "turbo pub:next --filter=./packages/* --concurrency=34",