@fluixi-ui/date-picker 0.3.0-alpha.12 → 0.3.0-alpha.14

package/dist/date-picker.d.ts

@@ -1,3 +1,4 @@
+import { type FxProp } from '@fluixi-ui/fx';
 import { type Accessor } from '@fluixi/reactive/signal';
 import { type Placement } from '@fluixi-ui/primitives';
 import type { DateValue, Granularity } from '@fluixi-ui/date-core';
@@ -56,19 +57,27 @@ export interface DatePickerProps {
  */
 export declare function DatePicker(props: DatePickerProps): ComponentChild;
 export interface DatePickerLabelProps extends HTMLAttributes<HTMLElement> {
+    /** Token-aware style object. See `@fluixi-ui/fx`. */
+    fx?: FxProp;
 }
 /** Field label; linked to the segmented input. */
 export declare function DatePickerLabel(props: DatePickerLabelProps): ComponentChild;
 export interface DatePickerFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** Token-aware style object. See `@fluixi-ui/fx`. */
+    fx?: FxProp;
 }
 /** The bordered control: the segmented date field plus the calendar trigger. */
 export declare function DatePickerField(props: DatePickerFieldProps): ComponentChild;
 export interface DatePickerTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Token-aware style object. See `@fluixi-ui/fx`. */
+    fx?: FxProp;
 }
 /** Toggles the calendar popover. */
 export declare function DatePickerTrigger(props: DatePickerTriggerProps): ComponentChild;
 export interface DatePickerContentProps extends HTMLAttributes<HTMLDivElement> {
     children?: ComponentChild;
+    /** Token-aware style object. See `@fluixi-ui/fx`. */
+    fx?: FxProp;
 }
 /**
  * The floating calendar panel. Renders a default calendar bound to the shared

package/dist/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../src/date-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../src/date-picker.tsx"],"names":[],"mappings":"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"}

package/dist/date-picker.js

@@ -1,11 +1,12 @@
-import { createSignal, createMemo, createEffect, createRenderEffect } from "@fluixi/reactive/signal";
 import { delegateEvents, createComponent, splitProps, createNativeElement, spread, mergeProps, insert, handleRef } from "@fluixi/dom";
+import { createSignal, createMemo, createEffect, createRenderEffect } from "@fluixi/reactive/signal";
+import { fxProps } from "@fluixi-ui/fx";
 import { useRef, Show } from "@fluixi/core";
 import { createSafeContext, createControllableSignal, createControllableBooleanSignal, createId, composeId, composeEventHandlers } from "@fluixi-ui/kit";
 import { Portal, createFloatingPosition, createDismissableLayer, createFocusScope } from "@fluixi-ui/primitives";
 import { DateField, DateInput } from "@fluixi-ui/date-field";
 import { Calendar, CalendarHeader, CalendarPrevButton, CalendarHeading, CalendarNextButton, CalendarGrid } from "@fluixi-ui/calendar";
-delegateEvents(["change", "click", "keydown"]);
+delegateEvents(["change", "keydown", "click"]);
 const [DatePickerProvider, useDatePickerContext] = createSafeContext("DatePicker");
 function DatePicker(props) {
   const [value, setValue] = createControllableSignal({
@@ -25,10 +26,7 @@ function DatePicker(props) {
     setValue,
     isOpen,
     setOpen: (o) => setOpen(o),
-    ids: {
-      label: composeId(baseId, "label"),
-      content: composeId(baseId, "content")
-    },
+    ids: { label: composeId(baseId, "label"), content: composeId(baseId, "content") },
     triggerRef,
     setTriggerRef,
     placement: props.placement ?? "bottom-start",
@@ -43,160 +41,119 @@ function DatePicker(props) {
     isDateUnavailable: props.isDateUnavailable,
     name: props.name
   };
-  return createMemo(() => createComponent(DatePickerProvider, {
-    get value() {
-      return ctx;
-    },
-    get children() {
-      return props.children;
-    }
-  }));
+  return createMemo(() => createComponent(DatePickerProvider, { get value() {
+    return ctx;
+  }, get children() {
+    return props.children;
+  } }));
 }
 function DatePickerLabel(props) {
   const ctx = useDatePickerContext();
-  const [local, others] = splitProps(props, ["children"]);
+  const [local, others] = splitProps(props, ["children", "fx", "style"]);
   return (() => {
     const _el$ = createNativeElement("span");
-    spread({
-      element: _el$,
-      props: mergeProps(others, {
-        id: () => ctx.ids.label,
-        "data-date-picker-label": ""
-      })
-    });
+    spread({ element: _el$, props: mergeProps(fxProps(
+      () => local.fx,
+      () => local.style
+    ), others, { id: () => ctx.ids.label, "data-date-picker-label": "" }) });
     insert(_el$, local.children);
     return _el$;
   })();
 }
 function DatePickerField(props) {
   const ctx = useDatePickerContext();
-  const [local, others] = splitProps(props, ["ref", "children"]);
+  const [local, others] = splitProps(props, ["ref", "children", "fx", "style"]);
   const setRef = (node) => {
     ctx.setTriggerRef(node);
     handleRef(local.ref, node);
   };
-  return createMemo(() => createComponent(DateField, {
-    get value() {
-      return ctx.value;
-    },
-    get onChange() {
-      return ctx.setValue;
-    },
-    get locale() {
-      return ctx.locale;
-    },
-    get granularity() {
-      return ctx.granularity;
-    },
-    get hourCycle() {
-      return ctx.hourCycle;
-    },
-    get minValue() {
-      return ctx.minValue;
-    },
-    get maxValue() {
-      return ctx.maxValue;
-    },
-    get isDisabled() {
-      return ctx.isDisabled;
-    },
-    get isReadOnly() {
-      return ctx.isReadOnly;
-    },
-    get name() {
-      return ctx.name;
-    },
-    get "data-date-picker"() {
-      return "";
-    },
-    get children() {
-      return (() => {
-        const _el$ = createNativeElement("div");
-        spread({
-          element: _el$,
-          props: mergeProps(others, {
-            ref: setRef,
-            "data-date-picker-control": ""
-          })
-        });
-        insert(_el$, createMemo(() => createComponent(DateInput, {
-          get "aria-labelledby"() {
-            return ctx.ids.label;
-          },
-          get "data-date-picker-input"() {
-            return "";
-          }
-        })), null);
-        insert(_el$, local.children ?? createMemo(() => createComponent(DatePickerTrigger, {})));
-        return _el$;
-      })();
-    }
-  }));
+  return createMemo(() => createComponent(DateField, { get value() {
+    return ctx.value;
+  }, get onChange() {
+    return ctx.setValue;
+  }, get locale() {
+    return ctx.locale;
+  }, get granularity() {
+    return ctx.granularity;
+  }, get hourCycle() {
+    return ctx.hourCycle;
+  }, get minValue() {
+    return ctx.minValue;
+  }, get maxValue() {
+    return ctx.maxValue;
+  }, get isDisabled() {
+    return ctx.isDisabled;
+  }, get isReadOnly() {
+    return ctx.isReadOnly;
+  }, get name() {
+    return ctx.name;
+  }, get "data-date-picker"() {
+    return "";
+  }, get children() {
+    return (() => {
+      const _el$ = createNativeElement("div");
+      spread({ element: _el$, props: mergeProps(fxProps(
+        () => local.fx,
+        () => local.style
+      ), others, { ref: setRef, "data-date-picker-control": "" }) });
+      insert(_el$, createMemo(() => createComponent(DateInput, { get "aria-labelledby"() {
+        return ctx.ids.label;
+      }, get "data-date-picker-input"() {
+        return "";
+      } })), null);
+      insert(_el$, local.children ?? createMemo(() => createComponent(DatePickerTrigger, {})));
+      return _el$;
+    })();
+  } }));
 }
 function DatePickerTrigger(props) {
   const ctx = useDatePickerContext();
-  const [local, others] = splitProps(props, ["onClick", "children"]);
+  const [local, others] = splitProps(props, ["onClick", "children", "fx", "style"]);
   return (() => {
     const _el$ = createNativeElement("button");
-    spread({
-      element: _el$,
-      props: mergeProps(others, {
-        type: "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": () => ctx.isOpen() ? "true" : "false",
-        "aria-controls": () => ctx.ids.content,
-        "aria-label": "Open calendar",
-        disabled: () => ctx.isDisabled(),
-        "data-date-picker-trigger": "",
-        onClick: composeEventHandlers([local.onClick, () => {
-          if (ctx.isDisabled() || ctx.isReadOnly()) return;
-          ctx.setOpen(!ctx.isOpen());
-        }])
-      })
-    });
+    spread({ element: _el$, props: mergeProps(fxProps(
+      () => local.fx,
+      () => local.style
+    ), others, { type: "button", "aria-haspopup": "dialog", "aria-expanded": (() => ctx.isOpen() ? "true" : "false"), "aria-controls": () => ctx.ids.content, "aria-label": "Open calendar", disabled: (() => ctx.isDisabled()), "data-date-picker-trigger": "", onClick: composeEventHandlers([
+      local.onClick,
+      () => {
+        if (ctx.isDisabled() || ctx.isReadOnly()) return;
+        ctx.setOpen(!ctx.isOpen());
+      }
+    ]) }) });
     insert(_el$, local.children ?? "📅");
     return _el$;
   })();
 }
 function DatePickerContent(props) {
   const ctx = useDatePickerContext();
-  const [local, others] = splitProps(props, ["ref", "children", "style"]);
+  const [local, others] = splitProps(props, ["ref", "children", "style", "fx", "style"]);
   const [element, setElement] = createSignal(void 0);
   const portalRef = useRef(null);
   createEffect(() => {
     if (!ctx.isOpen() && portalRef.current) portalRef.current.remove();
   });
-  return createMemo(() => createComponent(Show, {
-    get when() {
-      return ctx.isOpen();
-    },
-    get children() {
-      return createMemo(() => createComponent(Portal, {
-        get ref() {
-          return portalRef;
-        },
-        get children() {
-          return createMemo(() => createComponent(FloatingPanel, mergeProps(others, {
-            get setElement() {
-              return setElement;
-            },
-            get element() {
-              return element;
-            },
-            get forwardRef() {
-              return local.ref;
-            },
-            get style() {
-              return local.style;
-            },
-            get children() {
-              return local.children ?? createMemo(() => createComponent(DatePickerCalendar, {}));
-            }
-          })));
-        }
-      }));
-    }
-  }));
+  return createMemo(() => createComponent(Show, { get when() {
+    return ctx.isOpen();
+  }, get children() {
+    return createMemo(() => createComponent(Portal, { get ref() {
+      return portalRef;
+    }, get children() {
+      return createMemo(() => createComponent(FloatingPanel, mergeProps(others, { get setElement() {
+        return setElement;
+      }, get element() {
+        return element;
+      }, get forwardRef() {
+        return local.ref;
+      }, get fx() {
+        return local.fx;
+      }, get style() {
+        return local.style;
+      }, get children() {
+        return local.children ?? createMemo(() => createComponent(DatePickerCalendar, {}));
+      } })));
+    } }));
+  } }));
 }
 function FloatingPanel(props) {
   const ctx = useDatePickerContext();
@@ -211,11 +168,7 @@ function FloatingPanel(props) {
     },
     onDismiss: () => ctx.setOpen(false)
   });
-  createFocusScope(props.element, {
-    trap: false,
-    autoFocus: true,
-    restoreFocus: true
-  });
+  createFocusScope(props.element, { trap: false, autoFocus: true, restoreFocus: true });
   createRenderEffect(() => {
     const el = props.element();
     if (!el) return;
@@ -229,73 +182,48 @@ function FloatingPanel(props) {
   };
   return (() => {
     const _el$ = createNativeElement("div");
-    spread({
-      element: _el$,
-      props: {
-        ref: setRef,
-        role: "dialog",
-        id: () => ctx.ids.content,
-        "aria-label": "Calendar",
-        "data-date-picker-content": "",
-        "data-placement": () => position.placement(),
-        style: () => props.style,
-        tabindex: -1,
-        onKeyDown: (e) => {
-          if (e.key === "Escape") {
-            e.stopPropagation();
-            ctx.setOpen(false);
-            ctx.triggerRef()?.querySelector("[data-date-picker-trigger]")?.focus();
-          }
-        }
+    spread({ element: _el$, props: mergeProps(fxProps(
+      () => props.fx,
+      () => props.style
+    ), { ref: setRef, role: "dialog", id: () => ctx.ids.content, "aria-label": "Calendar", "data-date-picker-content": "", "data-placement": (() => position.placement()), tabindex: -1, onKeyDown: ((e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        ctx.setOpen(false);
+        ctx.triggerRef()?.querySelector("[data-date-picker-trigger]")?.focus();
       }
-    });
+    }) }) });
     insert(_el$, props.children);
     return _el$;
   })();
 }
 function DatePickerCalendar() {
   const ctx = useDatePickerContext();
-  return createMemo(() => createComponent(Calendar, {
-    get value() {
-      return ctx.value;
-    },
-    get onChange() {
-      return (v) => {
-        ctx.setValue(v);
-        ctx.setOpen(false);
-      };
-    },
-    get locale() {
-      return ctx.locale;
-    },
-    get minValue() {
-      return ctx.minValue;
-    },
-    get maxValue() {
-      return ctx.maxValue;
-    },
-    get isDateUnavailable() {
-      return ctx.isDateUnavailable;
-    },
-    get "data-date-picker-calendar"() {
-      return "";
-    },
-    get children() {
-      return [createMemo(() => createComponent(CalendarHeader, {
-        get children() {
-          return [createMemo(() => createComponent(CalendarPrevButton, {
-            get children() {
-              return "‹";
-            }
-          })), createMemo(() => createComponent(CalendarHeading, {})), createMemo(() => createComponent(CalendarNextButton, {
-            get children() {
-              return "›";
-            }
-          }))];
-        }
-      })), createMemo(() => createComponent(CalendarGrid, {}))];
-    }
-  }));
+  return createMemo(() => createComponent(Calendar, { get value() {
+    return ctx.value;
+  }, get onChange() {
+    return ((v) => {
+      ctx.setValue(v);
+      ctx.setOpen(false);
+    });
+  }, get locale() {
+    return ctx.locale;
+  }, get minValue() {
+    return ctx.minValue;
+  }, get maxValue() {
+    return ctx.maxValue;
+  }, get isDateUnavailable() {
+    return ctx.isDateUnavailable;
+  }, get "data-date-picker-calendar"() {
+    return "";
+  }, get children() {
+    return [createMemo(() => createComponent(CalendarHeader, { get children() {
+      return [createMemo(() => createComponent(CalendarPrevButton, { get children() {
+        return "‹";
+      } })), createMemo(() => createComponent(CalendarHeading, {})), createMemo(() => createComponent(CalendarNextButton, { get children() {
+        return "›";
+      } }))];
+    } })), createMemo(() => createComponent(CalendarGrid, {}))];
+  } }));
 }
 export {
   DatePicker,

package/dist/date-range-picker.d.ts

@@ -1,3 +1,4 @@
+import { type FxProp } from '@fluixi-ui/fx';
 import { type Accessor } from '@fluixi/reactive/signal';
 import { type Placement } from '@fluixi-ui/primitives';
 import type { DateRange, DateValue, Granularity } from '@fluixi-ui/date-core';
@@ -57,19 +58,27 @@ export interface DateRangePickerProps {
  */
 export declare function DateRangePicker(props: DateRangePickerProps): ComponentChild;
 export interface DateRangePickerLabelProps extends HTMLAttributes<HTMLElement> {
+    /** Token-aware style object. See `@fluixi-ui/fx`. */
+    fx?: FxProp;
 }
 /** Field label; linked to the range field group. */
 export declare function DateRangePickerLabel(props: DateRangePickerLabelProps): ComponentChild;
 export interface DateRangePickerFieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** Token-aware style object. See `@fluixi-ui/fx`. */
+    fx?: FxProp;
 }
 /** The bordered control: start field — end field, plus the calendar trigger. */
 export declare function DateRangePickerField(props: DateRangePickerFieldProps): ComponentChild;
 export interface DateRangePickerTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Token-aware style object. See `@fluixi-ui/fx`. */
+    fx?: FxProp;
 }
 /** Toggles the range-calendar popover. */
 export declare function DateRangePickerTrigger(props: DateRangePickerTriggerProps): ComponentChild;
 export interface DateRangePickerContentProps extends HTMLAttributes<HTMLDivElement> {
     children?: ComponentChild;
+    /** Token-aware style object. See `@fluixi-ui/fx`. */
+    fx?: FxProp;
 }
 /** The floating range-calendar panel; selecting a full range closes it. */
 export declare function DateRangePickerContent(props: DateRangePickerContentProps): ComponentChild;

package/dist/date-range-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../src/date-range-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../src/date-range-picker.tsx"],"names":[],"mappings":"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"}