@luscii-healthtech/web-ui 59.0.1 → 59.2.0

package/dist/src/generated/components/Icons/special-icons/AlertNeutralColoredIcon.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
+export default _default;

package/dist/src/generated/components/Icons/special-icons/AlertOakColoredIcon.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
+export default _default;

package/dist/src/generated/components/Icons/special-icons/AlertRedColoredIcon.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
+export default _default;

package/dist/src/generated/components/Icons/special-icons/AlertSalmonColoredIcon.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
+export default _default;

package/dist/src/generated/components/Icons/special-icons/AlertSunColoredIcon.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
+export default _default;

package/dist/src/generated/components/Icons/special-icons/AmberAlertColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/BeterDichtbijColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/ChartLineColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/CheckFilledColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/FlagDeColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/FlagFrColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/FlagNlColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/FlagPtColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/FlagUkColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/GearColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/GrayAlertColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/GreenAlertColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/GroupColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/NotificationDotColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/RedAlertColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/StatusActiveColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/StatusAddedColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/StatusBlockedColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/StatusCancelledColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/StatusColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/StatusStoppedColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/VaultColoredIcon.d.ts

@@ -1,4 +1,3 @@
-import type { FC } from "react";
-import { IconProps } from "../types/IconProps.type";
-declare const _default: FC<IconProps>;
+import { type IconProps } from "../types/IconProps.type";
+declare const _default: import("react").FC<IconProps>;
 export default _default;

package/dist/src/generated/components/Icons/special-icons/index.d.ts

@@ -9,6 +9,18 @@ export { default as ActionMedicationColoredIcon } from "./ActionMedicationColore
 export { default as ActionStarColoredIcon } from "./ActionStarColoredIcon";
 export { default as ActionStepsColoredIcon } from "./ActionStepsColoredIcon";
 export { default as ActionWeightColoredIcon } from "./ActionWeightColoredIcon";
+export { default as AlertAmberColoredIcon } from "./AlertAmberColoredIcon";
+export { default as AlertCrimsonColoredIcon } from "./AlertCrimsonColoredIcon";
+export { default as AlertFogColoredIcon } from "./AlertFogColoredIcon";
+export { default as AlertGraphiteColoredIcon } from "./AlertGraphiteColoredIcon";
+export { default as AlertGreenColoredIcon } from "./AlertGreenColoredIcon";
+export { default as AlertLeafColoredIcon } from "./AlertLeafColoredIcon";
+export { default as AlertMintColoredIcon } from "./AlertMintColoredIcon";
+export { default as AlertNeutralColoredIcon } from "./AlertNeutralColoredIcon";
+export { default as AlertOakColoredIcon } from "./AlertOakColoredIcon";
+export { default as AlertRedColoredIcon } from "./AlertRedColoredIcon";
+export { default as AlertSalmonColoredIcon } from "./AlertSalmonColoredIcon";
+export { default as AlertSunColoredIcon } from "./AlertSunColoredIcon";
 export { default as AmberAlertColoredIcon } from "./AmberAlertColoredIcon";
 export { default as BeterDichtbijColoredIcon } from "./BeterDichtbijColoredIcon";
 export { default as ChartLineColoredIcon } from "./ChartLineColoredIcon";

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

@@ -106,6 +106,7 @@ export { SearchInput, type SearchInputProps, } from "./components/Input/SearchIn
 export { Icon } from "./components/Icon";
 export type { IconProps, IconKey, } from "./components/Icons/types/IconProps.type";
 export * from "./components/Icons";
+export { AlertIcon, type AlertIconProps, type AlertIconPriority, type AlertIconColor, } from "./components/AlertIcon";
 export { Divider } from "./components/Divider/Divider";
 export { FullPageModal } from "./components/Modal/FullPageModal";
 export { VerticalMenu } from "./components/VerticalMenu/VerticalMenu";
@@ -125,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

@@ -106,6 +106,7 @@ export { SearchInput, type SearchInputProps, } from "./components/Input/SearchIn
 export { Icon } from "./components/Icon";
 export type { IconProps, IconKey, } from "./components/Icons/types/IconProps.type";
 export * from "./components/Icons";
+export { AlertIcon, type AlertIconProps, type AlertIconPriority, type AlertIconColor, } from "./components/AlertIcon";
 export { Divider } from "./components/Divider/Divider";
 export { FullPageModal } from "./components/Modal/FullPageModal";
 export { VerticalMenu } from "./components/VerticalMenu/VerticalMenu";
@@ -125,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/AlertIcon.stories.d.ts

@@ -0,0 +1,47 @@
+import { type StoryObj } from "@storybook/react-vite";
+import AlertIconDocumentation from "./AlertIcon.docs.mdx";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../src").AlertIconProps>;
+    args: {
+        color: "crimson";
+        size: "m";
+    };
+    argTypes: {
+        color: {
+            control: "select";
+            options: ("neutral" | "red" | "green" | "amber" | "crimson" | "salmon" | "sun" | "oak" | "mint" | "leaf" | "fog" | "graphite")[];
+        };
+        size: {
+            control: "inline-radio";
+            options: string[];
+        };
+    };
+    parameters: {
+        docs: {
+            page: typeof AlertIconDocumentation;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/**
+ * Every colour, grouped by the priority it belongs to, in the order of the
+ * alert-icons component set in Figma.
+ */
+export declare const AllPrioritiesAndColors: Story;
+/**
+ * `size="s"` is 20 x 20px, for icons next to text with a 20px line height.
+ */
+export declare const Small: Story;
+/**
+ * Give the icon an accessible name (`aria-label` or `aria-labelledby`) when
+ * the alert's priority isn't shown as text elsewhere. It's then exposed as an
+ * image with that name.
+ */
+export declare const WithAccessibleName: Story;
+/**
+ * Or point `aria-labelledby` at a visible text that names the priority.
+ */
+export declare const WithAccessibleNameFromLabelledBy: 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,22 @@ 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);
+}
+.ui\:border-spacing-y-f_base {
+  --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.0.1",
+  "version": "59.2.0",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"