@grantcodes/ui 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.3.0](https://github.com/grantcodes/ui/compare/ui-v2.2.0...ui-v2.3.0) (2026-03-25)
+
+
+### Features
+
+* **01-01:** create React wrapper components for all Lit web components ([f5d47a7](https://github.com/grantcodes/ui/commit/f5d47a7e1dc45d5d5f21823dcba59c687feed56f))
+* **ui:** add react exports ([f040673](https://github.com/grantcodes/ui/commit/f04067332e5d70803d6f72aade875f08ad05e090))
+
 ## [2.2.0](https://github.com/grantcodes/ui/compare/ui-v2.1.1...ui-v2.2.0) (2026-03-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
@@ -33,6 +33,9 @@
       "require": "./src/components/*"
     },
     "./fonts/*": "./src/fonts/*",
+    "./react": {
+      "import": "./src/react.js"
+    },
     "./css-import-attributes": {
       "types": "./css-import-attributes.d.ts"
     },
@@ -40,6 +43,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@lit/react": "^1.0.8",
     "lit": "^3.3.1",
     "sanitize.css": "^13.0.0",
     "shiki": "^3.17.1",
@@ -64,6 +68,7 @@
     "lucide-static": "^0.555.0",
     "npm-run-all": "^4.1.5",
     "plop": "^4.0.4",
+    "react": "^19.2.4",
     "storybook": "^10.1.4",
     "vite": "^7.2.6"
   },
@@ -77,6 +82,14 @@
     "LICENCE"
   ],
   "customElements": "custom-elements.json",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "scripts": {
     "dev": "storybook dev -p 6006",
     "watch": "vite build --watch",

package/src/components/accordion/accordion.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesAccordion } from "./accordion.js"
+
+export const Accordion = createComponent({
+	tagName: "grantcodes-accordion",
+	elementClass: GrantCodesAccordion,
+	react: React,
+})

package/src/components/app-bar/app-bar.react.js

@@ -0,0 +1,12 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesAppBar } from "./app-bar.js"
+
+export const AppBar = createComponent({
+	tagName: "grantcodes-app-bar",
+	elementClass: GrantCodesAppBar,
+	react: React,
+	events: {
+		onMenuToggle: "menu-toggle",
+	},
+})

package/src/components/avatar/avatar.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesAvatar } from "./avatar.js"
+
+export const Avatar = createComponent({
+	tagName: "grantcodes-avatar",
+	elementClass: GrantCodesAvatar,
+	react: React,
+})

package/src/components/badge/badge.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesBadge } from "./badge.js"
+
+export const Badge = createComponent({
+	tagName: "grantcodes-badge",
+	elementClass: GrantCodesBadge,
+	react: React,
+})

package/src/components/breadcrumb/breadcrumb.react.js

@@ -0,0 +1,15 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesBreadcrumb, GrantCodesBreadcrumbItem } from "./breadcrumb.js"
+
+export const Breadcrumb = createComponent({
+	tagName: "grantcodes-breadcrumb",
+	elementClass: GrantCodesBreadcrumb,
+	react: React,
+})
+
+export const BreadcrumbItem = createComponent({
+	tagName: "grantcodes-breadcrumb-item",
+	elementClass: GrantCodesBreadcrumbItem,
+	react: React,
+})

package/src/components/button/button.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesButton } from "./button.js"
+
+export const Button = createComponent({
+	tagName: "grantcodes-button",
+	elementClass: GrantCodesButton,
+	react: React,
+})

package/src/components/button-group/button-group.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesButtonGroup } from "./button-group.js"
+
+export const ButtonGroup = createComponent({
+	tagName: "grantcodes-button-group",
+	elementClass: GrantCodesButtonGroup,
+	react: React,
+})

package/src/components/card/card.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesCard } from "./card.js"
+
+export const Card = createComponent({
+	tagName: "grantcodes-card",
+	elementClass: GrantCodesCard,
+	react: React,
+})

package/src/components/code-preview/code-preview.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesCodePreview } from "./code-preview.js"
+
+export const CodePreview = createComponent({
+	tagName: "grantcodes-code-preview",
+	elementClass: GrantCodesCodePreview,
+	react: React,
+})

package/src/components/container/container.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesContainer } from "./container.js"
+
+export const Container = createComponent({
+	tagName: "grantcodes-container",
+	elementClass: GrantCodesContainer,
+	react: React,
+})

package/src/components/cta/cta.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesCta } from "./cta.js"
+
+export const Cta = createComponent({
+	tagName: "grantcodes-cta",
+	elementClass: GrantCodesCta,
+	react: React,
+})

package/src/components/dialog/dialog.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesDialog } from "./dialog.js"
+
+export const Dialog = createComponent({
+	tagName: "grantcodes-dialog",
+	elementClass: GrantCodesDialog,
+	react: React,
+})

package/src/components/dropdown/dropdown.react.js

@@ -0,0 +1,21 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesDropdown, GrantCodesDropdownItem } from "./dropdown.js"
+
+export const Dropdown = createComponent({
+	tagName: "grantcodes-dropdown",
+	elementClass: GrantCodesDropdown,
+	react: React,
+	events: {
+		onToggle: "toggle",
+	},
+})
+
+export const DropdownItem = createComponent({
+	tagName: "grantcodes-dropdown-item",
+	elementClass: GrantCodesDropdownItem,
+	react: React,
+	events: {
+		onSelect: "select",
+	},
+})

package/src/components/dropzone/dropzone.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesDropzone } from "./dropzone.js"
+
+export const Dropzone = createComponent({
+	tagName: "grantcodes-dropzone",
+	elementClass: GrantCodesDropzone,
+	react: React,
+})

package/src/components/feature-list/feature-list.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesFeatureList } from "./feature-list.js"
+
+export const FeatureList = createComponent({
+	tagName: "grantcodes-feature-list",
+	elementClass: GrantCodesFeatureList,
+	react: React,
+})

package/src/components/footer/footer.react.js

@@ -0,0 +1,15 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesFooter, GrantCodesFooterColumn } from "./footer.js"
+
+export const Footer = createComponent({
+	tagName: "grantcodes-footer",
+	elementClass: GrantCodesFooter,
+	react: React,
+})
+
+export const FooterColumn = createComponent({
+	tagName: "grantcodes-footer-column",
+	elementClass: GrantCodesFooterColumn,
+	react: React,
+})

package/src/components/form-field/form-field.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesFormField } from "./form-field.js"
+
+export const FormField = createComponent({
+	tagName: "grantcodes-form-field",
+	elementClass: GrantCodesFormField,
+	react: React,
+})

package/src/components/gallery/gallery-image.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesGalleryImage } from "./gallery-image.js"
+
+export const GalleryImage = createComponent({
+	tagName: "grantcodes-gallery-image",
+	elementClass: GrantCodesGalleryImage,
+	react: React,
+})

package/src/components/gallery/gallery.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesGallery } from "./gallery.js"
+
+export const Gallery = createComponent({
+	tagName: "grantcodes-gallery",
+	elementClass: GrantCodesGallery,
+	react: React,
+})

package/src/components/hero/hero.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesHero } from "./hero.js"
+
+export const Hero = createComponent({
+	tagName: "grantcodes-hero",
+	elementClass: GrantCodesHero,
+	react: React,
+})

package/src/components/icon/icon.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesIcon } from "./icon.js"
+
+export const Icon = createComponent({
+	tagName: "grantcodes-icon",
+	elementClass: GrantCodesIcon,
+	react: React,
+})

package/src/components/loading/loading.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesLoading } from "./loading.js"
+
+export const Loading = createComponent({
+	tagName: "grantcodes-loading",
+	elementClass: GrantCodesLoading,
+	react: React,
+})

package/src/components/logo-cloud/logo-cloud.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesLogoCloud } from "./logo-cloud.js"
+
+export const LogoCloud = createComponent({
+	tagName: "grantcodes-logo-cloud",
+	elementClass: GrantCodesLogoCloud,
+	react: React,
+})

package/src/components/media-text/media-text.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesMediaText } from "./media-text.js"
+
+export const MediaText = createComponent({
+	tagName: "grantcodes-media-text",
+	elementClass: GrantCodesMediaText,
+	react: React,
+})

package/src/components/newsletter/newsletter.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesNewsletter } from "./newsletter.js"
+
+export const Newsletter = createComponent({
+	tagName: "grantcodes-newsletter",
+	elementClass: GrantCodesNewsletter,
+	react: React,
+})

package/src/components/notice/notice.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesNotice } from "./notice.js"
+
+export const Notice = createComponent({
+	tagName: "grantcodes-notice",
+	elementClass: GrantCodesNotice,
+	react: React,
+})

package/src/components/pagination/pagination.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesPagination } from "./pagination.js"
+
+export const Pagination = createComponent({
+	tagName: "grantcodes-pagination",
+	elementClass: GrantCodesPagination,
+	react: React,
+})

package/src/components/pricing/pricing.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesPricing } from "./pricing.js"
+
+export const Pricing = createComponent({
+	tagName: "grantcodes-pricing",
+	elementClass: GrantCodesPricing,
+	react: React,
+})

package/src/components/sidebar/sidebar.react.js

@@ -0,0 +1,13 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesSidebar } from "./sidebar.js"
+
+export const Sidebar = createComponent({
+	tagName: "grantcodes-sidebar",
+	elementClass: GrantCodesSidebar,
+	react: React,
+	events: {
+		onToggle: "toggle",
+		onDrawerToggle: "drawer-toggle",
+	},
+})

package/src/components/stats/stats.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesStats } from "./stats.js"
+
+export const Stats = createComponent({
+	tagName: "grantcodes-stats",
+	elementClass: GrantCodesStats,
+	react: React,
+})

package/src/components/tabs/internal/tabs-button.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTabsButton } from "./tabs-button.js"
+
+export const TabsButton = createComponent({
+	tagName: "grantcodes-tabs-button",
+	elementClass: GrantCodesTabsButton,
+	react: React,
+})

package/src/components/tabs/tab.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTab } from "./tab.js"
+
+export const Tab = createComponent({
+	tagName: "grantcodes-tab",
+	elementClass: GrantCodesTab,
+	react: React,
+})

package/src/components/tabs/tabs.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTabs } from "./tabs.js"
+
+export const Tabs = createComponent({
+	tagName: "grantcodes-tabs",
+	elementClass: GrantCodesTabs,
+	react: React,
+})

package/src/components/testimonials/testimonials.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTestimonials } from "./testimonials.js"
+
+export const Testimonials = createComponent({
+	tagName: "grantcodes-testimonials",
+	elementClass: GrantCodesTestimonials,
+	react: React,
+})

package/src/components/toast/toast.react.js

@@ -0,0 +1,18 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesToast, GrantCodesToastContainer } from "./toast.js"
+
+export const Toast = createComponent({
+	tagName: "grantcodes-toast",
+	elementClass: GrantCodesToast,
+	react: React,
+	events: {
+		onDismiss: "dismiss",
+	},
+})
+
+export const ToastContainer = createComponent({
+	tagName: "grantcodes-toast-container",
+	elementClass: GrantCodesToastContainer,
+	react: React,
+})

package/src/components/tooltip/tooltip.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesTooltip } from "./tooltip.js"
+
+export const Tooltip = createComponent({
+	tagName: "grantcodes-tooltip",
+	elementClass: GrantCodesTooltip,
+	react: React,
+})

package/src/react.js

@@ -0,0 +1,36 @@
+export { Accordion } from "./components/accordion/accordion.react.js"
+export { AppBar } from "./components/app-bar/app-bar.react.js"
+export { Avatar } from "./components/avatar/avatar.react.js"
+export { Badge } from "./components/badge/badge.react.js"
+export { Breadcrumb, BreadcrumbItem } from "./components/breadcrumb/breadcrumb.react.js"
+export { Button } from "./components/button/button.react.js"
+export { ButtonGroup } from "./components/button-group/button-group.react.js"
+export { Card } from "./components/card/card.react.js"
+export { CodePreview } from "./components/code-preview/code-preview.react.js"
+export { Container } from "./components/container/container.react.js"
+export { Cta } from "./components/cta/cta.react.js"
+export { Dialog } from "./components/dialog/dialog.react.js"
+export { Dropdown, DropdownItem } from "./components/dropdown/dropdown.react.js"
+export { Dropzone } from "./components/dropzone/dropzone.react.js"
+export { FeatureList } from "./components/feature-list/feature-list.react.js"
+export { Footer, FooterColumn } from "./components/footer/footer.react.js"
+export { FormField } from "./components/form-field/form-field.react.js"
+export { Gallery } from "./components/gallery/gallery.react.js"
+export { GalleryImage } from "./components/gallery/gallery-image.react.js"
+export { Hero } from "./components/hero/hero.react.js"
+export { Icon } from "./components/icon/icon.react.js"
+export { Loading } from "./components/loading/loading.react.js"
+export { LogoCloud } from "./components/logo-cloud/logo-cloud.react.js"
+export { MediaText } from "./components/media-text/media-text.react.js"
+export { Newsletter } from "./components/newsletter/newsletter.react.js"
+export { Notice } from "./components/notice/notice.react.js"
+export { Pagination } from "./components/pagination/pagination.react.js"
+export { Pricing } from "./components/pricing/pricing.react.js"
+export { Sidebar } from "./components/sidebar/sidebar.react.js"
+export { Stats } from "./components/stats/stats.react.js"
+export { Tab } from "./components/tabs/tab.react.js"
+export { Tabs } from "./components/tabs/tabs.react.js"
+export { TabsButton } from "./components/tabs/internal/tabs-button.react.js"
+export { Testimonials } from "./components/testimonials/testimonials.react.js"
+export { Toast, ToastContainer } from "./components/toast/toast.react.js"
+export { Tooltip } from "./components/tooltip/tooltip.react.js"

package/src/react.test.js

@@ -0,0 +1,56 @@
+import { describe, it } from "node:test";
+import { strict as assert } from "node:assert";
+
+describe("React Wrappers", () => {
+	it("should export all component wrappers", async () => {
+		const react = await import("./react.js");
+		assert.ok(react.Button, "Button wrapper should be exported");
+		assert.ok(react.Card, "Card wrapper should be exported");
+		assert.ok(react.Dialog, "Dialog wrapper should be exported");
+		assert.ok(react.Accordion, "Accordion wrapper should be exported");
+		assert.ok(react.Tooltip, "Tooltip wrapper should be exported");
+		assert.ok(react.Hero, "Hero wrapper should be exported");
+		assert.ok(react.Container, "Container wrapper should be exported");
+		assert.ok(react.Icon, "Icon wrapper should be exported");
+		assert.ok(react.Loading, "Loading wrapper should be exported");
+		assert.ok(react.Notice, "Notice wrapper should be exported");
+	});
+
+	it("should export at least 35 component wrappers", async () => {
+		const react = await import("./react.js");
+		const exportCount = Object.keys(react).length;
+		assert.ok(
+			exportCount >= 35,
+			`Expected at least 35 exports, got ${exportCount}`,
+		);
+	});
+
+	it("should export event-mapped components", async () => {
+		const react = await import("./react.js");
+		assert.ok(react.AppBar, "AppBar wrapper should be exported");
+		assert.ok(react.Dropdown, "Dropdown wrapper should be exported");
+		assert.ok(react.DropdownItem, "DropdownItem wrapper should be exported");
+		assert.ok(react.Sidebar, "Sidebar wrapper should be exported");
+		assert.ok(react.Toast, "Toast wrapper should be exported");
+	});
+
+	it("should export compound component wrappers", async () => {
+		const react = await import("./react.js");
+		assert.ok(react.Breadcrumb, "Breadcrumb wrapper should be exported");
+		assert.ok(
+			react.BreadcrumbItem,
+			"BreadcrumbItem wrapper should be exported",
+		);
+		assert.ok(react.Footer, "Footer wrapper should be exported");
+		assert.ok(react.FooterColumn, "FooterColumn wrapper should be exported");
+		assert.ok(react.Gallery, "Gallery wrapper should be exported");
+		assert.ok(react.GalleryImage, "GalleryImage wrapper should be exported");
+		assert.ok(react.Tabs, "Tabs wrapper should be exported");
+		assert.ok(react.Tab, "Tab wrapper should be exported");
+		assert.ok(react.TabsButton, "TabsButton wrapper should be exported");
+		assert.ok(
+			react.ToastContainer,
+			"ToastContainer wrapper should be exported",
+		);
+	});
+});