@pearpages/pulp-react 0.0.0

package/dist/card.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card/Card.module.css"],"sourcesContent":["/* Every value is a token (--card-*). Slots carry padding and dividers; the root is the surface. */\n\n@layer components {\n  .card {\n    --_pad: var(--card-padding-md);\n\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n    border: 1px solid transparent;\n    border-radius: var(--card-radius);\n    background-color: var(--card-bg);\n    color: var(--card-fg);\n    text-decoration: none;\n    transition:\n      border-color var(--card-motion-duration) var(--motion-easing-standard),\n      box-shadow var(--card-motion-duration) var(--motion-easing-standard),\n      translate var(--card-motion-duration) var(--motion-easing-standard);\n\n    &[data-padding=\"sm\"] {\n      --_pad: var(--card-padding-sm);\n    }\n\n    &[data-padding=\"lg\"] {\n      --_pad: var(--card-padding-lg);\n    }\n\n    &[data-variant=\"raised\"] {\n      box-shadow: var(--card-shadow);\n    }\n\n    &[data-variant=\"outlined\"] {\n      border-color: var(--card-border);\n    }\n\n    &[data-variant=\"sunken\"] {\n      background-color: var(--card-bg-sunken);\n    }\n\n    &[data-interactive] {\n      cursor: pointer;\n\n      &:hover {\n        border-color: var(--card-border-hover);\n        translate: 0 -1px;\n      }\n\n      &:focus-visible {\n        outline: var(--card-focus-ring-width) solid var(--card-focus-ring);\n        outline-offset: var(--card-focus-ring-offset);\n      }\n    }\n  }\n\n  .header,\n  .body,\n  .footer {\n    padding: var(--_pad);\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--card-gap);\n    border-block-end: 1px solid var(--card-divider);\n  }\n\n  .body {\n    flex: 1;\n  }\n\n  .footer {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--card-gap);\n    border-block-start: 1px solid var(--card-divider);\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,aAAS;AACT,oBAAgB;AAChB,qBAAiB;AACjB,YAAQ,IAAI,MAAM;AAClB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,qBAAiB;AACjB;AAAA,MACE,aAAa,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACtE,WAAW,IAAI,wBAAwB,IAAI,yBAAyB;AAAA,MACpE,UAAU,IAAI,wBAAwB,IAAI;AAE5C,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,cAAQ,IAAI;AACd;AAEA,KAAC,CAAC;AACA,kBAAY,IAAI;AAClB;AAEA,KAAC,CAAC;AACA,oBAAc,IAAI;AACpB;AAEA,KAAC,CAAC;AACA,wBAAkB,IAAI;AACxB;AAEA,KAAC,CAAC;AACA,cAAQ;AAER,OAAC;AACC,sBAAc,IAAI;AAClB,mBAAW,EAAE;AACf;AAEA,OAAC;AACC,iBAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,wBAAgB,IAAI;AACtB;AACF;AACF;AAEA,GAACC;AAAA,EACD,CAACC;AAAA,EACD,CAACC;AACC,aAAS,IAAI;AACf;AAEA,GANCF;AAOC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACT,sBAAkB,IAAI,MAAM,IAAI;AAClC;AAEA,GAZCC;AAaC,UAAM;AACR;AAEA,GAfCC;AAgBC,aAAS;AACT,eAAW;AACX,iBAAa;AACb,SAAK,IAAI;AACT,wBAAoB,IAAI,MAAM,IAAI;AACpC;AACF;","names":["card","header","body","footer"]}

package/dist/card.d.ts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref, ReactNode } from 'react';
+
+type CardVariant = 'raised' | 'outlined' | 'sunken';
+type CardPadding = 'sm' | 'md' | 'lg';
+interface CardProps<E extends HTMLElement = HTMLElement> extends HTMLAttributes<HTMLElement> {
+    /**
+     * How the card separates from the page: `raised` by shadow, `outlined` by
+     * border, `sunken` by a recessed surface.
+     * @default 'raised'
+     */
+    variant?: CardVariant;
+    /** One knob for every slot's inner spacing. @default 'md' */
+    padding?: CardPadding;
+    /**
+     * Hover and focus affordances for a card that is itself a target. Pair it
+     * with `asChild` and a link, or supply your own role and handlers.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Render the single child element as the card (an `<a>` for a link card),
+     * merging the card's props into it.
+     * @default false
+     */
+    asChild?: boolean;
+    /** The rendered element; a `<section>` unless `asChild`. */
+    ref?: Ref<E>;
+    children: ReactNode;
+}
+interface SlotProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+/**
+ * A surface that groups related content. Compose with `Card.Header`,
+ * `Card.Body` and `Card.Footer`; the slots carry the padding and dividers so
+ * the root stays a plain surface. Every value comes from `--card-*` tokens;
+ * state is exposed as `data-variant`, `data-padding` and `data-interactive`.
+ *
+ * @status stable
+ * @category Layout
+ * @accessibility A `section` by default (a `region` when it has an accessible name); with `asChild` the child element's own semantics apply. `interactive` adds a focus ring and a tab stop only when the element is not already focusable.
+ * @do Give a card an `aria-label` or a heading in `Card.Header` when it is a landmark worth naming.
+ * Use `asChild` with an `a` for a whole-card link.
+ * @dont Put more than one primary action inside an interactive card.
+ * Nest interactive cards.
+ */
+declare function Card<E extends HTMLElement = HTMLElement>({ variant, padding, interactive, asChild, className, tabIndex, ref, children, ...rest }: CardProps<E>): react.JSX.Element;
+declare namespace Card {
+    var displayName: string;
+    var Header: typeof CardHeader;
+    var Body: typeof CardBody;
+    var Footer: typeof CardFooter;
+}
+declare function CardHeader({ className, ref, ...rest }: SlotProps): react.JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
+declare function CardBody({ className, ref, ...rest }: SlotProps): react.JSX.Element;
+declare namespace CardBody {
+    var displayName: string;
+}
+declare function CardFooter({ className, ref, ...rest }: SlotProps): react.JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
+
+export { Card, type CardPadding, type CardProps, type CardVariant };

package/dist/card.js

@@ -0,0 +1,5 @@
+export { Card } from './chunk-MRQWUCBA.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=card.js.map
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"card.js"}

package/dist/checkbox.css

@@ -0,0 +1,106 @@
+/* src/field/Field.module.css */
+@layer components {
+  .Field_field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+  }
+  .Field_label {
+    font-size: var(--field-label-font-size);
+    font-weight: var(--field-label-font-weight);
+    color: var(--field-label-fg);
+  }
+  .Field_required {
+    margin-inline-start: var(--field-required-gap);
+    color: var(--field-required-fg);
+  }
+  .Field_description {
+    margin: 0;
+    font-size: var(--field-description-font-size);
+    color: var(--field-description-fg);
+  }
+  .Field_error {
+    margin: 0;
+    font-size: var(--field-error-font-size);
+    color: var(--field-error-fg);
+  }
+}
+
+/* src/checkbox/Checkbox.module.css */
+@layer components {
+  .Checkbox_checkbox {
+    --_size: var(--checkbox-size-md);
+    --_border: var(--checkbox-border);
+    font-family: var(--font-family-body);
+    &[data-size=sm] {
+      --_size: var(--checkbox-size-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--checkbox-size-lg);
+    }
+    &[data-invalid] {
+      --_border: var(--checkbox-border-invalid);
+    }
+  }
+  .Checkbox_row {
+    display: flex;
+    align-items: center;
+    gap: var(--checkbox-gap);
+  }
+  .Checkbox_input {
+    display: grid;
+    flex: none;
+    place-content: center;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    margin: 0;
+    border: var(--size-hairline) solid var(--_border);
+    border-radius: var(--checkbox-radius);
+    background-color: var(--checkbox-bg);
+    appearance: none;
+    cursor: pointer;
+    transition: background-color var(--checkbox-motion-duration) var(--motion-easing-standard), border-color var(--checkbox-motion-duration) var(--motion-easing-standard);
+    &::after {
+      content: "";
+      inline-size: calc(var(--_size) * 0.3);
+      block-size: calc(var(--_size) * 0.55);
+      border-style: solid;
+      border-color: var(--checkbox-check);
+      border-width: 0 var(--checkbox-check-width) var(--checkbox-check-width) 0;
+      rotate: 45deg;
+      translate: 0 -10%;
+      opacity: 0;
+    }
+    &:checked,
+    &:indeterminate {
+      border-color: var(--checkbox-bg-checked);
+      background-color: var(--checkbox-bg-checked);
+      &::after {
+        opacity: 1;
+      }
+    }
+    &:indeterminate::after {
+      inline-size: calc(var(--_size) * 0.55);
+      block-size: 0;
+      border-width: 0 0 var(--checkbox-check-width);
+      rotate: 0deg;
+      translate: 0 0;
+    }
+    &:focus-visible {
+      outline: var(--checkbox-focus-ring-width) solid var(--checkbox-focus-ring);
+      outline-offset: var(--checkbox-focus-ring-offset);
+    }
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &:hover:not(:disabled, :checked, :indeterminate) {
+      border-color: var(--checkbox-border-hover);
+    }
+    &:hover:not(:disabled):is(:checked, :indeterminate) {
+      border-color: var(--checkbox-bg-checked-hover);
+      background-color: var(--checkbox-bg-checked-hover);
+    }
+  }
+}
+/*# sourceMappingURL=checkbox.css.map */

package/dist/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/Field.module.css","../src/checkbox/Checkbox.module.css"],"sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--checkbox-*). Size and invalid state are resolved\n * into private custom properties on the root, so the input has one rule per\n * property and no selector ordering to maintain.\n */\n\n@layer components {\n  .checkbox {\n    --_size: var(--checkbox-size-md);\n    --_border: var(--checkbox-border);\n\n    font-family: var(--font-family-body);\n\n    &[data-size=\"sm\"] { --_size: var(--checkbox-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--checkbox-size-lg); }\n    &[data-invalid] { --_border: var(--checkbox-border-invalid); }\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    gap: var(--checkbox-gap);\n  }\n\n  .input {\n    display: grid;\n    flex: none;\n    place-content: center;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    margin: 0;\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--checkbox-radius);\n    background-color: var(--checkbox-bg);\n    appearance: none;\n    cursor: pointer;\n    transition:\n      background-color var(--checkbox-motion-duration) var(--motion-easing-standard),\n      border-color var(--checkbox-motion-duration) var(--motion-easing-standard);\n\n    /* Sized from the box, not in percent: a grid item's percentage resolves against an auto area and collapses. */\n    &::after {\n      content: \"\";\n      inline-size: calc(var(--_size) * 0.3);\n      block-size: calc(var(--_size) * 0.55);\n      border-style: solid;\n      border-color: var(--checkbox-check);\n      border-width: 0 var(--checkbox-check-width) var(--checkbox-check-width) 0;\n      rotate: 45deg;\n      translate: 0 -10%;\n      opacity: 0;\n    }\n\n    &:checked,\n    &:indeterminate {\n      border-color: var(--checkbox-bg-checked);\n      background-color: var(--checkbox-bg-checked);\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &:indeterminate::after {\n      inline-size: calc(var(--_size) * 0.55);\n      block-size: 0;\n      border-width: 0 0 var(--checkbox-check-width);\n      rotate: 0deg;\n      translate: 0 0;\n    }\n\n    &:focus-visible {\n      outline: var(--checkbox-focus-ring-width) solid var(--checkbox-focus-ring);\n      outline-offset: var(--checkbox-focus-ring-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &:hover:not(:disabled, :checked, :indeterminate) {\n      border-color: var(--checkbox-border-hover);\n    }\n\n    &:hover:not(:disabled):is(:checked, :indeterminate) {\n      border-color: var(--checkbox-bg-checked-hover);\n      background-color: var(--checkbox-bg-checked-hover);\n    }\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,aAAS;AACT,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAACC;AACC,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,yBAAqB,IAAI;AACzB,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AAEA,GAACC;AACC,YAAQ;AACR,eAAW,IAAI;AACf,WAAO,IAAI;AACb;AACF;;;ACzBA;AACE,GAACC;AACC,aAAS,IAAI;AACb,eAAW,IAAI;AAEf,iBAAa,IAAI;AAEjB,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAkB,eAAS,IAAI;AAAqB;AACtD,KAAC,CAAC;AAAgB,iBAAW,IAAI;AAA4B;AAC/D;AAEA,GAACC;AACC,aAAS;AACT,iBAAa;AACb,SAAK,IAAI;AACX;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,mBAAe;AACf,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,YAAQ;AACR,YAAQ,IAAI,iBAAiB,MAAM,IAAI;AACvC,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,gBAAY;AACZ,YAAQ;AACR,gBACE,iBAAiB,IAAI,4BAA4B,IAAI,yBAAyB,EAC9E,aAAa,IAAI,4BAA4B,IAAI;AAGnD,KAAC;AACC,eAAS;AACT,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY,KAAK,IAAI,SAAS,EAAE;AAChC,oBAAc;AACd,oBAAc,IAAI;AAClB,oBAAc,EAAE,IAAI,wBAAwB,IAAI,wBAAwB;AACxE,cAAQ;AACR,iBAAW,EAAE;AACb,eAAS;AACX;AAEA,KAAC;AAAA,IACD,CAAC;AACC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AAEtB,OAAC;AACC,iBAAS;AACX;AACF;AAEA,KAAC,cAAc;AACb,mBAAa,KAAK,IAAI,SAAS,EAAE;AACjC,kBAAY;AACZ,oBAAc,EAAE,EAAE,IAAI;AACtB,cAAQ;AACR,iBAAW,EAAE;AACf;AAEA,KAAC;AACC,eAAS,IAAI,6BAA6B,MAAM,IAAI;AACpD,sBAAgB,IAAI;AACtB;AAEA,KAAC;AACC,cAAQ;AACR,eAAS;AACX;AAEA,KAAC,MAAM,KAAK,WAAW,UAAU;AAC/B,oBAAc,IAAI;AACpB;AAEA,KAAC,MAAM,KAAK,UAAU,IAAI,UAAU;AAClC,oBAAc,IAAI;AAClB,wBAAkB,IAAI;AACxB;AACF;AACF;","names":["field","label","required","description","error","checkbox","row","input"]}

package/dist/checkbox.d.ts

@@ -0,0 +1,41 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { T as ToggleSize } from './ToggleField-C-qKSgHh.js';
+
+type CheckboxSize = ToggleSize;
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Visible label beside the box. */
+    label: ReactNode;
+    description?: ReactNode;
+    /** Presence marks the control invalid and announces the message. */
+    error?: ReactNode;
+    /** @default 'md' */
+    size?: CheckboxSize;
+    /** The "some selected" state; visual and `aria-checked="mixed"`, independent of `checked`. @default false */
+    indeterminate?: boolean;
+    /** The `<input>` element. */
+    ref?: Ref<HTMLInputElement>;
+    /** Applied to the wrapper, not the input. */
+    className?: string;
+}
+/**
+ * A native checkbox drawn with tokens: `appearance: none` on the input, the
+ * box and tick in CSS, so keyboard, forms and assistive technology are the
+ * browser's own. Label, description and error come from Field. Controlled and
+ * uncontrolled behave like the native input. State is the native `:checked`
+ * and `:indeterminate`, plus `data-indeterminate` on the input.
+ *
+ * @status stable
+ * @category Forms
+ * @accessibility A native `input type="checkbox"` with `appearance: none`; label, description and error wire through Field. `indeterminate` sets the DOM property and `aria-checked="mixed"`. Keyboard: Space toggles.
+ * @do Use `indeterminate` for a parent whose children are partly selected.
+ * Group related checkboxes under a `fieldset`.
+ * @dont Use it for an immediate setting; use Switch.
+ * Hide the label; the description does not name the control.
+ */
+declare function Checkbox({ label, description, error, size, indeterminate, required, disabled, id, className, ref, 'aria-describedby': describedBy, ...rest }: CheckboxProps): react.JSX.Element;
+declare namespace Checkbox {
+    var displayName: string;
+}
+
+export { Checkbox, type CheckboxProps, type CheckboxSize };

package/dist/checkbox.js

@@ -0,0 +1,7 @@
+export { Checkbox } from './chunk-DWE374JX.js';
+import './chunk-BBV4L5WO.js';
+import './chunk-2PXTVZ7H.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=checkbox.js.map
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"checkbox.js"}

package/dist/chunk-2PXTVZ7H.js

@@ -0,0 +1,95 @@
+import { renderAsChild } from './chunk-ZVDN3GRI.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { createContext, useContext, useId, useState, useCallback, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/field/Field.module.css
+var Field_default = {
+  field: "Field_field",
+  label: "Field_label",
+  required: "Field_required",
+  description: "Field_description",
+  error: "Field_error"
+};
+var FieldContext = createContext(null);
+var DEV = typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+function useField() {
+  const context = useContext(FieldContext);
+  if (!context) throw new Error("useField must be used inside <Field>");
+  return context;
+}
+function Field({ id, invalid = false, disabled = false, required = false, className, ref, children, ...rest }) {
+  const autoId = useId();
+  const controlId = id ?? autoId;
+  const [parts, setParts] = useState({ description: 0, error: 0 });
+  const register = useCallback((part) => {
+    setParts((current) => {
+      const next = current[part] + 1;
+      if (DEV && next === 2) console.warn(`Field: more than one Field.${part === "error" ? "Error" : "Description"} is mounted; their ids collide.`);
+      return { ...current, [part]: next };
+    });
+    return () => setParts((current) => ({ ...current, [part]: Math.max(0, current[part] - 1) }));
+  }, []);
+  const describedBy = [parts.description > 0 && `${controlId}-description`, parts.error > 0 && `${controlId}-error`].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id: controlId, labelId: `${controlId}-label`, invalid, disabled, required, describedBy, register }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: classes(Field_default.field, className),
+      "data-invalid": invalid ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-required": required ? "" : void 0,
+      children
+    }
+  ) });
+}
+function FieldLabel({ as = "label", className, ref, children, ...rest }) {
+  const field = useField();
+  const marker = field.required && /* @__PURE__ */ jsx("span", { className: Field_default.required, "aria-hidden": "true", children: "*" });
+  if (as === "span") {
+    return /* @__PURE__ */ jsxs("span", { ...rest, id: field.labelId, className: classes(Field_default.label, className), children: [
+      children,
+      marker
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("label", { ...rest, ref, htmlFor: field.id, className: classes(Field_default.label, className), children: [
+    children,
+    marker
+  ] });
+}
+function FieldControl({ "aria-describedby": extra, children }) {
+  const field = useField();
+  return renderAsChild("Field.Control", children, {
+    id: field.id,
+    "aria-describedby": [extra, field.describedBy].filter(Boolean).join(" ") || void 0,
+    "aria-invalid": field.invalid || void 0,
+    disabled: field.disabled || void 0,
+    required: field.required || void 0
+  });
+}
+function FieldDescription({ className, ref, children, ...rest }) {
+  const field = useField();
+  const { register } = field;
+  useLayoutEffect(() => register("description"), [register]);
+  return /* @__PURE__ */ jsx("p", { ...rest, ref, id: `${field.id}-description`, className: classes(Field_default.description, className), children });
+}
+function FieldError({ className, ref, children, ...rest }) {
+  const field = useField();
+  const { register } = field;
+  useLayoutEffect(() => register("error"), [register]);
+  return /* @__PURE__ */ jsx("p", { ...rest, ref, id: `${field.id}-error`, role: "alert", className: classes(Field_default.error, className), children });
+}
+Field.displayName = "Field";
+FieldLabel.displayName = "Field.Label";
+FieldControl.displayName = "Field.Control";
+FieldDescription.displayName = "Field.Description";
+FieldError.displayName = "Field.Error";
+Field.Label = FieldLabel;
+Field.Control = FieldControl;
+Field.Description = FieldDescription;
+Field.Error = FieldError;
+
+export { Field, useField };
+//# sourceMappingURL=chunk-2PXTVZ7H.js.map
+//# sourceMappingURL=chunk-2PXTVZ7H.js.map

package/dist/chunk-2PXTVZ7H.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/field/Field.module.css","../src/field/Field.tsx"],"names":["field","label","required","description","error"],"mappings":"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","file":"chunk-2PXTVZ7H.js","sourcesContent":["/* Every value is a token (--field-*). The control itself brings its own styles. */\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","import {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useState,\n  type HTMLAttributes,\n  type LabelHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { renderAsChild } from '../internal/asChild';\nimport { classes } from '../internal/classes';\nimport styles from './Field.module.css';\n\ntype Part = 'description' | 'error';\n\nexport interface FieldContextValue {\n  /** The control's id; the label points at it. */\n  id: string;\n  /** The label's id, for controls that are labelled by reference (`aria-labelledby`), such as a radio group. */\n  labelId: string;\n  invalid: boolean;\n  disabled: boolean;\n  required: boolean;\n  /** ids of the description and error that are actually mounted, space separated. */\n  describedBy: string | undefined;\n  /** Registers a mounted part; returns the unregister function. */\n  register: (part: Part) => () => void;\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\nconst DEV = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';\n\n/** The field's ids and state, for controls that wire themselves instead of using `Field.Control`. */\nexport function useField(): FieldContextValue {\n  const context = useContext(FieldContext);\n  if (!context) throw new Error('useField must be used inside <Field>');\n  return context;\n}\n\nexport interface FieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** The control's id. Generated when omitted. */\n  id?: string;\n  /** @default false */\n  invalid?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  required?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  children: ReactNode;\n}\n\n/**\n * The wiring every form control shares: a label pointing at the control, a\n * description and an error exposed through `aria-describedby`, and invalid,\n * disabled and required state in one place. Only parts that are mounted end\n * up in `aria-describedby`, so no id ever dangles. Compose with\n * `Field.Label`, `Field.Control`, `Field.Description` and `Field.Error`\n * (one of each); state on the DOM as `data-invalid`, `data-disabled`,\n * `data-required`.\n *\n * Known limitation: parts register in a layout effect, so server-rendered\n * HTML carries no `aria-describedby` until hydration. The relationship is\n * complete for every interactive use; static HTML consumers should not rely\n * on it yet.\n *\n * @status stable\n * @category Forms\n * @accessibility Wires `label[for]`, `aria-describedby` (only mounted parts), `aria-invalid`, `aria-required` and `disabled` onto the control. Server-rendered HTML has no `aria-describedby` until hydration (a test pins the gap).\n * @do Use `Field.Label as=\"span\"` with `useField().labelId` for groups that cannot be labelled by `for`.\n * @dont Mount two `Field.Description` or two `Field.Error`; ids would collide (development warns).\n */\nexport function Field({ id, invalid = false, disabled = false, required = false, className, ref, children, ...rest }: FieldProps) {\n  const autoId = useId();\n  const controlId = id ?? autoId;\n  // Counts, not booleans: a second instance of a part is a bug (duplicate ids)\n  // and is reported in development instead of silently colliding.\n  const [parts, setParts] = useState<Record<Part, number>>({ description: 0, error: 0 });\n\n  const register = useCallback((part: Part) => {\n    setParts((current) => {\n      const next = current[part] + 1;\n      if (DEV && next === 2) console.warn(`Field: more than one Field.${part === 'error' ? 'Error' : 'Description'} is mounted; their ids collide.`);\n      return { ...current, [part]: next };\n    });\n    return () => setParts((current) => ({ ...current, [part]: Math.max(0, current[part] - 1) }));\n  }, []);\n\n  const describedBy =\n    [parts.description > 0 && `${controlId}-description`, parts.error > 0 && `${controlId}-error`].filter(Boolean).join(' ') ||\n    undefined;\n\n  return (\n    <FieldContext.Provider value={{ id: controlId, labelId: `${controlId}-label`, invalid, disabled, required, describedBy, register }}>\n      <div\n        {...rest}\n        ref={ref}\n        className={classes(styles.field, className)}\n        data-invalid={invalid ? '' : undefined}\n        data-disabled={disabled ? '' : undefined}\n        data-required={required ? '' : undefined}\n      >\n        {children}\n      </div>\n    </FieldContext.Provider>\n  );\n}\n\ninterface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * `label` points at the control with `for`. `span` is for controls that are\n   * not labelable (a radio group, a fieldset): it carries `labelId` and the\n   * control references it with `aria-labelledby`.\n   * @default 'label'\n   */\n  as?: 'label' | 'span';\n  ref?: Ref<HTMLLabelElement>;\n  children: ReactNode;\n}\n\nfunction FieldLabel({ as = 'label', className, ref, children, ...rest }: FieldLabelProps) {\n  const field = useField();\n  const marker = field.required && (\n    <span className={styles.required} aria-hidden=\"true\">\n      *\n    </span>\n  );\n  if (as === 'span') {\n    return (\n      <span {...rest} id={field.labelId} className={classes(styles.label, className)}>\n        {children}\n        {marker}\n      </span>\n    );\n  }\n  return (\n    <label {...rest} ref={ref} htmlFor={field.id} className={classes(styles.label, className)}>\n      {children}\n      {marker}\n    </label>\n  );\n}\n\ninterface FieldControlProps {\n  /** Extra ids to describe the control by, kept alongside the field's own. */\n  'aria-describedby'?: string;\n  /** The single control element; the field's wiring is merged into it. */\n  children: ReactNode;\n}\n\nfunction FieldControl({ 'aria-describedby': extra, children }: FieldControlProps) {\n  const field = useField();\n  return renderAsChild('Field.Control', children, {\n    id: field.id,\n    'aria-describedby': [extra, field.describedBy].filter(Boolean).join(' ') || undefined,\n    'aria-invalid': field.invalid || undefined,\n    disabled: field.disabled || undefined,\n    required: field.required || undefined,\n  });\n}\n\ninterface FieldTextProps extends HTMLAttributes<HTMLParagraphElement> {\n  ref?: Ref<HTMLParagraphElement>;\n  children?: ReactNode;\n}\n\nfunction FieldDescription({ className, ref, children, ...rest }: FieldTextProps) {\n  const field = useField();\n  const { register } = field;\n  useLayoutEffect(() => register('description'), [register]);\n  return (\n    <p {...rest} ref={ref} id={`${field.id}-description`} className={classes(styles.description, className)}>\n      {children}\n    </p>\n  );\n}\n\nfunction FieldError({ className, ref, children, ...rest }: FieldTextProps) {\n  const field = useField();\n  const { register } = field;\n  useLayoutEffect(() => register('error'), [register]);\n  return (\n    <p {...rest} ref={ref} id={`${field.id}-error`} role=\"alert\" className={classes(styles.error, className)}>\n      {children}\n    </p>\n  );\n}\n\nField.displayName = 'Field';\nFieldLabel.displayName = 'Field.Label';\nFieldControl.displayName = 'Field.Control';\nFieldDescription.displayName = 'Field.Description';\nFieldError.displayName = 'Field.Error';\n\nField.Label = FieldLabel;\nField.Control = FieldControl;\nField.Description = FieldDescription;\nField.Error = FieldError;\n"]}

package/dist/chunk-2ZP4ZBI5.js

@@ -0,0 +1,43 @@
+import { classes } from './chunk-MI4QUKQS.js';
+import { createElement } from 'react';
+
+// src/text/Text.module.css
+var Text_default = {
+  text: "Text_text"
+};
+
+// src/text/Text.tsx
+function Text({
+  as = "p",
+  size = "md",
+  weight = "regular",
+  tone = "default",
+  family = "body",
+  align,
+  truncate = false,
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  return createElement(
+    as,
+    {
+      ...rest,
+      ref,
+      className: classes(Text_default.text, className),
+      "data-size": size,
+      "data-weight": weight,
+      "data-tone": tone,
+      "data-family": family,
+      "data-align": align,
+      "data-truncate": truncate ? "" : void 0
+    },
+    children
+  );
+}
+Text.displayName = "Text";
+
+export { Text };
+//# sourceMappingURL=chunk-2ZP4ZBI5.js.map
+//# sourceMappingURL=chunk-2ZP4ZBI5.js.map

package/dist/chunk-2ZP4ZBI5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text/Text.module.css","../src/text/Text.tsx"],"names":["text"],"mappings":";;;;AAAA,IAAA,YAAA,GAAA;AAAA,EAGG,IAAA,EAAAA;AAAA,CAAA;;;ACsCI,SAAS,IAAA,CAAK;AAAA,EACnB,EAAA,GAAK,GAAA;AAAA,EACL,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,SAAA,EAAW,OAAA,CAAQ,YAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAAA,MACzC,WAAA,EAAa,IAAA;AAAA,MACb,aAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAa,IAAA;AAAA,MACb,aAAA,EAAe,MAAA;AAAA,MACf,YAAA,EAAc,KAAA;AAAA,MACd,eAAA,EAAiB,WAAW,EAAA,GAAK;AAAA,KACnC;AAAA,IACA;AAAA,GACF;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"chunk-2ZP4ZBI5.js","sourcesContent":["/* Every value is a token (--text-*). Variants are data attributes. */\n\n@layer components {\n  .text {\n    margin: 0;\n    font-family: var(--text-font-family-body);\n    font-size: var(--text-size-md);\n    font-weight: var(--text-weight-regular);\n    line-height: var(--text-line-height);\n    color: var(--text-tone-default);\n\n    &[data-size=\"xs\"] { font-size: var(--text-size-xs); }\n    &[data-size=\"sm\"] { font-size: var(--text-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--text-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--text-size-xl); }\n    &[data-weight=\"medium\"] { font-weight: var(--text-weight-medium); }\n    &[data-weight=\"semibold\"] { font-weight: var(--text-weight-semibold); }\n    &[data-tone=\"muted\"] { color: var(--text-tone-muted); }\n    &[data-tone=\"faint\"] { color: var(--text-tone-faint); }\n    &[data-family=\"mono\"] { font-family: var(--text-font-family-mono); }\n    &[data-align=\"start\"] { text-align: start; }\n    &[data-align=\"center\"] { text-align: center; }\n    &[data-align=\"end\"] { text-align: end; }\n\n    &[data-truncate] {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './Text.module.css';\n\nexport type TextElement = 'p' | 'span' | 'div' | 'strong' | 'em' | 'small';\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type TextWeight = 'regular' | 'medium' | 'semibold';\nexport type TextTone = 'default' | 'muted' | 'faint';\nexport type TextFamily = 'body' | 'mono';\nexport type TextAlign = 'start' | 'center' | 'end';\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  /** The element to render. For a label use `Field.Label`. @default 'p' */\n  as?: TextElement;\n  /** @default 'md' */\n  size?: TextSize;\n  /** @default 'regular' */\n  weight?: TextWeight;\n  /** Emphasis: `muted` for secondary text, `faint` for the least important. @default 'default' */\n  tone?: TextTone;\n  /** @default 'body' */\n  family?: TextFamily;\n  align?: TextAlign;\n  /** Single line with an ellipsis. @default false */\n  truncate?: boolean;\n  ref?: Ref<HTMLElement>;\n  children: ReactNode;\n}\n\n/**\n * The type scale as a component. Every combination of size, weight, tone and\n * family resolves through `--text-*` tokens, so body copy never carries its\n * own font declarations. State on the DOM: `data-size`, `data-weight`,\n * `data-tone`, `data-family`, `data-align`, `data-truncate`.\n *\n * @status stable\n * @category Typography\n * @accessibility Plain text with no role beyond the element chosen by `as`; `truncate` clips visually while the full text stays in the accessibility tree.\n * @do Use `tone=\"faint\"` only on base and raised surfaces (its contrast is promised there).\n * @dont Use `as=\"label\"`; labels belong to Field.\n */\nexport function Text({\n  as = 'p',\n  size = 'md',\n  weight = 'regular',\n  tone = 'default',\n  family = 'body',\n  align,\n  truncate = false,\n  className,\n  ref,\n  children,\n  ...rest\n}: TextProps) {\n  return createElement(\n    as,\n    {\n      ...rest,\n      ref,\n      className: classes(styles.text, className),\n      'data-size': size,\n      'data-weight': weight,\n      'data-tone': tone,\n      'data-family': family,\n      'data-align': align,\n      'data-truncate': truncate ? '' : undefined,\n    },\n    children,\n  );\n}\n\nText.displayName = 'Text';\n"]}

package/dist/chunk-3GWESUGD.js

@@ -0,0 +1,28 @@
+import { classes } from './chunk-MI4QUKQS.js';
+import { createElement } from 'react';
+
+// src/heading/Heading.module.css
+var Heading_default = {
+  heading: "Heading_heading"
+};
+
+// src/heading/Heading.tsx
+var SIZE_BY_LEVEL = { 1: "2xl", 2: "xl", 3: "lg", 4: "md", 5: "sm", 6: "sm" };
+function Heading({ level, size, tone = "default", className, ref, children, ...rest }) {
+  return createElement(
+    `h${level}`,
+    {
+      ...rest,
+      ref,
+      className: classes(Heading_default.heading, className),
+      "data-size": size ?? SIZE_BY_LEVEL[level],
+      "data-tone": tone
+    },
+    children
+  );
+}
+Heading.displayName = "Heading";
+
+export { Heading };
+//# sourceMappingURL=chunk-3GWESUGD.js.map
+//# sourceMappingURL=chunk-3GWESUGD.js.map

package/dist/chunk-3GWESUGD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/heading/Heading.module.css","../src/heading/Heading.tsx"],"names":["heading"],"mappings":";;;;AAAA,IAAA,eAAA,GAAA;AAAA,EAGG,OAAA,EAAAA;AAAA,CAAA;;;ACgBH,IAAM,aAAA,GAAmD,EAAE,CAAA,EAAG,KAAA,EAAO,CAAA,EAAG,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,GAAG,IAAA,EAAK;AAa1G,SAAS,OAAA,CAAQ,EAAE,KAAA,EAAO,IAAA,EAAM,IAAA,GAAO,SAAA,EAAW,SAAA,EAAW,GAAA,EAAK,QAAA,EAAU,GAAG,IAAA,EAAK,EAAiB;AAC1G,EAAA,OAAO,aAAA;AAAA,IACL,IAAI,KAAK,CAAA,CAAA;AAAA,IACT;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,SAAA,EAAW,OAAA,CAAQ,eAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,MAC5C,WAAA,EAAa,IAAA,IAAQ,aAAA,CAAc,KAAK,CAAA;AAAA,MACxC,WAAA,EAAa;AAAA,KACf;AAAA,IACA;AAAA,GACF;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-3GWESUGD.js","sourcesContent":["/* Every value is a token (--heading-*). Size is a data attribute, independent of the level. */\n\n@layer components {\n  .heading {\n    margin: 0;\n    font-family: var(--heading-font-family);\n    font-weight: var(--heading-font-weight);\n    line-height: var(--heading-line-height);\n    color: var(--heading-tone-default);\n    text-wrap: balance;\n\n    &[data-size=\"sm\"] { font-size: var(--heading-size-sm); }\n    &[data-size=\"md\"] { font-size: var(--heading-size-md); }\n    &[data-size=\"lg\"] { font-size: var(--heading-size-lg); }\n    &[data-size=\"xl\"] { font-size: var(--heading-size-xl); }\n    &[data-size=\"2xl\"] { font-size: var(--heading-size-2xl); }\n    &[data-tone=\"muted\"] { color: var(--heading-tone-muted); }\n  }\n}\n","import { createElement, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { classes } from '../internal/classes';\nimport styles from './Heading.module.css';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type HeadingTone = 'default' | 'muted';\n\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** The document outline level; sets the element (`h1`–`h6`). */\n  level: HeadingLevel;\n  /** Visual size, decoupled from the level. Defaults by level: 1→2xl, 2→xl, 3→lg, 4→md, 5 and 6→sm. */\n  size?: HeadingSize;\n  /** @default 'default' */\n  tone?: HeadingTone;\n  ref?: Ref<HTMLHeadingElement>;\n  children: ReactNode;\n}\n\nconst SIZE_BY_LEVEL: Record<HeadingLevel, HeadingSize> = { 1: '2xl', 2: 'xl', 3: 'lg', 4: 'md', 5: 'sm', 6: 'sm' };\n\n/**\n * A heading whose outline level and visual size are separate decisions, so\n * the document structure stays honest while the design stays flexible.\n * Display family and tight leading from `--heading-*` tokens.\n *\n * @status stable\n * @category Typography\n * @accessibility Renders the `h1`–`h6` element of `level`; `size` changes only the look, so the outline stays truthful.\n * @do Pick `level` from the outline, then `size` from the design.\n * @dont Skip heading levels to get a smaller size; change `size` instead.\n */\nexport function Heading({ level, size, tone = 'default', className, ref, children, ...rest }: HeadingProps) {\n  return createElement(\n    `h${level}`,\n    {\n      ...rest,\n      ref,\n      className: classes(styles.heading, className),\n      'data-size': size ?? SIZE_BY_LEVEL[level],\n      'data-tone': tone,\n    },\n    children,\n  );\n}\n\nHeading.displayName = 'Heading';\n"]}

package/dist/chunk-4HRNRTXI.js

@@ -0,0 +1,25 @@
+import { AriaField_default } from './chunk-YUHS5S5Y.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { Label, Text, FieldError } from 'react-aria-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function AriaFieldLabel({ required, children }) {
+  return /* @__PURE__ */ jsxs(Label, { className: AriaField_default.label, children: [
+    children,
+    required && /* @__PURE__ */ jsx("span", { className: AriaField_default.required, "aria-hidden": "true", children: "*" })
+  ] });
+}
+function AriaFieldDescription({ children }) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx(Text, { slot: "description", className: AriaField_default.description, children });
+}
+function AriaFieldError({ children }) {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx(FieldError, { className: AriaField_default.error, children });
+}
+var ariaFieldClass = (...extra) => classes(AriaField_default.field, ...extra);
+var isPresent = (error) => error !== void 0 && error !== null && error !== false && error !== "";
+
+export { AriaFieldDescription, AriaFieldError, AriaFieldLabel, ariaFieldClass, isPresent };
+//# sourceMappingURL=chunk-4HRNRTXI.js.map
+//# sourceMappingURL=chunk-4HRNRTXI.js.map

package/dist/chunk-4HRNRTXI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/AriaField.tsx"],"names":[],"mappings":";;;;;AAYO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,QAAA,EAAS,EAAgD;AAClG,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAW,iBAAA,CAAO,KAAA,EACtB,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA,wBACE,MAAA,EAAA,EAAK,SAAA,EAAW,kBAAO,QAAA,EAAU,aAAA,EAAY,QAAO,QAAA,EAAA,GAAA,EAErD;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,SAAS,oBAAA,CAAqB,EAAE,QAAA,EAAS,EAA6B;AAC3E,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,2BACG,IAAA,EAAA,EAAK,IAAA,EAAK,eAAc,SAAA,EAAW,iBAAA,CAAO,aACxC,QAAA,EACH,CAAA;AAEJ;AAGO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAS,EAA6B;AACrE,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AACtB,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,iBAAA,CAAO,OAAQ,QAAA,EAAS,CAAA;AACxD;AAGO,IAAM,iBAAiB,CAAA,GAAI,KAAA,KAAoD,QAAQ,iBAAA,CAAO,KAAA,EAAO,GAAG,KAAK;AAG7G,IAAM,SAAA,GAAY,CAAC,KAAA,KAA8B,KAAA,KAAU,UAAa,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,KAAA,IAAS,KAAA,KAAU","file":"chunk-4HRNRTXI.js","sourcesContent":["import type { ReactNode } from 'react';\nimport { FieldError, Label, Text } from 'react-aria-components';\nimport { classes } from './classes';\nimport styles from './AriaField.module.css';\n\n/**\n * Label, description and error for controls built on React Aria (decision\n * record 001). React Aria wires `htmlFor`, `aria-labelledby` and\n * `aria-describedby` itself through its contexts, so these are the vendor's\n * parts with pulp's `--field-*` tokens: they look exactly like `Field`'s.\n * `Field` stays the wrapper for native controls, where pulp does the wiring.\n */\nexport function AriaFieldLabel({ required, children }: { required?: boolean; children: ReactNode }) {\n  return (\n    <Label className={styles.label}>\n      {children}\n      {required && (\n        <span className={styles.required} aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </Label>\n  );\n}\n\nexport function AriaFieldDescription({ children }: { children?: ReactNode }) {\n  if (!children) return null;\n  return (\n    <Text slot=\"description\" className={styles.description}>\n      {children}\n    </Text>\n  );\n}\n\n/** Rendered by React Aria only while the control is invalid. */\nexport function AriaFieldError({ children }: { children?: ReactNode }) {\n  if (!children) return null;\n  return <FieldError className={styles.error}>{children}</FieldError>;\n}\n\n/** The vertical field layout class, for the vendor root element. */\nexport const ariaFieldClass = (...extra: Array<string | false | null | undefined>) => classes(styles.field, ...extra);\n\n/** `error` is \"present\" the way Field defines it: not undefined, null, false or empty. */\nexport const isPresent = (error: ReactNode): boolean => error !== undefined && error !== null && error !== false && error !== '';\n"]}

package/dist/chunk-5SBKZS56.js

@@ -0,0 +1,56 @@
+import { toDate, CalendarGrid, fromDate, calendarRootClass } from './chunk-OXYP34CG.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { useState } from 'react';
+import { today, getLocalTimeZone } from '@internationalized/date';
+import { Calendar as Calendar$1, I18nProvider } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+function Calendar({
+  value,
+  defaultValue,
+  onChange,
+  min,
+  max,
+  isDateUnavailable,
+  disabled = false,
+  readOnly = false,
+  locale,
+  "aria-label": ariaLabel = "Calendar",
+  className,
+  ref,
+  ...rest
+}) {
+  const [focused, setFocused] = useState(() => toDate(value ?? defaultValue) ?? today(getLocalTimeZone()));
+  const [lastValue, setLastValue] = useState(value);
+  if (value !== lastValue) {
+    setLastValue(value);
+    const next = toDate(value);
+    if (next) setFocused(next);
+  }
+  const calendar = /* @__PURE__ */ jsx(
+    Calendar$1,
+    {
+      ...rest,
+      ref,
+      "aria-label": ariaLabel,
+      className: classes(calendarRootClass, className),
+      value: toDate(value),
+      defaultValue: toDate(defaultValue),
+      onChange: (date) => onChange?.(fromDate(date)),
+      focusedValue: focused,
+      onFocusChange: setFocused,
+      minValue: toDate(min) ?? void 0,
+      maxValue: toDate(max) ?? void 0,
+      isDateUnavailable: isDateUnavailable && ((date) => isDateUnavailable(fromDate(date) ?? "")),
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      children: /* @__PURE__ */ jsx(CalendarGrid, {})
+    }
+  );
+  return locale ? /* @__PURE__ */ jsx(I18nProvider, { locale, children: calendar }) : calendar;
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
+//# sourceMappingURL=chunk-5SBKZS56.js.map
+//# sourceMappingURL=chunk-5SBKZS56.js.map

package/dist/chunk-5SBKZS56.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/calendar/Calendar.tsx"],"names":["AriaCalendar"],"mappings":";;;;;;;AA+CO,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,cAAc,SAAA,GAAY,UAAA;AAAA,EAC1B,SAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAGhB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,CAAuB,MAAM,MAAA,CAAO,KAAA,IAAS,YAAY,CAAA,IAAK,KAAA,CAAM,gBAAA,EAAkB,CAAC,CAAA;AACrH,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,EAAA,IAAI,UAAU,SAAA,EAAW;AACvB,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,MAAM,IAAA,GAAO,OAAO,KAAK,CAAA;AACzB,IAAA,IAAI,IAAA,aAAiB,IAAI,CAAA;AAAA,EAC3B;AACA,EAAA,MAAM,QAAA,mBACJ,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAW,OAAA,CAAQ,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAC/C,KAAA,EAAO,OAAO,KAAK,CAAA;AAAA,MACnB,YAAA,EAAc,OAAO,YAAY,CAAA;AAAA,MACjC,UAAU,CAAC,IAAA,KAAS,QAAA,GAAW,QAAA,CAAS,IAAI,CAAC,CAAA;AAAA,MAC7C,YAAA,EAAc,OAAA;AAAA,MACd,aAAA,EAAe,UAAA;AAAA,MACf,QAAA,EAAU,MAAA,CAAO,GAAG,CAAA,IAAK,MAAA;AAAA,MACzB,QAAA,EAAU,MAAA,CAAO,GAAG,CAAA,IAAK,MAAA;AAAA,MACzB,iBAAA,EAAmB,sBAAsB,CAAC,IAAA,KAAS,kBAAkB,QAAA,CAAS,IAAI,KAAK,EAAE,CAAA,CAAA;AAAA,MACzF,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,QAAA;AAAA,MAEZ,8BAAC,YAAA,EAAA,EAAa;AAAA;AAAA,GAChB;AAEF,EAAA,OAAO,MAAA,mBAAS,GAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAiB,oBAAS,CAAA,GAAkB,QAAA;AAC5E;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-5SBKZS56.js","sourcesContent":["import { useState, type Ref } from 'react';\nimport { getLocalTimeZone, today, type CalendarDate } from '@internationalized/date';\nimport { Calendar as AriaCalendar, I18nProvider } from 'react-aria-components';\nimport { classes } from '../internal/classes';\nimport { fromDate, toDate } from '../internal/dates';\nimport { CalendarGrid, calendarRootClass } from './CalendarGrid';\n\nexport interface CalendarProps {\n  /** Selected date as `YYYY-MM-DD` (controlled). `null` is \"none\". */\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n  /** Earliest selectable date, `YYYY-MM-DD`. */\n  min?: string;\n  /** Latest selectable date, `YYYY-MM-DD`. */\n  max?: string;\n  /** Marks single dates as unavailable (shown, not selectable). */\n  isDateUnavailable?: (date: string) => boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  readOnly?: boolean;\n  /** BCP 47 tag. Month names, weekday order and the first day of the week follow it; defaults to the browser's. */\n  locale?: string;\n  /** The grid's accessible name. @default 'Calendar' */\n  'aria-label'?: string;\n  id?: string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A month grid for choosing one date, on React Aria's calendar (decision\n * record 001): arrows move by day and week, Page Up/Down by month, Home and\n * End to the edges of the week, Enter or Space selects; every cell is\n * announced with its full date and the grid is named by a visually hidden\n * level-2 heading. Dates cross the API as ISO strings. For a date inside a\n * form, DatePicker wraps this in a field with a popover.\n *\n * @status experimental\n * @category Forms\n * @accessibility The grid is `role=\"grid\"` named by a visually hidden level-2 heading (\"Calendar, September 2026\"); each day is a button announced with its full date, today and selection state. Arrows move by day and week, Page Up/Down by month, Home/End to the week edges, Enter or Space selects.\n * @do Pass `locale` when the app's language is not the browser's.\n * Mark unavailable dates with `isDateUnavailable` rather than removing them.\n * @dont Use it inside a form; use DatePicker, which adds the field and the popover.\n * Set `min` after `max`; the vendor disables the whole grid.\n */\nexport function Calendar({\n  value,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  isDateUnavailable,\n  disabled = false,\n  readOnly = false,\n  locale,\n  'aria-label': ariaLabel = 'Calendar',\n  className,\n  ref,\n  ...rest\n}: CalendarProps) {\n  // The visible month follows the user, and also jumps when `value` is\n  // changed from outside (the vendor alone would keep showing the old month).\n  const [focused, setFocused] = useState<CalendarDate>(() => toDate(value ?? defaultValue) ?? today(getLocalTimeZone()));\n  const [lastValue, setLastValue] = useState(value);\n  if (value !== lastValue) {\n    setLastValue(value);\n    const next = toDate(value);\n    if (next) setFocused(next);\n  }\n  const calendar = (\n    <AriaCalendar\n      {...rest}\n      ref={ref}\n      aria-label={ariaLabel}\n      className={classes(calendarRootClass, className)}\n      value={toDate(value)}\n      defaultValue={toDate(defaultValue)}\n      onChange={(date) => onChange?.(fromDate(date))}\n      focusedValue={focused}\n      onFocusChange={setFocused}\n      minValue={toDate(min) ?? undefined}\n      maxValue={toDate(max) ?? undefined}\n      isDateUnavailable={isDateUnavailable && ((date) => isDateUnavailable(fromDate(date) ?? ''))}\n      isDisabled={disabled}\n      isReadOnly={readOnly}\n    >\n      <CalendarGrid />\n    </AriaCalendar>\n  );\n  return locale ? <I18nProvider locale={locale}>{calendar}</I18nProvider> : calendar;\n}\n\nCalendar.displayName = 'Calendar';\n"]}

package/dist/chunk-6I26MMQF.js

@@ -0,0 +1,19 @@
+import { Icon } from './chunk-ASNTNTJW.js';
+import { classes } from './chunk-MI4QUKQS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/badge/Badge.module.css
+var Badge_default = {
+  badge: "Badge_badge"
+};
+function Badge({ tone = "neutral", variant = "subtle", size = "md", icon, className, ref, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes(Badge_default.badge, className), "data-tone": tone, "data-variant": variant, "data-size": size, children: [
+    icon && /* @__PURE__ */ jsx(Icon, { size: "inherit", children: icon }),
+    children
+  ] });
+}
+Badge.displayName = "Badge";
+
+export { Badge };
+//# sourceMappingURL=chunk-6I26MMQF.js.map
+//# sourceMappingURL=chunk-6I26MMQF.js.map

package/dist/chunk-6I26MMQF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge/Badge.module.css","../src/badge/Badge.tsx"],"names":["badge"],"mappings":";;;;;AAAA,IAAA,aAAA,GAAA;AAAA,EAGG,KAAA,EAAAA;AAAA,CAAA;ACiCI,SAAS,KAAA,CAAM,EAAE,IAAA,GAAO,SAAA,EAAW,UAAU,QAAA,EAAU,IAAA,GAAO,IAAA,EAAM,IAAA,EAAM,SAAA,EAAW,GAAA,EAAK,QAAA,EAAU,GAAG,MAAK,EAAe;AAChI,EAAA,4BACG,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,GAAA,EAAU,WAAW,OAAA,CAAQ,aAAA,CAAO,KAAA,EAAO,SAAS,GAAG,WAAA,EAAW,IAAA,EAAM,cAAA,EAAc,OAAA,EAAS,aAAW,IAAA,EACvH,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,SAAA,EAAW,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,IACnC;AAAA,GAAA,EACH,CAAA;AAEJ;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-6I26MMQF.js","sourcesContent":["/* Every value is a token (--badge-*). Tone × variant resolve into private custom properties. */\n\n@layer components {\n  .badge {\n    --_bg: var(--badge-neutral-subtle-bg);\n    --_fg: var(--badge-neutral-subtle-fg);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--badge-gap);\n    padding-block: var(--badge-padding-block);\n    padding-inline: var(--badge-padding-inline-md);\n    border-radius: var(--badge-radius);\n    background-color: var(--_bg);\n    color: var(--_fg);\n    font-size: var(--badge-font-size-md);\n    font-weight: var(--badge-font-weight);\n    line-height: var(--badge-line-height);\n    white-space: nowrap;\n\n    &[data-size=\"sm\"] {\n      padding-inline: var(--badge-padding-inline-sm);\n      font-size: var(--badge-font-size-sm);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-neutral-solid-bg);\n      --_fg: var(--badge-neutral-solid-fg);\n    }\n\n    &[data-tone=\"neutral\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-neutral-subtle-bg);\n      --_fg: var(--badge-neutral-subtle-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-info-solid-bg);\n      --_fg: var(--badge-info-solid-fg);\n    }\n\n    &[data-tone=\"info\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-info-subtle-bg);\n      --_fg: var(--badge-info-subtle-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-success-solid-bg);\n      --_fg: var(--badge-success-solid-fg);\n    }\n\n    &[data-tone=\"success\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-success-subtle-bg);\n      --_fg: var(--badge-success-subtle-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-warning-solid-bg);\n      --_fg: var(--badge-warning-solid-fg);\n    }\n\n    &[data-tone=\"warning\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-warning-subtle-bg);\n      --_fg: var(--badge-warning-subtle-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"solid\"] {\n      --_bg: var(--badge-error-solid-bg);\n      --_fg: var(--badge-error-solid-fg);\n    }\n\n    &[data-tone=\"error\"][data-variant=\"subtle\"] {\n      --_bg: var(--badge-error-subtle-bg);\n      --_fg: var(--badge-error-subtle-fg);\n    }\n  }\n}\n","import type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Icon } from '../icon';\nimport { classes } from '../internal/classes';\nimport styles from './Badge.module.css';\n\nexport type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';\nexport type BadgeVariant = 'solid' | 'subtle';\nexport type BadgeSize = 'sm' | 'md';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Meaning, not colour: `neutral` for counts and tags. @default 'neutral' */\n  tone?: BadgeTone;\n  /** `solid` fills with the tone; `subtle` tints and uses the tone as text. @default 'subtle' */\n  variant?: BadgeVariant;\n  /** @default 'md' */\n  size?: BadgeSize;\n  /** Leading glyph, decorative. */\n  icon?: ReactNode;\n  ref?: Ref<HTMLSpanElement>;\n  children: ReactNode;\n}\n\n/**\n * A small label for status, counts and tags. Tone and variant resolve\n * through `--badge-*` onto the status tokens, whose contrast is proven by\n * the token tests. Not interactive: for a removable chip, compose with a\n * Button.\n *\n * @status stable\n * @category Feedback\n * @accessibility Plain text: no role, no interaction. Every tone × variant pair meets WCAG AA, proven by the token tests. Tone is reinforced by the text, not only by colour.\n * @do Keep the text to one or two words.\n * Pair a leading icon with text, never alone.\n * @dont Make it clickable; compose a Button for a removable chip.\n * Use tone alone to convey meaning; say it in the text.\n */\nexport function Badge({ tone = 'neutral', variant = 'subtle', size = 'md', icon, className, ref, children, ...rest }: BadgeProps) {\n  return (\n    <span {...rest} ref={ref} className={classes(styles.badge, className)} data-tone={tone} data-variant={variant} data-size={size}>\n      {icon && <Icon size=\"inherit\">{icon}</Icon>}\n      {children}\n    </span>\n  );\n}\n\nBadge.displayName = 'Badge';\n"]}