@ecopages/radiant-ui 0.1.0-rc.8 → 0.1.0

package/dist/lib/icons/chevron-down.d.ts

@@ -1,3 +1,2 @@
 import type { RuiIconProps } from './types';
-/** Chevron-down indicator for listbox and combobox toggles. */
 export declare function RuiIconChevronDown({ class: className, size, ...props }: RuiIconProps): import("@ecopages/jsx").JsxRenderable;

package/dist/lib/intl-date/index.d.ts

@@ -7,6 +7,8 @@ export type { DaySelectionAppearance, RangeSelectionDraft } from './selection';
 export { formatDisplayDate, formatDateRange, formatMonthYear, formatTodayLabel, getDateTimeFormat, getWeekdayLabels, } from './formatters';
 export { dateToIso, isoToDate, isIsoInRange } from './iso';
 export { getDatePartOrder, getDateSeparators, parseLocaleDateString } from './parts';
-export { buildDateSegments, clampSegmentValue, getEditableSegmentIndices, incrementSegment, maxSegmentLength, segmentsToDate, } from './segments';
+export { allSegmentsEmpty, buildDateSegments, clampSegmentValue, draftStatus, getEditableSegmentIndices, incrementSegment, maxSegmentLength, segmentsToDate, } from './segments';
+export { applyBackspaceToSegment, applyDigitToSegment, clearSegmentValue, getSegmentBounds, firstEmptyOrFirstPart, focusPartAfter, getEditablePartTypes, incrementSegmentValue, segmentAriaName, segmentDisplayText, segmentNumericValue, setSegmentNumeric, } from './segment-editing';
+export type { SegmentDigitResult } from './segment-editing';
 export type { CalendarDayCell, CalendarWeek, DateDisplayStyle, DateGranularity, DatePartType, IntlLocale, } from './types';
-export type { DateSegmentModel, DateSegmentType } from './segments';
+export type { DateSegmentModel, DateSegmentType, DraftStatus } from './segments';

package/dist/lib/intl-date/segment-editing.d.ts

@@ -0,0 +1,34 @@
+import type { DatePartType } from './types';
+import type { DateSegmentModel } from './segments';
+export type SegmentDigitResult = {
+    segments: DateSegmentModel[];
+    enteredKeys: string;
+    focusNext: boolean;
+};
+export declare function getSegmentBounds(type: DatePartType, segments: DateSegmentModel[]): {
+    min: number;
+    max: number;
+};
+/** Visible label for a segment (`Month`, `Day`, `Year`). */
+export declare function segmentAriaName(type: DatePartType, locale: string | string[] | undefined): string;
+export declare function segmentDisplayText(segment: DateSegmentModel): string;
+export declare function segmentNumericValue(segment: DateSegmentModel): number | null;
+export declare function clearSegmentValue(segments: DateSegmentModel[], type: DatePartType): DateSegmentModel[];
+export declare function setSegmentNumeric(segments: DateSegmentModel[], type: DatePartType, value: number): DateSegmentModel[];
+export declare function incrementSegmentValue(segments: DateSegmentModel[], type: DatePartType, delta: number): DateSegmentModel[];
+/**
+ * Applies one typed digit to a segment, mirroring React Aria `useDateSegment` entry rules.
+ */
+export declare function applyDigitToSegment(segments: DateSegmentModel[], type: DatePartType, key: string, enteredKeys: string): SegmentDigitResult;
+export declare function getEditablePartTypes(segments: DateSegmentModel[]): DatePartType[];
+export declare function focusPartAfter(segments: DateSegmentModel[], type: DatePartType, direction: 1 | -1): DatePartType | null;
+export declare function firstEmptyOrFirstPart(segments: DateSegmentModel[]): DatePartType | null;
+export type BackspaceSegmentResult = {
+    kind: 'focus-previous';
+} | {
+    kind: 'updated';
+    segments: DateSegmentModel[];
+    enteredKeys: string;
+};
+/** Applies backspace semantics for one editable segment. */
+export declare function applyBackspaceToSegment(segments: DateSegmentModel[], part: DatePartType): BackspaceSegmentResult;

package/dist/lib/intl-date/segments.d.ts

@@ -1,6 +1,5 @@
 import type { DateGranularity, DatePartType, IntlLocale } from './types';
 export type DateSegmentType = DatePartType | 'literal';
-/** @experimental Segment model reserved for a future segment-editor field. */
 export type DateSegmentModel = {
     type: DateSegmentType;
     /** Visible text for literals; numeric string for editable segments. */
@@ -13,7 +12,6 @@ export type DateSegmentModel = {
  * Builds locale-ordered date segments from `Intl.DateTimeFormat.prototype.formatToParts()`.
  *
  * @remarks Mirrors the React Aria `DateInput` segment list — literals plus editable fields.
- * @experimental Reserved for a future segment-editor field.
  */
 export declare function buildDateSegments(date: Date | null, locale: IntlLocale, options?: {
     granularity?: DateGranularity;
@@ -22,10 +20,34 @@ export declare function buildDateSegments(date: Date | null, locale: IntlLocale,
 /**
  * Converts editable segment values into a local calendar `Date`, or `null` when incomplete.
  *
- * @experimental Reserved for a future segment-editor field.
  */
 export declare function segmentsToDate(segments: DateSegmentModel[]): Date | null;
-/** @experimental Reserved for a future segment-editor field. */
+export declare function allSegmentsEmpty(segments: DateSegmentModel[]): boolean;
+export type DraftStatus = {
+    kind: 'partial-year';
+} | {
+    kind: 'empty';
+} | {
+    kind: 'incomplete';
+} | {
+    kind: 'out-of-range';
+} | {
+    kind: 'date';
+    iso: string;
+};
+/**
+ * Classifies an edited segment draft so a date input can decide whether to publish, keep, or restore it.
+ *
+ * @remarks
+ * Checks run in order: `partial-year` (a typed year with fewer than four digits), `empty`,
+ * `incomplete` (a missing unit or an impossible date such as Feb 30), `out-of-range`, then `date`.
+ * The four-digit rule lives here rather than in `segmentsToDate`, which still reads `1` as 2001
+ * for callers that parse two-digit years.
+ */
+export declare function draftStatus(segments: DateSegmentModel[], range?: {
+    min?: string;
+    max?: string;
+}): DraftStatus;
 export declare function getEditableSegmentIndices(segments: DateSegmentModel[]): number[];
 export declare function maxSegmentLength(type: DatePartType): number;
 export declare function clampSegmentValue(type: DatePartType, raw: string): string;

package/dist/lib/non-empty.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns `value` when it is non-empty, otherwise `undefined`.
+ *
+ * @remarks Used by `@bindTo` maps that omit an attribute when the field is `''`.
+ */
+export declare function nonEmpty(value: string): string | undefined;

package/dist/lib/unique-id.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Whether `value` is safe as a CSS id selector (`#value`) without escaping.
+ */
+export declare function isCssSafeId(value: string): boolean;
+/**
+ * Mint a document-unique, CSS-safe id: `${prefix}-${uuid}`.
+ *
+ * @remarks Uses `crypto.randomUUID()` in secure contexts and random bytes on HTTP.
+ * Prefix so the id never starts with a digit.
+ */
+export declare function uniqueId(prefix: string): string;

package/dist/lib/viewport/breakpoints.d.ts

@@ -0,0 +1,6 @@
+/** Viewports at or below this width use mobile layout rules (pairs with Tailwind `sm` / 640px). */
+export declare const MOBILE_LAYOUT_MAX_WIDTH_PX = 639;
+/** Sidebar switches to drawer mode at this viewport width and below. */
+export declare const SIDEBAR_MOBILE_BREAKPOINT_PX = 768;
+/** Max width for sidebar mobile drawer media queries (`max-width` in CSS). */
+export declare const SIDEBAR_MOBILE_MAX_WIDTH_PX: number;

package/dist/lib/viewport/mobile-layout.d.ts

@@ -0,0 +1,15 @@
+import { MOBILE_LAYOUT_MAX_WIDTH_PX } from './breakpoints';
+export { MOBILE_LAYOUT_MAX_WIDTH_PX };
+/**
+ * @remarks
+ * SSR and non-browser environments return `false`.
+ */
+export declare function isMobileLayoutViewport(): boolean;
+/**
+ * Collapses multi-month calendars to one month on narrow viewports so popovers fit.
+ */
+export declare function effectiveVisibleMonths(requested: number): number;
+/**
+ * @returns Cleanup that removes the listener, or `null` when `matchMedia` is unavailable.
+ */
+export declare function listenMobileLayoutViewport(onChange: () => void): (() => void) | null;

package/dist/styles/primitives.css

@@ -43,15 +43,18 @@
     visibility: hidden;
   }
   .rui-popover {
+    --rui-popover-radius: var(--radius-container);
+    --rui-popover-surface: var(--background);
+    --rui-popover-border-color: var(--border);
+    --rui-popover-shadow: var(--shadow-overlay);
     z-index: var(--z-index-popover, var(--z-popover));
     overflow: auto;
-    border-radius: var(--radius-container, var(--radius-container));
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-    border-color: var(--color-border, var(--border));
-    background-color: var(--color-background, var(--background));
-    --tw-shadow: var(--shadow-overlay);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    max-height: var(--rui-popover-max-height, calc(100dvh - 1rem));
+    max-width: var(--rui-popover-max-width, calc(100vw - 1rem));
+    border-radius: var(--rui-popover-radius);
+    border: 1px solid var(--rui-popover-border-color);
+    background-color: var(--rui-popover-surface);
+    box-shadow: var(--rui-popover-shadow);
   }
   .rui-popover--listbox {
     display: flex;

package/dist/styles/radiant-ui-core.css

@@ -451,6 +451,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
@@ -547,6 +550,9 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -573,6 +579,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }

package/dist/styles/radiant-ui.css

@@ -267,6 +267,12 @@
   .top-0 {
     top: 0px;
   }
+  .right-inset {
+    right: var(--spacing-inset);
+  }
+  .left-inset {
+    left: var(--spacing-inset);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -499,6 +505,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-container {
     border-radius: var(--radius-container);
   }
@@ -688,6 +697,9 @@
   .text-warning {
     color: var(--color-warning);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -714,6 +726,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -980,6 +996,7 @@
   --text-5xl: 3rem;
   --text-label: 0.875rem;
   --text-control: 0.875rem;
+  --text-control-input: 1rem;
   --leading-body: 1.5;
   --leading-relaxed: 1.625;
   --leading-compact: 1.25;
@@ -987,6 +1004,13 @@
   --weight-medium: 500;
   --weight-semibold: 600;
   --tracking-wide: 0.025em;
+}
+@media (min-width: 640px) {
+  :root {
+    --text-control-input: var(--text-control);
+  }
+}
+:root {
   --duration-fast: 150ms;
   --duration-normal: 200ms;
   --duration-slow: 300ms;
@@ -997,6 +1021,11 @@
   --border-width-hairline: 1px;
   --border-width-thin: 1px;
   --border-width-thick: 2px;
+  --rui-track-mix: 22%;
+  --rui-track-fill: var(--on-background);
+  @supports (color: color-mix(in lab, red, red)) {
+    --rui-track-fill: color-mix(in oklab, var(--on-background) var(--rui-track-mix), transparent);
+  }
   --focus-ring-width: 2px;
   --focus-ring-offset: 2px;
   --opacity-disabled: 0.5;
@@ -1006,9 +1035,9 @@
   --z-overlay: 30;
   --z-modal: 40;
   --z-toast: 50;
-  --size-control-sm: 2rem;
-  --size-control-md: 2.5rem;
-  --size-control-lg: 3rem;
+  --size-control-sm: var(--space-8, 2rem);
+  --size-control-md: var(--space-10, 2.5rem);
+  --size-control-lg: var(--space-12, 3rem);
   --size-icon-sm: 1rem;
   --size-icon-md: 1.25rem;
 }
@@ -1087,6 +1116,7 @@ html[data-rui-colors='glacier'], html:not([data-rui-colors]) {
     --border: color-mix(in oklab, var(--color-glacier-white-900) 15%, transparent);
   }
   --focus-ring: var(--color-night-sky-500);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-navy-blue-700);
   --overlay: oklch(0% 0 0 / 0.45);
   --background-code: var(--color-glacier-white-100);
@@ -1151,6 +1181,7 @@ html.dark[data-rui-colors='glacier'], html.dark:not([data-rui-colors]) {
     --border: color-mix(in oklab, var(--color-glacier-white-50) 18%, transparent);
   }
   --focus-ring: var(--color-night-sky-400);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-navy-blue-400);
   --overlay: oklch(0% 0 0 / 0.65);
   --background-code: var(--color-glacier-white-900);
@@ -1246,6 +1277,7 @@ html[data-rui-colors='aurora'] {
   --on-background: var(--color-black);
   --border: var(--color-pale-sky-400);
   --focus-ring: var(--color-havelock-blue-500);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-havelock-blue-700);
   --overlay: oklch(0% 0 0 / 0.4);
   --background-code: var(--color-pale-sky-900);
@@ -1323,6 +1355,7 @@ html.dark[data-rui-colors='aurora'] {
   --on-background: var(--color-white);
   --border: var(--color-pale-sky-700);
   --focus-ring: var(--color-havelock-blue-400);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-havelock-blue-300);
   --overlay: oklch(0% 0 0 / 0.6);
   --background-code: var(--color-pale-sky-950);
@@ -1397,6 +1430,7 @@ html[data-rui-colors='basalt'] {
   --on-background: var(--color-basalt-900);
   --border: var(--color-basalt-400);
   --focus-ring: var(--color-carbon-blue-500);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-carbon-blue-600);
   --overlay: oklch(0% 0 0 / 0.5);
   --background-code: var(--color-basalt-900);
@@ -1453,6 +1487,7 @@ html.dark[data-rui-colors='basalt'] {
   --on-background: var(--color-basalt-50);
   --border: var(--color-basalt-700);
   --focus-ring: var(--color-carbon-blue-400);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-carbon-blue-400);
   --overlay: oklch(0% 0 0 / 0.7);
   --background-code: var(--color-basalt-975);
@@ -1530,6 +1565,7 @@ html[data-rui-colors='ember'] {
     --border: color-mix(in oklab, var(--color-glacier-white-900) 12%, transparent);
   }
   --focus-ring: var(--color-scarlet-500);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-scarlet-700);
   --overlay: oklch(0% 0 0 / 0.42);
   --background-code: var(--color-glacier-white-100);
@@ -1596,6 +1632,7 @@ html.dark[data-rui-colors='ember'] {
     --border: color-mix(in oklab, var(--color-glacier-white-50) 16%, transparent);
   }
   --focus-ring: var(--color-scarlet-400);
+  --on-focus-ring: var(--on-primary);
   --link: var(--color-scarlet-400);
   --overlay: oklch(0% 0 0 / 0.62);
   --background-code: var(--color-glacier-white-900);

package/dist/styles/style-dependencies.json

@@ -114,21 +114,31 @@
 		"date-field": {
 			"direct": [
 				"calendar",
+				"date-input",
 				"primitives"
 			],
 			"styles": [
 				"@ecopages/radiant-ui/calendar/styles.css",
+				"@ecopages/radiant-ui/date-input/styles.css",
 				"@ecopages/radiant-ui/primitives.css",
 				"@ecopages/radiant-ui/date-field/styles.css"
 			]
 		},
+		"date-input": {
+			"direct": [],
+			"styles": [
+				"@ecopages/radiant-ui/date-input/styles.css"
+			]
+		},
 		"date-range-picker": {
 			"direct": [
 				"calendar",
+				"date-input",
 				"primitives"
 			],
 			"styles": [
 				"@ecopages/radiant-ui/calendar/styles.css",
+				"@ecopages/radiant-ui/date-input/styles.css",
 				"@ecopages/radiant-ui/primitives.css",
 				"@ecopages/radiant-ui/date-range-picker/styles.css"
 			]
@@ -143,8 +153,11 @@
 			]
 		},
 		"disclosure": {
-			"direct": [],
+			"direct": [
+				"primitives"
+			],
 			"styles": [
+				"@ecopages/radiant-ui/primitives.css",
 				"@ecopages/radiant-ui/disclosure/styles.css"
 			]
 		},
@@ -261,10 +274,12 @@
 		},
 		"navigation-menu": {
 			"direct": [
-				"button"
+				"button",
+				"primitives"
 			],
 			"styles": [
 				"@ecopages/radiant-ui/button/styles.css",
+				"@ecopages/radiant-ui/primitives.css",
 				"@ecopages/radiant-ui/navigation-menu/styles.css"
 			]
 		},
@@ -320,11 +335,8 @@
 			]
 		},
 		"sidebar": {
-			"direct": [
-				"button"
-			],
+			"direct": [],
 			"styles": [
-				"@ecopages/radiant-ui/button/styles.css",
 				"@ecopages/radiant-ui/sidebar/styles.css"
 			]
 		},