@lovince/my-lit-library 1.0.2 → 2.0.0

package/custom-elements.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { MyButtonProps, MyInputProps } from '@lovince/ui-shared';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'my-button': HTMLAttributes<HTMLElement> & MyButtonProps;
+      'my-input': HTMLAttributes<HTMLElement> & MyInputProps;
+    }
+  }
+}
+
+export {};

package/dist/index.d.ts

@@ -1,23 +1,11 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { LitElement } from 'lit';
+export * from '@lovince/ui-core';
+export { MyButton as Button, MyInput as Input } from '@lovince/ui-core';
+export * from '@lovince/ui-shared';
+export { MyButtonProps, MyInputProps } from '@lovince/ui-shared';
 
-type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'outline';
-
-declare class Button extends LitElement {
-    static properties: {
-        variant: {
-            type: StringConstructor;
-        };
-    };
-    variant: ButtonVariant;
-    constructor();
-    static styles: lit.CSSResult;
-    render(): lit_html.TemplateResult<1>;
-}
+type ButtonVariant = "primary" | "secondary" | "danger" | "success" | "outline";
+type InputType = "text" | "email" | "password";
 
 declare function defineButton(): void;
 
-declare function defineAllComponents(): void;
-
-export { Button, defineAllComponents, defineButton };
+export { type ButtonVariant, type InputType, defineButton };

package/dist/index.js

@@ -1,108 +1,12 @@
-// src/components/button.ts
-import { LitElement, html, css } from "lit";
-var Button = class extends LitElement {
-  static properties = {
-    variant: { type: String }
-  };
-  constructor() {
-    super();
-    this.variant = "primary";
-  }
-  static styles = css`
-    button {
-      padding: 0.6rem 1rem;
-      border-radius: 6px;
-      border: none;
-      cursor: pointer;
-      font-family: inherit;
-      font-size: inherit;
-      transition: all 0.2s ease;
-    }
-
-    button:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    button:active {
-      transform: translateY(0);
-    }
-
-    /* Primary variant */
-    button.variant-primary {
-      background: #2563eb;
-      color: white;
-    }
-
-    button.variant-primary:hover {
-      background: #1d4ed8;
-    }
-
-    /* Secondary variant */
-    button.variant-secondary {
-      background: #6b7280;
-      color: white;
-    }
-
-    button.variant-secondary:hover {
-      background: #4b5563;
-    }
-
-    /* Danger variant */
-    button.variant-danger {
-      background: #dc2626;
-      color: white;
-    }
-
-    button.variant-danger:hover {
-      background: #b91c1c;
-    }
-
-    /* Success variant */
-    button.variant-success {
-      background: #16a34a;
-      color: white;
-    }
-
-    button.variant-success:hover {
-      background: #15803d;
-    }
-
-    /* Outline variant */
-    button.variant-outline {
-      background: transparent;
-      color: #2563eb;
-      border: 2px solid #2563eb;
-    }
-
-    button.variant-outline:hover {
-      background: #2563eb;
-      color: white;
-    }
-  `;
-  render() {
-    const variantClass = `variant-${this.variant}`;
-    return html`
-      <button class="${variantClass}">
-        <slot></slot>
-      </button>
-    `;
-  }
-};
-
-// src/define/button.ts
+// src/index.ts
+import { MyButton } from "@lovince/ui-core";
+import { MyInput } from "@lovince/ui-core";
+export * from "@lovince/ui-core";
 function defineButton() {
-  if (!customElements.get("my-button")) {
-    customElements.define("my-button", Button);
-  }
-}
-
-// src/define/all.ts
-function defineAllComponents() {
-  defineButton();
+  console.warn("defineButton() is deprecated - elements auto-register");
 }
 export {
-  Button,
-  defineAllComponents,
+  MyButton as Button,
+  MyInput as Input,
   defineButton
 };

package/package.json

@@ -1,35 +1,45 @@
 {
   "name": "@lovince/my-lit-library",
-  "version": "1.0.2",
-  "description": "Reusable Web Components built with Lit",
+  "version": "2.0.0",
+  "description": "Legacy compatibility package for @lovince/ui-*",
   "type": "module",
-  "files": [
-    "dist"
-  ],
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements": {
+      "types": "./dist/custom-elements.d.ts",
+      "import": "./dist/custom-elements.d.ts"
     }
   },
+  "files": [
+    "dist",
+    "custom-elements.d.ts"
+  ],
   "scripts": {
     "build": "tsup"
   },
   "keywords": [
     "web-components",
     "lit",
-    "design-system"
+    "design-system",
+    "react",
+    "vue",
+    "svelte",
+    "angular"
   ],
   "author": "Steve",
   "license": "MIT",
+  "dependencies": {
+    "@lovince/ui-core": "^1.0.0"
+  },
   "peerDependencies": {
-    "lit": "^3.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "lit": "^3.3.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   }

package/README.md

@@ -1,111 +0,0 @@
-# @lovince/my-lit-library
-
-Reusable Web Components built with Lit
-
-## Installation
-
-```bash
-npm install @lovince/my-lit-library
-```
-
-## Usage
-
-### Button Component
-
-The library includes a customizable button component with multiple variants.
-
-#### Import and Register
-
-```typescript
-import { Button, defineButton } from '@lovince/my-lit-library';
-
-// Register the component
-defineButton();
-```
-
-#### HTML Usage
-
-```html
-<!-- Default button -->
-<my-button>Click me</my-button>
-
-<!-- With variants -->
-<my-button variant="primary">Primary</my-button>
-<my-button variant="secondary">Secondary</my-button>
-<my-button variant="danger">Danger</my-button>
-<my-button variant="success">Success</my-button>
-<my-button variant="outline">Outline</my-button>
-```
-
-#### TypeScript Usage
-
-```typescript
-import { Button, ButtonVariant } from '@lovince/my-lit-library';
-
-// You can also use the type directly
-const variant: ButtonVariant = 'primary';
-```
-
-## Button Variants
-
-- **primary**: Blue background button (default)
-- **secondary**: Gray background button
-- **danger**: Red background button
-- **success**: Green background button
-- **outline**: Transparent with blue border
-
-## API Reference
-
-### Button Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `variant` | `ButtonVariant` | `'primary'` | The visual style variant of the button |
-
-### ButtonVariant Type
-
-```typescript
-type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'outline';
-```
-
-## Development
-
-### Building
-
-```bash
-npm run build
-```
-
-### Publishing
-
-The library follows semantic versioning:
-
-```bash
-# Bug fix
-npm version patch
-npm publish --access public
-
-# New feature
-npm version minor
-npm publish --access public
-
-# Breaking change
-npm version major
-npm publish --access public
-```
-
-## Browser Support
-
-This library supports all modern browsers that support [Web Components](https://caniuse.com/web-components) and [ES2022](https://caniuse.com/es2022).
-
-## Dependencies
-
-- **Lit**: ^3.0.0 (peer dependency)
-
-## License
-
-MIT
-
-## Versions
-
-See [npm versions](https://www.npmjs.com/package/@lovince/my-lit-library?activeTab=versions) for the complete version history.