@a4ui/core 0.8.1 → 0.10.0

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/FileUpload.d.ts

@@ -0,0 +1,54 @@
+import { JSX } from 'solid-js';
+/** A single file entry rendered by {@link FileUpload}. The consumer owns this state. */
+export interface UploadFile {
+    id: string;
+    name: string;
+    /** File size in bytes. */
+    size: number;
+    /** Upload progress, 0-100. */
+    progress: number;
+    status: 'pending' | 'uploading' | 'done' | 'error';
+    /** Optional preview/thumbnail URL (e.g. an object URL for an image). */
+    url?: string;
+    /** Error message when `status === 'error'`. */
+    error?: string;
+}
+export interface FileUploadProps {
+    files: UploadFile[];
+    /** Called with the newly chosen File[] (from drop or the file dialog). */
+    onAdd: (files: File[]) => void;
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    /** `accept` attribute for the hidden input, e.g. ".png,.jpg,application/pdf". */
+    accept?: string;
+    /** Allow choosing/dropping more than one file at a time. Default: `true`. */
+    multiple?: boolean;
+    /** Helper text shown inside the drop zone. */
+    hint?: string;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Advanced, controlled file uploader: a click-or-drag drop zone plus a list of
+ * files showing per-file progress, error/retry, a preview thumbnail, and a
+ * remove action. This component owns no file state — the consumer supplies
+ * `files` and performs the actual upload, updating `files` as progress comes in.
+ *
+ * @example
+ * ```tsx
+ * const [files, setFiles] = createSignal<UploadFile[]>([])
+ *
+ * <FileUpload
+ *   files={files()}
+ *   accept="image/*"
+ *   onAdd={(added) => {
+ *     const entries = added.map((f) => ({ id: crypto.randomUUID(), name: f.name, size: f.size, progress: 0, status: 'pending' as const }))
+ *     setFiles((prev) => [...prev, ...entries])
+ *     entries.forEach((entry, i) => upload(added[i], entry.id, setFiles))
+ *   }}
+ *   onRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}
+ *   onRetry={(id) => retryUpload(id, setFiles)}
+ * />
+ * ```
+ */
+export declare function FileUpload(props: FileUploadProps): 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/MultiSelect.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+/** One selectable option: a stable `value` and its display `label`. */
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    /** Show a search box in the dropdown. Default `true`. */
+    searchable?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Multi-select dropdown: the trigger shows selected options as removable
+ * chips, and the portaled popover lists (optionally search-filtered) options
+ * to toggle. Picking an option keeps the popover open so several values can
+ * be chosen in a row; the popover closes on outside click, Escape, scroll, or
+ * resize.
+ *
+ * @example
+ * ```tsx
+ * const [tags, setTags] = createSignal<string[]>([])
+ * <MultiSelect
+ *   options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
+ *   value={tags()}
+ *   onChange={setTags}
+ *   placeholder="Select tags…"
+ * />
+ * ```
+ */
+export declare function MultiSelect(props: MultiSelectProps): JSX.Element;

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

@@ -2,6 +2,10 @@ 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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -40,6 +40,16 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./commerce": {
+      "types": "./dist/commerce/index.d.ts",
+      "import": "./dist/commerce.js",
+      "default": "./dist/commerce.js"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts.js",
+      "default": "./dist/charts.js"
+    },
     "./preset": {
       "import": "./preset.js",
       "default": "./preset.js"