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

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

@@ -0,0 +1,70 @@
+/* Styles owned by Checkbox: the box pops and the check mark is drawn as a stroke. */
+.ad-checkbox .ad-toggle-track {
+  --ad-box: calc(var(--ad-size-h) * 0.5);
+  width: var(--ad-box);
+  height: var(--ad-box);
+  border-radius: calc(var(--ad-box) * 0.28);
+  transition:
+    background 0.2s,
+    border-color 0.2s,
+    box-shadow 0.25s;
+}
+.ad-checkbox .ad-toggle-track i {
+  display: none;
+}
+.ad-checkbox:hover input:not(:disabled) + .ad-toggle-track {
+  border-color: var(--ad-secondary);
+  box-shadow: 0 0 0.5rem rgb(from var(--ad-primary) r g b / 0.19);
+}
+.ad-checkbox input:checked + .ad-toggle-track {
+  border-color: var(--ad-secondary);
+  background: linear-gradient(180deg, var(--ad-primary), var(--ad-primary-600));
+  box-shadow:
+    inset 0 0.0625rem 0 rgb(from var(--ad-secondary-100) r g b / 0.53),
+    0 0 0.7rem rgb(from var(--ad-primary) r g b / 0.4);
+  animation: ad-check-pop 0.4s cubic-bezier(0.34, 1.6, 0.5, 1);
+}
+.ad-checkbox input:checked + .ad-toggle-track::after {
+  content: "";
+  position: absolute;
+  left: 28%;
+  top: 24%;
+  width: 46%;
+  height: 26%;
+  border-left: 0.125rem solid #fff;
+  border-bottom: 0.125rem solid #fff;
+  transform: rotate(-45deg);
+  filter: drop-shadow(0 0 0.15rem #fff8);
+  animation: ad-check-draw 0.35s 0.08s ease-out both;
+}
+.ad-checkbox input:disabled + .ad-toggle-track {
+  opacity: 0.45;
+}
+@keyframes ad-check-pop {
+  0% {
+    scale: 0.7;
+  }
+  60% {
+    scale: 1.15;
+  }
+}
+@keyframes ad-check-draw {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+/* Indeterminate: a lit box with a dash instead of the check. */
+.ad-checkbox input:indeterminate + .ad-toggle-track {
+  border-color: var(--ad-secondary);
+  background: linear-gradient(180deg, var(--ad-primary), var(--ad-primary-600));
+}
+.ad-checkbox input:indeterminate + .ad-toggle-track::after {
+  content: "";
+  position: absolute;
+  inset: 45% 24%;
+  border-radius: 999rem;
+  background: #fff;
+}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface ChipProps extends CommonProps {
+    label: ReactNode;
+    /** Icon before the label. */
+    icon?: string;
+    /** A person's picture before the label. */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
+    /** Shows a × that calls this. */
+    onRemove?: () => void;
+    removeLabel?: string;
+    /** Makes the chip a toggle, e.g. a filter. */
+    onClick?: () => void;
+    selected?: boolean;
+    disabled?: boolean;
+}
+/** A compact pill for a tag, a person or a filter: optional picture or icon, removable or pressable. */
+export declare function Chip({ label, icon, avatar, onRemove, removeLabel, onClick, selected, disabled, ...p }: ChipProps): import("react").JSX.Element;

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

@@ -0,0 +1,74 @@
+/* Styles owned by Chip: a glassy pill that pops in; the × lights up under the pointer. */
+.ad-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 1.75rem;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.45);
+  border-radius: var(--ad-radius-pill);
+  background: linear-gradient(180deg, rgb(from var(--ad-primary) r g b / 0.2), rgb(from var(--ad-primary-900) r g b / 0.35));
+  color: var(--ad-neutral-200);
+  font-size: var(--ad-font-size-body-sm);
+  line-height: 1.2;
+  animation: ad-chip-in 0.28s var(--ad-ease-spring) both;
+}
+.ad-chip[data-selected] {
+  border-color: var(--ad-secondary);
+  background: linear-gradient(180deg, var(--ad-primary-700), var(--ad-primary-900));
+  color: #fff;
+  box-shadow: 0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4);
+}
+.ad-chip[data-disabled] {
+  opacity: 0.5;
+}
+.ad-chip-body {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 0;
+  padding: 0.15rem 0.65rem;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  --ad-icon-size: 0.9rem;
+}
+button.ad-chip-body {
+  cursor: pointer;
+}
+.ad-chip-body:has(> .ad-avatar) {
+  padding-inline-start: 0.15rem;
+}
+.ad-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ad-chip:has(> .ad-chip-remove) > .ad-chip-body {
+  padding-inline-end: 0.2rem;
+}
+.ad-chip-remove {
+  display: grid;
+  place-items: center;
+  margin-inline-end: 0.2rem;
+  padding: 0.2rem;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  --ad-icon-size: 0.65rem;
+  transition: background var(--ad-duration-fast), color var(--ad-duration-fast);
+}
+.ad-chip-remove:hover,
+.ad-chip-remove:focus-visible {
+  background: rgb(from var(--ad-primary) r g b / 0.45);
+  color: #fff;
+  outline: none;
+}
+@keyframes ad-chip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}

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

@@ -0,0 +1,25 @@
+import { type KeyboardEvent, type ReactNode } from "react";
+import type { InputVariant } from "./shared";
+import type { Size } from "../../core/base";
+/** A field whose value is a row of chips followed by a text input (tags, people). */
+export declare function ChipField({ className, label, description, error, required, disabled, size, variant, labelPlacement, chips, query, placeholder, startAdornment, boxRef, onQueryChange, onKeyDown, onFocus, onBlur, inputProps, }: {
+    className: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    size?: Size;
+    variant?: InputVariant;
+    labelPlacement?: "top" | "floating";
+    chips: ReactNode;
+    query: string;
+    placeholder?: string;
+    startAdornment?: ReactNode;
+    boxRef?: React.Ref<HTMLDivElement>;
+    onQueryChange: (query: string) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { type CommonProps } from "../../../core/base";
+export interface ColorPickerProps extends CommonProps {
+    /** #rrggbb */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (hex: string) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Ready colours offered under the picker. */
+    swatches?: string[];
+    /** The panel itself, without a field and a popover (e.g. inside a theme editor). */
+    inline?: boolean;
+    disabled?: boolean;
+}
+/** A colour field: its swatch and code; a click opens the picker panel. With `inline` the panel stands alone. */
+export declare function ColorPicker({ value: controlled, defaultValue, onValueChange, swatches, inline, ...p }: ColorPickerProps): import("react").JSX.Element;

package/dist/components/controls/ColorPicker/color.d.ts

@@ -0,0 +1,9 @@
+/** Colour arithmetic for the picker: hex ⇄ HSV. */
+export type Hsv = {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const normalizeHex: (value: string) => string | null;
+export declare const hexToHsv: (hex: string) => Hsv;
+export declare const hsvToHex: ({ h, s, v }: Hsv) => string;

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

@@ -0,0 +1,103 @@
+/* Styles owned by ColorPicker: a saturation/brightness square, a hue strip, the code and swatches. */
+.ad-color-picker {
+  min-width: 0;
+}
+.ad-color-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.65rem;
+  width: min(15rem, calc(100vw - 3rem));
+}
+.ad-color-picker[data-inline] .ad-color-panel {
+  width: min(100%, 18rem);
+}
+.ad-color-area {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--ad-radius);
+  background:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, var(--ad-color-hue));
+  cursor: crosshair;
+  touch-action: none;
+}
+.ad-color-hue {
+  position: relative;
+  height: 0.85rem;
+  border-radius: var(--ad-radius-pill);
+  background: linear-gradient(90deg, red, #ff0, lime, cyan, blue, #f0f, red);
+  cursor: ew-resize;
+  touch-action: none;
+}
+.ad-color-area > i,
+.ad-color-hue > i {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  border: 0.15rem solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 0 0.0625rem #0008, 0 0.15rem 0.4rem #0009;
+  translate: -50% -50%;
+  pointer-events: none;
+}
+.ad-color-hue > i {
+  top: 50%;
+}
+.ad-color-area:focus-visible,
+.ad-color-hue:focus-visible {
+  outline: 0.125rem solid var(--ad-focus);
+  outline-offset: 0.15rem;
+}
+.ad-color-hex {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.6rem;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.35);
+  border-radius: var(--ad-radius-pill);
+  background: var(--ad-neutral-950);
+}
+.ad-color-hex > input {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  border: 0;
+  background: none;
+  color: var(--ad-text);
+  font: inherit;
+  font-family: var(--ad-font-family-mono);
+  text-transform: uppercase;
+  outline: none;
+}
+.ad-color-sample {
+  flex: none;
+  width: 1.15rem;
+  height: 1.15rem;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 0.0625rem #fff4, 0 0 0.5rem currentColor;
+}
+.ad-color-control {
+  font-family: var(--ad-font-family-mono);
+  text-align: start;
+}
+.ad-color-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+.ad-color-swatches > button {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0.125rem solid transparent;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 0.0625rem #fff3;
+  cursor: pointer;
+  transition: transform var(--ad-duration-fast) var(--ad-ease-spring);
+}
+.ad-color-swatches > button:hover {
+  transform: scale(1.15);
+}
+.ad-color-swatches > button[aria-pressed="true"] {
+  border-color: #fff;
+}

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

@@ -0,0 +1,19 @@
+import { type CommonProps } from "../../../core/base";
+export interface DatePickerProps extends CommonProps {
+    /** The date as YYYY-MM-DD, or "" for none. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (date: string) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: string;
+    /** Earliest and latest dates that can be chosen, YYYY-MM-DD. */
+    min?: string;
+    max?: string;
+    /** Language of month and day names (by default the library's current language). */
+    locale?: string;
+    disabled?: boolean;
+    required?: boolean;
+}
+export declare function DatePicker({ value: controlled, defaultValue, onValueChange, min, max, locale: requestedLocale, placeholder, ...p }: DatePickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,69 @@
+/* Styles owned by DatePicker: a month grid; today glows, the chosen day is a lit disc. */
+.ad-date-picker {
+  min-width: 0;
+}
+.ad-date-popover {
+  width: 18rem;
+}
+.ad-calendar {
+  display: grid;
+  gap: 0.5rem;
+}
+.ad-calendar-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-transform: capitalize;
+}
+.ad-calendar-next .ad-icon {
+  rotate: 180deg;
+}
+.ad-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.15rem;
+}
+.ad-calendar-weekday {
+  padding-block: 0.25rem;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  text-align: center;
+  text-transform: capitalize;
+}
+.ad-calendar-day {
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--ad-neutral-200);
+  font: inherit;
+  font-size: var(--ad-font-size-body-sm);
+  cursor: pointer;
+  transition: background var(--ad-duration-fast), color var(--ad-duration-fast);
+}
+.ad-calendar-day:hover:not(:disabled) {
+  background: rgb(from var(--ad-primary) r g b / 0.2);
+  color: #fff;
+}
+.ad-calendar-day[data-outside] {
+  color: var(--ad-neutral-600);
+}
+.ad-calendar-day[data-today] {
+  box-shadow: inset 0 0 0 0.0625rem var(--ad-secondary);
+  color: var(--ad-secondary-100);
+}
+.ad-calendar-day[aria-pressed="true"] {
+  background: radial-gradient(circle at 35% 30%, var(--ad-secondary), var(--ad-primary));
+  color: #fff;
+  font-weight: 700;
+  box-shadow: 0 0 0.7rem rgb(from var(--ad-primary) r g b / 0.6);
+}
+.ad-calendar-day:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.ad-calendar-foot {
+  display: flex;
+  justify-content: space-between;
+}

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

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

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

@@ -0,0 +1,149 @@
+/* Styles owned by FilePicker. */
+.ad-file-picker {
+  display: flex;
+  align-items: center;
+  gap: var(--ad-size-gap);
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.ad-file-picker > .ad-button {
+  flex: none;
+}
+.ad-file-picker > small {
+  flex: 1 1 8rem;
+  min-width: 0;
+  font-size: calc(var(--ad-size-font) * 0.88);
+  color: var(--ad-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* The folder icon hops on hover; a picked file name slides in with a check glow. */
+.ad-file-picker > .ad-button:hover:not(:disabled) > .ad-icon {
+  animation: ad-file-hop 0.6s cubic-bezier(0.34, 1.6, 0.5, 1);
+}
+.ad-file-picker > small[data-picked] {
+  color: var(--ad-neutral-200);
+  animation: ad-file-name 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
+}
+.ad-file-picker > small[data-picked]::before {
+  content: "✓ ";
+  color: var(--ad-pink);
+  text-shadow: 0 0 0.5em var(--ad-red);
+}
+@keyframes ad-file-hop {
+  40% {
+    transform: translateY(-0.25rem) rotate(-8deg);
+  }
+}
+@keyframes ad-file-name {
+  from {
+    opacity: 0;
+    transform: translateX(-0.75rem);
+    filter: blur(0.2rem);
+  }
+}
+/* The zone: a dashed glowing area; it lights up while a file is held over it. */
+.ad-file-picker[data-variant="zone"] {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--ad-space-4);
+  width: 100%;
+  padding: var(--ad-space-5);
+  border: 0.125rem dashed rgb(from var(--ad-primary) r g b / 0.5);
+  border-radius: var(--ad-radius-lg);
+  background: rgb(from var(--ad-primary) r g b / 0.06);
+  color: var(--ad-text);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  --ad-icon-size: 2rem;
+  transition: background var(--ad-duration-normal), border-color var(--ad-duration-normal), box-shadow var(--ad-duration-normal);
+}
+.ad-file-picker[data-variant="zone"]:hover:not(:disabled),
+.ad-file-picker[data-variant="zone"]:focus-visible,
+.ad-file-picker[data-variant="zone"][data-over] {
+  border-color: var(--ad-primary);
+  background: rgb(from var(--ad-primary) r g b / 0.12);
+  box-shadow: 0 0 1.5rem rgb(from var(--ad-primary) r g b / 0.25);
+  outline: none;
+}
+.ad-file-picker[data-variant="zone"]:hover:not(:disabled) > .ad-icon {
+  animation: ad-file-hop 0.6s cubic-bezier(0.34, 1.6, 0.5, 1);
+}
+.ad-file-picker[data-variant="zone"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ad-file-picker-text {
+  display: grid;
+  gap: var(--ad-space-1);
+  min-width: 0;
+}
+.ad-file-picker-text > strong {
+  font-size: var(--ad-font-size-title);
+}
+.ad-file-picker-text > small {
+  overflow: hidden;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ad-file-picker-text > small[data-picked] {
+  color: var(--ad-neutral-200);
+}
+
+/* The avatar is the chooser itself; its host seal keeps animating under the edit affordance. */
+.ad-file-picker[data-variant="avatar"] {
+  display: inline-flex;
+  width: fit-content;
+}
+.ad-file-picker-avatar-button {
+  position: relative;
+  display: block;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.ad-file-picker-avatar-button:focus-visible {
+  outline: 0.125rem solid var(--ad-secondary);
+  outline-offset: 0.25rem;
+}
+.ad-file-picker-avatar-edit {
+  position: absolute;
+  z-index: 1;
+  right: -0.1rem;
+  bottom: 0.1rem;
+  display: grid;
+  place-items: center;
+  width: 1.8rem;
+  aspect-ratio: 1;
+  border: 0.0625rem solid var(--ad-secondary);
+  border-radius: 50%;
+  background: var(--ad-primary-800);
+  color: var(--ad-on-accent);
+  box-shadow: 0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.5);
+  opacity: 0;
+  transform: translateY(0.3rem) scale(0.8);
+  transition: opacity 0.2s, transform 0.2s;
+  pointer-events: none;
+  --ad-icon-size: 1rem;
+}
+.ad-file-picker-avatar-button:is(:hover, :focus-visible) .ad-file-picker-avatar-edit,
+.ad-file-picker[data-variant="avatar"][data-over] .ad-file-picker-avatar-edit {
+  opacity: 1;
+  transform: none;
+}
+.ad-file-picker-avatar-button:disabled {
+  cursor: not-allowed;
+  filter: grayscale(1);
+  opacity: 0.45;
+}
+@media (hover: none) {
+  .ad-file-picker-avatar-edit { opacity: 1; transform: none; }
+}

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

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

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

@@ -0,0 +1,4 @@
+/* IconButton geometry is owned by controls/shared.css. */
+.ad-icon-button {
+  flex: none;
+}

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

@@ -0,0 +1,21 @@
+import { type MouseEventHandler, type ReactNode, type Ref } from "react";
+import { type CommonProps } from "../../../core/base";
+import type { InputVariant } from "../shared";
+export interface InputBaseProps extends CommonProps {
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    multiline?: boolean;
+    variant?: InputVariant;
+    /** Floating label drawn inside the box; it rises when focused or filled. */
+    label?: ReactNode;
+    /** Id of the floating label, for the control's aria-labelledby. */
+    labelId?: string;
+    /** The control has a value, so a floating label stays raised. */
+    filled?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+}
+export declare const InputBase: import("react").ForwardRefExoticComponent<Omit<InputBaseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;