@grantcodes/ui 2.1.1 → 2.3.0

package/src/components/container/container.component.js

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { cx } from "../../lib/classnames.js";
-import { containerStyles } from "./container.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import containerStyles from "./container.css" with { type: "css" };
 
 export class GrantCodesContainer extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles
@@ -22,7 +22,8 @@ export class GrantCodesContainer extends LitElement {
 	}
 
 	render() {
-		const containerClass = cx("container", {
+		const classes = classMap({
+			container: true,
 			"container--wide": this.align === "wide",
 			"container--full": this.align === "full",
 			"container--prose": this.align === "prose",
@@ -31,7 +32,7 @@ export class GrantCodesContainer extends LitElement {
 		});
 
 		return html`
-      <div class="${containerClass}">
+      <div class=${classes}>
         <slot></slot>
       </div>
     `;

package/src/components/container/{container.styles.js → container.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const containerStyles = css`
   .container {
     display: flex;
     flex-direction: column;
@@ -29,10 +26,6 @@ export const containerStyles = css`
     inset-inline-start: 50%;
     position: relative;
     inset-inline-end: 50%;
-    margin-inline-start: -50vw;
-    margin-inline-end: -50vw;
-    max-inline-size: 100vw;
-    inline-size: 100vw;
     margin-inline-start: -50dvw;
     margin-inline-end: -50dvw;
     max-inline-size: 100dvw;
@@ -42,4 +35,3 @@ export const containerStyles = css`
   .container--nopad {
     padding-inline: 0;
   }
-`;

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.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { ctaStyles } from "./cta.styles.js";
+import ctaStyles from "./cta.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesCta extends LitElement {

package/src/components/cta/{cta.styles.js → cta.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const ctaStyles = css`
   :host {
     display: block;
   }
@@ -61,4 +58,3 @@ export const ctaStyles = css`
   .cta__secondary-link:hover {
     color: var(--g-theme-color-content-brand, #7c3aed);
   }
-`;

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.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { dialogStyles } from "./dialog.styles.js";
+import dialogStyles from "./dialog.css" with { type: "css" };
 
 export class GrantCodesDialog extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles

package/src/components/dialog/{dialog.styles.js → dialog.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const dialogStyles = css`
 
 .dialog {
   width: 100%;
@@ -71,4 +68,3 @@ export const dialogStyles = css`
   --g-theme-border-radius-md: 0;
 }
 
-`;

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.component.js

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { generateId } from "../../lib/generate-id.js";
-import { dropdownStyles } from "./dropdown.styles.js";
+import dropdownStyles from "./dropdown.css" with { type: "css" };
 
 export class GrantCodesDropdown extends LitElement {
 	static styles = [dropdownStyles];

package/src/components/dropdown/{dropdown.styles.js → dropdown.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const dropdownStyles = css`
 	*,
 	*::before,
 	*::after {
@@ -125,4 +122,3 @@ export const dropdownStyles = css`
 			}
 		}
 	}
-`;

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.component.js

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { cx } from "../../lib/classnames.js";
-import { dropzoneStyles } from "./dropzone.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import dropzoneStyles from "./dropzone.css" with { type: "css" };
 
 export class GrantCodesDropzone extends LitElement {
 	static styles = [dropzoneStyles];
@@ -121,13 +121,14 @@ export class GrantCodesDropzone extends LitElement {
 	}
 
 	render() {
-		const dropzoneClass = cx("dropzone", {
+		const classes = classMap({
+			dropzone: true,
 			"dropzone--fullscreen": this._fullscreen,
 		});
 
 		return html`
 			<div
-				class=${dropzoneClass}
+				class=${classes}
 				@mouseleave=${this._forceDisableFullscreen}
 				@dragend=${this._disableFullscreen}
 				@dragleave=${this._disableFullscreen}

package/src/components/dropzone/{dropzone.styles.js → dropzone.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const dropzoneStyles = css`
 *,
 *::before,
 *::after {
@@ -61,4 +58,3 @@ export const dropzoneStyles = css`
 	position: fixed;
 	z-index: 12;
 }
-`;

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.component.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import * as icons from "lucide-static";
-import { featureListStyles } from "./feature-list.styles.js";
+import featureListStyles from "./feature-list.css" with { type: "css" };
 import "../icon/icon.js";
 
 export class GrantCodesFeatureList extends LitElement {

package/src/components/feature-list/{feature-list.styles.js → feature-list.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const featureListStyles = css`
   :host {
     display: block;
   }
@@ -79,4 +76,3 @@ export const featureListStyles = css`
   .feature-list__item-desc {
     color: var(--g-theme-color-content-secondary);
   }
-`;

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-column.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { footerColumnStyles } from "./footer-column.styles.js";
+import footerColumnStyles from "./footer-column.css" with { type: "css" };
 
 export class GrantCodesFooterColumn extends LitElement {
 	static styles = [footerColumnStyles];

package/src/components/footer/{footer-column.styles.js → footer-column.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const footerColumnStyles = css`
   :host {
     display: block;
   }
@@ -47,4 +44,3 @@ export const footerColumnStyles = css`
     color: var(--g-theme-color-content-secondary);
     font: var(--g-typography-body-sm);
   }
-`;

package/src/components/footer/footer.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { footerStyles } from "./footer.styles.js";
+import footerStyles from "./footer.css" with { type: "css" };
 
 export class GrantCodesFooter extends LitElement {
 	static styles = [footerStyles];

package/src/components/footer/{footer.styles.js → footer.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const footerStyles = css`
 	*,
 	*::before,
 	*::after {
@@ -87,4 +84,3 @@ export const footerStyles = css`
 		color: var(--g-theme-color-content-default);
 		text-decoration: underline;
 	}
-`;

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.component.js

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { formFieldStyles } from "./form-field.styles.js";
-import { cx } from "../../lib/classnames.js";
+import formFieldStyles from "./form-field.css" with { type: "css" };
+import { classMap } from "lit/directives/class-map.js";
 import { generateId } from "../../lib/generate-id.js";
 
 export class GrantCodesFormField extends LitElement {
@@ -129,34 +129,24 @@ export class GrantCodesFormField extends LitElement {
     `;
 	}
 
-	/**
-	 * Template for a group of form components
-	 *
-	 * @param   {string}  className  html class attribute
-	 *
-	 * @return  {}             [return description]
-	 */
-	groupTemplate(className) {
-		return html`
-      <fieldset class="${className}">
-        <legend class="form-field__label">${this.label}</legend>
-        <slot></slot>
-        ${this.errorTemplate()}
-      </fieldset>
-    `;
-	}
-
 	render() {
-		const elementClass = cx("form-field", {
+		const classes = classMap({
+			"form-field": true,
 			"form-field--inline": this.inlineInput,
 		});
 
 		if (this.groupInput) {
-			return this.groupTemplate(elementClass);
+			return html`
+      <fieldset class=${classes}>
+        <legend class="form-field__label">${this.label}</legend>
+        <slot></slot>
+        ${this.errorTemplate()}
+      </fieldset>
+    `;
 		}
 
 		return html`
-      <div class="${elementClass}">
+      <div class=${classes}>
         <label>
           <span class="form-field__label" @click=${this.handleLabelClick}
             >${this.label}</span

package/src/components/form-field/{form-field.styles.js → form-field.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const formFieldStyles = css`
   .form-field {
     display: flex;
     flex-direction: column;
@@ -42,4 +39,3 @@ export const formFieldStyles = css`
     font-size: var(--g-theme-typography-body-sm-font-size);
     color: var(--g-color-utility-red-700);
   }
-`;

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.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { galleryStyles } from "./gallery.styles.js";
+import galleryStyles from "./gallery.css" with { type: "css" };
 
 export class GrantCodesGalleryImage extends LitElement {
 	static styles = [galleryStyles];

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.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { galleryStyles } from "./gallery.styles.js";
+import galleryStyles from "./gallery.css" with { type: "css" };
 
 export class GrantCodesGallery extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles

package/src/components/gallery/{gallery.styles.js → gallery.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const galleryStyles = css`
 
 .gallery {
   display: block;
@@ -53,4 +50,3 @@ export const galleryStyles = css`
   color: white;
 }
 
-`;

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.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { heroStyles } from "./hero.styles.js";
+import heroStyles from "./hero.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesHero extends LitElement {

package/src/components/hero/{hero.styles.js → hero.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const heroStyles = css`
 	:host {
 		display: block;
 	}
@@ -43,4 +40,3 @@ export const heroStyles = css`
 		min-height: 70vh;
 		padding: var(--g-theme-spacing-3xl) var(--g-theme-spacing-md);
 	}
-`;

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.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { iconStyles } from "./icon.styles.js";
+import iconStyles from "./icon.css" with { type: "css" };
 
 export class GrantCodesIcon extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles

package/src/components/icon/{icon.styles.js → icon.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const iconStyles = css`
   :host {
     display: block;
   }
@@ -27,4 +24,3 @@ export const iconStyles = css`
   .icon ::slotted(svg:not([stoke])) {
     stroke: currentColor;
   }
-`;

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.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { loadingStyles } from "./loading.styles.js";
+import loadingStyles from "./loading.css" with { type: "css" };
 
 export class GrantCodesLoading extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles

package/src/components/loading/{loading.styles.js → loading.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const loadingStyles = css`
 
 :host {
   --height: 0.5rem;
@@ -40,4 +37,3 @@ export const loadingStyles = css`
   }
 }
 
-`;

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.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { logoCloudStyles } from "./logo-cloud.styles.js";
+import logoCloudStyles from "./logo-cloud.css" with { type: "css" };
 
 export class GrantCodesLogoCloud extends LitElement {
 	static styles = [logoCloudStyles];

package/src/components/logo-cloud/{logo-cloud.styles.js → logo-cloud.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const logoCloudStyles = css`
   :host {
     display: block;
   }
@@ -65,4 +62,3 @@ export const logoCloudStyles = css`
   .logo-cloud__item:not(:has(.logo-cloud__link)) .logo-cloud__logo {
     filter: none;
   }
-`;

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.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { mediaTextStyles } from "./media-text.styles.js";
+import mediaTextStyles from "./media-text.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesMediaText extends LitElement {

package/src/components/media-text/{media-text.styles.js → media-text.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const mediaTextStyles = css`
   :host {
     display: block;
   }
@@ -63,4 +60,3 @@ export const mediaTextStyles = css`
     font: var(--g-theme-typography-body-lg);
     color: var(--g-theme-color-content-secondary);
   }
-`;

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.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { newsletterStyles } from "./newsletter.styles.js";
+import newsletterStyles from "./newsletter.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesNewsletter extends LitElement {

package/src/components/newsletter/{newsletter.styles.js → newsletter.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const newsletterStyles = css`
   :host {
     display: block;
   }
@@ -86,4 +83,3 @@ export const newsletterStyles = css`
       flex-direction: column;
     }
   }
-`;

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,
+})