@grantcodes/ui 2.1.1 → 2.3.0

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

package/vite-plugin-css-import-attributes.js

@@ -0,0 +1,96 @@
+import { readFile } from "node:fs/promises";
+
+/**
+ * Vite plugin that handles CSS import attributes (`with { type: 'css' }`).
+ *
+ * When a JS/TS file imports a CSS file with `with { type: 'css' }`,
+ * this plugin transforms it into a module that exports a CSSStyleSheet
+ * (client) or a Lit CSSResult (SSR), compatible with Lit's `static styles`.
+ *
+ * The virtual module ID uses a `.js` suffix to prevent Vite's built-in
+ * CSS plugin from intercepting and transforming the output.
+ */
+export function cssImportAttributes() {
+	const virtualPrefix = "\0css-sheet:";
+	const ssrPrefix = "\0css-sheet-ssr:";
+	// Suffix prevents Vite's CSS plugin from treating this as a CSS module
+	const virtualSuffix = ".js";
+
+	const jsExts = new Set(["js", "mjs", "jsx", "ts", "mts", "tsx"]);
+
+	return {
+		enforce: "pre",
+		name: "css-import-attributes",
+
+		async resolveId(source, importer, options) {
+			if (!source.endsWith(".css") || !importer) return;
+
+			// Strip query strings from importer
+			const cleanImporter = importer.split("?")[0];
+			const ext = cleanImporter.split(".").pop();
+			if (!jsExts.has(ext)) return;
+
+			// Read the importer to check for `with { type: 'css' }`
+			let importerContent;
+			try {
+				importerContent = await readFile(cleanImporter, "utf-8");
+			} catch {
+				return;
+			}
+
+			// Check if the import uses CSS import attributes
+			const escapedSource = source.replace(
+				/[.*+?^${}()|[\]\\]/g,
+				"\\$&",
+			);
+			const regex = new RegExp(
+				escapedSource +
+					`['"] *(?:with|assert) *{ *type: *['"]css['"]`,
+			);
+			if (!regex.test(importerContent)) return;
+
+			// Resolve to absolute path
+			const resolved = (await this.resolve(source, importer, options))
+				?.id;
+			if (!resolved) return;
+
+			// Encode SSR flag into virtual ID prefix so load() can detect it
+			const prefix = options.ssr ? ssrPrefix : virtualPrefix;
+			return prefix + resolved + virtualSuffix;
+		},
+
+		async load(id) {
+			const isSsr = id.startsWith(ssrPrefix);
+			const isClient = id.startsWith(virtualPrefix);
+			if (!isSsr && !isClient) return;
+
+			// Strip prefix and suffix to get real CSS path
+			const prefix = isSsr ? ssrPrefix : virtualPrefix;
+			const realPath = id.slice(prefix.length, -virtualSuffix.length);
+
+			const css = await readFile(realPath, "utf-8");
+			this.addWatchFile(realPath);
+
+			// Escape backticks, backslashes, and dollar signs for template literal
+			const escaped = css
+				.replace(/\\/g, "\\\\")
+				.replace(/`/g, "\\`")
+				.replace(/\$/g, "\\$");
+
+			if (isSsr) {
+				// SSR: return a Lit CSSResult for proper Lit SSR integration
+				return (
+					`import { css } from "lit";\n` +
+					`export default css\`${escaped}\`;\n`
+				);
+			}
+
+			// Client: return a native CSSStyleSheet
+			return (
+				`const sheet = new CSSStyleSheet();\n` +
+				`sheet.replaceSync(\`${escaped}\`);\n` +
+				`export default sheet;\n`
+			);
+		},
+	};
+}

package/src/components/badge/badge.styles.js

@@ -1,91 +0,0 @@
-import { css } from "lit";
-
-export const badgeStyles = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: inline-block;
-  }
-
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--g-theme-spacing-xs);
-    padding-inline: 0.625em;
-    padding-block: 0.375em;
-    border-radius: var(--g-theme-border-radius-md, 0.375rem);
-    font: var(--g-typography-font-label-sm);
-    line-height: 1;
-    white-space: nowrap;
-    border-width: 1px;
-    border-style: solid;
-    transition: all 0.2s ease;
-  }
-
-  /* Soft style variants */
-  .badge--primary {
-    background-color: color-mix(
-      in srgb,
-      var(--g-color-brand-purple-500) 15%,
-      transparent
-    );
-    color: var(--g-color-brand-purple-700);
-    border-color: transparent;
-  }
-
-  .badge--success {
-    background-color: color-mix(
-      in srgb,
-      var(--g-color-utility-green-500) 15%,
-      transparent
-    );
-    color: var(--g-color-utility-green-700);
-    border-color: transparent;
-  }
-
-  .badge--warning {
-    background-color: color-mix(
-      in srgb,
-      var(--g-color-utility-yellow-500) 15%,
-      transparent
-    );
-    color: var(--g-color-utility-yellow-700);
-    border-color: transparent;
-  }
-
-  .badge--error {
-    background-color: color-mix(
-      in srgb,
-      var(--g-color-utility-red-500) 15%,
-      transparent
-    );
-    color: var(--g-color-utility-red-700);
-    border-color: transparent;
-  }
-
-  .badge--info {
-    background-color: color-mix(
-      in srgb,
-      var(--g-color-utility-blue-500) 15%,
-      transparent
-    );
-    color: var(--g-color-utility-blue-700);
-    border-color: transparent;
-  }
-
-  .badge--neutral {
-    background-color: var(--g-color-brand-purple-100);
-    color: var(--g-color-brand-purple-800);
-    border-color: transparent;
-  }
-
-  .badge__content {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25em;
-  }
-`;

package/src/components/button/button.styles.js

@@ -1,69 +0,0 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const buttonStyles = css`
-  ${focusRingStyles}
-
-  /* Inlined component-base mixin */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-    --button-border-radius-start: var(--g-theme-border-radius-md);
-    --button-border-radius-end: var(--g-theme-border-radius-md);
-  }
-
-  .button {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--g-theme-spacing-sm);
-    background: var(--g-theme-button-primary-color-background-default);
-    color: var(--g-theme-button-primary-color-content-default);
-    border-width: var(--g-theme-border-width-md);
-    border-style: solid;
-    border-color: var(--g-theme-button-primary-color-border-default);
-    padding-block: var(--g-theme-spacing-sm);
-    padding-inline: var(--g-theme-spacing-md);
-    border-start-start-radius: var(--button-border-radius-start);
-    border-start-end-radius: var(--button-border-radius-end);
-    border-end-start-radius: var(--button-border-radius-start);
-    border-end-end-radius: var(--button-border-radius-end);
-font: var(--g-theme-typography-label-default);
-    font-family: inherit;
-    text-decoration: none;
-    transition-property: color, border-color, background-color, outline;
-  }
-
-  .button:hover,
-  .button:focus-visible {
-    color: var(--g-theme-button-primary-color-content-hover);
-    background: var(--g-theme-button-primary-color-background-hover);
-    border-color: var(--g-theme-button-primary-color-border-hover);
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  .button:active {
-    color: var(--g-theme-button-primary-color-content-active);
-    background: var(--g-theme-button-primary-color-background-active);
-    border-color: var(--g-theme-button-primary-color-border-active);
-  }
-
-  .button:active {
-    transform: translateY(1px);
-  }
-
-  .button[disabled] {
-    background: var(--g-theme-button-primary-color-background-disabled);
-    color: var(--g-theme-button-primary-color-content-disabled);
-    border-color: var(--g-theme-button-primary-color-border-disabled);
-    cursor: not-allowed;
-    filter: grayscale(70%);
-    opacity: 0.8;
-  }
-`;

package/src/lib/classnames.js

@@ -1,61 +0,0 @@
-// classnames npm package moved to a local dependency
-
-var hasOwn = {}.hasOwnProperty;
-
-export function cx() {
-	var classes = "";
-	var i;
-	var arg;
-
-	for (i = 0; i < arguments.length; i++) {
-		arg = arguments[i];
-		if (arg) {
-			classes = appendClass(classes, parseValue(arg));
-		}
-	}
-
-	return classes;
-}
-
-function parseValue(arg) {
-	if (typeof arg === "string" || typeof arg === "number") {
-		return arg;
-	}
-
-	if (typeof arg !== "object") {
-		return "";
-	}
-
-	if (Array.isArray(arg)) {
-		return cx.apply(null, arg);
-	}
-
-	if (
-		arg.toString !== Object.prototype.toString &&
-		!arg.toString.toString().includes("[native code]")
-	) {
-		return arg.toString();
-	}
-
-	var classes = "";
-
-	for (var key in arg) {
-		if (hasOwn.call(arg, key) && arg[key]) {
-			classes = appendClass(classes, key);
-		}
-	}
-
-	return classes;
-}
-
-function appendClass(value, newClass) {
-	if (!newClass) {
-		return value;
-	}
-
-	if (value) {
-		return `${value} ${newClass}`;
-	}
-
-	return value + newClass;
-}

package/src/lib/styles/focus-ring.styles.js

@@ -1,34 +0,0 @@
-import { css } from "lit";
-
-export const focusRingStyles = css`
-  .focus-ring,
-  :host(.focus-ring) {
-    outline: 0px solid transparent;
-    outline-offset: var(--g-theme-focus-ring-offset-default);
-    transition-duration: var(--g-animation-duration-20);
-    transition-properties: outline-color, width;
-  }
-
-  .focus-ring:focus-visible,
-  :host(.focus-ring):focus-visible {
-    outline: var(--g-theme-focus-ring-width-default) solid
-      var(--g-theme-focus-ring-color-default);
-  }
-
-  @media (prefers-contrast: more) {
-    .focus-ring:focus-visible,
-    :host(.focus-ring):focus-visible {
-      outline: var(--g-theme-focus-ring-width-default) solid
-        var(--g-theme-focus-ring-color-contrast);
-      box-shadow: 0 0 0
-        calc(
-          (
-              var(--g-theme-focus-ring-width-default) +
-                var(--g-theme-focus-ring-offset-default)
-            ) *
-            1.5
-        )
-        var(--g-theme-focus-ring-color-contrast-shadow);
-    }
-  }
-`;