@imdz/react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ismael Morillas Díaz
+
+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/OFL.txt

@@ -0,0 +1,189 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+----------------------------------------
+
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/README.md

@@ -1,3 +1,86 @@
-# Temporary Holding Version
+# @imdz/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.
+Free, accessible React components in plain CSS. One command, then import
+whatever you need: no Tailwind, no CSS to import, no config.
+
+```bash
+npm i @imdz/react
+```
+
+```tsx
+import { Button, Dialog } from "@imdz/react";
+
+export function Save() {
+  return <Button>Save</Button>;
+}
+```
+
+Docs and live examples: [imdz.dev](https://imdz.dev)
+
+## Works everywhere
+
+Any React 18 or 19 web project: Vite, Next.js (App Router with Server
+Components, and Pages Router), React Router, Remix, Astro, Gatsby, Parcel,
+Rsbuild… Each component brings its own styles and puts them on the page when
+it renders, also on the server, so there is nothing for your bundler or
+framework to set up. TypeScript types included.
+
+Components: Accordion, Alert, Avatar, Badge, Button, Card, Checkbox, Dialog,
+Input, Progress, Select, Skeleton, Spinner, Switch, Tabs, Textarea, Tooltip.
+
+Classes start with `imdz-` (`imdz-button`, `imdz-button-secondary`…), so they
+don't clash with yours.
+
+## Theme
+
+Every style reads a CSS variable with a built-in default. Override any of them
+in your own CSS:
+
+```css
+:root {
+  --imdz-radius: 6px;
+  --imdz-font: "Inter", sans-serif;
+  --imdz-primary: #2563eb;
+}
+```
+
+Tokens: `--imdz-bg`, `--imdz-surface`, `--imdz-border`, `--imdz-text`,
+`--imdz-muted`, `--imdz-primary`, `--imdz-on-primary`, `--imdz-success`,
+`--imdz-warning`, `--imdz-danger`, `--imdz-on-danger`, `--imdz-focus`,
+`--imdz-font`, `--imdz-font-mono`, `--imdz-radius` and `--imdz-tracking`.
+
+### Dark mode
+
+The defaults are the light theme. For dark mode, import `dark.css` once in your
+main file and add the `dark` class (or `data-theme="dark"`) to `<html>`:
+
+```tsx
+import "@imdz/react/dark.css";
+```
+
+## Fonts
+
+Components use Inter and JetBrains Mono (latin subset), loaded from jsDelivr.
+Both are under the SIL Open Font License 1.1 (see `OFL.txt`). To use your own
+fonts, set `--imdz-font` and `--imdz-font-mono`.
+
+## Strict Content Security Policy
+
+On React 19, styles are rendered as `<style>` tags. If your site's CSP blocks
+inline styles, import the stylesheet once in your main file instead:
+
+```tsx
+import "@imdz/react/styles.css";
+```
+
+## Notes
+
+- With React 18, styles are added in the browser when a component mounts, so
+  server-rendered pages can show unstyled components for an instant. React 19
+  doesn't have this problem.
+- With Tailwind, a utility in `className` can lose against the component's own
+  CSS when both set the same property. Use the important modifier (`h-12!`).
+
+## License
+
+MIT

package/dist/accordion.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export type AccordionItem = {
+    heading: string;
+    content: ReactNode;
+    defaultOpen?: boolean;
+};
+export type AccordionProps = {
+    items: AccordionItem[];
+    /** If set, only one section can be open at a time. */
+    name?: string;
+    className?: string;
+};
+export declare function Accordion(props: AccordionProps): import("react").JSX.Element;

package/dist/accordion.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 accordionCss } from "./styles/accordion.js";
+/** Collapsible sections built on the native details element. */
+function AccordionBase({ items, name, className }) {
+    return (_jsx("div", { className: cx("imdz-accordion", className), children: items.map((item) => (_jsxs("details", { name: name, open: item.defaultOpen, className: "imdz-accordion-item", children: [_jsx("summary", { className: "imdz-accordion-summary", children: item.heading }), _jsx("div", { className: "imdz-accordion-content", children: item.content })] }, item.heading))) }));
+}
+export function Accordion(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "accordion", css: accordionCss }), _jsx(AccordionBase, { ...props })] }));
+}

package/dist/alert.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type AlertVariant = "info" | "success" | "warning" | "danger";
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    variant?: AlertVariant;
+    heading?: ReactNode;
+};
+export declare function Alert(props: AlertProps): import("react").JSX.Element;

package/dist/alert.js

@@ -0,0 +1,11 @@
+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 alertCss } from "./styles/alert.js";
+function AlertBase({ variant = "info", heading, className, children, ...props }) {
+    return (_jsxs("div", { role: variant === "danger" ? "alert" : "status", className: cx("imdz-alert", variant !== "info" && `imdz-alert-${variant}`, className), ...props, children: [heading && _jsx("p", { className: "imdz-alert-title", children: heading }), _jsx("div", { children: children })] }));
+}
+export function Alert(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "alert", css: alertCss }), _jsx(AlertBase, { ...props })] }));
+}

package/dist/avatar.d.ts

@@ -0,0 +1,8 @@
+export type AvatarProps = {
+    /** The person's name: gives the initials and the alt text. */
+    name: string;
+    src?: string;
+    size?: "md" | "lg";
+    className?: string;
+};
+export declare function Avatar(props: AvatarProps): import("react").JSX.Element;

package/dist/avatar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 avatarCss } from "./styles/avatar.js";
+function AvatarBase({ name, src, size = "md", className }) {
+    const classes = cx("imdz-avatar", size === "lg" && "imdz-avatar-lg", className);
+    if (src) {
+        return (_jsx("span", { className: classes, children: _jsx("img", { src: src, alt: name }) }));
+    }
+    const initials = name
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((word) => word[0])
+        .join("");
+    return (_jsx("span", { className: classes, role: "img", "aria-label": name, children: initials }));
+}
+export function Avatar(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "avatar", css: avatarCss }), _jsx(AvatarBase, { ...props })] }));
+}

package/dist/badge.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+export type BadgeVariant = "neutral" | "primary" | "success" | "warning" | "danger";
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    variant?: BadgeVariant;
+};
+export declare function Badge(props: BadgeProps): import("react").JSX.Element;

package/dist/badge.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 badgeCss } from "./styles/badge.js";
+function BadgeBase({ variant = "neutral", className, ...props }) {
+    return (_jsx("span", { className: cx("imdz-badge", variant !== "neutral" && `imdz-badge-${variant}`, className), ...props }));
+}
+export function Badge(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "badge", css: badgeCss }), _jsx(BadgeBase, { ...props })] }));
+}

package/dist/button.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes } from "react";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+export declare function Button(props: ButtonProps): import("react").JSX.Element;

package/dist/button.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 buttonCss } from "./styles/button.js";
+function ButtonBase({ variant = "primary", size = "md", type = "button", className, ...props }) {
+    return (_jsx("button", { type: type, className: cx("imdz-button", variant !== "primary" && `imdz-button-${variant}`, size !== "md" && `imdz-button-${size}`, className), ...props }));
+}
+export function Button(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "button", css: buttonCss }), _jsx(ButtonBase, { ...props })] }));
+}

package/dist/card.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type CardProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    heading?: ReactNode;
+    footer?: ReactNode;
+};
+export declare function Card(props: CardProps): import("react").JSX.Element;

package/dist/card.js

@@ -0,0 +1,11 @@
+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 cardCss } from "./styles/card.js";
+function CardBase({ heading, footer, className, children, ...props }) {
+    return (_jsxs("div", { className: cx("imdz-card", className), ...props, children: [heading && _jsx("h3", { className: "imdz-card-title", children: heading }), _jsx("div", { className: "imdz-card-body", children: children }), footer && _jsx("div", { className: "imdz-card-footer", children: footer })] }));
+}
+export function Card(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "card", css: cardCss }), _jsx(CardBase, { ...props })] }));
+}

package/dist/checkbox.d.ts

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

package/dist/checkbox.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 checkboxCss } from "./styles/checkbox.js";
+/** The checkbox label goes as children. */
+function CheckboxBase({ className, children, ...props }) {
+    return (_jsxs("label", { className: cx("imdz-checkbox", className), children: [_jsx("input", { type: "checkbox", className: "imdz-checkbox-input", ...props }), _jsx("span", { children: children })] }));
+}
+export function Checkbox(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "checkbox", css: checkboxCss }), _jsx(CheckboxBase, { ...props })] }));
+}

package/dist/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...classes: (string | false | null | undefined)[]): string;

package/dist/cx.js

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

package/dist/dark.css

@@ -0,0 +1,13 @@
+.dark,
+[data-theme="dark"] {
+  --imdz-bg: #000000;
+  --imdz-surface: #0d0d0d;
+  --imdz-border: #2e2e2e;
+  --imdz-text: #ffffff;
+  --imdz-muted: #9a9a9a;
+  --imdz-success: #5dffa0;
+  --imdz-warning: #ffd166;
+  --imdz-danger: #ff5c6c;
+  --imdz-on-danger: #000000;
+  color-scheme: dark;
+}

package/dist/dialog.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+export type DialogProps = {
+    open: boolean;
+    /** Called on close: with Escape, with the close button or when open becomes false. */
+    onClose: () => void;
+    heading: ReactNode;
+    footer?: ReactNode;
+    closeLabel?: string;
+    className?: string;
+    children?: ReactNode;
+};
+export declare function Dialog(props: DialogProps): import("react").JSX.Element;

package/dist/dialog.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as dialogCss } from "./styles/dialog.js";
+function DialogBase({ open, onClose, heading, footer, closeLabel = "Close", className, children, }) {
+    const ref = useRef(null);
+    const titleId = useId();
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        if (open && !element.open)
+            element.showModal();
+        if (!open && element.open)
+            element.close();
+    }, [open]);
+    return (_jsxs("dialog", { ref: ref, className: cx("imdz-dialog", className), "aria-labelledby": titleId, onClose: onClose, children: [_jsxs("header", { className: "imdz-dialog-header", children: [_jsx("h2", { id: titleId, className: "imdz-dialog-title", children: heading }), _jsx("button", { type: "button", className: "imdz-dialog-close", "aria-label": closeLabel, onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "imdz-dialog-body", children: children }), footer && _jsx("footer", { className: "imdz-dialog-footer", children: footer })] }));
+}
+export function Dialog(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "dialog", css: dialogCss }), _jsx(DialogBase, { ...props })] }));
+}

package/dist/fonts.css

@@ -0,0 +1,24 @@
+@font-face {
+  font-family: "imdz Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./fonts/inter-latin-400-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "imdz Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(./fonts/inter-latin-600-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "imdz JetBrains Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(./fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export { Accordion, type AccordionItem, type AccordionProps, } from "./accordion.js";
+export { Alert, type AlertProps, type AlertVariant } from "./alert.js";
+export { Avatar, type AvatarProps } from "./avatar.js";
+export { Badge, type BadgeProps, type BadgeVariant } from "./badge.js";
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from "./button.js";
+export { Card, type CardProps } from "./card.js";
+export { Checkbox, type CheckboxProps } from "./checkbox.js";
+export { Dialog, type DialogProps } from "./dialog.js";
+export { Input, type InputProps } from "./input.js";
+export { Progress, type ProgressProps } from "./progress.js";
+export { Select, type SelectProps } from "./select.js";
+export { Skeleton, type SkeletonProps } from "./skeleton.js";
+export { Spinner, type SpinnerProps } from "./spinner.js";
+export { Switch, type SwitchProps } from "./switch.js";
+export { Tabs, type TabItem, type TabsProps } from "./tabs.js";
+export { Textarea, type TextareaProps } from "./textarea.js";
+export { Tooltip, type TooltipProps } from "./tooltip.js";

package/dist/index.js

@@ -0,0 +1,17 @@
+export { Accordion, } from "./accordion.js";
+export { Alert } from "./alert.js";
+export { Avatar } from "./avatar.js";
+export { Badge } from "./badge.js";
+export { Button, } from "./button.js";
+export { Card } from "./card.js";
+export { Checkbox } from "./checkbox.js";
+export { Dialog } from "./dialog.js";
+export { Input } from "./input.js";
+export { Progress } from "./progress.js";
+export { Select } from "./select.js";
+export { Skeleton } from "./skeleton.js";
+export { Spinner } from "./spinner.js";
+export { Switch } from "./switch.js";
+export { Tabs } from "./tabs.js";
+export { Textarea } from "./textarea.js";
+export { Tooltip } from "./tooltip.js";

package/dist/input.d.ts

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

package/dist/input.js

@@ -0,0 +1,17 @@
+"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";
+function InputBase({ label, hint, error, id, 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("input", { id: inputId, className: cx("imdz-field-input", 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 Input(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "field", css: fieldCss }), _jsx(InputBase, { ...props })] }));
+}

package/dist/progress.d.ts

@@ -0,0 +1,8 @@
+export type ProgressProps = {
+    value: number;
+    max?: number;
+    /** Shown above the bar next to the percentage. */
+    label?: string;
+    className?: string;
+};
+export declare function Progress(props: ProgressProps): import("react").JSX.Element;