@memobit/libs 3.0.0 → 3.1.0

package/dist/components/ThemeSettings/ThemeSettings2.js

@@ -0,0 +1,245 @@
+import './ThemeSettings.css';
+import { useTheme as H } from "./useTheme.js";
+import { Checkbox as Q } from "../Checkbox/Checkbox2.js";
+import { Dropdown as V } from "../Dropdown/Dropdown2.js";
+import { InputSearch as W } from "../InputSearch/InputSearch2.js";
+import { Drawer as K } from "../Drawer/Drawer2.js";
+import { FAVORITE_THEMES as L, THEME_CONFIGS as U, getThemeAppearance as B } from "./themeConfig.js";
+import { ToggleSwitch as k } from "../ToggleSwitch/ToggleSwitch2.js";
+/* empty css              */
+import { useEffect as x, useMemo as J, useRef as R, useState as v } from "react";
+import { Fragment as X, jsx as t, jsxs as a } from "react/jsx-runtime";
+import { previewPalettes as Y } from "@memobit/themes";
+var Z = [
+  {
+    value: "all",
+    label: "All"
+  },
+  {
+    value: "light",
+    label: "Light"
+  },
+  {
+    value: "dark",
+    label: "Dark"
+  }
+], de = ({ isOpen: r, onClose: g, allowedThemes: d, currentApp: o, showEffects: I = !0, showSearch: w = !0, showFavorites: b = !0, showAppearanceFilter: P = !0 }) => {
+  const { theme: f, effects: n, setPreviewTheme: $, setPreviewEffects: N, commitPreview: M, clearPreview: D } = H(), O = ["Card", "Modal"], j = [
+    {
+      label: "None",
+      value: ""
+    },
+    {
+      label: "Note Container",
+      value: "note-container-effect"
+    },
+    {
+      label: "Infuse",
+      value: "infuse-effect"
+    },
+    {
+      label: "Up Lift",
+      value: "up-lift-effect"
+    },
+    {
+      label: "Glow",
+      value: "glow-effect"
+    }
+  ], [i, C] = v(""), [m, y] = v(!1), [h, S] = v(!1), [c, F] = v("all"), E = R(null), p = R(!1), _ = o?.trim().toLowerCase() ?? "", T = J(() => {
+    let e = U;
+    if (d && d.length > 0) {
+      const s = new Set(d);
+      e = e.filter((l) => s.has(l.value));
+    }
+    if (m && (e = e.filter((s) => L.has(s.value))), h && _ && (e = e.filter((s) => (s.recommendedApps ?? []).some((l) => l.toLowerCase() === _))), c !== "all" && (e = e.filter((s) => B(s.value) === c)), i.trim()) {
+      const s = i.toLowerCase().trim();
+      e = e.filter((l) => l.label.toLowerCase().includes(s) || (l.recommendedApps ?? []).some((u) => u.toLowerCase().includes(s)));
+    }
+    return e;
+  }, [
+    i,
+    m,
+    h,
+    _,
+    c,
+    d
+  ]);
+  x(() => {
+    r ? (C(""), y(!1), S(!1), F("all")) : p.current = !1;
+  }, [r]), x(() => {
+    if (!r || i || m || h || c !== "all" || p.current) return;
+    const e = window.requestAnimationFrame(() => {
+      E.current?.scrollIntoView({
+        block: "center",
+        inline: "nearest"
+      }), p.current = !0;
+    });
+    return () => window.cancelAnimationFrame(e);
+  }, [
+    r,
+    i,
+    m,
+    h,
+    c,
+    f
+  ]);
+  const q = (e) => {
+    $(e);
+  }, z = (e) => {
+    const s = !e || Array.isArray(e) ? "" : e.value;
+    N({
+      effect: s,
+      components: n.components
+    });
+  }, G = (e, s) => {
+    const l = s ? [...n.components, e] : n.components.filter((u) => u !== e);
+    N({
+      effect: n.effect,
+      components: l
+    });
+  }, A = () => {
+    D(), g();
+  };
+  return /* @__PURE__ */ t(K, {
+    isOpen: r,
+    onClose: A,
+    title: "Theme Settings",
+    position: "right",
+    width: "520px",
+    maxWidth: "calc(100vw - 32px)",
+    className: "theme-settings-drawer",
+    secondary: {
+      text: "Cancel",
+      variant: "default",
+      onClick: A,
+      icon: "clear"
+    },
+    primary: {
+      text: "Save changes",
+      variant: "success",
+      onClick: () => {
+        M(), g();
+      },
+      icon: "save"
+    },
+    children: /* @__PURE__ */ t("div", {
+      className: "theme-settings",
+      children: /* @__PURE__ */ a("div", {
+        className: "theme-settings__content",
+        children: [/* @__PURE__ */ a("div", {
+          className: "theme-settings__section",
+          children: [
+            /* @__PURE__ */ t("label", { children: "Select Theme" }),
+            (w || b || o) && /* @__PURE__ */ a("div", {
+              className: "theme-settings__toolbar",
+              children: [
+                w && /* @__PURE__ */ t(W, {
+                  placeholder: "Search themes...",
+                  value: i,
+                  onChange: C
+                }),
+                o && /* @__PURE__ */ t(k, {
+                  checked: h,
+                  onChange: S,
+                  onLabel: `For ${o}`,
+                  offLabel: `For ${o}`,
+                  size: "small"
+                }),
+                b && /* @__PURE__ */ t(k, {
+                  checked: m,
+                  onChange: y,
+                  onLabel: "Favorites",
+                  offLabel: "Favorites",
+                  size: "small"
+                })
+              ]
+            }),
+            P && /* @__PURE__ */ t("div", {
+              className: "theme-settings__appearance",
+              children: Z.map((e) => /* @__PURE__ */ t("button", {
+                type: "button",
+                className: `theme-settings__appearance-option ${c === e.value ? "theme-settings__appearance-option--active" : ""}`,
+                onClick: () => F(e.value),
+                children: e.label
+              }, e.value))
+            }),
+            /* @__PURE__ */ t("div", {
+              className: "theme-settings__grid",
+              children: T.length === 0 ? /* @__PURE__ */ t("div", {
+                className: "theme-settings__empty",
+                children: "No themes found"
+              }) : T.map((e) => /* @__PURE__ */ a("button", {
+                ref: f === e.value ? E : null,
+                type: "button",
+                className: `theme-settings__swatch ${f === e.value ? "theme-settings__swatch--active" : ""}`,
+                onClick: () => q(e.value),
+                children: [/* @__PURE__ */ a("div", {
+                  className: "theme-settings__preview",
+                  style: Y[e.value],
+                  children: [
+                    L.has(e.value) && /* @__PURE__ */ t("span", {
+                      className: "theme-settings__favorite-badge",
+                      children: "⭐"
+                    }),
+                    /* @__PURE__ */ t("div", { className: "theme-settings__preview-header" }),
+                    /* @__PURE__ */ a("div", {
+                      className: "theme-settings__preview-body",
+                      children: [/* @__PURE__ */ a("div", {
+                        className: "theme-settings__preview-card",
+                        children: [
+                          /* @__PURE__ */ t("div", { className: "theme-settings__preview-line theme-settings__preview-line--accent" }),
+                          /* @__PURE__ */ t("div", { className: "theme-settings__preview-line" }),
+                          /* @__PURE__ */ t("div", { className: "theme-settings__preview-line theme-settings__preview-line--short" })
+                        ]
+                      }), /* @__PURE__ */ a("div", {
+                        className: "theme-settings__preview-sidebar",
+                        children: [
+                          /* @__PURE__ */ t("div", { className: "theme-settings__preview-dot" }),
+                          /* @__PURE__ */ t("div", { className: "theme-settings__preview-dot" }),
+                          /* @__PURE__ */ t("div", { className: "theme-settings__preview-dot" })
+                        ]
+                      })]
+                    })
+                  ]
+                }), /* @__PURE__ */ t("div", {
+                  className: "theme-settings__swatch-meta",
+                  children: /* @__PURE__ */ t("span", {
+                    className: "theme-settings__swatch-label",
+                    children: e.label
+                  })
+                })]
+              }, e.value))
+            })
+          ]
+        }), I && /* @__PURE__ */ a(X, { children: [/* @__PURE__ */ a("div", {
+          className: "theme-settings__section",
+          children: [/* @__PURE__ */ t("label", {
+            htmlFor: "effect-selector",
+            children: "Component Effect"
+          }), /* @__PURE__ */ t(V, {
+            id: "effect-selector",
+            name: "effect",
+            options: j,
+            value: n.effect,
+            onChange: z,
+            placeholder: "Choose an effect"
+          })]
+        }), /* @__PURE__ */ a("div", {
+          className: "theme-settings__section",
+          children: [/* @__PURE__ */ t("label", { children: "Apply Effect To:" }), /* @__PURE__ */ t("div", {
+            className: "theme-settings__components",
+            children: O.map((e) => /* @__PURE__ */ t(Q, {
+              label: e,
+              checked: n.components.includes(e),
+              onChange: (s) => G(e, s),
+              disabled: !n.effect
+            }, e))
+          })]
+        })] })]
+      })
+    })
+  });
+};
+export {
+  de as ThemeSettings
+};

package/dist/components/ThemeSettings/themeConfig.js

@@ -0,0 +1,7 @@
+import { FAVORITE_THEMES as E, THEME_CONFIGS as T, getThemeAppearance as m, getThemeConfig as o } from "@memobit/themes";
+export {
+  E as FAVORITE_THEMES,
+  T as THEME_CONFIGS,
+  m as getThemeAppearance,
+  o as getThemeConfig
+};

package/dist/components/ThemeSettings/useTheme.js

@@ -0,0 +1,10 @@
+import { ThemeContext as r } from "./ThemeContextValue.js";
+import { useContext as t } from "react";
+var i = () => {
+  const e = t(r);
+  if (e === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+  return e;
+};
+export {
+  i as useTheme
+};

package/dist/components/TimePicker/TimePicker.css

@@ -0,0 +1 @@
+:root{--radius-sm:4px;--radius:8px;--radius-full:9999px;--checkbox-size:18px;--radio-size:18px;--body-background-glow:none;--spacing-1:1px;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-12:12px;--spacing-16:16px;--spacing-20:20px;--spacing-24:24px;--spacing-32:32px;--spacing-40:40px;--spacing-48:48px;--spacing-60:60px;--spacing-64:64px;--spacing-80:80px;--spacing-100:100px;--spacing-200:200px;--spacing-300:300px;--spacing-400:400px;--font-size-xxs:.625rem;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-xxl:2rem;--font-size-xxxl:3rem;--font-family-display:var(--font-family,sans-serif);--font-family-mono:ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;--form-control-font-family:var(--font-family,sans-serif);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-none:1;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-loose:1.8;--duration-hover:.2s;--duration-fade:.3s;--duration-slide:.4s;--transition-fast:.15s ease-in-out;--transition-moderate:.3s ease-in-out;--transition-slow:.5s ease-in-out}.time-picker{gap:var(--spacing-8);flex-direction:column;display:flex}.time-picker__header{justify-content:space-between;align-items:center;gap:var(--spacing-8);display:flex}.time-picker--with-clock .time-picker__fields{justify-content:center}.time-picker__label{color:var(--calendar-header-color);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.time-picker__clock-toggle{border:var(--spacing-1) solid var(--calendar-border-color);border-radius:var(--radius-sm);color:var(--calendar-day-color);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-4) var(--spacing-6);transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);background-color:#0000;justify-content:center;align-items:center;line-height:1;display:flex}.time-picker__clock-toggle:hover:not(:disabled){border-color:var(--calendar-day-selected-background-color)}.time-picker__clock-toggle--active{background-color:var(--calendar-day-selected-background-color);border-color:var(--calendar-day-selected-background-color);color:var(--calendar-day-selected-color)}.time-picker__clock-toggle:disabled{cursor:not-allowed;opacity:.5}.time-picker__fields{align-items:center;gap:var(--spacing-6);display:flex}.time-picker__separator{color:var(--calendar-day-disabled-color);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}.time-picker__period{background-color:var(--datepicker-input-background-color);border:var(--spacing-1) solid var(--calendar-border-color);border-radius:var(--radius-sm);color:var(--calendar-day-color);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-left:var(--spacing-2);padding:var(--spacing-8) var(--spacing-12);transition:background-color var(--transition-fast), border-color var(--transition-fast)}.time-picker__period:hover:not(:disabled){background-color:var(--calendar-day-hover-background-color);border-color:var(--calendar-day-selected-background-color)}.time-picker__period:disabled{cursor:not-allowed;opacity:.5}.time-spinner{background-color:var(--datepicker-input-background-color);border:var(--spacing-1) solid var(--calendar-border-color);border-radius:var(--radius-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);align-items:stretch;display:flex;overflow:hidden}.time-spinner:hover:not(.time-spinner--disabled),.time-spinner--active,.time-spinner:focus-within{border-color:var(--calendar-day-selected-background-color)}.time-spinner--disabled{cursor:not-allowed;opacity:.5}.time-spinner__input{color:var(--calendar-day-color);font-family:inherit;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);font-variant-numeric:tabular-nums;padding:var(--spacing-8) var(--spacing-4) var(--spacing-8) var(--spacing-8);text-align:center;width:var(--spacing-40);background-color:#0000;border:none}.time-spinner__input:focus{outline:none}.time-spinner__input:disabled{cursor:not-allowed}.time-spinner__steppers{border-left:var(--spacing-1) solid var(--calendar-border-color);flex-direction:column;display:flex}.time-spinner__step{color:var(--calendar-day-color);cursor:pointer;font-size:var(--font-size-xs);padding:0 var(--spacing-4);transition:background-color var(--transition-fast), color var(--transition-fast);background-color:#0000;border:none;flex:1;justify-content:center;align-items:center;line-height:0;display:flex}.time-spinner__step:first-child{border-bottom:var(--spacing-1) solid var(--calendar-border-color)}.time-spinner__step:hover:not(:disabled){background-color:var(--calendar-day-selected-background-color);color:var(--calendar-day-selected-color)}.time-spinner__step:disabled{cursor:not-allowed}

package/dist/components/TimePicker/TimePicker2.js

@@ -0,0 +1,118 @@
+import './TimePicker.css';
+import { Icon as $ } from "../Icon/Icon2.js";
+import { AnalogClock as w } from "../AnalogClock/AnalogClock2.js";
+import { TimeSpinner as l } from "./TimeSpinner.js";
+/* empty css           */
+import { useState as x } from "react";
+import { Fragment as j, jsx as s, jsxs as h } from "react/jsx-runtime";
+var S = ({ className: M = "", clockSize: F = 208, collapsibleClock: k = !0, disabled: o = !1, format: c = "24h", label: a = "Time", minuteStep: u = 1, onChange: i, value: e, withClock: d = !1, withSeconds: _ = !1 }) => {
+  const [r, n] = x("hours"), [m, H] = x(!0), p = e.hours >= 12, g = d && (!k || m), N = d && k, P = !!a || N, C = (t) => {
+    if (c === "12h") {
+      const f = t % 12;
+      i({
+        ...e,
+        hours: p ? f + 12 : f
+      });
+      return;
+    }
+    i({
+      ...e,
+      hours: t
+    });
+  }, T = () => {
+    i({
+      ...e,
+      hours: p ? e.hours % 12 : e.hours % 12 + 12
+    });
+  };
+  return /* @__PURE__ */ h("div", {
+    className: `time-picker${g ? " time-picker--with-clock" : ""} ${M}`.trim(),
+    children: [
+      P && /* @__PURE__ */ h("div", {
+        className: "time-picker__header",
+        children: [a && /* @__PURE__ */ s("span", {
+          className: "time-picker__label",
+          children: a
+        }), N && /* @__PURE__ */ s("button", {
+          className: `time-picker__clock-toggle${m ? " time-picker__clock-toggle--active" : ""}`,
+          disabled: o,
+          onClick: () => H(!m),
+          title: m ? "Hide clock" : "Pick on a clock",
+          type: "button",
+          children: /* @__PURE__ */ s($, { name: "time" })
+        })]
+      }),
+      /* @__PURE__ */ h("div", {
+        className: "time-picker__fields",
+        children: [
+          /* @__PURE__ */ s(l, {
+            active: r === "hours",
+            disabled: o,
+            max: c === "12h" ? 12 : 23,
+            min: c === "12h" ? 1 : 0,
+            onChange: C,
+            onFocus: () => n("hours"),
+            title: "Hours",
+            value: c === "12h" ? e.hours % 12 || 12 : e.hours
+          }),
+          /* @__PURE__ */ s("span", {
+            className: "time-picker__separator",
+            children: ":"
+          }),
+          /* @__PURE__ */ s(l, {
+            active: r === "minutes",
+            disabled: o,
+            max: 59,
+            min: 0,
+            onChange: (t) => i({
+              ...e,
+              minutes: t
+            }),
+            onFocus: () => n("minutes"),
+            step: u,
+            title: "Minutes",
+            value: e.minutes
+          }),
+          _ && /* @__PURE__ */ h(j, { children: [/* @__PURE__ */ s("span", {
+            className: "time-picker__separator",
+            children: ":"
+          }), /* @__PURE__ */ s(l, {
+            active: r === "seconds",
+            disabled: o,
+            max: 59,
+            min: 0,
+            onChange: (t) => i({
+              ...e,
+              seconds: t
+            }),
+            onFocus: () => n("seconds"),
+            title: "Seconds",
+            value: e.seconds
+          })] }),
+          c === "12h" && /* @__PURE__ */ s("button", {
+            className: "time-picker__period",
+            disabled: o,
+            onClick: T,
+            type: "button",
+            children: p ? "PM" : "AM"
+          })
+        ]
+      }),
+      g && /* @__PURE__ */ s(w, {
+        disabled: o,
+        format: c,
+        minuteStep: u,
+        mode: r,
+        onChange: i,
+        onModeChange: n,
+        showHeader: !1,
+        size: F,
+        value: e,
+        withSeconds: _
+      })
+    ]
+  });
+};
+export {
+  S as TimePicker
+};

package/dist/components/TimePicker/TimeSpinner.js

@@ -0,0 +1,59 @@
+import { Icon as d } from "../Icon/Icon2.js";
+import { useState as D } from "react";
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+var _ = (o) => o.toString().padStart(2, "0"), B = ({ active: o, disabled: n, max: p, min: r, onChange: c, onFocus: h, step: v = 1, title: w, value: m }) => {
+  const [i, u] = D(void 0), y = (e) => {
+    const t = p - r + 1;
+    return ((e - r) % t + t) % t + r;
+  }, s = (e) => {
+    n || (u(void 0), c(y(m + e * v)));
+  };
+  return /* @__PURE__ */ f("div", {
+    className: `time-spinner${o ? " time-spinner--active" : ""}${n ? " time-spinner--disabled" : ""}`,
+    children: [/* @__PURE__ */ a("input", {
+      className: "time-spinner__input",
+      disabled: n,
+      inputMode: "numeric",
+      onBlur: () => {
+        i !== void 0 && i !== "" && c(Math.min(Math.max(Number(i), r), p)), u(void 0);
+      },
+      onChange: (e) => {
+        const t = e.target.value.replace(/\D/g, "").slice(-2);
+        if (u(t), t === "") return;
+        const l = Number(t);
+        l >= r && l <= p && c(l);
+      },
+      onFocus: h,
+      onKeyDown: (e) => {
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), s(1);
+          return;
+        }
+        e.key === "ArrowDown" && (e.preventDefault(), s(-1));
+      },
+      title: w,
+      type: "text",
+      value: i ?? _(m)
+    }), /* @__PURE__ */ f("span", {
+      className: "time-spinner__steppers",
+      children: [/* @__PURE__ */ a("button", {
+        className: "time-spinner__step",
+        disabled: n,
+        onClick: () => s(1),
+        tabIndex: -1,
+        type: "button",
+        children: /* @__PURE__ */ a(d, { name: "caret-up" })
+      }), /* @__PURE__ */ a("button", {
+        className: "time-spinner__step",
+        disabled: n,
+        onClick: () => s(-1),
+        tabIndex: -1,
+        type: "button",
+        children: /* @__PURE__ */ a(d, { name: "caret-down" })
+      })]
+    })]
+  });
+};
+export {
+  B as TimeSpinner
+};

package/dist/components/Timeline/Timeline.css

@@ -0,0 +1 @@
+.timeline{--item-index:0;margin:0;padding:0;list-style:none;display:flex;position:relative}.timeline--vertical{flex-direction:column;gap:0}.timeline--vertical .timeline__item{gap:0 var(--spacing-16);grid-template-columns:28px 1fr;display:grid;position:relative}.timeline--vertical .timeline__node{flex-direction:column;align-items:center;width:28px;display:flex}.timeline--vertical .timeline__connector{background:linear-gradient(to bottom, var(--border-color) 0%, transparent 100%);width:2px;margin-top:var(--spacing-4);min-height:var(--spacing-20);flex:1}.timeline--vertical .timeline__content{padding-bottom:var(--spacing-24)}.timeline--horizontal{padding-bottom:var(--spacing-8);flex-direction:row;align-items:flex-start;gap:0;overflow-x:auto}.timeline--horizontal .timeline__item{flex-direction:column;flex:1;align-items:center;min-width:120px;display:flex;position:relative}.timeline--horizontal .timeline__node{width:100%;margin-bottom:var(--spacing-12);flex-direction:row;align-items:center;display:flex}.timeline--horizontal .timeline__connector{background:linear-gradient(to right, var(--border-color) 0%, transparent 100%);height:2px;margin-left:var(--spacing-4);flex:1}.timeline--horizontal .timeline__content{text-align:center;padding:0 var(--spacing-8)}.timeline--horizontal .timeline__header{align-items:center;gap:var(--spacing-4);flex-direction:column}.timeline--horizontal .timeline__timestamp{text-align:center;display:block}.timeline--sm .timeline__dot{width:10px;height:10px}.timeline--sm .timeline__title,.timeline--sm .timeline__description{font-size:var(--font-size-xs)}.timeline--sm.timeline--horizontal .timeline__item{min-width:90px}.timeline--md .timeline__dot{width:14px;height:14px}.timeline--md .timeline__title,.timeline--md .timeline__description{font-size:var(--font-size-sm)}.timeline--md.timeline--horizontal .timeline__item{min-width:120px}.timeline--lg .timeline__dot{width:18px;height:18px}.timeline--lg .timeline__title,.timeline--lg .timeline__description{font-size:var(--font-size-md)}.timeline--lg.timeline--horizontal .timeline__item{min-width:160px}.timeline__item{transition:opacity var(--transition-moderate)}.timeline__item--active .timeline__title{color:var(--body-accent-color);font-weight:var(--font-weight-semibold)}.timeline__item--muted{opacity:.45}.timeline__dot{border-radius:var(--radius-full);border:2px solid var(--border-color);background:var(--card-background-color);z-index:1;transition:box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.timeline__dot--default{background:var(--card-background-color);border-color:var(--border-color)}.timeline__dot--info{background:var(--button-info-background-color);border-color:var(--button-info-border-color);box-shadow:0 0 0 3px #60a5fa66}.timeline__dot--success{background:var(--button-success-background-color);border-color:var(--button-success-border-color);box-shadow:0 0 0 3px #34d39966}.timeline__dot--warning{background:var(--button-warning-background-color);border-color:var(--button-warning-border-color);box-shadow:0 0 0 3px #fbbf2466}.timeline__dot--danger{background:var(--button-danger-background-color);border-color:var(--button-danger-border-color);box-shadow:0 0 0 3px #f8717166}.timeline__dot-icon{color:#fff;justify-content:center;align-items:center;font-size:.6em;line-height:1;display:flex}.timeline__connector{transition:background var(--transition-moderate)}.timeline__content{gap:var(--spacing-4);flex-direction:column;display:flex}.timeline__header{align-items:center;gap:var(--spacing-8);flex-wrap:wrap;display:flex}.timeline__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--body-color);line-height:var(--line-height-tight);transition:color var(--transition-fast)}.timeline__description{font-size:var(--font-size-sm);color:var(--body-color-muted);line-height:var(--line-height-normal);margin:0}.timeline__timestamp{font-size:var(--font-size-xs);color:var(--body-color-muted);font-weight:var(--font-weight-light);letter-spacing:.02em}.timeline__badge{padding:1px var(--spacing-8);border-radius:var(--radius-full);font-size:var(--font-size-xxs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase;align-items:center;display:inline-flex}.timeline__badge--default{background:var(--card-background-color);color:var(--body-color-muted)}.timeline__badge--info{color:#93c5fd;background:#3b82f633}.timeline__badge--success{color:#34d399;background:#10b98126}.timeline__badge--warning{color:#fbbf24;background:#f59e0b26}.timeline__badge--danger{color:#f87171;background:#ef444426}.timeline--animated .timeline__item{opacity:0;animation:timeline-fade-in var(--duration-slide) ease forwards;animation-delay:calc(var(--item-index) * 80ms);transform:translateY(8px)}.timeline--animated.timeline--horizontal .timeline__item{transform:translate(-8px)}@keyframes timeline-fade-in{to{opacity:1;transform:translate(0)}}.timeline--animated .timeline__item--muted{animation-name:timeline-fade-in-muted}@keyframes timeline-fade-in-muted{to{opacity:.45;transform:translate(0)}}

package/dist/components/Timeline/Timeline2.js

@@ -0,0 +1,57 @@
+import './Timeline.css';
+/* empty css         */
+import "react";
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+var d = (l = "default") => `timeline__dot timeline__dot--${l}`, v = ({ items: l, orientation: m = "vertical", size: s = "md", connected: a = !0, animated: c = !0, className: r = "" }) => /* @__PURE__ */ i("ol", {
+  className: [
+    "timeline",
+    `timeline--${m}`,
+    `timeline--${s}`,
+    a ? "timeline--connected" : "",
+    c ? "timeline--animated" : "",
+    r
+  ].filter(Boolean).join(" "),
+  children: l.map((e, t) => /* @__PURE__ */ n("li", {
+    className: [
+      "timeline__item",
+      e.active ? "timeline__item--active" : "",
+      e.muted ? "timeline__item--muted" : ""
+    ].filter(Boolean).join(" "),
+    style: { "--item-index": t },
+    children: [/* @__PURE__ */ n("div", {
+      className: "timeline__node",
+      children: [/* @__PURE__ */ i("div", {
+        className: d(e.variant),
+        children: e.icon ? /* @__PURE__ */ i("span", {
+          className: "timeline__dot-icon",
+          children: e.icon
+        }) : null
+      }), a && t < l.length - 1 && /* @__PURE__ */ i("div", { className: "timeline__connector" })]
+    }), /* @__PURE__ */ n("div", {
+      className: "timeline__content",
+      children: [
+        /* @__PURE__ */ n("div", {
+          className: "timeline__header",
+          children: [/* @__PURE__ */ i("span", {
+            className: "timeline__title",
+            children: e.title
+          }), e.badge && /* @__PURE__ */ i("span", {
+            className: `timeline__badge timeline__badge--${e.variant ?? "default"}`,
+            children: e.badge
+          })]
+        }),
+        e.description && /* @__PURE__ */ i("p", {
+          className: "timeline__description",
+          children: e.description
+        }),
+        e.timestamp && /* @__PURE__ */ i("time", {
+          className: "timeline__timestamp",
+          children: e.timestamp
+        })
+      ]
+    })]
+  }, e.id))
+});
+export {
+  v as Timeline
+};

package/dist/components/TimelineMarkers/TimelineMarkers.css

@@ -0,0 +1 @@
+.timeline-markers{margin-left:var(--spacing-100);position:relative}.timeline-markers__track{left:calc(-1 * var(--spacing-16));width:var(--spacing-2);background:var(--delimiter-color);border-radius:var(--spacing-1);position:absolute;top:0;bottom:0}.timeline-markers__marker{left:calc(-1 * var(--spacing-100));z-index:1;width:var(--spacing-100);padding-right:var(--spacing-8);cursor:default;justify-content:flex-end;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.timeline-markers__dot{border-radius:50%;flex-shrink:0}.timeline-markers__dot--year{width:var(--spacing-12);height:var(--spacing-12);background:var(--body-accent-color);border:var(--spacing-2) solid var(--card-background-color);box-shadow:0 0 0 var(--spacing-2) var(--body-accent-color)}.timeline-markers__dot--date{width:var(--spacing-8);height:var(--spacing-8);background:var(--body-color-muted)}.timeline-markers__dot--small{width:var(--spacing-4);height:var(--spacing-4);background:var(--delimiter-color)}.timeline-markers__labels{align-items:flex-end;gap:var(--spacing-2);margin-right:var(--spacing-8);flex-direction:column;display:flex}.timeline-markers__label{white-space:nowrap}.timeline-markers__label--year{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--body-accent-color);background:var(--card-background-color);padding:var(--spacing-2) var(--spacing-8);border-radius:var(--radius-sm);border:var(--spacing-1) solid var(--body-accent-color)}.timeline-markers__label--date{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--body-color-muted)}.timeline-markers__marker--date .timeline-markers__label{margin-right:var(--spacing-8)}.timeline-markers__separator{display:none}@media (width<=1024px){.timeline-markers{margin-left:var(--spacing-80)}.timeline-markers__track{left:calc(-1 * var(--spacing-12))}.timeline-markers__marker{left:calc(-1 * var(--spacing-80));width:var(--spacing-80);padding-right:var(--spacing-4)}.timeline-markers__label{margin-right:var(--spacing-4)}.timeline-markers__label--year{font-size:var(--font-size-xxs);padding:var(--spacing-1) var(--spacing-4)}.timeline-markers__label--date{font-size:var(--font-size-xxs)}.timeline-markers__dot--year{width:var(--spacing-8);height:var(--spacing-8)}}@media (width<=768px){.timeline-markers{margin-left:0}.timeline-markers__track,.timeline-markers__marker{display:none}.timeline-markers__separator{align-items:center;gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-16);display:flex}.timeline-markers__separator:before,.timeline-markers__separator:after{content:"";height:var(--spacing-1);background:var(--delimiter-color);flex:1}.timeline-markers__separator-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--body-accent-color);white-space:nowrap}}@media print{.timeline-markers__track{background:#ccc}.timeline-markers__dot--year{box-shadow:0 0 0 var(--spacing-2) #333;background:#333}.timeline-markers__dot--date{background:#666}.timeline-markers__dot--small{background:#ccc}.timeline-markers__label--year{color:#333;background:#fff;border-color:#333}.timeline-markers__label--date{color:#666}}

package/dist/components/TimelineMarkers/TimelineMarkers2.js

@@ -0,0 +1,73 @@
+import './TimelineMarkers.css';
+/* empty css                */
+import { useMemo as h } from "react";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+var u = (e) => {
+  const [a, r, l] = e.split("-").map(Number);
+  return new Date(a, r - 1, l);
+}, p = (e, a) => a === "month" ? e.toLocaleDateString("en-US", { month: "long" }) : e.toLocaleDateString("en-US", {
+  day: "2-digit",
+  month: "short"
+}), v = (e, a) => a === "month" ? `${e.getFullYear()}-${e.getMonth()}` : `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`, b = (e) => e.getFullYear().toString(), g = (e, a = "day") => {
+  const r = /* @__PURE__ */ new Map();
+  let l = null, i = null;
+  return e.forEach((o, n) => {
+    const s = u(o.date), c = b(s), _ = v(s, a), d = c !== l, k = _ !== i;
+    r.set(n, {
+      showYear: d,
+      showDate: k,
+      yearLabel: d ? s.getFullYear().toString() : "",
+      dateLabel: k ? p(s, a) : ""
+    }), l = c, i = _;
+  }), r;
+}, f = ({ marker: e, onClick: a }) => {
+  const r = (l) => {
+    l.stopPropagation(), a?.(l);
+  };
+  return e.showYear ? /* @__PURE__ */ m("div", {
+    className: "timeline-markers__marker timeline-markers__marker--year",
+    onClick: r,
+    children: [/* @__PURE__ */ m("div", {
+      className: "timeline-markers__labels",
+      children: [/* @__PURE__ */ t("span", {
+        className: "timeline-markers__label timeline-markers__label--year",
+        children: e.yearLabel
+      }), /* @__PURE__ */ t("span", {
+        className: "timeline-markers__label timeline-markers__label--date",
+        children: e.dateLabel
+      })]
+    }), /* @__PURE__ */ t("div", { className: "timeline-markers__dot timeline-markers__dot--year" })]
+  }) : e.showDate ? /* @__PURE__ */ m("div", {
+    className: "timeline-markers__marker timeline-markers__marker--date",
+    onClick: r,
+    children: [/* @__PURE__ */ t("span", {
+      className: "timeline-markers__label timeline-markers__label--date",
+      children: e.dateLabel
+    }), /* @__PURE__ */ t("div", { className: "timeline-markers__dot timeline-markers__dot--date" })]
+  }) : /* @__PURE__ */ t("div", {
+    className: "timeline-markers__marker timeline-markers__marker--empty",
+    onClick: r,
+    children: /* @__PURE__ */ t("div", { className: "timeline-markers__dot timeline-markers__dot--small" })
+  });
+}, L = ({ marker: e }) => !e.showYear && !e.showDate ? null : /* @__PURE__ */ t("div", {
+  className: "timeline-markers__separator",
+  children: /* @__PURE__ */ t("span", {
+    className: "timeline-markers__separator-label",
+    children: e.showYear ? e.yearLabel : e.dateLabel
+  })
+}), Y = ({ items: e, renderItem: a, className: r }) => {
+  const l = h(() => g(e), [e]);
+  return /* @__PURE__ */ m("div", {
+    className: `timeline-markers${r ? ` ${r}` : ""}`,
+    children: [/* @__PURE__ */ t("div", { className: "timeline-markers__track" }), e.map((i, o) => {
+      const n = l.get(o);
+      return n ? a(i, n) : null;
+    })]
+  });
+};
+export {
+  f as TimelineMarkerDot,
+  Y as TimelineMarkers,
+  L as TimelineMobileSeparator,
+  g as calculateTimelineMarkers
+};

package/dist/components/TipsOfTheDay/TipsOfTheDay.css

@@ -0,0 +1 @@
+.tips-of-the-day{text-align:center}.tips-of-the-day h3,.tips-of-the-day h4{margin:var(--spacing-8) 0}

package/dist/components/TipsOfTheDay/TipsOfTheDay2.js

@@ -0,0 +1,24 @@
+import './TipsOfTheDay.css';
+import { Icon as e } from "../Icon/Icon2.js";
+import { Card as m } from "../Card/Card2.js";
+/* empty css             */
+import "react";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+var n = (r, a) => Math.floor(Math.random() * (a - r + 1) + r), l = ({ list: r }) => {
+  const a = n(0, r.length - 1);
+  return /* @__PURE__ */ t(m, {
+    className: "tips-of-the-day",
+    children: [
+      /* @__PURE__ */ t("h3", { children: [
+        /* @__PURE__ */ o(e, { name: "sparkle" }),
+        " Tip Of The Day ",
+        /* @__PURE__ */ o(e, { name: "sparkle" })
+      ] }),
+      " ",
+      /* @__PURE__ */ o("h4", { children: r[a] })
+    ]
+  });
+};
+export {
+  l as TipsOfTheDay
+};

package/dist/components/Toast/Toast.css

@@ -0,0 +1 @@
+.toast.toast--fixed{padding:var(--spacing-16);border-radius:var(--radius);box-shadow:0 4px var(--spacing-12) var(--box-shadow);z-index:9999;text-shadow:1px 1px 1px var(--text-shadow);align-items:center;gap:var(--spacing-16);border:1px solid;animation:.3s slideIn;display:flex;position:fixed}.toast.toast--top-left{top:var(--spacing-16);left:var(--spacing-16)}.toast.toast--top-right{top:var(--spacing-16);right:var(--spacing-16)}.toast.toast--bottom-left{bottom:var(--spacing-16);left:var(--spacing-16)}.toast.toast--bottom-right{right:var(--spacing-16);bottom:var(--spacing-16)}.toast.toast--top{top:var(--spacing-16);left:50%;transform:translate(-50%)}.toast.toast--bottom{bottom:var(--spacing-16);left:50%;transform:translate(-50%)}.toast.toast--left{top:50%;left:var(--spacing-16);transform:translateY(-50%)}.toast.toast--right{top:50%;right:var(--spacing-16);transform:translateY(-50%)}.toast__message{flex:1}.toast__action{padding:var(--spacing-8) var(--spacing-16);border-radius:var(--radius);color:inherit;font-weight:var(--font-weight-semibold);cursor:pointer;background:#fff3;border:1px solid #ffffff4d;transition:background-color .2s}.toast__action:hover{background:#ffffff4d}.toast__close{width:24px;height:24px;color:inherit;cursor:pointer;opacity:.7;background:0 0;border:none;padding:0;font-size:24px;line-height:1;transition:opacity .2s}.toast__close:hover{opacity:1}.toast.toast-success{background-color:var(--toast-success-background-color);border-color:var(--toast-success-border-color);color:var(--toast-success-color)}.toast.toast-danger{background-color:var(--toast-danger-background-color);border-color:var(--toast-danger-border-color);color:var(--toast-danger-color)}.toast.toast-warning{background-color:var(--toast-warning-background-color);border-color:var(--toast-warning-border-color);color:var(--toast-warning-color)}.toast.toast-info{background-color:var(--toast-info-background-color);border-color:var(--toast-info-border-color);color:var(--toast-info-color)}@keyframes slideIn{0%{opacity:0}to{opacity:1}}