@imdz/react 0.0.0-stage → 0.1.0

package/dist/switch.d.ts

@@ -0,0 +1,3 @@
+import type { InputHTMLAttributes } from "react";
+export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role">;
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;

package/dist/switch.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as switchCss } from "./styles/switch.js";
+/** The switch label goes as children. */
+function SwitchBase({ className, children, ...props }) {
+    return (_jsxs("label", { className: cx("imdz-switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", className: "imdz-switch-input", ...props }), _jsx("span", { children: children })] }));
+}
+export function Switch(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "switch", css: switchCss }), _jsx(SwitchBase, { ...props })] }));
+}

package/dist/tabs.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+export type TabItem = {
+    label: string;
+    content: ReactNode;
+};
+export type TabsProps = {
+    items: TabItem[];
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    className?: string;
+};
+export declare function Tabs(props: TabsProps): import("react").JSX.Element;

package/dist/tabs.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef, useState, } from "react";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as tabsCss } from "./styles/tabs.js";
+function TabsBase({ items, defaultIndex = 0, onChange, className, }) {
+    const [selected, setSelected] = useState(defaultIndex);
+    const tabRefs = useRef([]);
+    const baseId = useId();
+    function select(index) {
+        setSelected(index);
+        onChange?.(index);
+    }
+    function handleKeyDown(event) {
+        const last = items.length - 1;
+        const next = {
+            ArrowRight: selected === last ? 0 : selected + 1,
+            ArrowLeft: selected === 0 ? last : selected - 1,
+            Home: 0,
+            End: last,
+        }[event.key];
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        select(next);
+        tabRefs.current[next]?.focus();
+    }
+    return (_jsxs("div", { className: cx("imdz-tabs", className), children: [_jsx("div", { className: "imdz-tabs-list", role: "tablist", onKeyDown: handleKeyDown, children: items.map((item, index) => (_jsx("button", { ref: (element) => {
+                        tabRefs.current[index] = element;
+                    }, type: "button", role: "tab", id: `${baseId}-tab-${index}`, className: "imdz-tabs-tab", "aria-selected": index === selected, "aria-controls": `${baseId}-panel-${index}`, tabIndex: index === selected ? 0 : -1, onClick: () => select(index), children: item.label }, item.label))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", id: `${baseId}-panel-${index}`, className: "imdz-tabs-panel", "aria-labelledby": `${baseId}-tab-${index}`, hidden: index !== selected, children: item.content }, item.label)))] }));
+}
+export function Tabs(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "tabs", css: tabsCss }), _jsx(TabsBase, { ...props })] }));
+}

package/dist/textarea.d.ts

@@ -0,0 +1,7 @@
+import { type TextareaHTMLAttributes } from "react";
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    hint?: string;
+    error?: string;
+};
+export declare function Textarea(props: TextareaProps): import("react").JSX.Element;

package/dist/textarea.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as fieldCss } from "./styles/field.js";
+import { css as textareaCss } from "./styles/textarea.js";
+function TextareaBase({ label, hint, error, id, rows = 4, className, ...props }) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const message = error || hint;
+    const messageId = `${inputId}-message`;
+    return (_jsxs("div", { className: "imdz-field", children: [label && (_jsx("label", { className: "imdz-field-label", htmlFor: inputId, children: label })), _jsx("textarea", { id: inputId, rows: rows, className: cx("imdz-field-input", "imdz-textarea", className), "aria-invalid": error ? true : undefined, "aria-describedby": message ? messageId : undefined, ...props }), message && (_jsx("p", { id: messageId, className: error ? "imdz-field-error" : "imdz-field-hint", children: message }))] }));
+}
+export function Textarea(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "field", css: fieldCss }), _jsx(Style, { id: "textarea", css: textareaCss }), _jsx(TextareaBase, { ...props })] }));
+}

package/dist/tooltip.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export type TooltipProps = {
+    text: string;
+    className?: string;
+    children: ReactNode;
+};
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;

package/dist/tooltip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as tooltipCss } from "./styles/tooltip.js";
+/** Wraps an element and shows a short text on hover or focus. */
+function TooltipBase({ text, className, children }) {
+    return (_jsxs("span", { className: cx("imdz-tooltip", className), children: [children, _jsx("span", { className: "imdz-tooltip-bubble", role: "tooltip", children: text })] }));
+}
+export function Tooltip(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "tooltip", css: tooltipCss }), _jsx(TooltipBase, { ...props })] }));
+}

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@imdz/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Accessible React components with plain CSS. npm i @imdz/react and import them: no Tailwind, no config, works with any React framework.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./dark.css": "./dist/dark.css",
+    "./styles.css": "./dist/styles.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "OFL.txt",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://imdz.dev",
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepack": "node scripts/build.mjs"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "css",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@fontsource/inter": "^5.3.0",
+    "@fontsource/jetbrains-mono": "^5.3.0"
+  }
+}