astralis-ui 0.1.0

package/dist/components/data-display/calendar/components/calendar-cell.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useCalendarContext as D } from "../calendar.context.js";
+import { isToday as v } from "./calendar-root.js";
+const d = {
+  sm: "astralis:h-8 astralis:w-8",
+  md: "astralis:h-9 astralis:w-9",
+  lg: "astralis:h-10 astralis:w-10"
+};
+function w({
+  date: a,
+  className: c,
+  children: u,
+  onClick: b,
+  ref: m,
+  ...f
+}) {
+  const {
+    showOutsideDays: r,
+    isOutsideMonth: h,
+    isDateDisabled: p,
+    isDateSelected: g,
+    isDateInRange: x,
+    selectDate: y,
+    size: i
+  } = D(), t = h(a), l = p(a) || t && !r, s = g(a), e = x(a), o = v(a);
+  return t && !r ? /* @__PURE__ */ n("div", { className: d[i] }) : /* @__PURE__ */ n(
+    "button",
+    {
+      ref: m,
+      type: "button",
+      disabled: l,
+      "aria-pressed": s,
+      "aria-current": o ? "date" : void 0,
+      "data-selected": s ? "true" : "false",
+      "data-in-range": e ? "true" : "false",
+      "data-outside": t ? "true" : "false",
+      className: [
+        "astralis:inline-flex astralis:items-center astralis:justify-center astralis:rounded-md astralis:border astralis:border-transparent astralis:font-medium astralis:transition-colors",
+        d[i],
+        s && "astralis:bg-brand-solid astralis:text-brand-contrast astralis:hover:opacity-higher",
+        !s && e && "astralis:bg-brand-subtle astralis:text-brand-label",
+        !s && !e && "astralis:text-label-base astralis:hover:bg-surface-muted",
+        t && !s && "astralis:text-label-subtle",
+        o && !s && "astralis:border-stroke-base",
+        l && "astralis:cursor-not-allowed astralis:opacity-moderate astralis:hover:bg-transparent",
+        c
+      ].filter(Boolean).join(" "),
+      onClick: (C) => {
+        y(a), b?.(C);
+      },
+      ...f,
+      children: u ?? a.getDate()
+    }
+  );
+}
+w.displayName = "Calendar.Cell";
+export {
+  w as CalendarCell
+};

package/dist/components/data-display/calendar/components/calendar-grid.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { useRef as b, useState as Y, useEffect as K } from "react";
+import { useCalendarContext as $ } from "../calendar.context.js";
+import { CalendarCell as v } from "./calendar-cell.js";
+import { toStartOfMonth as R, isToday as j } from "./calendar-root.js";
+function s(t, a) {
+  const r = new Date(t);
+  return r.setDate(t.getDate() + a), r;
+}
+function M(t, a) {
+  const r = new Date(t.getFullYear(), t.getMonth() + a, 1), c = new Date(r.getFullYear(), r.getMonth() + 1, 0).getDate();
+  return r.setDate(Math.min(t.getDate(), c)), r;
+}
+function k(t, a) {
+  return t.getFullYear() === a.getFullYear() && t.getMonth() === a.getMonth() && t.getDate() === a.getDate();
+}
+function S(t) {
+  return `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
+}
+function E({
+  className: t,
+  ref: a,
+  ...r
+}) {
+  const {
+    visibleMonth: c,
+    setVisibleMonth: F,
+    firstDayOfWeek: i,
+    isDateSelected: C,
+    isOutsideMonth: u
+  } = $(), h = b(null), [l, y] = Y(null), f = b(!1), w = R(c), x = (w.getDay() - i + 7) % 7, A = s(w, -x), D = Array.from(
+    { length: 42 },
+    (e, n) => s(A, n)
+  ), g = D.filter((e) => !u(e)), d = (l && !u(l) && D.some((e) => k(e, l)) ? l : null) ?? g.find((e) => C(e)) ?? g.find((e) => j(e)) ?? g[0], O = (e) => {
+    y(e), f.current = !0, u(e) && F(e);
+  };
+  return K(() => {
+    !f.current || !l || (f.current = !1, h.current?.querySelector(`[data-date="${S(l)}"]`)?.focus());
+  }), /* @__PURE__ */ p(
+    "div",
+    {
+      ref: (e) => {
+        h.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+      },
+      onKeyDown: (e) => {
+        const n = l ?? d;
+        if (!n) return;
+        let o = null;
+        switch (e.key) {
+          case "ArrowLeft":
+            o = s(n, -1);
+            break;
+          case "ArrowRight":
+            o = s(n, 1);
+            break;
+          case "ArrowUp":
+            o = s(n, -7);
+            break;
+          case "ArrowDown":
+            o = s(n, 7);
+            break;
+          case "Home": {
+            const m = (n.getDay() - i + 7) % 7;
+            o = s(n, -m);
+            break;
+          }
+          case "End": {
+            const m = (n.getDay() - i + 7) % 7;
+            o = s(n, 6 - m);
+            break;
+          }
+          case "PageUp":
+            o = M(n, -1);
+            break;
+          case "PageDown":
+            o = M(n, 1);
+            break;
+          default:
+            return;
+        }
+        e.preventDefault(), O(o);
+      },
+      className: [
+        "astralis:grid astralis:grid-cols-7 astralis:gap-1",
+        t
+      ].filter(Boolean).join(" "),
+      ...r,
+      children: D.map((e) => /* @__PURE__ */ p(
+        v,
+        {
+          date: e,
+          "data-date": S(e),
+          tabIndex: d && k(e, d) ? 0 : -1,
+          onFocus: () => y(e),
+          "aria-label": e.toDateString()
+        },
+        e.toISOString()
+      ))
+    }
+  );
+}
+E.displayName = "Calendar.Grid";
+export {
+  E as CalendarGrid
+};

package/dist/components/data-display/calendar/components/calendar-header.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+function t({
+  className: e,
+  ref: a,
+  ...r
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      className: [
+        "astralis:flex astralis:items-center astralis:justify-between astralis:gap-2",
+        e
+      ].filter(Boolean).join(" "),
+      ...r
+    }
+  );
+}
+t.displayName = "Calendar.Header";
+export {
+  t as CalendarHeader
+};

package/dist/components/data-display/calendar/components/calendar-next-trigger.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useCalendarContext as m } from "../calendar.context.js";
+import { moveVisibleMonth as u } from "./calendar-root.js";
+function b({
+  className: e,
+  onClick: t,
+  children: a,
+  ref: r,
+  ...s
+}) {
+  const { visibleMonth: i, setVisibleMonth: l } = m();
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      ref: r,
+      type: "button",
+      "aria-label": "Next month",
+      className: [
+        "astralis:inline-flex astralis:h-8 astralis:w-8 astralis:items-center astralis:justify-center astralis:rounded-md astralis:text-label-muted astralis:hover:bg-surface-muted astralis:hover:text-label-base",
+        e
+      ].filter(Boolean).join(" "),
+      onClick: (n) => {
+        l(u(i, 1)), t?.(n);
+      },
+      ...s,
+      children: a ?? ">"
+    }
+  );
+}
+b.displayName = "Calendar.NextTrigger";
+export {
+  b as CalendarNextTrigger
+};

package/dist/components/data-display/calendar/components/calendar-prev-trigger.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useCalendarContext as m } from "../calendar.context.js";
+import { moveVisibleMonth as u } from "./calendar-root.js";
+function b({
+  className: e,
+  onClick: t,
+  children: r,
+  ref: a,
+  ...s
+}) {
+  const { visibleMonth: i, setVisibleMonth: l } = m();
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      ref: a,
+      type: "button",
+      "aria-label": "Previous month",
+      className: [
+        "astralis:inline-flex astralis:h-8 astralis:w-8 astralis:items-center astralis:justify-center astralis:rounded-md astralis:text-label-muted astralis:hover:bg-surface-muted astralis:hover:text-label-base",
+        e
+      ].filter(Boolean).join(" "),
+      onClick: (o) => {
+        l(u(i, -1)), t?.(o);
+      },
+      ...s,
+      children: r ?? "<"
+    }
+  );
+}
+b.displayName = "Calendar.PrevTrigger";
+export {
+  b as CalendarPrevTrigger
+};

package/dist/components/data-display/calendar/components/calendar-root.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as i, jsxs as V, Fragment as Z } from "react/jsx-runtime";
+import { useState as b, useMemo as w } from "react";
+import { CalendarContext as _ } from "../calendar.context.js";
+import { CalendarGrid as q } from "./calendar-grid.js";
+import { CalendarHeader as J } from "./calendar-header.js";
+import { CalendarNextTrigger as K } from "./calendar-next-trigger.js";
+import { CalendarPrevTrigger as Q } from "./calendar-prev-trigger.js";
+import { CalendarViewTrigger as U } from "./calendar-view-trigger.js";
+import { CalendarWeekdays as X } from "./calendar-weekdays.js";
+const $ = {
+  sm: "astralis:text-xs",
+  md: "astralis:text-sm",
+  lg: "astralis:text-base"
+};
+function s(t) {
+  return new Date(t.getFullYear(), t.getMonth(), t.getDate());
+}
+function S(t) {
+  return new Date(t.getFullYear(), t.getMonth(), 1);
+}
+function v(t, a) {
+  return new Date(t.getFullYear(), t.getMonth() + a, 1);
+}
+function o(t, a) {
+  return t.getFullYear() === a.getFullYear() && t.getMonth() === a.getMonth() && t.getDate() === a.getDate();
+}
+function c(t) {
+  return !!t && !Array.isArray(t) && !(t instanceof Date);
+}
+function F(t, a) {
+  return a === "single" ? t instanceof Date ? s(t) : null : a === "multiple" ? Array.isArray(t) ? t.map(s) : [] : c(t) ? {
+    start: t.start ? s(t.start) : null,
+    end: t.end ? s(t.end) : null
+  } : { start: null, end: null };
+}
+function tt({
+  selectionMode: t = "single",
+  value: a,
+  defaultValue: I,
+  onValueChange: R,
+  defaultMonth: T,
+  locale: m = "en-US",
+  firstDayOfWeek: Y = 0,
+  showOutsideDays: O = !0,
+  minDate: h,
+  maxDate: D,
+  isDateUnavailable: p,
+  size: y = "md",
+  className: j,
+  style: N,
+  children: P,
+  ref: k,
+  ...z
+}) {
+  const B = S(T ?? /* @__PURE__ */ new Date()), [f, E] = b(B), [x, G] = b(
+    () => F(I ?? null, t)
+  ), r = w(
+    () => F(a ?? x, t),
+    [a, x, t]
+  ), H = w(
+    () => new Intl.DateTimeFormat(m, {
+      month: "long",
+      year: "numeric"
+    }).format(f),
+    [m, f]
+  ), C = h ? s(h) : null, M = D ? s(D) : null, A = (n) => {
+    const e = s(n);
+    return C && e < C || M && e > M ? !0 : p ? p(e) : !1;
+  }, l = (n) => {
+    a === void 0 && G(n), R?.(n);
+  }, L = {
+    visibleMonth: f,
+    setVisibleMonth: E,
+    monthLabel: H,
+    selectionMode: t,
+    selectedValue: r,
+    selectDate: (n) => {
+      const e = s(n);
+      if (A(e))
+        return;
+      if (t === "single") {
+        l(e);
+        return;
+      }
+      if (t === "multiple") {
+        const d = Array.isArray(r) ? r : [], W = d.some((g) => o(g, e)) ? d.filter((g) => !o(g, e)) : [...d, e];
+        l(W);
+        return;
+      }
+      const u = c(r) ? r : { start: null, end: null };
+      if (!u.start || u.end) {
+        l({ start: e, end: null });
+        return;
+      }
+      if (e < u.start) {
+        l({ start: e, end: u.start });
+        return;
+      }
+      l({ start: u.start, end: e });
+    },
+    isDateSelected: (n) => r instanceof Date ? o(r, n) : Array.isArray(r) ? r.some((e) => o(e, n)) : c(r) ? !!r.start && o(r.start, n) || !!r.end && o(r.end, n) : !1,
+    isDateInRange: (n) => {
+      if (!c(r) || !r.start || !r.end)
+        return !1;
+      const e = s(n);
+      return e > r.start && e < r.end;
+    },
+    isDateDisabled: A,
+    isOutsideMonth: (n) => n.getMonth() !== f.getMonth(),
+    showOutsideDays: O,
+    firstDayOfWeek: Y,
+    locale: m,
+    size: y
+  };
+  return /* @__PURE__ */ i(_.Provider, { value: L, children: /* @__PURE__ */ i(
+    "div",
+    {
+      ref: k,
+      className: [
+        "astralis:inline-flex astralis:flex-col astralis:gap-3 astralis:rounded-xl astralis:border astralis:border-stroke-subtle astralis:bg-surface-base astralis:p-3",
+        $[y],
+        j
+      ].filter(Boolean).join(" "),
+      style: N,
+      ...z,
+      children: P ?? /* @__PURE__ */ V(Z, { children: [
+        /* @__PURE__ */ V(J, { children: [
+          /* @__PURE__ */ i(Q, {}),
+          /* @__PURE__ */ i(U, {}),
+          /* @__PURE__ */ i(K, {})
+        ] }),
+        /* @__PURE__ */ i(X, {}),
+        /* @__PURE__ */ i(q, {})
+      ] })
+    }
+  ) });
+}
+function gt(t, a) {
+  return v(t, a);
+}
+function ht(t) {
+  return o(t, /* @__PURE__ */ new Date());
+}
+function Dt(t) {
+  return S(t);
+}
+tt.displayName = "Calendar.Root";
+export {
+  tt as CalendarRoot,
+  ht as isToday,
+  gt as moveVisibleMonth,
+  Dt as toStartOfMonth
+};

package/dist/components/data-display/calendar/components/calendar-view-trigger.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { useCalendarContext as i } from "../calendar.context.js";
+function n({
+  className: e,
+  children: t,
+  ref: a,
+  ...r
+}) {
+  const { monthLabel: s } = i();
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      ref: a,
+      type: "button",
+      className: [
+        "astralis:flex-1 astralis:rounded-md astralis:px-2 astralis:py-1 astralis:text-center astralis:font-semibold astralis:text-label-base",
+        e
+      ].filter(Boolean).join(" "),
+      ...r,
+      children: t ?? s
+    }
+  );
+}
+n.displayName = "Calendar.ViewTrigger";
+export {
+  n as CalendarViewTrigger
+};

package/dist/components/data-display/calendar/components/calendar-weekdays.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as u } from "react";
+import { useCalendarContext as f } from "../calendar.context.js";
+function p(e, a) {
+  return [...e.slice(a), ...e.slice(0, a)];
+}
+function x({
+  className: e,
+  ref: a,
+  ...o
+}) {
+  const { locale: r, firstDayOfWeek: l } = f(), c = u(() => {
+    const t = new Date(2024, 0, 7), s = new Intl.DateTimeFormat(r, { weekday: "short" }), m = Array.from({ length: 7 }, (y, d) => {
+      const i = new Date(t);
+      return i.setDate(t.getDate() + d), s.format(i);
+    });
+    return p(m, l);
+  }, [l, r]);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: a,
+      className: [
+        "astralis:grid astralis:grid-cols-7 astralis:gap-1",
+        e
+      ].filter(Boolean).join(" "),
+      ...o,
+      children: c.map((t, s) => /* @__PURE__ */ n(
+        "div",
+        {
+          className: "astralis:flex astralis:h-8 astralis:items-center astralis:justify-center astralis:text-xs astralis:font-medium astralis:uppercase astralis:tracking-wide astralis:text-label-subtle",
+          children: t
+        },
+        s
+      ))
+    }
+  );
+}
+x.displayName = "Calendar.Weekdays";
+export {
+  x as CalendarWeekdays
+};

package/dist/components/data-display/calendar/index.js

@@ -0,0 +1,30 @@
+"use client";
+import { CalendarHeader as e } from "./components/calendar-header.js";
+import { CalendarNextTrigger as a } from "./components/calendar-next-trigger.js";
+import { CalendarPrevTrigger as o } from "./components/calendar-prev-trigger.js";
+import { CalendarRoot as r } from "./components/calendar-root.js";
+import { CalendarViewTrigger as i } from "./components/calendar-view-trigger.js";
+import { CalendarWeekdays as m } from "./components/calendar-weekdays.js";
+import { CalendarGrid as t } from "./components/calendar-grid.js";
+import { CalendarCell as d } from "./components/calendar-cell.js";
+const c = Object.assign(r, {
+  Root: r,
+  Header: e,
+  PrevTrigger: o,
+  ViewTrigger: i,
+  NextTrigger: a,
+  Weekdays: m,
+  Grid: t,
+  Cell: d
+});
+export {
+  c as Calendar,
+  d as CalendarCell,
+  t as CalendarGrid,
+  e as CalendarHeader,
+  a as CalendarNextTrigger,
+  o as CalendarPrevTrigger,
+  r as CalendarRoot,
+  i as CalendarViewTrigger,
+  m as CalendarWeekdays
+};

package/dist/components/data-display/card/card.context.js

@@ -0,0 +1,10 @@
+"use client";
+import { useContext as t, createContext as e } from "react";
+const n = e({ size: "md" });
+function r() {
+  return t(n);
+}
+export {
+  n as CardContext,
+  r as useCardContext
+};

package/dist/components/data-display/card/card.styles.js

@@ -0,0 +1,30 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const r = a("astralis:overflow-hidden astralis:transition-all astralis:duration-moderate", {
+  variants: {
+    variant: {
+      elevated: "astralis:bg-surface-base astralis:border-normal astralis:border-stroke-subtle astralis:shadow-md",
+      outline: "astralis:bg-transparent astralis:border-normal astralis:border-stroke-subtle",
+      filled: "astralis:bg-surface-muted astralis:border-normal astralis:border-transparent",
+      unstyled: ""
+    },
+    size: {
+      sm: "astralis:rounded-lg",
+      md: "astralis:rounded-xl",
+      lg: "astralis:rounded-2xl"
+    },
+    hoverable: {
+      true: "astralis:cursor-pointer astralis:hover:shadow-lg astralis:hover:-translate-y-0.5 astralis:active:scale-95",
+      false: ""
+    }
+  },
+  defaultVariants: { variant: "elevated", size: "md", hoverable: !1 }
+}), t = {
+  sm: "astralis:px-4 astralis:py-3",
+  md: "astralis:px-5 astralis:py-4",
+  lg: "astralis:px-7 astralis:py-5"
+};
+export {
+  t as cardPadding,
+  r as cardRootVariants
+};

package/dist/components/data-display/card/components/card-body.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useCardContext as d } from "../card.context.js";
+import { cardPadding as m } from "../card.styles.js";
+import { astralisMerge as l } from "../../../../utils/astralis-merge.js";
+function n({
+  className: r = "",
+  style: a,
+  children: t,
+  ref: e,
+  ...o
+}) {
+  const { size: s } = d();
+  return /* @__PURE__ */ i("div", { ref: e, className: l(m[s], "astralis:text-label-base", r), style: a, ...o, children: t });
+}
+n.displayName = "Card.Body";
+export {
+  n as CardBody
+};

package/dist/components/data-display/card/components/card-description.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { astralisMerge as l } from "../../../../utils/astralis-merge.js";
+function m({
+  className: a = "",
+  style: e,
+  children: r,
+  ref: t,
+  ...s
+}) {
+  return /* @__PURE__ */ i(
+    "p",
+    {
+      ref: t,
+      className: l("astralis:text-sm astralis:text-label-muted astralis:leading-relaxed", a),
+      style: e,
+      ...s,
+      children: r
+    }
+  );
+}
+m.displayName = "Card.Description";
+export {
+  m as CardDescription
+};

package/dist/components/data-display/card/components/card-footer.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { useCardContext as l } from "../card.context.js";
+import { cardPadding as m } from "../card.styles.js";
+import { astralisMerge as d } from "../../../../utils/astralis-merge.js";
+function n({
+  className: r = "",
+  style: t,
+  children: s,
+  ref: a,
+  ...e
+}) {
+  const { size: o } = l();
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: a,
+      className: d(
+        "astralis:flex astralis:items-center astralis:gap-3 astralis:border-t astralis:border-stroke-subtle",
+        m[o],
+        r
+      ),
+      style: t,
+      ...e,
+      children: s
+    }
+  );
+}
+n.displayName = "Card.Footer";
+export {
+  n as CardFooter
+};

package/dist/components/data-display/card/components/card-header.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { useCardContext as n } from "../card.context.js";
+import { cardPadding as c } from "../card.styles.js";
+import { astralisMerge as f } from "../../../../utils/astralis-merge.js";
+function p({
+  extra: s,
+  className: i = "",
+  style: t,
+  children: e,
+  ref: l,
+  ...o
+}) {
+  const { size: d } = n(), a = s != null;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: l,
+      className: f(
+        "astralis:flex astralis:items-start astralis:justify-between astralis:gap-3",
+        a ? "astralis:border-b astralis:border-stroke-subtle" : "",
+        c[d],
+        i
+      ),
+      style: t,
+      ...o,
+      children: [
+        /* @__PURE__ */ r("div", { className: "astralis:flex astralis:flex-col astralis:gap-1 astralis:min-w-0", children: e }),
+        a && /* @__PURE__ */ r("div", { className: "astralis:shrink-0 astralis:flex astralis:items-center astralis:gap-2", children: s })
+      ]
+    }
+  );
+}
+p.displayName = "Card.Header";
+export {
+  p as CardHeader
+};