@astronox/core 0.1.0

package/src/components/forms/TextInput/textInputController.ts

@@ -0,0 +1,53 @@
+const initializedAttribute = 'data-text-input-initialized';
+const noop = (): void => undefined;
+
+export function initTextInput(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const input = root.querySelector<HTMLInputElement>(
+    '[data-text-input-control]',
+  );
+  const clear = root.querySelector<HTMLButtonElement>(
+    '[data-text-input-clear]',
+  );
+  if (!input) return noop;
+
+  root.setAttribute(initializedAttribute, 'true');
+  let autofocusFrame: number | undefined;
+
+  const syncClear = (): void => {
+    if (!clear) return;
+    clear.hidden = input.value.length === 0 || input.disabled || input.readOnly;
+  };
+
+  const handleClear = (): void => {
+    if (input.disabled || input.readOnly) return;
+
+    input.value = '';
+    syncClear();
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.focus();
+  };
+
+  input.addEventListener('input', syncClear);
+  clear?.addEventListener('click', handleClear);
+  syncClear();
+
+  if (
+    root.dataset.textInputAutofocus === 'desktop' &&
+    window.matchMedia('(hover: hover) and (pointer: fine)').matches
+  ) {
+    autofocusFrame = window.requestAnimationFrame(() => {
+      input.focus({ preventScroll: true });
+    });
+  }
+
+  return () => {
+    if (autofocusFrame !== undefined) {
+      window.cancelAnimationFrame(autofocusFrame);
+    }
+    input.removeEventListener('input', syncClear);
+    clear?.removeEventListener('click', handleClear);
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/components/icons/ArrowDownIcon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="m7.5 12.5 8.5 8.5 8.5-8.5"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.4"></path>
+</svg>

package/src/components/icons/ArrowLeftIcon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="m19.5 7.5-8.5 8.5 8.5 8.5"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.4"></path>
+</svg>

package/src/components/icons/ArrowRightIcon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="m12.5 7.5 8.5 8.5-8.5 8.5"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.4"></path>
+</svg>

package/src/components/icons/ArrowUpDownIcon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="M11 24V8m0 0-4 4m4-4 4 4m6-4v16m0 0-4-4m4 4 4-4"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.4"></path>
+</svg>

package/src/components/icons/ArrowUpIcon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="m7.5 19.5 8.5-8.5 8.5 8.5"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.4"></path>
+</svg>

package/src/components/icons/BulletIcon.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle cx="16" cy="16" r="4.5" fill="currentColor"></circle>
+</svg>

package/src/components/icons/BurnIcon.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+type Props = HTMLAttributes<'svg'>;
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['circle-symbol-icon', className]}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
+  <path
+    class="circle-symbol-icon__fill"
+    d="M17 7c1 5-3 6-3 10 0 1.5.8 2.7 2 3.4-.3-2.4 1.3-3.4 2.2-5.4 2.3 2 3.8 4.1 3.8 6.4 0 3.2-2.7 5.6-6 5.6s-6-2.4-6-5.8C10 15.7 15.7 13 17 7Z"></path>
+</svg>

package/src/components/icons/CircleSymbolIcon.css

@@ -0,0 +1,66 @@
+.circle-symbol-icon {
+  --circle-symbol-icon-seed: var(--nox-tone-seed);
+  --circle-symbol-icon-surface: color-mix(
+    in srgb,
+    var(--circle-symbol-icon-seed) 32%,
+    var(--nox-mix-light)
+  );
+  --circle-symbol-icon-border: color-mix(
+    in srgb,
+    var(--circle-symbol-icon-seed) 74%,
+    var(--nox-mix-dark)
+  );
+  --circle-symbol-icon-mark: color-mix(
+    in srgb,
+    var(--circle-symbol-icon-seed) 82%,
+    var(--nox-mix-dark)
+  );
+
+  color: var(--circle-symbol-icon-mark);
+}
+
+.circle-symbol-icon[data-terrain-icon='field'] {
+  --circle-symbol-icon-seed: var(--nox-source-map-field);
+}
+
+.circle-symbol-icon[data-terrain-icon='grass'] {
+  --circle-symbol-icon-seed: var(--nox-source-map-grass);
+}
+
+.circle-symbol-icon[data-terrain-icon='mountain'] {
+  --circle-symbol-icon-seed: var(--nox-source-map-mountain);
+}
+
+.circle-symbol-icon[data-terrain-icon='water'] {
+  --circle-symbol-icon-seed: var(--nox-source-map-water);
+}
+
+.circle-symbol-icon__surface {
+  fill: var(--circle-symbol-icon-surface);
+  stroke: var(--circle-symbol-icon-border);
+  stroke-width: 1.5;
+}
+
+.circle-symbol-icon__mark {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.circle-symbol-icon__fill {
+  fill: currentColor;
+}
+
+.circle-symbol-icon__highlight {
+  fill: none;
+  stroke: color-mix(
+    in srgb,
+    var(--circle-symbol-icon-surface) 78%,
+    var(--nox-mix-light)
+  );
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}

package/src/components/icons/ClearIcon.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M4 16A12 12 0 1 0 16 4C12.4 4 9.2 5.5 7 7.7L4 10.7"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+  <path
+    d="M4 4V10.7H10.7"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/CloseIcon.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M8 8L24 24M24 8L8 24"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"></path>
+</svg>

package/src/components/icons/CopyIcon.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <rect
+    x="11"
+    y="11"
+    width="14"
+    height="14"
+    rx="2"
+    stroke="currentColor"
+    stroke-width="2.5"></rect>
+  <path
+    d="M21 11V9C21 7.89543 20.1046 7 19 7H9C7.89543 7 7 7.89543 7 9V19C7 20.1046 7.89543 21 9 21H11"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/CurrencyIcon.css

@@ -0,0 +1,9 @@
+.dollar-icon {
+  display: block;
+  color: var(--nox-source-tone-success);
+}
+
+.ribbon-icon {
+  display: block;
+  color: var(--nox-source-tone-warning);
+}

package/src/components/icons/DayIcon.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  class: className,
+  width = 32,
+  height = 32,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class={className}
+  width={width}
+  height={height}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle cx="16" cy="16" r="4" stroke="currentColor" stroke-width="1.5"
+  ></circle>
+  <path
+    d="M16 8v2M16 22v2M8 16h2M22 16h2M10.35 10.35l1.4 1.4M20.25 20.25l1.4 1.4M21.65 10.35l-1.4 1.4M11.75 20.25l-1.4 1.4"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"></path>
+</svg>

package/src/components/icons/DollarIcon.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['dollar-icon', className]}
+  viewBox="0 0 24 24"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="M12 2.75v18.5M17 5.5H9.75a3.25 3.25 0 0 0 0 6.5h4.5a3.25 3.25 0 0 1 0 6.5H7"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/DownloadIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M16 6V20M10.5 14.5L16 20L21.5 14.5M8 24V26H24V24"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/EnterFullscreenIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M13 7H7V13M19 7H25V13M25 19V25H19M13 25H7V19"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/EqualIcon.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="M6 11.5h20M6 20.5h20"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-width="3"></path>
+</svg>

package/src/components/icons/ExitFullscreenIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M7 13H13V7M25 13H19V7M19 25V19H25M13 25V19H7"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/ExternalLinkIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M18 7H25V14M25 7L15 17M14 9H9C7.89543 9 7 9.89543 7 11V23C7 24.1046 7.89543 25 9 25H21C22.1046 25 23 24.1046 23 23V18"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/FieldIcon.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['circle-symbol-icon', className]}
+  data-terrain-icon="field"
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
+  <rect class="circle-symbol-icon__mark" x="9" y="9" width="14" height="14" rx="1"
+  ></rect>
+  <path class="circle-symbol-icon__mark" d="M13.7 9v14m4.6-14v14M9 13.7h14M9 18.3h14"
+  ></path>
+</svg>

package/src/components/icons/GrassIcon.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['circle-symbol-icon', className]}
+  data-terrain-icon="grass"
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
+  <path
+    class="circle-symbol-icon__fill"
+    d="M23.5 8.5c.2 8.4-3.7 14-11.7 15.2-3.1-6.8.2-13.5 11.7-15.2Z"></path>
+  <path class="circle-symbol-icon__highlight" d="M10.4 23.5c2.2-5.3 5.4-8.7 10.2-11.6"
+  ></path>
+</svg>

package/src/components/icons/InfoIcon.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <circle cx="16" cy="16" r="11" stroke="currentColor" stroke-width="2.5"
+  ></circle>
+  <path
+    d="M16 14V22"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"></path>
+  <circle cx="16" cy="10" r="1.5" fill="currentColor"></circle>
+</svg>

package/src/components/icons/MinusIcon.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M4 16H28"
+    stroke="currentColor"
+    stroke-width="3"
+    stroke-linecap="round"></path>
+</svg>