@antscorp/ui 0.1.3 → 0.1.5

package/src/molecules/ProblemsButton.doc.ts

@@ -1,41 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for ProblemsButton. */
-export const doc = {
-  category: "Feedback",
-  keywords: ["errors", "problems", "popover", "count"],
-  usage: {
-    description:
-      "Summarize validation problems in a count button that opens a selectable list. The view renders nothing when items is empty.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Translate labels.count with the problem count and use onPick's index to locate the corresponding problem.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not assume picking a problem fixes it; the host decides how to reveal or address it.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Count button",
-        required: true,
-        description: "An error glyph and the number of problems when there are problems.",
-      },
-      {
-        name: "Popover",
-        required: false,
-        description: "A titled, scrollable list built while open.",
-      },
-      {
-        name: "Problem actions",
-        required: false,
-        description: "A button per problem that reports its index and closes the popover.",
-      },
-    ],
-  },
-  accessibility: ["labels.count names the count button; title labels the problem list."],
-} satisfies ComponentDoc;

package/src/molecules/RemovableRow.doc.ts

@@ -1,48 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for RemovableRow. */
-export const doc = {
-  category: "Inputs",
-  keywords: ["picked", "row", "remove", "framed"],
-  usage: {
-    description:
-      "Show a picked value with supporting text and a remove action. Use CheckRow when the row is an option to tick instead.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Name the removal through labels.remove and use isFramed when picked values need bordered single-line rows.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not expect isReadOnly to hide host-supplied hover actions; the host must make those appropriate for viewing.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Text",
-        required: true,
-        description: "The value label with an optional description.",
-      },
-      {
-        name: "Problem",
-        required: false,
-        description: "Validation text below an unframed row or a warning tip in a framed row.",
-      },
-      {
-        name: "End content",
-        required: false,
-        description: "Host content optionally swapped for hover actions.",
-      },
-      {
-        name: "Remove button",
-        required: false,
-        description: "Removes the picked value unless read-only.",
-      },
-    ],
-  },
-  accessibility: [
-    "labels.remove names the remove button; name interactive host-supplied hover actions separately.",
-  ],
-} satisfies ComponentDoc;

package/src/molecules/RevealRadioGroup.doc.ts

@@ -1,41 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for RevealRadioGroup. */
-export const doc = {
-  category: "Selection",
-  keywords: ["radio", "choice", "reveal", "details"],
-  usage: {
-    description:
-      "Choose one option and reveal only its related content below the list or beneath that option. Use RevealSwitch for a single boolean setting.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Keep value controlled and choose contentPlacement=option when each option's detail should follow its label.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not expect the group to make controls inside option content read-only or disabled; configure those controls in the host.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Group label",
-        required: true,
-        description: "The group's name, optionally visually hidden.",
-      },
-      {
-        name: "Radio options",
-        required: true,
-        description: "The mutually exclusive choices with optional explanatory tips.",
-      },
-      {
-        name: "Revealed content",
-        required: false,
-        description: "Only the chosen option's content.",
-      },
-    ],
-  },
-  accessibility: ["Supply label even when isLabelHidden, and clear labels for every option."],
-} satisfies ComponentDoc;

package/src/molecules/RevealSwitch.doc.ts

@@ -1,38 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for RevealSwitch. */
-export const doc = {
-  category: "Selection",
-  keywords: ["switch", "boolean", "reveal", "settings"],
-  usage: {
-    description:
-      "Turn a setting on or off and reveal its controls only while it is on. Use RevealRadioGroup when choosing among several alternatives.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Keep value controlled and give the switch a label that explains what enabling it does.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not expect disabling or making the switch read-only to change the behavior of supplied children.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Switch",
-        required: true,
-        description: "The labeled boolean control.",
-      },
-      {
-        name: "Content",
-        required: false,
-        description: "Host controls shown below the switch while value is true.",
-      },
-    ],
-  },
-  accessibility: [
-    "label names the switch; the host supplies accessible labels for revealed controls.",
-  ],
-} satisfies ComponentDoc;

package/src/molecules/RuleRow.doc.ts

@@ -1,43 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for RuleRow. */
-export const doc = {
-  category: "Inputs",
-  keywords: ["rule", "row", "joint", "remove"],
-  usage: {
-    description:
-      "Arrange a joining word, host controls and a remove button on a wrapping row. Inside RepeatableList with columns, the row uses the shared grid tracks.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Give host controls the row's size and use align=start when a control shows validation below its input.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not assume isDisabled or isReadOnly changes the supplied controls; those flags control the row's remove affordance.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Joint word",
-        required: false,
-        description: "The translated word joining this row to its predecessor.",
-      },
-      {
-        name: "Controls",
-        required: true,
-        description: "Host-supplied fields, operators and values.",
-      },
-      {
-        name: "Remove button",
-        required: false,
-        description: "A named action, with its grid track preserved in read-only column layouts.",
-      },
-    ],
-  },
-  accessibility: [
-    "labels.remove names the remove button; each supplied control needs its own label.",
-  ],
-} satisfies ComponentDoc;

package/src/molecules/Select.doc.ts

@@ -1,62 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for Select. */
-export const doc = {
-  category: "Selection",
-  keywords: ["choice", "options", "search"],
-  related: [
-    { name: "TreeSelect", when: "Choose one leaf from a two-level tree." },
-    {
-      name: "ChipListAddPopover",
-      when: "Choose multiple values in a compact popover with an Apply draft.",
-    },
-    {
-      name: "TransferPicker",
-      when: "Choose multiple values with available and picked rows visible together.",
-    },
-  ],
-  example: "Default",
-  usage: {
-    description:
-      "Choose one value from options, optionally grouped into sections. Keep value controlled and update it through onChange. Offer onClear when the selection may be empty.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Use hasSearch for long lists and keep the known label available through labels.value while options load.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not supply labels.warning alongside error expecting both to appear; warning takes precedence over the validation error.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not disable a field merely to display its value; use isReadOnly when editing is unavailable.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Field label",
-        required: true,
-        description: "Names the choice even when visually hidden.",
-      },
-      {
-        name: "Trigger",
-        required: true,
-        description: "Shows the selected value or placeholder and opens the list.",
-      },
-      {
-        name: "Options",
-        required: false,
-        description:
-          "The choices, sections and optional search field, while the list is open and editable.",
-      },
-    ],
-  },
-  accessibility: [
-    "Always provide label, including when isLabelHidden is true.",
-    "Supply translated description and error text so the choice and its validation are clear.",
-  ],
-} satisfies ComponentDoc;

package/src/molecules/SideLabelRow.doc.ts

@@ -1,35 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for SideLabelRow. */
-export const doc = {
-  category: "Layout",
-  keywords: ["card", "row", "caption", "responsive"],
-  usage: {
-    description:
-      "Place a narrow caption beside controls inside a card, with padding for the card's rows. Use FieldRow for a form section with theme-driven caption and control widths.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Keep labelWidth consistent across the card and let controls move below the caption when space runs out.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not treat the visual caption as an accessible label association for every supplied control.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Caption",
-        required: true,
-        description: "The narrow label column, wrapping long text.",
-      },
-      {
-        name: "Controls",
-        required: true,
-        description: "Host content beside the caption or beneath it in a narrow layout.",
-      },
-    ],
-  },
-} satisfies ComponentDoc;

package/src/molecules/SplitButton.doc.ts

@@ -1,41 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for SplitButton. */
-export const doc = {
-  category: "Inputs",
-  keywords: ["button", "menu", "actions", "split"],
-  usage: {
-    description:
-      "Pair a primary action with a menu of related alternatives. With no items, only the main button is shown.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Use isMainDisabled to block only the primary action, and labels.menu to name the menu arrow.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not assume isLoading disables the alternatives menu; it affects the main action while the menu stays usable.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Main button",
-        required: true,
-        description: "The default action, optionally busy or disabled.",
-      },
-      {
-        name: "Menu button",
-        required: false,
-        description: "A named arrow or host glyph opening the alternatives.",
-      },
-      {
-        name: "Menu",
-        required: false,
-        description: "Related actions, each with its own optional disabled state.",
-      },
-    ],
-  },
-  accessibility: ["label names the main action and labels.menu names the icon-only menu button."],
-} satisfies ComponentDoc;

package/src/molecules/StatusButton.doc.ts

@@ -1,39 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for StatusButton. */
-export const doc = {
-  category: "Feedback",
-  keywords: ["status", "dot", "button", "connection"],
-  usage: {
-    description:
-      "Combine an action with a small dot showing a related state. Use a plain button when no state needs to be communicated.",
-    bestPractices: [
-      {
-        guidance: true,
-        description: "Translate labels.status to explain the dot independently of its tone.",
-      },
-      {
-        guidance: false,
-        description: "Do not rely on the dot's color alone to convey the state.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Button text",
-        required: true,
-        description: "The action supplied by label.",
-      },
-      {
-        name: "Status dot",
-        required: true,
-        description: "A named dot in the supplied status tone.",
-      },
-      {
-        name: "Icon",
-        required: false,
-        description: "Host-supplied leading content.",
-      },
-    ],
-  },
-  accessibility: ["labels.status names the status dot and label names the action."],
-} satisfies ComponentDoc;

package/src/molecules/TagSelect.doc.ts

@@ -1,41 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for TagSelect. */
-export const doc = {
-  category: "Selection",
-  keywords: ["tag", "color", "choice", "popover"],
-  usage: {
-    description:
-      "Choose one value through a small colored tag and a popover of tags. Use Select for a conventional field with a larger options list.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Keep option labels concise and provide label for the tag button and title for its popover.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not use the colored tag alone to explain the selected value; its text must identify it.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Picked tag",
-        required: true,
-        description: "The selected label, or the raw unknown value in blue.",
-      },
-      {
-        name: "Popover heading",
-        required: false,
-        description: "The supplied title while the tag list is open.",
-      },
-      {
-        name: "Tag choices",
-        required: false,
-        description: "Wrapping tag buttons that choose a value and close the popover.",
-      },
-    ],
-  },
-  accessibility: ["label names the tag button; read-only mode shows the tag without a button."],
-} satisfies ComponentDoc;

package/src/molecules/ToggleGrid.doc.ts

@@ -1,43 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for ToggleGrid. */
-export const doc = {
-  category: "Selection",
-  keywords: ["toggle", "grid", "multiple", "days"],
-  usage: {
-    description:
-      "Choose several compact values in a grid of toggle buttons, such as numbered days or hours. Use CheckGroup for longer checkbox labels.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Keep value controlled and accept changes in options order; use span for an option that should fill more tracks.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not use the grid for a single exclusive choice or assume toggling preserves click order.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Group label",
-        required: true,
-        description: "Names the set through FieldGroup.",
-      },
-      {
-        name: "Toggle buttons",
-        required: true,
-        description: "One pressed or unpressed button per option, with optional column spans.",
-      },
-      {
-        name: "Error",
-        required: false,
-        description: "A translated selection problem.",
-      },
-    ],
-  },
-  accessibility: [
-    "label names the group; option labels name the toggle buttons and their pressed states show the pick.",
-  ],
-} satisfies ComponentDoc;

package/src/molecules/TokenTextField.doc.ts

@@ -1,41 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for TokenTextField. */
-export const doc = {
-  category: "Inputs",
-  keywords: ["text", "tokens", "editor", "draft"],
-  related: [{ name: "CommitTextField", when: "Edit ordinary text without atomic token pills." }],
-  usage: {
-    description:
-      "Edit a controlled string containing atomic token pills. pattern returns a fresh global regular expression matching whole tokens and describe supplies their appearance. Local edits commit on blur or single-line Enter; an outside value replaces the draft.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Keep raw tokens in the string and use onDraftChange only for draft feedback such as a live length counter.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not return a pattern that matches empty strings or treat the visible token label as the stored value.",
-      },
-    ],
-    anatomy: [
-      { name: "Field label", required: true, description: "Names the editable string." },
-      {
-        name: "Editor",
-        required: true,
-        description: "Text and atomic tokens; loads separately with a skeleton.",
-      },
-      {
-        name: "Add button",
-        required: false,
-        description: "Opens the host's picker through onAddClick.",
-      },
-    ],
-  },
-  accessibility: [
-    "Provide label and translated labels.add, labels.remove and labels.loading.",
-    "Use isReadOnly to hide editing affordances while keeping the value readable.",
-  ],
-} satisfies ComponentDoc;

package/src/molecules/TransferLayout.doc.ts

@@ -1,42 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for TransferLayout. */
-export const doc = {
-  category: "Layout",
-  keywords: ["transfer", "columns", "scroll", "slots"],
-  usage: {
-    description:
-      "Lay out available and picked content in two independently scrolling columns with fixed headers. Use TransferPicker when the kit should also manage selection controls and search.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Name both columns through labels and use startRef when the host observes paging in the start viewport.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not expect layout slots to implement filtering, picking or removal; those behaviors belong to the host.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Start column",
-        required: true,
-        description: "The start viewport with optional header, fixed title and footer.",
-      },
-      {
-        name: "End column",
-        required: true,
-        description: "The end viewport with an optional fixed title and header.",
-      },
-      {
-        name: "Header strip",
-        required: false,
-        description:
-          "Host controls above the viewports; endHeader is omitted with isEndFullHeight.",
-      },
-    ],
-  },
-  accessibility: ["labels.start and labels.end name the two content columns."],
-} satisfies ComponentDoc;

package/src/molecules/TreeOptions.doc.ts

@@ -1,38 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for TreeOptions. */
-export const doc = {
-  category: "Selection",
-  keywords: ["tree", "options", "leaves", "groups"],
-  usage: {
-    description:
-      "Pick one leaf from a flat or two-level tree while groups only expand and collapse. Use TreeSelect to put this tree behind a searchable field trigger.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Give every item a unique value and use isExpandedByDefault at mount when all groups should start open.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not supply deeper nesting and expect it to render; only the top level and its children are shown.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Rows",
-        required: true,
-        description: "Labels with a leaf selection mark or a group's trailing chevron.",
-      },
-      {
-        name: "Child rows",
-        required: false,
-        description: "Leaves indented beneath an expanded group.",
-      },
-    ],
-  },
-  accessibility: [
-    "The named tree exposes treeitem levels, expansion, selection and disabled states; Up and Down move focus, and Enter or Space acts on a row.",
-  ],
-} satisfies ComponentDoc;

package/src/organisms/ChipListAddPopover.doc.ts

@@ -1,54 +0,0 @@
-import type { ComponentDoc } from "../doc/schema";
-
-/** Usage guidance for ChipListAddPopover. */
-export const doc = {
-  category: "Selection",
-  keywords: ["chips", "multiple", "popover", "apply"],
-  related: [
-    {
-      name: "TransferPicker",
-      when: "Keep available rows and picked values visible together with immediate changes.",
-    },
-  ],
-  usage: {
-    description:
-      "Pick several values as removable chips through a searchable checkbox popover. Checkbox edits remain a draft until Apply; closing another way drops them.",
-    bestPractices: [
-      {
-        guidance: true,
-        description:
-          "Use onRemove to confirm direct chip removal, and separately handle removals arriving in onChange from Apply.",
-      },
-      {
-        guidance: false,
-        description:
-          "Do not discard unknown stored values just because options has not loaded them; they remain visible as invalid values or loading placeholders.",
-      },
-    ],
-    anatomy: [
-      {
-        name: "Picked values",
-        required: false,
-        description: "Tokens or pill Chips when values are picked, with unknown values retained.",
-      },
-      {
-        name: "Add button",
-        required: false,
-        description: "Opens the checkbox popover unless read-only.",
-      },
-      {
-        name: "Popover",
-        required: false,
-        description: "Search, draft checkboxes and Apply.",
-      },
-      {
-        name: "Error",
-        required: false,
-        description: "A translated selection problem.",
-      },
-    ],
-  },
-  accessibility: [
-    "Supply translated search, add and apply labels plus labels.remove for each chip; labels.loading names loading placeholders.",
-  ],
-} satisfies ComponentDoc;