@lovable-widgets/core 1.0.0 → 1.0.1

package/README.md

@@ -1 +1,27 @@
-# test
+# @lovable-widgets/core
+
+The official SDK for building Lovable-compatible widgets.
+
+## Install
+```bash
+npm install @lovable-widgets/core
+```
+
+## Usage
+```tsx
+import { createWidget, WidgetCard, WidgetHeader, WidgetButton } from '@lovable-widgets/core';
+import '@lovable-widgets/core/styles.css';
+
+const MyWidgetInner = ({ title }) => (
+  <WidgetCard>
+    <WidgetHeader title={title} />
+    <WidgetButton>Click me</WidgetButton>
+  </WidgetCard>
+);
+
+export default createWidget({
+  meta: { name: 'my-widget', version: '1.0.0', description: '...', author: '...', category: 'ui', tags: [] },
+  component: MyWidgetInner,
+  propDefs: [{ name: 'title', type: 'string', required: true, description: 'Widget title' }],
+}).component;
+```

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType, ForwardRefExoticComponent, ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+export interface WidgetMeta { name: string; version: string; description: string; author: string; category: 'ui' | 'commerce' | 'navigation' | 'social-proof' | 'data' | 'forms' | 'media' | 'layout'; tags: string[]; icon?: string; }
+export interface WidgetPropDef { name: string; type: string; required: boolean; default?: string; description: string; }
+export interface WidgetDefinition<P = any> { component: ComponentType<P>; meta: WidgetMeta; propDefs: WidgetPropDef[]; __LOVABLE_WIDGET__: true; }
+export interface CreateWidgetConfig<P> { meta: WidgetMeta; component: ComponentType<P>; propDefs: WidgetPropDef[]; }
+export interface ThemeTokens { background: string; foreground: string; card: string; cardForeground: string; primary: string; primaryForeground: string; secondary: string; secondaryForeground: string; muted: string; mutedForeground: string; accent: string; accentForeground: string; destructive: string; destructiveForeground: string; border: string; ring: string; radius: string; }
+export function createWidget<P extends Record<string, any>>(config: CreateWidgetConfig<P>): WidgetDefinition<P>;
+export function useWidgetTheme(): ThemeTokens;
+export function useWidgetId(prefix?: string): string;
+export interface WidgetCardProps extends HTMLAttributes<HTMLDivElement> { children: ReactNode; noPadding?: boolean; }
+export declare const WidgetCard: React.FC<WidgetCardProps>;
+export interface WidgetHeaderProps extends HTMLAttributes<HTMLDivElement> { title: string; subtitle?: string; children?: ReactNode; }
+export declare const WidgetHeader: React.FC<WidgetHeaderProps>;
+export interface WidgetButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'primary' | 'secondary' | 'ghost' | 'destructive'; size?: 'sm' | 'md' | 'lg'; }
+export declare const WidgetButton: React.FC<WidgetButtonProps>;
+export interface WidgetBadgeProps extends HTMLAttributes<HTMLSpanElement> { variant?: 'default' | 'primary' | 'success' | 'warning' | 'destructive'; }
+export declare const WidgetBadge: React.FC<WidgetBadgeProps>;
+export interface WidgetDividerProps { className?: string; }
+export declare const WidgetDivider: React.FC<WidgetDividerProps>;

package/dist/index.js

@@ -0,0 +1,12 @@
+'use strict';
+const react = require('react');
+function createWidget(config) { const { meta, component: Component, propDefs } = config; const WrappedComponent = react.forwardRef((props, ref) => { const { className = "", ...rest } = props; return react.createElement("div", { ref, className: ("lw-widget lw-widget-" + meta.name + " " + className).trim(), "data-lw-widget": meta.name, "data-lw-version": meta.version }, react.createElement(Component, rest)); }); WrappedComponent.displayName = "LovableWidget(" + meta.name + ")"; return { component: WrappedComponent, meta, propDefs, __LOVABLE_WIDGET__: true }; }
+function useWidgetTheme() { return react.useMemo(() => { const get = (name) => { if (typeof window === "undefined") return ""; return getComputedStyle(document.documentElement).getPropertyValue("--" + name).trim(); }; return { background: get("background"), foreground: get("foreground"), card: get("card"), cardForeground: get("card-foreground"), primary: get("primary"), primaryForeground: get("primary-foreground"), secondary: get("secondary"), secondaryForeground: get("secondary-foreground"), muted: get("muted"), mutedForeground: get("muted-foreground"), accent: get("accent"), accentForeground: get("accent-foreground"), destructive: get("destructive"), destructiveForeground: get("destructive-foreground"), border: get("border"), ring: get("ring"), radius: get("radius") }; }, []); }
+let idCounter = 0;
+function useWidgetId(prefix) { return react.useMemo(() => { idCounter += 1; return (prefix || "lw") + "-" + idCounter; }, [prefix]); }
+function WidgetCard({ children, noPadding, className = "", ...props }) { return react.createElement("div", { className: ("lw-card " + (noPadding ? "lw-card--no-padding " : "") + className).trim(), ...props }, children); }
+function WidgetHeader({ title, subtitle, children, className = "", ...props }) { return react.createElement("div", { className: ("lw-header " + className).trim(), ...props }, react.createElement("div", null, react.createElement("h3", { className: "lw-header__title" }, title), subtitle && react.createElement("p", { className: "lw-header__subtitle" }, subtitle)), children && react.createElement("div", { className: "lw-header__actions" }, children)); }
+function WidgetButton({ children, variant = "primary", size = "md", className = "", ...props }) { return react.createElement("button", { className: ("lw-btn lw-btn--" + variant + " lw-btn--" + size + " " + className).trim(), ...props }, children); }
+function WidgetBadge({ children, variant = "default", className = "", ...props }) { return react.createElement("span", { className: ("lw-badge lw-badge--" + variant + " " + className).trim(), ...props }, children); }
+function WidgetDivider({ className = "" }) { return react.createElement("hr", { className: ("lw-divider " + className).trim() }); }
+exports.createWidget = createWidget; exports.useWidgetTheme = useWidgetTheme; exports.useWidgetId = useWidgetId; exports.WidgetCard = WidgetCard; exports.WidgetHeader = WidgetHeader; exports.WidgetButton = WidgetButton; exports.WidgetBadge = WidgetBadge; exports.WidgetDivider = WidgetDivider;

package/dist/index.mjs

@@ -1 +1,29 @@
-export function createWidget(c){return c}
+import { forwardRef, createElement, useMemo } from 'react';
+
+function createWidget(config) {
+  const { meta, component: Component, propDefs } = config;
+  const WrappedComponent = forwardRef((props, ref) => {
+    const { className = "", ...rest } = props;
+    return createElement("div", { ref, className: ("lw-widget lw-widget-" + meta.name + " " + className).trim(), "data-lw-widget": meta.name, "data-lw-version": meta.version }, createElement(Component, rest));
+  });
+  WrappedComponent.displayName = "LovableWidget(" + meta.name + ")";
+  return { component: WrappedComponent, meta, propDefs, __LOVABLE_WIDGET__: true };
+}
+
+function useWidgetTheme() {
+  return useMemo(() => {
+    const get = (name) => { if (typeof window === "undefined") return ""; return getComputedStyle(document.documentElement).getPropertyValue("--" + name).trim(); };
+    return { background: get("background"), foreground: get("foreground"), card: get("card"), cardForeground: get("card-foreground"), primary: get("primary"), primaryForeground: get("primary-foreground"), secondary: get("secondary"), secondaryForeground: get("secondary-foreground"), muted: get("muted"), mutedForeground: get("muted-foreground"), accent: get("accent"), accentForeground: get("accent-foreground"), destructive: get("destructive"), destructiveForeground: get("destructive-foreground"), border: get("border"), ring: get("ring"), radius: get("radius") };
+  }, []);
+}
+
+let idCounter = 0;
+function useWidgetId(prefix) { return useMemo(() => { idCounter += 1; return (prefix || "lw") + "-" + idCounter; }, [prefix]); }
+
+function WidgetCard({ children, noPadding, className = "", ...props }) { return createElement("div", { className: ("lw-card " + (noPadding ? "lw-card--no-padding " : "") + className).trim(), ...props }, children); }
+function WidgetHeader({ title, subtitle, children, className = "", ...props }) { return createElement("div", { className: ("lw-header " + className).trim(), ...props }, createElement("div", null, createElement("h3", { className: "lw-header__title" }, title), subtitle && createElement("p", { className: "lw-header__subtitle" }, subtitle)), children && createElement("div", { className: "lw-header__actions" }, children)); }
+function WidgetButton({ children, variant = "primary", size = "md", className = "", ...props }) { return createElement("button", { className: ("lw-btn lw-btn--" + variant + " lw-btn--" + size + " " + className).trim(), ...props }, children); }
+function WidgetBadge({ children, variant = "default", className = "", ...props }) { return createElement("span", { className: ("lw-badge lw-badge--" + variant + " " + className).trim(), ...props }, children); }
+function WidgetDivider({ className = "" }) { return createElement("hr", { className: ("lw-divider " + className).trim() }); }
+
+export { createWidget, useWidgetTheme, useWidgetId, WidgetCard, WidgetHeader, WidgetButton, WidgetBadge, WidgetDivider };

package/dist/style.css

@@ -0,0 +1,26 @@
+.lw-widget { font-family: inherit; line-height: 1.5; color: hsl(var(--foreground, 222.2 84% 4.9%)); -webkit-font-smoothing: antialiased; }
+.lw-card { border: 1px solid hsl(var(--border, 214.3 31.8% 91.4%)); border-radius: var(--radius, 0.75rem); background: hsl(var(--card, 0 0% 100%)); color: hsl(var(--card-foreground, 222.2 84% 4.9%)); padding: 1.5rem; transition: box-shadow 0.2s ease; }
+.lw-card:hover { box-shadow: 0 4px 20px -4px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.1); }
+.lw-card--no-padding { padding: 0; }
+.lw-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; }
+.lw-header__title { font-size: 1.25rem; font-weight: 700; margin: 0; color: hsl(var(--foreground, 222.2 84% 4.9%)); }
+.lw-header__subtitle { font-size: 0.875rem; margin: 0.25rem 0 0; color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%)); }
+.lw-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
+.lw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius, 0.75rem); font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; white-space: nowrap; font-family: inherit; }
+.lw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.lw-btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
+.lw-btn--md { padding: 0.5rem 1rem; font-size: 0.875rem; }
+.lw-btn--lg { padding: 0.625rem 1.5rem; font-size: 1rem; }
+.lw-btn--primary { background: hsl(var(--primary, 221.2 83.2% 53.3%)); color: hsl(var(--primary-foreground, 210 40% 98%)); }
+.lw-btn--primary:hover:not(:disabled) { opacity: 0.9; }
+.lw-btn--secondary { background: hsl(var(--secondary, 210 40% 96.1%)); color: hsl(var(--secondary-foreground, 222.2 47.4% 11.2%)); }
+.lw-btn--ghost { background: transparent; color: hsl(var(--foreground, 222.2 84% 4.9%)); }
+.lw-btn--ghost:hover:not(:disabled) { background: hsl(var(--accent, 210 40% 96.1%)); }
+.lw-btn--destructive { background: hsl(var(--destructive, 0 84.2% 60.2%)); color: hsl(var(--destructive-foreground, 210 40% 98%)); }
+.lw-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; }
+.lw-badge--default { background: hsl(var(--secondary, 210 40% 96.1%)); color: hsl(var(--secondary-foreground, 222.2 47.4% 11.2%)); }
+.lw-badge--primary { background: hsl(var(--primary, 221.2 83.2% 53.3%) / 0.1); color: hsl(var(--primary, 221.2 83.2% 53.3%)); }
+.lw-badge--success { background: hsl(142 76% 36% / 0.1); color: hsl(142 76% 36%); }
+.lw-badge--warning { background: hsl(38 92% 50% / 0.1); color: hsl(38 92% 50%); }
+.lw-badge--destructive { background: hsl(var(--destructive, 0 84.2% 60.2%) / 0.1); color: hsl(var(--destructive, 0 84.2% 60.2%)); }
+.lw-divider { border: none; height: 1px; background: hsl(var(--border, 214.3 31.8% 91.4%)); margin: 1rem 0; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lovable-widgets/core",
-  "version": "1.0.0",
-  "description": "Core SDK for building Lovable-compatible widgets.",
+  "version": "1.0.1",
+  "description": "Core SDK for building Lovable-compatible widgets. Every @lovable-widgets package must use this.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",