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

package/dist/components/controls/Tabs/styles.css

@@ -0,0 +1,239 @@
+/* Styles owned by Tabs: a dark track with a neon rail, and a ruby "blade" that flies to the selected tab. */
+.ad-tabs {
+  --ad-tabs-pad: 0.25rem;
+  --ad-tabs-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
+  position: relative;
+  display: flex;
+  gap: 0.125rem;
+  min-width: 0;
+  padding: var(--ad-tabs-pad) var(--ad-tabs-pad)
+    calc(var(--ad-tabs-pad) + 0.3rem);
+  border: 0.0625rem solid rgb(from var(--ad-primary-600) r g b / 0.24);
+  border-radius: calc(var(--ad-size-radius) + 0.25rem);
+  background:
+    linear-gradient(180deg, #ffffff06, transparent 40%),
+    linear-gradient(180deg, var(--ad-neutral-900), var(--ad-neutral-950));
+  box-shadow:
+    inset 0 0.0625rem 0.1875rem #000c,
+    inset 0 -0.0625rem 0 #ffffff08;
+  isolation: isolate;
+  /* Tabs keep their labels whole; when they do not fit, the row scrolls. */
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.ad-tabs::-webkit-scrollbar {
+  display: none;
+}
+/* The rail: a dim line along the bottom that lights up under the blade. */
+.ad-tabs::after {
+  content: "";
+  position: absolute;
+  z-index: -3;
+  left: calc(var(--ad-tabs-pad) + 0.5rem);
+  right: calc(var(--ad-tabs-pad) + 0.5rem);
+  bottom: 0.25rem;
+  height: 0.0625rem;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(from var(--ad-primary) r g b / 0.19) 15%,
+    rgb(from var(--ad-primary) r g b / 0.19) 85%,
+    transparent
+  );
+}
+.ad-tabs > .ad-tab {
+  flex: 1 0 auto;
+}
+
+/* Blade geometry: chamfered corners and a notch cut into the bottom edge. */
+:is(.ad-tabs, .ad-tab) {
+  --ad-blade-cut: calc(var(--ad-size-radius) * 0.75);
+  --ad-blade-notch: 0.4rem;
+  --ad-blade: polygon(
+    var(--ad-blade-cut) 0,
+    calc(100% - var(--ad-blade-cut)) 0,
+    100% var(--ad-blade-cut),
+    100% calc(100% - var(--ad-blade-cut)),
+    calc(100% - var(--ad-blade-cut)) 100%,
+    calc(50% + var(--ad-blade-notch)) 100%,
+    50% calc(100% - var(--ad-blade-notch) * 0.75),
+    calc(50% - var(--ad-blade-notch)) 100%,
+    var(--ad-blade-cut) 100%,
+    0 calc(100% - var(--ad-blade-cut)),
+    0 var(--ad-blade-cut)
+  );
+}
+
+.ad-tabs-indicator,
+.ad-tabs-trail {
+  position: absolute;
+  top: var(--ad-tabs-pad);
+  bottom: calc(var(--ad-tabs-pad) + 0.3rem);
+  left: 0;
+  width: var(--ad-tabs-w);
+  transform: translateX(var(--ad-tabs-x));
+  pointer-events: none;
+}
+.ad-tabs-indicator {
+  z-index: -1;
+  transition:
+    transform 0.55s var(--ad-tabs-spring),
+    width 0.45s var(--ad-tabs-spring),
+    scale 0.3s ease-out;
+}
+/* The blade breathes: a soft glow under it swells and settles (opacity only; the blur is still). */
+.ad-tabs-indicator::after {
+  content: "";
+  position: absolute;
+  inset: -0.35rem -0.25rem -0.15rem;
+  z-index: -1;
+  border-radius: var(--ad-size-radius);
+  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.55), transparent);
+  filter: blur(0.45rem);
+  opacity: 0;
+  animation: ad-tabs-breathe 3.2s ease-in-out infinite;
+  will-change: opacity;
+}
+/* The blade's glow, drawn once: a still copy of its shape under it carries the shadows, so the
+   glint and the breath above never make them re-blur. (A filter on the clipped shape itself
+   would be clipped away, hence the wrapper.) */
+.ad-tabs-halo {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  filter: drop-shadow(0 0 0.4rem rgb(from var(--ad-primary) r g b / 0.4))
+    drop-shadow(0 0.2rem 0.6rem rgb(from var(--ad-primary) r g b / 0.2));
+}
+.ad-tabs-halo::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  clip-path: var(--ad-blade);
+  background: var(--ad-primary-800);
+}
+/* Neon edge: the blade's own background is the edge, a glint runs along it. */
+.ad-tabs-blade {
+  position: absolute;
+  inset: 0;
+  isolation: isolate;
+  clip-path: var(--ad-blade);
+}
+/* The edge: two periods of the glint gradient side by side, sliding one period to the right.
+   It draws exactly what a moving background-position drew, but only moves a layer. */
+.ad-tabs-blade-edge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  width: 600%;
+  background: linear-gradient(
+      100deg,
+      var(--ad-secondary) 0%,
+      var(--ad-secondary-200) 38%,
+      var(--ad-neutral-200) 48%,
+      var(--ad-secondary-200) 58%,
+      var(--ad-primary-600) 100%
+    )
+    0 0 / 50% 100%;
+  transform: translateX(-50%);
+  animation: ad-tabs-glint 3.6s linear infinite;
+  will-change: transform;
+}
+/* Fill, one hairline inside the edge, with a hot core near the notch. */
+.ad-tabs-blade::before {
+  content: "";
+  position: absolute;
+  inset: 0.0625rem;
+  clip-path: var(--ad-blade);
+  background:
+    radial-gradient(60% 90% at 50% 120%, rgb(from var(--ad-primary) r g b / 0.67), transparent 70%),
+    linear-gradient(180deg, #ffffff22, transparent 35%),
+    linear-gradient(180deg, var(--ad-primary-700), var(--ad-primary-800) 62%, var(--ad-primary-900));
+}
+/* A light sweep crosses the fill now and then. */
+.ad-tabs-blade::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  clip-path: var(--ad-blade);
+  background: linear-gradient(105deg, transparent 35%, #ffffff30 48%, transparent 60%);
+  transform: translateX(-100%);
+  animation: ad-tabs-sweep 5.5s ease-in-out infinite;
+}
+/* Comet trail: a blurred copy that lags behind while the blade travels. */
+.ad-tabs-trail {
+  z-index: -2;
+  border-radius: var(--ad-size-radius);
+  background: radial-gradient(closest-side, rgb(from var(--ad-primary) r g b / 0.5), transparent);
+  filter: blur(0.6rem);
+  opacity: 0;
+  transition:
+    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
+    width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 0.5s;
+}
+/* Rail glow under the blade, with a spark that drops from the notch. */
+.ad-tabs-rail {
+  position: absolute;
+  z-index: -2;
+  left: 0;
+  bottom: 0.1875rem;
+  width: var(--ad-tabs-w);
+  height: 0.1875rem;
+  transform: translateX(var(--ad-tabs-x));
+  border-radius: 999rem;
+  background: radial-gradient(closest-side, var(--ad-neutral-200), var(--ad-primary) 45%, transparent);
+  box-shadow: 0 0 0.75rem 0.15rem rgb(from var(--ad-primary) r g b / 0.53);
+  pointer-events: none;
+  transition:
+    transform 0.6s var(--ad-tabs-spring),
+    width 0.5s var(--ad-tabs-spring);
+}
+
+/* While travelling the blade squashes and flares, the trail shows. */
+.ad-tabs[data-moving] .ad-tabs-indicator {
+  scale: 1.04 0.86;
+  filter: drop-shadow(0 0 0.8rem rgb(from var(--ad-primary) r g b / 0.67)) brightness(1.25);
+}
+.ad-tabs[data-moving] .ad-tabs-trail {
+  opacity: 1;
+}
+
+/* Inside Tabs the blade is the selection, so selected tabs draw no fill of their own. */
+.ad-tabs > .ad-tab[aria-selected="true"]::before {
+  display: none;
+}
+
+@keyframes ad-tabs-glint {
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes ad-tabs-sweep {
+  0%,
+  55% {
+    transform: translateX(-100%);
+  }
+  85%,
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes ad-tabs-breathe {
+  50% {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ad-tabs-indicator,
+  .ad-tabs-trail,
+  .ad-tabs-rail,
+  .ad-tabs-blade-edge,
+  .ad-tabs-blade::after,
+  .ad-tabs-indicator::after {
+    transition: none;
+    animation: none;
+  }
+}

package/dist/components/controls/TagInput/TagInput.d.ts

@@ -0,0 +1,24 @@
+import { type CommonProps } from "../../../core/base";
+import type { InputVariant } from "../shared";
+export interface TagInputProps extends CommonProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (tags: string[]) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: string;
+    /** Offered while typing; a click or Enter adds one. */
+    suggestions?: string[];
+    /** The most tags allowed. */
+    max?: number;
+    /** Checks a new tag; a returned message refuses it and is shown under the field. */
+    validate?: (tag: string) => string | undefined;
+    icon?: string;
+    disabled?: boolean;
+    required?: boolean;
+    variant?: InputVariant;
+    labelPlacement?: "top" | "floating";
+}
+/** Tags typed into a field: Enter, comma or a pasted list adds them, Backspace takes the last one back. */
+export declare function TagInput({ value: controlled, defaultValue, onValueChange, suggestions, max, validate, icon, placeholder, ...p }: TagInputProps): import("react").JSX.Element;

package/dist/components/controls/TagInput/styles.css

@@ -0,0 +1,24 @@
+/* Styles owned by TagInput (and the chip row it shares with PeoplePicker). */
+.ad-chip-field-items {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  width: 100%;
+  min-height: calc(var(--ad-size-h, 2.5rem) - 0.75rem);
+}
+.ad-input-base .ad-chip-field-input {
+  flex: 1 1 6rem;
+  width: auto;
+  min-height: 1.75rem;
+}
+.ad-tag-input {
+  display: grid;
+  gap: 0.45rem;
+  min-width: 0;
+}
+.ad-tag-input-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}

package/dist/components/controls/TextArea/TextArea.d.ts

@@ -0,0 +1,2 @@
+import type { TextAreaProps } from "../shared";
+export declare const TextArea: ({ value, defaultValue, onValueChange, label, description, error, startAdornment, endAdornment, className, size, variant, labelPlacement, resize, tone: _tone, material: _material, style, ...textarea }: TextAreaProps) => import("react").JSX.Element;

package/dist/components/controls/TextArea/styles.css

@@ -0,0 +1,15 @@
+/* Styles owned by TextArea: the corner drags vertically by default; `both` lets the field
+   follow the width the reader drags it to, `none` locks it. */
+.ad-text-area--resize-both .ad-input-base {
+  width: fit-content;
+  max-width: 100%;
+}
+.ad-text-area--resize-both textarea {
+  resize: both;
+  width: min(30rem, 100%);
+  min-width: 10rem;
+  max-width: 100%;
+}
+.ad-text-area--resize-none textarea {
+  resize: none;
+}

package/dist/components/controls/TextField/TextField.d.ts

@@ -0,0 +1,2 @@
+import type { TextFieldProps } from "../shared";
+export declare const TextField: ({ label, description, error, clearable, startAdornment, endAdornment, value, defaultValue, onValueChange, inputRef, className, size, variant, labelPlacement, tone: _tone, material: _material, style, children: _children, ...input }: TextFieldProps) => import("react").JSX.Element;

package/dist/components/controls/ThemePicker/ThemePicker.d.ts

@@ -0,0 +1,24 @@
+import { type CommonProps } from "../../../core/base";
+import { type ThemeName } from "../../foundation/ThemeProvider/ThemeProvider";
+export type { ThemeName };
+/** A theme shown as a card: its picture, name, a line about it and its own colour. */
+export interface ThemePickerOption<V extends string = string> {
+    value: V;
+    label: string;
+    description?: string;
+    /** Picture of the theme (with transparency); the chosen one gets a moving shine. */
+    image?: string;
+    /** The theme's own colour for the card's edge and glow. */
+    color?: string;
+}
+export interface ThemePickerProps<V extends string = ThemeName> extends CommonProps {
+    value?: V;
+    defaultValue?: V;
+    onValueChange?: (value: V) => void;
+    /** Own themes as picture cards; without them the built-in themes are offered as swatches. */
+    options?: readonly ThemePickerOption<V>[];
+    disabled?: boolean;
+    label?: string;
+}
+/** Choosing a theme: compact swatches for the built-in themes, or a gallery of picture cards. */
+export declare function ThemePicker<V extends string = ThemeName>(p: ThemePickerProps<V>): import("react").JSX.Element;

package/dist/components/controls/ThemePicker/styles.css

@@ -0,0 +1,128 @@
+.ad-theme-picker {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--ad-space-2);
+  max-width: 100%;
+}
+.ad-theme-picker > .ad-button {
+  flex: none;
+}
+.ad-theme-picker > .ad-button[aria-checked="true"] {
+  --ad-btn-border-a: var(--ad-pink);
+  --ad-btn-glow: rgb(from var(--ad-primary) r g b / 0.42);
+}
+/* Names are short, so the label need not clip: the swatch and its glow stay round. */
+.ad-theme-picker .ad-button-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  overflow: visible;
+}
+.ad-theme-swatch {
+  flex: none;
+  width: 0.9em;
+  height: 0.9em;
+  border-radius: 50%;
+  box-shadow:
+    0 0 0 0.125rem #0007,
+    0 0 0.45em currentColor;
+}
+/* The chosen theme pulses its swatch; swatches hop on hover. */
+.ad-theme-swatch {
+  transition: transform 0.35s cubic-bezier(0.34, 1.6, 0.5, 1);
+}
+.ad-theme-picker > .ad-button:hover .ad-theme-swatch {
+  transform: translateY(-0.15em) scale(1.25);
+}
+.ad-theme-picker > .ad-button[aria-checked="true"] .ad-theme-swatch {
+  position: relative;
+}
+.ad-theme-picker > .ad-button[aria-checked="true"] .ad-theme-swatch::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: 0 0 0 0.3em #ffffff22, 0 0 1em currentColor;
+  opacity: 0;
+  animation: ad-swatch-pulse 2s ease-in-out infinite;
+}
+@keyframes ad-swatch-pulse {
+  50% {
+    opacity: 1;
+  }
+}
+/* Gallery: one picture card per theme, edged and lit in that theme's colour. */
+.ad-theme-picker[data-gallery] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
+  gap: var(--ad-space-3);
+}
+.ad-theme-card {
+  --ad-theme-card: var(--ad-primary);
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  aspect-ratio: 5 / 4;
+  padding: 0;
+  overflow: hidden;
+  border: 0.0625rem solid rgb(from var(--ad-theme-card) r g b / 0.38);
+  border-radius: 0.8rem;
+  background: linear-gradient(135deg, var(--ad-neutral-900), var(--ad-neutral-950));
+  color: var(--ad-text);
+  font: inherit;
+  cursor: pointer;
+  transition: filter 0.18s, box-shadow 0.18s, border-color 0.18s;
+}
+.ad-theme-card:hover {
+  filter: brightness(1.13);
+}
+.ad-theme-card:disabled {
+  cursor: not-allowed;
+  filter: grayscale(0.5);
+}
+.ad-theme-card[aria-checked="true"] {
+  border-color: color-mix(in oklch, var(--ad-theme-card) 75%, #fff);
+  box-shadow:
+    0 0 0.35rem rgb(from var(--ad-theme-card) r g b / 0.58),
+    0 0 1rem rgb(from var(--ad-theme-card) r g b / 0.28);
+}
+.ad-theme-card-preview {
+  display: grid;
+  place-items: center;
+  min-height: 0;
+  padding: var(--ad-space-2);
+  background: radial-gradient(ellipse at 50% 76%, rgb(from var(--ad-theme-card) r g b / 0.18), transparent 72%);
+}
+.ad-theme-card-preview > :is(img, svg, .ad-image-shine) {
+  width: auto;
+  max-width: 100%;
+  height: 100%;
+  aspect-ratio: 1;
+  object-fit: contain;
+}
+.ad-theme-card-caption {
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  padding: var(--ad-space-2);
+  background: linear-gradient(180deg, transparent, var(--ad-neutral-950));
+}
+.ad-theme-card-caption > span {
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  text-align: center;
+}
+.ad-theme-card-check {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: grid;
+  place-items: center;
+  width: 1.6rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--ad-theme-card);
+  color: #fff;
+  box-shadow: 0 0 0.6rem var(--ad-theme-card);
+}

package/dist/components/controls/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,2 @@
+import { type ToggleButtonProps } from "../shared";
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/controls/ToggleButton/styles.css

@@ -0,0 +1,49 @@
+/* ToggleButton: active is intentionally identical to Primary, inactive to Secondary. */
+.ad-toggle-button[aria-pressed="true"] {
+  background:
+    linear-gradient(
+        180deg,
+        var(--ad-btn-bg-top),
+        var(--ad-btn-bg-mid) 54%,
+        var(--ad-btn-bg-bottom)
+      )
+      padding-box,
+    linear-gradient(
+        135deg,
+        var(--ad-btn-border-a),
+        var(--ad-btn-border-b) 48%,
+        rgb(from var(--ad-secondary) r g b / 0.54) 78%,
+        rgb(from var(--ad-primary-700) r g b / 0.31)
+      )
+      border-box;
+  box-shadow:
+    inset 0 0.075rem 0.12rem var(--ad-btn-inner),
+    inset 0 -0.42rem 0.95rem var(--ad-btn-bottom),
+    0 0.32rem 0.75rem #0008,
+    0 0 1.15rem var(--ad-btn-glow);
+  color: var(--ad-neutral-200);
+  filter: none;
+}
+.ad-toggle-button[aria-pressed="false"] {
+  filter: saturate(0.88) brightness(0.94);
+}
+/* Switching on pops the button and spins its icon, then it settles into the breathing glow. */
+.ad-toggle-button[aria-pressed="true"] {
+  animation:
+    ad-toggle-pop 0.45s cubic-bezier(0.34, 1.6, 0.5, 1),
+    ad-btn-breathe 3.1s 0.45s ease-in-out infinite;
+}
+.ad-toggle-button[aria-pressed="true"] > .ad-icon {
+  animation: ad-toggle-icon 0.55s cubic-bezier(0.34, 1.6, 0.5, 1);
+}
+@keyframes ad-toggle-pop {
+  40% {
+    scale: 1.08;
+    box-shadow: 0 0 1.6rem rgb(from var(--ad-primary) r g b / 0.67);
+  }
+}
+@keyframes ad-toggle-icon {
+  from {
+    transform: rotate(-120deg) scale(0.4);
+  }
+}

package/dist/components/controls/internal.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import type { CommonProps, Material, TokenStyle, Variant } from "../../core/base";
+export declare const variantMaterial: Record<Variant, Material>;
+/** An option as the list draws it: a string key and everything it shows. */
+export type Option = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    icon?: string;
+    avatar?: {
+        name: string;
+        src?: string;
+    };
+    description?: ReactNode;
+    group?: string;
+    /** Replaces the whole row's content. */
+    content?: ReactNode;
+};
+export declare const toOption: (option: string | Option) => Option;
+/** Field label with the required mark, used above the field or floating inside it. */
+export declare const fieldLabel: (label: ReactNode, required?: boolean) => import("react").JSX.Element;
+/**
+ * Ids that tie a control to its own label and message. The frame is a wrapping label (a click
+ * anywhere on the field focuses the control), but its text also holds the message and any
+ * adornment buttons, so the generated name points at the label text. Explicit ARIA names
+ * and descriptions take precedence over the generated connections.
+ */
+export declare const useFieldIds: (label: ReactNode, message: ReactNode, controlId?: string, aria?: Pick<CommonProps, "aria-label" | "aria-labelledby" | "aria-describedby">) => {
+    valueLabelledBy: string | undefined;
+    aria: {
+        "aria-label": string | undefined;
+        "aria-labelledby": string | undefined;
+        "aria-describedby": string | undefined;
+    };
+    label: string;
+    message: string;
+    control: string;
+    value: string;
+};
+export type FieldIds = ReturnType<typeof useFieldIds>;
+/** Keep a combobox's virtual focus visible without moving its typing focus or the page. */
+export declare function useActiveOption(listId: string, active: number, open: boolean): void;
+/** Label, control and description/error line shared by every text-like field. */
+export declare function FieldFrame({ className, style, label, required, description, error, ids, children, }: {
+    className: string;
+    style?: TokenStyle;
+    ids: FieldIds;
+    label?: ReactNode;
+    required?: boolean;
+    description?: ReactNode;
+    error?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Flat option rows shared by Select and Autocomplete; the chosen one carries a check mark. */
+export declare function OptionList({ id, options, selected, active, onChoose, onHover, }: {
+    id?: string;
+    options: Option[];
+    selected?: string;
+    active?: number;
+    onChoose: (value: string) => void;
+    onHover?: (index: number) => void;
+}): import("react").JSX.Element;