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

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

@@ -0,0 +1,379 @@
+/* Shared foundation of every text-like control: TextField, NumberField, TextArea, Select, Autocomplete. */
+
+/* Field frame: label, control, description or error. */
+.ad-field {
+  display: grid;
+  gap: calc(var(--ad-space-1) * 1.5);
+  min-width: 0;
+  color: var(--ad-text);
+  font-size: var(--ad-size-font);
+}
+.ad-field-label {
+  display: inline-flex;
+  gap: 0.2em;
+  font-size: var(--ad-font-size-label);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--ad-neutral-200);
+}
+.ad-field-required {
+  color: var(--ad-pink);
+}
+.ad-field-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.35em;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  line-height: 1.4;
+}
+.ad-field-message[data-error] {
+  color: var(--ad-secondary);
+}
+.ad-field-message > .ad-icon {
+  --ad-icon-size: 1.15em;
+  flex: none;
+  margin-top: 0.05em;
+}
+
+/* Control box. */
+.ad-input-base {
+  --ad-input-accent: var(--ad-pink);
+  --ad-input-icon: calc(var(--ad-size-font) * 1.45);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ad-size-gap) * 0.75);
+  min-width: 0;
+  width: 100%;
+  min-height: var(--ad-size-h);
+  padding-inline: var(--ad-size-pad-x);
+  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.18);
+  border-radius: var(--ad-size-radius);
+  background: var(--ad-surface-input);
+  box-shadow: var(--ad-shadow-input);
+  font-size: var(--ad-size-font);
+  color: var(--ad-text);
+  cursor: text;
+  transition:
+    border-color 0.18s,
+    box-shadow 0.18s,
+    background 0.18s;
+}
+.ad-input-base:hover:not([data-disabled]) {
+  border-color: rgb(from var(--ad-secondary) r g b / 0.42);
+}
+.ad-input-base:focus-within {
+  border-color: var(--ad-input-accent);
+  box-shadow:
+    0 0 0 0.1875rem rgb(from var(--ad-primary) r g b / 0.14),
+    0 0 1rem rgb(from var(--ad-primary) r g b / 0.15),
+    inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.13);
+}
+/* Fluent-style accent line that grows from the centre on focus. */
+.ad-input-base::after {
+  content: "";
+  position: absolute;
+  inset: auto 0.5rem -0.0625rem;
+  height: 0.125rem;
+  border-radius: 999rem;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--ad-input-accent),
+    transparent
+  );
+  box-shadow: 0 0 0.5rem var(--ad-red);
+  transform: scaleX(0);
+  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
+  pointer-events: none;
+}
+.ad-input-base:focus-within::after {
+  transform: scaleX(1);
+}
+.ad-input-base[data-invalid] {
+  --ad-input-accent: var(--ad-secondary);
+  border-color: rgb(from var(--ad-primary) r g b / 0.61);
+}
+.ad-input-base[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.ad-input-base[data-readonly] {
+  border-style: dashed;
+  border-color: rgb(from var(--ad-secondary) r g b / 0.4);
+  background: var(--ad-neutral-900);
+  box-shadow: none;
+}
+
+/* Variants. */
+.ad-input-base[data-ad-variant="filled"] {
+  border-color: transparent;
+  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.4);
+  border-end-start-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  background: linear-gradient(180deg, var(--ad-neutral-800), var(--ad-neutral-850));
+  box-shadow: inset 0 0.0625rem 0 #ffffff10;
+}
+.ad-input-base[data-ad-variant="filled"]:hover:not([data-disabled]) {
+  background: linear-gradient(180deg, var(--ad-primary-800), var(--ad-neutral-800));
+  border-color: transparent;
+  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.66);
+}
+.ad-input-base[data-ad-variant="underlined"] {
+  padding-inline: 0.125rem;
+  border-color: transparent;
+  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.42);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.ad-input-base[data-ad-variant="underlined"]:hover:not([data-disabled]) {
+  border-color: transparent;
+  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.77);
+}
+.ad-input-base:is(
+    [data-ad-variant="filled"],
+    [data-ad-variant="underlined"]
+  ):focus-within {
+  border-color: transparent;
+  border-bottom-color: var(--ad-input-accent);
+  box-shadow: none;
+}
+.ad-input-base[data-ad-variant="underlined"]::after {
+  inset-inline: 0;
+}
+
+/* Content. */
+.ad-input-base[data-multiline] {
+  align-items: flex-start;
+  padding-block: calc(var(--ad-size-pad-x) * 0.75);
+}
+.ad-input-base-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  align-self: stretch;
+}
+.ad-input-base input,
+.ad-input-base textarea,
+.ad-input-base button.ad-input-control {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  min-height: calc(var(--ad-size-h) - 0.125rem);
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.ad-input-base input::placeholder,
+.ad-input-base textarea::placeholder {
+  color: var(--ad-neutral-500);
+  opacity: 1;
+}
+.ad-input-base textarea {
+  min-height: 4lh;
+  resize: vertical;
+  line-height: 1.5;
+}
+.ad-input-base input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.ad-input-base input::-webkit-inner-spin-button,
+.ad-input-base input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.ad-input-base button.ad-input-control {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.ad-input-base button.ad-input-control:disabled {
+  cursor: not-allowed;
+}
+
+/* Adornments: icons follow the field size, buttons inside a field are flat. */
+.ad-input-adornment {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  flex: none;
+  color: var(--ad-muted);
+}
+.ad-input-base[data-multiline] .ad-input-adornment {
+  min-height: calc(var(--ad-size-h) - 0.125rem - var(--ad-size-pad-x) * 1.5);
+}
+.ad-input-adornment > .ad-icon,
+.ad-input-adornment .ad-icon-button > .ad-icon {
+  --ad-icon-size: var(--ad-input-icon);
+  width: var(--ad-icon-size);
+  height: var(--ad-icon-size);
+}
+.ad-input-base:focus-within .ad-input-adornment[data-position="start"] {
+  color: var(--ad-input-accent);
+}
+.ad-input-adornment .ad-icon-button {
+  --ad-size-h: calc(var(--ad-input-icon) + 0.5rem);
+  width: var(--ad-size-h);
+  min-width: var(--ad-size-h);
+  height: var(--ad-size-h);
+  border: 0;
+  border-radius: 999rem;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ad-muted);
+  animation: none;
+  transform: none;
+  filter: none;
+}
+.ad-input-adornment .ad-icon-button::before,
+.ad-input-adornment .ad-icon-button::after {
+  display: none;
+}
+.ad-input-adornment .ad-icon-button > .ad-icon {
+  filter: none;
+}
+.ad-input-adornment .ad-icon-button:hover:not(:disabled) {
+  background: rgb(from var(--ad-primary) r g b / 0.08);
+  color: var(--ad-text);
+  transform: none;
+  box-shadow: none;
+}
+.ad-input-adornment .ad-icon-button:active:not(:disabled) {
+  background: rgb(from var(--ad-primary) r g b / 0.14);
+  transform: scale(0.94);
+}
+.ad-input-adornment .ad-icon-button:disabled {
+  opacity: 0.35;
+  filter: none;
+}
+.ad-input-adornment .ad-icon-button:focus-visible {
+  outline: 0.125rem solid var(--ad-input-accent);
+  outline-offset: 0;
+}
+/* The box shows focus for the whole field, so the inner control draws no ring of its own. */
+.ad-input-base :is(input, textarea, button.ad-input-control):focus-visible {
+  outline: 0;
+}
+/* A field that turns invalid gives one short shake. */
+.ad-input-base[data-invalid] {
+  animation: ad-field-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+@keyframes ad-field-shake {
+  20%,
+  60% {
+    transform: translateX(-0.25rem);
+  }
+  40%,
+  80% {
+    transform: translateX(0.25rem);
+  }
+}
+/* Focus lights the label and slides the placeholder aside. */
+.ad-field-label {
+  transition:
+    color 0.25s,
+    text-shadow 0.25s;
+}
+.ad-field:focus-within .ad-field-label {
+  color: var(--ad-pink);
+  text-shadow: 0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4);
+}
+.ad-input-base input::placeholder,
+.ad-input-base textarea::placeholder {
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
+}
+.ad-input-base:focus-within input::placeholder,
+.ad-input-base:focus-within textarea::placeholder {
+  opacity: 0.45;
+  transform: translateX(0.35rem);
+}
+.ad-input-adornment[data-position="start"] > .ad-icon {
+  transition:
+    transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1),
+    color 0.25s;
+}
+.ad-input-base:focus-within
+  .ad-input-adornment[data-position="start"]
+  > .ad-icon {
+  transform: scale(1.12);
+}
+
+/* Floating label (labelPlacement="floating"): rests inside the box like a placeholder,
+   then shrinks and rises to the top edge on focus or once there is a value. */
+.ad-input-base-content {
+  position: relative;
+}
+.ad-input-base[data-floating] {
+  --ad-float-h: calc(var(--ad-size-h) + 0.75rem);
+  min-height: var(--ad-float-h);
+}
+.ad-input-label {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ad-neutral-400);
+  font-size: var(--ad-size-font);
+  transform-origin: left center;
+  translate: 0 -50%;
+  pointer-events: none;
+  transition:
+    top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    translate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
+    color 0.25s,
+    text-shadow 0.25s,
+    letter-spacing 0.3s;
+}
+.ad-input-base[data-floating]:is(:focus-within, [data-filled]) .ad-input-label {
+  top: 0.45rem;
+  translate: 0 0;
+  scale: 0.76;
+  letter-spacing: 0.03em;
+}
+.ad-input-base[data-floating]:focus-within .ad-input-label {
+  color: var(--ad-pink);
+  text-shadow: 0 0 0.6rem rgb(from var(--ad-primary) r g b / 0.4);
+}
+.ad-input-base[data-floating][data-filled]:not(:focus-within) .ad-input-label {
+  color: var(--ad-neutral-300);
+}
+/* The text sits under the raised label. */
+.ad-input-base[data-floating] :is(input, button.ad-input-control) {
+  min-height: calc(var(--ad-float-h) - 0.125rem);
+  padding-top: 1rem;
+}
+/* While the label rests in its place the placeholder stays hidden, as in Material. */
+.ad-input-base[data-floating]:not(:focus-within):not([data-filled])
+  :is(input, textarea)::placeholder {
+  opacity: 0;
+}
+.ad-input-base[data-floating]:not(:focus-within):not([data-filled])
+  .ad-select-control {
+  color: transparent;
+}
+/* Multiline: the label rests on the first line and rises above it. */
+.ad-input-base[data-floating][data-multiline] .ad-input-label {
+  top: calc(1rem + 0.75em);
+}
+.ad-input-base[data-floating][data-multiline]:is(:focus-within, [data-filled])
+  .ad-input-label {
+  top: -0.05rem;
+  translate: 0 0;
+}
+.ad-input-base[data-floating][data-multiline] textarea {
+  padding-top: 1rem;
+}

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

@@ -0,0 +1,11 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface LinkProps extends CommonProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps | "color"> {
+    href?: string;
+    icon?: string;
+    endIcon?: string;
+    external?: boolean;
+    underline?: "none" | "hover" | "always";
+    children?: ReactNode;
+}
+export declare function Link({ href, icon, endIcon, external, underline, children, ...props }: LinkProps): import("react").JSX.Element;

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

@@ -0,0 +1,50 @@
+.ad-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+  border-radius: 0.55rem;
+  outline: none;
+  transition:
+    color 0.16s,
+    background 0.16s,
+    box-shadow 0.16s,
+    transform 0.16s;
+}
+.ad-link[data-ad-underline="always"] {
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+/* The underline grows from the left instead of snapping in. */
+.ad-link[data-ad-underline="hover"] {
+  background: linear-gradient(90deg, var(--ad-pink), var(--ad-secondary-100)) 0 100% / 0
+    0.0625rem no-repeat;
+  transition:
+    color 0.2s,
+    background-size 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ad-link[data-ad-underline="hover"]:hover {
+  background-size: 100% 0.0625rem;
+}
+.ad-link > .ad-icon {
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+.ad-link:hover > .ad-icon:last-child:not(:first-child) {
+  transform: translateX(0.2rem);
+}
+.ad-link:hover > .ad-icon:first-child {
+  transform: scale(1.12) rotate(-6deg);
+}
+.ad-link:hover {
+  color: var(--ad-pink);
+}
+.ad-link:focus-visible {
+  outline: 0.125rem solid var(--ad-secondary-100);
+  outline-offset: 0.18rem;
+}
+.ad-link > .ad-icon {
+  width: 1em;
+  height: 1em;
+}

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

@@ -0,0 +1,2 @@
+import type { NumberFieldProps } from "../shared";
+export declare const NumberField: ({ value, defaultValue, onValueChange, min, max, step, endAdornment, className, controls, ...p }: NumberFieldProps) => import("react").JSX.Element;

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

@@ -0,0 +1 @@
+/* Styles owned by NumberField. */

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

@@ -0,0 +1,37 @@
+import { type CommonProps } from "../../../core/base";
+import type { InputVariant } from "../shared";
+export interface PickerPerson {
+    id: string;
+    name: string;
+    /** Photo; initials are shown without it. */
+    src?: string;
+    /** A second line: role, e-mail, status. */
+    description?: string;
+    presence?: "online" | "busy" | "offline";
+}
+export interface PeoplePickerProps extends CommonProps {
+    /** Everyone who can be picked; filtered by name and description while typing. */
+    people?: PickerPerson[];
+    /** Search elsewhere; the optional signal cancels superseded or unmounted requests. */
+    onSearch?: (query: string, signal?: AbortSignal) => Promise<PickerPerson[]> | PickerPerson[];
+    value?: PickerPerson[];
+    defaultValue?: PickerPerson[];
+    onValueChange?: (people: PickerPerson[]) => void;
+    /** Pick one person instead of several. */
+    single?: boolean;
+    /** The most people allowed. */
+    max?: number;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    variant?: InputVariant;
+    labelPlacement?: "top" | "floating";
+}
+/**
+ * Picking people: type a name, choose from the list with avatars, presence and roles; chosen
+ * people become chips. Works on a given list or with an asynchronous search.
+ */
+export declare function PeoplePicker({ people, onSearch, value: controlled, defaultValue, onValueChange, single, max, placeholder, ...p }: PeoplePickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+/* Styles owned by PeoplePicker: the chip row comes from TagInput's styles, the list from Select's. */
+.ad-people-picker {
+  min-width: 0;
+}
+.ad-people-picker .ad-option {
+  min-height: 2.75rem;
+}

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

@@ -0,0 +1,2 @@
+import { type TabsProps } from "../shared";
+export declare const SegmentedControl: <V extends string = string>(p: TabsProps<V>) => import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+/* Styles owned by SegmentedControl: Tabs sized to their content instead of the full row. */
+.ad-segmented-control {
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+}
+.ad-segmented-control > .ad-tabs {
+  flex: 1;
+}

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

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+import type { SelectProps } from "../shared";
+/**
+ * A choice from a list. Values can be strings, numbers or whole objects; options can carry an
+ * icon, an avatar, a description and a group, or be drawn by `renderOption`; long lists get a
+ * search box with `searchable`.
+ */
+export declare const Select: <V = string>(p: SelectProps<V>) => ReactElement;

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

@@ -0,0 +1,142 @@
+.ad-select-control {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ad-select-control[data-placeholder] {
+  color: var(--ad-neutral-500);
+}
+.ad-select-chevron {
+  transition:
+    transform 0.2s,
+    color 0.2s;
+}
+.ad-input-base:has([aria-expanded="true"]) .ad-select-chevron {
+  transform: rotate(180deg);
+  color: var(--ad-text);
+}
+
+/* Option list shared by Select and Autocomplete. */
+.ad-option-popover {
+  padding: 0.3rem !important;
+  background: var(--ad-surface-dialog) !important;
+  box-shadow: var(--ad-shadow-dialog) !important;
+  border-color: rgb(from var(--ad-secondary) r g b / 0.31) !important;
+}
+.ad-option-list {
+  display: grid;
+  gap: 0.0625rem;
+  max-height: min(42dvh, 18rem);
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+.ad-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.25rem;
+  padding: 0.4rem 0.65rem;
+  border: 0;
+  border-radius: calc(var(--ad-radius) * 0.6);
+  background: transparent;
+  color: var(--ad-neutral-300);
+  font: inherit;
+  font-size: var(--ad-font-size-body-sm);
+  text-align: left;
+  cursor: pointer;
+}
+.ad-option-text {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+}
+.ad-option-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ad-option-description {
+  overflow: hidden;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  font-weight: var(--ad-font-weight-regular);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ad-option > .ad-icon {
+  --ad-icon-size: 1rem;
+  flex: none;
+}
+.ad-option-icon {
+  color: var(--ad-secondary-100);
+}
+.ad-option-check {
+  color: var(--ad-pink);
+}
+/* Group names between the options of each group. */
+.ad-option-group {
+  padding: 0.5rem 0.65rem 0.2rem;
+  color: var(--ad-secondary-100);
+  font-size: var(--ad-font-size-caption);
+  font-weight: var(--ad-font-weight-bold);
+  letter-spacing: var(--ad-letter-spacing-eyebrow);
+  text-transform: uppercase;
+}
+/* Search box over a long list. */
+.ad-option-search {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-bottom: 0.3rem;
+  padding: 0.35rem 0.65rem;
+  border-bottom: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.2);
+  color: var(--ad-muted);
+  --ad-icon-size: 0.95rem;
+}
+.ad-option-search > input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  color: var(--ad-text);
+  font: inherit;
+  font-size: var(--ad-font-size-body-sm);
+  outline: none;
+}
+.ad-option-empty {
+  padding: 0.75rem;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-body-sm);
+  text-align: center;
+}
+/* The chosen value in the field: its avatar or icon beside the label. */
+.ad-select-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.ad-select-value-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ad-option:hover:not(:disabled),
+.ad-option[data-active],
+.ad-option:focus-visible {
+  background: rgb(from var(--ad-neutral-200) r g b / 0.06);
+  color: var(--ad-text);
+  outline: 0;
+}
+.ad-option[aria-selected="true"] {
+  background: linear-gradient(90deg, rgb(from var(--ad-primary-700) r g b / 0.37), rgb(from var(--ad-primary-900) r g b / 0.27) 80%);
+  color: var(--ad-text);
+  font-weight: 600;
+}
+.ad-option:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { SliderProps } from "../shared";
+export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLInputElement>>;