@shineuix/react 0.0.0-stage → 1.0.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/components.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components/components.js';

package/dist/runtime.d.ts

@@ -0,0 +1,19 @@
+/*!
+ * Vendored from @stencil/react-output-target 1.6.2, src/runtime/create-component.ts.
+ * The MIT License (MIT). Copyright (c) 2019-present Drifty Co.
+ * Changed here: the wrapper renders nothing on the server and during hydration (useClientRender),
+ * and `slot` is written when React creates the element (beforeInsert).
+ */
+import type { EventName, Options } from '@lit/react';
+import React from 'react';
+export type { EventName, Options } from '@lit/react';
+type EventNames = Record<string, EventName | string>;
+type StencilProps<I extends HTMLElement, E extends EventNames, C, R extends keyof C = never> = Omit<React.HTMLAttributes<I>, keyof E> & Partial<{
+    [K in keyof E]: E[K] extends EventName<infer T> ? (event: T) => void : (event: any) => void;
+}> & Required<Pick<C, R>> & Partial<Omit<C, R>> & React.RefAttributes<I>;
+export type StencilReactComponent<I extends HTMLElement, E extends EventNames = {}, C = Omit<I, keyof HTMLElement>, R extends keyof C = never> = React.FunctionComponent<StencilProps<I, E, C, R>>;
+export declare const mergeClassNames: (currentClasses: Iterable<string>, newClassName: string | undefined, oldClassName: string | undefined) => string;
+export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}, C = Omit<I, keyof HTMLElement>, R extends keyof C = never>({ defineCustomElement, tagName, transformTag, ...options }: Options<I, E> & {
+    defineCustomElement: () => void;
+    transformTag?: (tagName: string) => string;
+}) => StencilReactComponent<I, E, C, R>;

package/dist/runtime.js

@@ -0,0 +1,98 @@
+/*!
+ * Vendored from @stencil/react-output-target 1.6.2, src/runtime/create-component.ts.
+ * The MIT License (MIT). Copyright (c) 2019-present Drifty Co.
+ * Changed here: the wrapper renders nothing on the server and during hydration (useClientRender),
+ * and `slot` is written when React creates the element (beforeInsert).
+ */
+import { createComponent as createComponentWrapper } from '@lit/react';
+import React from 'react';
+const splitClassName = (className) => className ? className.split(/\s+/).filter(Boolean) : [];
+export const mergeClassNames = (currentClasses, newClassName, oldClassName) => {
+    const incoming = new Set(splitClassName(newClassName));
+    const previous = new Set(splitClassName(oldClassName));
+    const finalClassNames = [];
+    for (const className of currentClasses) {
+        if (incoming.has(className)) {
+            finalClassNames.push(className);
+            incoming.delete(className);
+        }
+        else if (!previous.has(className)) {
+            finalClassNames.push(className);
+        }
+    }
+    for (const className of incoming) {
+        finalClassNames.push(className);
+    }
+    return finalClassNames.join(' ');
+};
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const subscribeNever = () => () => { };
+/**
+ * False on the server and while the page hydrates, true in every other render.
+ *
+ * ShineUI's elements render into their own light DOM. In a server-rendered React app (Next.js,
+ * Remix) that collides with hydration: the element modules define the tags on import, the host
+ * tags the server sent upgrade and draw their inner markup, and React then finds children it did
+ * not render, reports a hydration mismatch (#418) and throws the server's markup away for the
+ * whole tree. So a wrapper renders nothing until this is true. useSyncExternalStore is React's
+ * own switch for it: the server snapshot is used on the server and during hydration, the client
+ * snapshot in every other render, so an app that only renders on the client sees the element in
+ * its first render.
+ */
+const useClientRender = () => React.useSyncExternalStore(subscribeNever, () => true, () => false);
+/**
+ * Props React has to write when it creates the element, before it inserts it anywhere.
+ *
+ * @lit/react sets every prop the element's prototype knows as a property in a layout effect, after
+ * React has inserted the element. That is too late for `slot`. A ShineUI element draws in its own
+ * light DOM, and it files a child under a slot when the child is inserted, as a shadow host would
+ * on assignment. A `SuiButton slot="actions"` that React adds to a rendered page header arrived
+ * with no slot, went to the default slot (the title) and stayed there when its slot came a moment
+ * later. On the first render it happened to work, because the header draws after the effect.
+ * Hiding these names from the prototype check makes @lit/react hand them to React, which writes
+ * them while it creates the element.
+ */
+const beforeInsert = new Set(['slot']);
+function withAttributesFirst(elementClass) {
+    // A server import may hand over no class at all; @lit/react reads it only in a client render.
+    if (!elementClass || typeof elementClass.prototype !== 'object' || typeof Proxy === 'undefined')
+        return elementClass;
+    const prototype = new Proxy(elementClass.prototype, { has: (target, key) => !beforeInsert.has(key) && Reflect.has(target, key) });
+    return { name: elementClass.name, prototype };
+}
+export const createComponent = ({ defineCustomElement, tagName, transformTag, ...options }) => {
+    if (typeof defineCustomElement !== 'undefined') {
+        defineCustomElement();
+    }
+    const finalTagName = transformTag ? transformTag(tagName) : tagName;
+    const ReactComponent = createComponentWrapper({ ...options, elementClass: withAttributesFirst(options.elementClass), tagName: finalTagName });
+    const WrappedComponent = React.forwardRef((props, ref) => {
+        const { className, class: classProp, ...restProps } = props;
+        const incomingClassName = className ?? classProp ?? '';
+        const client = useClientRender();
+        const elementRef = React.useRef(null);
+        const previousClassName = React.useRef('');
+        useIsomorphicLayoutEffect(() => {
+            const element = elementRef.current;
+            if (element === null || incomingClassName === previousClassName.current) {
+                return;
+            }
+            element.className = mergeClassNames(Array.from(element.classList), incomingClassName, previousClassName.current);
+            previousClassName.current = incomingClassName;
+        });
+        const setRef = React.useCallback((node) => {
+            elementRef.current = node;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else if (ref !== null && ref !== undefined) {
+                ref.current = node;
+            }
+        }, [ref]);
+        if (!client)
+            return null;
+        return React.createElement(ReactComponent, { ...restProps, ref: setRef });
+    });
+    WrappedComponent.displayName = options.displayName ?? finalTagName;
+    return WrappedComponent;
+};

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@shineuix/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "description": "React bindings for ShineUI web components.",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "web-components",
+    "design-system",
+    "ui",
+    "components",
+    "shineui"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "LICENSE",
+    "dist/",
+    "!dist/components/components.server.*"
+  ],
+  "dependencies": {
+    "@lit/react": "^1.0.8",
+    "@shineuix/core": "1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@stencil/react-output-target": "^1.6.2",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "~5.9.0"
+  },
+  "author": "ShineUI contributors",
+  "homepage": "https://shineui.dev",
+  "bugs": {
+    "email": "info@shineui.dev"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smallandsimple/shineui.git",
+    "directory": "packages/react"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/vendor-runtime.mjs"
+  }
 }