@viniaraujo68/plinth 0.6.0 → 0.7.0

package/README.md

@@ -322,6 +322,9 @@ date fields, the pair is `YYYY-MM-DD`, and an empty end leaves that side open, s
 "all time" are pairs too. Presets can follow the calendar instead of a duration — `thisMonth`,
 `lastMonth`, `lastMonths(n)` and `allTime` build the usual ones, and any `range(now)` function will
 do. Every preset re-anchors on a timer, and a picker handed a pair opens on the preset that names it.
+`caption` puts visible text before the presets, as on `SegmentedControl`, and `size` (`sm` or `md`)
+sizes the presets and the typed fields together, so the fields line up with the buttons.
+`fieldLabels` puts the field labels `"above"` their fields (the default) or `"beside"` them.
 
 `JsonInput` edits a JSON document as text: it reports through a bindable `invalid` whether the text
 parses, shows the parser's message after the first blur, can reindent on blur, and sets the

package/dist/components/DateRangePicker.svelte

@@ -63,6 +63,21 @@
     toLabel?: string;
     /** Shown, as an alert, while the typed pair is out of order. */
     invalidRangeLabel?: string;
+    /**
+     * Visible text before the presets — "Period:". Passed to the {@link SegmentedControl}, so it
+     * sits on the preset row; `label` stays the accessible name.
+     */
+    caption?: string;
+    /**
+     * Sizes the presets and the custom fields together, so the fields line up with the buttons.
+     * `sm` is for a toolbar or a card header, where the default height would dominate.
+     */
+    size?: "sm" | "md";
+    /**
+     * Where the custom fields' labels sit: `"above"` stacks each one over its field, `"beside"`
+     * puts it before the field on the same line, so the whole picker can stay one row.
+     */
+    fieldLabels?: "above" | "beside";
     onchange?: (value: DateRange) => void;
   }
 
@@ -78,6 +93,9 @@
     fromLabel = "From",
     toLabel = "To",
     invalidRangeLabel = "The start must not be after the end.",
+    caption,
+    size = "md",
+    fieldLabels = "above",
     onchange,
   }: Props = $props();
 
@@ -106,6 +124,9 @@
 
   const isCustom = $derived(selection === CUSTOM_PRESET_ID);
   const days = $derived(mode === "date");
+  const fieldWrapper = $derived(
+    fieldLabels === "beside" ? "flex items-center gap-2" : "flex flex-col gap-1",
+  );
 
   const options = $derived([
     ...presets.map(({ id, label }) => ({ id, label })),
@@ -251,18 +272,18 @@ buttons are labelled by the list itself, through `DateRangePreset.label`.
 ```
 -->
 
-<div class={["flex flex-wrap items-end gap-x-4 gap-y-3", cls]}>
+<div class={["flex flex-wrap items-end gap-x-4 gap-y-3", cls]} data-size={size}>
   <!-- A segmented control rather than a joined row: a calendar picker easily offers six windows,
        and a joined row cannot wrap onto a second line at phone width. -->
-  <SegmentedControl {options} value={selection} {label} onchange={pick} />
+  <SegmentedControl {options} value={selection} {label} {caption} {size} onchange={pick} />
 
   {#if isCustom}
     <div class="flex flex-wrap items-end gap-x-4 gap-y-3">
-      <div class="flex flex-col gap-1">
+      <div class={fieldWrapper}>
         <label class="label text-xs" for={fromId}>{fromLabel}</label>
         <input
           id={fromId}
-          class="input min-h-11"
+          class="plinth-range-field input"
           class:input-error={rangeError !== null}
           type={days ? "date" : "datetime-local"}
           value={customFrom}
@@ -276,11 +297,11 @@ buttons are labelled by the list itself, through `DateRangePreset.label`.
         />
       </div>
 
-      <div class="flex flex-col gap-1">
+      <div class={fieldWrapper}>
         <label class="label text-xs" for={toId}>{toLabel}</label>
         <input
           id={toId}
-          class="input min-h-11"
+          class="plinth-range-field input"
           class:input-error={rangeError !== null}
           type={days ? "date" : "datetime-local"}
           value={customTo}
@@ -300,3 +321,28 @@ buttons are labelled by the list itself, through `DateRangePreset.label`.
     <p id={errorId} class="basis-full text-sm text-error" role="alert">{rangeError}</p>
   {/if}
 </div>
+
+<style>
+  /* Chrome sizes a date field to its text alone, leaving no room for the padding and the picker
+     icon, which then covers the last digit. */
+  .plinth-range-field {
+    height: 2rem;
+    min-width: 9rem;
+    font-size: 0.78rem;
+  }
+
+  .plinth-range-field[type="datetime-local"] {
+    min-width: 12.5rem;
+  }
+
+  [data-size="sm"] .plinth-range-field {
+    height: 1.625rem;
+    font-size: 0.7rem;
+  }
+
+  @media (max-width: 35rem) {
+    [data-size="md"] .plinth-range-field {
+      height: 2.5rem;
+    }
+  }
+</style>

package/dist/components/DateRangePicker.svelte.d.ts

@@ -44,6 +44,21 @@ interface Props {
     toLabel?: string;
     /** Shown, as an alert, while the typed pair is out of order. */
     invalidRangeLabel?: string;
+    /**
+     * Visible text before the presets — "Period:". Passed to the {@link SegmentedControl}, so it
+     * sits on the preset row; `label` stays the accessible name.
+     */
+    caption?: string;
+    /**
+     * Sizes the presets and the custom fields together, so the fields line up with the buttons.
+     * `sm` is for a toolbar or a card header, where the default height would dominate.
+     */
+    size?: "sm" | "md";
+    /**
+     * Where the custom fields' labels sit: `"above"` stacks each one over its field, `"beside"`
+     * puts it before the field on the same line, so the whole picker can stay one row.
+     */
+    fieldLabels?: "above" | "beside";
     onchange?: (value: DateRange) => void;
 }
 /**

package/dist/index.d.ts

@@ -5,6 +5,6 @@
  * no portable way to import its own manifest, and a consumer that only wants to log a version
  * should not have to bundle one. `version.spec.ts` fails when this drifts from the manifest.
  */
-export declare const LIBRARY_VERSION = "0.6.0";
+export declare const LIBRARY_VERSION = "0.7.0";
 export { AsyncAction, type AsyncActionStatus, type AsyncFn } from "./async-action.svelte.js";
 export { reportError, setErrorReporter, type ErrorReporter } from "./error.js";

package/dist/index.js

@@ -5,7 +5,7 @@
  * no portable way to import its own manifest, and a consumer that only wants to log a version
  * should not have to bundle one. `version.spec.ts` fails when this drifts from the manifest.
  */
-export const LIBRARY_VERSION = "0.6.0";
+export const LIBRARY_VERSION = "0.7.0";
 // The root entry carries only what is not tied to one area: the error channel an app installs
 // once, and the async state machine the components are built on. Everything visual is reached
 // through a subpath — `/theme`, `/attachments`, `/components`, `/toast` — so importing a button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viniaraujo68/plinth",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A personal Svelte 5 design system: theme, application shell, interface primitives, routing metadata, a fetch wrapper and locale-aware formatters.",
   "license": "MIT",
   "type": "module",