@crewlethq/ui 0.18.0 → 0.20.0

package/dist/ArrangeFrame-3PLZAG22.css

@@ -0,0 +1,329 @@
+/*
+ * ArrangeFrame: a block of a page being arranged.
+ *
+ * Off, the frame is layout only. Editing, the block keeps its own look at
+ * rest; hovered or focused, one accent ring is drawn over its own edge and
+ * its toolbar and resize handle appear. Every piece of chrome floats, so a
+ * block is the same size while arranging as afterwards.
+ */
+
+.crewlet-arrange-frame {
+  /* The corner every ring and bracket follows: a card's own. */
+  --crewlet-arrange-frame-radius: var(--radius-lg);
+  /* How far outside the block its ring is drawn; the chrome sits on the ring. */
+  --crewlet-arrange-frame-outset: 0px;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: var(--crewlet-arrange-frame-radius);
+}
+
+.crewlet-arrange-frame__content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.crewlet-arrange-frame__content > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* A height of the reader's: the content scrolls inside it. */
+.crewlet-arrange-frame.is-fixed-height .crewlet-arrange-frame__content > * {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* ---- Editing ---------------------------------------------------------- */
+
+/* The block itself is what moves: focused, its ring is its focus mark. The
+   transparent outline is the one forced-colors mode paints in its place. */
+.crewlet-arrange-frame.is-editing:focus-visible {
+  outline: 2px solid transparent;
+}
+
+/* The surface is what a pointer moves a block by. */
+.crewlet-arrange-frame.is-editing:not(.is-container) {
+  cursor: grab;
+}
+.crewlet-arrange-frame.is-editing:not(.is-container):active {
+  cursor: grabbing;
+}
+.crewlet-arrange-frame.is-editing:not(.is-container) > .crewlet-arrange-frame__content {
+  user-select: none;
+}
+
+/*
+ * THE ONE RING, over the block's own edge, on the innermost block the
+ * pointer or the focus is in. A hairline drawn exactly over the block's own
+ * 1px border, so the border turns to the accent rather than a second, heavier
+ * line appearing around it.
+ *
+ * IT IS A LAYER OF ITS OWN, above the content. An outline is painted with the
+ * block, under any content that is positioned or scrolls (a card with a fixed
+ * height scrolls its list), and that content covered it. Positioned after the
+ * content with no depth of its own, it paints over the content and under the
+ * toolbar and the handle, which are raised.
+ */
+.crewlet-arrange-frame.is-editing::after {
+  content: '';
+  position: absolute;
+  inset: calc(var(--crewlet-arrange-frame-outset) * -1);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.crewlet-arrange-frame.is-editing:is(:hover, :focus-visible, :has(:focus-visible)):not(
+    :has(.crewlet-arrange-frame:is(:hover, :focus-visible, :has(:focus-visible)))
+  )::after,
+.crewlet-arrange-frame.is-selected::after,
+.crewlet-arrange-frame.is-resizing::after {
+  border-color: var(--color-brand-accent);
+}
+
+/* A block with no surface of its own takes its ring a step outside it. */
+.crewlet-arrange-frame.is-bare {
+  --crewlet-arrange-frame-radius: var(--radius-md);
+  --crewlet-arrange-frame-outset: var(--spacing-1);
+}
+
+/* Carried, the block is the hole it leaves. */
+.crewlet-arrange-frame.is-editing[data-reorder='dragging']::after {
+  border-style: dashed;
+  border-color: var(--color-brand-accent);
+}
+.crewlet-arrange-frame[data-reorder='dragging'] > .crewlet-arrange-frame__content {
+  opacity: 0.3;
+}
+
+/* Where a block from another list will land: a bar of the accent in the gap
+   before the block it will precede. */
+.crewlet-arrange-frame[data-reorder-target='before']::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--spacing-2) * -1 - 2px);
+  width: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+}
+
+/* ...or after the last block, when it will land at the end. */
+.crewlet-arrange-frame[data-reorder-target='after']::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: calc(var(--spacing-2) * -1 - 2px);
+  bottom: 0;
+  width: 3px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+}
+
+/* Beside a block that spans its row, the bar runs along the gap above it,
+   or below it when it is the last. */
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target]::before {
+  top: auto;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  height: 3px;
+}
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target='before']::before {
+  top: calc(var(--spacing-2) * -1 - 2px);
+}
+.crewlet-arrange-frame[data-reorder-line='horizontal'][data-reorder-target='after']::before {
+  bottom: calc(var(--spacing-2) * -1 - 2px);
+}
+
+/* Just added: one pulse of the accent around it. */
+.crewlet-arrange-frame.is-fresh {
+  animation: crewlet-arrange-frame-fresh calc(var(--motion-duration-slow) * 4) var(--motion-easing-out) 1;
+}
+@keyframes crewlet-arrange-frame-fresh {
+  0%,
+  40% {
+    box-shadow: 0 0 0 4px var(--color-brand-accent-soft);
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+/* ---- The toolbar -------------------------------------------------------- */
+
+/* On the block's top edge, half outside it: clear of a card's own header
+   links, and of the block above, which is a row gap away. */
+.crewlet-arrange-frame__bar {
+  position: absolute;
+  top: calc(var(--crewlet-arrange-frame-outset) * -1);
+  right: var(--spacing-3);
+  z-index: var(--z-index-raised);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-50%);
+}
+
+.crewlet-arrange-frame__sep:first-child {
+  display: none;
+}
+.crewlet-arrange-frame__sep {
+  align-self: stretch;
+  width: 1px;
+  margin: 3px 2px;
+  background: var(--color-border-default);
+}
+
+/* ---- Resize handles ------------------------------------------------------- */
+
+.crewlet-arrange-frame__resize {
+  position: absolute;
+  z-index: var(--z-index-raised);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-text-tertiary);
+  touch-action: none;
+}
+.crewlet-arrange-frame__grip {
+  position: absolute;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-frame__resize:hover,
+.crewlet-arrange-frame__resize:focus-visible,
+.crewlet-arrange-frame.is-resizing .crewlet-arrange-frame__resize {
+  color: var(--color-brand-accent);
+}
+.crewlet-arrange-frame__resize:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+  border-radius: var(--radius-sm);
+}
+
+/* BOTH WAYS: a bracket in the corner, following the card's own radius. */
+.crewlet-arrange-frame__resize.is-corner {
+  right: calc(var(--crewlet-arrange-frame-outset) * -1);
+  bottom: calc(var(--crewlet-arrange-frame-outset) * -1);
+  width: 22px;
+  height: 22px;
+  cursor: nwse-resize;
+}
+.crewlet-arrange-frame__resize.is-corner > .crewlet-arrange-frame__grip {
+  right: 4px;
+  bottom: 4px;
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  border-bottom-right-radius: calc(var(--crewlet-arrange-frame-radius) - 4px);
+}
+
+/* WIDTH ONLY: a grip on the right edge, the handle of a column splitter,
+   in the corner bracket's colour and ringed in the page's ground so it reads
+   over the card's border. */
+.crewlet-arrange-frame__resize.is-edge {
+  top: 50%;
+  right: calc(-7px - var(--crewlet-arrange-frame-outset));
+  width: 14px;
+  height: 36px;
+  cursor: ew-resize;
+  transform: translateY(-50%);
+}
+.crewlet-arrange-frame__resize.is-edge > .crewlet-arrange-frame__grip {
+  top: 4px;
+  bottom: 4px;
+  left: 4px;
+  width: 6px;
+  border-radius: var(--radius-pill);
+  background: currentColor;
+  box-shadow: 0 0 0 2px var(--color-surface-background);
+}
+
+/* ---- What shows when ---------------------------------------------------- */
+
+/* The toolbar and the handle belong to the innermost block hovered or
+   focused, and stay while its menu is open or it is being resized. */
+.crewlet-arrange-frame__bar,
+.crewlet-arrange-frame__resize {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-frame.is-editing:is(:hover, :focus-visible, :has(:focus-visible)):not(
+    :has(.crewlet-arrange-frame:is(:hover, :focus-visible, :has(:focus-visible)))
+  )
+  > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize),
+.crewlet-arrange-frame.is-editing > .crewlet-arrange-frame__bar:has([aria-expanded='true']),
+.crewlet-arrange-frame.is-editing:has(> .crewlet-arrange-frame__bar [aria-expanded='true'])
+  > .crewlet-arrange-frame__resize,
+.crewlet-arrange-frame.is-resizing > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize) {
+  opacity: 1;
+  pointer-events: auto;
+}
+/* A touch screen has no hover to reveal them with. */
+@media (hover: none) {
+  .crewlet-arrange-frame.is-editing > :is(.crewlet-arrange-frame__bar, .crewlet-arrange-frame__resize) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* ---- While resizing ------------------------------------------------------- */
+
+/* The columns of the grid the block sits on, across its row. */
+.crewlet-arrange-frame__guides {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: var(--z-index-raised);
+  display: grid;
+  pointer-events: none;
+}
+.crewlet-arrange-frame__guides > span {
+  border-inline: 1px dashed var(--color-brand-accent);
+  background: var(--color-brand-accent-soft);
+  opacity: 0.3;
+}
+
+/* The size it will land at, over the middle of the block. */
+.crewlet-arrange-frame__size {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: calc(var(--z-index-raised) + 1);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-inverse);
+  color: var(--color-text-inverse);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-frame__bar,
+  .crewlet-arrange-frame__resize,
+  .crewlet-arrange-frame__grip {
+    transition: none;
+  }
+  .crewlet-arrange-frame.is-fresh {
+    animation: none;
+  }
+}

package/dist/ArrangeGroup/ArrangeGroup.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { NodeHue } from '../utils/nodeHue.js';
+/** A surface's colour: one of the six hues, or none. */
+export type SurfaceTone = NodeHue | 'none';
+export interface ArrangeGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** What the group holds, in the reader's words: "Delivery". */
+    title: string;
+    tone?: SurfaceTone | undefined;
+    collapsed: boolean;
+    onCollapsedChange: (collapsed: boolean) => void;
+    /** How many blocks it holds, beside the title. */
+    count?: number | undefined;
+    /** Editing, the title is a field. Left out, it is read only. */
+    onTitleChange?: ((title: string) => void) | undefined;
+    /** Props for the body the blocks are laid in (a drop target, a class). */
+    bodyProps?: (HTMLAttributes<HTMLDivElement> & {
+        'data-reorder-over'?: string | undefined;
+    }) | undefined;
+    /** Drawn in the body when it holds nothing. */
+    empty?: ReactNode;
+    /** Columns of the body's grid. */
+    columns?: number | undefined;
+    /** Controls at the end of the header. */
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * A titled band that holds blocks of a page, the way a dashboard groups its
+ * widgets: "Needs attention", "Delivery", "Spend".
+ *
+ * A HEADING THAT FOLDS. The header is the group's name and the control that
+ * collapses it, one button with `aria-expanded`, so a reader skimming the
+ * page's outline finds every group and opens the one they want.
+ *
+ * ITS OWN GRID. The blocks inside are laid on the same column count as the
+ * page, measured across the group, so a half-width card in a half-width group
+ * is a quarter of the page and reads as half of its group.
+ *
+ * THE TONE IS A BAND, never the whole surface: the header carries the hue and
+ * the body stays the page's, so the cards inside keep their own contrast.
+ */
+export declare function ArrangeGroup({ title, tone, collapsed, onCollapsedChange, count, onTitleChange, bodyProps, empty, columns, actions, className, children, ...rest }: ArrangeGroupProps): import("react").JSX.Element;

package/dist/ArrangeGroup/index.d.ts

@@ -0,0 +1,3 @@
+import './ArrangeGroup.css';
+export { ArrangeGroup } from './ArrangeGroup.js';
+export type { ArrangeGroupProps, SurfaceTone } from './ArrangeGroup.js';

package/dist/ArrangeGroup/index.js

@@ -0,0 +1,4 @@
+export { ArrangeGroup } from '../chunk-35XVR5JQ.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArrangeGroup-SHFHA7BE.css

@@ -0,0 +1,170 @@
+/*
+ * ArrangeGroup: a titled band of blocks. The hue is the header's; the body
+ * stays the page's ground, so the cards inside keep their own contrast.
+ */
+
+.crewlet-arrange-group {
+  --crewlet-arrange-group-band: var(--color-surface-subtle);
+  --crewlet-arrange-group-line: var(--color-border-default);
+  --crewlet-arrange-group-ink: var(--color-text-primary);
+  --crewlet-arrange-group-mark: var(--color-border-strong);
+
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--crewlet-arrange-group-line);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-background);
+  overflow: clip;
+}
+
+.crewlet-arrange-group--purple { --crewlet-arrange-group-band: var(--color-node-purple-fill); --crewlet-arrange-group-line: var(--color-node-purple-line); --crewlet-arrange-group-ink: var(--color-node-purple-ink); --crewlet-arrange-group-mark: var(--color-node-purple); }
+.crewlet-arrange-group--cyan { --crewlet-arrange-group-band: var(--color-node-cyan-fill); --crewlet-arrange-group-line: var(--color-node-cyan-line); --crewlet-arrange-group-ink: var(--color-node-cyan-ink); --crewlet-arrange-group-mark: var(--color-node-cyan); }
+.crewlet-arrange-group--green { --crewlet-arrange-group-band: var(--color-node-green-fill); --crewlet-arrange-group-line: var(--color-node-green-line); --crewlet-arrange-group-ink: var(--color-node-green-ink); --crewlet-arrange-group-mark: var(--color-node-green); }
+.crewlet-arrange-group--amber { --crewlet-arrange-group-band: var(--color-node-amber-fill); --crewlet-arrange-group-line: var(--color-node-amber-line); --crewlet-arrange-group-ink: var(--color-node-amber-ink); --crewlet-arrange-group-mark: var(--color-node-amber); }
+.crewlet-arrange-group--rose { --crewlet-arrange-group-band: var(--color-node-rose-fill); --crewlet-arrange-group-line: var(--color-node-rose-line); --crewlet-arrange-group-ink: var(--color-node-rose-ink); --crewlet-arrange-group-mark: var(--color-node-rose); }
+.crewlet-arrange-group--blue { --crewlet-arrange-group-band: var(--color-node-blue-fill); --crewlet-arrange-group-line: var(--color-node-blue-line); --crewlet-arrange-group-ink: var(--color-node-blue-ink); --crewlet-arrange-group-mark: var(--color-node-blue); }
+
+.crewlet-arrange-group__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-2);
+  border-bottom: 1px solid var(--crewlet-arrange-group-line);
+  background: var(--crewlet-arrange-group-band);
+}
+.crewlet-arrange-group.is-collapsed .crewlet-arrange-group__head {
+  border-bottom-color: transparent;
+}
+
+.crewlet-arrange-group__toggle {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--crewlet-arrange-group-ink);
+  font: inherit;
+  cursor: pointer;
+}
+/* Editing, the toggle is the chevron alone, a square of its own, so its
+   hover never runs into the name field beside it. */
+.crewlet-arrange-group__toggle.is-icon {
+  flex: 0 0 auto;
+  justify-content: center;
+  width: var(--size-row-sm);
+  padding: 0;
+}
+.crewlet-arrange-group__toggle:hover {
+  background: var(--color-surface-hover);
+}
+.crewlet-arrange-group__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}
+
+.crewlet-arrange-group__chevron {
+  flex-shrink: 0;
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-group.is-collapsed .crewlet-arrange-group__chevron {
+  transform: rotate(-90deg);
+}
+
+.crewlet-arrange-group__title,
+.crewlet-arrange-group__title-field {
+  overflow: hidden;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  color: var(--crewlet-arrange-group-ink);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Editing, the name is typed where it is read: the title itself, which
+   shows it is a field on hover and takes a ring when focused. */
+.crewlet-arrange-group__title-field {
+  /* As wide as the name, so the count sits just after it. */
+  field-sizing: content;
+  min-width: 3ch;
+  max-width: 100%;
+  height: var(--size-row-sm);
+  padding: 0 var(--spacing-2);
+  border: 1px dashed transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font-family: inherit;
+  cursor: text;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default),
+    background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+.crewlet-arrange-group__title-field:hover {
+  border-color: var(--crewlet-arrange-group-mark);
+}
+/* The ring is drawn over the field's own edge, never beside it. */
+.crewlet-arrange-group__title-field:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: -1px;
+  border-style: solid;
+  border-color: var(--color-focus);
+  background: var(--color-surface-background);
+}
+.crewlet-arrange-group__title-field::placeholder {
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-arrange-group__count {
+  flex-shrink: 0;
+}
+
+.crewlet-arrange-group__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-inline-start: auto;
+}
+
+.crewlet-arrange-group__body {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
+  gap: var(--spacing-4);
+  align-items: stretch;
+  padding: var(--spacing-4);
+  min-height: 5rem;
+}
+.crewlet-arrange-group__body[data-reorder-over='true'] {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-arrange-group__empty {
+  display: flex;
+  grid-column: 1 / -1;
+  align-items: center;
+  justify-content: center;
+  min-height: 4rem;
+  border: 1px dashed var(--color-border-strong);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-arrange-group__chevron,
+  .crewlet-arrange-group__title-field {
+    transition: none;
+  }
+}
+
+/* Arranging, the header is what a pointer moves the group by. */
+.crewlet-arrange-frame[draggable='true'] > .crewlet-arrange-frame__content > .crewlet-arrange-group > .crewlet-arrange-group__head {
+  cursor: grab;
+}

package/dist/ArrangeList/ArrangeList.d.ts

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import { type ReorderLabels } from '../Reorder/index.js';
+export interface ArrangeItem {
+    /** The identity, stable across moves. */
+    key: string;
+    /** What the reader calls it; also the toggle's and the handle's name. */
+    label: string;
+    /** One line on what it shows, under the label. */
+    description?: ReactNode;
+    /** A glyph before the label. */
+    icon?: ReactNode;
+    /** Whether it is on. */
+    shown: boolean;
+    /**
+     * Why it cannot be turned off, when it cannot. The toggle stays reachable
+     * and says so, rather than going `disabled` and dropping out of the reading
+     * order.
+     */
+    fixed?: string | undefined;
+    /** A control of the item's own at the row's end, before the move buttons. */
+    trailing?: ReactNode;
+}
+export interface ArrangeListLabels extends ReorderLabels {
+    moveUp: (name: string) => string;
+    moveDown: (name: string) => string;
+    atTop: (name: string) => string;
+    atBottom: (name: string) => string;
+}
+export declare const DEFAULT_ARRANGE_LABELS: ArrangeListLabels;
+export interface ArrangeListProps {
+    /** What the list arranges, for its accessible name: "Cards on Home". */
+    label: string;
+    items: readonly ArrangeItem[];
+    onReorder: (keys: string[]) => void;
+    onShownChange: (key: string, shown: boolean) => void;
+    /**
+     * `switch` when a change applies as it is made, `checkbox` when it is read
+     * on a Save. See `Switch` for why the two are not interchangeable.
+     */
+    toggle?: 'switch' | 'checkbox' | undefined;
+    /** Draw the move buttons beside the handle. On by default. */
+    moveButtons?: boolean | undefined;
+    labels?: Partial<ArrangeListLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A list a reader puts in order and switches items on and off in: the
+ * sections of a page, the columns of a table, the figures on a summary row.
+ *
+ * LIFTED OUT OF DATATABLE'S COLUMN SETTINGS, where these rules were first
+ * written, so every "choose and arrange" panel reads the same: a handle that
+ * is a named control, the arrow keys on it, Move up and Move down beside it,
+ * a move announced, and a toggle that can refuse with a reason.
+ *
+ * AN ITEM SWITCHED OFF KEEPS ITS PLACE. Turning something off is not
+ * removing it, so it stays in the list, in order, drawn quieter; turning it
+ * back on puts it back where it was.
+ *
+ * THE ENDS ARE NOT DISABLED. Move up on the first item is `aria-disabled`
+ * with a reason (`disabledReason`), because a disabled button drops focus to
+ * the page and the reader who moved an item to the top loses their place by
+ * doing it.
+ */
+export declare function ArrangeList({ label, items, onReorder, onShownChange, toggle, moveButtons, labels: overrides, className, }: ArrangeListProps): import("react").JSX.Element;

package/dist/ArrangeList/index.d.ts

@@ -0,0 +1,3 @@
+import './ArrangeList.css';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from './ArrangeList.js';
+export type { ArrangeItem, ArrangeListLabels, ArrangeListProps } from './ArrangeList.js';

package/dist/ArrangeList/index.js

@@ -0,0 +1,10 @@
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-AIVZVKYZ.js';
+import '../chunk-A722MUNR.js';
+import '../chunk-XJ2QEBMM.js';
+import '../chunk-I6NZKJGK.js';
+import '../chunk-Q55TXPA3.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';