WRNexusJS/packages/ui/components/AuthSplitLayout.wrn

component AuthSplitLayout {
  props {
    size: string = "default"
    color: string = "primary"
    eyebrow: string = "Secure identity"
    title: string = "Welcome back"
    description: string = ""
    brand: string = "Police Management System"
    features: unknown[] = []
    class: string = ""
  }

  view {
    <main
      class="wrn-auth-split wrn-component--color-{color} wrn-component--size-{size} {class}"
    >
      <section
        class="wrn-auth-split__content"
      >
        <div
          class="wrn-auth-split__brand"
        >
          <span
            class="icon-[lucide--shield-check]"
            aria-hidden="true"
          >
          </span>
          <span><strong>{brand}</strong><small>Unified identity and access</small></span>
        </div>
        <div
          class="wrn-auth-split__message"
        >
          <span
            class="wrn-auth-split__eyebrow"
          >
            {eyebrow}
          </span>
          <h1>{title}</h1>
          {#if description}
            <p>{description}</p>
          {/if}
          <div
            class="wrn-auth-split__features"
          >
            {#each features as item}
              <article>
                <span
                  class="{item.icon || 'icon-[lucide--check-circle-2]'}"
                  aria-hidden="true"
                >
                </span>
                <span><strong>{item.label}</strong>
                  {#if item.description}
                    <small>{item.description}</small>
                  {/if}
                </span>
              </article>
            {/each}
          </div>
          <slot
            name="aside-extra"
          />
        </div>
        <small
          class="wrn-auth-split__legal"
        >
          Authorised access only · Activity may be monitored and audited.
        </small>
      </section>
      <section
        class="wrn-auth-split__form"
      >
        <div
          class="wrn-auth-split__form-inner"
        >
          <slot
            name="form"
          />
        </div>
      </section>
    </main>
  }

  style {
    /* Shared authentication shell and forms */
    .wrn-auth-split {
      display: grid;
      width: 100%;
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      color: var(--wrn-color-text);
      background: var(--wrn-color-bg);
    }

    .wrn-auth-split__content,
    .wrn-auth-split__form {
      min-width: 0;
      padding: clamp(1.5rem, 5vw, 5rem);
    }

    .wrn-auth-split__content {
      display: flex;
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
      justify-content: space-between;
      flex-direction: column;
      background:
        radial-gradient(
          circle at 15% 15%,
          color-mix(in srgb, var(--wrn-color-primary) 22%, transparent),
          transparent 34%
        ),
        linear-gradient(145deg, var(--wrn-color-surface-2), var(--wrn-color-bg));
      border-right: 1px solid var(--wrn-color-border);
    }

    .wrn-auth-split__brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .wrn-auth-split__brand > span:first-child {
      width: 2.5rem;
      height: 2.5rem;
      color: var(--wrn-color-primary);
    }

    .wrn-auth-split__brand > span:last-child {
      display: grid;
    }

    .wrn-auth-split__brand strong {
      font-size: 0.875rem;
      font-weight: 650;
    }

    .wrn-auth-split__brand small,
    .wrn-auth-split__legal {
      color: var(--wrn-color-muted);
      font-size: 0.65rem;
    }

    .wrn-auth-split__message {
      width: min(100%, 36rem);
      margin-block: 3rem;
    }

    .wrn-auth-split__eyebrow {
      color: var(--wrn-color-primary);
      font-size: 0.7rem;
      font-weight: 650;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .wrn-auth-split__message h1 {
      max-width: 14ch;
      margin: 0.65rem 0 0;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
      font-weight: 650;
      letter-spacing: -0.045em;
      line-height: 1.08;
    }

    .wrn-auth-split__message > p {
      max-width: 34rem;
      margin: 1rem 0 0;
      color: var(--wrn-color-muted);
      font-size: 0.875rem;
      line-height: 1.7;
    }

    .wrn-auth-split__features {
      display: grid;
      margin-top: 2rem;
      gap: 1rem;
    }

    .wrn-auth-split__features article {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .wrn-auth-split__features article > span:first-child {
      width: 1.1rem;
      height: 1.1rem;
      margin-top: 0.1rem;
      flex: none;
      color: var(--wrn-color-primary);
    }

    .wrn-auth-split__features article > span:last-child {
      display: grid;
    }

    .wrn-auth-split__features strong {
      font-size: 0.75rem;
      font-weight: 600;
    }

    .wrn-auth-split__features small {
      margin-top: 0.15rem;
      color: var(--wrn-color-muted);
      font-size: 0.68rem;
    }

    .wrn-auth-split__form {
      display: grid;
      height: 100dvh;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      place-items: center;
      background: var(--wrn-color-surface);
    }

    .wrn-auth-split__form-inner {
      width: min(100%, 24rem);
    }

    @media (max-width: 800px) {
    .wrn-auth-split {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        grid-template-columns: 1fr;
      }
    .wrn-auth-split__content {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding-bottom: 2rem;
        border-right: 0;
        border-bottom: 1px solid var(--wrn-color-border);
      }
    .wrn-auth-split__message {
        margin-block: 2rem 0;
      }
    .wrn-auth-split__message h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
      }
    .wrn-auth-split__features,
      .wrn-auth-split__legal {
        display: none;
      }
    .wrn-auth-split__form {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding-block: 2.5rem;
        place-items: start center;
      }
    }

    /* Shared component foundation. */

        .wrn-component {
          --wrn-component-color: var(--wrn-color-primary);
          --wrn-component-scale: 1;
          margin: 0;
          color: var(--wrn-color-text);
          font-family: var(--wrn-font-sans, inherit);
        }

        .wrn-component--color-primary {
          --wrn-component-color: var(--wrn-color-primary);
        }

        .wrn-component--color-secondary {
          --wrn-component-color: var(--wrn-color-secondary);
        }

        .wrn-component--color-success {
          --wrn-component-color: var(--wrn-color-success);
        }

        .wrn-component--color-warning {
          --wrn-component-color: var(--wrn-color-warning);
        }

        .wrn-component--color-danger {
          --wrn-component-color: var(--wrn-color-danger);
        }

        .wrn-component--color-info {
          --wrn-component-color: var(--wrn-color-info);
        }

        .wrn-component--size-xs {
          --wrn-component-scale: 0.78;
        }

        .wrn-component--size-sm {
          --wrn-component-scale: 0.88;
        }

        .wrn-component--size-default,
        .wrn-component--size-md {
          --wrn-component-scale: 1;
        }

        .wrn-component--size-lg {
          --wrn-component-scale: 1.14;
        }

        .wrn-component--size-xl {
          --wrn-component-scale: 1.28;
        }

        .wrn-component:not(.wrn-btn) {
          font-size: calc(1em * var(--wrn-component-scale));
        }

        .wrn-component :is(a, button, input, select, textarea):focus-visible {
          outline-color: var(--wrn-component-color);
        }

        .wrn-component p {
          margin: 0;
          color: var(--wrn-color-text-muted, var(--wrn-color-muted));
          line-height: 1.6;
        }
  }
}