kaleido-ui 0.2.7 → 0.2.8

package/dist/web/chunk-X7AOMP24.js

@@ -0,0 +1,235 @@
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-CRMLYZIX.js";
+import {
+  fieldSurface
+} from "./chunk-TKRMGN7J.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Event
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/date-picker.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pad = (n) => String(n).padStart(2, "0");
+var toIso = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+function parseIso(value) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value ?? "");
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return toIso(d) === value ? d : null;
+}
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Select a date",
+  min,
+  max,
+  disabled,
+  locale = "en-US",
+  weekStartsOn = 1,
+  id,
+  previousMonthLabel = "Previous month",
+  nextMonthLabel = "Next month",
+  clearLabel = "Clear",
+  todayLabel = "Today",
+  className,
+  ...rest
+}) {
+  const selected = parseIso(value);
+  const minDate = parseIso(min);
+  const maxDate = parseIso(max);
+  const [open, setOpen] = React.useState(false);
+  const [focused, setFocused] = React.useState(() => selected ?? /* @__PURE__ */ new Date());
+  const gridRef = React.useRef(null);
+  const wantFocus = React.useRef(false);
+  const inRange = (d) => !(minDate && d < minDate) && !(maxDate && d > maxDate);
+  const handleOpenChange = (next) => {
+    if (next) {
+      setFocused(selected ?? /* @__PURE__ */ new Date());
+      wantFocus.current = true;
+    }
+    setOpen(next);
+  };
+  React.useEffect(() => {
+    if (!open || !wantFocus.current) return;
+    gridRef.current?.querySelector('button[tabindex="0"]')?.focus();
+  }, [open, focused]);
+  const month = startOfMonth(focused);
+  const lead = (month.getDay() - weekStartsOn + 7) % 7;
+  const gridStart = addDays(month, -lead);
+  const days = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+  const rows = [0, 1, 2, 3, 4, 5].filter((r) => days.slice(r * 7, r * 7 + 7).some((d) => d.getMonth() === month.getMonth()));
+  const monthFmt = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" });
+  const weekdayLong = new Intl.DateTimeFormat(locale, { weekday: "long" });
+  const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  const dayFull = new Intl.DateTimeFormat(locale, { dateStyle: "full" });
+  const triggerFmt = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  const heads = Array.from({ length: 7 }, (_, i) => addDays(gridStart, i));
+  const move = (next) => {
+    wantFocus.current = true;
+    setFocused(next);
+  };
+  const shiftMonth = (delta) => {
+    const last = new Date(focused.getFullYear(), focused.getMonth() + delta + 1, 0).getDate();
+    move(new Date(focused.getFullYear(), focused.getMonth() + delta, Math.min(focused.getDate(), last)));
+  };
+  const choose = (d) => {
+    if (!inRange(d)) return;
+    onChange(toIso(d));
+    setOpen(false);
+  };
+  const onKeyDown = (event) => {
+    const step = {
+      ArrowLeft: () => addDays(focused, -1),
+      ArrowRight: () => addDays(focused, 1),
+      ArrowUp: () => addDays(focused, -7),
+      ArrowDown: () => addDays(focused, 7),
+      Home: () => addDays(focused, -((focused.getDay() - weekStartsOn + 7) % 7)),
+      End: () => addDays(focused, 6 - (focused.getDay() - weekStartsOn + 7) % 7)
+    };
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      shiftMonth(event.key === "PageUp" ? -1 : 1);
+      return;
+    }
+    const next = step[event.key]?.();
+    if (next) {
+      event.preventDefault();
+      move(next);
+    }
+  };
+  const todayIso = toIso(/* @__PURE__ */ new Date());
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id,
+        disabled,
+        "aria-label": rest["aria-label"],
+        "data-slot": "date-picker-trigger",
+        className: cn(
+          "flex h-12 w-full items-center justify-between gap-3 px-4 py-3 text-left text-body",
+          fieldSurface,
+          !selected && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: selected ? triggerFmt.format(selected) : placeholder }),
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: Event, "aria-hidden": "true", className: "shrink-0 text-secondary-content" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: "start",
+        className: "w-auto p-3",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsxs("div", { "data-slot": "date-picker", className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx(GlyphButton, { size: "sm", icon: ChevronLeft, label: previousMonthLabel, onClick: () => shiftMonth(-1) }),
+            /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "m-0 text-caption font-semibold text-foreground", children: monthFmt.format(month) }),
+            /* @__PURE__ */ jsx(GlyphButton, { size: "sm", icon: ChevronRight, label: nextMonthLabel, onClick: () => shiftMonth(1) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: gridRef,
+              role: "grid",
+              "aria-label": monthFmt.format(month),
+              onKeyDown,
+              className: "flex flex-col gap-1",
+              children: [
+                /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: heads.map((d) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "columnheader",
+                    "aria-label": weekdayLong.format(d),
+                    className: "py-1 text-center text-mini font-medium uppercase tracking-eyebrow text-muted-foreground",
+                    children: weekdayShort.format(d).slice(0, 2)
+                  },
+                  d.getDay()
+                )) }),
+                rows.map((r) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-1", children: days.slice(r * 7, r * 7 + 7).map((d) => {
+                  const iso = toIso(d);
+                  const outside = d.getMonth() !== month.getMonth();
+                  const isSelected = iso === value;
+                  const isFocused = iso === toIso(focused);
+                  const enabled = inRange(d);
+                  return /* @__PURE__ */ jsx("span", { role: "gridcell", "aria-selected": isSelected, children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: isFocused ? 0 : -1,
+                      disabled: !enabled,
+                      "aria-label": dayFull.format(d),
+                      "aria-current": iso === todayIso ? "date" : void 0,
+                      "data-date": iso,
+                      onClick: () => choose(d),
+                      className: cn(
+                        "size-9 rounded-xl text-caption tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-30",
+                        isSelected ? "bg-primary font-semibold text-primary-foreground shadow-button-primary" : cn(
+                          "hover:bg-foreground/10",
+                          outside ? "text-foreground/55" : "text-foreground",
+                          iso === todayIso && "font-semibold text-brand"
+                        )
+                      ),
+                      children: d.getDate()
+                    }
+                  ) }, iso);
+                }) }, r))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !selected,
+                onClick: () => {
+                  onChange("");
+                  setOpen(false);
+                },
+                className: "rounded-lg px-2 py-1 text-caption font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:opacity-40",
+                children: clearLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !inRange(parseIso(todayIso)),
+                onClick: () => choose(parseIso(todayIso)),
+                className: "rounded-lg px-2 py-1 text-caption font-medium text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:opacity-40",
+                children: todayLabel
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  DatePicker
+};

package/dist/web/components/activity-list.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   ActivityList
-} from "../chunk-S2ICIIH2.js";
+} from "../chunk-STH4BGSE.js";
+import "../chunk-2NCH2ZDU.js";
 import "../chunk-AP7Q2FCS.js";
 import "../chunk-GZZ5KVON.js";
-import "../chunk-2NCH2ZDU.js";
 import "../chunk-UZ4LWR4X.js";
 import "../chunk-A3XHFJ6J.js";
 import "../chunk-CZPNI33A.js";

package/dist/web/components/charts/bar-chart.js

@@ -5,8 +5,8 @@ import {
 import "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/charts/bar-list.js

@@ -5,8 +5,8 @@ import {
 import "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/charts/core.js

@@ -27,8 +27,8 @@ import {
 } from "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/charts/donut-chart.js

@@ -6,8 +6,8 @@ import {
 import "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/charts/index.js

@@ -1,15 +1,5 @@
 "use client";
 import "../../chunk-LOGZGZWN.js";
-import {
-  Sparkline
-} from "../../chunk-HP25HN7Q.js";
-import {
-  BarList
-} from "../../chunk-C7GGZCRO.js";
-import {
-  DonutChart,
-  foldSegments
-} from "../../chunk-E3YQSYXF.js";
 import {
   AreaChart,
   LineChart
@@ -23,9 +13,19 @@ import {
 import {
   ScatterChart
 } from "../../chunk-2OINBKHY.js";
+import {
+  Sparkline
+} from "../../chunk-HP25HN7Q.js";
 import {
   BarChart
 } from "../../chunk-UG3GFYTP.js";
+import {
+  BarList
+} from "../../chunk-C7GGZCRO.js";
+import {
+  DonutChart,
+  foldSegments
+} from "../../chunk-E3YQSYXF.js";
 import {
   ChartFrame,
   ChartLegend,
@@ -37,8 +37,8 @@ import {
 } from "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/charts/line-chart.js

@@ -6,8 +6,8 @@ import {
 import "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/charts/meter.js

@@ -5,8 +5,8 @@ import {
 import "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/charts/mixed-chart.js

@@ -5,8 +5,8 @@ import {
 import "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/charts/scatter-chart.js

@@ -5,8 +5,8 @@ import {
 import "../../chunk-IJHTXDKP.js";
 import "../../chunk-TCFHH5TE.js";
 import "../../chunk-UHXOPILM.js";
-import "../../chunk-CRMLYZIX.js";
 import "../../chunk-HVKSBEZN.js";
+import "../../chunk-CRMLYZIX.js";
 import "../../chunk-VM6AGMYO.js";
 import "../../chunk-CBE7BT3M.js";
 import "../../chunk-DCUAE6PX.js";

package/dist/web/components/date-picker.js

@@ -0,0 +1,14 @@
+"use client";
+import {
+  DatePicker
+} from "../chunk-X7AOMP24.js";
+import "../chunk-CRMLYZIX.js";
+import "../chunk-TKRMGN7J.js";
+import "../chunk-JY3H7ZAI.js";
+import "../chunk-OWSKP527.js";
+import "../chunk-YQQ7GDLZ.js";
+import "../chunk-XXH4TYKZ.js";
+import "../chunk-PMGIJMRO.js";
+export {
+  DatePicker
+};

package/dist/web/components/trend-chart.js

@@ -7,8 +7,8 @@ import {
 import "../chunk-IJHTXDKP.js";
 import "../chunk-TCFHH5TE.js";
 import "../chunk-UHXOPILM.js";
-import "../chunk-CRMLYZIX.js";
 import "../chunk-HVKSBEZN.js";
+import "../chunk-CRMLYZIX.js";
 import "../chunk-VM6AGMYO.js";
 import "../chunk-CBE7BT3M.js";
 import "../chunk-DCUAE6PX.js";