@crewlethq/ui 0.2.0 → 0.3.0

package/dist/TagsInput-W4P36PRJ.css

@@ -0,0 +1,168 @@
+/*
+ * TagsInput: several values in one field.
+ *
+ * THE CHIPS SIT ABOVE THE FIELD, not inside it. Inline, a chosen value shares
+ * a box with the text somebody is typing, so the field's width is whatever
+ * the choices left of it, a long value pushes the caret off the end, and the
+ * Move controls an ordered chain needs have nowhere to go. Above, the box
+ * stays the same width whatever is in it and the chips are one list a screen
+ * reader can walk.
+ */
+
+.crewlet-tags-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  width: 100%;
+}
+
+.crewlet-tags-input__chips {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+
+.crewlet-tags-input__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-tags-input__field {
+  position: relative;
+  width: 100%;
+}
+
+.crewlet-tags-input__box {
+  width: 100%;
+  box-sizing: border-box;
+  min-height: var(--size-control-md);
+  /* The side inset only, as every box in this register: the control's own
+     height is what makes the row, so a field, a button and a select in one
+     line are one height. */
+  padding: 0 var(--spacing-3);
+  font-family: inherit;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  outline: none;
+  /* The boundary is the only thing that moves. The ring is an outline, which
+     takes no transition, and nothing else here paints a shadow. */
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-tags-input__box::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 1;
+}
+
+/*
+ * ONE RING, and the same one every field in this package draws: an outline
+ * over the boundary, inset so a scroller cannot clip it. See Input.css for
+ * why it is not the border plus --shadow-focus it used to be.
+ *
+ * It is on the box rather than on a frame because the box IS the field here.
+ * The chips above it are each their own target with their own rings, which is
+ * the whole reason they sit above the field instead of inside it.
+ */
+.crewlet-tags-input__box:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-tags-input.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-tags-input.is-disabled .crewlet-tags-input__box {
+  cursor: not-allowed;
+}
+
+/*
+ * The offered list, anchored inside the field's own box. In the flow it would
+ * push every field under it down the form as somebody types.
+ */
+.crewlet-tags-input__list {
+  /* Six rows and a scroll, as every list this package offers from a field. */
+  --crewlet-tags-list-max-height: 12rem;
+
+  position: absolute;
+  top: calc(100% + var(--spacing-1));
+  left: 0;
+  right: 0;
+  max-height: var(--crewlet-tags-list-max-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--spacing-1);
+  /* The product's own panel surface, hairline and corner: a list offered from
+     a field is another panel over the form, not a heavier kind of thing. */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  z-index: var(--z-index-dropdown);
+}
+
+/*
+ * TWO CLASSES, so the list's own bound wins whatever order the stylesheets
+ * are bundled in: the row it draws with carries the shared listbox class,
+ * which sets a max-height and a pad of its own at equal weight.
+ */
+.crewlet-tags-input__list.crewlet-listbox {
+  max-height: var(--crewlet-tags-list-max-height);
+  padding: var(--spacing-1);
+}
+
+/*
+ * WHAT IS CHOSEN AND WHERE THE READER IS ARE TWO DIFFERENT FACTS, and in a
+ * list where several rows are chosen at once they are both on screen the
+ * whole time: the chosen rows carry the tick in the accent ink, and the row
+ * the arrows or the pointer are on carries the hover tint.
+ *
+ * Scoped to the list rather than written on the row class, because the shared
+ * listbox register paints [aria-selected] itself and the stylesheets are
+ * bundled in hash order: a rule of equal weight would win or lose by the name
+ * of a build artefact.
+ */
+.crewlet-tags-input__list .crewlet-listbox__option,
+.crewlet-tags-input__list .crewlet-listbox__option[aria-selected='true'] {
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-text-primary);
+}
+
+.crewlet-tags-input__list .crewlet-listbox__option.is-highlight,
+.crewlet-tags-input__list .crewlet-listbox__option:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+/* The tick column, which holds its width whether or not a row is chosen, so
+   the labels line up down the list. */
+.crewlet-tags-input__option-tick {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-tags-input__option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-tags-input__box {
+    transition: none;
+  }
+}

package/dist/Text/Text.d.ts

@@ -0,0 +1,67 @@
+import type { ElementType, HTMLAttributes } from 'react';
+/**
+ * The register a piece of text is set in, named for WHAT IT IS rather than
+ * for how big it is. A scale change is then one edit in the stylesheet rather
+ * than a search for every place that spelled a number.
+ */
+export type TextVariant = 
+/** Body copy, 14px. The default, and the only one that needs no thought. */
+'body'
+/** A value inside a dense row or table cell, 13px. */
+ | 'cell'
+/** Metadata under or beside a value, 12px, on the tertiary step. */
+ | 'caption'
+/** The micro register: 11px, uppercase, tracked out, on the tertiary step. */
+ | 'label'
+/** A panel or section title. */
+ | 'heading'
+/** The sentence that introduces a screen. */
+ | 'lead'
+/** A page title. */
+ | 'display'
+/** A single measured number, the size a stat card sets it at. */
+ | 'stat';
+/**
+ * Which ink. There is deliberately no decoration step here: the decoration
+ * ink is measured into the 2.8 to 4.5:1 band on purpose, so it carries a
+ * mark and never a word. Anything a reader has to make out is tertiary or
+ * above, and the package's own stylesheet check refuses the alternative.
+ */
+export type TextTone = 'primary' | 'secondary' | 'tertiary';
+/** Which measure a block of text is bounded to. */
+export type TextMeasure = 'normal' | 'narrow';
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** The element to draw. A span by default, so Text nests inside a sentence. */
+    as?: ElementType | undefined;
+    variant?: TextVariant | undefined;
+    /** Overrides the ink the variant sets. */
+    tone?: TextTone | undefined;
+    /** The mono face, with ligatures off: an id, a path, a config key. */
+    mono?: boolean | undefined;
+    /**
+     * Tabular figures. A number that ticks up otherwise re-flows the text beside
+     * it on every push, because the proportional digits have different widths.
+     */
+    numeric?: boolean | undefined;
+    /** One line, cut with an ellipsis. */
+    truncate?: boolean | undefined;
+    /** Two or three lines, then an ellipsis. */
+    clamp?: 2 | 3 | undefined;
+    /** Bounds the line length, for anything a reader reads rather than scans. */
+    measure?: TextMeasure | undefined;
+}
+/**
+ * Text set in one of the system's registers.
+ *
+ * WHY A COMPONENT RATHER THAN A CLASS. The registers were a set of utility
+ * classes, and a utility class is a thing a screen has to remember to spell:
+ * a caption-sized LINK styled with the caption class took the caption's muted
+ * ink, which won over the anchor rule, so four real navigations rendered as
+ * dim static micro-text a reader could only find by hovering. A typed prop
+ * cannot be forgotten, and a link is a different component (see `Link`).
+ *
+ * `variant` sets the size, the weight, the tracking and the ink together,
+ * because those four move as one. `tone` overrides only the ink, for the case
+ * where the same register carries a quieter fact.
+ */
+export declare function Text({ as: Tag, variant, tone, mono, numeric, truncate, clamp, measure, className, children, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;

package/dist/Text/index.d.ts

@@ -0,0 +1,3 @@
+import './Text.css';
+export { Text } from './Text.js';
+export type { TextProps, TextVariant, TextTone, TextMeasure } from './Text.js';

package/dist/Text/index.js

@@ -0,0 +1,2 @@
+export { Text } from '../chunk-23DHIMJA.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Text-XIPYYZX2.css

@@ -0,0 +1,154 @@
+/*
+ * The type registers, one rule each.
+ *
+ * Every register states its size, its weight, its tracking and its ink
+ * together, because those move as one: a caption is not "body, smaller", it is
+ * a different job. The ink a register sets is its default, and the tone
+ * modifiers below override it, so they are declared after.
+ */
+
+.crewlet-text {
+  min-width: 0;
+}
+
+.crewlet-text--display {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-tight);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--stat {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-tight);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--heading {
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  /* The tight step, which is the one every heading in the product is set on.
+     Two tracking values across two heading registers is how a card title and
+     the section title above it stop looking like one family. */
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--lead {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--body {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--cell {
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+/*
+ * Metadata: the tertiary step rather than the decoration one. A caption is
+ * read, not glanced at, so it carries the 4.5:1 ink.
+ */
+.crewlet-text--caption {
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * THE one micro-label register, declared once and never overridden. The system
+ * this replaces declared it once and then redeclared it in six selectors with
+ * six different tracking values.
+ */
+.crewlet-text--label {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  line-height: var(--font-line-height-snug);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-text--tone-primary {
+  color: var(--color-text-primary);
+}
+
+.crewlet-text--tone-secondary {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-text--tone-tertiary {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-text--mono {
+  font-family: var(--font-family-mono);
+  /*
+   * An identifier is read character by character, so a ligature that joins two
+   * of them into one drawing is a drawing of something the reader did not
+   * type.
+   */
+  font-variant-ligatures: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-text--numeric {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+}
+
+.crewlet-text--truncate {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+.crewlet-text--clamp-2,
+.crewlet-text--clamp-3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.crewlet-text--clamp-2 {
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.crewlet-text--clamp-3 {
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+}
+
+/*
+ * A measure is a maximum, never a width: a bounded block still shrinks with
+ * the column it sits in.
+ */
+.crewlet-text--measure-normal {
+  display: block;
+  max-width: var(--size-measure);
+}
+
+.crewlet-text--measure-narrow {
+  display: block;
+  max-width: var(--size-measure-narrow);
+}

package/dist/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,47 @@
+export interface ThemeSwitcherProps {
+    /** Where the choice is kept. */
+    storageKey?: string;
+    /** Names the group. */
+    label?: string;
+    /** What each choice is called out loud. The glyphs say nothing on their own. */
+    lightLabel?: string;
+    systemLabel?: string;
+    darkLabel?: string;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * Light, the system's, or dark.
+ *
+ * A SETTING, so it is a radio group and the arrows change it as they move: a
+ * choice that is not in the URL and pushes no history entry costs nothing to
+ * change on every keypress. The engine drew this row as TABS, so a screen
+ * reader announced three tabs and went looking for the panels they opened.
+ *
+ * EACH OPTION IS A WORD, not a picture of one. The glyphs are the whole of
+ * what is drawn, so without a spoken name the row is three unnamed buttons.
+ */
+export declare function ThemeSwitcher({ storageKey, label, lightLabel, systemLabel, darkLabel, size, className, }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export interface DensitySwitcherProps {
+    storageKey?: string;
+    label?: string;
+    /** What each choice is called out loud. */
+    compactLabel?: string;
+    normalLabel?: string;
+    comfortableLabel?: string;
+    /** What each choice is drawn as. One letter, which is a picture of a size. */
+    compactMark?: string;
+    normalMark?: string;
+    comfortableMark?: string;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+/**
+ * How much room the interface gives itself.
+ *
+ * THE LETTERS ARE A PICTURE AND THE WORDS ARE THE NAME. Drawn as S, M and L
+ * with nothing else, a screen reader read out three letters, which name
+ * nothing: a reader was offered "S" and left to guess. The mark stays, and
+ * each option is called Compact, Normal or Comfortable.
+ */
+export declare function DensitySwitcher({ storageKey, label, compactLabel, normalLabel, comfortableLabel, compactMark, normalMark, comfortableMark, size, className, }: DensitySwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/ThemeSwitcher/index.d.ts

@@ -0,0 +1,4 @@
+export { DensitySwitcher, ThemeSwitcher } from './ThemeSwitcher.js';
+export type { DensitySwitcherProps, ThemeSwitcherProps } from './ThemeSwitcher.js';
+export { applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference, } from './preferences.js';
+export type { DensityPreference, PreferenceOptions, StoredPreferences, ThemePreference, } from './preferences.js';

package/dist/ThemeSwitcher/index.js

@@ -0,0 +1,6 @@
+export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-GUIF6Q6N.js';
+import '../chunk-ARMRX2YV.js';
+import '../chunk-YMWONFSI.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/preferences.d.ts

@@ -0,0 +1,51 @@
+/** What a reader can ask the palette to be. `system` follows the platform. */
+export type ThemePreference = 'system' | 'light' | 'dark';
+/** How much room the interface gives itself. `normal` is the unscaled step. */
+export type DensityPreference = 'normal' | 'compact' | 'comfortable';
+/**
+ * Puts the theme on the root element.
+ *
+ * `system` REMOVES the attribute rather than writing a third value, because
+ * the stylesheet's own default is the system's: a document with no attribute
+ * is light, or dark where the platform asks for dark. A `data-theme="system"`
+ * would match neither selector and paint the light palette on a reader who
+ * asked for dark.
+ */
+export declare function applyTheme(theme: ThemePreference): void;
+/** Puts the density on the root element. `normal` removes the attribute. */
+export declare function applyDensity(density: DensityPreference): void;
+export interface PreferenceOptions {
+    /** Where the choice is kept. An application picks its own name. */
+    storageKey: string;
+}
+/**
+ * The reader's theme, kept on the root element and in storage.
+ *
+ * WHY IT IS A HOOK RATHER THAN A CONTEXT. Nothing renders differently by
+ * theme: the palette is CSS custom properties on the root, so the only state
+ * is which attribute is set, and a context would make every component that
+ * reads it re-render for a change none of them draw.
+ */
+export declare function useThemePreference({ storageKey, }: PreferenceOptions): [ThemePreference, (next: ThemePreference) => void];
+/** The reader's density, kept on the root element and in storage. */
+export declare function useDensityPreference({ storageKey, }: PreferenceOptions): [DensityPreference, (next: DensityPreference) => void];
+export interface StoredPreferences {
+    themeKey?: string | undefined;
+    densityKey?: string | undefined;
+}
+/**
+ * Puts the stored preferences on the root element before the first render.
+ *
+ * WHY IT IS EXPORTED RATHER THAN DONE IN AN EFFECT. An effect runs after the
+ * first paint, so a reader who chose dark sees one frame of light on every
+ * load. The usual answer is a small inline script in the document head, and a
+ * strict Content-Security-Policy refuses one: this is the same work, called
+ * from the module bundle at its top level, which the policy already allows.
+ *
+ * It returns what it applied, so a caller can seed its own state from the
+ * same read rather than making a second one.
+ */
+export declare function applyStoredPreferences({ themeKey, densityKey }: StoredPreferences): {
+    theme: ThemePreference;
+    density: DensityPreference;
+};