@neo-ui-kit/react 0.0.0-stage → 1.0.0

package/dist/components/layout/Avatar/styles.css

@@ -0,0 +1,166 @@
+/* Styles owned by Avatar: a slowly turning neon ring; it speeds up and the face lifts on hover. */
+.ad-avatar {
+  --ad-avatar: 3rem;
+  position: relative;
+  isolation: isolate;
+  width: var(--ad-avatar);
+  height: var(--ad-avatar);
+  display: grid;
+  place-items: center;
+  flex: none;
+  border-radius: 50%;
+  font-size: calc(var(--ad-avatar) * 0.42);
+  font-weight: 700;
+  color: #fff;
+  text-shadow: 0 0 0.5em var(--ad-primary);
+  background:
+    radial-gradient(circle at 35% 25%, #ffffff22, transparent 55%),
+    linear-gradient(160deg, var(--ad-primary-800), var(--ad-primary-900));
+  transition:
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1),
+    box-shadow 0.4s,
+    filter 0.4s;
+}
+.ad-avatar[data-ad-size="xs"] {
+  --ad-avatar: 1.75rem;
+}
+.ad-avatar[data-ad-size="sm"] {
+  --ad-avatar: 2.25rem;
+}
+.ad-avatar[data-ad-size="lg"] {
+  --ad-avatar: 4rem;
+}
+/* Turning ring of light around the face. */
+.ad-avatar::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: -0.125rem;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    var(--ad-primary),
+    var(--ad-secondary-100),
+    var(--ad-primary),
+    rgb(from var(--ad-primary) r g b / 0) 60%,
+    var(--ad-primary)
+  );
+  mask: radial-gradient(
+    closest-side,
+    transparent calc(100% - 0.125rem),
+    #000 calc(100% - 0.1rem)
+  );
+  animation: ad-avatar-ring 6s linear infinite;
+}
+.ad-avatar:hover {
+  transform: translateY(-0.15rem) scale(1.06);
+  box-shadow: 0 0.6rem 1.2rem rgb(from var(--ad-primary) r g b / 0.27);
+}
+.ad-avatar:hover::before {
+  animation-duration: 1.6s;
+}
+@keyframes ad-avatar-ring {
+  to {
+    rotate: 1turn;
+  }
+}
+/* Host variant: the neon seal replaces the face and its ring; it lifts and glows brighter on hover. */
+/* The seal carries a label, so it starts larger than the initials at every size. */
+.ad-avatar[data-variant="host"] {
+  --ad-avatar: 5.5rem;
+  background: none;
+  text-shadow: none;
+}
+.ad-avatar[data-variant="host"][data-ad-size="xs"] {
+  --ad-avatar: 3rem;
+}
+.ad-avatar[data-variant="host"][data-ad-size="sm"] {
+  --ad-avatar: 4.25rem;
+}
+.ad-avatar[data-variant="host"][data-ad-size="lg"] {
+  --ad-avatar: 8rem;
+}
+.ad-avatar[data-variant="host"]::before {
+  content: none;
+}
+.ad-avatar[data-variant="host"]:hover {
+  box-shadow: none;
+  filter: brightness(1.18) drop-shadow(0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4));
+}
+.ad-host-seal {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+/* The seal is a stack of drawings in paint order: the static ones are painted once, and each
+   ring is a layer of its own that only turns (around the ring's centre, 65 of 128). */
+.ad-host-seal > svg {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.ad-host-seal > svg[data-host-spin] {
+  transform-origin: 50.78125% 50.78125%;
+  will-change: transform;
+  animation: ad-host-spin linear infinite;
+}
+@keyframes ad-host-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-ad-motion="on"]) .ad-host-seal > svg[data-host-spin] {
+    animation: none;
+  }
+}
+/* A photo fills the face; inside the host seal it takes the crown's place. */
+.ad-avatar-photo {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+/* The tag sits on the ring's lower edge like a name plate. */
+.ad-avatar-badge {
+  position: absolute;
+  bottom: -0.35em;
+  left: 50%;
+  translate: -50% 0;
+  padding: 0.15em 0.6em;
+  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.6);
+  border-radius: 999px;
+  background: var(--ad-neutral-950);
+  color: var(--ad-secondary-100);
+  font-size: max(0.5625rem, calc(var(--ad-avatar) * 0.12));
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  line-height: 1.3;
+  text-shadow: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+/* Presence: a lit dot on the lower right of the ring. */
+.ad-avatar-presence {
+  position: absolute;
+  right: 4%;
+  bottom: 4%;
+  width: max(0.55rem, calc(var(--ad-avatar) * 0.24));
+  aspect-ratio: 1;
+  border: 0.125rem solid var(--ad-neutral-950);
+  border-radius: 50%;
+  background: var(--ad-success);
+  box-shadow: 0 0 0.4rem var(--ad-success);
+}
+.ad-avatar-presence[data-presence="busy"] {
+  background: var(--ad-primary);
+  box-shadow: 0 0 0.4rem var(--ad-primary);
+}
+.ad-avatar-presence[data-presence="offline"] {
+  background: var(--ad-neutral-600, #555);
+  box-shadow: none;
+}

package/dist/components/layout/BrandMark/BrandMark.d.ts

@@ -0,0 +1,2 @@
+import { type CommonProps } from "../../../core/base";
+export declare const BrandMark: (p: CommonProps) => import("react").JSX.Element;

package/dist/components/layout/BrandMark/styles.css

@@ -0,0 +1,39 @@
+/* Styles owned by BrandMark: the logo breathes in neon and its strokes shift from ruby to white. */
+.ad-brand-mark {
+  position: relative;
+  display: inline-grid;
+  justify-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  color: var(--ad-secondary);
+}
+.ad-brand-mark > svg {
+  width: min(15rem, 100%);
+  height: auto;
+  filter: hue-rotate(var(--ad-hue-shift, 0deg)) drop-shadow(0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.45));
+  animation: ad-brand-breathe 4s ease-in-out infinite;
+}
+.ad-brand-mark > small {
+  display: block;
+  opacity: 0.8;
+  font-size: 0.5rem;
+  letter-spacing: 0.28rem;
+  color: var(--ad-secondary-200);
+  animation: ad-brand-spacing 4s ease-in-out infinite;
+  will-change: transform, opacity;
+}
+@keyframes ad-brand-breathe {
+  0%,
+  100% {
+    opacity: 0.82;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes ad-brand-spacing {
+  50% {
+    transform: scaleX(1.12);
+    opacity: 1;
+  }
+}

package/dist/components/layout/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+export declare const ButtonGroup: {
+    (p: import("../../..").CommonProps): import("react").DetailedReactHTMLElement<{
+        id: string | undefined;
+        className: string;
+        style: import("../../..").TokenStyle | undefined;
+        "data-ad-component": string;
+        "data-ad-material": import("../../..").Material | undefined;
+        "data-ad-size": import("../../..").ControlSize | undefined;
+        "data-ad-tone": import("../../..").Tone | undefined;
+    }, HTMLElement>;
+    displayName: string;
+};

package/dist/components/layout/ButtonGroup/styles.css

@@ -0,0 +1,36 @@
+/* ButtonGroup is a premium action tray: one shared surface with distinct full buttons. */
+.ad-button-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.42rem;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0.4rem;
+  border: 0.0625rem solid transparent;
+  border-radius: calc(var(--ad-radius) + 0.32rem);
+  background:
+    linear-gradient(180deg, var(--ad-neutral-850), var(--ad-neutral-900) 70%, var(--ad-neutral-900)) padding-box,
+    linear-gradient(135deg, rgb(from var(--ad-secondary) r g b / 0.33), rgb(from var(--ad-primary-700) r g b / 0.21) 52%, rgb(from var(--ad-secondary) r g b / 0.17)) border-box;
+  box-shadow:
+    inset 0 0.075rem 0.15rem #ffffff20,
+    inset 0 -0.42rem 0.9rem #0008,
+    0 0.38rem 0.9rem #0008,
+    0 0 1rem rgb(from var(--ad-primary) r g b / 0.08);
+  isolation: isolate;
+}
+.ad-button-group > .ad {
+  flex: none;
+  margin: 0;
+}
+.ad-button-group > .ad-button {
+  min-inline-size: max-content;
+}
+.ad-button-group > .ad-icon-button,
+.ad-button-group > .ad-toggle-button {
+  justify-self: center;
+}
+@media (max-width: 30rem) {
+  .ad-button-group {
+    flex-wrap: wrap;
+  }
+}

package/dist/components/layout/Card/Card.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { CardProps } from "../shared";
+export declare const Card: ({ as, border, shell, padding, title, description, eyebrow, icon, actions, level, children, ...p }: CardProps) => React.DetailedReactHTMLElement<{
+    ref: React.RefObject<HTMLElement | null>;
+    "data-ad-padding": "sm" | "md" | "lg" | "none";
+    onPointerMove: (event: React.PointerEvent<HTMLElement>) => void;
+    id: string | undefined;
+    className: string;
+    style: import("../../..").TokenStyle | undefined;
+    "data-ad-component": string;
+    "data-ad-material": import("../../..").Material | undefined;
+    "data-ad-size": import("../../..").ControlSize | undefined;
+    "data-ad-tone": import("../../..").Tone | undefined;
+}, HTMLElement>;

package/dist/components/layout/Card/styles.css

@@ -0,0 +1,37 @@
+.ad-card {
+  min-width: 0;
+  position: relative;
+}
+.ad-card[data-ad-padding="none"] {
+  padding: 0;
+}
+.ad-card[data-ad-padding="sm"] {
+  padding: var(--ad-space-2);
+}
+.ad-card[data-ad-padding="md"] {
+  padding: var(--ad-space-4);
+}
+.ad-card[data-ad-padding="lg"] {
+  padding: var(--ad-space-6);
+}
+.ad-card > .ad-header {
+  margin-bottom: var(--ad-space-3);
+}
+/* Pointer spotlight: a soft ruby light under the cursor, faded in on hover. */
+.ad-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    22rem circle at var(--ad-spot-x, 50%) var(--ad-spot-y, 0%),
+    rgb(from var(--ad-primary) r g b / 0.08),
+    transparent 60%
+  );
+  opacity: 0;
+  transition: opacity 0.35s;
+  pointer-events: none;
+}
+.ad-card:hover::after {
+  opacity: 1;
+}

package/dist/components/layout/DialogActions/DialogActions.d.ts

@@ -0,0 +1,12 @@
+export declare const DialogActions: {
+    (p: import("../../..").CommonProps): import("react").DetailedReactHTMLElement<{
+        id: string | undefined;
+        className: string;
+        style: import("../../..").TokenStyle | undefined;
+        "data-ad-component": string;
+        "data-ad-material": import("../../..").Material | undefined;
+        "data-ad-size": import("../../..").ControlSize | undefined;
+        "data-ad-tone": import("../../..").Tone | undefined;
+    }, HTMLElement>;
+    displayName: string;
+};

package/dist/components/layout/DialogActions/styles.css

@@ -0,0 +1,31 @@
+/* Styles owned by DialogActions. */
+.ad-dialog-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.625rem;
+  align-items: center;
+}
+.ad-dialog-actions > .ad-button {
+  height: auto;
+  min-height: var(--ad-size-h);
+  padding-block: 0.6rem;
+}
+.ad-dialog-actions .ad-button-label {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+/* Actions arrive last, one after another. */
+.ad-dialog[open] .ad-dialog-actions > * {
+  animation: ad-dialog-action 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) both;
+  animation-delay: 0.22s;
+}
+.ad-dialog[open] .ad-dialog-actions > :nth-child(2) {
+  animation-delay: 0.3s;
+}
+@keyframes ad-dialog-action {
+  from {
+    opacity: 0;
+    transform: translateY(0.6rem) scale(0.95);
+  }
+}

package/dist/components/layout/DialogBody/DialogBody.d.ts

@@ -0,0 +1,12 @@
+export declare const DialogBody: {
+    (p: import("../../..").CommonProps): import("react").DetailedReactHTMLElement<{
+        id: string | undefined;
+        className: string;
+        style: import("../../..").TokenStyle | undefined;
+        "data-ad-component": string;
+        "data-ad-material": import("../../..").Material | undefined;
+        "data-ad-size": import("../../..").ControlSize | undefined;
+        "data-ad-tone": import("../../..").Tone | undefined;
+    }, HTMLElement>;
+    displayName: string;
+};

package/dist/components/layout/DialogBody/styles.css

@@ -0,0 +1,28 @@
+/* Styles owned by DialogBody. */
+.ad-dialog-body {
+  min-height: 0;
+  max-height: calc(100dvh - 10rem);
+  overflow-y: auto;
+  overflow-x: clip;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ad-primary) transparent;
+  padding: 1.125rem 0;
+  padding-inline-end: var(--ad-space-2);
+}
+.ad-dialog-body p {
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--ad-muted);
+  margin: 0 0 0.875rem;
+}
+/* Inside an opening dialog the body fades in right after the window. */
+.ad-dialog[open] .ad-dialog-body {
+  animation: ad-dialog-part 0.45s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes ad-dialog-part {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}

package/dist/components/layout/Divider/Divider.d.ts

@@ -0,0 +1,2 @@
+import { type DividerProps } from "../shared";
+export declare const Divider: (p: DividerProps) => import("react").JSX.Element;

package/dist/components/layout/Divider/styles.css

@@ -0,0 +1,58 @@
+/* Styles owned by Divider. */
+.ad-divider {
+  height: 0.0625rem;
+  width: 100%;
+  margin: 0.9375rem 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(from var(--ad-primary-600) r g b / 0.34) 15%,
+    rgb(from var(--ad-primary-600) r g b / 0.34) 85%,
+    transparent
+  );
+}
+.ad-divider[aria-orientation="vertical"] {
+  width: 0.0625rem;
+  height: 1.875rem;
+  margin: 0 0.5rem;
+}
+/* A pulse of light travels along the line now and then. */
+.ad-divider {
+  position: relative;
+  overflow: hidden;
+}
+.ad-divider::after {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 40%;
+  background: linear-gradient(90deg, transparent, var(--ad-secondary-100), var(--ad-primary), transparent);
+  transform: translateX(-100%);
+  animation: ad-divider-pulse 6s ease-in-out infinite;
+}
+.ad-divider[aria-orientation="vertical"]::after {
+  inset: 0 0 auto;
+  width: auto;
+  height: 40%;
+  background: linear-gradient(180deg, transparent, var(--ad-secondary-100), var(--ad-primary), transparent);
+  transform: translateY(-100%);
+  animation-name: ad-divider-pulse-y;
+}
+@keyframes ad-divider-pulse {
+  0%,
+  55% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
+@keyframes ad-divider-pulse-y {
+  0%,
+  55% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(250%);
+  }
+}

package/dist/components/layout/FloatingPanel/FloatingPanel.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+import { type FloatingPanelOptions } from "./useFloatingPanel";
+export interface FloatingPanelProps extends CommonProps, FloatingPanelOptions {
+    /** Resize handles on every edge and corner while the panel is selected. */
+    resizable?: boolean;
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * A panel that floats over the page: drag it by its surface, select it with a click to resize it
+ * from any edge or corner. Focus the panel and use arrow keys to move; Shift+arrow resizes.
+ * Where it starts is up to its class; once moved, it keeps its place.
+ */
+export declare const FloatingPanel: ({ layout: saved, onLayoutChange, defaultSize, limits, onDragOutside, ignore, resizable, label, children, ...p }: FloatingPanelProps) => import("react").JSX.Element;

package/dist/components/layout/FloatingPanel/styles.css

@@ -0,0 +1,47 @@
+/* Styles owned by FloatingPanel: grab to move; selected, it shows a glowing edge and resize zones. */
+.ad-floating-panel {
+  position: fixed;
+  z-index: var(--ad-z-floating, 40);
+  touch-action: none;
+  cursor: grab;
+  border-radius: var(--ad-radius-lg, 1rem);
+  transition: box-shadow 0.25s;
+}
+.ad-floating-panel:active {
+  cursor: grabbing;
+}
+.ad-floating-panel[data-active] {
+  box-shadow:
+    0 0 0 0.0625rem rgb(from var(--ad-primary) r g b / 0.55),
+    0 0 1.5rem rgb(from var(--ad-primary) r g b / 0.25);
+}
+/* Invisible grab zones overlapping each edge and corner. */
+.ad-floating-panel-handle {
+  position: absolute;
+  z-index: 5;
+  touch-action: none;
+}
+.ad-floating-panel-handle:is([data-edge="n"], [data-edge="s"]) {
+  left: 0.9rem;
+  right: 0.9rem;
+  height: 0.65rem;
+  cursor: ns-resize;
+}
+.ad-floating-panel-handle:is([data-edge="e"], [data-edge="w"]) {
+  top: 0.9rem;
+  bottom: 0.9rem;
+  width: 0.65rem;
+  cursor: ew-resize;
+}
+.ad-floating-panel-handle[data-edge="n"] { top: -0.3rem; }
+.ad-floating-panel-handle[data-edge="s"] { bottom: -0.3rem; }
+.ad-floating-panel-handle[data-edge="e"] { right: -0.3rem; }
+.ad-floating-panel-handle[data-edge="w"] { left: -0.3rem; }
+.ad-floating-panel-handle:is([data-edge="ne"], [data-edge="nw"], [data-edge="se"], [data-edge="sw"]) {
+  width: 1rem;
+  height: 1rem;
+}
+.ad-floating-panel-handle[data-edge="nw"] { top: -0.3rem; left: -0.3rem; cursor: nwse-resize; }
+.ad-floating-panel-handle[data-edge="se"] { bottom: -0.3rem; right: -0.3rem; cursor: nwse-resize; }
+.ad-floating-panel-handle[data-edge="ne"] { top: -0.3rem; right: -0.3rem; cursor: nesw-resize; }
+.ad-floating-panel-handle[data-edge="sw"] { bottom: -0.3rem; left: -0.3rem; cursor: nesw-resize; }

package/dist/components/layout/FloatingPanel/useFloatingPanel.d.ts

@@ -0,0 +1,54 @@
+import { type KeyboardEvent, type PointerEvent as ReactPointerEvent, type RefObject } from "react";
+/** Where a floating panel sits, in window pixels. */
+export interface PanelLayout {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+/** A point on the screen, in screen pixels. */
+export interface ScreenPoint {
+    screenX: number;
+    screenY: number;
+}
+/** Which edges a resize handle moves; a corner combines its two edges. */
+export type ResizeEdge = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+export declare const resizeEdges: readonly ResizeEdge[];
+export interface FloatingPanelOptions {
+    /** The saved placement, or null for the panel's own default place. */
+    layout?: PanelLayout | null;
+    /** Called once a move or resize ends, with the new placement to keep. */
+    onLayoutChange?(layout: PanelLayout): void;
+    /** Size to start from before the panel can be measured (it has not been laid out yet). */
+    defaultSize?: {
+        width: number;
+        height: number;
+    };
+    /** Size limits while resizing. */
+    limits?: {
+        minWidth?: number;
+        minHeight?: number;
+        maxWidth?: number;
+        maxHeight?: number;
+    };
+    /** The panel was dragged out of the window (e.g. to become a window of its own). */
+    onDragOutside?(screenBounds: PanelLayout, pointer: ScreenPoint): void;
+    /** More elements that keep their own pointer gestures instead of moving the panel. */
+    ignore?: string;
+}
+export declare const panelControls = "button, a, input, select, textarea, [role=slider], [role=button], [role=switch], [role=listbox], [contenteditable=true], .ad-rotary-knob";
+/**
+ * Click a panel to select it, drag it anywhere in the window, resize it from any edge or corner,
+ * drag it past the window's edge to hand it over. The placement stays on screen when the window
+ * shrinks; the caller keeps it (storage, preferences) through `onLayoutChange`.
+ */
+export declare const useFloatingPanel: (frameRef: RefObject<HTMLElement | null>, options?: FloatingPanelOptions) => {
+    layout: PanelLayout | null;
+    active: boolean;
+    beginMove: (event: ReactPointerEvent<HTMLElement>) => void;
+    beginResize: (edge: ResizeEdge) => (event: ReactPointerEvent<HTMLElement>) => void;
+    handleMove: (event: ReactPointerEvent<HTMLElement>) => void;
+    handleUp: () => void;
+    handleCancel: () => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>, resizable?: boolean) => void;
+};

package/dist/components/layout/Grid/Grid.d.ts

@@ -0,0 +1,24 @@
+import type { ElementType, HTMLAttributes } from "react";
+import { type Breakpoint, type Responsive, type Spacing } from "../../../core/responsive";
+export type GridBreakpoint = Breakpoint;
+export type GridResponsive<T> = Responsive<T>;
+export type GridSpacing = Spacing;
+export type GridAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type GridJustify = "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly";
+export interface GridProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+    as?: ElementType;
+    columns?: GridResponsive<number | string>;
+    gap?: GridResponsive<GridSpacing>;
+    rowGap?: GridResponsive<GridSpacing>;
+    columnGap?: GridResponsive<GridSpacing>;
+    minChildWidth?: string;
+    dense?: boolean;
+    align?: GridResponsive<GridAlign>;
+    justify?: GridResponsive<GridJustify>;
+    span?: GridResponsive<number | "full">;
+    rowSpan?: GridResponsive<number>;
+    columnStart?: GridResponsive<number>;
+    rowStart?: GridResponsive<number>;
+}
+/** A Grid with placement props and no columns renders as a grid item, not a container. */
+export declare function Grid({ as: Component, columns, gap, rowGap, columnGap, minChildWidth, dense, align, justify, span, rowSpan, columnStart, rowStart, className, style, ...props }: GridProps): import("react").JSX.Element;