@neumorphism-ui/react 0.0.0-stage → 1.0.0-next.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HungHD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,37 @@
-# Temporary Holding Version
+# @neumorphism-ui/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React 18.3 and 19 wrappers for [neumorphism-ui](https://github.com/hunghdvn/neumorphism-ui):
+`NeuButton`, `NeuSwitch`, `NeuTextField`, `NeuIcon`, `NeuIconButton`, `NeuButtonGroup`,
+`NeuSurface`, `NeuDivider`, `NeuBadge`, `NeuAvatar` and `NeuSpinner`, generated from the element definitions. They set props
+as element properties, forward refs to the real element, work controlled or uncontrolled like
+React's `<input>`, and server-render declarative shadow roots, so they work with Next.js App Router
+streaming. Pre-release.
+
+```sh
+npm install @neumorphism-ui/react@next @neumorphism-ui/tokens@next
+```
+
+```tsx
+import '@neumorphism-ui/tokens/neu.css';
+import { NeuSwitch, NeuTextField } from '@neumorphism-ui/react';
+
+<NeuTextField label="Email" value={email} onChange={(e) => setEmail((e.target as HTMLInputElement).value)} />;
+<NeuSwitch name="notify" defaultChecked>Notifications</NeuSwitch>;
+```
+
+## Icon libraries
+
+`NeuIcon` and `NeuIconButton` ship the built-in `system` icons. Register your own library with
+`registerIconLibrary`, re-exported here from `@neumorphism-ui/elements` so you need no second import:
+
+```tsx
+import { NeuIcon, registerIconLibrary } from '@neumorphism-ui/react';
+
+registerIconLibrary('brand', { resolve: (name) => `/icons/${name}.svg` });
+
+<NeuIcon library="brand" name="logo" label="Acme" />;
+```
+
+`system` is reserved; registering a library with that name is ignored.
+
+MIT licensed.

package/dist/create-component.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentDef } from '@neumorphism-ui/elements/ssr.js';
+import * as React from 'react';
+export type WrapperProps<K extends PropertyKey = never> = Omit<React.HTMLAttributes<HTMLElement>, K> & {
+    children?: React.ReactNode;
+};
+export interface WrapperConfig {
+    /** React prop name → DOM event name, e.g. { onChange: 'change' }. */
+    readonly events?: Readonly<Record<string, string>>;
+}
+interface ElementClass<E extends HTMLElement> {
+    readonly def: ComponentDef;
+    new (): E;
+}
+export declare function createComponent<P extends object, E extends HTMLElement>(elementClass: ElementClass<E>, config?: WrapperConfig): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<E>>;
+export {};

package/dist/create-component.js

@@ -0,0 +1,147 @@
+'use client';
+import { attributeName, coerceProperty, formDefaultProp, renderShadowContents, serializeAttribute, } from '@neumorphism-ui/elements/ssr.js';
+import * as React from 'react';
+const isServer = typeof window === 'undefined';
+const useIsomorphicLayoutEffect = isServer ? React.useEffect : React.useLayoutEffect;
+const needsClassAttribute = Number.parseInt(React.version, 10) < 19;
+export function createComponent(elementClass, config = {}) {
+    const def = elementClass.def;
+    const events = config.events ?? {};
+    const valueProp = def.form?.valueProp;
+    const defaultProp = formDefaultProp(def);
+    const elementKeys = new Set(Object.keys(def.props));
+    if (defaultProp)
+        elementKeys.add(defaultProp);
+    const Wrapper = React.forwardRef(function NeuWrapper(props, forwardedRef) {
+        const elementRef = React.useRef(null);
+        const { children, ...rest } = props;
+        const host = {};
+        const element = {};
+        // Several props may share one DOM event (onInput and onChange on a text field); they run in
+        // the order of the wrapper's event map.
+        const handlers = {};
+        for (const [key, eventName] of Object.entries(events)) {
+            const value = rest[key];
+            if (typeof value === 'function')
+                (handlers[eventName] ??= []).push(value);
+        }
+        for (const [key, value] of Object.entries(rest)) {
+            if (Object.hasOwn(events, key))
+                continue;
+            if (elementKeys.has(key)) {
+                element[key] = value;
+            }
+            else {
+                host[key] = value;
+            }
+        }
+        if (needsClassAttribute && 'className' in host) {
+            host.class = host.className;
+            delete host.className;
+        }
+        const latest = React.useRef(element);
+        latest.current = element;
+        const handlersRef = React.useRef(handlers);
+        handlersRef.current = handlers;
+        const applied = React.useRef(new Set());
+        // Properties after every commit. Defaults go first so a controlled value set in the same pass wins.
+        useIsomorphicLayoutEffect(() => {
+            const node = elementRef.current;
+            if (!node)
+                return;
+            const absent = (key) => element[key] === undefined || (key === defaultProp && element[key] === null);
+            for (const key of applied.current) {
+                if (!absent(key))
+                    continue;
+                if (key === defaultProp && valueProp) {
+                    // The element's default setter would stringify undefined; drop the attribute instead.
+                    node.removeAttribute(attributeName(valueProp, def.props[valueProp]));
+                }
+                else {
+                    node[key] = undefined;
+                }
+            }
+            const next = new Set();
+            const keys = Object.keys(element).sort((a, b) => Number(b === defaultProp) - Number(a === defaultProp));
+            for (const key of keys) {
+                const value = element[key];
+                if (absent(key))
+                    continue;
+                next.add(key);
+                if (node[key] !== value)
+                    node[key] = value;
+            }
+            applied.current = next;
+        });
+        const eventNames = Object.keys(handlers).sort().join(' ');
+        useIsomorphicLayoutEffect(() => {
+            const node = elementRef.current;
+            if (!node)
+                return;
+            const names = new Set(eventNames === '' ? [] : eventNames.split(' '));
+            if (valueProp) {
+                names.add('input');
+                names.add('change');
+            }
+            const listener = (event) => {
+                if (event.target !== node)
+                    return;
+                for (const handler of handlersRef.current[event.type] ?? [])
+                    handler(event);
+                if (!valueProp)
+                    return;
+                // Controlled: once React has had a chance to re-render, snap back to the prop.
+                queueMicrotask(() => {
+                    const wanted = latest.current[valueProp];
+                    const current = elementRef.current;
+                    if (current && wanted !== undefined && current[valueProp] !== wanted) {
+                        current[valueProp] = wanted;
+                    }
+                });
+            };
+            for (const name of names)
+                node.addEventListener(name, listener);
+            return () => {
+                for (const name of names)
+                    node.removeEventListener(name, listener);
+            };
+        }, [eventNames]);
+        const setRef = React.useCallback((node) => {
+            elementRef.current = node;
+            if (typeof forwardedRef === 'function')
+                forwardedRef(node);
+            else if (forwardedRef)
+                forwardedRef.current = node;
+        }, [forwardedRef]);
+        const serverAttributes = {};
+        let template = null;
+        if (isServer) {
+            for (const [key, decl] of Object.entries(def.props)) {
+                const raw = key === valueProp && element[key] === undefined && defaultProp
+                    ? element[defaultProp]
+                    : element[key];
+                if (raw === undefined)
+                    continue;
+                const attribute = serializeAttribute(decl, coerceProperty(decl, raw));
+                if (attribute !== null)
+                    serverAttributes[attributeName(key, decl)] = attribute;
+            }
+            const templateProps = {
+                shadowrootmode: 'open',
+                dangerouslySetInnerHTML: { __html: renderShadowContents(def, serverAttributes) },
+            };
+            if (def.delegatesFocus)
+                templateProps.shadowrootdelegatesfocus = '';
+            template = React.createElement('template', templateProps);
+        }
+        const hostProps = {
+            ...host,
+            ...serverAttributes,
+            ref: setRef,
+            suppressHydrationWarning: true,
+        };
+        return React.createElement(def.tag, hostProps, template, children);
+    });
+    Wrapper.displayName = def.tag;
+    return Wrapper;
+}

package/dist/generated/avatar.d.ts

@@ -0,0 +1,14 @@
+import { NeuAvatar as NeuAvatarElement } from '@neumorphism-ui/elements/avatar.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuAvatarOwnProps {
+    src?: string;
+    label?: string;
+    initials?: string;
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'circle' | 'rounded';
+}
+export type NeuAvatarProps = WrapperProps<keyof NeuAvatarOwnProps> & NeuAvatarOwnProps;
+export declare const NeuAvatar: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuAvatarOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuAvatarOwnProps & import("react").RefAttributes<NeuAvatarElement>>;
+export {};

package/dist/generated/avatar.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-avatar definition. Do not edit.
+'use client';
+import { NeuAvatar as NeuAvatarElement } from '@neumorphism-ui/elements/avatar.js';
+import { createComponent } from '../create-component.js';
+export const NeuAvatar = createComponent(NeuAvatarElement, {
+    events: {},
+});

package/dist/generated/badge.d.ts

@@ -0,0 +1,11 @@
+import { NeuBadge as NeuBadgeElement } from '@neumorphism-ui/elements/badge.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuBadgeOwnProps {
+    variant?: 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+    pill?: boolean;
+}
+export type NeuBadgeProps = WrapperProps<keyof NeuBadgeOwnProps> & NeuBadgeOwnProps;
+export declare const NeuBadge: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuBadgeOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuBadgeOwnProps & import("react").RefAttributes<NeuBadgeElement>>;
+export {};

package/dist/generated/badge.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-badge definition. Do not edit.
+'use client';
+import { NeuBadge as NeuBadgeElement } from '@neumorphism-ui/elements/badge.js';
+import { createComponent } from '../create-component.js';
+export const NeuBadge = createComponent(NeuBadgeElement, {
+    events: {},
+});

package/dist/generated/button-group.d.ts

@@ -0,0 +1,11 @@
+import { NeuButtonGroup as NeuButtonGroupElement } from '@neumorphism-ui/elements/button-group.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuButtonGroupOwnProps {
+    label?: string;
+    orientation?: 'horizontal' | 'vertical';
+}
+export type NeuButtonGroupProps = WrapperProps<keyof NeuButtonGroupOwnProps> & NeuButtonGroupOwnProps;
+export declare const NeuButtonGroup: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuButtonGroupOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuButtonGroupOwnProps & import("react").RefAttributes<NeuButtonGroupElement>>;
+export {};

package/dist/generated/button-group.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-button-group definition. Do not edit.
+'use client';
+import { NeuButtonGroup as NeuButtonGroupElement } from '@neumorphism-ui/elements/button-group.js';
+import { createComponent } from '../create-component.js';
+export const NeuButtonGroup = createComponent(NeuButtonGroupElement, {
+    events: {},
+});

package/dist/generated/button.d.ts

@@ -0,0 +1,14 @@
+import { NeuButton as NeuButtonElement } from '@neumorphism-ui/elements/button.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuButtonOwnProps {
+    variant?: 'default' | 'primary' | 'flat';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+}
+export type NeuButtonProps = WrapperProps<keyof NeuButtonOwnProps> & NeuButtonOwnProps;
+export declare const NeuButton: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuButtonOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuButtonOwnProps & import("react").RefAttributes<NeuButtonElement>>;
+export {};

package/dist/generated/button.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-button definition. Do not edit.
+'use client';
+import { NeuButton as NeuButtonElement } from '@neumorphism-ui/elements/button.js';
+import { createComponent } from '../create-component.js';
+export const NeuButton = createComponent(NeuButtonElement, {
+    events: {},
+});

package/dist/generated/divider.d.ts

@@ -0,0 +1,10 @@
+import { NeuDivider as NeuDividerElement } from '@neumorphism-ui/elements/divider.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuDividerOwnProps {
+    orientation?: 'horizontal' | 'vertical';
+}
+export type NeuDividerProps = WrapperProps<keyof NeuDividerOwnProps> & NeuDividerOwnProps;
+export declare const NeuDivider: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "orientation"> & {
+    children?: import("react").ReactNode;
+} & NeuDividerOwnProps & import("react").RefAttributes<NeuDividerElement>>;
+export {};

package/dist/generated/divider.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-divider definition. Do not edit.
+'use client';
+import { NeuDivider as NeuDividerElement } from '@neumorphism-ui/elements/divider.js';
+import { createComponent } from '../create-component.js';
+export const NeuDivider = createComponent(NeuDividerElement, {
+    events: {},
+});

package/dist/generated/icon-button.d.ts

@@ -0,0 +1,17 @@
+import { NeuIconButton as NeuIconButtonElement } from '@neumorphism-ui/elements/icon-button.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuIconButtonOwnProps {
+    icon?: string;
+    library?: string;
+    label?: string;
+    shape?: 'circle' | 'square';
+    variant?: 'default' | 'primary' | 'flat';
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+}
+export type NeuIconButtonProps = WrapperProps<keyof NeuIconButtonOwnProps> & NeuIconButtonOwnProps;
+export declare const NeuIconButton: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuIconButtonOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuIconButtonOwnProps & import("react").RefAttributes<NeuIconButtonElement>>;
+export {};

package/dist/generated/icon-button.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-icon-button definition. Do not edit.
+'use client';
+import { NeuIconButton as NeuIconButtonElement } from '@neumorphism-ui/elements/icon-button.js';
+import { createComponent } from '../create-component.js';
+export const NeuIconButton = createComponent(NeuIconButtonElement, {
+    events: {},
+});

package/dist/generated/icon.d.ts

@@ -0,0 +1,12 @@
+import { NeuIcon as NeuIconElement } from '@neumorphism-ui/elements/icon.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuIconOwnProps {
+    name?: string;
+    library?: string;
+    label?: string;
+}
+export type NeuIconProps = WrapperProps<keyof NeuIconOwnProps> & NeuIconOwnProps;
+export declare const NeuIcon: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuIconOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuIconOwnProps & import("react").RefAttributes<NeuIconElement>>;
+export {};

package/dist/generated/icon.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-icon definition. Do not edit.
+'use client';
+import { NeuIcon as NeuIconElement } from '@neumorphism-ui/elements/icon.js';
+import { createComponent } from '../create-component.js';
+export const NeuIcon = createComponent(NeuIconElement, {
+    events: {},
+});

package/dist/generated/index.d.ts

@@ -0,0 +1,11 @@
+export { NeuAvatar, type NeuAvatarProps } from './avatar.js';
+export { NeuBadge, type NeuBadgeProps } from './badge.js';
+export { NeuButton, type NeuButtonProps } from './button.js';
+export { NeuButtonGroup, type NeuButtonGroupProps } from './button-group.js';
+export { NeuDivider, type NeuDividerProps } from './divider.js';
+export { NeuIcon, type NeuIconProps } from './icon.js';
+export { NeuIconButton, type NeuIconButtonProps } from './icon-button.js';
+export { NeuSpinner, type NeuSpinnerProps } from './spinner.js';
+export { NeuSurface, type NeuSurfaceProps } from './surface.js';
+export { NeuSwitch, type NeuSwitchProps } from './switch.js';
+export { NeuTextField, type NeuTextFieldProps } from './text-field.js';

package/dist/generated/index.js

@@ -0,0 +1,12 @@
+// Generated by tools/gen. Do not edit.
+export { NeuAvatar } from './avatar.js';
+export { NeuBadge } from './badge.js';
+export { NeuButton } from './button.js';
+export { NeuButtonGroup } from './button-group.js';
+export { NeuDivider } from './divider.js';
+export { NeuIcon } from './icon.js';
+export { NeuIconButton } from './icon-button.js';
+export { NeuSpinner } from './spinner.js';
+export { NeuSurface } from './surface.js';
+export { NeuSwitch } from './switch.js';
+export { NeuTextField } from './text-field.js';

package/dist/generated/spinner.d.ts

@@ -0,0 +1,11 @@
+import { NeuSpinner as NeuSpinnerElement } from '@neumorphism-ui/elements/spinner.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuSpinnerOwnProps {
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+export type NeuSpinnerProps = WrapperProps<keyof NeuSpinnerOwnProps> & NeuSpinnerOwnProps;
+export declare const NeuSpinner: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuSpinnerOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuSpinnerOwnProps & import("react").RefAttributes<NeuSpinnerElement>>;
+export {};

package/dist/generated/spinner.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-spinner definition. Do not edit.
+'use client';
+import { NeuSpinner as NeuSpinnerElement } from '@neumorphism-ui/elements/spinner.js';
+import { createComponent } from '../create-component.js';
+export const NeuSpinner = createComponent(NeuSpinnerElement, {
+    events: {},
+});

package/dist/generated/surface.d.ts

@@ -0,0 +1,13 @@
+import { NeuSurface as NeuSurfaceElement } from '@neumorphism-ui/elements/surface.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuSurfaceOwnProps {
+    shape?: 'raised' | 'inset' | 'flat' | 'convex' | 'concave';
+    elevation?: 'sm' | 'md' | 'lg';
+    radius?: 'sm' | 'md' | 'lg' | 'full';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+export type NeuSurfaceProps = WrapperProps<keyof NeuSurfaceOwnProps> & NeuSurfaceOwnProps;
+export declare const NeuSurface: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuSurfaceOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuSurfaceOwnProps & import("react").RefAttributes<NeuSurfaceElement>>;
+export {};

package/dist/generated/surface.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-surface definition. Do not edit.
+'use client';
+import { NeuSurface as NeuSurfaceElement } from '@neumorphism-ui/elements/surface.js';
+import { createComponent } from '../create-component.js';
+export const NeuSurface = createComponent(NeuSurfaceElement, {
+    events: {},
+});

package/dist/generated/switch.d.ts

@@ -0,0 +1,18 @@
+import { NeuSwitch as NeuSwitchElement } from '@neumorphism-ui/elements/switch.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuSwitchOwnProps {
+    checked?: boolean;
+    name?: string;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    defaultChecked?: boolean;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+}
+export type NeuSwitchProps = WrapperProps<keyof NeuSwitchOwnProps> & NeuSwitchOwnProps;
+export declare const NeuSwitch: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuSwitchOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuSwitchOwnProps & import("react").RefAttributes<NeuSwitchElement>>;
+export {};

package/dist/generated/switch.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-switch definition. Do not edit.
+'use client';
+import { NeuSwitch as NeuSwitchElement } from '@neumorphism-ui/elements/switch.js';
+import { createComponent } from '../create-component.js';
+export const NeuSwitch = createComponent(NeuSwitchElement, {
+    events: { onInput: 'input', onChange: 'change' },
+});

package/dist/generated/text-field.d.ts

@@ -0,0 +1,29 @@
+import { NeuTextField as NeuTextFieldElement } from '@neumorphism-ui/elements/text-field.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuTextFieldOwnProps {
+    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+    value?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    helpText?: string;
+    errorText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    autocomplete?: string;
+    inputMode?: string;
+    enterKeyHint?: string;
+    size?: 'sm' | 'md' | 'lg';
+    defaultValue?: string;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+}
+export type NeuTextFieldProps = WrapperProps<keyof NeuTextFieldOwnProps> & NeuTextFieldOwnProps;
+export declare const NeuTextField: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuTextFieldOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuTextFieldOwnProps & import("react").RefAttributes<NeuTextFieldElement>>;
+export {};

package/dist/generated/text-field.js

@@ -0,0 +1,7 @@
+// Generated by tools/gen from the neu-text-field definition. Do not edit.
+'use client';
+import { NeuTextField as NeuTextFieldElement } from '@neumorphism-ui/elements/text-field.js';
+import { createComponent } from '../create-component.js';
+export const NeuTextField = createComponent(NeuTextFieldElement, {
+    events: { onInput: 'input', onChange: 'input' },
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './generated/index.js';
+export { createComponent, type WrapperConfig, type WrapperProps } from './create-component.js';
+export { registerIconLibrary, type IconLibrary } from '@neumorphism-ui/elements/icons.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './generated/index.js';
+export { createComponent } from './create-component.js';
+// Hand-written, Node-safe: lets React apps register icon libraries without a second import path.
+export { registerIconLibrary } from '@neumorphism-ui/elements/icons.js';

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@neumorphism-ui/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-next.0",
+  "description": "React wrappers for neumorphism-ui",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hunghdvn/neumorphism-ui.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@neumorphism-ui/elements": "1.0.0-next.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3 || ^19",
+    "react-dom": "^18.3 || ^19"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "esbuild": "0.28.2",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react18": "npm:react@18.3.1",
+    "react-dom18": "npm:react-dom@18.3.1"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "pnpm --filter @neumorphism-ui/elements build && vitest run && node scripts/ssr-react18.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }