@neumorphism-ui/react 1.0.0-next.1 → 1.0.0-next.2

package/README.md

@@ -2,7 +2,8 @@
 
 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
+`NeuSurface`, `NeuDivider`, `NeuBadge`, `NeuAvatar`, `NeuSpinner`, `NeuTextarea`, `NeuNumberField`,
+`NeuCheckbox`, `NeuRadioGroup`, `NeuRadio`, `NeuSlider`, `NeuSelect` and `NeuOption`, 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.
@@ -19,6 +20,19 @@ import { NeuSwitch, NeuTextField } from '@neumorphism-ui/react';
 <NeuSwitch name="notify" defaultChecked>Notifications</NeuSwitch>;
 ```
 
+```tsx
+import { NeuOption, NeuRadio, NeuRadioGroup, NeuSelect } from '@neumorphism-ui/react';
+
+<NeuSelect label="Plan" name="plan" defaultValue="pro">
+  <NeuOption value="free">Free</NeuOption>
+  <NeuOption value="pro">Pro</NeuOption>
+</NeuSelect>;
+<NeuRadioGroup label="Billing" name="billing" defaultValue="monthly">
+  <NeuRadio value="monthly">Monthly</NeuRadio>
+  <NeuRadio value="yearly">Yearly</NeuRadio>
+</NeuRadioGroup>;
+```
+
 ## Icon libraries
 
 `NeuIcon` and `NeuIconButton` ship the built-in `system` icons. Register your own library with

package/dist/create-component.js

@@ -1,15 +1,58 @@
 'use client';
-import { attributeName, coerceProperty, formDefaultProp, renderShadowContents, serializeAttribute, } from '@neumorphism-ui/elements/ssr.js';
+import { attributeName, coerceProperty, formDefaultProp, optionLabel, 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;
+function textOf(node) {
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join('');
+    if (React.isValidElement(node))
+        return textOf(node.props.children);
+    return '';
+}
+/**
+ * Option elements among the children at any depth, as the client reads them, looking through
+ * fragments, arrays and plain elements (spec §8.4). A component other than the option wrapper may
+ * render options the server cannot see, so meeting one returns no options at all: the select then
+ * leaves its display empty for the client to fill rather than guessing from part of the list.
+ */
+function collectOptions(children, optionTag) {
+    const options = [];
+    let complete = true;
+    const walk = (node) => {
+        React.Children.forEach(node, (child) => {
+            if (!React.isValidElement(child))
+                return;
+            const props = child.props;
+            const type = child.type;
+            const isOption = type === optionTag || (typeof type !== 'string' && type?.displayName === optionTag);
+            if (!isOption) {
+                if (child.type === React.Fragment || typeof type === 'string')
+                    walk(props.children);
+                else
+                    complete = false;
+                return;
+            }
+            const label = optionLabel(textOf(props.children));
+            options.push({
+                value: props.value === undefined || props.value === null ? label : String(props.value),
+                label,
+                disabled: !!props.disabled,
+            });
+        });
+    };
+    walk(children);
+    return complete ? options : [];
+}
 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));
+    const elementKeys = new Set([...Object.keys(def.props), ...Object.keys(def.properties ?? {})]);
     if (defaultProp)
         elementKeys.add(defaultProp);
     const Wrapper = React.forwardRef(function NeuWrapper(props, forwardedRef) {
@@ -44,7 +87,9 @@ export function createComponent(elementClass, config = {}) {
         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.
+        // Properties after every commit. Defaults go first so a controlled value set in the same pass
+        // wins, and the value goes last so min, max and step are in place when it is clamped (as
+        // ReactDOM orders a native range input).
         useIsomorphicLayoutEffect(() => {
             const node = elementRef.current;
             if (!node)
@@ -62,7 +107,8 @@ export function createComponent(elementClass, config = {}) {
                 }
             }
             const next = new Set();
-            const keys = Object.keys(element).sort((a, b) => Number(b === defaultProp) - Number(a === defaultProp));
+            const rank = (key) => (key === defaultProp ? 0 : key === valueProp ? 2 : 1);
+            const keys = Object.keys(element).sort((a, b) => rank(a) - rank(b));
             for (const key of keys) {
                 const value = element[key];
                 if (absent(key))
@@ -128,7 +174,13 @@ export function createComponent(elementClass, config = {}) {
             }
             const templateProps = {
                 shadowrootmode: 'open',
-                dangerouslySetInnerHTML: { __html: renderShadowContents(def, serverAttributes) },
+                dangerouslySetInnerHTML: {
+                    __html: def.optionsFrom
+                        ? renderShadowContents(def, serverAttributes, {
+                            options: collectOptions(children, def.optionsFrom),
+                        })
+                        : renderShadowContents(def, serverAttributes),
+                },
             };
             if (def.delegatesFocus)
                 templateProps.shadowrootdelegatesfocus = '';

package/dist/generated/checkbox.d.ts

@@ -0,0 +1,19 @@
+import { NeuCheckbox as NeuCheckboxElement } from '@neumorphism-ui/elements/checkbox.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuCheckboxOwnProps {
+    checked?: boolean;
+    indeterminate?: 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 NeuCheckboxProps = WrapperProps<keyof NeuCheckboxOwnProps> & NeuCheckboxOwnProps;
+export declare const NeuCheckbox: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuCheckboxOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuCheckboxOwnProps & import("react").RefAttributes<NeuCheckboxElement>>;
+export {};

package/dist/generated/checkbox.js

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

package/dist/generated/index.d.ts

@@ -2,10 +2,18 @@ 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 { NeuCheckbox, type NeuCheckboxProps } from './checkbox.js';
 export { NeuDivider, type NeuDividerProps } from './divider.js';
 export { NeuIcon, type NeuIconProps } from './icon.js';
 export { NeuIconButton, type NeuIconButtonProps } from './icon-button.js';
+export { NeuNumberField, type NeuNumberFieldProps } from './number-field.js';
+export { NeuOption, type NeuOptionProps } from './option.js';
+export { NeuRadio, type NeuRadioProps } from './radio.js';
+export { NeuRadioGroup, type NeuRadioGroupProps } from './radio-group.js';
+export { NeuSelect, type NeuSelectProps } from './select.js';
+export { NeuSlider, type NeuSliderProps } from './slider.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';
+export { NeuTextarea, type NeuTextareaProps } from './textarea.js';

package/dist/generated/index.js

@@ -3,10 +3,18 @@ export { NeuAvatar } from './avatar.js';
 export { NeuBadge } from './badge.js';
 export { NeuButton } from './button.js';
 export { NeuButtonGroup } from './button-group.js';
+export { NeuCheckbox } from './checkbox.js';
 export { NeuDivider } from './divider.js';
 export { NeuIcon } from './icon.js';
 export { NeuIconButton } from './icon-button.js';
+export { NeuNumberField } from './number-field.js';
+export { NeuOption } from './option.js';
+export { NeuRadio } from './radio.js';
+export { NeuRadioGroup } from './radio-group.js';
+export { NeuSelect } from './select.js';
+export { NeuSlider } from './slider.js';
 export { NeuSpinner } from './spinner.js';
 export { NeuSurface } from './surface.js';
 export { NeuSwitch } from './switch.js';
 export { NeuTextField } from './text-field.js';
+export { NeuTextarea } from './textarea.js';

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

@@ -0,0 +1,27 @@
+import { NeuNumberField as NeuNumberFieldElement } from '@neumorphism-ui/elements/number-field.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuNumberFieldOwnProps {
+    value?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    helpText?: string;
+    errorText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    incrementLabel?: string;
+    decrementLabel?: string;
+    defaultValue?: string;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+}
+export type NeuNumberFieldProps = WrapperProps<keyof NeuNumberFieldOwnProps> & NeuNumberFieldOwnProps;
+export declare const NeuNumberField: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuNumberFieldOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuNumberFieldOwnProps & import("react").RefAttributes<NeuNumberFieldElement>>;
+export {};

package/dist/generated/number-field.js

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

package/dist/generated/option.d.ts

@@ -0,0 +1,11 @@
+import { NeuOption as NeuOptionElement } from '@neumorphism-ui/elements/option.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuOptionOwnProps {
+    value?: string;
+    disabled?: boolean;
+}
+export type NeuOptionProps = WrapperProps<keyof NeuOptionOwnProps> & NeuOptionOwnProps;
+export declare const NeuOption: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuOptionOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuOptionOwnProps & import("react").RefAttributes<NeuOptionElement>>;
+export {};

package/dist/generated/option.js

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

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

@@ -0,0 +1,18 @@
+import { NeuRadioGroup as NeuRadioGroupElement } from '@neumorphism-ui/elements/radio-group.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuRadioGroupOwnProps {
+    label?: string;
+    name?: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    defaultValue?: string;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+}
+export type NeuRadioGroupProps = WrapperProps<keyof NeuRadioGroupOwnProps> & NeuRadioGroupOwnProps;
+export declare const NeuRadioGroup: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuRadioGroupOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuRadioGroupOwnProps & import("react").RefAttributes<NeuRadioGroupElement>>;
+export {};

package/dist/generated/radio-group.js

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

package/dist/generated/radio.d.ts

@@ -0,0 +1,11 @@
+import { NeuRadio as NeuRadioElement } from '@neumorphism-ui/elements/radio.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuRadioOwnProps {
+    value?: string;
+    disabled?: boolean;
+}
+export type NeuRadioProps = WrapperProps<keyof NeuRadioOwnProps> & NeuRadioOwnProps;
+export declare const NeuRadio: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuRadioOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuRadioOwnProps & import("react").RefAttributes<NeuRadioElement>>;
+export {};

package/dist/generated/radio.js

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

package/dist/generated/select.d.ts

@@ -0,0 +1,23 @@
+import { NeuSelect as NeuSelectElement } from '@neumorphism-ui/elements/select.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuSelectOwnProps {
+    value?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    helpText?: string;
+    errorText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    defaultValue?: string;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+    onNeuOpen?: (event: Event) => void;
+    onNeuClose?: (event: Event) => void;
+}
+export type NeuSelectProps = WrapperProps<keyof NeuSelectOwnProps> & NeuSelectOwnProps;
+export declare const NeuSelect: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuSelectOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuSelectOwnProps & import("react").RefAttributes<NeuSelectElement>>;
+export {};

package/dist/generated/select.js

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

package/dist/generated/slider.d.ts

@@ -0,0 +1,20 @@
+import { NeuSlider as NeuSliderElement } from '@neumorphism-ui/elements/slider.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuSliderOwnProps {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    defaultValue?: number;
+    valueFormatter?: (value: number) => string;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+}
+export type NeuSliderProps = WrapperProps<keyof NeuSliderOwnProps> & NeuSliderOwnProps;
+export declare const NeuSlider: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuSliderOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuSliderOwnProps & import("react").RefAttributes<NeuSliderElement>>;
+export {};

package/dist/generated/slider.js

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

package/dist/generated/textarea.d.ts

@@ -0,0 +1,28 @@
+import { NeuTextarea as NeuTextareaElement } from '@neumorphism-ui/elements/textarea.js';
+import { type WrapperProps } from '../create-component.js';
+interface NeuTextareaOwnProps {
+    value?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    helpText?: string;
+    errorText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    autocomplete?: string;
+    enterKeyHint?: string;
+    rows?: number;
+    resize?: 'none' | 'vertical' | 'auto';
+    size?: 'sm' | 'md' | 'lg';
+    defaultValue?: string;
+    onInput?: (event: Event) => void;
+    onChange?: (event: Event) => void;
+}
+export type NeuTextareaProps = WrapperProps<keyof NeuTextareaOwnProps> & NeuTextareaOwnProps;
+export declare const NeuTextarea: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, keyof NeuTextareaOwnProps> & {
+    children?: import("react").ReactNode;
+} & NeuTextareaOwnProps & import("react").RefAttributes<NeuTextareaElement>>;
+export {};

package/dist/generated/textarea.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neumorphism-ui/react",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.2",
   "description": "React wrappers for neumorphism-ui",
   "license": "MIT",
   "type": "module",
@@ -25,7 +25,7 @@
     "provenance": true
   },
   "dependencies": {
-    "@neumorphism-ui/elements": "1.0.0-next.1"
+    "@neumorphism-ui/elements": "1.0.0-next.2"
   },
   "peerDependencies": {
     "react": "^18.3 || ^19",