@t7blocks/ui 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,78 @@
+# @t7blocks/ui
+
+Premium-grade UI components for React. The kind you see on high-end landing pages and Framer templates — built with GSAP, Framer Motion, and custom animation logic. Ship faster without starting from scratch.
+
+[![npm version](https://img.shields.io/npm/v/@t7blocks/ui?style=flat-square)](https://www.npmjs.com/package/@t7blocks/ui)
+[![npm downloads](https://img.shields.io/npm/dm/@t7blocks/ui?style=flat-square)](https://www.npmjs.com/package/@t7blocks/ui)
+[![license](https://img.shields.io/badge/license-Custom-blue?style=flat-square)](https://github.com/Ethan4582/t7block-free/blob/master/LICENSE)
+
+---
+
+## Installation
+
+```bash
+# npm
+npm install @t7blocks/ui
+
+# yarn
+yarn add @t7blocks/ui
+
+# pnpm
+pnpm add @t7blocks/ui
+```
+
+Some components require peer dependencies. Each component page on [t7blocks.com](https://t7blocks.com) lists exactly what to install.
+
+---
+
+## Usage
+
+```tsx
+import { Button1 } from '@t7blocks/ui'
+
+export default function App() {
+  return <Button1 label="Get started" variant="primary" />
+}
+```
+
+---
+
+## Components
+
+Browse all components with live demos, props tables, and install instructions at **[t7blocks.xyz](https://t7blocks.xyz)**.
+
+More components are added regularly. Star the repo to stay updated.
+
+---
+
+## Prefer to own the source?
+
+Use the CLI to copy any component directly into your project as an editable file:
+
+```bash
+npx @t7blocks/cli add button-1
+```
+
+The file is written to `./components/ui/` in your project. You own it and can modify it freely.
+
+---
+
+## Requirements
+
+- React 18+
+- Node.js 18+
+- TypeScript recommended
+
+---
+
+## Premium Components
+
+Hero sections, background effects, and advanced blocks are available to Pro members at **[t7blocks.xyz](https://t7blocks.xyz)**. Premium components include full source access, CLI download, and props documentation.
+
+---
+
+## License
+
+Copyright © 2025 Ashirwad Singh. Free components are available under a custom license that permits personal and commercial use with attribution. Redistribution as a standalone library or template kit is not permitted.
+
+Read the full license → [LICENSE](https://github.com/Ethan4582/t7block-free/blob/master/LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t7blocks/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/.turbo/turbo-build.log

@@ -1,22 +0,0 @@
-
-> @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

@@ -1,104 +0,0 @@
-# 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.js.map

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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/src/components/button/button-1/Button1.tsx

@@ -1,50 +0,0 @@
-"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

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

package/src/index.ts

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

package/src/types/index.ts

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

package/tsconfig.json

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

package/tsup.config.ts

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