@noxlovette/material 0.4.8 → 0.5.1

package/dist/components/date/DateRangeField.svelte

@@ -1,140 +1,113 @@
 <!--
 @component
 DateRangeField lets users enter or pick a date range (start + end) via two
-segment inputs and a shared calendar popover.
+segment inputs and a shared docked calendar.
+
+Changing the visible month slides the grid with the M3 lateral transition (see calendarMotion.ts).
 
 @see https://m3.material.io/components/date-pickers/guidelines
 -->
 <script lang="ts">
-  import { DateRangePicker } from 'bits-ui';
+  import { DateRangePicker, Portal, useId } from 'bits-ui';
+  import type { DateValue } from '@internationalized/date';
+  import { enterExit, presence } from '../../animation/index.js';
   import ButtonIcon from '../buttons/ButtonIcon.svelte';
   import Icon from '../../utils/icon/Icon.svelte';
   import Layer from '../../utils/Layer.svelte';
   import type { DateRangeFieldProps } from './types';
-  import { dateRangeField } from './theme';
+  import { slideMonth } from './calendarMotion.js';
+  import { dateCalendar, dateRangeField, dateSegment } from './theme';
 
   let {
     value = $bindable(),
     label,
     startLabel = 'Start',
     endLabel = 'End',
-    id,
+    id = useId(),
     required = false,
     disabled = false,
     error = false,
     variant = 'outlined',
     supportingText,
     name,
+    locale,
+    weekStartsOn,
     leadingIconProps
-  }: DateRangeFieldProps & { leadingIconProps?: any } = $props();
+  }: DateRangeFieldProps = $props();
 
   const cls = $derived(dateRangeField({ disabled, error, variant }));
+  const calendar = dateCalendar();
+
+  // Starts undefined on purpose: bits-ui writes its own default (from value, else today) through
+  // the setter on mount, which is why the getter below can assert.
+  let placeholder = $state<DateValue>();
+  let grids = $state<HTMLElement | null>(null);
+  const setPlaceholder = (next: DateValue) =>
+    slideMonth(placeholder, next, grids, (date) => (placeholder = date));
 </script>
 
+{#snippet rangeInput(type: 'start' | 'end', fieldLabel: string)}
+  <div class={cls.inputWrapper()}>
+    <DateRangePicker.Input
+      {type}
+      class={cls.input()}
+      name={type === 'start' ? name : undefined}
+      id={`${id}-${type}`}
+    >
+      {#snippet children({ segments })}
+        <div class="flex w-full pt-4 tabular-nums">
+          {#each segments as { part, value: segment }}
+            <DateRangePicker.Segment
+              {part}
+              class={dateSegment({ part: part === 'literal' ? 'literal' : 'value' })}
+            >
+              {segment}
+            </DateRangePicker.Segment>
+          {/each}
+        </div>
+      {/snippet}
+    </DateRangePicker.Input>
+
+    <span class={cls.label()}>
+      {fieldLabel}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true">*</span
+        >{/if}
+    </span>
+  </div>
+{/snippet}
+
 <DateRangePicker.Root
   bind:value
-  weekStartsOn={1}
+  bind:placeholder={() => placeholder as DateValue, setPlaceholder}
+  {weekStartsOn}
   {required}
   {disabled}
-  locale="ru"
-  weekdayFormat="short"
+  {locale}
+  weekdayFormat="narrow"
   fixedWeeks
   closeOnRangeSelect
 >
   <div class="relative w-full">
+    {#if label}
+      <DateRangePicker.Label class="sr-only">{label}</DateRangePicker.Label>
+    {/if}
     <div class={cls.base()} data-invalid={error || undefined}>
       {#if leadingIconProps}
         <Icon class={cls.leadingIcon()} {...leadingIconProps} />
       {/if}
 
-      <div class={cls.inputWrapper()}>
-        <!-- Start date input -->
-        <DateRangePicker.Input type="start" class={cls.input()} {name} id={id ?? undefined}>
-          {#snippet children({ segments })}
-            <div class="flex w-full flex-col pt-4 tabular-nums">
-              <div class="flex">
-                {#each segments as { part, value: segVal }}
-                  {#if part === 'literal'}
-                    <DateRangePicker.Segment
-                      {part}
-                      class="text-md-sys-color-on-surface-variant px-0.5 select-none first:pl-0"
-                    >
-                      {segVal}
-                    </DateRangePicker.Segment>
-                  {:else}
-                    <DateRangePicker.Segment
-                      {part}
-                      class="text-md-sys-color-on-surface hover:bg-md-sys-color-on-surface/8 focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary
-										   aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant cursor-default rounded-xs
-										   px-1
-										   py-0.5
-										   transition-colors
-										   duration-100 select-none focus:outline-2
-										   focus-visible:ring-0! focus-visible:ring-offset-0!"
-                    >
-                      {segVal}
-                    </DateRangePicker.Segment>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-          {/snippet}
-        </DateRangePicker.Input>
-
-        <label class={cls.label()} for={id}>
-          {startLabel ?? label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true"
-              >*</span
-            >{/if}
-        </label>
-      </div>
-
+      {@render rangeInput('start', startLabel)}
       <span class={cls.separator()}>–</span>
+      {@render rangeInput('end', endLabel)}
 
-      <div class={cls.inputWrapper()}>
-        <!-- End date input -->
-        <DateRangePicker.Input type="end" class={cls.input()} id={id ? `${id}-end` : undefined}>
-          {#snippet children({ segments })}
-            <div class="flex w-full flex-col pt-4 tabular-nums">
-              <div class="flex">
-                {#each segments as { part, value: segVal }}
-                  {#if part === 'literal'}
-                    <DateRangePicker.Segment
-                      {part}
-                      class="text-md-sys-color-on-surface-variant px-0.5 select-none first:pl-0"
-                    >
-                      {segVal}
-                    </DateRangePicker.Segment>
-                  {:else}
-                    <DateRangePicker.Segment
-                      {part}
-                      class="text-md-sys-color-on-surface hover:bg-md-sys-color-on-surface/8 focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container focus:outline-md-sys-color-primary
-										   aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant cursor-default rounded-xs
-										   px-1
-										   py-0.5
-										   transition-colors
-										   duration-100 select-none focus:outline-2
-										   focus-visible:ring-0! focus-visible:ring-offset-0!"
-                    >
-                      {segVal}
-                    </DateRangePicker.Segment>
-                  {/if}
-                {/each}
-              </div>
-            </div>
-          {/snippet}
-        </DateRangePicker.Input>
-
-        <label class={cls.label()} for={id ? `${id}-end` : undefined}>
-          {endLabel ?? label}{#if required}<span class={cls.requiredAsterisk()} aria-hidden="true"
-              >*</span
-            >{/if}
-        </label>
-      </div>
-
-      <DateRangePicker.Trigger
-        class={cls.trailingIcon({ class: 'flex items-center justify-center' })}
-      >
-        <Icon name="calendar_month" />
+      <DateRangePicker.Trigger>
+        {#snippet child({ props })}
+          <ButtonIcon
+            {...props}
+            {disabled}
+            class={cls.trailingIcon()}
+            iconProps={{ name: 'date_range' }}
+          />
+        {/snippet}
       </DateRangePicker.Trigger>
     </div>
 
@@ -145,68 +118,67 @@ segment inputs and a shared calendar popover.
     {/if}
   </div>
 
-  <DateRangePicker.Content sideOffset={6} class="z-[100]">
-    <DateRangePicker.Calendar
-      class="bg-md-sys-color-surface-container-high shadow-elevation-3 h-104 w-90 rounded-lg p-6"
-    >
-      {#snippet children({ months, weekdays })}
-        <DateRangePicker.Header
-          class="text-md-sys-color-on-surface-variant z-10 flex w-full items-center justify-between pb-7.5"
-        >
-          <DateRangePicker.PrevButton>
-            <ButtonIcon type="button" iconProps={{ name: 'chevron_left' }} />
-          </DateRangePicker.PrevButton>
-          <DateRangePicker.Heading class="md-sys-typescale-label-large" />
-          <DateRangePicker.NextButton>
-            <ButtonIcon type="button" iconProps={{ name: 'chevron_right' }} />
-          </DateRangePicker.NextButton>
-        </DateRangePicker.Header>
+  <Portal>
+    <DateRangePicker.Content sideOffset={4} align="start">
+      {#snippet child({ wrapperProps, props, open })}
+        <div {...wrapperProps}>
+          <div {...props} {@attach presence(() => open, enterExit.scale)}>
+            <DateRangePicker.Calendar class={calendar.surface()}>
+              {#snippet children({ months, weekdays })}
+                <DateRangePicker.Header class={calendar.header()}>
+                  <DateRangePicker.Heading class={calendar.heading()} />
+                  <div class={calendar.nav()}>
+                    <DateRangePicker.PrevButton>
+                      {#snippet child({ props })}
+                        <ButtonIcon {...props} iconProps={{ name: 'chevron_left' }} />
+                      {/snippet}
+                    </DateRangePicker.PrevButton>
+                    <DateRangePicker.NextButton>
+                      {#snippet child({ props })}
+                        <ButtonIcon {...props} iconProps={{ name: 'chevron_right' }} />
+                      {/snippet}
+                    </DateRangePicker.NextButton>
+                  </div>
+                </DateRangePicker.Header>
 
-        {#each months as month}
-          <DateRangePicker.Grid class="w-full border-collapse select-none">
-            <DateRangePicker.GridHead>
-              <DateRangePicker.GridRow class="flex w-full justify-between">
-                {#each weekdays as day}
-                  <DateRangePicker.HeadCell
-                    class="md-sys-typescale-label-large text-md-sys-color-on-surface-variant size-10"
-                  >
-                    {day}
-                  </DateRangePicker.HeadCell>
-                {/each}
-              </DateRangePicker.GridRow>
-            </DateRangePicker.GridHead>
-            <DateRangePicker.GridBody>
-              {#each month.weeks as weekDates}
-                <DateRangePicker.GridRow class="flex w-full justify-between">
-                  {#each weekDates as date}
-                    <DateRangePicker.Cell
-                      {date}
-                      month={month.value}
-                      class="md-sys-typescale-body-large text-center"
-                    >
-                      <DateRangePicker.Day
-                        class="group data-disabled:text-md-sys-color-on-surface/38 data-highlighted:bg-md-sys-color-primary-container/20 data-range-end:bg-md-sys-color-primary data-range-end:text-md-sys-color-on-primary data-range-middle:bg-md-sys-color-primary-container/40 data-range-start:bg-md-sys-color-primary
-												   data-range-start:text-md-sys-color-on-primary data-selected:bg-md-sys-color-primary data-selected:text-md-sys-color-on-primary data-unavailable:text-md-sys-color-on-surface/38
-												   relative flex
-												   size-10 items-center
-												   justify-center rounded-full
-												   bg-transparent p-0
-												   transition-colors
-												   duration-100 data-disabled:cursor-not-allowed
-												   data-outside-month:pointer-events-none data-outside-month:opacity-0
-												   data-range-middle:rounded-none data-unavailable:line-through"
-                      >
-                        <Layer />
-                        {date.day}
-                      </DateRangePicker.Day>
-                    </DateRangePicker.Cell>
+                <div bind:this={grids}>
+                  {#each months as month (month.value.toString())}
+                    <DateRangePicker.Grid class={calendar.grid()}>
+                      <DateRangePicker.GridHead>
+                        <DateRangePicker.GridRow class={calendar.row()}>
+                          {#each weekdays as day, i (i)}
+                            <DateRangePicker.HeadCell class={calendar.weekday()}>
+                              {day}
+                            </DateRangePicker.HeadCell>
+                          {/each}
+                        </DateRangePicker.GridRow>
+                      </DateRangePicker.GridHead>
+                      <DateRangePicker.GridBody>
+                        {#each month.weeks as weekDates, i (i)}
+                          <DateRangePicker.GridRow class={calendar.row()}>
+                            {#each weekDates as date (date.toString())}
+                              <DateRangePicker.Cell
+                                {date}
+                                month={month.value}
+                                class={calendar.cell()}
+                              >
+                                <DateRangePicker.Day class={calendar.day()}>
+                                  <Layer />
+                                  {date.day}
+                                </DateRangePicker.Day>
+                              </DateRangePicker.Cell>
+                            {/each}
+                          </DateRangePicker.GridRow>
+                        {/each}
+                      </DateRangePicker.GridBody>
+                    </DateRangePicker.Grid>
                   {/each}
-                </DateRangePicker.GridRow>
-              {/each}
-            </DateRangePicker.GridBody>
-          </DateRangePicker.Grid>
-        {/each}
+                </div>
+              {/snippet}
+            </DateRangePicker.Calendar>
+          </div>
+        </div>
       {/snippet}
-    </DateRangePicker.Calendar>
-  </DateRangePicker.Content>
+    </DateRangePicker.Content>
+  </Portal>
 </DateRangePicker.Root>

package/dist/components/date/DateRangeField.svelte.d.ts

@@ -1,13 +1,12 @@
 import type { DateRangeFieldProps } from './types';
-type $$ComponentProps = DateRangeFieldProps & {
-    leadingIconProps?: any;
-};
 /**
  * DateRangeField lets users enter or pick a date range (start + end) via two
- * segment inputs and a shared calendar popover.
+ * segment inputs and a shared docked calendar.
+ *
+ * Changing the visible month slides the grid with the M3 lateral transition (see calendarMotion.ts).
  *
  * @see https://m3.material.io/components/date-pickers/guidelines
  */
-declare const DateRangeField: import("svelte").Component<$$ComponentProps, {}, "value">;
+declare const DateRangeField: import("svelte").Component<DateRangeFieldProps, {}, "value">;
 type DateRangeField = ReturnType<typeof DateRangeField>;
 export default DateRangeField;

package/dist/components/date/calendarMotion.d.ts

@@ -0,0 +1,9 @@
+import type { DateValue } from '@internationalized/date';
+/**
+ * Applies a new calendar placeholder (the month the grid shows). When the visible month changes
+ * while the calendar is open, the grid runs the M3 lateral transition — months are peers, so a
+ * later month pushes in from the right and an earlier one from the left. Covers every way the
+ * month changes: prev/next buttons, arrow keys past the month edge, picking an outside day.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#lateral
+ */
+export declare const slideMonth: (current: DateValue | undefined, next: DateValue, target: HTMLElement | null | undefined, apply: (next: DateValue) => void) => undefined;

package/dist/components/date/calendarMotion.js

@@ -0,0 +1,23 @@
+import { lateral } from '../../animation/index.js';
+import { tick } from 'svelte';
+const monthIndex = (date) => date.year * 12 + date.month;
+/**
+ * Applies a new calendar placeholder (the month the grid shows). When the visible month changes
+ * while the calendar is open, the grid runs the M3 lateral transition — months are peers, so a
+ * later month pushes in from the right and an earlier one from the left. Covers every way the
+ * month changes: prev/next buttons, arrow keys past the month edge, picking an outside day.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#lateral
+ */
+export const slideMonth = (current, next, target, apply) => {
+    const update = async () => {
+        apply(next);
+        await tick();
+    };
+    if (!current || !target?.isConnected || monthIndex(current) === monthIndex(next)) {
+        return void update();
+    }
+    lateral(update, {
+        target,
+        direction: monthIndex(next) > monthIndex(current) ? 'forward' : 'backward'
+    });
+};

package/dist/components/date/theme.d.ts

@@ -225,3 +225,98 @@ export declare const dateField: import("tailwind-variants").TVReturnType<{
     legend: string;
     legendLabel: string;
 }>>;
+/** Segments of the typed date (`DatePicker.Segment` / `DateRangePicker.Segment`). */
+export declare const dateSegment: import("tailwind-variants").TVReturnType<{
+    part: {
+        literal: "text-md-sys-color-on-surface-variant px-0";
+        value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
+    };
+}, undefined, "\n    rounded-xs px-0.5 py-0.5 select-none cursor-default outline-none\n    transition-colors md-sys-motion-fast-effects\n  ", {
+    part: {
+        literal: "text-md-sys-color-on-surface-variant px-0";
+        value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    part: {
+        literal: "text-md-sys-color-on-surface-variant px-0";
+        value: "\n        text-md-sys-color-on-surface\n        aria-[valuetext=Empty]:text-md-sys-color-on-surface-variant\n        hover:bg-md-sys-color-on-surface/8\n        focus:bg-md-sys-color-primary-container focus:text-md-sys-color-on-primary-container\n      ";
+    };
+}, undefined>>;
+/**
+ * Docked date picker surface, shared by DateField and DateRangeField.
+ * @see https://m3.material.io/components/date-pickers/specs#docked-date-picker
+ * 360dp wide = 12dp padding + 7 × 48dp targets; each day is a 40dp circle inside its target.
+ */
+export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            grid?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            nav?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            weekday?: import("tailwind-variants").ClassValue;
+            day?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            grid?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            nav?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            weekday?: import("tailwind-variants").ClassValue;
+            day?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    surface: string;
+    header: string;
+    heading: string;
+    nav: string;
+    grid: string;
+    row: string;
+    weekday: string;
+    cell: string;
+    day: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            grid?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            nav?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            weekday?: import("tailwind-variants").ClassValue;
+            day?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    surface: string;
+    header: string;
+    heading: string;
+    nav: string;
+    grid: string;
+    row: string;
+    weekday: string;
+    cell: string;
+    day: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    surface: string;
+    header: string;
+    heading: string;
+    nav: string;
+    grid: string;
+    row: string;
+    weekday: string;
+    cell: string;
+    day: string;
+}>>;