@anti049/lunar-ui-react 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,73 @@
-# Temporary Holding Version
+# React + TypeScript + Vite
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+	globalIgnores(['dist']),
+	{
+		files: ['**/*.{ts,tsx}'],
+		extends: [
+			// Other configs...
+
+			// Remove tseslint.configs.recommended and replace with this
+			tseslint.configs.recommendedTypeChecked,
+			// Alternatively, use this for stricter rules
+			tseslint.configs.strictTypeChecked,
+			// Optionally, add this for stylistic rules
+			tseslint.configs.stylisticTypeChecked
+
+			// Other configs...
+		],
+		languageOptions: {
+			parserOptions: {
+				project: ['./tsconfig.node.json', './tsconfig.app.json'],
+				tsconfigRootDir: import.meta.dirname
+			}
+			// other options...
+		}
+	}
+]);
+```
+
+You can also install [eslint-plugin-react-x](https://npmx.dev/package/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://npmx.dev/package/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';
+
+export default defineConfig([
+	globalIgnores(['dist']),
+	{
+		files: ['**/*.{ts,tsx}'],
+		extends: [
+			// Other configs...
+			// Enable lint rules for React
+			reactX.configs['recommended-typescript'],
+			// Enable lint rules for React DOM
+			reactDom.configs.recommended
+		],
+		languageOptions: {
+			parserOptions: {
+				project: ['./tsconfig.node.json', './tsconfig.app.json'],
+				tsconfigRootDir: import.meta.dirname
+			}
+			// other options...
+		}
+	}
+]);
+```

package/dist/index.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/components/Button.tsx
+var cn = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
+var Button = react.forwardRef(function Button2({ variant = "filled", size = "md", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      className: cn("button", `button-${variant}`, `button-${size}`, className),
+      ...rest
+    }
+  );
+});
+function useRipple() {
+  const ref = react.useRef(null);
+  const onPointerDown = react.useCallback((event) => {
+    const node = ref.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    const circle = document.createElement("span");
+    const diameter = Math.max(rect.width, rect.height);
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - rect.left - diameter / 2}px`;
+    circle.style.top = `${event.clientY - rect.top - diameter / 2}px`;
+    circle.className = "project-ripple";
+    circle.addEventListener("animationend", () => circle.remove());
+    node.append(circle);
+  }, []);
+  return { ref, onPointerDown };
+}
+
+exports.Button = Button;
+exports.cn = cn;
+exports.useRipple = useRipple;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils/cn.ts","../src/lib/components/Button.tsx","../src/lib/hooks/useRipple.ts"],"names":["twMerge","clsx","forwardRef","Button","jsx","useRef","useCallback"],"mappings":";;;;;;;;AAGO,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiCA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC;ACQpE,IAAM,MAAA,GAASC,gBAAA,CAA2C,SAASC,OAAAA,CACzE,EAAE,OAAA,GAAU,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,SAAA,EAAW,GAAG,IAAA,IACjD,GAAA,EACC;AACD,EAAA,uBACCC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,GAAG,QAAA,EAAU,CAAA,OAAA,EAAU,OAAO,CAAA,CAAA,EAAI,CAAA,OAAA,EAAU,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA;AAAA,MACvE,GAAG;AAAA;AAAA,GACL;AAEF,CAAC;ACVM,SAAS,SAAA,GAAY;AAC3B,EAAA,MAAM,GAAA,GAAMC,aAA2B,IAAI,CAAA;AAE3C,EAAA,MAAM,aAAA,GAAgBC,iBAAA,CAAY,CAAC,KAAA,KAAqC;AACvE,IAAA,MAAM,OAAO,GAAA,CAAI,OAAA;AACjB,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,MAAM,IAAA,GAAO,KAAK,qBAAA,EAAsB;AACxC,IAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAG5C,IAAA,MAAM,WAAW,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,KAAA,EAAO,KAAK,MAAM,CAAA;AACjD,IAAA,MAAA,CAAO,MAAM,KAAA,GAAQ,MAAA,CAAO,KAAA,CAAM,MAAA,GAAS,GAAG,QAAQ,CAAA,EAAA,CAAA;AACtD,IAAA,MAAA,CAAO,KAAA,CAAM,OAAO,CAAA,EAAG,KAAA,CAAM,UAAU,IAAA,CAAK,IAAA,GAAO,WAAW,CAAC,CAAA,EAAA,CAAA;AAC/D,IAAA,MAAA,CAAO,KAAA,CAAM,MAAM,CAAA,EAAG,KAAA,CAAM,UAAU,IAAA,CAAK,GAAA,GAAM,WAAW,CAAC,CAAA,EAAA,CAAA;AAG7D,IAAA,MAAA,CAAO,SAAA,GAAY,gBAAA;AAGnB,IAAA,MAAA,CAAO,gBAAA,CAAiB,cAAA,EAAgB,MAAM,MAAA,CAAO,QAAQ,CAAA;AAC7D,IAAA,IAAA,CAAK,OAAO,MAAM,CAAA;AAAA,EACnB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,KAAK,aAAA,EAAc;AAC7B","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n","import { forwardRef, type ButtonHTMLAttributes } from 'react';\nimport { cn } from '../utils/cn.js';\n\nexport type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n\t{ variant = 'filled', size = 'md', className, ...rest },\n\tref\n) {\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\tclassName={cn('button', `button-${variant}`, `button-${size}`, className)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n","import { useCallback, useRef, type PointerEvent } from 'react';\n\n/*\n\tReturns a ref to attach and an onPointerDown handler:\n\n\t    const { ref, onPointerDown } = useRipple();\n\t    <button ref={ref} onPointerDown={onPointerDown}>…</button>\n\n\tThe class name below is created by JAVASCRIPT at runtime, so Tailwind's\n\tscanner can never see it — which is why the plugin routes that rule through\n\taddBase rather than addUtilities. See guide 0, decision 3.\n*/\nexport function useRipple() {\n\tconst ref = useRef<HTMLElement | null>(null);\n\n\tconst onPointerDown = useCallback((event: PointerEvent<HTMLElement>) => {\n\t\tconst node = ref.current;\n\t\tif (!node) return;\n\n\t\tconst rect = node.getBoundingClientRect();\n\t\tconst circle = document.createElement('span');\n\n\t\t// Diameter large enough to cover the element from any origin point.\n\t\tconst diameter = Math.max(rect.width, rect.height);\n\t\tcircle.style.width = circle.style.height = `${diameter}px`;\n\t\tcircle.style.left = `${event.clientX - rect.left - diameter / 2}px`;\n\t\tcircle.style.top = `${event.clientY - rect.top - diameter / 2}px`;\n\n\t\t// The one and only place this string exists.\n\t\tcircle.className = 'project-ripple';\n\n\t\t// Self-removing, so nothing has to be cleaned up on unmount.\n\t\tcircle.addEventListener('animationend', () => circle.remove());\n\t\tnode.append(circle);\n\t}, []);\n\n\treturn { ref, onPointerDown };\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, PointerEvent } from 'react';
+import { ClassValue } from 'clsx';
+
+type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare function useRipple(): {
+    ref: react.RefObject<HTMLElement | null>;
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+};
+
+declare const cn: (...inputs: ClassValue[]) => string;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, cn, useRipple };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, PointerEvent } from 'react';
+import { ClassValue } from 'clsx';
+
+type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare function useRipple(): {
+    ref: react.RefObject<HTMLElement | null>;
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+};
+
+declare const cn: (...inputs: ClassValue[]) => string;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, cn, useRipple };

package/dist/index.js

@@ -0,0 +1,38 @@
+import { forwardRef, useRef, useCallback } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/components/Button.tsx
+var cn = (...inputs) => twMerge(clsx(inputs));
+var Button = forwardRef(function Button2({ variant = "filled", size = "md", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: cn("button", `button-${variant}`, `button-${size}`, className),
+      ...rest
+    }
+  );
+});
+function useRipple() {
+  const ref = useRef(null);
+  const onPointerDown = useCallback((event) => {
+    const node = ref.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    const circle = document.createElement("span");
+    const diameter = Math.max(rect.width, rect.height);
+    circle.style.width = circle.style.height = `${diameter}px`;
+    circle.style.left = `${event.clientX - rect.left - diameter / 2}px`;
+    circle.style.top = `${event.clientY - rect.top - diameter / 2}px`;
+    circle.className = "project-ripple";
+    circle.addEventListener("animationend", () => circle.remove());
+    node.append(circle);
+  }, []);
+  return { ref, onPointerDown };
+}
+
+export { Button, cn, useRipple };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils/cn.ts","../src/lib/components/Button.tsx","../src/lib/hooks/useRipple.ts"],"names":["Button"],"mappings":";;;;;;AAGO,IAAM,KAAK,CAAA,GAAI,MAAA,KAAiC,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC;ACQpE,IAAM,MAAA,GAAS,UAAA,CAA2C,SAASA,OAAAA,CACzE,EAAE,OAAA,GAAU,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,SAAA,EAAW,GAAG,IAAA,IACjD,GAAA,EACC;AACD,EAAA,uBACC,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,GAAG,QAAA,EAAU,CAAA,OAAA,EAAU,OAAO,CAAA,CAAA,EAAI,CAAA,OAAA,EAAU,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA;AAAA,MACvE,GAAG;AAAA;AAAA,GACL;AAEF,CAAC;ACVM,SAAS,SAAA,GAAY;AAC3B,EAAA,MAAM,GAAA,GAAM,OAA2B,IAAI,CAAA;AAE3C,EAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,KAAA,KAAqC;AACvE,IAAA,MAAM,OAAO,GAAA,CAAI,OAAA;AACjB,IAAA,IAAI,CAAC,IAAA,EAAM;AAEX,IAAA,MAAM,IAAA,GAAO,KAAK,qBAAA,EAAsB;AACxC,IAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AAG5C,IAAA,MAAM,WAAW,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,KAAA,EAAO,KAAK,MAAM,CAAA;AACjD,IAAA,MAAA,CAAO,MAAM,KAAA,GAAQ,MAAA,CAAO,KAAA,CAAM,MAAA,GAAS,GAAG,QAAQ,CAAA,EAAA,CAAA;AACtD,IAAA,MAAA,CAAO,KAAA,CAAM,OAAO,CAAA,EAAG,KAAA,CAAM,UAAU,IAAA,CAAK,IAAA,GAAO,WAAW,CAAC,CAAA,EAAA,CAAA;AAC/D,IAAA,MAAA,CAAO,KAAA,CAAM,MAAM,CAAA,EAAG,KAAA,CAAM,UAAU,IAAA,CAAK,GAAA,GAAM,WAAW,CAAC,CAAA,EAAA,CAAA;AAG7D,IAAA,MAAA,CAAO,SAAA,GAAY,gBAAA;AAGnB,IAAA,MAAA,CAAO,gBAAA,CAAiB,cAAA,EAAgB,MAAM,MAAA,CAAO,QAAQ,CAAA;AAC7D,IAAA,IAAA,CAAK,OAAO,MAAM,CAAA;AAAA,EACnB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,EAAE,KAAK,aAAA,EAAc;AAC7B","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n","import { forwardRef, type ButtonHTMLAttributes } from 'react';\nimport { cn } from '../utils/cn.js';\n\nexport type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'text';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n\t{ variant = 'filled', size = 'md', className, ...rest },\n\tref\n) {\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\tclassName={cn('button', `button-${variant}`, `button-${size}`, className)}\n\t\t\t{...rest}\n\t\t/>\n\t);\n});\n","import { useCallback, useRef, type PointerEvent } from 'react';\n\n/*\n\tReturns a ref to attach and an onPointerDown handler:\n\n\t    const { ref, onPointerDown } = useRipple();\n\t    <button ref={ref} onPointerDown={onPointerDown}>…</button>\n\n\tThe class name below is created by JAVASCRIPT at runtime, so Tailwind's\n\tscanner can never see it — which is why the plugin routes that rule through\n\taddBase rather than addUtilities. See guide 0, decision 3.\n*/\nexport function useRipple() {\n\tconst ref = useRef<HTMLElement | null>(null);\n\n\tconst onPointerDown = useCallback((event: PointerEvent<HTMLElement>) => {\n\t\tconst node = ref.current;\n\t\tif (!node) return;\n\n\t\tconst rect = node.getBoundingClientRect();\n\t\tconst circle = document.createElement('span');\n\n\t\t// Diameter large enough to cover the element from any origin point.\n\t\tconst diameter = Math.max(rect.width, rect.height);\n\t\tcircle.style.width = circle.style.height = `${diameter}px`;\n\t\tcircle.style.left = `${event.clientX - rect.left - diameter / 2}px`;\n\t\tcircle.style.top = `${event.clientY - rect.top - diameter / 2}px`;\n\n\t\t// The one and only place this string exists.\n\t\tcircle.className = 'project-ripple';\n\n\t\t// Self-removing, so nothing has to be cleaned up on unmount.\n\t\tcircle.addEventListener('animationend', () => circle.remove());\n\t\tnode.append(circle);\n\t}, []);\n\n\treturn { ref, onPointerDown };\n}\n"]}

package/dist/styles.css

@@ -0,0 +1,6 @@
+/*
+	Registers this package's components with the consumer's Tailwind scan.
+	Without this import their build never looks inside node_modules and the
+	components render unstyled.
+*/
+@source '../**/*.{ts,tsx}';

package/package.json

@@ -1,6 +1,69 @@
 {
-  "name": "@anti049/lunar-ui-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@anti049/lunar-ui-react",
+	"version": "0.1.1",
+	"type": "module",
+	"license": "MIT",
+	"description": "React components for the test design system.",
+	"keywords": [
+		"react",
+		"tailwindcss",
+		"ui",
+		"components",
+		"design-system"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Anti049/lunar-ui-monorepo.git",
+		"directory": "packages/react"
+	},
+	"scripts": {
+		"dev": "vite",
+		"build": "tsup && node -e \"require('node:fs').copyFileSync('src/lib/styles.css','dist/styles.css')\" && publint",
+		"check": "tsc --noEmit"
+	},
+	"files": [
+		"dist"
+	],
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		},
+		"./styles.css": "./dist/styles.css",
+		"./package.json": "./package.json"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"peerDependencies": {
+		"@anti049/lunar-ui": "^0.1.1",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
+	},
+	"dependencies": {
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^3.7.0"
+	},
+	"devDependencies": {
+		"@anti049/lunar-ui": "workspace:*",
+		"@tailwindcss/vite": "^4.3.3",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		"@vitejs/plugin-react": "^6.1.1",
+		"publint": "^0.3.24",
+		"react": "^19.3.0",
+		"react-dom": "^19.3.0",
+		"tailwindcss": "^4.3.3",
+		"tsup": "^8.5.1",
+		"typescript": "~6.0.3",
+		"vite": "^8.3.0"
+	},
+	"publishConfig": {
+		"access": "public",
+		"provenance": true
+	}
+}