@crewlethq/ui 0.2.0 → 0.4.0

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,54 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type DisclosureHeadingLevel } from '../Disclosure/anatomy.js';
+export type AccordionType = 'single' | 'multiple';
+export type AccordionDensity = 'default' | 'compact';
+export type AccordionAppearance = 
+/** The stack draws its own hairlines, top and bottom. */
+'default'
+/**
+ * NO FRAME OF ITS OWN, so the stack can be a Card's contents: the card's
+ * border is the frame, the trigger is the card's identity row, and the
+ * `actions` slot sits in that row outside the button.
+ */
+ | 'card';
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** 'single' opens one item at a time; 'multiple' allows many. Defaults to 'single'. */
+    type?: AccordionType | undefined;
+    /** For type="single": allow closing the open item by activating it again. Defaults to true. */
+    collapsible?: boolean | undefined;
+    /** Uncontrolled initial open item(s). */
+    defaultValue?: string | string[] | undefined;
+    /** Controlled open item(s). */
+    value?: string | string[] | undefined;
+    onValueChange?: ((value: string | string[]) => void) | undefined;
+    /** Tightens the rows for a settings stack rather than a marketing FAQ. */
+    density?: AccordionDensity | undefined;
+    appearance?: AccordionAppearance | undefined;
+    /**
+     * The heading each item's trigger is wrapped in. Defaults to the level the
+     * surrounding surface declares, so the same stack is an `h3` under a section
+     * heading and an `h2` inside a dialog whose title is the `h1` of everything
+     * below it. `none` leaves the buttons unwrapped.
+     */
+    headingLevel?: DisclosureHeadingLevel | undefined;
+}
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Stable identifier for this item, used to track its open state. */
+    value: string;
+    /** The always-visible header content. */
+    title: ReactNode;
+    /** A fact inside the trigger: a duration, a status word, a model. */
+    meta?: ReactNode;
+    /** How many of something this item holds. */
+    count?: number | string | undefined;
+    /** Sets the title in the mono face: a tool name, a config path. */
+    mono?: boolean | undefined;
+    /** Controls beside the trigger, outside the button. */
+    actions?: ReactNode;
+    disabled?: boolean | undefined;
+}
+declare const AccordionItem: ({ value, title, meta, count, mono, actions, disabled, className, children, ...rest }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: (({ type, collapsible, defaultValue, value, onValueChange, density, appearance, headingLevel, className, children, ...rest }: AccordionProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ value, title, meta, count, mono, actions, disabled, className, children, ...rest }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { AccordionItem };

package/dist/Accordion/index.d.ts

@@ -0,0 +1,4 @@
+import '../Disclosure/Disclosure.css';
+import './Accordion.css';
+export { Accordion, AccordionItem } from './Accordion.js';
+export type { AccordionProps, AccordionItemProps, AccordionType, AccordionDensity, AccordionAppearance, } from './Accordion.js';

package/dist/Accordion/index.js

@@ -0,0 +1,6 @@
+export { Accordion, AccordionItem } from '../chunk-7FZ53WDJ.js';
+import '../chunk-5KPQ6D7N.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Accordion-ZI2WLD5C.css

@@ -0,0 +1,87 @@
+/*
+ * Accordion: a stack of disclosures, one hairline between them.
+ *
+ * The rows themselves are the shared disclosure anatomy (see
+ * Disclosure.css). This file states only what makes a STACK: the frame, the
+ * boundary between items, and the heading register a marketing accordion sets
+ * its triggers in.
+ */
+
+.crewlet-accordion {
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-accordion--default {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-accordion--default .crewlet-accordion__item {
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+/*
+ * NO FRAME. Inside a Card the card's own border is the frame, and a second one
+ * inside it draws a box in a box. The items still separate from each other.
+ */
+.crewlet-accordion--card .crewlet-accordion__item + .crewlet-accordion__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * The heading register: this is a section title a reader scans a page for, not
+ * the compact row a console folds a tool call into.
+ */
+.crewlet-accordion .crewlet-accordion__trigger {
+  padding: var(--spacing-4) var(--spacing-2);
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+}
+
+/*
+ * The console's own expander head, restated here because the heading register
+ * above it has to be overridden: the caption size, at the disclosure head's
+ * own inset, ON ITS INK. The ink is the half that has to be written out twice
+ * rather than inherited: the heading register above sets the primary step at
+ * the same specificity the shared anatomy's secondary step is declared at, so
+ * without these two rules the compact head is the one expander in the package
+ * that is already at its hover colour before a pointer reaches it.
+ */
+.crewlet-accordion--compact .crewlet-accordion__trigger {
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--font-letter-spacing-normal);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-accordion--compact .crewlet-accordion__trigger:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-accordion__item.is-disabled .crewlet-accordion__trigger {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-accordion__panel {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-md);
+  line-height: var(--font-line-height-relaxed);
+}
+
+.crewlet-accordion__panel-inner {
+  padding: 0 var(--spacing-2) var(--spacing-5);
+  max-width: var(--size-measure);
+}
+
+.crewlet-accordion--compact .crewlet-accordion__panel {
+  font-size: var(--font-size-sm);
+}
+
+.crewlet-accordion--compact .crewlet-accordion__panel-inner {
+  padding: 0 var(--spacing-2) var(--spacing-3);
+}

package/dist/AddPill/AddPill.d.ts

@@ -0,0 +1,114 @@
+/**
+ * The control that adds a child: one mark at rest, a split pill of choices
+ * under the pointer.
+ *
+ * WHY NOT A MENU. What goes under a node of an org chart is two or three
+ * kinds of thing, and the choice between them is the whole of the decision. A
+ * menu spends a click and a surface of its own on asking it, lands a list over
+ * the chart, and takes the answer somewhere the eye was not looking. The pill
+ * asks it in place: the mark the pointer arrived at grows into the choices,
+ * each one is where the mark was, and the answer is the same press that would
+ * have opened the menu. It is the console org chart's own gesture, and this is
+ * that gesture as a component.
+ *
+ * QUIET AT REST, AND SMALL. What a resting chart draws for this is one disc on
+ * the branch, at about a third of a node's height: it says a child can go here
+ * and says nothing else. Everything that makes it a control (the boundary, the
+ * full ink, the choices) arrives when it is reached. The hue is the node
+ * ramp's GREEN, which is the console chart's own answer and the one thing on
+ * that chart drawn in it, so "the green plus" names a control rather than
+ * describing one.
+ *
+ * ONE GESTURE, TWO SURFACES. A chart draws it on a branch (`sm`, `split`) and
+ * a table row draws it beside the row's other controls (`md`, `inline`). They
+ * were two components once, with two sizes, two grounds, two border alphas and
+ * an animation on one of them, which is what a reader met as two different
+ * controls doing one thing.
+ *
+ * HOVER PREVIEWS, A PRESS LOCKS. Moving onto the mark opens the pill so the
+ * choices can be read without committing to anything, and moving off closes
+ * it again; pressing the mark holds it open, so the choices can be read at
+ * leisure, and only a press somewhere else, Escape, or a choice closes it. The
+ * two are one state with a lock on it rather than two behaviours, because a
+ * pill that closed under the pointer after a press is a pill that loses the
+ * click a reader is about to make.
+ *
+ * THE OPEN IS A SPRING AND THE CLOSE IS A RECOIL. It grows from the width of
+ * the mark to the width of the pill, which is the mark SPLITTING rather than a
+ * surface appearing over it, and that is the whole reason the gesture reads as
+ * one thing. Under `prefers-reduced-motion: reduce` it simply is open or
+ * closed: nothing is hidden and no choice is slower to reach.
+ *
+ * THE KEYBOARD NEVER NEEDS IT. It is a disclosure and it behaves as one (the
+ * mark carries `aria-expanded`, a press opens it and moves focus onto the
+ * first choice, Escape closes it and gives focus back), but a chart that puts
+ * this in a pointer-only strip owes its keyboard reader the same choices
+ * somewhere reachable, in the node's own menu. Both are the same list.
+ */
+import { type ReactNode } from 'react';
+/**
+ * How long the pill takes to open or to close, in milliseconds.
+ *
+ * It is here as well as in the stylesheet because the closing pill has to stay
+ * MOUNTED for exactly as long as its own animation, and a component cannot
+ * read a duration token. The two are checked against each other by this
+ * folder's suite rather than remembered.
+ */
+export declare const ADD_PILL_MS = 200;
+/** One choice of what to add. */
+export interface AddPillSection {
+    key: string;
+    /** What this choice adds: "Add a unit". Its accessible name and its tooltip. */
+    label: string;
+    /** The mark drawn in the section. An SVG glyph, sized by the pill. */
+    icon: ReactNode;
+    onSelect(): void;
+    /** Drawn and announced, and refuses the press: see the design system's read-only rule. */
+    disabled?: boolean | undefined;
+    /**
+     * Unavailable, and WHY. A reason rather than a flag, for the same reason
+     * `IconButton` takes one: a choice that is not on offer right now still has
+     * to be reachable and still has to say what would put it back. It refuses
+     * the press like `disabled` and is read after the choice's own name.
+     */
+    disabledReason?: string | undefined;
+}
+export interface AddPillProps {
+    /**
+     * The resting mark's accessible name, which is what the pill belongs to:
+     * "Add to Engineering". Nine controls on one chart all called "Add" are nine
+     * controls a reader tells apart by looking at where they are.
+     */
+    label: string;
+    /**
+     * The choices, in the order they are drawn across the pill. Two to four: the
+     * pill is as wide as a pointer target per section, and past four it is wider
+     * than the node it hangs under.
+     */
+    sections: readonly AddPillSection[];
+    /**
+     * How big the control is.
+     *
+     * `sm` is a BRANCH's: a disc about a third of a node's height inside a
+     * pointer target, which is what a chart at rest can carry one of per node.
+     * `md` is a ROW's: one control step, drawn at the size it is hit, beside the
+     * other controls at the end of a table row.
+     */
+    size?: 'sm' | 'md' | undefined;
+    /**
+     * Where the choices appear.
+     *
+     * `split` is the chart's: the pill grows out of the mark, centred on it, so
+     * each choice is within a few pixels of what the pointer arrived at. Use it
+     * where the mark stands alone on a branch. `inline` is the row's: the mark
+     * stays put and the choices open beside it, so the controls the row already
+     * draws are not covered by a pill over them.
+     */
+    layout?: 'split' | 'inline' | undefined;
+    /** Focus stays out of the pill, for a chart that puts it in a pointer-only strip. */
+    tabIndex?: number | undefined;
+    /** Called when a press opens the pill, for a grid whose one tab stop follows focus. */
+    onOpen?: (() => void) | undefined;
+    className?: string | undefined;
+}
+export declare function AddPill({ label, sections, size, layout, tabIndex, onOpen, className, }: AddPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/AddPill/index.d.ts

@@ -0,0 +1,3 @@
+import './AddPill.css';
+export { AddPill, ADD_PILL_MS } from './AddPill.js';
+export type { AddPillProps, AddPillSection } from './AddPill.js';

package/dist/AddPill/index.js

@@ -0,0 +1,3 @@
+export { ADD_PILL_MS, AddPill } from '../chunk-S4GZWSKR.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';