@gunkin/uiify 0.0.1-alpha

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Anton Gunkin
+
+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

@@ -0,0 +1,37 @@
+# uiify
+
+Native-first, accessible React 19 components that work before hydration.
+
+> Alpha: APIs may change before the first stable release.
+
+## Install
+
+```bash
+npm install @gunkin/uiify@alpha react react-dom
+```
+
+## Use
+
+```tsx
+import { Button } from "@gunkin/uiify/components/button";
+import "@gunkin/uiify/components/behavior.css";
+
+export function SaveButton() {
+  return <Button>Save</Button>;
+}
+```
+
+`behavior.css` contains required state behavior but no visual theme. Optional styles:
+
+```css
+@import "@gunkin/uiify/styles/reset";
+@import "@gunkin/uiify/styles/tokens";
+@import "@gunkin/uiify/styles";
+```
+
+Use focused `@gunkin/uiify/components/*`, `@gunkin/uiify/elements/*`, `@gunkin/uiify/core/*`, or `@gunkin/uiify/hooks` imports in
+Server Components so client boundaries remain explicit.
+
+Documentation: https://uiify.gunkin.dev/
+
+MIT © Anton Gunkin

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import type { AccordionProps } from "./types.js";
+/**
+ * Built on `@gunkin/uiify/elements/details`: `Details.Root` already owns `data-disabled` (from its own
+ * `disabled` prop) and `data-uiify-details`; `Details.Summary`'s `disabled` prop already owns
+ * `aria-disabled`/`tabIndex`. This component adds its own `data-part`/`data-uiify-accordion-*`
+ * markers and the `name`/`defaultOpen` wiring that makes single-select exclusive.
+ */
+export declare function Accordion({ id, items, type, defaultValue, className, }: AccordionProps): ReactElement;
+export declare namespace Accordion {
+    var displayName: string;
+}
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,YAAY,CAAC;AAWhE;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,IAAe,EACf,YAAY,EACZ,SAAS,GACV,EAAE,cAAc,GAAG,YAAY,CAoB/B;yBA1Be,SAAS"}

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DetailsContent, DetailsRoot, DetailsSummary } from "../../elements/details/index.js";
+function isDefaultOpen(type, defaultValue, itemValue) {
+  if (type === "single") return defaultValue === itemValue;
+  return Array.isArray(defaultValue) && defaultValue.includes(itemValue);
+}
+function Accordion({
+  id,
+  items,
+  type = "single",
+  defaultValue,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, "data-uiify-accordion": "", "data-uiify-choice-kind": type, children: items.map((item) => /* @__PURE__ */ jsxs(
+    DetailsRoot,
+    {
+      "data-part": "item",
+      "data-uiify-accordion-item": "",
+      defaultOpen: isDefaultOpen(type, defaultValue, item.value),
+      disabled: item.disabled ?? false,
+      ...type === "single" ? { name: id } : {},
+      children: [
+        /* @__PURE__ */ jsx(DetailsSummary, { disabled: item.disabled ?? false, part: "trigger", children: item.label }),
+        /* @__PURE__ */ jsx(DetailsContent, { part: "panel", children: item.panel })
+      ]
+    },
+    item.value
+  )) });
+}
+Accordion.displayName = "Accordion";
+export {
+  Accordion
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { DetailsContent, DetailsRoot, DetailsSummary } from \"../../elements/details/index.js\";\nimport type { AccordionProps, AccordionType } from \"./types.js\";\n\nfunction isDefaultOpen(\n  type: AccordionType,\n  defaultValue: string | readonly string[] | undefined,\n  itemValue: string,\n): boolean {\n  if (type === \"single\") return defaultValue === itemValue;\n  return Array.isArray(defaultValue) && defaultValue.includes(itemValue);\n}\n\n/**\n * Built on `@gunkin/uiify/elements/details`: `Details.Root` already owns `data-disabled` (from its own\n * `disabled` prop) and `data-uiify-details`; `Details.Summary`'s `disabled` prop already owns\n * `aria-disabled`/`tabIndex`. This component adds its own `data-part`/`data-uiify-accordion-*`\n * markers and the `name`/`defaultOpen` wiring that makes single-select exclusive.\n */\nexport function Accordion({\n  id,\n  items,\n  type = \"single\",\n  defaultValue,\n  className,\n}: AccordionProps): ReactElement {\n  return (\n    <div className={className} data-uiify-accordion=\"\" data-uiify-choice-kind={type}>\n      {items.map((item) => (\n        <DetailsRoot\n          data-part=\"item\"\n          data-uiify-accordion-item=\"\"\n          defaultOpen={isDefaultOpen(type, defaultValue, item.value)}\n          disabled={item.disabled ?? false}\n          key={item.value}\n          {...(type === \"single\" ? { name: id } : {})}\n        >\n          <DetailsSummary disabled={item.disabled ?? false} part=\"trigger\">\n            {item.label}\n          </DetailsSummary>\n          <DetailsContent part=\"panel\">{item.panel}</DetailsContent>\n        </DetailsRoot>\n      ))}\n    </div>\n  );\n}\nAccordion.displayName = \"Accordion\";\n"],"mappings":"AA6BQ,SAQE,KARF;AA5BR,SAAS,gBAAgB,aAAa,sBAAsB;AAG5D,SAAS,cACP,MACA,cACA,WACS;AACT,MAAI,SAAS,SAAU,QAAO,iBAAiB;AAC/C,SAAO,MAAM,QAAQ,YAAY,KAAK,aAAa,SAAS,SAAS;AACvE;AAQO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAiC;AAC/B,SACE,oBAAC,SAAI,WAAsB,wBAAqB,IAAG,0BAAwB,MACxE,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,6BAA0B;AAAA,MAC1B,aAAa,cAAc,MAAM,cAAc,KAAK,KAAK;AAAA,MACzD,UAAU,KAAK,YAAY;AAAA,MAE1B,GAAI,SAAS,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;AAAA,MAEzC;AAAA,4BAAC,kBAAe,UAAU,KAAK,YAAY,OAAO,MAAK,WACpD,eAAK,OACR;AAAA,QACA,oBAAC,kBAAe,MAAK,SAAS,eAAK,OAAM;AAAA;AAAA;AAAA,IANpC,KAAK;AAAA,EAOZ,CACD,GACH;AAEJ;AACA,UAAU,cAAc;","names":[]}

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { Accordion } from "./Accordion.js";
+export type { AccordionItem, AccordionProps, AccordionType } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/accordion/index.js

@@ -0,0 +1,5 @@
+import { Accordion } from "./Accordion.js";
+export {
+  Accordion
+};
+//# sourceMappingURL=index.js.map

package/dist/components/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion/index.ts"],"sourcesContent":["export { Accordion } from \"./Accordion.js\";\nexport type { AccordionItem, AccordionProps, AccordionType } from \"./types.js\";\n"],"mappings":"AAAA,SAAS,iBAAiB;","names":[]}

package/dist/components/accordion/types.d.ts

@@ -0,0 +1,12 @@
+import type { ChoicePanelItem } from "../internal/choice-family/types.js";
+export type AccordionType = "single" | "multiple";
+export interface AccordionItem extends ChoicePanelItem {
+}
+export interface AccordionProps {
+    readonly id: string;
+    readonly items: readonly AccordionItem[];
+    readonly type?: AccordionType;
+    readonly defaultValue?: string | readonly string[];
+    readonly className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/accordion/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,aAAc,SAAQ,eAAe;CAAG;AAEzD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IACzC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;IACnD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/dist/components/accordion/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/accordion/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/accordion.d.ts

@@ -0,0 +1 @@
+export * from "./accordion/index.js";

package/dist/components/accordion.js

@@ -0,0 +1 @@
+export * from "./accordion/index.js";

package/dist/components/alert-modal/AlertModal.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from "react";
+import type { AlertModalProps } from "./types.js";
+/** Convenience shell over the native parts: one trigger, one modal alertdialog, cancel and action. */
+export declare function AlertModal({ id, trigger, title, description, children, actionLabel, cancelLabel, triggerClassName, className, actionClassName, cancelClassName, }: AlertModalProps): ReactElement;
+export declare namespace AlertModal {
+    var displayName: string;
+}
+//# sourceMappingURL=AlertModal.d.ts.map

package/dist/components/alert-modal/AlertModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal.d.ts","sourceRoot":"","sources":["../../../src/components/alert-modal/AlertModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,sGAAsG;AACtG,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,WAAuB,EACvB,WAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,eAAe,EACf,eAAe,GAChB,EAAE,eAAe,GAAG,YAAY,CA2BhC;yBAvCe,UAAU"}

package/dist/components/alert-modal/AlertModal.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  AlertModalAction,
+  AlertModalCancel,
+  AlertModalContent,
+  AlertModalTrigger
+} from "./AlertModalParts.js";
+function AlertModal({
+  id,
+  trigger,
+  title,
+  description,
+  children,
+  actionLabel = "Confirm",
+  cancelLabel = "Cancel",
+  triggerClassName,
+  className,
+  actionClassName,
+  cancelClassName
+}) {
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  return /* @__PURE__ */ jsxs("div", { "data-uiify-alert-dialog-scope": "", "data-uiify-alert-modal-scope": "", children: [
+    /* @__PURE__ */ jsx(AlertModalTrigger, { className: triggerClassName, target: id, children: trigger }),
+    /* @__PURE__ */ jsxs(
+      AlertModalContent,
+      {
+        "aria-describedby": description === void 0 ? void 0 : descriptionId,
+        "aria-labelledby": titleId,
+        className,
+        id,
+        children: [
+          /* @__PURE__ */ jsx("h2", { id: titleId, children: title }),
+          description === void 0 ? null : /* @__PURE__ */ jsx("p", { id: descriptionId, children: description }),
+          children,
+          /* @__PURE__ */ jsx(AlertModalCancel, { className: cancelClassName, target: id, value: "cancel", children: cancelLabel }),
+          /* @__PURE__ */ jsx(AlertModalAction, { className: actionClassName, target: id, value: "confirm", children: actionLabel })
+        ]
+      }
+    )
+  ] });
+}
+AlertModal.displayName = "AlertModal";
+export {
+  AlertModal
+};
+//# sourceMappingURL=AlertModal.js.map

package/dist/components/alert-modal/AlertModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert-modal/AlertModal.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport {\n  AlertModalAction,\n  AlertModalCancel,\n  AlertModalContent,\n  AlertModalTrigger,\n} from \"./AlertModalParts.js\";\nimport type { AlertModalProps } from \"./types.js\";\n\n/** Convenience shell over the native parts: one trigger, one modal alertdialog, cancel and action. */\nexport function AlertModal({\n  id,\n  trigger,\n  title,\n  description,\n  children,\n  actionLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  triggerClassName,\n  className,\n  actionClassName,\n  cancelClassName,\n}: AlertModalProps): ReactElement {\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n\n  return (\n    <div data-uiify-alert-dialog-scope=\"\" data-uiify-alert-modal-scope=\"\">\n      <AlertModalTrigger className={triggerClassName} target={id}>\n        {trigger}\n      </AlertModalTrigger>\n      <AlertModalContent\n        aria-describedby={description === undefined ? undefined : descriptionId}\n        aria-labelledby={titleId}\n        className={className}\n        id={id}\n      >\n        <h2 id={titleId}>{title}</h2>\n        {description === undefined ? null : <p id={descriptionId}>{description}</p>}\n        {children}\n        <AlertModalCancel className={cancelClassName} target={id} value=\"cancel\">\n          {cancelLabel}\n        </AlertModalCancel>\n        <AlertModalAction className={actionClassName} target={id} value=\"confirm\">\n          {actionLabel}\n        </AlertModalAction>\n      </AlertModalContent>\n    </div>\n  );\n}\nAlertModal.displayName = \"AlertModal\";\n"],"mappings":"AA4BM,cAGA,YAHA;AA3BN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkC;AAChC,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,gBAAgB,GAAG,EAAE;AAE3B,SACE,qBAAC,SAAI,iCAA8B,IAAG,gCAA6B,IACjE;AAAA,wBAAC,qBAAkB,WAAW,kBAAkB,QAAQ,IACrD,mBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAkB,gBAAgB,SAAY,SAAY;AAAA,QAC1D,mBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QAEA;AAAA,8BAAC,QAAG,IAAI,SAAU,iBAAM;AAAA,UACvB,gBAAgB,SAAY,OAAO,oBAAC,OAAE,IAAI,eAAgB,uBAAY;AAAA,UACtE;AAAA,UACD,oBAAC,oBAAiB,WAAW,iBAAiB,QAAQ,IAAI,OAAM,UAC7D,uBACH;AAAA,UACA,oBAAC,oBAAiB,WAAW,iBAAiB,QAAQ,IAAI,OAAM,WAC7D,uBACH;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AACA,WAAW,cAAc;","names":[]}

package/dist/components/alert-modal/AlertModalParts.d.ts

@@ -0,0 +1,48 @@
+import type { ElementType, ReactElement } from "react";
+import type { AlertModalActionProps, AlertModalCancelProps, AlertModalContentProps, AlertModalTriggerProps } from "./types.js";
+/**
+ * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Trigger`, which already emits
+ * `data-uiify-dialog-trigger` — additive, since this component's own markers are a
+ * different string. Also emits `data-uiify-alert-modal-trigger` and the deprecated
+ * `data-uiify-alert-dialog-trigger` during the compatibility window.
+ *
+ * Calls the element directly as a function rather than rendering `<ElementDialogTrigger>` —
+ * see ModalParts.tsx's `ModalTrigger` for why (Tier 0, no hooks, skips a `jsx()` call).
+ */
+export declare function AlertModalTrigger<TAs extends ElementType = "button">(props: AlertModalTriggerProps<TAs>): ReactElement;
+export declare namespace AlertModalTrigger {
+    var displayName: string;
+}
+/**
+ * A modal `<dialog role="alertdialog">`; Escape and the parts close it, the backdrop does not.
+ *
+ * Mirrors `@gunkin/uiify/elements/dialog`'s `Dialog.Content` markup and marker
+ * (`data-uiify-dialog-content`) plus `role="alertdialog"` and this component's own
+ * `data-uiify-alert-modal-content` / deprecated `data-uiify-alert-dialog-content`. Written
+ * inline rather than rendered through the element for the same reason as `ModalContent`:
+ * `Dialog.Content`'s type requires an accessible name and `AlertModalContentProps`
+ * deliberately does not tighten to match (see ModalParts.tsx).
+ */
+export declare function AlertModalContent(props: AlertModalContentProps): ReactElement;
+export declare namespace AlertModalContent {
+    var displayName: string;
+}
+/**
+ * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`. Also emits
+ * `data-uiify-alert-modal-action` and the deprecated `data-uiify-alert-dialog-action`
+ * for one major.
+ */
+export declare function AlertModalAction<TAs extends ElementType = "button">(props: AlertModalActionProps<TAs>): ReactElement;
+export declare namespace AlertModalAction {
+    var displayName: string;
+}
+/**
+ * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`. Also emits
+ * `data-uiify-alert-modal-cancel` and the deprecated `data-uiify-alert-dialog-cancel`
+ * for one major.
+ */
+export declare function AlertModalCancel<TAs extends ElementType = "button">(props: AlertModalCancelProps<TAs>): ReactElement;
+export declare namespace AlertModalCancel {
+    var displayName: string;
+}
+//# sourceMappingURL=AlertModalParts.d.ts.map

package/dist/components/alert-modal/AlertModalParts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModalParts.d.ts","sourceRoot":"","sources":["../../../src/components/alert-modal/AlertModalParts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMvD,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAEpB;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EAClE,KAAK,EAAE,sBAAsB,CAAC,GAAG,CAAC,GACjC,YAAY,CASd;yBAXe,iBAAiB;;;AAcjC;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAa7E;yBAbe,iBAAiB;;;AAgBjC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EACjE,KAAK,EAAE,qBAAqB,CAAC,GAAG,CAAC,GAChC,YAAY,CASd;yBAXe,gBAAgB;;;AAchC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EACjE,KAAK,EAAE,qBAAqB,CAAC,GAAG,CAAC,GAChC,YAAY,CASd;yBAXe,gBAAgB"}

package/dist/components/alert-modal/AlertModalParts.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  DialogClose as ElementDialogClose,
+  DialogTrigger as ElementDialogTrigger
+} from "../../elements/dialog/index.js";
+function AlertModalTrigger(props) {
+  const { as, target, ...consumerProps } = props;
+  return ElementDialogTrigger({
+    ...consumerProps,
+    ...as === void 0 ? {} : { as },
+    "data-uiify-alert-dialog-trigger": "",
+    "data-uiify-alert-modal-trigger": "",
+    target
+  });
+}
+AlertModalTrigger.displayName = "AlertModalTrigger";
+function AlertModalContent(props) {
+  const { children, ...dialogProps } = props;
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ...dialogProps,
+      "data-uiify-alert-dialog-content": "",
+      "data-uiify-alert-modal-content": "",
+      "data-uiify-dialog-content": "",
+      role: "alertdialog",
+      children
+    }
+  );
+}
+AlertModalContent.displayName = "AlertModalContent";
+function AlertModalAction(props) {
+  const { as, target, ...consumerProps } = props;
+  return ElementDialogClose({
+    ...consumerProps,
+    ...as === void 0 ? {} : { as },
+    "data-uiify-alert-dialog-action": "",
+    "data-uiify-alert-modal-action": "",
+    target
+  });
+}
+AlertModalAction.displayName = "AlertModalAction";
+function AlertModalCancel(props) {
+  const { as, target, ...consumerProps } = props;
+  return ElementDialogClose({
+    ...consumerProps,
+    ...as === void 0 ? {} : { as },
+    "data-uiify-alert-dialog-cancel": "",
+    "data-uiify-alert-modal-cancel": "",
+    target
+  });
+}
+AlertModalCancel.displayName = "AlertModalCancel";
+export {
+  AlertModalAction,
+  AlertModalCancel,
+  AlertModalContent,
+  AlertModalTrigger
+};
+//# sourceMappingURL=AlertModalParts.js.map

package/dist/components/alert-modal/AlertModalParts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert-modal/AlertModalParts.tsx"],"sourcesContent":["import type { ElementType, ReactElement } from \"react\";\nimport {\n  DialogClose as ElementDialogClose,\n  DialogTrigger as ElementDialogTrigger,\n} from \"../../elements/dialog/index.js\";\nimport type { DialogCloseProps, DialogTriggerProps } from \"../../elements/dialog/index.js\";\nimport type {\n  AlertModalActionProps,\n  AlertModalCancelProps,\n  AlertModalContentProps,\n  AlertModalTriggerProps,\n} from \"./types.js\";\n\n/**\n * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Trigger`, which already emits\n * `data-uiify-dialog-trigger` — additive, since this component's own markers are a\n * different string. Also emits `data-uiify-alert-modal-trigger` and the deprecated\n * `data-uiify-alert-dialog-trigger` during the compatibility window.\n *\n * Calls the element directly as a function rather than rendering `<ElementDialogTrigger>` —\n * see ModalParts.tsx's `ModalTrigger` for why (Tier 0, no hooks, skips a `jsx()` call).\n */\nexport function AlertModalTrigger<TAs extends ElementType = \"button\">(\n  props: AlertModalTriggerProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalTriggerProps<\"button\">;\n  return ElementDialogTrigger({\n    ...consumerProps,\n    ...(as === undefined ? {} : { as }),\n    \"data-uiify-alert-dialog-trigger\": \"\",\n    \"data-uiify-alert-modal-trigger\": \"\",\n    target,\n  } as unknown as DialogTriggerProps<TAs>);\n}\nAlertModalTrigger.displayName = \"AlertModalTrigger\";\n\n/**\n * A modal `<dialog role=\"alertdialog\">`; Escape and the parts close it, the backdrop does not.\n *\n * Mirrors `@gunkin/uiify/elements/dialog`'s `Dialog.Content` markup and marker\n * (`data-uiify-dialog-content`) plus `role=\"alertdialog\"` and this component's own\n * `data-uiify-alert-modal-content` / deprecated `data-uiify-alert-dialog-content`. Written\n * inline rather than rendered through the element for the same reason as `ModalContent`:\n * `Dialog.Content`'s type requires an accessible name and `AlertModalContentProps`\n * deliberately does not tighten to match (see ModalParts.tsx).\n */\nexport function AlertModalContent(props: AlertModalContentProps): ReactElement {\n  const { children, ...dialogProps } = props;\n  return (\n    <dialog\n      {...dialogProps}\n      data-uiify-alert-dialog-content=\"\"\n      data-uiify-alert-modal-content=\"\"\n      data-uiify-dialog-content=\"\"\n      role=\"alertdialog\"\n    >\n      {children}\n    </dialog>\n  );\n}\nAlertModalContent.displayName = \"AlertModalContent\";\n\n/**\n * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`. Also emits\n * `data-uiify-alert-modal-action` and the deprecated `data-uiify-alert-dialog-action`\n * for one major.\n */\nexport function AlertModalAction<TAs extends ElementType = \"button\">(\n  props: AlertModalActionProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalActionProps<\"button\">;\n  return ElementDialogClose({\n    ...consumerProps,\n    ...(as === undefined ? {} : { as }),\n    \"data-uiify-alert-dialog-action\": \"\",\n    \"data-uiify-alert-modal-action\": \"\",\n    target,\n  } as unknown as DialogCloseProps<TAs>);\n}\nAlertModalAction.displayName = \"AlertModalAction\";\n\n/**\n * Built on `@gunkin/uiify/elements/dialog`'s `Dialog.Close`. Also emits\n * `data-uiify-alert-modal-cancel` and the deprecated `data-uiify-alert-dialog-cancel`\n * for one major.\n */\nexport function AlertModalCancel<TAs extends ElementType = \"button\">(\n  props: AlertModalCancelProps<TAs>,\n): ReactElement {\n  const { as, target, ...consumerProps } = props as AlertModalCancelProps<\"button\">;\n  return ElementDialogClose({\n    ...consumerProps,\n    ...(as === undefined ? {} : { as }),\n    \"data-uiify-alert-dialog-cancel\": \"\",\n    \"data-uiify-alert-modal-cancel\": \"\",\n    target,\n  } as unknown as DialogCloseProps<TAs>);\n}\nAlertModalCancel.displayName = \"AlertModalCancel\";\n"],"mappings":"AAiDI;AAhDJ;AAAA,EACE,eAAe;AAAA,EACf,iBAAiB;AAAA,OACZ;AAkBA,SAAS,kBACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO,qBAAqB;AAAA,IAC1B,GAAG;AAAA,IACH,GAAI,OAAO,SAAY,CAAC,IAAI,EAAE,GAAG;AAAA,IACjC,mCAAmC;AAAA,IACnC,kCAAkC;AAAA,IAClC;AAAA,EACF,CAAuC;AACzC;AACA,kBAAkB,cAAc;AAYzB,SAAS,kBAAkB,OAA6C;AAC7E,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mCAAgC;AAAA,MAChC,kCAA+B;AAAA,MAC/B,6BAA0B;AAAA,MAC1B,MAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;AACA,kBAAkB,cAAc;AAOzB,SAAS,iBACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO,mBAAmB;AAAA,IACxB,GAAG;AAAA,IACH,GAAI,OAAO,SAAY,CAAC,IAAI,EAAE,GAAG;AAAA,IACjC,kCAAkC;AAAA,IAClC,iCAAiC;AAAA,IACjC;AAAA,EACF,CAAqC;AACvC;AACA,iBAAiB,cAAc;AAOxB,SAAS,iBACd,OACc;AACd,QAAM,EAAE,IAAI,QAAQ,GAAG,cAAc,IAAI;AACzC,SAAO,mBAAmB;AAAA,IACxB,GAAG;AAAA,IACH,GAAI,OAAO,SAAY,CAAC,IAAI,EAAE,GAAG;AAAA,IACjC,kCAAkC;AAAA,IAClC,iCAAiC;AAAA,IACjC;AAAA,EACF,CAAqC;AACvC;AACA,iBAAiB,cAAc;","names":[]}

package/dist/components/alert-modal/index.d.ts

@@ -0,0 +1,4 @@
+export { AlertModal } from "./AlertModal.js";
+export { AlertModalAction, AlertModalCancel, AlertModalContent, AlertModalTrigger, } from "./AlertModalParts.js";
+export type { AlertModalActionOwnProps, AlertModalActionProps, AlertModalCancelOwnProps, AlertModalCancelProps, AlertModalContentOwnProps, AlertModalContentProps, AlertModalProps, AlertModalTriggerOwnProps, AlertModalTriggerProps, } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/alert-modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert-modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,yBAAyB,EACzB,sBAAsB,EACtB,eAAe,EACf,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,YAAY,CAAC"}

package/dist/components/alert-modal/index.js

@@ -0,0 +1,15 @@
+import { AlertModal } from "./AlertModal.js";
+import {
+  AlertModalAction,
+  AlertModalCancel,
+  AlertModalContent,
+  AlertModalTrigger
+} from "./AlertModalParts.js";
+export {
+  AlertModal,
+  AlertModalAction,
+  AlertModalCancel,
+  AlertModalContent,
+  AlertModalTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/components/alert-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert-modal/index.ts"],"sourcesContent":["export { AlertModal } from \"./AlertModal.js\";\nexport {\n  AlertModalAction,\n  AlertModalCancel,\n  AlertModalContent,\n  AlertModalTrigger,\n} from \"./AlertModalParts.js\";\nexport type {\n  AlertModalActionOwnProps,\n  AlertModalActionProps,\n  AlertModalCancelOwnProps,\n  AlertModalCancelProps,\n  AlertModalContentOwnProps,\n  AlertModalContentProps,\n  AlertModalProps,\n  AlertModalTriggerOwnProps,\n  AlertModalTriggerProps,\n} from \"./types.js\";\n"],"mappings":"AAAA,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/dist/components/alert-modal/types.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+import type { NativeButtonProps } from "@gunkin/uiify/core/render";
+export interface AlertModalProps {
+    readonly id: string;
+    readonly trigger: ReactNode;
+    readonly title: ReactNode;
+    readonly description?: ReactNode;
+    readonly children?: ReactNode;
+    readonly actionLabel?: ReactNode;
+    readonly cancelLabel?: ReactNode;
+    readonly triggerClassName?: string;
+    readonly className?: string;
+    readonly actionClassName?: string;
+    readonly cancelClassName?: string;
+}
+export interface AlertModalTriggerOwnProps {
+    readonly children?: ReactNode;
+    /** `id` of the `AlertModalContent` this button opens. */
+    readonly target: string;
+}
+export type AlertModalTriggerProps<TAs extends ElementType = "button"> = NativeButtonProps<TAs, AlertModalTriggerOwnProps>;
+export interface AlertModalActionOwnProps {
+    readonly children?: ReactNode;
+    readonly target: string;
+}
+export type AlertModalActionProps<TAs extends ElementType = "button"> = NativeButtonProps<TAs, AlertModalActionOwnProps>;
+export interface AlertModalCancelOwnProps {
+    readonly children?: ReactNode;
+    readonly target: string;
+}
+export type AlertModalCancelProps<TAs extends ElementType = "button"> = NativeButtonProps<TAs, AlertModalCancelOwnProps>;
+export interface AlertModalContentOwnProps {
+    readonly children?: ReactNode;
+    readonly id: string;
+}
+/** `<dialog role="alertdialog">`; `role`, `open` and `popover` belong to the part. */
+export type AlertModalContentProps = AlertModalContentOwnProps & Omit<ComponentPropsWithRef<"dialog">, keyof AlertModalContentOwnProps | "open" | "popover" | "role">;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/alert-modal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/alert-modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;CACnC;AAED,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,yDAAyD;IACzD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,sBAAsB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACxF,GAAG,EACH,yBAAyB,CAC1B,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,qBAAqB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACvF,GAAG,EACH,wBAAwB,CACzB,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,MAAM,qBAAqB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CACvF,GAAG,EACH,wBAAwB,CACzB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;CACrB;AAED,sFAAsF;AACtF,MAAM,MAAM,sBAAsB,GAAG,yBAAyB,GAC5D,IAAI,CACF,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,MAAM,yBAAyB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAC9D,CAAC"}

package/dist/components/alert-modal/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/alert-modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/alert-modal.d.ts

@@ -0,0 +1 @@
+export * from "./alert-modal/index.js";

package/dist/components/alert-modal.js

@@ -0,0 +1 @@
+export * from "./alert-modal/index.js";

package/dist/components/behavior.css

@@ -0,0 +1,165 @@
+@layer ui.reset, ui.behavior, ui.tokens, ui.theme, app;
+@layer ui.behavior {
+  [popover]:not(:popover-open) {
+    display: none;
+  }
+  dialog:modal {
+    overscroll-behavior: contain;
+  }
+  [data-uiify-modal-scope]:has(> dialog[open]) > [data-uiify-modal-trigger],
+  [data-uiify-alert-modal-scope]:has(> dialog[open]) > [data-uiify-alert-modal-trigger],
+  [data-uiify-popup-scope]:has(> :popover-open) > [data-uiify-popup-trigger],
+  [data-uiify-popover-scope]:has(> :popover-open) > [data-uiify-popover-trigger] {
+    --uiify-trigger-open: 1;
+  }
+  [data-uiify-accordion-item][data-disabled] > summary,
+  [data-uiify-collapsible][data-disabled] > summary {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .uiify-select,
+  .uiify-select::picker(select) {
+    appearance: base-select;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    @starting-style {
+      [popover]:popover-open {
+        opacity: 0;
+        scale: 0.96;
+      }
+    }
+    [popover] {
+      transition:
+        opacity var(--duration-fast, 150ms) ease-out,
+        scale var(--duration-fast, 150ms) ease-out,
+        display var(--duration-fast, 150ms) allow-discrete,
+        overlay var(--duration-fast, 150ms) allow-discrete;
+    }
+    [popover]:popover-open {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+  [data-uiify-tabs-input] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  [data-uiify-tabs-panel] {
+    display: none;
+  }
+  [data-uiify-tabs-input]:checked ~ [data-uiify-tabs-panel] {
+    display: block;
+  }
+  [data-uiify-stepper-panel] {
+    display: none;
+  }
+  [data-uiify-stepper-input]:checked ~ [data-uiify-stepper-panel] {
+    display: block;
+  }
+  [data-uiify-tabs-trigger][data-disabled] {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  [data-uiify-spinner][data-state=delayed] {
+    animation-name: uiify-spinner-show;
+    animation-duration: 0s;
+    animation-delay: attr(data-delay type(<time>), 0s);
+    animation-fill-mode: forwards;
+    visibility: hidden;
+  }
+  @keyframes uiify-spinner-show {
+    to {
+      visibility: visible;
+    }
+  }
+  [data-uiify-breadcrumb-ellipsis] > ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  [data-uiify-carousel] > [data-uiify-carousel-viewport] {
+    display: grid;
+    min-inline-size: 0;
+    min-block-size: 0;
+    gap: var(--uiify-carousel-gap, 0);
+    scroll-behavior: auto;
+  }
+  [data-uiify-carousel][data-axis=inline] > [data-uiify-carousel-viewport] {
+    grid-auto-flow: column;
+    grid-auto-columns: var(--uiify-carousel-slide-size, 100%);
+    overflow-inline: auto;
+    overflow-block: hidden;
+    scroll-snap-type: inline mandatory;
+  }
+  [data-uiify-carousel][data-axis=block] > [data-uiify-carousel-viewport] {
+    grid-auto-flow: row;
+    grid-auto-rows: var(--uiify-carousel-slide-size, 100%);
+    overflow-block: auto;
+    overflow-inline: hidden;
+    scroll-snap-type: block mandatory;
+  }
+  [data-uiify-carousel] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide] {
+    min-inline-size: 0;
+    min-block-size: 0;
+    scroll-snap-align: start;
+  }
+  [data-uiify-carousel] > [data-uiify-carousel-viewport]:focus-visible,
+  [data-uiify-carousel] > button[data-uiify-carousel-controls]:focus-visible,
+  [data-uiify-carousel] > [data-uiify-carousel-dots] > a:focus-visible {
+    outline: auto;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [data-uiify-carousel] > [data-uiify-carousel-viewport] {
+      scroll-behavior: smooth;
+    }
+  }
+  [data-uiify-carousel] > [data-uiify-carousel-viewport][data-dragging] {
+    scroll-behavior: auto;
+    scroll-snap-type: none;
+  }
+  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-uiify-carousel-viewport] {
+    grid-auto-flow: row;
+    grid-template-columns: 100%;
+    grid-auto-columns: auto;
+    overflow: hidden;
+    scroll-snap-type: none;
+    touch-action: pan-y pinch-zoom;
+  }
+  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide] {
+    grid-area: 1 / 1;
+    opacity: 0;
+    pointer-events: none;
+  }
+  [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide][data-state=active] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [data-uiify-carousel][data-mode=fade][data-enhanced] > [data-uiify-carousel-viewport] > [data-uiify-carousel-slide] {
+      transition: opacity var(--uiify-carousel-fade-duration, 300ms) ease;
+    }
+  }
+  [data-uiify-virtual-scroll] {
+    --uiify-virtual-scroll-row-height: 64px;
+    overflow-y: auto;
+  }
+  [data-uiify-virtual-scroll] [data-uiify-virtual-scroll-spacer] {
+    position: relative;
+    block-size: var( --uiify-virtual-scroll-total-size, calc(var(--uiify-virtual-scroll-count, 0) * var(--uiify-virtual-scroll-row-height)) );
+  }
+  [data-uiify-virtual-scroll] [data-uiify-virtual-scroll-row] {
+    position: absolute;
+    inset-inline: 0;
+    block-size: var(--uiify-row-height, var(--uiify-virtual-scroll-row-height));
+    translate: 0 var( --uiify-row-offset, calc( (var(--uiify-range-start, 0) + var(--uiify-slot-index, 0)) * var(--uiify-virtual-scroll-row-height) ) );
+  }
+}
+/*# sourceMappingURL=behavior.css.map */