@t7blocks/ui 0.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,22 @@
+
+> @t7blocks/ui@0.0.1 build C:\Users\singh\Desktop\Dev\T7blocks\packages\ui
+> tsup
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: C:\Users\singh\Desktop\Dev\T7blocks\packages\ui\tsup.config.ts
+CLI Target: es2020
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+ESM dist\index.mjs     1.08 KB
+ESM dist\index.mjs.map 2.13 KB
+ESM ⚡️ Build success in 54ms
+CJS dist\index.js     2.17 KB
+CJS dist\index.js.map 2.36 KB
+CJS ⚡️ Build success in 55ms
+DTS Build start
+DTS ⚡️ Build success in 1666ms
+DTS dist\index.d.ts  326.00 B
+DTS dist\index.d.mts 326.00 B

package/RULES.md

@@ -0,0 +1,104 @@
+# RULES.md — packages/ui
+
+## What this package is
+
+The **published npm package** `@t7blocks`. This is what users install.
+It contains only free component source code. It is built with tsup and published to npm.
+
+---
+
+## Core Constraints
+
+- Only free components live here. Premium components never enter this repo.
+- Every export must be tree-shakeable — named exports only, no default exports from `index.ts`.
+- This package has no runtime dependencies. Only peer dependencies.
+- Peer dependencies: `react ^18`, and whatever animation library the component uses (e.g. `framer-motion`, `gsap`, `lenis`). Never bundle these.
+- Never import from `apps/` — this package is standalone.
+
+---
+
+## Folder Structure
+
+```
+src/
+├── index.ts                        ← barrel export, only file to edit when adding a component
+├── components/
+│   └── [type]/                     ← matches the category type in registry
+│       └── [component-name]/
+│           ├── [ComponentName].tsx ← component source
+│           ├── [ComponentName].css ← scoped styles if needed (optional)
+│           └── index.ts            ← re-exports the component
+└── types/
+    └── index.ts                    ← shared prop types
+```
+
+Example for `button-1` in category `button`:
+```
+src/components/button/button-1/Button1.tsx
+src/components/button/button-1/index.ts
+```
+
+---
+
+## Adding a New Component — Exact Steps
+
+1. Create the folder: `src/components/[type]/[component-name]/`
+2. Write the component in `[ComponentName].tsx` — named export, typed props, no `any`
+3. Create `index.ts` in that folder:
+   ```ts
+   export { ComponentName } from './ComponentName';
+   ```
+4. Add the export to `src/index.ts`:
+   ```ts
+   export { ComponentName } from './components/[type]/[component-name]';
+   ```
+5. If the component needs a peer dep, add it to `peerDependencies` in `package.json` — do not add it to `dependencies`
+6. Rebuild: `pnpm turbo build --filter=@t7blocks/ui`
+7. Confirm `dist/` updates with no errors
+
+---
+
+## Component Writing Rules
+
+- Props interface must be explicitly typed — no implicit prop types.
+- Always provide sensible defaults for every optional prop.
+- Component file name: PascalCase matching the export name (`Button1.tsx`)
+- Folder name: kebab-case matching the registry `name` (`button-1/`)
+- No hardcoded colours — use CSS variables or accept colour as a prop.
+- No side effects at module level (no `window` access outside `useEffect`).
+- Animation libraries must be listed as peer deps and imported normally — never bundled.
+- If a component needs a CSS file, scope all class names with a `t7-` prefix to avoid collisions with user styles.
+- Components must work without any Tailwind — the user may not have it.
+
+---
+
+## tsconfig Rules
+
+- `tsconfig.json` extends `@t7blocks/typescript-config/base.json` — NOT `nextjs.json`
+- Add `"jsx": "react-jsx"` manually in `compilerOptions`
+- `"incremental"` must never appear in this tsconfig — it breaks tsup DTS build
+
+---
+
+## package.json Rules
+
+- In the `exports` field, `"types"` must come BEFORE `"import"` and `"require"`:
+  ```json
+  ".": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.js"
+  }
+  ```
+- Bump the version in `package.json` before every `pnpm publish`
+- Use semantic versioning: patch (0.0.x) for fixes, minor (0.x.0) for new components, major (x.0.0) for breaking changes
+
+---
+
+## What Never Goes in This Package
+
+- Premium component source code
+- Demo UI (prop control cards, canvases)
+- Documentation content (code block strings, prop tables)
+- Any app-level code from `apps/`
+- `devDependencies` listed as `dependencies` (keep the bundle clean)

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Button1Props {
+    label?: string;
+    variant?: "primary" | "outline";
+    size?: "sm" | "md" | "lg";
+    onClick?: () => void;
+}
+declare function Button1({ label, variant, size, onClick, }: Button1Props): react_jsx_runtime.JSX.Element;
+
+export { Button1 };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Button1Props {
+    label?: string;
+    variant?: "primary" | "outline";
+    size?: "sm" | "md" | "lg";
+    onClick?: () => void;
+}
+declare function Button1({ label, variant, size, onClick, }: Button1Props): react_jsx_runtime.JSX.Element;
+
+export { Button1 };

package/dist/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button1: () => Button1
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/button/button-1/Button1.tsx
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button1({
+  label = "Click me",
+  variant = "primary",
+  size = "md",
+  onClick
+}) {
+  const ref = (0, import_react.useRef)(null);
+  const sizeMap = {
+    sm: { padding: "8px 20px", fontSize: "13px" },
+    md: { padding: "12px 28px", fontSize: "15px" },
+    lg: { padding: "16px 36px", fontSize: "17px" }
+  };
+  const isPrimary = variant === "primary";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.button,
+    {
+      ref,
+      onClick,
+      whileHover: { scale: 1.04 },
+      whileTap: { scale: 0.97 },
+      transition: { type: "spring", stiffness: 400, damping: 20 },
+      style: {
+        ...sizeMap[size],
+        background: isPrimary ? "#000" : "transparent",
+        color: isPrimary ? "#fff" : "#000",
+        border: "1.5px solid #000",
+        borderRadius: "8px",
+        cursor: "pointer",
+        fontWeight: 500,
+        letterSpacing: "-0.01em"
+      },
+      children: label
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button1
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/button/button-1/Button1.tsx"],"sourcesContent":["// free component exports go here\r\n// export { MagneticButton } from './components/button/MagneticButton';\r\n\r\nexport { Button1 } from './components/button/button-1';","\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\nimport { useRef } from \"react\";\r\n\r\ninterface Button1Props {\r\n  label?: string;\r\n  variant?: \"primary\" | \"outline\";\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  onClick?: () => void;\r\n}\r\n\r\nexport function Button1({\r\n  label = \"Click me\",\r\n  variant = \"primary\",\r\n  size = \"md\",\r\n  onClick,\r\n}: Button1Props) {\r\n  const ref = useRef<HTMLButtonElement>(null);\r\n\r\n  const sizeMap = {\r\n    sm: { padding: \"8px 20px\", fontSize: \"13px\" },\r\n    md: { padding: \"12px 28px\", fontSize: \"15px\" },\r\n    lg: { padding: \"16px 36px\", fontSize: \"17px\" },\r\n  };\r\n\r\n  const isPrimary = variant === \"primary\";\r\n\r\n  return (\r\n    <motion.button\r\n      ref={ref}\r\n      onClick={onClick}\r\n      whileHover={{ scale: 1.04 }}\r\n      whileTap={{ scale: 0.97 }}\r\n      transition={{ type: \"spring\", stiffness: 400, damping: 20 }}\r\n      style={{\r\n        ...sizeMap[size],\r\n        background: isPrimary ? \"#000\" : \"transparent\",\r\n        color: isPrimary ? \"#fff\" : \"#000\",\r\n        border: \"1.5px solid #000\",\r\n        borderRadius: \"8px\",\r\n        cursor: \"pointer\",\r\n        fontWeight: 500,\r\n        letterSpacing: \"-0.01em\",\r\n      }}\r\n    >\r\n      {label}\r\n    </motion.button>\r\n  );\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,2BAAuB;AACvB,mBAAuB;AA0BnB;AAjBG,SAAS,QAAQ;AAAA,EACtB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AACF,GAAiB;AACf,QAAM,UAAM,qBAA0B,IAAI;AAE1C,QAAM,UAAU;AAAA,IACd,IAAI,EAAE,SAAS,YAAY,UAAU,OAAO;AAAA,IAC5C,IAAI,EAAE,SAAS,aAAa,UAAU,OAAO;AAAA,IAC7C,IAAI,EAAE,SAAS,aAAa,UAAU,OAAO;AAAA,EAC/C;AAEA,QAAM,YAAY,YAAY;AAE9B,SACE;AAAA,IAAC,4BAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAY,EAAE,OAAO,KAAK;AAAA,MAC1B,UAAU,EAAE,OAAO,KAAK;AAAA,MACxB,YAAY,EAAE,MAAM,UAAU,WAAW,KAAK,SAAS,GAAG;AAAA,MAC1D,OAAO;AAAA,QACL,GAAG,QAAQ,IAAI;AAAA,QACf,YAAY,YAAY,SAAS;AAAA,QACjC,OAAO,YAAY,SAAS;AAAA,QAC5B,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,eAAe;AAAA,MACjB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,43 @@
+// src/components/button/button-1/Button1.tsx
+import { motion } from "framer-motion";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function Button1({
+  label = "Click me",
+  variant = "primary",
+  size = "md",
+  onClick
+}) {
+  const ref = useRef(null);
+  const sizeMap = {
+    sm: { padding: "8px 20px", fontSize: "13px" },
+    md: { padding: "12px 28px", fontSize: "15px" },
+    lg: { padding: "16px 36px", fontSize: "17px" }
+  };
+  const isPrimary = variant === "primary";
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      ref,
+      onClick,
+      whileHover: { scale: 1.04 },
+      whileTap: { scale: 0.97 },
+      transition: { type: "spring", stiffness: 400, damping: 20 },
+      style: {
+        ...sizeMap[size],
+        background: isPrimary ? "#000" : "transparent",
+        color: isPrimary ? "#fff" : "#000",
+        border: "1.5px solid #000",
+        borderRadius: "8px",
+        cursor: "pointer",
+        fontWeight: 500,
+        letterSpacing: "-0.01em"
+      },
+      children: label
+    }
+  );
+}
+export {
+  Button1
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/button/button-1/Button1.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\nimport { useRef } from \"react\";\r\n\r\ninterface Button1Props {\r\n  label?: string;\r\n  variant?: \"primary\" | \"outline\";\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  onClick?: () => void;\r\n}\r\n\r\nexport function Button1({\r\n  label = \"Click me\",\r\n  variant = \"primary\",\r\n  size = \"md\",\r\n  onClick,\r\n}: Button1Props) {\r\n  const ref = useRef<HTMLButtonElement>(null);\r\n\r\n  const sizeMap = {\r\n    sm: { padding: \"8px 20px\", fontSize: \"13px\" },\r\n    md: { padding: \"12px 28px\", fontSize: \"15px\" },\r\n    lg: { padding: \"16px 36px\", fontSize: \"17px\" },\r\n  };\r\n\r\n  const isPrimary = variant === \"primary\";\r\n\r\n  return (\r\n    <motion.button\r\n      ref={ref}\r\n      onClick={onClick}\r\n      whileHover={{ scale: 1.04 }}\r\n      whileTap={{ scale: 0.97 }}\r\n      transition={{ type: \"spring\", stiffness: 400, damping: 20 }}\r\n      style={{\r\n        ...sizeMap[size],\r\n        background: isPrimary ? \"#000\" : \"transparent\",\r\n        color: isPrimary ? \"#fff\" : \"#000\",\r\n        border: \"1.5px solid #000\",\r\n        borderRadius: \"8px\",\r\n        cursor: \"pointer\",\r\n        fontWeight: 500,\r\n        letterSpacing: \"-0.01em\",\r\n      }}\r\n    >\r\n      {label}\r\n    </motion.button>\r\n  );\r\n}"],"mappings":";AAEA,SAAS,cAAc;AACvB,SAAS,cAAc;AA0BnB;AAjBG,SAAS,QAAQ;AAAA,EACtB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AACF,GAAiB;AACf,QAAM,MAAM,OAA0B,IAAI;AAE1C,QAAM,UAAU;AAAA,IACd,IAAI,EAAE,SAAS,YAAY,UAAU,OAAO;AAAA,IAC5C,IAAI,EAAE,SAAS,aAAa,UAAU,OAAO;AAAA,IAC7C,IAAI,EAAE,SAAS,aAAa,UAAU,OAAO;AAAA,EAC/C;AAEA,QAAM,YAAY,YAAY;AAE9B,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA;AAAA,MACA,YAAY,EAAE,OAAO,KAAK;AAAA,MAC1B,UAAU,EAAE,OAAO,KAAK;AAAA,MACxB,YAAY,EAAE,MAAM,UAAU,WAAW,KAAK,SAAS,GAAG;AAAA,MAC1D,OAAO;AAAA,QACL,GAAG,QAAQ,IAAI;AAAA,QACf,YAAY,YAAY,SAAS;AAAA,QACjC,OAAO,YAAY,SAAS;AAAA,QAC5B,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,eAAe;AAAA,MACjB;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@t7blocks/ui",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "framer-motion": "^11.0.0",
+    "react": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "framer-motion": "^12.38.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@t7blocks/typescript-config": "0.0.1"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}

package/src/components/button/button-1/Button1.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useRef } from "react";
+
+interface Button1Props {
+  label?: string;
+  variant?: "primary" | "outline";
+  size?: "sm" | "md" | "lg";
+  onClick?: () => void;
+}
+
+export function Button1({
+  label = "Click me",
+  variant = "primary",
+  size = "md",
+  onClick,
+}: Button1Props) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const sizeMap = {
+    sm: { padding: "8px 20px", fontSize: "13px" },
+    md: { padding: "12px 28px", fontSize: "15px" },
+    lg: { padding: "16px 36px", fontSize: "17px" },
+  };
+
+  const isPrimary = variant === "primary";
+
+  return (
+    <motion.button
+      ref={ref}
+      onClick={onClick}
+      whileHover={{ scale: 1.04 }}
+      whileTap={{ scale: 0.97 }}
+      transition={{ type: "spring", stiffness: 400, damping: 20 }}
+      style={{
+        ...sizeMap[size],
+        background: isPrimary ? "#000" : "transparent",
+        color: isPrimary ? "#fff" : "#000",
+        border: "1.5px solid #000",
+        borderRadius: "8px",
+        cursor: "pointer",
+        fontWeight: 500,
+        letterSpacing: "-0.01em",
+      }}
+    >
+      {label}
+    </motion.button>
+  );
+}

package/src/components/button/button-1/index.ts

@@ -0,0 +1 @@
+export { Button1 } from './Button1';

package/src/index.ts

@@ -0,0 +1,4 @@
+// free component exports go here
+// export { MagneticButton } from './components/button/MagneticButton';
+
+export { Button1 } from './components/button/button-1';

package/src/types/index.ts

@@ -0,0 +1 @@
+// shared prop types go here

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@t7blocks/typescript-config/base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  clean: true,
+  external: ['react', 'framer-motion'],
+  sourcemap: true,
+});