@openwarelabs/ui 0.2.0 → 0.3.1

package/README.md

@@ -50,17 +50,19 @@ import { Button, Field, Input, Toaster, toast } from "@openwarelabs/ui";
 
 ## Components
 
-70 components, each with a page in the docs.
+71 components, each with a page in the docs.
 
 | Group | Components |
 | --- | --- |
-| Buttons | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `ToggleButton`, `CloseButton`, `CopyButton`, `SegmentedControl`, `ChoiceCard` |
-| Forms | `Field`, `Fieldset`, `Input` (start and end content), `SearchField`, `NumberField`, `InputOTP`, `Textarea` (`autoGrow`), `Select`, `Combobox`, `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Slider` (one value or a range), `ColorPicker`, `ColorField`, `FileDropZone` |
-| Dates | `Calendar`, `DatePicker` |
+| Typography | `Text` (each style on the Typography page as a variant: hero to caption, code and kbd; tones, `truncate`, `as`), `Link`, `Kbd`, `Code`, `CodeBlock`, `Snippet` |
+| Actions | `Button` (primary, secondary, ghost, danger; sm, md, lg; `loading`; `shape="pill"`), `buttonClassName()` for links, `ButtonGroup`, `CloseButton`, `CopyButton`, `ToggleButton`, `SegmentedControl` |
+| Inputs | `Field`, `Fieldset`, `Input` (start and end content), `Textarea` (`autoGrow`), `NumberField`, `SearchField`, `InputOTP`, `ColorField` |
+| Choices | `Checkbox`, `CheckboxGroup`, `RadioGroup` (plain or cards), `Switch`, `Select`, `Combobox`, `Slider` (one value or a range), `ChoiceCard` |
+| Pickers | `Calendar`, `DatePicker`, `ColorPicker`, `FileDropZone` |
 | Feedback | `Alert`, `Badge`, `ProgressBar`, `ProgressCircle`, `Spinner`, `Skeleton`, `SkeletonRows`, `Toaster` + `toast()` (sonner: stacked, swipeable, with actions and promises), `Tooltip` |
 | Overlays | `Dialog`, `ConfirmDialog`, `Drawer`, `Popover`, `Menu` + `MenuItem`, `CommandPalette` |
-| Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Link`, `Pagination`, `Steps`, `NavList` + `NavItem` |
-| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User`, `Kbd`, `Code`, `CodeBlock`, `Snippet` |
+| Navigation | `Tabs`, `Accordion`, `Disclosure`, `Breadcrumbs`, `Pagination`, `Steps`, `NavList` + `NavItem` |
+| Data display | `Table` (sorting, selection), `Stat`, `FileTree`, `EmptyState`, `Tag`, `ColorSwatch`, `Avatar`, `AvatarGroup`, `User` |
 | Layout | `Card`, `SettingsRow`, `Stack`, `Separator`, `ScrollShadow`, `VisuallyHidden` |
 | Marketing | `SiteHeader`, `SectionHeading`, `Chip`, `DotGrid` |
 

package/dist/components/Text/Text.d.cts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+/** The text styles on the Typography page, by the same names: `lead` is the class ow-type-lead. */
+export type TextVariant = "hero" | "page-title" | "section-title" | "heading" | "lead" | "prose" | "dialog-title" | "card-title" | "body" | "copy" | "label" | "button" | "caption" | "badge" | "overline" | "code" | "kbd";
+export type TextTone = "default" | "soft" | "muted" | "primary" | "danger" | "success" | "warning";
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** Which text style: size, leading, weight and tracking from the Typography page. The display styles shrink on phones.
+     * @default "body" */
+    variant?: TextVariant;
+    /** The element, for the page's outline. Defaults to one that suits the variant: h1 for hero and page-title, h2 for
+     * section-title, h3 for heading and the titles, p for running text, span for the rest. */
+    as?: keyof JSX.IntrinsicElements;
+    /** The colour. Left out, lead, copy, caption and overline are muted, as the styles ask, and the rest take the
+     * colour around them. */
+    tone?: TextTone;
+    /** @default "start" */
+    align?: "start" | "center" | "end";
+    /** One line, cut off with an ellipsis.
+     * @default false */
+    truncate?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Text in one of Openware's styles: `<Text variant="lead">`. The variant sets the look and a sensible element;
+ * `as` changes the element without changing the look, so the outline stays right.
+ */
+export declare function Text({ variant, as, tone, align, truncate, className, children, ...props }: TextProps): JSX.Element;

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, JSX, ReactNode } from "react";
+/** The text styles on the Typography page, by the same names: `lead` is the class ow-type-lead. */
+export type TextVariant = "hero" | "page-title" | "section-title" | "heading" | "lead" | "prose" | "dialog-title" | "card-title" | "body" | "copy" | "label" | "button" | "caption" | "badge" | "overline" | "code" | "kbd";
+export type TextTone = "default" | "soft" | "muted" | "primary" | "danger" | "success" | "warning";
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** Which text style: size, leading, weight and tracking from the Typography page. The display styles shrink on phones.
+     * @default "body" */
+    variant?: TextVariant;
+    /** The element, for the page's outline. Defaults to one that suits the variant: h1 for hero and page-title, h2 for
+     * section-title, h3 for heading and the titles, p for running text, span for the rest. */
+    as?: keyof JSX.IntrinsicElements;
+    /** The colour. Left out, lead, copy, caption and overline are muted, as the styles ask, and the rest take the
+     * colour around them. */
+    tone?: TextTone;
+    /** @default "start" */
+    align?: "start" | "center" | "end";
+    /** One line, cut off with an ellipsis.
+     * @default false */
+    truncate?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Text in one of Openware's styles: `<Text variant="lead">`. The variant sets the look and a sensible element;
+ * `as` changes the element without changing the look, so the outline stays right.
+ */
+export declare function Text({ variant, as, tone, align, truncate, className, children, ...props }: TextProps): JSX.Element;

package/dist/components.css

@@ -105,6 +105,104 @@
     }
 }
 
+/* components/Text/Text.css */
+/* Text: the type styles from tokens.css as a component, with colours and the sizes the display styles take on phones. */
+.ow-text {
+    margin: 0;
+}
+
+/* Titles balance their lines; running text avoids a lone last word. */
+.ow-text--hero,
+.ow-text--page-title,
+.ow-text--section-title,
+.ow-text--heading {
+    text-wrap: balance;
+}
+
+.ow-text--lead,
+.ow-text--prose,
+.ow-text--copy {
+    text-wrap: pretty;
+}
+
+.ow-text--lead {
+    max-width: 560px;
+}
+
+.ow-text--overline {
+    text-transform: uppercase;
+}
+
+.ow-text--code,
+.ow-text--kbd {
+    font-variant-ligatures: none;
+}
+
+.ow-text--default {
+    color: var(--ow-text);
+}
+
+.ow-text--soft {
+    color: var(--ow-text-soft);
+}
+
+.ow-text--muted {
+    color: var(--ow-text-muted);
+}
+
+.ow-text--primary {
+    color: var(--ow-primary-text);
+}
+
+.ow-text--danger {
+    color: var(--ow-danger-text);
+}
+
+.ow-text--success {
+    color: var(--ow-success-text);
+}
+
+.ow-text--warning {
+    color: var(--ow-warning-text);
+}
+
+.ow-text--center {
+    text-align: center;
+}
+
+.ow-text--center.ow-text--lead {
+    margin-inline: auto;
+}
+
+.ow-text--end {
+    text-align: end;
+}
+
+.ow-text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* The display styles on phones, as the Typography page gives them. */
+@media (max-width: 760px) {
+    .ow-text--hero {
+        font-size: 42px;
+        line-height: 1.02;
+    }
+    .ow-text--page-title {
+        font-size: 40px;
+        line-height: 1.06;
+    }
+    .ow-text--section-title {
+        font-size: 32px;
+        line-height: 1.12;
+    }
+    .ow-text--heading {
+        font-size: 21px;
+    }
+}
+
 /* components/Spinner/Spinner.css */
 /* Spinner: a ring with one coloured quarter, turning. */
 .ow-spinner {
@@ -1048,19 +1146,22 @@
 
 .ow-option {
     display: flex;
-    min-height: 32px;
+    min-height: 36px;
     align-items: flex-start;
     gap: var(--ow-space-sm);
     border-radius: var(--ow-radius-lg);
-    padding: var(--ow-space-xs) var(--ow-space-sm);
+    /* 10 + a 16px line + 10: one line sits centred in the 36px row; a description just makes the row taller. */
+    padding: var(--ow-space-md);
     color: var(--ow-text);
     font-size: 14px;
-    line-height: 1.1;
+    line-height: 16px;
     text-align: left;
     cursor: pointer;
 }
 
 .ow-listbox--sm .ow-option {
+    min-height: 32px;
+    padding-block: var(--ow-space-sm);
     font-size: 12px;
 }
 
@@ -1081,11 +1182,11 @@
 .ow-option__check {
     display: flex;
     width: 16px;
+    /* As tall as the label's first line, so the tick sits level with it. */
     height: 16px;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    padding-top: 2px;
     color: var(--ow-primary-text);
 }
 
@@ -1093,7 +1194,7 @@
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-option__label {
@@ -1269,12 +1370,13 @@
     cursor: pointer;
 }
 
+/* Centred on the label's first line, whatever its line height. */
 .ow-check-label .ow-checkbox--md {
-    margin-top: 2px;
+    margin-top: calc((1lh - 16px) / 2);
 }
 
 .ow-check-label .ow-checkbox--sm {
-    margin-top: 3px;
+    margin-top: calc((1lh - 14px) / 2);
 }
 
 .ow-check-label--disabled {
@@ -1284,7 +1386,7 @@
 
 .ow-check-label__text {
     display: grid;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-check-label__description {
@@ -2214,7 +2316,7 @@
     border: 0;
     border-radius: var(--ow-radius-md);
     background: var(--ow-tooltip);
-    padding: var(--ow-space-3xs) var(--ow-space-sm);
+    padding: var(--ow-space-2xs) var(--ow-space-sm);
     color: var(--ow-on-tooltip);
     font-family: var(--ow-font-sans);
     font-size: 12px;
@@ -2672,7 +2774,7 @@
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
     padding-top: 5px;
 }
 
@@ -3197,7 +3299,7 @@
 }
 
 .ow-palette__group {
-    padding: var(--ow-space-sm) var(--ow-space-sm) var(--ow-space-3xs);
+    padding: var(--ow-space-sm) var(--ow-space-sm) var(--ow-space-2xs);
     color: var(--ow-text-muted);
     font-size: 11px;
     font-weight: var(--ow-weight-control);
@@ -3456,7 +3558,7 @@
 .ow-disclosure__titles {
     display: grid;
     min-width: 0;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-disclosure__title {
@@ -3801,7 +3903,7 @@
     display: grid;
     min-width: 0;
     flex: 1 1 160px;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-steps__title {
@@ -3950,7 +4052,7 @@
 
 .ow-choice__text {
     display: grid;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-choice__title {
@@ -4911,7 +5013,7 @@
     display: grid;
     min-width: 0;
     flex: 1 1 192px;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-settings-row__label {