@glyph-ui/textarea 0.1.0-alpha.2

package/README.md

@@ -0,0 +1,22 @@
+# @glyph-ui/textarea
+
+Glyph UI's **GTextarea** component.
+
+```bash
+npm install @glyph-ui/textarea
+```
+
+Installing runs a postinstall step that copies these files into your own project (not into a runtime dependency):
+
+- `src/components/glyph/GTextarea.tsx`
+- `src/lib/utils.ts`
+
+You'll also need: `clsx`, `tailwind-merge`.
+
+Once the files land, **this package is done its job** — feel free to run:
+
+```bash
+npm uninstall @glyph-ui/textarea
+```
+
+Your project keeps the copied source either way; nothing at runtime ever imports from this package.

package/files/src/components/glyph/GTextarea.tsx

@@ -0,0 +1,45 @@
+import { TextareaHTMLAttributes, forwardRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+}
+
+export const GTextarea = forwardRef<HTMLTextAreaElement, Props>(
+  ({ className, label, onFocus, onBlur, ...rest }, ref) => {
+    const [focused, setFocused] = useState(false);
+    return (
+      <label className="block w-full">
+        {label && (
+          <span className="label-mono text-muted block mb-2">{label}</span>
+        )}
+        <div
+          className={cn(
+            "relative rounded-[8px] border bg-surface transition-all duration-200",
+            focused
+              ? "border-signal [box-shadow:0_0_18px_hsl(var(--signal-glow)/var(--glow-soft)),inset_0_0_0_1px_hsl(var(--signal)/0.3)]"
+              : "border-[hsl(var(--border-subtle))]"
+          )}
+        >
+          <textarea
+            ref={ref}
+            onFocus={(e) => {
+              setFocused(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              setFocused(false);
+              onBlur?.(e);
+            }}
+            className={cn(
+              "w-full bg-transparent px-3.5 py-2.5 min-h-[88px] text-sm text-foreground placeholder:text-muted/70 outline-none font-mono resize-y",
+              className
+            )}
+            {...rest}
+          />
+        </div>
+      </label>
+    );
+  }
+);
+GTextarea.displayName = "GTextarea";

package/files/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/manifest.json

@@ -0,0 +1,11 @@
+{
+  "component": "GTextarea",
+  "files": [
+    "src/components/glyph/GTextarea.tsx",
+    "src/lib/utils.ts"
+  ],
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ]
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@glyph-ui/textarea",
+  "version": "0.1.0-alpha.2",
+  "description": "Glyph UI — GTextarea. Installing this copies its source into your project; it is not a runtime dependency and is safe to remove once copied.",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "tag": "alpha",
+    "access": "public"
+  },
+  "scripts": {
+    "postinstall": "node scripts/postinstall.mjs",
+    "prepublishOnly": "node scripts/check-alpha-version.mjs"
+  },
+  "files": [
+    "files",
+    "manifest.json",
+    "scripts",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "clsx": "*",
+    "tailwind-merge": "*"
+  },
+  "peerDependenciesMeta": {
+    "clsx": {
+      "optional": true
+    },
+    "tailwind-merge": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "component",
+    "gtextarea"
+  ]
+}

package/scripts/check-alpha-version.mjs

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+/**
+ * Runs as "prepublishOnly" — a non-zero exit here aborts `npm publish`
+ * before anything reaches the registry. Refuses to publish unless the
+ * version is a proper alpha prerelease and publishConfig.tag is "alpha",
+ * so a stable/"latest" release can't happen by accident during the alpha
+ * phase. See the package's README for how to graduate out of alpha
+ * deliberately.
+ */
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkg = JSON.parse(readFileSync(join(__dirname, "..", "package.json"), "utf8"));
+
+const ALPHA_VERSION = /^\d+\.\d+\.\d+-alpha\.\d+$/;
+
+if (!ALPHA_VERSION.test(pkg.version)) {
+  console.error(
+    `\nRefusing to publish: version "${pkg.version}" is not an alpha prerelease.\n` +
+      `Expected x.y.z-alpha.N, e.g. "0.1.0-alpha.2".\n` +
+      `Bump with: npm version prerelease --preid=alpha\n`
+  );
+  process.exit(1);
+}
+
+if (pkg.publishConfig?.tag !== "alpha") {
+  console.error(
+    `\nRefusing to publish: publishConfig.tag is "${pkg.publishConfig?.tag ?? "(unset)"}", expected "alpha".\n`
+  );
+  process.exit(1);
+}
+
+console.log(`\u2713 ${pkg.name}@${pkg.version} is a valid alpha prerelease.`);

package/scripts/postinstall.mjs

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+/**
+ * Runs automatically after `npm install` for this package. Copies this
+ * component's real source file(s) out of node_modules and into the
+ * consumer's own project, at the same relative path they'd have if they'd
+ * copy-pasted it by hand.
+ *
+ * npm sets INIT_CWD to the directory the user actually ran `npm install`
+ * from (their project root) — not this package's folder inside
+ * node_modules, which is what `process.cwd()` would give during a
+ * postinstall hook. That's the whole trick that makes this behave like
+ * shadcn's copy-paste model instead of a normal installed dependency.
+ */
+import { cpSync, mkdirSync, existsSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkgRoot = join(__dirname, "..");
+const pkg = JSON.parse(readFileSync(join(pkgRoot, "package.json"), "utf8"));
+const manifest = JSON.parse(readFileSync(join(pkgRoot, "manifest.json"), "utf8"));
+
+const targetRoot = process.env.INIT_CWD || process.cwd();
+
+// Guard against this ever running inside the glyph-ui monorepo itself
+// (e.g. `npm install` at the repo root) and overwriting the source of
+// truth these packages were generated from.
+if (targetRoot.split(/[/\\]/).includes("packages")) {
+  process.exit(0);
+}
+
+console.log(`\nglyph-ui: ${pkg.name} \u2014 copying source into your project\n`);
+
+let copied = 0;
+for (const relPath of manifest.files) {
+  const src = join(pkgRoot, "files", relPath);
+  const dest = join(targetRoot, relPath);
+  if (!existsSync(src)) continue;
+  mkdirSync(dirname(dest), { recursive: true });
+  cpSync(src, dest);
+  console.log(`  + ${relPath}`);
+  copied++;
+}
+
+console.log(`\n${copied} file(s) copied.`);
+if (manifest.dependencies.length) {
+  console.log(`Make sure these are installed: ${manifest.dependencies.join(", ")}`);
+}
+console.log(`This package's job is done. It is safe to remove:`);
+console.log(`  npm uninstall ${pkg.name}\n`);