@luscii-healthtech/web-ui 59.1.0 → 60.0.0

package/dist/src/components/Radio/LabeledRadio.d.ts

@@ -1,7 +1,17 @@
 import React from "react";
 type Props = React.ComponentPropsWithRef<"input"> & {
     /**
-     * The visual label next to the radio indicator.
+     * Content that belongs to this option, rendered underneath it and lined
+     * up with the label, such as an extra input that appears when the option
+     * is selected. It is rendered outside of the `<label>`, so it can safely
+     * contain interactive elements without toggling the radio. Use `label` for
+     * the label of the radio itself.
+     *
+     * The radio's label does not label anything in `children`, so inputs in
+     * there need their own accessible name (e.g. `aria-label`). Children are not
+     * dimmed when the radio is `disabled`; that is up to the consumer.
+     * Best suited for vertical groups, as in a horizontal group the children
+     * widen the column of its option.
      */
     children?: React.ReactNode;
     /**
@@ -28,9 +38,9 @@ type Props = React.ComponentPropsWithRef<"input"> & {
      */
     id: string;
     /**
-     * The visual label next to the radio indicator.
-     * Alternative to `children` for when it's easier to just pass
-     * a string as a prop. Will be rendered inside a `<Text>` component.
+     * The visual label next to the radio indicator. A string (or number) is
+     * rendered inside a `<Text>` component, any other node is rendered as-is,
+     * so it can be used for rich labels.
      */
     label?: React.ReactNode;
     /**

package/dist/src/components/RangeTriggerIcon/RangeTriggerIcon.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef, FC } from "react";
+export declare const RANGE_TRIGGER_ICON_SHAPES: readonly ["upper", "lower", "middle", "full", "exact"];
+export type RangeTriggerIconShape = (typeof RANGE_TRIGGER_ICON_SHAPES)[number];
+export declare const RANGE_TRIGGER_ICON_COLORS: readonly ["alerts-high-salmon", "alerts-high-crimson", "alerts-high-red", "alerts-medium-sun", "alerts-medium-oak", "alerts-medium-amber", "alerts-low-mint", "alerts-low-leaf", "alerts-low-green", "alerts-neutral-fog", "alerts-neutral-neutral", "alerts-neutral-graphite"];
+/**
+ * One of the alert colours of a priority (`alerts-<priority>-<name>`, from
+ * `color/icon/alerts/<priority>/<name>`).
+ */
+export type RangeTriggerIconColor = (typeof RANGE_TRIGGER_ICON_COLORS)[number];
+export type RangeTriggerIconProps = Omit<ComponentPropsWithoutRef<"svg">, "color" | "children" | "fill" | "role" | "aria-hidden"> & {
+    /**
+     * Which part of the track the range covers: its `upper` or `lower` end, the
+     * `middle`, the `full` track, or `exact`ly one value (a dot in the middle).
+     */
+    shape: RangeTriggerIconShape;
+    /**
+     * The colour of the range, one of the design system's alert colours.
+     * Without it, the range is brand primary (`color/icon/brand/primary/default`).
+     * The track's colour isn't configurable.
+     */
+    color?: RangeTriggerIconColor;
+    /**
+     * Shows the range in the disabled colour, whatever its `color`.
+     * @default false
+     */
+    disabled?: boolean;
+};
+/**
+ * Shows which part of a range triggers an alert: a 40 × 24 track with the
+ * range drawn on it.
+ *
+ * Like other icons, it's decorative and hidden from assistive technology
+ * unless it has an accessible name (`aria-label` or `aria-labelledby`).
+ *
+ * @example
+ *
+ * <RangeTriggerIcon shape="upper" color="alerts-high-crimson" />
+ */
+export declare const RangeTriggerIcon: FC<RangeTriggerIconProps>;

package/dist/src/components/RangeTriggerIcon/index.d.ts

@@ -0,0 +1 @@
+export * from "./RangeTriggerIcon";

package/dist/src/generated/components/Radio/LabeledRadio.d.ts

@@ -1,7 +1,17 @@
 import React from "react";
 type Props = React.ComponentPropsWithRef<"input"> & {
     /**
-     * The visual label next to the radio indicator.
+     * Content that belongs to this option, rendered underneath it and lined
+     * up with the label, such as an extra input that appears when the option
+     * is selected. It is rendered outside of the `<label>`, so it can safely
+     * contain interactive elements without toggling the radio. Use `label` for
+     * the label of the radio itself.
+     *
+     * The radio's label does not label anything in `children`, so inputs in
+     * there need their own accessible name (e.g. `aria-label`). Children are not
+     * dimmed when the radio is `disabled`; that is up to the consumer.
+     * Best suited for vertical groups, as in a horizontal group the children
+     * widen the column of its option.
      */
     children?: React.ReactNode;
     /**
@@ -28,9 +38,9 @@ type Props = React.ComponentPropsWithRef<"input"> & {
      */
     id: string;
     /**
-     * The visual label next to the radio indicator.
-     * Alternative to `children` for when it's easier to just pass
-     * a string as a prop. Will be rendered inside a `<Text>` component.
+     * The visual label next to the radio indicator. A string (or number) is
+     * rendered inside a `<Text>` component, any other node is rendered as-is,
+     * so it can be used for rich labels.
      */
     label?: React.ReactNode;
     /**

package/dist/src/generated/components/RangeTriggerIcon/RangeTriggerIcon.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef, FC } from "react";
+export declare const RANGE_TRIGGER_ICON_SHAPES: readonly ["upper", "lower", "middle", "full", "exact"];
+export type RangeTriggerIconShape = (typeof RANGE_TRIGGER_ICON_SHAPES)[number];
+export declare const RANGE_TRIGGER_ICON_COLORS: readonly ["alerts-high-salmon", "alerts-high-crimson", "alerts-high-red", "alerts-medium-sun", "alerts-medium-oak", "alerts-medium-amber", "alerts-low-mint", "alerts-low-leaf", "alerts-low-green", "alerts-neutral-fog", "alerts-neutral-neutral", "alerts-neutral-graphite"];
+/**
+ * One of the alert colours of a priority (`alerts-<priority>-<name>`, from
+ * `color/icon/alerts/<priority>/<name>`).
+ */
+export type RangeTriggerIconColor = (typeof RANGE_TRIGGER_ICON_COLORS)[number];
+export type RangeTriggerIconProps = Omit<ComponentPropsWithoutRef<"svg">, "color" | "children" | "fill" | "role" | "aria-hidden"> & {
+    /**
+     * Which part of the track the range covers: its `upper` or `lower` end, the
+     * `middle`, the `full` track, or `exact`ly one value (a dot in the middle).
+     */
+    shape: RangeTriggerIconShape;
+    /**
+     * The colour of the range, one of the design system's alert colours.
+     * Without it, the range is brand primary (`color/icon/brand/primary/default`).
+     * The track's colour isn't configurable.
+     */
+    color?: RangeTriggerIconColor;
+    /**
+     * Shows the range in the disabled colour, whatever its `color`.
+     * @default false
+     */
+    disabled?: boolean;
+};
+/**
+ * Shows which part of a range triggers an alert: a 40 × 24 track with the
+ * range drawn on it.
+ *
+ * Like other icons, it's decorative and hidden from assistive technology
+ * unless it has an accessible name (`aria-label` or `aria-labelledby`).
+ *
+ * @example
+ *
+ * <RangeTriggerIcon shape="upper" color="alerts-high-crimson" />
+ */
+export declare const RangeTriggerIcon: FC<RangeTriggerIconProps>;

package/dist/src/generated/components/RangeTriggerIcon/index.d.ts

@@ -0,0 +1 @@
+export * from "./RangeTriggerIcon";

package/dist/src/generated/index.d.ts

@@ -126,6 +126,7 @@ export { HoverIndicatorControl } from "./components/HoverIndicatorControl/HoverI
 export { ActionController } from "./components/ActionController/ActionController";
 export { Collapse } from "./components/Collapse/Collapse";
 export { RangeCoverage } from "./components/RangeCoverage/RangeCoverage";
+export { RangeTriggerIcon, type RangeTriggerIconProps, type RangeTriggerIconShape, type RangeTriggerIconColor, } from "./components/RangeTriggerIcon";
 export { Skeleton } from "./components/Skeleton/Skeleton";
 export { DetailsDisclosure } from "./components/DetailsDisclosure/DetailsDisclosure";
 export { ModalDialog } from "./components/ModalDialog/ModalDialog";

package/dist/src/index.d.ts

@@ -126,6 +126,7 @@ export { HoverIndicatorControl } from "./components/HoverIndicatorControl/HoverI
 export { ActionController } from "./components/ActionController/ActionController";
 export { Collapse } from "./components/Collapse/Collapse";
 export { RangeCoverage } from "./components/RangeCoverage/RangeCoverage";
+export { RangeTriggerIcon, type RangeTriggerIconProps, type RangeTriggerIconShape, type RangeTriggerIconColor, } from "./components/RangeTriggerIcon";
 export { Skeleton } from "./components/Skeleton/Skeleton";
 export { DetailsDisclosure } from "./components/DetailsDisclosure/DetailsDisclosure";
 export { ModalDialog } from "./components/ModalDialog/ModalDialog";

package/dist/stories/LabeledRadio.stories.d.ts

@@ -19,6 +19,9 @@ declare const meta: {
             helperText: {
                 component: string;
             };
+            description: {
+                component: string;
+            };
         };
     };
 };
@@ -29,6 +32,7 @@ export declare const WithDifferentLabels: Story;
 export declare const Disabled: Story;
 export declare const CheckedAndDisabled: Story;
 export declare const _LabeledRadioGroup: Story;
+export declare const WithNestedContent: Story;
 export declare const OverviewLabeledRadioCard: Story;
 export declare const UsingLabelAndSubtitleProps: Story;
 export declare const UsingChildrenPropForCustomContent: Story;

package/dist/stories/RangeTriggerIcon.stories.d.ts

@@ -0,0 +1,56 @@
+import { type StoryObj } from "@storybook/react-vite";
+import RangeTriggerIconDocumentation from "./RangeTriggerIcon.docs.mdx";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../src").RangeTriggerIconProps>;
+    args: {
+        shape: "upper";
+        disabled: false;
+    };
+    argTypes: {
+        shape: {
+            control: "inline-radio";
+            options: readonly ["upper", "lower", "middle", "full", "exact"];
+        };
+        color: {
+            control: "select";
+            options: readonly ["alerts-high-salmon", "alerts-high-crimson", "alerts-high-red", "alerts-medium-sun", "alerts-medium-oak", "alerts-medium-amber", "alerts-low-mint", "alerts-low-leaf", "alerts-low-green", "alerts-neutral-fog", "alerts-neutral-neutral", "alerts-neutral-graphite"];
+        };
+    };
+    parameters: {
+        docs: {
+            page: typeof RangeTriggerIconDocumentation;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/**
+ * Every variant from the Figma component set, in its default and disabled
+ * state.
+ */
+export declare const FigmaVariants: Story;
+/**
+ * Shape and colour are separate props, so every shape works in every colour,
+ * including combinations the Figma component set doesn't show.
+ */
+export declare const AllShapesAndColors: Story;
+/**
+ * The alert colours of each priority. Use the `shape` control to see them in
+ * another shape.
+ */
+export declare const ColorsByPriority: Story;
+export declare const Disabled: Story;
+/**
+ * The track is grey, not blue, so the icons keep their contrast on the
+ * background of a selected `LabeledRadioCard`.
+ */
+export declare const OnSelectedBackground: Story;
+/**
+ * Give the icon an accessible name (`aria-label` or `aria-labelledby`) when it
+ * conveys information that isn't available elsewhere. It's then exposed as an
+ * image with that name.
+ */
+export declare const WithAccessibleName: Story;
+export declare const WithAccessibleNameFromLabelledBy: Story;

package/dist/web-ui-tailwind.css

@@ -2035,6 +2035,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   --tw-border-spacing-y: 0px;
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.ui\:border-spacing-x-f_base {
+  --tw-border-spacing-x: var(--ui-semantic-spacing-base);
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .ui\:border-spacing-x-f_xl {
   --tw-border-spacing-x: var(--ui-semantic-spacing-xl);
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
@@ -2043,6 +2047,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   --tw-border-spacing-y: var(--ui-semantic-spacing-base);
   border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
 }
+.ui\:border-spacing-y-f_s {
+  --tw-border-spacing-y: var(--ui-semantic-spacing-s);
+  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+}
 .ui\:origin-\[0_55\%\] {
   transform-origin: 0 55%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luscii-healthtech/web-ui",
-  "version": "59.1.0",
+  "version": "60.0.0",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"