@crewlethq/ui 0.48.3 → 0.49.0

package/dist/BrandSample/BrandSample.d.ts

@@ -0,0 +1,75 @@
+import { type BrandColors } from '../BrandScope/index.js';
+/** What the sample draws: the opening of a doc, or a title slide. */
+export type BrandSampleKind = 'doc' | 'slide';
+/** The mode the sample is drawn in, whatever mode the page around it is in. */
+export type BrandSampleMode = 'light' | 'dark';
+/**
+ * A brand's colours by role, as the engine stores them: BrandScope's own. Each
+ * is `#rrggbb`; one that is absent, or is not one, takes the product's value
+ * for the sample's mode.
+ */
+export type BrandSampleColors = BrandColors;
+export interface BrandSampleLabels {
+    /** The doc's heading. */
+    heading: string;
+    /** The doc's sentence, which the link follows. */
+    body: string;
+    /** The link at the end of the doc's sentence, drawn in the accent. */
+    link: string;
+    /** The quiet line under the doc's sentence. */
+    byline: string;
+    /** The slide's heading. */
+    slideHeading: string;
+    /** The slide's footer, after the company's name. */
+    slideFooter: string;
+    /** What the drawing is, said as its name. */
+    label: (name: string, kind: BrandSampleKind, mode: BrandSampleMode) => string;
+}
+export interface BrandSampleProps {
+    kind: BrandSampleKind;
+    /** The mode it is drawn in. It follows this, not the page, so a preview can show both. */
+    mode: BrandSampleMode;
+    /** The company's name: the slide's footer, and the doc's wordmark where there is no logo. */
+    name: string;
+    colors: BrandSampleColors;
+    /**
+     * The logo for a light ground, as an address the host has already
+     * validated (the engine's file route, through the dashboard's checked blob
+     * path).
+     */
+    logo?: string | null | undefined;
+    /** The logo for a dark ground. In dark mode it stands in for `logo`, which it falls back to. */
+    logoOnDark?: string | null | undefined;
+    /** The square mark the slide carries. Without one, the mode's logo stands in. */
+    mark?: string | null | undefined;
+    /** The family list for headings. Not a list of family names, it is the package's display face. */
+    headingFamily?: string | undefined;
+    /** The family list for everything else. Not a list of family names, it is the package's sans. */
+    bodyFamily?: string | undefined;
+    className?: string | undefined;
+    labels?: Partial<BrandSampleLabels> | undefined;
+}
+/**
+ * A company's brand, drawn: the opening of a doc or a title slide in its
+ * colours, its type and its logo. The preview beside Company › Brand, a brand
+ * kit's own view and its gallery cover.
+ *
+ * A PICTURE, NAMED. It is an image to assistive technology, named by what it
+ * shows ("A doc in the Acme brand, light mode"); the words inside are sample
+ * copy, and its link is drawn, never followed.
+ *
+ * DRAWN THROUGH THE BRAND MAPPING ITSELF. The sample is a BrandScope pinned to
+ * its `mode`: its ground, text, accent and faces are the public tokens as the
+ * mapping the artifact kit draws every page with sets them, so the preview
+ * shows what an artifact will look like rather than a second reading of the
+ * rules. The sample is its mode whatever mode the page is in (a role the
+ * brand lacks, and every token that is not a brand role, takes the default
+ * theme's value for the mode), so two samples in two modes sit side by side.
+ * A colour reaches a style only once it has passed `#rrggbb`, and a family
+ * list only once it reads as family names; anything else is the product's.
+ *
+ * ONE SHAPE AT ANY SIZE. The sample keeps a 16:9 frame and sets every length
+ * against its own width (a container query unit), so the same drawing reads
+ * as a gallery cover and as a preview beside a form.
+ */
+export declare function BrandSample({ kind, mode, name, colors, logo, logoOnDark, mark, headingFamily, bodyFamily, className, labels, }: BrandSampleProps): import("react").JSX.Element;

package/dist/BrandSample/index.d.ts

@@ -0,0 +1,3 @@
+import './BrandSample.css';
+export { BrandSample } from './BrandSample.js';
+export type { BrandSampleColors, BrandSampleKind, BrandSampleLabels, BrandSampleMode, BrandSampleProps } from './BrandSample.js';

package/dist/BrandSample/index.js

@@ -0,0 +1,5 @@
+export { BrandSample } from '../chunk-OEEYL2CM.js';
+import '../chunk-P3OIM6OC.js';
+import '../chunk-5SGHW42B.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-ODEQTPFM.js';

package/dist/BrandSample-G5V7GKR2.css

@@ -0,0 +1,185 @@
+/*
+ * A company's brand, drawn: a doc's opening or a title slide, in a 16:9 frame
+ * that sets every length against its own width, so one drawing reads at a
+ * gallery cover's size and at a preview's.
+ *
+ * It paints with the public tokens, which the sample's BrandScope (pinned to
+ * the sample's mode) sets from the brand through the artifact kit's own
+ * mapping: the ground, the text, the accent, the highlight and the two faces,
+ * and the quiet line in the tertiary text of the sample's pinned mode.
+ */
+.crewlet-brand-sample {
+  /* The frame's corner. A host drawing the sample edge to edge in a cover
+     that clips its own corners sets it to its own. */
+  --crewlet-brand-sample-radius: var(--radius-lg);
+
+  /* THE SAMPLE IS ITS OWN CONTAINER, so `cqi` inside it is its own width. */
+  container-type: inline-size;
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: var(--crewlet-brand-sample-radius);
+  background: var(--color-surface-background);
+  /* AN EDGE OF ITS OWN, inside the frame, so a ground that matches the page
+     is still a frame. */
+  box-shadow: inset 0 0 0 1px var(--color-border-hover);
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  line-height: var(--font-line-height-snug);
+  user-select: none;
+}
+
+.crewlet-brand-sample__page,
+.crewlet-brand-sample__slide {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* ---- the doc's opening ---- */
+
+.crewlet-brand-sample__page {
+  align-items: flex-start;
+  gap: 2.4cqi;
+  padding: 6cqi 7cqi;
+}
+
+.crewlet-brand-sample__brand {
+  display: flex;
+  align-items: center;
+  height: 6cqi;
+  max-width: 40%;
+  margin-bottom: 1.6cqi;
+}
+
+.crewlet-brand-sample__logo {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+/* WHERE THERE IS NO LOGO, the company's name in the heading face. */
+.crewlet-brand-sample__wordmark {
+  overflow: hidden;
+  font-family: var(--font-family-display);
+  font-size: 3.4cqi;
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-brand-sample__heading {
+  max-width: 100%;
+  overflow: hidden;
+  font-family: var(--font-family-display);
+  font-size: 6cqi;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* THE ACCENT RULE under the heading, in the brand's main colour for the mode. */
+.crewlet-brand-sample__rule {
+  display: block;
+  width: 12cqi;
+  height: 0.8cqi;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+}
+
+.crewlet-brand-sample__body {
+  max-width: 82%;
+  font-size: 2.8cqi;
+  line-height: var(--font-line-height-normal);
+}
+
+/* A LINK, DRAWN: the accent ink and its underline, and nothing to follow. */
+.crewlet-brand-sample__link {
+  color: var(--color-brand-accent);
+  text-decoration: underline;
+  text-decoration-thickness: 0.2cqi;
+  text-underline-offset: 0.5cqi;
+}
+
+.crewlet-brand-sample__byline {
+  margin-top: auto;
+  color: var(--color-text-tertiary);
+  font-size: 2.2cqi;
+}
+
+/* ---- the title slide ---- */
+
+.crewlet-brand-sample__slide {
+  justify-content: flex-end;
+  gap: 2.4cqi;
+  padding: 6.5cqi 7cqi;
+}
+
+/* The mark in the slide's top corner, square, at the slide's own scale. */
+.crewlet-brand-sample__slide .crewlet-brand-sample__brand {
+  position: absolute;
+  top: 6.5cqi;
+  left: 7cqi;
+  height: 7cqi;
+  max-width: 30%;
+  margin: 0;
+}
+
+.crewlet-brand-sample__logo--mark {
+  width: 7cqi;
+  height: 7cqi;
+}
+
+/* THE ACCENT BAR: the brand's main colour, then its second where it has one. */
+.crewlet-brand-sample__bar {
+  display: flex;
+  gap: 0.8cqi;
+  height: 1cqi;
+}
+
+.crewlet-brand-sample__bar-primary,
+.crewlet-brand-sample__bar-secondary {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+}
+
+.crewlet-brand-sample__bar-primary {
+  width: 12cqi;
+  background: var(--color-brand-accent);
+}
+
+.crewlet-brand-sample__bar-secondary {
+  width: 4cqi;
+  background: var(--color-brand-highlight);
+}
+
+/* TWO LINES AT MOST, set large: a title slide's heading. */
+.crewlet-brand-sample__heading--slide {
+  display: -webkit-box;
+  max-width: 48%;
+  font-size: 7.5cqi;
+  line-height: 1.05;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.crewlet-brand-sample__footer {
+  margin-top: 3cqi;
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: 2cqi;
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}

package/dist/BrandScope/BrandScope.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * A brand's colours by role, as the engine stores them. Each is `#rrggbb`;
+ * one that is absent, or is not one, sets nothing, and the token it would
+ * have driven keeps the page's value.
+ */
+export interface BrandColors {
+    primary?: string | undefined;
+    primary_on_dark?: string | undefined;
+    secondary?: string | undefined;
+    text?: string | undefined;
+    light_ground?: string | undefined;
+    dark_ground?: string | undefined;
+}
+/** A mode a scope can be pinned to, for a preview that shows a brand in one mode whatever the page is in. */
+export type BrandScopeMode = 'light' | 'dark';
+export interface BrandScopeProps extends HTMLAttributes<HTMLDivElement> {
+    colors: BrandColors;
+    /** The family list for headings. Set only when it reads as family names. */
+    headingFamily?: string | undefined;
+    /** The family list for everything else. Set only when it reads as family names. */
+    bodyFamily?: string | undefined;
+    /**
+     * Pins the mode. Left out, the scope follows the page's light or dark, as
+     * every surface in it does; pinned, it is that mode whatever the page is in:
+     * the default theme's palette for the mode, with the brand's steps for it.
+     */
+    mode?: BrandScopeMode | undefined;
+    /** The region the brand applies to. */
+    children?: ReactNode;
+}
+/**
+ * The inputs a brand sets, each only once it has passed its gate: a colour as
+ * `#rrggbb`, a family list as family names, which then ends in the page's own
+ * face, so a face still loading draws as the page's type.
+ */
+export declare function brandScopeInputs(colors: BrandColors, headingFamily?: string, bodyFamily?: string): Record<string, string>;
+/**
+ * A region of the page in a company's brand: a doc, a board, a preview. The
+ * public tokens inside it (the accent and its family, the grounds, the body
+ * text, the faces) take the brand's values, and the page's chrome around it
+ * keeps its own.
+ *
+ * THE MAPPING IS THE ARTIFACT KIT'S. The rules that derive the accent's hover,
+ * press, ink, soft fills and the label on it from one colour, per mode, are
+ * one stylesheet in @crewlethq/tokens (`css/brand`), and this component's
+ * stylesheet (`css/brand-scope`) is built from it with its selectors moved
+ * onto the scope. A page in the kit and a region of the dashboard in the same
+ * brand are drawn by the same rules. The focus ring stays the theme's.
+ *
+ * TWO ELEMENTS, ONE BOX. The outer element carries the inputs and captures
+ * the page's value of every token the brand drives, which an input left out
+ * falls back to; it draws no box (`display: contents`). The inner element is
+ * the box, with `className` and every other attribute on it, and sets the
+ * body text and face so plain text inside follows the brand. It paints no
+ * ground: a surface inside paints its own with the tokens.
+ *
+ * Nothing a person typed reaches a style unchecked: a colour only as
+ * `#rrggbb`, a family list only when it reads as family names.
+ */
+export declare function BrandScope({ colors, headingFamily, bodyFamily, mode, className, children, ...rest }: BrandScopeProps): import("react").JSX.Element;

package/dist/BrandScope/index.d.ts

@@ -0,0 +1,4 @@
+import '@crewlethq/tokens/css/brand-scope';
+import './BrandScope.css';
+export { BrandScope, brandScopeInputs } from './BrandScope.js';
+export type { BrandColors, BrandScopeMode, BrandScopeProps } from './BrandScope.js';

package/dist/BrandScope/index.js

@@ -0,0 +1,4 @@
+export { BrandScope, brandScopeInputs } from '../chunk-P3OIM6OC.js';
+import '../chunk-5SGHW42B.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-ODEQTPFM.js';

package/dist/BrandScope-H2KZHGT7.css

@@ -0,0 +1,29 @@
+/*
+ * A region in a company's brand. The mapping itself (the captured page values
+ * on `.crewlet-brand-scope`, the brand's steps and public tokens on
+ * `.crewlet-brand-scope__layer`) is @crewlethq/tokens' css/brand-scope,
+ * imported beside this file and built from the one source the artifact kit's
+ * brand layer is built from. This file is only the two elements' own shape.
+ */
+
+/* The outer element carries the inputs and the capture, and draws no box. */
+.crewlet-brand-scope {
+  display: contents;
+}
+
+/* THE BOX, with the body text and face of the brand, so plain text inside it
+   follows the brand without a rule of its own. It paints no ground. */
+.crewlet-brand-scope__layer {
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+}
+
+/* A PINNED MODE is that mode for the platform's own drawing too: a native
+   control or a scrollbar inside a light preview on a dark page is light. */
+.crewlet-brand-scope[data-mode='light'] > .crewlet-brand-scope__layer {
+  color-scheme: light;
+}
+
+.crewlet-brand-scope[data-mode='dark'] > .crewlet-brand-scope__layer {
+  color-scheme: dark;
+}

package/dist/Checkbox/Checkbox.d.ts

@@ -24,6 +24,14 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
      * which is why it is a prop here rather than something a caller can spell.
      */
     indeterminate?: boolean;
+    /**
+     * The label is SAID AND NOT DRAWN: the box alone, on a target the pointer
+     * floor allows. For a box whose surroundings already show what it picks (a
+     * card's title, a row of a list), where printing "Select Q3 plan" beside it
+     * would only repeat the row. The label is still the box's name, so it still
+     * says what the box picks.
+     */
+    hideLabel?: boolean | undefined;
     /** The new state, for a caller that does not want to read it off an event. */
     onCheckedChange?: (checked: boolean) => void;
 }

package/dist/Checkbox/index.js

@@ -1,4 +1,4 @@
-export { Checkbox, CheckboxGroup } from '../chunk-F57N6ZJG.js';
+export { Checkbox, CheckboxGroup } from '../chunk-NCHKKYPQ.js';
 import '../chunk-EXRRTKWT.js';
 import '../chunk-XCUUI7E7.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Checkbox-ALWG3WV2.css → Checkbox-MB22OW6P.css}

@@ -126,6 +126,24 @@
   font-size: var(--font-size-compact);
 }
 
+/*
+ * THE BARE BOX (`hideLabel`): no words beside it, so the row's floor and its
+ * gap go, and the box is centred on a square the pointer floor allows. The
+ * label is still its name, said rather than printed.
+ */
+.crewlet-checkbox--bare {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  min-width: var(--size-target-min);
+  min-height: var(--size-target-min);
+}
+
+.crewlet-checkbox--bare .crewlet-checkbox__control {
+  margin: 0;
+}
+
 .crewlet-checkbox.is-disabled,
 .crewlet-checkbox.is-disabled .crewlet-checkbox__control {
   cursor: not-allowed;

package/dist/ColorField/ColorField.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from 'react';
+export interface ColorFieldLabels {
+    /** Why a typed value was refused, with what right looks like. */
+    invalid: string;
+    /** Why an emptied required field was refused. */
+    missing: string;
+    /** Names the colour picker beside the field: "Pick the Primary colour". */
+    picker: (label: string) => string;
+    /**
+     * What the empty field shows: the shape a value takes, never a colour, which
+     * an empty field would seem to hold.
+     */
+    placeholder: string;
+}
+export interface ColorFieldProps {
+    /** The colour's role, which is the field's name: "Primary". */
+    label: string;
+    /**
+     * The colour as it stands, `#rrggbb`, or `''` for none. Controlled: the
+     * field reports a new value only once it is one.
+     */
+    value: string;
+    /**
+     * A new colour: lowercase `#rrggbb`, or `''` when an optional field is
+     * emptied. Never called with a value that is not one, so a host never
+     * stores half a hex code.
+     */
+    onChange: (value: string) => void;
+    /** An answer is required: emptying the field is refused rather than reported. */
+    required?: boolean | undefined;
+    /** Says "(optional)" beside the label. */
+    optional?: boolean | undefined;
+    /** Where the colour is used: "Links, buttons and accents". */
+    helper?: ReactNode;
+    /**
+     * A refusal from elsewhere (the engine's), drawn as the field's error. The
+     * field's own refusal of a value it cannot read is drawn without it.
+     */
+    error?: ReactNode;
+    disabled?: boolean | undefined;
+    /** The text field's name, for a form that posts. */
+    name?: string | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    labels?: Partial<ColorFieldLabels> | undefined;
+}
+/**
+ * A colour a person chooses: a hex field, a swatch that opens the platform's
+ * colour picker, and the reason a value was refused.
+ *
+ * THE VALUE IS `#` AND SIX HEX DIGITS, and nothing else is ever reported: the
+ * field holds what is being typed, and a value reaches `onChange` only once it
+ * reads as a colour, lowercased, the one spelling the engine stores. A value
+ * that does not read is refused when the reader leaves the field (Enter or
+ * Tab), never while they are still typing it, with a sentence saying what
+ * right looks like.
+ *
+ * THE SWATCH IS THE PICKER. It is the platform's own colour input, drawn as
+ * the chip of the colour the field holds and named for it, so it is a real,
+ * labelled control a keyboard reaches; picking a colour there writes it into
+ * the field. With no colour yet, the swatch is the hatch of none.
+ */
+export declare function ColorField({ label, value, onChange, required, optional, helper, error, disabled, name, id, className, labels, }: ColorFieldProps): import("react").JSX.Element;

package/dist/ColorField/index.d.ts

@@ -0,0 +1,3 @@
+import './ColorField.css';
+export { ColorField } from './ColorField.js';
+export type { ColorFieldLabels, ColorFieldProps } from './ColorField.js';

package/dist/ColorField/index.js

@@ -0,0 +1,11 @@
+export { ColorField } from '../chunk-W6FOEBIL.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-EXRRTKWT.js';
+import '../chunk-XCUUI7E7.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ColorField-2OIOWT3Z.css

@@ -0,0 +1,68 @@
+/*
+ * A colour a person chooses: the swatch that opens the platform's picker,
+ * beside the hex field. The swatch's fill is the one value that is not a
+ * token, and it arrives through `--crewlet-color-field-value` only after it
+ * has passed `#rrggbb`.
+ */
+.crewlet-color-field__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * THE SWATCH IS THE PICKER: the platform's colour input lies over the chip,
+ * transparent, so a press anywhere on the chip opens it and the chip is what
+ * the reader sees, the same in every browser. Its edge is its own, so a
+ * colour that matches the page is still a chip.
+ */
+.crewlet-color-field__swatch {
+  /* The hatch of no colour, as a colour swatch draws it. */
+  --crewlet-color-field-hatch: repeating-linear-gradient(
+    -45deg,
+    var(--color-border-hatch) 0 1px,
+    transparent 1px var(--spacing-2)
+  );
+
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  width: var(--size-control-md);
+  height: var(--size-control-md);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--crewlet-color-field-value, var(--color-surface-inset));
+  box-shadow: inset 0 0 0 1px var(--color-border-field);
+}
+
+.crewlet-color-field__swatch.is-empty {
+  background: var(--crewlet-color-field-hatch);
+}
+
+.crewlet-color-field__swatch.is-disabled {
+  opacity: 0.6;
+}
+
+.crewlet-color-field__picker {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.crewlet-color-field__picker:disabled {
+  cursor: not-allowed;
+}
+
+/* THE RING IS THE CHIP'S: the input under it is transparent, so the ring a
+   keyboard needs is drawn on what the reader sees. */
+.crewlet-color-field__swatch:has(.crewlet-color-field__picker:focus-visible) {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 0;
+}

package/dist/ColorSwatch/ColorSwatch.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+export interface ColorSwatchLabels {
+    /** Names the copy control: "Copy the Primary colour". */
+    copy: (name: string) => string;
+    /** Read out once the value is on the clipboard: "#5b3df5 copied to the clipboard". */
+    copied: (hex: string) => string;
+    /** Read out when the browser refused the clipboard. */
+    failed: string;
+    /** Printed in the value's place for a role with no colour. */
+    empty: string;
+}
+export type ColorSwatchSize = 'md' | 'sm';
+export interface ColorSwatchProps {
+    /** The colour's role: "Primary", "Dark ground". */
+    name: string;
+    /**
+     * The colour, as `#rrggbb`. Anything else (an empty role, a value that is
+     * not one) draws the hatch of no colour and says `empty`, and is never put
+     * into a style.
+     */
+    value: string | null | undefined;
+    /** What the role is used for: "Links, buttons and accents". */
+    description?: ReactNode;
+    /** A copy control beside the value. On by default: a reader takes the value to use elsewhere. */
+    copyable?: boolean | undefined;
+    /** `sm` is a row of chips beside a name, for a dense list. */
+    size?: ColorSwatchSize | undefined;
+    className?: string | undefined;
+    labels?: Partial<ColorSwatchLabels> | undefined;
+}
+/**
+ * One colour of a brand: a chip of it, its role, its value, and a control that
+ * copies the value and says whether it landed.
+ *
+ * THE VALUE IS PRINTED, so the chip is decoration: a reader who cannot tell
+ * two chips apart still reads two values. The value is drawn through one
+ * custom property, and only after it has passed `#rrggbb`, so a colour typed
+ * by a person never reaches a stylesheet as anything but a colour.
+ *
+ * THE CHIP HAS AN EDGE OF ITS OWN, so a colour that matches the page (white on
+ * a light theme, near black on a dark one) is still a chip.
+ */
+export declare function ColorSwatch({ name, value, description, copyable, size, className, labels, }: ColorSwatchProps): import("react").JSX.Element;

package/dist/ColorSwatch/index.d.ts

@@ -0,0 +1,3 @@
+import './ColorSwatch.css';
+export { ColorSwatch } from './ColorSwatch.js';
+export type { ColorSwatchLabels, ColorSwatchProps, ColorSwatchSize } from './ColorSwatch.js';

package/dist/ColorSwatch/index.js

@@ -0,0 +1,9 @@
+export { ColorSwatch } from '../chunk-WLSEAIVC.js';
+import '../chunk-7SHAFLEX.js';
+import '../chunk-STJ7QBC3.js';
+import '../chunk-DTIW4CHZ.js';
+import '../chunk-UZMNR366.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-LACA4JGC.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';