@salyra-ui/calendar 0.1.0

package/dist/react/index.js

@@ -0,0 +1 @@
+"use client";export*from"../core/index.js";import{createContext as K,useContext as Q,useSyncExternalStore as U}from"react";var h=K(null);function u(){let e=Q(h);if(!e)throw new Error("Picker components require Root");return e}function f(){let e=u();return U(e.subscribe,e.getSnapshot,e.getSnapshot)}function ge(e=0){return f(),u().getMonth(e)}import{useEffect as S,useRef as A,useState as X}from"react";import{createPickerStore as Z}from"../core/index.js";import{jsx as L}from"react/jsx-runtime";function g({store:e,children:n,value:t,onValueChange:o,...r}){let[i]=X(()=>e?(e.setOptions(r),t!==void 0&&e.setValue(t),e):Z({...r,value:t})),l=i.getSnapshot().options;if(r.kind&&r.kind!==l.kind||r.selection&&r.selection!==l.selection)throw new RangeError("Remount Root to change kind or selection");let s=A(o);s.current=o,S(()=>i.subscribeValue(p=>s.current?.(p)),[i]),S(()=>{t!==void 0&&i.setValue(t)},[i,t]);let m=A(r);return S(()=>{let p=new Set([...Object.keys(m.current),...Object.keys(r)]),d={};for(let a of p){if(["kind","selection","defaultValue","month"].includes(a))continue;let T=a;Object.is(m.current[T],r[T])||Object.assign(d,{[a]:r[T]})}m.current=r,Object.keys(d).length&&i.setOptions(d)}),L(h.Provider,{value:i,children:n})}var Ee=e=>L(g,{...e,kind:"date"}),xe=e=>L(g,{...e,kind:"time"}),Pe=e=>L(g,{...e,kind:"datetime"});import{forwardRef as M,useEffect as O,useRef as y}from"react";import{bindCalendar as ee,bindDayTrigger as te,calendarMarkup as ne,dayAttributes as re,dayTriggerAttributes as oe,formatMonth as ie,weekdayLabels as le,escapeHTML as ue}from"../core/index.js";import{jsx as b}from"react/jsx-runtime";function D(e,n){typeof e=="function"?e(n):e&&(e.current=n)}var w=M(function({renderCell:n,renderWeekday:t,weekdays:o,onDayClick:r,onSelect:i,...l},s){let m=u(),p=y(null),d=y({renderCell:n,renderWeekday:t,weekdays:o,onDayClick:r,onSelect:i});return d.current={renderCell:n,renderWeekday:t,weekdays:o,onDayClick:r,onSelect:i},O(()=>ee(p.current,m,{weekdays:o,renderCell:(...a)=>d.current.renderCell?.(...a)??`<button type="button" data-day-trigger data-date="${a[0].date}">${a[0].day}</button>`,renderWeekday:(a,T)=>d.current.renderWeekday?.(a,T)??ue(T),onDayClick:(...a)=>d.current.onDayClick?.(...a),onSelect:a=>d.current.onSelect?.(a)}),[m,o,n,t]),b("div",{...l,"data-part":"calendar",dangerouslySetInnerHTML:{__html:ne(m,{renderCell:n,renderWeekday:t,weekdays:o})},ref:a=>{p.current=a,D(s,a)}})}),V=M(function(n,t){return b("div",{...n,role:"grid","data-part":"grid",ref:t})}),I=M(function(n,t){return b("div",{...n,role:"row","data-part":"week",ref:t})}),N=M(function({date:n,outside:t,...o},r){f();let i=u();return b("div",{...o,...re(i,n,t),role:"gridcell","data-part":"cell",ref:r})}),B=M(function({date:n,children:t,...o},r){return b("span",{...o,"data-part":"number",ref:r,children:t??parseInt(n.slice(-2),10)})}),F=M(function({date:n,outside:t,onSelect:o,...r},i){let l=u(),s=f(),m=y(null),p=y(o);return p.current=o,O(()=>te(m.current,l,n,{outside:t,disabled:r.disabled??!1,onSelect:d=>p.current?.(d)}),[l,n,t,r.disabled]),b("button",{...r,...oe(l,n,t),"data-day-trigger":"",disabled:r.disabled||s.options.disabled||l.getDay(n).disabled,tabIndex:n===s.focusedDate&&!t?0:-1,type:r.type??"button",ref:d=>{m.current=d,D(i,d)}})}),Y=M(function({offset:n=0,children:t,...o},r){let i=f(),l=u();return b("h3",{...o,"aria-live":"polite",ref:r,children:t??ie(l.getMonth(n),i.options.locale)})}),_=M(function({day:n,children:t,...o},r){let i=f(),l=le(i.options.locale,i.options.weekStartsOn).find(s=>s.weekday===n)?.label;return b("span",{...o,role:"columnheader","data-part":"weekday","data-weekday":n,"data-weekend":i.options.weekend.includes(n)?"":void 0,ref:r,children:t??l})});function W({direction:e,children:n,...t}){let o=f(),r=u();return b("button",{...t,type:"button",disabled:t.disabled||o.options.disabled,onClick:i=>{if(t.onClick?.(i),!i.defaultPrevented)try{r.navigate(e)}catch(l){if(!(l instanceof RangeError))throw l}},children:n??(e===1?"Next month":"Previous month")})}import{forwardRef as E,useEffect as x,useRef as P}from"react";import{bindDateField as ae,bindTimeSegment as G,pointFor as R,timeSegmentValue as $}from"../core/index.js";import{Fragment as ce,jsx as c,jsxs as H}from"react/jsx-runtime";function v(e,n){typeof e=="function"?e(n):e&&(e.current=n)}var Ye=E(function({endpoint:n="start",...t},o){let r=u(),i=P(null);return x(()=>ae(i.current,r,n),[r,n,t.disabled,t.readOnly]),c("input",{...t,type:"text",defaultValue:t.defaultValue??R(r.getSnapshot().draft,n)?.date??"",placeholder:t.placeholder??"YYYY-MM-DD",ref:l=>{i.current=l,v(o,l)}})}),k=E(function({part:n,endpoint:t="start",...o},r){let i=u(),l=P(null);return x(()=>G(l.current,i,n,t),[i,n,t,o.disabled,o.readOnly]),c("input",{...o,type:"number","data-part":n,defaultValue:o.defaultValue??$(R(i.getSnapshot().draft,t)?.time,n,i.getSnapshot().options.hourCycle),ref:s=>{l.current=s,v(r,s)}})}),se=E(function({endpoint:n="start",children:t,...o},r){let i=u(),l=P(null);return x(()=>G(l.current,i,"period",n),[i,n,o.disabled]),c("select",{...o,defaultValue:o.defaultValue??$(R(i.getSnapshot().draft,n)?.time,"period",i.getSnapshot().options.hourCycle),ref:s=>{l.current=s,v(r,s)},children:t??H(ce,{children:[c("option",{children:"AM"}),c("option",{children:"PM"})]})})});function _e({endpoint:e="start",className:n,labels:t={},...o}){let r=f();return H("div",{...o,className:n??"sp-time",children:[H("label",{children:[t.hour??"Hours",c(k,{part:"hour",endpoint:e})]}),H("label",{children:[t.minute??"Minutes",c(k,{part:"minute",endpoint:e})]}),r.options.seconds&&H("label",{children:[t.second??"Seconds",c(k,{part:"second",endpoint:e})]}),r.options.hourCycle===12&&H("label",{children:[t.period??"Period",c(se,{endpoint:e})]})]})}function j({action:e,children:n,...t}){let o=u(),r=f();return c("button",{...t,type:"button",disabled:t.disabled||r.options.disabled||r.options.readOnly,onClick:i=>{t.onClick?.(i),i.defaultPrevented||o[e]()},children:n??e})}function q(e){let n=u(),t=f();return c("select",{...e,disabled:e.disabled||t.options.disabled,value:t.visibleMonth.month,onChange:o=>{e.onChange?.(o),o.defaultPrevented||n.setVisibleMonth({...t.visibleMonth,month:globalThis.Number(o.target.value)})},children:e.children??Array.from({length:12},(o,r)=>c("option",{value:r+1,children:r+1},r))})}function J({from:e=1900,to:n=2100,...t}){let o=u(),r=f();return c("select",{...t,disabled:t.disabled||r.options.disabled,value:r.visibleMonth.year,onChange:i=>{t.onChange?.(i),i.defaultPrevented||o.setVisibleMonth({...r.visibleMonth,year:globalThis.Number(i.target.value)})},children:t.children??Array.from({length:n-e+1},(i,l)=>c("option",{value:e+l,children:e+l},l))})}function z(e){let n=f();return c("output",{...e,children:e.children??JSON.stringify(n.value)})}import{useRef as de,useEffect as fe,useState as me}from"react";import{bindMonthScroller as pe,monthScrollerMarkup as be}from"../core/index.js";import{jsx as Me}from"react/jsx-runtime";function C({options:e={},...n}){let t=u(),o=de(null),[r]=me(()=>be(t,e));return fe(()=>pe(o.current,t,e),[t,e]),Me("div",{...n,ref:o,dangerouslySetInnerHTML:{__html:r}})}var Te={Continuous:C,Action:j,MonthSelect:q,YearSelect:J,Output:z,Grid:V,Week:I,Cell:N,Number:B,DayTrigger:F,Heading:Y,Weekday:_,Navigation:W},et={Root:g,...Te,View:w};export{j as Action,et as Calendar,w as CalendarView,N as Cell,C as Continuous,Ee as DateRoot,Pe as DateTimeRoot,F as DayTrigger,Ye as Field,V as Grid,Y as Heading,q as MonthSelect,W as Navigation,B as Number,z as Output,se as Period,h as PickerContext,g as Root,k as Segment,_e as Time,xe as TimeRoot,I as Week,_ as Weekday,J as YearSelect,ge as useCalendarMonth,f as usePicker,u as usePickerStore};

package/dist/styles.css

@@ -0,0 +1,115 @@
+:where(.sp-calendar) {
+  --sp-accent: #e4002b;
+  --sp-selected-text: #fff;
+  --sp-range: #fce5ea;
+  --sp-outside: #737373;
+  --sp-border: #dddde2;
+  color: #181818;
+  font-family:
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+.sp-calendar {
+  display: grid;
+  grid-template-columns: repeat(var(--sp-months, 1), minmax(0, 1fr));
+  gap: 24px;
+}
+.sp-month {
+  min-width: 0;
+}
+.sp-month h3 {
+  margin: 0 0 20px;
+  font-size: 15px;
+  font-weight: 600;
+}
+.sp-grid {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.sp-grid th {
+  height: 32px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #656565;
+  text-align: center;
+}
+.sp-grid td {
+  padding: 2px 0;
+  position: relative;
+  height: 40px;
+  text-align: center;
+}
+.sp-grid [data-day-trigger] {
+  position: relative;
+  z-index: 1;
+  display: inline-grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid transparent;
+  border-radius: var(--sp-day-radius, 4px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+.sp-grid [data-day-trigger]:hover {
+  border-color: var(--sp-border);
+}
+.sp-grid [data-part=cell][data-in-range] {
+  background: var(--sp-range);
+}
+.sp-grid [data-part=cell][data-selected] [data-day-trigger] {
+  background: var(--sp-accent);
+  color: var(--sp-selected-text);
+}
+.sp-grid [data-part=cell][data-outside]:not([data-selected]) {
+  color: var(--sp-outside);
+}
+.sp-grid [data-part=cell][data-today]:not([data-selected]) [data-part=number] {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.sp-grid [data-day-trigger]:focus-visible {
+  outline: 2px solid var(--sp-accent);
+  outline-offset: 2px;
+}
+.sp-grid [data-day-trigger]:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+.sp-time {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.sp-time label {
+  display: grid;
+  gap: 8px;
+  font: inherit;
+  font-size: 12px;
+}
+.sp-time input,
+.sp-time select {
+  width: 72px;
+  min-height: 40px;
+  border: 1px solid #dddde2;
+  padding: 8px;
+  box-sizing: border-box;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.sp-time [aria-invalid=true] {
+  outline: 2px solid #e4002b;
+}
+@media (max-width: 640px) {
+  .sp-calendar {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/styles.min.css

@@ -0,0 +1 @@
+:where(.sp-calendar){--sp-accent: #e4002b;--sp-selected-text: #fff;--sp-range: #fce5ea;--sp-outside: #737373;--sp-border: #dddde2;color:#181818;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.sp-calendar{display:grid;grid-template-columns:repeat(var(--sp-months, 1),minmax(0,1fr));gap:24px}.sp-month{min-width:0}.sp-month h3{margin:0 0 20px;font-size:15px;font-weight:600}.sp-grid{width:100%;table-layout:fixed;border-collapse:collapse}.sp-grid th{height:32px;font-size:11px;font-weight:500;color:#656565;text-align:center}.sp-grid td{padding:2px 0;position:relative;height:40px;text-align:center}.sp-grid [data-day-trigger]{position:relative;z-index:1;display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid transparent;border-radius:var(--sp-day-radius, 4px);background:transparent;color:inherit;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer}.sp-grid [data-day-trigger]:hover{border-color:var(--sp-border)}.sp-grid [data-part=cell][data-in-range]{background:var(--sp-range)}.sp-grid [data-part=cell][data-selected] [data-day-trigger]{background:var(--sp-accent);color:var(--sp-selected-text)}.sp-grid [data-part=cell][data-outside]:not([data-selected]){color:var(--sp-outside)}.sp-grid [data-part=cell][data-today]:not([data-selected]) [data-part=number]{text-decoration:underline;text-underline-offset:4px}.sp-grid [data-day-trigger]:focus-visible{outline:2px solid var(--sp-accent);outline-offset:2px}.sp-grid [data-day-trigger]:disabled{opacity:.3;cursor:default}.sp-time{display:flex;gap:12px;flex-wrap:wrap}.sp-time label{display:grid;gap:8px;font:inherit;font-size:12px}.sp-time input,.sp-time select{width:72px;min-height:40px;border:1px solid #dddde2;padding:8px;box-sizing:border-box;background:transparent;color:inherit;font:inherit}.sp-time [aria-invalid=true]{outline:2px solid #e4002b}@media(max-width:640px){.sp-calendar{grid-template-columns:1fr}}

package/dist/svelte/Action.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import type{HTMLButtonAttributes}from"svelte/elements";import type{Snippet}from"svelte";import{usePicker,usePickerStore}from"./context";let{action,children,...attributes}:HTMLButtonAttributes&{action:"apply"|"cancel"|"clear";children?:Snippet}=$props();const store=usePickerStore(),state=usePicker();</script>
+
+<button
+  {...attributes}
+  type="button"
+  disabled={attributes.disabled || $state.options.disabled}
+  onclick={(event) => {
+    attributes.onclick?.(event);
+    if (!event.defaultPrevented) store[action]();
+  }}
+  >{#if children}{@render children()}{:else}{action}{/if}</button
+>

package/dist/svelte/CalendarView.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">import{untrack}from"svelte";import{calendarMarkup,bindCalendar,type CalendarRenderOptions}from"../core/index.js";import{usePickerStore}from"./context";let{options={},...attributes}:CalendarRenderOptions&{options?:CalendarRenderOptions;[key:string]:unknown}=$props();const store=usePickerStore();let element:HTMLDivElement;const html=untrack(()=>calendarMarkup(store,options));$effect(()=>bindCalendar(element,store,options));</script>
+
+<div {...attributes} data-part="calendar" bind:this={element}>{@html html}</div>

package/dist/svelte/Cell.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import type{HTMLAttributes}from"svelte/elements";import type{Snippet}from"svelte";import{dayAttributes,type PickerSnapshot}from"../core/index.js";import{usePicker,usePickerStore}from"./context";let{date,outside=false,children,...attributes}:HTMLAttributes<HTMLDivElement>&{date:string;outside?:boolean;children?:Snippet<[PickerSnapshot]>}=$props();const store=usePickerStore(),picker=usePicker();const flags=$derived.by(()=>{$picker;return dayAttributes(store,date,outside)});</script>
+
+<div {...attributes} {...flags} role="gridcell" data-part="cell">
+  {#if children}{@render children($picker)}{/if}
+</div>

package/dist/svelte/Continuous.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">import{untrack}from"svelte";import type{HTMLAttributes}from"svelte/elements";import{bindMonthScroller,monthScrollerMarkup,type MonthScrollerOptions}from"../core/index.js";import{usePickerStore}from"./context";let{options={},...attributes}:HTMLAttributes<HTMLDivElement>&{options?:MonthScrollerOptions}=$props();const store=usePickerStore();let element:HTMLDivElement;const html=untrack(()=>monthScrollerMarkup(store,options));$effect(()=>bindMonthScroller(element,store,options));</script>
+
+<div {...attributes} bind:this={element}>{@html html}</div>

package/dist/svelte/DateRoot.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">import Root from"./Root.svelte";import type{ComponentProps}from"svelte";let{options={},value=$bindable(),...props}:ComponentProps<typeof Root>=$props();</script>
+
+<Root {...props} bind:value options={{ ...options, kind: "date" }} />

package/dist/svelte/DateTimeRoot.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">import Root from"./Root.svelte";import type{ComponentProps}from"svelte";let{options={},value=$bindable(),...props}:ComponentProps<typeof Root>=$props();</script>
+
+<Root {...props} bind:value options={{ ...options, kind: "datetime" }} />

package/dist/svelte/DayTrigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import type{HTMLButtonAttributes}from"svelte/elements";import{onMount,type Snippet}from"svelte";import{bindDayTrigger,dayTriggerAttributes}from"../core/index.js";import{usePickerStore,usePicker}from"./context";let{date,outside=false,onSelect,children,...attributes}:HTMLButtonAttributes&{date:string;outside?:boolean;onSelect?:(date:string)=>void;children?:Snippet}=$props();const store=usePickerStore();const picker=usePicker();let element:HTMLButtonElement;const flags=$derived.by(()=>{$picker;return dayTriggerAttributes(store,date,outside)});$effect(()=>bindDayTrigger(element,store,date,{outside,onSelect,disabled:attributes.disabled??false}));</script>
+
+<button
+  {...attributes}
+  {...flags}
+  data-day-trigger
+  disabled={attributes.disabled || store.getDay(date).disabled}
+  tabindex={$picker.focusedDate === date && !outside ? 0 : -1}
+  type="button"
+  bind:this={element}
+  >{#if children}{@render children()}{:else}{Number(
+      date.slice(-2),
+    )}{/if}</button
+>

package/dist/svelte/Field.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import type{HTMLInputAttributes}from"svelte/elements";import{bindDateField,pointFor,type Endpoint}from"../core/index.js";import{usePickerStore}from"./context";let{endpoint="start",...attributes}:HTMLInputAttributes&{endpoint?:Endpoint}=$props();const store=usePickerStore();let element:HTMLInputElement;$effect(()=>{attributes.disabled;attributes.readonly;return bindDateField(element,store,endpoint)});</script>
+
+<input
+  {...attributes}
+  value={attributes.value ??
+    pointFor(store.getSnapshot().draft, endpoint)?.date ??
+    ""}
+  type="text"
+  placeholder={attributes.placeholder ?? "YYYY-MM-DD"}
+  bind:this={element}
+/>

package/dist/svelte/Grid.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import type{HTMLAttributes}from"svelte/elements";import type{Snippet}from"svelte";let{children,...attributes}:HTMLAttributes<HTMLDivElement>&{children?:Snippet}=$props();</script>
+
+<div {...attributes} role="grid" data-part="grid">
+  {#if children}{@render children()}{/if}
+</div>

package/dist/svelte/Heading.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import type{HTMLAttributes}from"svelte/elements";import type{Snippet}from"svelte";import{formatMonth}from"../core/index.js";import{usePicker,usePickerStore}from"./context";let{offset=0,children,...attributes}:HTMLAttributes<HTMLHeadingElement>&{offset?:number;children?:Snippet}=$props();const store=usePickerStore(),state=usePicker();const label=$derived.by(()=>{$state;return formatMonth(store.getMonth(offset),$state.options.locale)});</script>
+
+<h3 {...attributes} aria-live="polite">
+  {#if children}{@render children()}{:else}{label}{/if}
+</h3>

package/dist/svelte/MonthSelect.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import type{HTMLSelectAttributes}from"svelte/elements";import type{Snippet}from"svelte";import{usePicker,usePickerStore}from"./context";let{children,...attributes}:HTMLSelectAttributes&{children?:Snippet}=$props();const store=usePickerStore(),state=usePicker();</script>
+
+<select
+  {...attributes}
+  disabled={attributes.disabled || $state.options.disabled}
+  value={$state.visibleMonth.month}
+  onchange={(event) => {
+    attributes.onchange?.(event);
+    if (!event.defaultPrevented)
+      store.setVisibleMonth({
+        ...$state.visibleMonth,
+        month: Number(event.currentTarget.value),
+      });
+  }}
+>
+  {#if children}{@render children()}{:else}{#each Array.from({ length: 12 }, (_, i) => i + 1) as value}<option
+        {value}>{value}</option
+      >{/each}{/if}
+</select>

package/dist/svelte/Navigation.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import type{HTMLButtonAttributes}from"svelte/elements";import type{Snippet}from"svelte";import{usePicker,usePickerStore}from"./context";let{direction,children,...attributes}:HTMLButtonAttributes&{direction:-1|1;children?:Snippet}=$props();const store=usePickerStore(),state=usePicker();</script>
+
+<button
+  {...attributes}
+  type="button"
+  disabled={attributes.disabled || $state.options.disabled}
+  onclick={(event) => {
+    attributes.onclick?.(event);
+    if (!event.defaultPrevented) store.navigate(direction);
+  }}
+  >{#if children}{@render children()}{:else}{direction < 0
+      ? "Previous month"
+      : "Next month"}{/if}</button
+>

package/dist/svelte/Number.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import type{HTMLAttributes}from"svelte/elements";import type{Snippet}from"svelte";let{date,children,...attributes}:HTMLAttributes<HTMLSpanElement>&{date:string;children?:Snippet}=$props();</script>
+
+<span {...attributes} data-part="number"
+  >{#if children}{@render children()}{:else}{Number(date.slice(-2))}{/if}</span
+>

package/dist/svelte/Period.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import type{HTMLSelectAttributes}from"svelte/elements";import type{Snippet}from"svelte";import{bindTimeSegment,pointFor,timeSegmentValue,type Endpoint}from"../core/index.js";import{usePickerStore}from"./context";let{endpoint="start",children,...attributes}:HTMLSelectAttributes&{endpoint?:Endpoint;children?:Snippet}=$props();const store=usePickerStore();let element:HTMLSelectElement;$effect(()=>{attributes.disabled;return bindTimeSegment(element,store,"period",endpoint)});</script>
+
+<select
+  {...attributes}
+  value={attributes.value ??
+    timeSegmentValue(
+      pointFor(store.getSnapshot().draft, endpoint)?.time,
+      "period",
+      store.getSnapshot().options.hourCycle,
+    )}
+  bind:this={element}
+  >{#if children}{@render children()}{:else}<option>AM</option><option
+      >PM</option
+    >{/if}</select
+>

package/dist/svelte/Root.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">import{onMount,untrack,type Snippet}from"svelte";import{createPickerStore,type PickerStore,type PickerOptions,type PickerValue}from"../core/index.js";import{providePicker}from"./context";let{store:provided,options={},value=$bindable(),onValueChange,children}:{store?:PickerStore;options?:PickerOptions;value?:PickerValue;onValueChange?:(value:PickerValue)=>void;children:Snippet}=$props();const store=providePicker(untrack(()=>{if(!provided)return createPickerStore({...options,value:value===undefined?options.value:value});provided.setOptions(options);if(value!==undefined)provided.setValue(value);return provided}));$effect(()=>{if(value!==undefined)store.setValue(value)});$effect(()=>{store.setOptions(options)});onMount(()=>store.subscribeValue(next=>{value=next;onValueChange?.(next)}));</script>
+
+{@render children()}

package/dist/svelte/Segment.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import type{HTMLInputAttributes}from"svelte/elements";import{bindTimeSegment,pointFor,timeSegmentValue,type Endpoint,type TimeSegment}from"../core/index.js";import{usePickerStore}from"./context";let{part="hour",endpoint="start",...attributes}:HTMLInputAttributes&{part?:Exclude<TimeSegment,"period">;endpoint?:Endpoint}=$props();const store=usePickerStore();let element:HTMLInputElement;$effect(()=>{attributes.disabled;attributes.readonly;return bindTimeSegment(element,store,part,endpoint)});</script>
+
+<input
+  {...attributes}
+  value={attributes.value ??
+    timeSegmentValue(
+      pointFor(store.getSnapshot().draft, endpoint)?.time,
+      part,
+      store.getSnapshot().options.hourCycle,
+    )}
+  type="number"
+  data-part={part}
+  bind:this={element}
+/>

package/dist/svelte/Time.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import Segment from"./Segment.svelte";import Period from"./Period.svelte";import{usePicker}from"./context";import type{Endpoint,TimeSegment}from"../core/index.js";let{endpoint="start",labels={},...attributes}:{endpoint?:Endpoint;labels?:Partial<Record<TimeSegment,string>>;[key:string]:unknown}=$props();const state=usePicker();</script>
+
+<div class="sp-time" {...attributes}>
+  <label>{labels.hour ?? "Hours"}<Segment part="hour" {endpoint} /></label
+  ><label
+    >{labels.minute ?? "Minutes"}<Segment part="minute" {endpoint} /></label
+  >{#if $state.options.seconds}<label
+      >{labels.second ?? "Seconds"}<Segment part="second" {endpoint} /></label
+    >{/if}{#if $state.options.hourCycle === 12}<label
+      >{labels.period ?? "Period"}<Period {endpoint} /></label
+    >{/if}
+</div>

package/dist/svelte/TimeRoot.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">import Root from"./Root.svelte";import type{ComponentProps}from"svelte";let{options={},value=$bindable(),...props}:ComponentProps<typeof Root>=$props();</script>
+
+<Root {...props} bind:value options={{ ...options, kind: "time" }} />

package/dist/svelte/Week.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import type{HTMLAttributes}from"svelte/elements";import type{Snippet}from"svelte";let{children,...attributes}:HTMLAttributes<HTMLDivElement>&{children?:Snippet}=$props();</script>
+
+<div {...attributes} role="row" data-part="week">
+  {#if children}{@render children()}{/if}
+</div>

package/dist/svelte/Weekday.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import type{HTMLAttributes}from"svelte/elements";import type{Snippet}from"svelte";import{weekdayLabels}from"../core/index.js";import{usePicker}from"./context";let{day,children,...attributes}:HTMLAttributes<HTMLSpanElement>&{day:number;children?:Snippet}=$props();const state=usePicker();const label=$derived(weekdayLabels($state.options.locale,$state.options.weekStartsOn).find(d=>d.weekday===day)?.label);</script>
+
+<span
+  {...attributes}
+  role="columnheader"
+  data-part="weekday"
+  data-weekday={day}
+  data-weekend={$state.options.weekend.includes(day) ? "" : undefined}
+  >{#if children}{@render children()}{:else}{label}{/if}</span
+>

package/dist/svelte/YearSelect.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import type{HTMLSelectAttributes}from"svelte/elements";import type{Snippet}from"svelte";import{usePicker,usePickerStore}from"./context";let{from=1900,to=2100,children,...attributes}:HTMLSelectAttributes&{from?:number;to?:number;children?:Snippet}=$props();const store=usePickerStore(),state=usePicker();</script>
+
+<select
+  {...attributes}
+  disabled={attributes.disabled || $state.options.disabled}
+  value={$state.visibleMonth.year}
+  onchange={(event) => {
+    attributes.onchange?.(event);
+    if (!event.defaultPrevented)
+      store.setVisibleMonth({
+        ...$state.visibleMonth,
+        year: Number(event.currentTarget.value),
+      });
+  }}
+>
+  {#if children}{@render children()}{:else}{#each Array.from({ length: to - from + 1 }, (_, i) => from + i) as value}<option
+        {value}>{value}</option
+      >{/each}{/if}
+</select>

package/dist/svelte/context.ts

@@ -0,0 +1 @@
+import{getContext,setContext}from"svelte";import{readable}from"svelte/store";import type{PickerStore}from"../core/index.js";const key=Symbol("Salyra calendar");export function providePicker(store:PickerStore){setContext(key,store);return store}export function usePickerStore(){const store=getContext<PickerStore>(key);if(!store)throw new Error("Picker components require Root");return store}export function usePicker(){const store=usePickerStore();return readable(store.getSnapshot(),set=>store.subscribe(()=>set(store.getSnapshot())))}

package/dist/svelte/index.ts

@@ -0,0 +1 @@
+export*from"../core/index.js";export*from"./context";import Root from"./Root.svelte";import View from"./CalendarView.svelte";import Time from"./Time.svelte";import Grid from"./Grid.svelte";import Week from"./Week.svelte";import Cell from"./Cell.svelte";import Number from"./Number.svelte";import DayTrigger from"./DayTrigger.svelte";import Heading from"./Heading.svelte";import Weekday from"./Weekday.svelte";import Navigation from"./Navigation.svelte";import Field from"./Field.svelte";import Segment from"./Segment.svelte";import Period from"./Period.svelte";import MonthSelect from"./MonthSelect.svelte";import YearSelect from"./YearSelect.svelte";import Action from"./Action.svelte";export{Root,View,Time,Grid,Week,Cell,Number,DayTrigger,Heading,Weekday,Navigation,Field,Segment,Period,MonthSelect,YearSelect,Action};const parts={Continuous,Grid,Week,Cell,Number,DayTrigger,Heading,Weekday,Navigation,MonthSelect,YearSelect,Action};export const Calendar={Root,View,...parts};import DateRoot from"./DateRoot.svelte";import TimeRoot from"./TimeRoot.svelte";import DateTimeRoot from"./DateTimeRoot.svelte";import Continuous from"./Continuous.svelte";export{Continuous};export{DateRoot,TimeRoot,DateTimeRoot};

package/dist/vanilla/index.d.ts

@@ -0,0 +1,41 @@
+export * from "../core";
+import { type PickerStore, type PickerOptions, type Endpoint } from "../core";
+export declare function mountPicker(root: HTMLElement, options?: PickerOptions | PickerStore): {
+    store: {
+        getSnapshot: () => import(".").PickerSnapshot;
+        subscribe(fn: () => void): () => void;
+        subscribeValue(fn: (v: import(".").PickerValue) => void): () => void;
+        getMonth(offset?: number): import(".").CalendarMonth;
+        getDay(date: string): {
+            selected: boolean;
+            rangeStart: boolean;
+            rangeEnd: boolean;
+            inRange: boolean;
+            preview: boolean;
+            disabled: boolean;
+            today: boolean;
+            weekend: boolean;
+            focused: boolean;
+        };
+        setVisibleMonth(next: import(".").Month): void;
+        navigate(count: number): void;
+        focus(date: string): void;
+        moveFocus(key: string, shift?: boolean): boolean;
+        hover(date: string | null): void;
+        selectDate(date: string): boolean;
+        setDate(date: string, endpoint?: Endpoint): boolean;
+        setTime(time: string, endpoint?: Endpoint): boolean;
+        setDayOffset(offset: number, endpoint?: Endpoint): boolean;
+        setEndpoint(endpoint: Endpoint): void;
+        setValue(value: import(".").PickerValue): void;
+        apply(): boolean;
+        cancel(): void;
+        clear(): void;
+        setOpen(open: boolean): void;
+        setOptions(patch: Partial<PickerOptions>): void;
+        validate: () => string | null;
+        destroy(): void;
+        readonly cacheSize: number;
+    };
+    destroy(): void;
+};

package/dist/vanilla/index.js

@@ -0,0 +1 @@
+export*from"../core/index.js";import{bindCalendar as m,bindMonthScroller as b,bindDateField as g,bindTimeSegment as E,bindDayTrigger as v,createPickerStore as y,attribute as h,formatMonth as S,dayAttributes as k}from"../core/index.js";function T(o,c={}){let l="getSnapshot"in c,a=l?c:y(c),r=[],n=t=>[...o.querySelectorAll(t)].filter(e=>!e.parentElement?.closest("[data-picker-root]")||e.parentElement.closest("[data-picker-root]")===o);h(o,"data-picker-root",!0);for(let t of n("[data-continuous]"))r.push(b(t,a,JSON.parse(t.dataset.continuous??"{}")));for(let t of n("[data-calendar]"))r.push(m(t,a,JSON.parse(t.dataset.calendarOptions??"{}")));for(let t of n("[data-day-trigger]"))t.closest("[data-calendar]")||r.push(v(t,a,t.dataset.date));for(let t of n("[data-date-field]"))r.push(g(t,a,t.dataset.endpoint??"start"));for(let t of n("[data-time-segment]"))r.push(E(t,a,t.dataset.timeSegment,t.dataset.endpoint??"start"));let d=t=>{if(t.defaultPrevented)return;let e=t.target.closest("[data-picker-action]");if(!e||!o.contains(e)||e.closest("[data-picker-root]")!==o||a.getSnapshot().options.disabled)return;let s=e.dataset.pickerAction;try{s==="previous"?a.navigate(-1):s==="next"?a.navigate(1):s==="open"?a.setOpen(!0):(s==="cancel"||s==="apply"||s==="clear")&&a[s]()}catch(u){if(!(u instanceof RangeError))throw u}},f=t=>{let e=t.target;if(!(e.closest("[data-picker-root]")!==o||a.getSnapshot().options.disabled))try{e.hasAttribute("data-month-select")&&a.setVisibleMonth({...a.getSnapshot().visibleMonth,month:Number(e.value)}),e.hasAttribute("data-year-select")&&a.setVisibleMonth({...a.getSnapshot().visibleMonth,year:Number(e.value)}),e.hasAttribute("data-day-offset")&&a.setDayOffset(Number(e.value),e.dataset.endpoint??"end")}catch(i){if(!(i instanceof RangeError))throw i}},p=()=>{let t=a.getSnapshot();for(let e of n("[data-calendar-cell]"))for(let[i,s]of Object.entries(k(a,e.dataset.date,e.hasAttribute("data-outside"))))h(e,i,s);for(let e of n("[data-picker-output]"))e.textContent=JSON.stringify(t.value,null,2);for(let e of n("[data-picker-error]"))e.textContent=t.error??"",e.hidden=!t.error;for(let e of n("[data-month-heading]"))e.textContent=S(t.visibleMonth,t.options.locale);for(let e of n("[data-month-select]"))e.value=String(t.visibleMonth.month);for(let e of n("[data-year-select]"))e.value=String(t.visibleMonth.year);for(let e of n("[data-picker-action], [data-month-select], [data-year-select], [data-day-offset]"))e.disabled=!!t.options.disabled};return p(),r.push(a.subscribe(p)),o.addEventListener("click",d),o.addEventListener("change",f),{store:a,destroy(){r.forEach(t=>t()),o.removeEventListener("click",d),o.removeEventListener("change",f),l||a.destroy()}}}export{T as mountPicker};

package/dist/vue/Calendar.d.ts

@@ -0,0 +1,106 @@
+import { type PropType } from "vue";
+import { type CalendarRenderOptions } from "../core";
+export declare const CalendarView: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: PropType<CalendarRenderOptions>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: PropType<CalendarRenderOptions>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Grid: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Week: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Cell: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    date: {
+        type: StringConstructor;
+        required: true;
+    };
+    outside: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    date: {
+        type: StringConstructor;
+        required: true;
+    };
+    outside: BooleanConstructor;
+}>> & Readonly<{}>, {
+    outside: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const NumberLabel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    date: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    date: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const DayTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    date: {
+        type: StringConstructor;
+        required: true;
+    };
+    outside: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], "select", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    date: {
+        type: StringConstructor;
+        required: true;
+    };
+    outside: BooleanConstructor;
+}>> & Readonly<{
+    onSelect?: ((...args: any[]) => any) | undefined;
+}>, {
+    outside: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Heading: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    offset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Weekday: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    day: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    day: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Navigation: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    direction: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    direction: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/vue/Continuous.d.ts

@@ -0,0 +1,9 @@
+import { type PropType } from "vue";
+import { type MonthScrollerOptions } from "../core";
+export declare const Continuous: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: PropType<MonthScrollerOptions>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: PropType<MonthScrollerOptions>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;