@nazuraki/ui-react 0.2.1

package/dist/Button.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual emphasis. Maps to .nb-btn--{variant}. */
+    variant?: "default" | "primary" | "accent" | "danger";
+}
+export declare function Button({ variant, className, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/Button.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Button({ variant = "default", className, ...rest }) {
+    const classes = ["nb-btn"];
+    if (variant !== "default")
+        classes.push(`nb-btn--${variant}`);
+    if (className)
+        classes.push(className);
+    return _jsx("button", { className: classes.join(" "), ...rest });
+}

package/dist/Card.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from "react";
+export type CardProps = HTMLAttributes<HTMLDivElement>;
+export declare function Card({ className, ...rest }: CardProps): import("react").JSX.Element;

package/dist/Card.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Card({ className, ...rest }) {
+    return _jsx("div", { className: className ? `nb-card ${className}` : "nb-card", ...rest });
+}

package/dist/Dialog.d.ts

@@ -0,0 +1,10 @@
+import type { DialogHTMLAttributes, ReactNode } from "react";
+export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "title"> {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    /** Rendered in a right-aligned action row below the content. */
+    actions?: ReactNode;
+}
+/** Modal dialog on the native <dialog> element (showModal + ::backdrop). */
+export declare function Dialog({ open, onClose, title, actions, className, children, ...rest }: DialogProps): import("react").JSX.Element;

package/dist/Dialog.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx } from "./cx.js";
+/** Modal dialog on the native <dialog> element (showModal + ::backdrop). */
+export function Dialog({ open, onClose, title, actions, className, children, ...rest }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (open && !el.open)
+            el.showModal();
+        else if (!open && el.open)
+            el.close();
+    }, [open]);
+    return (_jsxs("dialog", { ref: ref, className: cx("nb-dialog", className), onClose: onClose, ...rest, children: [title !== undefined && _jsx("h2", { className: "nb-dialog__title", children: title }), children, actions !== undefined && _jsx("div", { className: "nb-dialog__actions", children: actions })] }));
+}

package/dist/NavLink.d.ts

@@ -0,0 +1,4 @@
+import type { AnchorHTMLAttributes } from "react";
+export type NavLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+/** The switchboard-style uppercase link with chevron and glow hover. */
+export declare function NavLink({ className, ...rest }: NavLinkProps): import("react").JSX.Element;

package/dist/NavLink.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The switchboard-style uppercase link with chevron and glow hover. */
+export function NavLink({ className, ...rest }) {
+    return _jsx("a", { className: className ? `nb-link ${className}` : "nb-link", ...rest });
+}

package/dist/Tabs.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+}
+export interface TabsProps {
+    items: TabItem[];
+    /** Controlled active tab id; omit for uncontrolled. */
+    active?: string;
+    defaultActive?: string;
+    onChange?: (id: string) => void;
+}
+export declare function Tabs({ items, active, defaultActive, onChange }: TabsProps): import("react").JSX.Element;

package/dist/Tabs.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cx } from "./cx.js";
+export function Tabs({ items, active, defaultActive, onChange }) {
+    const [internal, setInternal] = useState(defaultActive ?? items[0]?.id);
+    const current = active ?? internal;
+    const select = (id) => {
+        setInternal(id);
+        onChange?.(id);
+    };
+    const activeItem = items.find((t) => t.id === current);
+    return (_jsxs("div", { children: [_jsx("div", { role: "tablist", className: "nb-tabs", children: items.map((t) => (_jsx("button", { role: "tab", type: "button", "aria-selected": t.id === current, className: cx("nb-tab", t.id === current && "nb-tab--active"), onClick: () => select(t.id), children: t.label }, t.id))) }), _jsx("div", { role: "tabpanel", className: "nb-tabpanel", children: activeItem?.content })] }));
+}

package/dist/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...parts: Array<string | false | null | undefined>): string;

package/dist/cx.js

@@ -0,0 +1,3 @@
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}

package/dist/feedback.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type SemanticVariant = "info" | "success" | "warning" | "danger";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: SemanticVariant | "primary";
+}
+export declare function Badge({ variant, className, ...rest }: BadgeProps): import("react").JSX.Element;
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    variant?: SemanticVariant;
+    title?: ReactNode;
+}
+export declare function Alert({ variant, title, className, children, ...rest }: AlertProps): import("react").JSX.Element;
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** 0–100 */
+    value: number;
+    accent?: boolean;
+}
+export declare function Progress({ value, accent, className, ...rest }: ProgressProps): import("react").JSX.Element;
+export declare function Spinner({ className, ...rest }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;

package/dist/feedback.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+export function Badge({ variant, className, ...rest }) {
+    return _jsx("span", { className: cx("nb-badge", variant && `nb-badge--${variant}`, className), ...rest });
+}
+export function Alert({ variant = "info", title, className, children, ...rest }) {
+    return (_jsxs("div", { role: "alert", className: cx("nb-alert", `nb-alert--${variant}`, className), ...rest, children: [title !== undefined && _jsx("span", { className: "nb-alert__title", children: title }), children] }));
+}
+export function Progress({ value, accent, className, ...rest }) {
+    const clamped = Math.max(0, Math.min(100, value));
+    return (_jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": clamped, className: cx("nb-progress", className), ...rest, children: _jsx("div", { className: cx("nb-progress__bar", accent && "nb-progress__bar--accent"), style: { width: `${clamped}%` } }) }));
+}
+export function Spinner({ className, ...rest }) {
+    return _jsx("span", { role: "status", "aria-label": "loading", className: cx("nb-spinner", className), ...rest });
+}

package/dist/form.d.ts

@@ -0,0 +1,23 @@
+import type { InputHTMLAttributes, LabelHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare function Input({ className, ...rest }: InputProps): import("react").JSX.Element;
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare function Textarea({ className, ...rest }: TextareaProps): import("react").JSX.Element;
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+export declare function Select({ className, ...rest }: SelectProps): import("react").JSX.Element;
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+}
+export declare function Label({ className, ...rest }: LabelProps): import("react").JSX.Element;
+/** Label + control wrapper with standard field spacing. */
+export declare function Field({ label, htmlFor, children }: {
+    label: ReactNode;
+    htmlFor?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+type ChoiceProps = InputHTMLAttributes<HTMLInputElement> & {
+    label?: ReactNode;
+};
+export declare const Checkbox: ({ label, className, ...rest }: ChoiceProps) => import("react").JSX.Element;
+export declare const Radio: ({ label, className, ...rest }: ChoiceProps) => import("react").JSX.Element;
+export declare const Switch: ({ label, className, ...rest }: ChoiceProps) => import("react").JSX.Element;
+export {};

package/dist/form.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+export function Input({ className, ...rest }) {
+    return _jsx("input", { className: cx("nb-input", className), ...rest });
+}
+export function Textarea({ className, ...rest }) {
+    return _jsx("textarea", { className: cx("nb-textarea", className), ...rest });
+}
+export function Select({ className, ...rest }) {
+    return _jsx("select", { className: cx("nb-select", className), ...rest });
+}
+export function Label({ className, ...rest }) {
+    return _jsx("label", { className: cx("nb-label", className), ...rest });
+}
+/** Label + control wrapper with standard field spacing. */
+export function Field({ label, htmlFor, children }) {
+    return (_jsxs("div", { className: "nb-field", children: [_jsx(Label, { htmlFor: htmlFor, children: label }), children] }));
+}
+function choice(kind) {
+    const inputClass = `nb-${kind}`;
+    const type = kind === "switch" ? "checkbox" : kind;
+    return function Choice({ label, className, ...rest }) {
+        const input = _jsx("input", { type: type, role: kind === "switch" ? "switch" : undefined, className: cx(inputClass, className), ...rest });
+        if (label === undefined)
+            return input;
+        return (_jsxs("label", { className: "nb-choice", children: [input, label] }));
+    };
+}
+export const Checkbox = choice("checkbox");
+export const Radio = choice("radio");
+export const Switch = choice("switch");

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { Button, type ButtonProps } from "./Button.js";
+export { Card, type CardProps } from "./Card.js";
+export { NavLink, type NavLinkProps } from "./NavLink.js";
+export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, type InputProps, type TextareaProps, type SelectProps, type LabelProps, } from "./form.js";
+export { Badge, Alert, Progress, Spinner, type BadgeProps, type AlertProps, type ProgressProps, type SemanticVariant, } from "./feedback.js";
+export { Dialog, type DialogProps } from "./Dialog.js";
+export { Tabs, type TabsProps, type TabItem } from "./Tabs.js";
+export { cx } from "./cx.js";

package/dist/index.js

@@ -0,0 +1,8 @@
+export { Button } from "./Button.js";
+export { Card } from "./Card.js";
+export { NavLink } from "./NavLink.js";
+export { Input, Textarea, Select, Label, Field, Checkbox, Radio, Switch, } from "./form.js";
+export { Badge, Alert, Progress, Spinner, } from "./feedback.js";
+export { Dialog } from "./Dialog.js";
+export { Tabs } from "./Tabs.js";
+export { cx } from "./cx.js";

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@nazuraki/ui-react",
+  "version": "0.2.1",
+  "description": "Shared React components styled by @nazuraki/styles themes.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nazuraki/ui-std-lib.git",
+    "directory": "components/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.7.0"
+  }
+}