@a4ui/core 0.8.0 → 0.9.0

package/dist/ui/Calendar.d.ts

@@ -7,10 +7,10 @@ export interface CalendarProps {
     class?: string;
 }
 /**
- * Full-month calendar: a header with the month/year and prev/next navigation, a
- * row of weekday labels, and a 6×7 grid of day buttons. Days outside the shown
- * month are muted; the selected day is filled and "today" gets a ring. Clicking a
- * day calls `onChange`. Theme-agnostic (semantic tokens only), always visible.
+ * Full-month calendar: a header with month/year navigation and a 6×7 grid of
+ * day buttons. Click the month or year in the header to jump straight to a month
+ * or year picker; the double chevrons step a whole year at a time. The selected
+ * day is filled and "today" gets a ring. Theme-agnostic, always visible.
  *
  * @example
  * ```tsx

package/dist/ui/DateRangePicker.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'solid-js';
+export interface DateRange {
+    /** 'YYYY-MM-DD' (local) or '' if unset. */
+    start: string;
+    end: string;
+}
+export interface DateRangePickerProps {
+    value: DateRange;
+    onChange: (value: DateRange) => void;
+    /** Placeholder shown when nothing is selected. */
+    label?: string;
+    disabled?: boolean;
+    months?: string[];
+    weekdays?: string[];
+    class?: string;
+}
+/**
+ * Compact hand-rolled range picker built on the same popover mechanism as
+ * `DateField`, but tracking a start/end pair instead of a single day. The
+ * first click begins a range, the second completes it (closing the popover);
+ * clicking again once complete starts a fresh range.
+ *
+ * @example
+ * ```tsx
+ * const [range, setRange] = createSignal<DateRange>({ start: '2026-03-15', end: '' })
+ * <DateRangePicker value={range()} onChange={setRange} label="Stay dates" />
+ * ```
+ */
+export declare function DateRangePicker(props: DateRangePickerProps): JSX.Element;

package/dist/ui/DateTimeField.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+export interface DateTimeFieldProps {
+    /** Selected moment as `YYYY-MM-DD HH:MM` (local), or `''` for none. */
+    value: string;
+    /** Called with the combined `YYYY-MM-DD HH:MM` (either part may be missing). */
+    onChange: (value: string) => void;
+    /** 12-hour time display with AM/PM. @default false */
+    hour12?: boolean;
+    /** Minute increment for the time options. @default 5 */
+    minuteStep?: number;
+    /** Placeholder for the date half. */
+    dateLabel?: string;
+    /** Placeholder for the time half. */
+    timeLabel?: string;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Date + time picker built from {@link DateField} and {@link TimeField}. Speaks a
+ * single `YYYY-MM-DD HH:MM` string; the two halves fill in independently.
+ *
+ * @example
+ * ```tsx
+ * const [when, setWhen] = createSignal('2026-07-15 09:30')
+ * <DateTimeField value={when()} onChange={setWhen} hour12 />
+ * ```
+ */
+export declare function DateTimeField(props: DateTimeFieldProps): JSX.Element;

package/dist/ui/Form.d.ts

@@ -0,0 +1,57 @@
+import { JSX } from 'solid-js';
+export interface FormFieldProps {
+    /** Optional explicit id; otherwise auto-generated. */
+    id?: string;
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * Container/provider that gives `FormLabel`, `FormControl`,
+ * `FormDescription`, and `FormError` a shared field id so they wire up
+ * `for`/`id`/`aria-describedby` automatically.
+ *
+ * Pairs well with a schema validator (Valibot/Zod): the consumer computes
+ * the error string and passes it to `FormError`.
+ *
+ * @example
+ * ```tsx
+ * <FormField>
+ *   <FormLabel>Email</FormLabel>
+ *   <FormControl>
+ *     {(fieldProps) => <input type="email" {...fieldProps} />}
+ *   </FormControl>
+ *   <FormDescription>We'll never share your email.</FormDescription>
+ *   <FormError>{errors().email}</FormError>
+ * </FormField>
+ * ```
+ */
+export declare function FormField(props: FormFieldProps): JSX.Element;
+/** Label associated with the enclosing `FormField`'s control via `for`. */
+export declare function FormLabel(props: {
+    children: JSX.Element;
+    class?: string;
+}): JSX.Element;
+/**
+ * Render-prop bridge that hands the enclosing `FormField`'s `id` and
+ * `aria-describedby` to the caller's control, to be spread onto the actual
+ * input/select/textarea element.
+ */
+export declare function FormControl(props: {
+    children: (fieldProps: {
+        id: string;
+        'aria-describedby': string;
+    }) => JSX.Element;
+}): JSX.Element;
+/** Helper text for the enclosing `FormField`, linked via `aria-describedby`. */
+export declare function FormDescription(props: {
+    children: JSX.Element;
+    class?: string;
+}): JSX.Element;
+/**
+ * Error text for the enclosing `FormField`, linked via `aria-describedby`.
+ * Renders nothing when there is no error to show.
+ */
+export declare function FormError(props: {
+    children?: JSX.Element;
+    class?: string;
+}): JSX.Element;

package/dist/ui/TimeField.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+export interface TimeFieldProps {
+    /** Selected time as canonical 24h "HH:MM" (e.g. "15:05"), or "" for none. */
+    value: string;
+    /** Called with the newly picked time as "HH:MM" (24h). */
+    onChange: (value: string) => void;
+    /** 12-hour display with AM/PM instead of 24-hour. @default false */
+    hour12?: boolean;
+    /** Minute increment for the options list. @default 5 */
+    minuteStep?: number;
+    /** Placeholder shown on the trigger when value is empty. */
+    label?: string;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Compact hand-rolled hour/minute (/ AM-PM) column picker (no Kobalte primitive
+ * covers this yet). Trigger button opens a portaled popover; closes on outside
+ * click, Escape, scroll, or resize. Speaks plain 24h `HH:MM` strings.
+ *
+ * @example
+ * ```tsx
+ * const [time, setTime] = createSignal('15:05')
+ * <TimeField value={time()} onChange={setTime} label="Start time" hour12 />
+ * ```
+ */
+export declare function TimeField(props: TimeFieldProps): JSX.Element;

package/dist/ui/internal/CalendarCore.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface CalendarCoreProps {
+    /** Currently selected day (for highlight); undefined = none. */
+    selected?: Date;
+    /** Range start — endpoints fill, days strictly between get a soft band. */
+    rangeStart?: Date;
+    /** Range end (see `rangeStart`). */
+    rangeEnd?: Date;
+    /** Called with the newly picked day. */
+    onPick: (date: Date) => void;
+    /** 0 = Sunday-first, 1 = Monday-first. @default 0 */
+    weekStart?: 0 | 1;
+    /** Full month names, January…December order (12). */
+    months?: string[];
+    /** Weekday headers in DISPLAY order, matching `weekStart` (7). */
+    weekdays?: string[];
+    /** Month first shown (its year/month seed the view). @default today */
+    initialView?: Date;
+    class?: string;
+}
+/**
+ * The interactive calendar body: a header (year/month jumps + drill-down) and a
+ * grid that switches between day, month, and year views. Stateless about
+ * open/closed — the caller decides where it lives.
+ */
+export declare function CalendarCore(props: CalendarCoreProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -37,14 +37,28 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./commerce": {
+      "types": "./dist/commerce/index.d.ts",
+      "import": "./dist/commerce.js",
+      "default": "./dist/commerce.js"
+    },
+    "./preset": {
+      "import": "./preset.js",
+      "default": "./preset.js"
     },
-    "./preset": "./preset.js",
     "./styles.css": "./dist/styles.css",
     "./elements": {
-      "import": "./dist/elements.js"
+      "import": "./dist/elements.js",
+      "default": "./dist/elements.js"
     },
-    "./elements.css": "./dist/elements.css"
+    "./elements.css": "./dist/elements.css",
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=20"
   },
   "publishConfig": {
     "access": "public"
@@ -65,7 +79,9 @@
     "test:ui": "playwright test --ui",
     "test:a11y": "playwright test a11y --project=desktop",
     "test:report": "playwright show-report",
-    "prepublishOnly": "npm run build",
+    "test:package": "node scripts/test-package.mjs",
+    "validate": "npm run typecheck && npm run lint && npm run test:unit && npm run build",
+    "prepublishOnly": "npm run validate",
     "prepare": "husky"
   },
   "lint-staged": {