@luscii-healthtech/web-ui 59.1.0 → 59.2.0

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/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/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": "59.2.0",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"