@zyncat/ui 0.8.0

package/dist/datetime-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/date-picker/DateTimeField.tsx"],"names":[],"mappings":"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","file":"datetime-field.js","sourcesContent":["'use client';\n\nimport './date-picker.css';\nimport { useState, useEffect } from 'react';\nimport { Popover } from '../popover/Popover';\nimport { FieldShell, FieldTrigger, type DateFieldBaseProps } from './field-shell';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { TimeSegments, disp12 } from './time-core';\nimport { DtpPanel } from './calendar-panel';\nimport { pad, displayDay } from './date-utils';\n\ninterface DateTimeParts {\n  date: string | null;\n  time: string | null;\n}\n\nfunction displayTime(t: string, format?: '24h' | '12h'): string {\n  if (format !== '12h') return t;\n  const p = t.split(':').map(Number);\n  const mer = p[0] >= 12 ? 'PM' : 'AM';\n  return disp12(p[0]) + ':' + pad(p[1]) + ' ' + mer;\n}\nfunction dttfSplit(v: string | null | undefined): DateTimeParts {\n  if (!v) return { date: null, time: null };\n  const i = v.indexOf('T');\n  return i < 0 ? { date: v, time: null } : { date: v.slice(0, i), time: v.slice(i + 1) };\n}\n\nexport interface DateTimeFieldProps extends DateFieldBaseProps {\n  /** Controlled value, 'YYYY-MM-DDTHH:mm'. */\n  value?: string | null;\n  /** Uncontrolled initial value, 'YYYY-MM-DDTHH:mm'. Use instead of `value`. @default null */\n  defaultValue?: string | null;\n  /** Fires once both date and time are set, with 'YYYY-MM-DDTHH:mm' (an incomplete half never commits). */\n  onChange?: (value: string) => void;\n  /** Trigger text shown when no value is picked. @default 'Pick date & time' */\n  placeholder?: string;\n  /** IANA timezone (e.g. 'Europe/Riga') - display context, shown in the footer. */\n  timezone?: string;\n  /** Lower bound - 'YYYY-MM-DD' or 'YYYY-MM-DDTHH:mm', inclusive. */\n  min?: string;\n  /** Upper bound - 'YYYY-MM-DD' or 'YYYY-MM-DDTHH:mm', inclusive. */\n  max?: string;\n  /** Time display only; storage stays 24h. Default '24h'. */\n  format?: '24h' | '12h';\n  /** ↑/↓ step granularity in minutes (typing is exact). Default 5. */\n  minuteStep?: number;\n}\n\nexport function DateTimeField({\n  value,\n  defaultValue = null,\n  onChange,\n  label,\n  placeholder = 'Pick date & time',\n  timezone,\n  min,\n  max,\n  format = '24h',\n  minuteStep = 5,\n  required = false,\n  invalid = false,\n  message,\n  disabled = false,\n  className = '',\n  htmlProps,\n  animation,\n}: DateTimeFieldProps) {\n  const [val, commit] = useControllable<string | null>(\n    value,\n    defaultValue,\n    onChange as ((next: string | null) => void) | undefined,\n  );\n  const parts = dttfSplit(val);\n\n  const [pickerOpen, setPickerOpen] = useState(false);\n  const [pendDate, setPendDate] = useState<string | null>(null);\n  const [pendTime, setPendTime] = useState<string | null>(null);\n  useEffect(() => {\n    setPendDate(null);\n    setPendTime(null);\n  }, [val]);\n\n  const date = pendDate != null ? pendDate : parts.date;\n  const time = pendTime != null ? pendTime : parts.time;\n\n  const minL = dttfSplit(min);\n  const maxL = dttfSplit(max);\n  const minTime = date && date === minL.date ? minL.time : null;\n  const maxTime = date && date === maxL.date ? maxL.time : null;\n\n  function commitIf(d: string | null, t: string | null) {\n    if (!d || !t) return;\n    let tt = t;\n    if (minL.time && d === minL.date && tt < minL.time) tt = minL.time;\n    if (maxL.time && d === maxL.date && tt > maxL.time) tt = maxL.time;\n    if (tt !== t) setPendTime(tt);\n    const next = d + 'T' + tt;\n    if (next !== val) commit(next);\n  }\n  function handleDate(d: string) {\n    setPendDate(d);\n    commitIf(d, time);\n  }\n  function handleTime(t: string) {\n    setPendTime(t);\n    commitIf(date, t);\n  }\n\n  const display = date ? displayDay(date) + ', ' + (time ? displayTime(time, format) : '--:--') : null;\n  const trigger = <FieldTrigger display={display} placeholder={placeholder} disabled={disabled} />;\n\n  return (\n    <FieldShell\n      variant=\"dtf\"\n      label={label}\n      required={required}\n      invalid={invalid}\n      message={message}\n      icon=\"calendar\"\n      className={className}\n      htmlProps={htmlProps}\n    >\n      <Popover\n        trigger={trigger}\n        side=\"bottom\"\n        align=\"start\"\n        animation={animation}\n        open={pickerOpen}\n        onOpenChange={setPickerOpen}\n      >\n        <DtpPanel\n          val={date}\n          commit={handleDate}\n          close={() => setPickerOpen(false)}\n          min={minL.date}\n          max={maxL.date}\n          timezone={timezone}\n          label={label}\n          slot={\n            <div className=\"dtp__time\">\n              <span className=\"dtp__timeLabel\">Time</span>\n              <span className=\"dtp__timeHint\" aria-hidden=\"true\">\n                <kbd>↑</kbd>\n                <kbd>↓</kbd>\n              </span>\n              <TimeSegments\n                value={time}\n                onCommit={handleTime}\n                format={format}\n                minuteStep={minuteStep}\n                min={minTime}\n                max={maxTime}\n                ariaLabel=\"Time\"\n              />\n            </div>\n          }\n        />\n      </Popover>\n    </FieldShell>\n  );\n}\n"]}

package/dist/dialog.css

@@ -0,0 +1,180 @@
+/* dialog.css - the styled dialog surface (the modal shell owns modality + motion). */
+
+/* Modal placement - the shell layer centers the panel with breathing room. */
+.overlay-layer--dialog {
+  place-items: center;
+  padding: var(--space-6);
+}
+.overlay-panel--dialog {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* The panel - flex column so the body scrolls between a pinned header + footer; padding lives on the parts. */
+.dialog {
+  --dialog-w: 32rem;
+  position: relative;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: var(--dialog-w);
+  max-width: 100%;
+  max-height: min(85dvh, 44rem);
+  padding: 0;
+  overflow: hidden;
+  background: var(--bg-surface);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  color: var(--text-body);
+  font-family: var(--font-sans);
+}
+
+.dialog[data-size='sm'] {
+  --dialog-w: 25rem;
+}
+.dialog[data-size='lg'] {
+  --dialog-w: 40rem;
+}
+
+/* Header - icon - heading - close; flex-start keeps a tall heading top-aligned with the badge. */
+.dialog__header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-5) var(--space-4);
+  transition:
+    border-color var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard);
+  border-bottom: var(--border-hairline) solid transparent;
+}
+/* divider + faint lift appears only once the body is scrolled under it */
+.dialog:has(.dialog__body[data-scroll-top]) .dialog__header {
+  border-bottom-color: var(--border-subtle);
+  box-shadow: var(--shadow-xs);
+}
+
+.dialog__icon {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--radius-md);
+  background: var(--accent-subtle);
+  color: var(--text-accent);
+  font-size: var(--icon-md);
+}
+.dialog[data-tone='danger'] .dialog__icon {
+  background: var(--danger-subtle);
+  color: var(--danger-text);
+}
+
+.dialog__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  /* nudge text to optical-center against the 36px icon badge when present */
+  padding-top: var(--space-px);
+}
+.dialog__title {
+  margin: 0;
+  color: var(--text-strong);
+  font: var(--weight-semibold) var(--size-heading)/var(--leading-heading) var(--font-sans);
+  letter-spacing: var(--tracking-tight);
+  text-wrap: pretty;
+}
+.dialog__desc {
+  margin: 0;
+  color: var(--text-muted);
+  font: var(--type-body);
+  text-wrap: pretty;
+}
+
+/* close - a quiet ghost icon button; the hit box is bigger than the glyph */
+.dialog__close {
+  flex: 0 0 auto;
+  appearance: none;
+  margin: calc(var(--space-1) * -1) calc(var(--space-1) * -1) 0 0;
+  display: grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-subtle);
+  cursor: pointer;
+  font-size: var(--icon-sm);
+  transition: var(--transition-control);
+}
+.dialog__close:hover {
+  background: var(--neutral-wash);
+  color: var(--text-strong);
+}
+.dialog__close:active {
+  background: var(--bg-muted);
+}
+.dialog__close:focus-visible {
+  outline: none;
+  color: var(--text-strong);
+  box-shadow: var(--ring-accent);
+}
+
+/* Body - the scroll region; min-height:0 lets it shrink so header/footer stay pinned. */
+.dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 var(--space-5) var(--space-5);
+  color: var(--text-body);
+  font: var(--type-body);
+}
+.dialog:has(.dialog__icon) .dialog__body {
+  padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
+}
+.dialog:has(.dialog__footer) .dialog__body {
+  padding-bottom: var(--space-4);
+}
+.dialog__body > :first-child {
+  margin-top: 0;
+}
+.dialog__body > :last-child {
+  margin-bottom: 0;
+}
+
+.dialog__body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+.dialog__body::-webkit-scrollbar {
+  width: 10px;
+}
+.dialog__body::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: var(--radius-full);
+  border: 3px solid var(--bg-surface);
+  background-clip: padding-box;
+}
+
+/* Footer - right-aligned actions; gains a top divider only when the body scrolls under it. */
+.dialog__footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  padding: var(--space-4) var(--space-5) var(--space-5);
+  border-top: var(--border-hairline) solid transparent;
+  transition: border-color var(--duration-base) var(--ease-standard);
+}
+.dialog:has(.dialog__body[data-scroll-bottom]) .dialog__footer {
+  border-top-color: var(--border-subtle);
+}

package/dist/dialog.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { ReactElement, ReactNode, HTMLAttributes } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+interface DialogProps {
+    /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+    onOpenChange?: (open: boolean) => void;
+    /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */
+    trigger?: ReactElement | null;
+    /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */
+    title?: ReactNode;
+    /** Subtext under the title - wired to `aria-describedby`. @default null */
+    description?: ReactNode;
+    /** Panel width. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** 'danger' tints the header icon badge + is the convention for destructive confirms. */
+    tone?: 'default' | 'danger';
+    /** Your own icon node for the header badge (alert dialogs). */
+    icon?: ReactNode;
+    /** Close button + backdrop/Esc dismissal. Default true. */
+    dismissible?: boolean;
+    /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */
+    footer?: ReactNode | ((close: () => void) => ReactNode);
+    /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */
+    children?: ReactNode;
+    /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.
+     *  Auto-generated when omitted. */
+    id?: string;
+    /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */
+    htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;
+    /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
+    animation?: DisableableAnimation;
+}
+declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, title, description, size, tone, icon, dismissible, footer, children, id, htmlProps, animation, }: DialogProps): react.JSX.Element;
+
+export { Dialog, type DialogProps };

package/dist/dialog.js

@@ -0,0 +1,128 @@
+'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
+import { ModalShell } from './chunk-4R2GQO43.js';
+import './chunk-LDC3RIYA.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-GY7JOPUQ.js';
+import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
+import { Presence } from './chunk-MXOPCFWR.js';
+import './chunk-W3SHPKSB.js';
+import './chunk-L3Q3VDIW.js';
+import { IconSlot } from './chunk-2ERBBFZS.js';
+import { Icon } from './chunk-3SBCBYB7.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import './chunk-S5ZTZANS.js';
+import './chunk-VTJTGVZZ.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './dialog.css';
+import { useId, useRef, Fragment } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DIALOG_TIMING = {
+  open: { duration: "slow", ease: "entrance" },
+  close: { duration: "base", ease: "standard" }
+};
+function DialogSurface({
+  panelId,
+  size,
+  tone,
+  icon,
+  title,
+  description,
+  dismissible,
+  footerContent,
+  requestClose,
+  htmlProps,
+  children
+}) {
+  const bodyRef = useRef(null);
+  const titleId = panelId + "-title";
+  const descId = panelId + "-desc";
+  useScrollEdges(bodyRef, (edges, el) => {
+    el.toggleAttribute("data-scroll-top", edges.top);
+    el.toggleAttribute("data-scroll-bottom", edges.bottom);
+  });
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...htmlProps,
+      className: cx("dialog", htmlProps?.className),
+      role: "dialog",
+      "aria-modal": "true",
+      "data-size": size === "md" ? void 0 : size,
+      "data-tone": tone === "default" ? void 0 : tone,
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": description ? descId : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "dialog__header", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "dialog__icon", children: /* @__PURE__ */ jsx(IconSlot, { size: "md", children: icon }) }),
+          /* @__PURE__ */ jsxs("div", { className: "dialog__heading", children: [
+            title && /* @__PURE__ */ jsx("h2", { className: "dialog__title", id: titleId, children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "dialog__desc", id: descId, children: description })
+          ] }),
+          dismissible && /* @__PURE__ */ jsx("button", { type: "button", className: "dialog__close", "aria-label": "Close dialog", onClick: requestClose, children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "sm", weight: "bold" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "dialog__body", ref: bodyRef, children }),
+        footerContent && /* @__PURE__ */ jsx("footer", { className: "dialog__footer", children: footerContent })
+      ]
+    }
+  );
+}
+function Dialog({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = null,
+  title,
+  description = null,
+  size = "md",
+  tone = "default",
+  icon = null,
+  dismissible = true,
+  footer = null,
+  children,
+  id,
+  htmlProps,
+  animation
+}) {
+  const autoId = useId();
+  const panelId = id || "dialog-" + autoId;
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const triggerRef = useRef(null);
+  const close = () => setOpen(false);
+  const timings = resolveMotionTiming(animation, DIALOG_TIMING);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
+    /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
+      ModalShell,
+      {
+        animate: { y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open },
+        exit: { y: [6], scale: [0.98], opacity: [0], timing: timings.close },
+        layerClass: "overlay-layer--dialog",
+        panelClass: "overlay-panel--dialog",
+        panelId,
+        dismissible,
+        requestClose: close,
+        children: /* @__PURE__ */ jsx(
+          DialogSurface,
+          {
+            panelId,
+            size,
+            tone,
+            icon,
+            title,
+            description,
+            dismissible,
+            footerContent: typeof footer === "function" ? footer(close) : footer,
+            requestClose: close,
+            htmlProps,
+            children
+          }
+        )
+      },
+      "dialog"
+    ) }) })
+  ] });
+}
+
+export { Dialog };
+//# sourceMappingURL=dialog.js.map
+//# sourceMappingURL=dialog.js.map

package/dist/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/dialog/Dialog.tsx"],"names":[],"mappings":"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","file":"dialog.js","sourcesContent":["'use client';\n\nimport './dialog.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst DIALOG_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface DialogProps {\n  /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */\n  open?: boolean;\n  /** Initial open state when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */\n  trigger?: ReactElement | null;\n  /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */\n  title?: ReactNode;\n  /** Subtext under the title - wired to `aria-describedby`. @default null */\n  description?: ReactNode;\n  /** Panel width. @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** 'danger' tints the header icon badge + is the convention for destructive confirms. */\n  tone?: 'default' | 'danger';\n  /** Your own icon node for the header badge (alert dialogs). */\n  icon?: ReactNode;\n  /** Close button + backdrop/Esc dismissal. Default true. */\n  dismissible?: boolean;\n  /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */\n  children?: ReactNode;\n  /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.\n   *  Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n}\n\ninterface DialogSurfaceProps {\n  panelId: string;\n  size: 'sm' | 'md' | 'lg';\n  tone: 'default' | 'danger';\n  icon: ReactNode;\n  title: ReactNode;\n  description: ReactNode;\n  dismissible: boolean;\n  footerContent: ReactNode;\n  requestClose: () => void;\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  children?: ReactNode;\n}\n\nfunction DialogSurface({\n  panelId,\n  size,\n  tone,\n  icon,\n  title,\n  description,\n  dismissible,\n  footerContent,\n  requestClose,\n  htmlProps,\n  children,\n}: DialogSurfaceProps) {\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const titleId = panelId + '-title';\n  const descId = panelId + '-desc';\n\n  useScrollEdges(bodyRef, (edges, el) => {\n    el.toggleAttribute('data-scroll-top', edges.top);\n    el.toggleAttribute('data-scroll-bottom', edges.bottom);\n  });\n\n  return (\n    <section\n      {...htmlProps}\n      className={cx('dialog', htmlProps?.className)}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-size={size === 'md' ? undefined : size}\n      data-tone={tone === 'default' ? undefined : tone}\n      aria-labelledby={title ? titleId : undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <header className=\"dialog__header\">\n        {icon && (\n          <span className=\"dialog__icon\">\n            <IconSlot size=\"md\">{icon}</IconSlot>\n          </span>\n        )}\n        <div className=\"dialog__heading\">\n          {title && (\n            <h2 className=\"dialog__title\" id={titleId}>\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p className=\"dialog__desc\" id={descId}>\n              {description}\n            </p>\n          )}\n        </div>\n        {dismissible && (\n          <button type=\"button\" className=\"dialog__close\" aria-label=\"Close dialog\" onClick={requestClose}>\n            <Icon name=\"x\" size=\"sm\" weight=\"bold\" />\n          </button>\n        )}\n      </header>\n\n      <div className=\"dialog__body\" ref={bodyRef}>\n        {children}\n      </div>\n\n      {footerContent && <footer className=\"dialog__footer\">{footerContent}</footer>}\n    </section>\n  );\n}\n\nexport function Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  title,\n  description = null,\n  size = 'md',\n  tone = 'default',\n  icon = null,\n  dismissible = true,\n  footer = null,\n  children,\n  id,\n  htmlProps,\n  animation,\n}: DialogProps) {\n  const autoId = useId();\n  const panelId = id || 'dialog-' + autoId;\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const close = () => setOpen(false);\n\n  const timings = resolveMotionTiming(animation, DIALOG_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n      <OverlayPortal>\n        <Presence>\n          {open && (\n            <ModalShell\n              key=\"dialog\"\n              animate={{ y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open }}\n              exit={{ y: [6], scale: [0.98], opacity: [0], timing: timings.close }}\n              layerClass=\"overlay-layer--dialog\"\n              panelClass=\"overlay-panel--dialog\"\n              panelId={panelId}\n              dismissible={dismissible}\n              requestClose={close}\n            >\n              <DialogSurface\n                panelId={panelId}\n                size={size}\n                tone={tone}\n                icon={icon}\n                title={title}\n                description={description}\n                dismissible={dismissible}\n                footerContent={typeof footer === 'function' ? footer(close) : footer}\n                requestClose={close}\n                htmlProps={htmlProps}\n              >\n                {children}\n              </DialogSurface>\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/dom-props-C0jrllBw.d.ts

@@ -0,0 +1,5 @@
+type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+
+export type { DataAttributes as D };

package/dist/field-chrome-CMPOQSLs.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+interface FieldIdProps {
+    /** Field id, ties the label to the control. */
+    id?: string;
+}
+interface FieldRequirementProps {
+    /** Mark the control required - reaches the native element and shows a danger `*` after the label. */
+    required?: boolean;
+    /** Show a muted "(optional)" after the label. */
+    optional?: boolean;
+}
+interface FieldCoreMessagingProps {
+    /** Label text (sentence case). */
+    label?: ReactNode;
+    /** Neutral helper text - shown when there's no validation message. */
+    helper?: ReactNode;
+    /** Error message - sets the error state (border + icon + colour). Wins over warning/success/helper. */
+    error?: ReactNode;
+}
+interface FieldMessagingProps extends FieldIdProps, FieldRequirementProps, FieldCoreMessagingProps {
+    /** Warning message - amber state. Loses to `error`; wins over `success`/`helper`. */
+    warning?: ReactNode;
+    /** Success message - green state. Loses to `error`/`warning`; wins over `helper`. */
+    success?: ReactNode;
+}
+
+export type { FieldIdProps as F, FieldCoreMessagingProps as a, FieldMessagingProps as b, FieldRequirementProps as c };

package/dist/field-shell-Cuda-feL.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+interface DateFieldBaseProps {
+    /** Field label rendered above the trigger. */
+    label?: string;
+    /** Asterisk on the label. @default false */
+    required?: boolean;
+    /** Danger border + message color (.fld is-error). @default false */
+    invalid?: boolean;
+    /** Helper / error text under the field. */
+    message?: string;
+    /** Disable the field. @default false */
+    disabled?: boolean;
+    /** Extra class on the field shell root. */
+    className?: string;
+    /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the field shell root. */
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Popover open/close timing - motion tokens only, or `null` to disable. (Not used by TimeField, which is inline.) */
+    animation?: DisableableAnimation;
+}
+
+export type { DateFieldBaseProps as D };

package/dist/glide.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { RefObject } from 'react';
+
+type GlideApi = ReturnType<typeof useGlide>;
+declare function useGlide<T extends HTMLElement>(containerRef: RefObject<T | null>): {
+    ref: RefObject<HTMLSpanElement>;
+    enter: (target: HTMLElement | null) => void;
+    leave: () => void;
+};
+declare function GlidePill({ className, glide }: {
+    className?: string;
+    glide: GlideApi;
+}): react.JSX.Element;
+
+export { type GlideApi, GlidePill, useGlide };

package/dist/glide.js

@@ -0,0 +1,5 @@
+'use client';export { GlidePill, useGlide } from './chunk-MKIQFK7S.js';
+import './chunk-L3Q3VDIW.js';
+import './chunk-S5ZTZANS.js';
+//# sourceMappingURL=glide.js.map
+//# sourceMappingURL=glide.js.map

package/dist/glide.js.map

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

package/dist/icon.css

@@ -0,0 +1,33 @@
+/* Icon - base layout (inline/flex seating); size and color come from props/tokens. */
+
+.icon {
+  flex: none;
+  vertical-align: middle;
+}
+
+/* icon-slot - locks a consumer icon node to the token size and currentColor. */
+.icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: currentColor;
+}
+.icon-slot--sm {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+.icon-slot--md {
+  width: var(--icon-md);
+  height: var(--icon-md);
+}
+.icon-slot--lg {
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+}
+.icon-slot > svg,
+.icon-slot > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}