@geckou/ui-react 0.1.1 → 0.3.0

package/dist/components/DateSelector.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { useState as C, useEffect as F } from "react";
+import { splitDate as T, COLOR as I, daysInMonth as $ } from "@geckou/ui-core";
+import { InputBox as z } from "./InputBox.js";
+import { KeyboardArrowDownIcon as f } from "./icons/KeyboardArrowDownIcon.js";
+import { useRegisterValidation as H } from "../hooks/useFormValidation.js";
+const b = { year: "", month: "", day: "" };
+function J({
+  name: n,
+  value: m,
+  onChange: s,
+  isRequired: c,
+  formValidationStore: Y,
+  type: i = "date"
+}) {
+  const [r, d] = C(b), g = !!(r.year && r.month && (i === "month" || r.day)), A = !r.year && !r.month && !r.day;
+  H(
+    Y,
+    n,
+    c ? g : g || A
+  ), F(() => {
+    d(m ? T(m) : b);
+  }, [m]);
+  const N = /* @__PURE__ */ new Date(), S = N.getFullYear() - 100, O = N.getFullYear() - 14, k = Array.from(
+    { length: O - S + 1 },
+    (e, a) => (S + a).toString()
+  ).map((e) => ({ label: e, value: e })), E = Array.from({ length: 12 }, (e, a) => {
+    const t = (a + 1).toString();
+    return { label: t, value: t.padStart(2, "0") };
+  }), w = (e, a) => $(Number(e) || 2e3, Number(a)), M = w(r.year, r.month), _ = Array.from({ length: M }, (e, a) => {
+    const t = (a + 1).toString();
+    return { label: t, value: t.padStart(2, "0") };
+  }), D = (e) => {
+    d(e);
+    const a = i === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
+    if (!e.year && !e.month && !e.day)
+      s == null || s("");
+    else {
+      if (a.some((t) => !t))
+        return;
+      s == null || s(a.join("-"));
+    }
+  }, u = (e, a) => {
+    const t = { ...r, [e]: a };
+    if (e !== "day" && t.day && t.month) {
+      const B = w(t.year, t.month);
+      Number(t.day) > B && (t.day = String(B).padStart(2, "0"));
+    }
+    D(t);
+  }, p = (e) => {
+    const t = e.currentTarget.firstElementChild;
+    t && t.click();
+  }, v = "relative w-max [&:has(select:focus)>svg]:rotate-180", y = "pointer-events-none absolute inset-y-0 right-[var(--sp-small,0.375rem)] m-auto size-[var(--icon-medium,1.125rem)] fill-(--icon-color)", x = "w-[calc(3ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer", h = { "--icon-color": I.blue }, j = { "--caution-color": I.red };
+  return /* @__PURE__ */ l(z, { className: "flex w-max items-center [&>*:not(:last-of-type)]:after:content-['/']", children: [
+    /* @__PURE__ */ l("div", { className: v, style: h, onClick: p, children: [
+      /* @__PURE__ */ l(
+        "select",
+        {
+          value: r.year,
+          name: `${n}-year`,
+          required: c,
+          onChange: (e) => u("year", e.target.value),
+          className: "w-[calc(5ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]!",
+          children: [
+            /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "年" }),
+            k.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(f, { className: y })
+    ] }),
+    /* @__PURE__ */ l("div", { className: v, style: h, onClick: p, children: [
+      /* @__PURE__ */ l(
+        "select",
+        {
+          value: r.month,
+          name: `${n}-month`,
+          required: c,
+          onChange: (e) => u("month", e.target.value),
+          className: x,
+          children: [
+            /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "月" }),
+            E.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ o(f, { className: y })
+    ] }),
+    i === "date" && /* @__PURE__ */ l(
+      "div",
+      {
+        className: v,
+        style: h,
+        onClick: p,
+        children: [
+          /* @__PURE__ */ l(
+            "select",
+            {
+              value: r.day,
+              name: `${n}-day`,
+              required: c,
+              onChange: (e) => u("day", e.target.value),
+              className: x,
+              children: [
+                /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "日" }),
+                _.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(f, { className: y })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        style: j,
+        className: "mx-[var(--sp-medium,0.75rem)] inline-flex cursor-pointer items-center gap-[var(--sp-min,0.1875rem)] text-[length:var(--fs-small,0.6875rem)] text-(--caution-color)",
+        onClick: () => D(b),
+        children: "削除"
+      }
+    )
+  ] });
+}
+export {
+  J as DateSelector
+};

package/dist/components/DropdownUi.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, Ref } from 'react';
+export type DropdownUiHandle = {
+    isContentsOpened: () => boolean;
+    close: () => void;
+};
+type Props = {
+    isHiddenArrow?: boolean;
+    contentAlignment?: 'left' | 'center' | 'right';
+    isDisabled?: boolean;
+    contentsWidth?: string;
+    trigger: ReactNode;
+    contents?: ReactNode;
+    ref?: Ref<DropdownUiHandle>;
+};
+export declare function DropdownUi({ isHiddenArrow, contentAlignment, isDisabled, contentsWidth, trigger, contents, ref, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/DropdownUi.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { useState as v, useRef as p, useImperativeHandle as I, useEffect as b } from "react";
+import { KeyboardArrowDownIcon as N } from "./icons/KeyboardArrowDownIcon.js";
+import { COLOR as h } from "@geckou/ui-core";
+function L({
+  isHiddenArrow: g = !1,
+  contentAlignment: i = "left",
+  isDisabled: s = !1,
+  contentsWidth: x = "auto",
+  trigger: w,
+  contents: o,
+  ref: C
+}) {
+  const [t, c] = v(!1), [z, O] = v(0), u = p(null), d = p(null), k = () => c((e) => !e), l = () => c(!1);
+  I(C, () => ({
+    isContentsOpened: () => t,
+    close: l
+  })), b(() => {
+    const e = (r) => {
+      const n = u.current;
+      n && !n.contains(r.target) && l();
+    };
+    return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+  }, []), b(() => {
+    const e = d.current;
+    if (!e)
+      return;
+    const r = () => O(e.clientHeight);
+    r();
+    const n = new ResizeObserver(r);
+    return n.observe(e), () => n.disconnect();
+  }, [!!o]);
+  const m = s || !o, y = {
+    "--trigger-color": m ? h.black : h.blue
+  }, H = {
+    boxShadow: t ? "0 0 6px #33333333" : "none",
+    blockSize: t ? `${z}px` : 0,
+    inlineSize: x,
+    right: i === "right" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
+    left: i === "left" ? "calc(var(--bv, 0.375rem) * -0.5)" : "auto",
+    zIndex: 2
+  };
+  return /* @__PURE__ */ f("div", { ref: u, className: "relative", children: [
+    /* @__PURE__ */ f(
+      "button",
+      {
+        type: "button",
+        disabled: s,
+        "aria-expanded": t,
+        style: { ...y, cursor: m ? "auto" : "pointer" },
+        className: "flex size-full items-center gap-[var(--sp-small,0.375rem)] text-(--trigger-color)",
+        onClick: (e) => {
+          e.preventDefault(), k();
+        },
+        children: [
+          w,
+          !(g || !o || s) && /* @__PURE__ */ a(
+            N,
+            {
+              className: `size-[var(--icon-small,0.9375rem)] flex-none transition-all duration-100 ${t ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ a(
+      "div",
+      {
+        style: H,
+        inert: !t,
+        className: "absolute top-[calc(100%-var(--sp-min,0.1875rem))] cursor-pointer overflow-hidden rounded-[var(--radius-small,0.1875rem)] transition-[block-size] duration-100",
+        children: /* @__PURE__ */ a(
+          "div",
+          {
+            ref: d,
+            className: "max-h-[calc(var(--bv,0.375rem)*56)] min-w-[calc(var(--bv,0.375rem)*20)] overflow-auto bg-white",
+            onClick: l,
+            children: o
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  L as DropdownUi
+};

package/dist/components/ErrorMessage.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    errorMessages?: string[];
+    cssStyle?: {
+        textColor?: string;
+        backgroundColor?: string;
+    };
+};
+export declare function ErrorMessage({ errorMessages, cssStyle }: Props): import("react").JSX.Element | null;
+export {};

package/dist/components/ErrorMessage.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import { COLOR as t } from "@geckou/ui-core";
+function a({ errorMessages: r, cssStyle: o }) {
+  if (!r || !r.length)
+    return null;
+  const b = {
+    "--error-text-color": (o == null ? void 0 : o.textColor) || t.white,
+    "--error-background-color": (o == null ? void 0 : o.backgroundColor) || t.red
+  };
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: "absolute top-[calc(100%+0.25rem)] flex w-max flex-col gap-2 rounded-sm bg-(--error-background-color) px-3 py-2 text-sm leading-none text-(--error-text-color) shadow-[0_0_0.5rem_0.25rem_#33333322] before:absolute before:bottom-[calc(100%-1px)] before:left-[0.85rem] before:block before:h-[0.53rem] before:w-[0.85rem] before:bg-(--error-background-color) before:content-[''] before:[clip-path:polygon(50%_0%,100%_100%,0%_100%)]",
+      style: b,
+      children: r.map((e) => /* @__PURE__ */ n("span", { children: e }, e))
+    }
+  );
+}
+export {
+  a as ErrorMessage
+};

package/dist/components/FileInput.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    value: File[];
+    onChange?: (files: File[]) => void;
+    accept?: string;
+};
+export declare function FileInput({ value, onChange, accept }: Props): import("react").JSX.Element;
+export {};

package/dist/components/FileInput.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { BackupIcon as v } from "./icons/BackupIcon.js";
+import { CloseIcon as m } from "./icons/CloseIcon.js";
+import { COLOR as o } from "@geckou/ui-core";
+function N({ value: c, onChange: e, accept: n = "" }) {
+  const s = c ?? [], t = (r) => {
+    !r || !r.length || e == null || e([...s, ...Array.from(r)]);
+  }, p = (r) => {
+    e == null || e(s.filter((i) => i !== r));
+  }, u = (r) => {
+    r.preventDefault(), t(r.dataTransfer.files);
+  }, d = {
+    "--link-color": o.blue,
+    "--caution-color": o.red
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      style: d,
+      className: "w-full rounded-[var(--radius-small,0.1875rem)] border border-dashed border-[var(--link-color,#1c4ac9)] p-[var(--sp-medium,0.75rem)]",
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "flex h-full flex-col items-center justify-center gap-[var(--sp-small,0.375rem)] [&>span]:inline-block [&>span]:p-[var(--sp-small,0.375rem)]",
+            onDragOver: (r) => r.preventDefault(),
+            onDrop: u,
+            children: [
+              /* @__PURE__ */ l("span", { children: "ファイルをドロップしてアップロード" }),
+              /* @__PURE__ */ l("span", { children: "または" }),
+              /* @__PURE__ */ a("label", { className: "relative inline-flex cursor-pointer items-center gap-[var(--sp-small,0.375rem)] rounded-[var(--radius-small,0.1875rem)] bg-transparent p-[var(--sp-small,0.375rem)] font-medium text-[var(--link-color,#1c4ac9)] transition-colors duration-100 hover:bg-[var(--hover-color,#EEF7FB)] has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-[var(--link-color,#1c4ac9)]", children: [
+                /* @__PURE__ */ l(v, { className: "size-[var(--icon-small,0.9375rem)]" }),
+                /* @__PURE__ */ l("span", { children: "ファイルを選択" }),
+                /* @__PURE__ */ l(
+                  "input",
+                  {
+                    type: "file",
+                    multiple: !0,
+                    accept: n,
+                    className: "sr-only",
+                    onChange: (r) => {
+                      t(r.target.files), r.target.value = "";
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        s.length > 0 && /* @__PURE__ */ a("div", { className: "mt-[var(--sp-medium,0.75rem)] flex flex-col items-center gap-[var(--sp-small,0.375rem)] bg-[var(--light-blue,#d2e4f7)] p-[var(--sp-medium,0.75rem)] [&>*:last-child]:mt-[var(--sp-small,0.375rem)]", children: [
+          s.map((r, i) => /* @__PURE__ */ a(
+            "span",
+            {
+              className: "inline-flex items-center gap-[var(--sp-min,0.1875rem)]",
+              children: [
+                r.name,
+                /* @__PURE__ */ l(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `${r.name} を削除`,
+                    className: "inline-flex cursor-pointer items-center",
+                    onClick: () => p(r),
+                    children: /* @__PURE__ */ l(m, { className: "size-[var(--icon-small,0.9375rem)] text-[var(--caution-color,#aa0000)]" })
+                  }
+                )
+              ]
+            },
+            `${r.name}_${i}`
+          )),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex cursor-pointer items-center gap-[var(--sp-min,0.1875rem)] rounded-[var(--radius-small,0.1875rem)] border border-[var(--caution-color,#aa0000)] bg-white px-[var(--sp-medium,0.75rem)] py-[var(--sp-small,0.375rem)] text-[length:var(--fs-small,0.6875rem)] text-[var(--caution-color,#aa0000)]",
+              onClick: () => e == null ? void 0 : e([]),
+              children: [
+                /* @__PURE__ */ l(m, { className: "size-[var(--icon-min,0.75rem)]" }),
+                "全て削除"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  N as FileInput
+};

package/dist/components/InputBox.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { InputBoxStyleForEachStatus } from '../types';
+type Props = {
+    cssStyle?: InputBoxStyleForEachStatus;
+    isErrored?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+export declare function InputBox({ cssStyle, isErrored, isDisabled, className, children, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/InputBox.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as C } from "react/jsx-runtime";
+import { useRef as a, useState as L, useCallback as E, useEffect as v } from "react";
+import { INPUT_BOX_DEFAULT_STYLES as k } from "@geckou/ui-core";
+function $({
+  cssStyle: m,
+  isErrored: u,
+  isDisabled: n,
+  className: _,
+  children: w
+}) {
+  var b, p, h;
+  const l = a(null), [S, t] = L("default"), c = a(u);
+  c.current = u;
+  const r = E(() => {
+    var s;
+    const e = (s = l.current) == null ? void 0 : s.querySelector("input, textarea, select");
+    if (!e)
+      return t("default");
+    if (e.matches(":disabled"))
+      return t("disabled");
+    if (e.matches(":focus"))
+      return t("focus");
+    if (e.tagName.toLowerCase() === "select") {
+      const x = e;
+      return t(
+        x.required && !x.value ? "error" : "valid"
+      );
+    }
+    if (c.current || e.matches(":invalid"))
+      return t("error");
+    if (e.matches(":valid") && e.matches(":not(:placeholder-shown)") && e.matches(":not(:invalid)"))
+      return t("valid");
+    t("default");
+  }, []);
+  v(() => {
+    const e = l.current;
+    if (!e)
+      return;
+    const s = new MutationObserver(r);
+    return s.observe(e, { childList: !0, subtree: !0 }), e.addEventListener("focusin", r, !0), e.addEventListener("blur", r, !0), () => {
+      s.disconnect(), e.removeEventListener("focusin", r, !0), e.removeEventListener("blur", r, !0);
+    };
+  }, [r]);
+  const i = a(!0), d = a(n);
+  v(() => {
+    const e = d.current !== n;
+    if (d.current = n, i.current) {
+      i.current = !1, n && t("disabled");
+      return;
+    }
+    if (e)
+      return t(n ? "disabled" : "default");
+    r();
+  }, [n, u, r]);
+  const f = { ...k, ...m }, o = f[S] ?? f.default, g = {
+    "--text-color": o.textColor,
+    "--placeholder-color": o.placeholderColor,
+    "--background-color": o.backgroundColor,
+    "--radius-size": ((b = o.border) == null ? void 0 : b.radius) || ".25rem",
+    "--input-box-shadow": `0 0 0 ${((p = o.border) == null ? void 0 : p.size) || "1px"} ${(h = o.border) == null ? void 0 : h.color} inset, ${o.boxShadow || "0 0 0 0 rgba(0, 0, 0, 0)"}`
+  };
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      ref: l,
+      className: `relative inline-flex max-w-full rounded-(--radius-size) bg-(--background-color) text-(--text-color) shadow-(--input-box-shadow) has-[:disabled]:pointer-events-none has-[:disabled]:before:pointer-events-auto has-[:disabled]:before:absolute has-[:disabled]:before:inset-0 has-[:disabled]:before:cursor-not-allowed has-[:disabled]:before:content-[''] [&_*::placeholder]:font-normal [&_*::placeholder]:text-(--placeholder-color) [&_*:focus]:outline-none [&_:is(input,textarea,select)]:w-full [&_:is(input,textarea,select)]:appearance-none [&_:is(input,textarea,select)]:border-none [&_:is(input,textarea,select)]:bg-transparent [&_:is(input,textarea,select)]:p-4 [&_:is(input,textarea,select)]:outline-none ${_ || ""}`,
+      style: g,
+      children: w
+    }
+  );
+}
+export {
+  $ as InputBox
+};

package/dist/components/InputGroup.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+};
+export declare function InputGroup({ children }: Props): import("react").JSX.Element;
+export {};

package/dist/components/InputGroup.js

@@ -0,0 +1,7 @@
+import { jsx as n } from "react/jsx-runtime";
+function o({ children: l }) {
+  return /* @__PURE__ */ n("div", { className: "inline-flex gap-px max-md:flex-wrap [&>*]:flex-auto [&>*]:rounded-none [&>*:first-child:not(:only-child)]:rounded-l-[var(--radius-small,0.1875rem)] [&>*:last-child:not(:only-child)]:rounded-r-[var(--radius-small,0.1875rem)] [&>button]:flex-none", children: l });
+}
+export {
+  o as InputGroup
+};

package/dist/components/LabeledCheckbox.d.ts

@@ -0,0 +1,12 @@
+import { CheckBoxStyleForEachStatus } from '../types';
+type Props = {
+    name: string;
+    label: string;
+    checked?: boolean;
+    onChange?: (newValue: boolean) => void;
+    isDisabled?: boolean;
+    cssStyle?: CheckBoxStyleForEachStatus;
+    isDisableAnimation?: boolean;
+};
+export declare function LabeledCheckbox({ name, label, checked, onChange, isDisabled, cssStyle, isDisableAnimation, }: Props): import("react").JSX.Element;
+export {};

package/dist/components/LabeledCheckbox.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { CheckBox as h } from "./CheckBox.js";
+import { COLOR as r } from "@geckou/ui-core";
+function f({
+  name: c,
+  label: l,
+  checked: d,
+  onChange: u,
+  isDisabled: e,
+  cssStyle: o,
+  isDisableAnimation: x
+}) {
+  const t = d ?? !1, i = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, a = {
+    textColor: e ? r.darkGray : r.black,
+    backgroundColor: e ? r.darkGray : r.blue,
+    ...i ?? {}
+  }, k = {
+    "--text-color": a.textColor,
+    "--checked-color": a.backgroundColor
+  };
+  return /* @__PURE__ */ m("label", { className: "inline-flex cursor-pointer items-center gap-[.5em] has-[input:disabled]:cursor-auto", children: [
+    /* @__PURE__ */ n("span", { className: "pointer-events-none", children: /* @__PURE__ */ n(
+      h,
+      {
+        name: c,
+        checked: t,
+        onChange: u,
+        isDisabled: e,
+        cssStyle: o,
+        isDisableAnimation: x
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      "span",
+      {
+        style: k,
+        className: t ? "text-(--text-color)" : "text-(--checked-color)",
+        children: l
+      }
+    )
+  ] });
+}
+export {
+  f as LabeledCheckbox
+};

package/dist/components/LabeledFieldset.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+type Props = {
+    isDisabled?: boolean;
+    label?: ReactNode;
+    children: ReactNode;
+};
+export declare function LabeledFieldset({ isDisabled, label, children }: Props): import("react").JSX.Element;
+export {};

package/dist/components/LabeledFieldset.js

@@ -0,0 +1,10 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+function c({ isDisabled: l, label: s, children: d }) {
+  return /* @__PURE__ */ e("div", { className: "grid gap-2", children: /* @__PURE__ */ i("fieldset", { className: "contents", disabled: l, children: [
+    s && /* @__PURE__ */ e("legend", { className: "flex items-center", children: s }),
+    /* @__PURE__ */ e("div", { className: "[&>*]:w-full", children: d })
+  ] }) });
+}
+export {
+  c as LabeledFieldset
+};

package/dist/components/LoadingSpinner.d.ts

@@ -0,0 +1 @@
+export declare function LoadingSpinner(): import("react").JSX.Element;

package/dist/components/LoadingSpinner.js

@@ -0,0 +1,26 @@
+import { jsx as c, jsxs as r } from "react/jsx-runtime";
+function i() {
+  return /* @__PURE__ */ c("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ r("g", { children: [
+    /* @__PURE__ */ c("circle", { cx: "12", cy: "2.5", r: "1.5", opacity: ".14" }),
+    /* @__PURE__ */ c("circle", { cx: "16.75", cy: "3.77", r: "1.5", opacity: ".29" }),
+    /* @__PURE__ */ c("circle", { cx: "20.23", cy: "7.25", r: "1.5", opacity: ".43" }),
+    /* @__PURE__ */ c("circle", { cx: "21.50", cy: "12.00", r: "1.5", opacity: ".57" }),
+    /* @__PURE__ */ c("circle", { cx: "20.23", cy: "16.75", r: "1.5", opacity: ".71" }),
+    /* @__PURE__ */ c("circle", { cx: "16.75", cy: "20.23", r: "1.5", opacity: ".86" }),
+    /* @__PURE__ */ c("circle", { cx: "12", cy: "21.5", r: "1.5" }),
+    /* @__PURE__ */ c(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        type: "rotate",
+        calcMode: "discrete",
+        dur: "0.75s",
+        values: "0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12",
+        repeatCount: "indefinite"
+      }
+    )
+  ] }) });
+}
+export {
+  i as LoadingSpinner
+};

package/dist/components/ModalBox.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+type Props = {
+    isShown: boolean;
+    size?: 'small' | 'medium' | 'large';
+    onClose: () => void;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    ariaLabel?: string;
+};
+export declare function ModalBox({ isShown, size, onClose, header, footer, children, ariaLabel, }: Props): import("react").JSX.Element;
+export {};