@alanas/ui 0.0.1

package/README.md

@@ -0,0 +1,62 @@
+# @alanas/ui
+
+React UI components built with **TypeScript** and **Tailwind CSS v4** utility classes. Designed for use in Next.js, Vite, or any React app that uses Tailwind v4.
+
+## Install
+
+```bash
+npm install @alanas/ui
+```
+
+Peer dependencies (you must have these in your app):
+
+- `react` ^18 or ^19
+- `react-dom` ^18 or ^19
+- `tailwindcss` ^4
+
+## Tailwind v4 setup (required)
+
+This package does not bundle Tailwind. Your app must use **Tailwind CSS v4** and tell it to scan this package so the component classes are included.
+
+In your main CSS file (e.g. `globals.css` or `app.css`), add:
+
+```css
+@import "tailwindcss";
+
+/* So Tailwind includes this package's classes */
+@source "../node_modules/@alanas/ui/dist";
+```
+
+Adjust the `@source` path so it points to `node_modules/@alanas/ui/dist` relative to that CSS file (e.g. from `src/app/` you might use `../../node_modules/@alanas/ui/dist`).
+
+## Usage
+
+```tsx
+import { Button, Card, CardTitle, CardDescription } from "@alanas/ui";
+
+export default function Page() {
+  return (
+    <>
+      <Button variant="primary" size="md">Click me</Button>
+      <Card>
+        <CardTitle>Title</CardTitle>
+        <CardDescription>Description text.</CardDescription>
+      </Card>
+    </>
+  );
+}
+```
+
+### Button
+
+- **variant**: `"primary"` | `"secondary"` | `"outline"`
+- **size**: `"sm"` | `"md"` | `"lg"`
+- All native `<button>` props are supported.
+
+### Card
+
+- **Card**, **CardTitle**, **CardDescription** – use as shown above. All accept standard HTML props and `className`.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline";
+    size?: "sm" | "md" | "lg";
+    children: React.ReactNode;
+}
+declare function Button({ variant, size, className, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare function Card({ className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+
+export { Button, Card, CardDescription, CardTitle };

package/dist/index.js

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/Button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) {
+  const base = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
+  const variants = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm",
+    secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200 focus:ring-slate-400",
+    outline: "border-2 border-slate-300 bg-transparent hover:bg-slate-50 focus:ring-slate-400"
+  };
+  const sizes = {
+    sm: "px-3 py-1.5 text-sm",
+    md: "px-4 py-2 text-base",
+    lg: "px-6 py-3 text-lg"
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `${base} ${variants[variant]} ${sizes[size]} ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+__name(Button, "Button");
+
+// src/Card.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Card({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: `rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+__name(Card, "Card");
+function CardTitle({
+  className = "",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "h3",
+    {
+      className: `text-lg font-semibold text-slate-900 ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+__name(CardTitle, "CardTitle");
+function CardDescription({
+  className = "",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2("p", { className: `mt-1 text-sm text-slate-500 ${className}`, ...props, children });
+}
+__name(CardDescription, "CardDescription");
+export {
+  Button,
+  Card,
+  CardDescription,
+  CardTitle
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button.tsx","../src/Card.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"primary\" | \"secondary\" | \"outline\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  children: React.ReactNode;\n}\n\nexport function Button({\n  variant = \"primary\",\n  size = \"md\",\n  className = \"\",\n  children,\n  ...props\n}: ButtonProps) {\n  const base =\n    \"inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\";\n  const variants = {\n    primary:\n      \"bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm\",\n    secondary:\n      \"bg-slate-100 text-slate-900 hover:bg-slate-200 focus:ring-slate-400\",\n    outline:\n      \"border-2 border-slate-300 bg-transparent hover:bg-slate-50 focus:ring-slate-400\",\n  };\n  const sizes = {\n    sm: \"px-3 py-1.5 text-sm\",\n    md: \"px-4 py-2 text-base\",\n    lg: \"px-6 py-3 text-lg\",\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={`${base} ${variants[variant]} ${sizes[size]} ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n","import type { HTMLAttributes } from \"react\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport function Card({ className = \"\", children, ...props }: CardProps) {\n  return (\n    <div\n      className={`rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition-shadow hover:shadow-md ${className}`}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function CardTitle({\n  className = \"\",\n  children,\n  ...props\n}: HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={`text-lg font-semibold text-slate-900 ${className}`}\n      {...props}\n    >\n      {children}\n    </h3>\n  );\n}\n\nexport function CardDescription({\n  className = \"\",\n  children,\n  ...props\n}: HTMLAttributes<HTMLParagraphElement>) {\n  return (\n    <p className={`mt-1 text-sm text-slate-500 ${className}`} {...props}>\n      {children}\n    </p>\n  );\n}\n"],"mappings":";;;;AAgCI;AAxBG,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,OACJ;AACF,QAAM,WAAW;AAAA,IACf,SACE;AAAA,IACF,WACE;AAAA,IACF,SACE;AAAA,EACJ;AACA,QAAM,QAAQ;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,IAAI,IAAI,SAAS,OAAO,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAhCgB;;;ACAZ,gBAAAA,YAAA;AAFG,SAAS,KAAK,EAAE,YAAY,IAAI,UAAU,GAAG,MAAM,GAAc;AACtE,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,+FAA+F,SAAS;AAAA,MAClH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AATgB;AAWT,SAAS,UAAU;AAAA,EACxB,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,wCAAwC,SAAS;AAAA,MAC3D,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAbgB;AAeT,SAAS,gBAAgB;AAAA,EAC9B,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAyC;AACvC,SACE,gBAAAA,KAAC,OAAE,WAAW,+BAA+B,SAAS,IAAK,GAAG,OAC3D,UACH;AAEJ;AAVgB;","names":["jsx"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@alanas/ui",
+  "version": "0.0.1",
+  "description": "React UI components with TypeScript and Tailwind CSS v4",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "tailwind",
+    "tailwindcss",
+    "ui",
+    "typescript"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alanas/ui.git"
+  }
+}