@jonmilner/ui 0.3.0 → 0.3.2

package/dist/Badge/Badge.css.mjs

@@ -10,11 +10,13 @@ var t = "_1ixfil10", n = e({
 		variant: {
 			neutral: "_1ixfil12",
 			accent: "_1ixfil13",
-			danger: "_1ixfil14"
+			success: "_1ixfil14",
+			warning: "_1ixfil15",
+			danger: "_1ixfil16"
 		},
 		size: {
-			sm: "_1ixfil15",
-			med: "_1ixfil16"
+			sm: "_1ixfil17",
+			med: "_1ixfil18"
 		}
 	},
 	defaultVariants: {},

package/dist/Badge/index.d.mts

@@ -4,7 +4,7 @@ import { ComponentPropsWithRef } from "react";
 //#region src/Badge/index.d.ts
 export type BadgeOwnProps = {
   size?: "sm" | "med";
-  variant?: "neutral" | "accent" | "danger";
+  variant?: "neutral" | "accent" | "success" | "warning" | "danger";
 };
 export type BadgeProps = StyleProps & BadgeOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof BadgeOwnProps>;
 export declare function Badge({ variant, size, display, paddingInline, paddingBlock, borderRadius, backgroundColor, color, className, children, ...props }: BadgeProps): import("react").JSX.Element | null;

package/dist/Badge/index.mjs

@@ -13,6 +13,14 @@ var o = {
 		backgroundColor: "accent",
 		color: "accentFg"
 	},
+	success: {
+		backgroundColor: "success",
+		color: "successFg"
+	},
+	warning: {
+		backgroundColor: "warning",
+		color: "warningFg"
+	},
 	danger: {
 		backgroundColor: "danger",
 		color: "dangerFg"

package/dist/docs/Badge.md

@@ -20,13 +20,13 @@ A static label that states the status of, or a short fact about, the thing besid
 
 ## Rules
 
-- `variant`: `neutral` (default, `fgMuted` on `bgMuted`) for most statuses and facts; `accent` (`accentFg` on `accent`) to draw the eye; `danger` (`dangerFg` on `danger`) for a failure or a blocked state. `success` and `warning` variants are planned (#103); the color roles exist, the variants do not yet.
+- `variant`: `neutral` (default, `fgMuted` on `bgMuted`) for most statuses and facts; `accent` (`accentFg` on `accent`) to draw the eye; `success` (`successFg` on `success`) for a done or healthy state; `warning` (`warningFg` on `warning`) for one that needs attention soon; `danger` (`dangerFg` on `danger`) for a failure or a blocked state.
 - `size`: `sm` or `med` (default), the label's `fontSize` step.
-- The label states the state. Color is never the only cue (WCAG 1.4.1): under forced colors every variant is the same outlined box, and some readers cannot tell the fills apart. Write "Failed", not a red badge reading "3".
+- The label states the state. Color is never the only cue (WCAG 1.4.1): under forced colors every variant, `success` and `warning` included, is the same outlined box, and some readers cannot tell the fills apart (green from red above all). Write "Failed" or "Passed", not a red or green badge reading "3".
 - Keep it to one or two words; it never wraps. With no children it renders nothing.
 - Fill, text color, padding, radius and `display` (`inline-block`) are default style props on the outer `span`; a consumer's win. `className`, `style` and `ref` go to it, `className` last. The box holds inside a `Text` or `Heading` too.
 - The module has no hooks, so a server component can render it.
-- Migrating from the inbox's `Pill`: `Pill tone=…` is `Badge variant=…`; `pillLink` has no Badge equivalent (compose `Clickable`).
+- Migrating from the inbox's `Pill`: `Pill tone=…` is `Badge variant=…`, with `good` as `success`, `warn` as `warning` and `bad` as `danger`; `pillLink` has no Badge equivalent (compose `Clickable`).
 
 ## Do
 
@@ -60,7 +60,7 @@ A static label that states the status of, or a short fact about, the thing besid
 - It is plain text in a `span`: screen readers read the label in line with what is around it, so the label must make sense there ("Quarterly report Draft").
 - No role, no `aria-live`: a badge that changes is not announced. If a status change matters right away, announce it elsewhere (a toast).
 - Each variant's text and fill pass AA (4.5:1) in light and dark mode; the pairs are in `contrastPairs` (ADR 0033).
-- Under forced colors every badge is `CanvasText` on `Canvas` with a `CanvasText` outline, so the box survives and the variants look alike; the label carries the meaning. The role fills are not kept: `accent` would take the link color, on something that is not a link, and the browser's backplate would hide the filled variants' text.
+- Under forced colors every badge is `CanvasText` on `Canvas` with a `CanvasText` outline, so the box survives and the variants look alike; the label carries the meaning. The role fills are not kept: `accent` would take the link color, on something that is not a link, and the browser's backplate would hide the filled variants' text. `success`, `warning` and `danger` map to the same system pair (ADR 0104), so only the label tells them apart.
 
 ## Props
 
@@ -71,6 +71,6 @@ Generated from the TypeScript types.
 | Prop | Type | Required | Description |
 | --- | --- | --- | --- |
 | `size` | `"med" \| "sm"` | no |  |
-| `variant` | `"accent" \| "danger" \| "neutral"` | no |  |
+| `variant` | `"accent" \| "danger" \| "neutral" \| "success" \| "warning"` | no |  |
 
 Also accepts the style props (see `manifest.json` `styleProps`).

package/dist/docs/lint.md

@@ -0,0 +1,21 @@
+# Lint
+
+`@jonmilner/ui/lint` holds the options for `uiLint()` from `@jonmilner/oxlint-config` that follow the library's components. Import it in the app's `vite.config.ts`; nothing in it runs in the app.
+
+## textComponents
+
+The library's components and parts that render their children through `Text`. Pass it as `textComponents`, so documented usage such as `<Tabs.Tab>Privacy</Tabs.Tab>` or `<Field.Label>Email</Field.Label>` passes `ui/no-bare-text`.
+
+```ts
+import { lint, uiLint } from "@jonmilner/oxlint-config";
+import { textComponents } from "@jonmilner/ui/lint";
+import { defineConfig } from "vite-plus";
+
+export default defineConfig({
+  lint: { ...lint, ...uiLint({ textComponents: [...textComponents, "VisuallyHidden"] }) },
+});
+```
+
+- The option replaces the preset's default list, so add the app's own text components (here `VisuallyHidden`) after the library's.
+- Never copy the list into the app: it changes with the library, and an upgrade brings the new parts.
+- The rule matches a tag's last segment: `Tabs.Tab` is `Tab`. So `Item` and `Label` pass any component's part of that name, and `Trigger` and `Close` pass even without the look (`variant`, `size`, an icon) that makes them a Button. Give a look-less `Trigger` or `Close` a `Text` child yourself.

package/dist/docs/llms.txt

@@ -30,4 +30,5 @@
 
 - [manifest.json](manifest.json): every component, prop, variant, icon and token, as JSON
 - [theming.md](theming.md): themes, brands and tokens
+- [lint.md](lint.md): the `uiLint()` options the library ships
 - [migrations/](migrations/README.md): upgrade notes for breaking releases

package/dist/docs/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "./manifest.schema.json",
   "package": "@jonmilner/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "components": [
     {
       "name": "AlertDialog",
@@ -143,12 +143,14 @@
         },
         {
           "name": "variant",
-          "type": "\"accent\" | \"danger\" | \"neutral\"",
+          "type": "\"accent\" | \"danger\" | \"neutral\" | \"success\" | \"warning\"",
           "required": false,
           "values": [
             "accent",
             "danger",
-            "neutral"
+            "neutral",
+            "success",
+            "warning"
           ]
         }
       ],

package/dist/lint/index.d.mts

@@ -0,0 +1,9 @@
+//#region src/lint/index.d.ts
+/**
+ * The library's components and parts that render their children through `Text`, for the
+ * `textComponents` option of `uiLint()` from `@jonmilner/oxlint-config`. A part is named by its
+ * property (`Tabs.Tab` is `Tab`). Spread it and add the app's own text components; see
+ * `docs/lint.md`.
+ */
+export declare const textComponents: readonly string[];
+//#endregion

package/dist/lint/index.mjs

@@ -0,0 +1,18 @@
+//#region src/lint/index.ts
+var e = Object.freeze([
+	"Text",
+	"Heading",
+	"Button",
+	"Badge",
+	"Tag",
+	"Chip",
+	"Tab",
+	"Item",
+	"Label",
+	"Error",
+	"Description",
+	"Trigger",
+	"Close"
+]);
+//#endregion
+export { e as textComponents };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jonmilner/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "files": [
     "dist",
     "THIRD_PARTY_NOTICES.md"
@@ -114,6 +114,10 @@
       "types": "./dist/testing/index.d.mts",
       "default": "./dist/testing/index.mjs"
     },
+    "./lint": {
+      "types": "./dist/lint/index.d.mts",
+      "default": "./dist/lint/index.mjs"
+    },
     "./base.css": "./dist/base.css",
     "./docs/*": "./dist/docs/*"
   },