@luscii-healthtech/web-ui 58.2.5 → 58.4.0

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

@@ -0,0 +1,34 @@
+import type { ElementType, FC, ReactNode } from "react";
+import { type Props as InstrumentCardProps } from "../InstrumentCard/InstrumentCard";
+export type ActionType = "information" | "contact" | "lesson" | "calculation" | "measurement";
+/**
+ * `Omit` distributes over the union so `InstrumentCard`'s discriminated
+ * `state`/`errorMessage` pairing survives; a plain `Omit` would collapse it.
+ */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+export type ActionCardMetadata = {
+    label: string;
+    /** Bordered instead of flat — used for schedule information. */
+    bordered?: boolean;
+};
+export type Props = {
+    type: ActionType;
+    title: string;
+    metadata?: ActionCardMetadata[];
+    /** Always rendered in the compact variant, so `variant` is not accepted. */
+    instruments?: DistributiveOmit<InstrumentCardProps, "variant">[];
+    actions?: ReactNode;
+    draggable?: boolean;
+    /**
+     * Element for the title. `variant` controls the visual size; this controls
+     * the document outline, which only the consuming page knows.
+     * @default "h3"
+     */
+    titleAs?: ElementType;
+    /** "list" drops the shadow so the card sits flush inside a list container. */
+    variant?: "default" | "compact" | "list";
+    onClick?: () => void;
+    className?: string;
+};
+export declare const ActionCard: FC<Props>;
+export {};

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

@@ -0,0 +1,99 @@
+import { type FC } from "react";
+/**
+ * The kind of instrument, which selects the leading icon. Overridden by
+ * `ExclamationMarkIcon` when `state` is `"error"`.
+ */
+export type InstrumentType = "info" | "questionnaire" | "numeric" | "document" | "contact" | "other" | "scripted" | "sum";
+type BaseProps = {
+    /** Selects the leading icon. */
+    type: InstrumentType;
+    /**
+     * Name of the instrument. Truncates with an ellipsis in the `detailed`
+     * variant; in `compact` it is the pill label, and is replaced by
+     * `errorMessage` when `state` is `"error"`.
+     */
+    title: string;
+    /**
+     * First cell of the meta row, e.g. `"Lesson"`. `detailed` only, and not
+     * rendered when `state` is `"error"` — the error message takes its place.
+     */
+    category?: string;
+    /**
+     * Second cell of the meta row, e.g. `"Comments ON"`, separated from
+     * `category` by a vertical rule. Rendered only alongside `category`.
+     * `detailed` only, and replaced by the error message in the error state.
+     */
+    meta?: string;
+    /**
+     * Instrument identifier, e.g. `"Id-30ry3-7240"`. Rendered as a bordered
+     * tag beneath the meta row. `detailed` only; omitted when absent.
+     */
+    id?: string;
+    /**
+     * Number shown in the trailing tag — how many times the instrument is used.
+     * `detailed` only; omitted when absent. `0` renders, it is not treated as
+     * empty.
+     */
+    count?: number;
+    /**
+     * `"compact"` is an inline pill of icon plus label, for listing
+     * instruments inside an action card. `"detailed"` is a full-width row with
+     * a title, meta row and tags.
+     *
+     * @default "compact"
+     */
+    variant?: "compact" | "detailed";
+    /** Merged onto the root element. */
+    className?: string;
+};
+/**
+ * `errorMessage` is what the error state renders — it replaces the label in
+ * the compact variant and the meta row in the detailed variant. Requiring it
+ * alongside `state="error"` makes the empty-error-label state impossible to
+ * express, rather than guarding against it at runtime.
+ *
+ * In the error state the icon becomes `ExclamationMarkIcon` and the icon,
+ * title and message all take the error colour.
+ *
+ * @default state "default"
+ */
+type StateProps = {
+    state?: "default";
+    errorMessage?: never;
+} | {
+    state: "error";
+    errorMessage: string;
+};
+export type Props = BaseProps & StateProps;
+/**
+ * Renders a single instrument belonging to an action.
+ *
+ * Use `variant="compact"` for the inline pills listed on an `ActionCard`, and
+ * `variant="detailed"` for the full rows in `ActionCardDetailed`. Both of
+ * those consumers force the variant, so it is not part of the props they
+ * accept.
+ *
+ * @example
+ * ```tsx
+ * <InstrumentCard type="info" title="How to stop smoking" />
+ *
+ * <InstrumentCard
+ *   variant="detailed"
+ *   type="questionnaire"
+ *   title="Daily health questionnaire"
+ *   category="Questionnaire"
+ *   meta="Comments ON"
+ *   id="Id-30ry3-7240"
+ *   count={4}
+ * />
+ *
+ * <InstrumentCard
+ *   type="other"
+ *   title="Instrument title"
+ *   state="error"
+ *   errorMessage="Instrument missing in protocol"
+ * />
+ * ```
+ */
+export declare const InstrumentCard: FC<Props>;
+export {};

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

@@ -0,0 +1,34 @@
+import type { ElementType, FC, ReactNode } from "react";
+import { type Props as InstrumentCardProps } from "../InstrumentCard/InstrumentCard";
+export type ActionType = "information" | "contact" | "lesson" | "calculation" | "measurement";
+/**
+ * `Omit` distributes over the union so `InstrumentCard`'s discriminated
+ * `state`/`errorMessage` pairing survives; a plain `Omit` would collapse it.
+ */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+export type ActionCardMetadata = {
+    label: string;
+    /** Bordered instead of flat — used for schedule information. */
+    bordered?: boolean;
+};
+export type Props = {
+    type: ActionType;
+    title: string;
+    metadata?: ActionCardMetadata[];
+    /** Always rendered in the compact variant, so `variant` is not accepted. */
+    instruments?: DistributiveOmit<InstrumentCardProps, "variant">[];
+    actions?: ReactNode;
+    draggable?: boolean;
+    /**
+     * Element for the title. `variant` controls the visual size; this controls
+     * the document outline, which only the consuming page knows.
+     * @default "h3"
+     */
+    titleAs?: ElementType;
+    /** "list" drops the shadow so the card sits flush inside a list container. */
+    variant?: "default" | "compact" | "list";
+    onClick?: () => void;
+    className?: string;
+};
+export declare const ActionCard: FC<Props>;
+export {};

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

@@ -0,0 +1,99 @@
+import { type FC } from "react";
+/**
+ * The kind of instrument, which selects the leading icon. Overridden by
+ * `ExclamationMarkIcon` when `state` is `"error"`.
+ */
+export type InstrumentType = "info" | "questionnaire" | "numeric" | "document" | "contact" | "other" | "scripted" | "sum";
+type BaseProps = {
+    /** Selects the leading icon. */
+    type: InstrumentType;
+    /**
+     * Name of the instrument. Truncates with an ellipsis in the `detailed`
+     * variant; in `compact` it is the pill label, and is replaced by
+     * `errorMessage` when `state` is `"error"`.
+     */
+    title: string;
+    /**
+     * First cell of the meta row, e.g. `"Lesson"`. `detailed` only, and not
+     * rendered when `state` is `"error"` — the error message takes its place.
+     */
+    category?: string;
+    /**
+     * Second cell of the meta row, e.g. `"Comments ON"`, separated from
+     * `category` by a vertical rule. Rendered only alongside `category`.
+     * `detailed` only, and replaced by the error message in the error state.
+     */
+    meta?: string;
+    /**
+     * Instrument identifier, e.g. `"Id-30ry3-7240"`. Rendered as a bordered
+     * tag beneath the meta row. `detailed` only; omitted when absent.
+     */
+    id?: string;
+    /**
+     * Number shown in the trailing tag — how many times the instrument is used.
+     * `detailed` only; omitted when absent. `0` renders, it is not treated as
+     * empty.
+     */
+    count?: number;
+    /**
+     * `"compact"` is an inline pill of icon plus label, for listing
+     * instruments inside an action card. `"detailed"` is a full-width row with
+     * a title, meta row and tags.
+     *
+     * @default "compact"
+     */
+    variant?: "compact" | "detailed";
+    /** Merged onto the root element. */
+    className?: string;
+};
+/**
+ * `errorMessage` is what the error state renders — it replaces the label in
+ * the compact variant and the meta row in the detailed variant. Requiring it
+ * alongside `state="error"` makes the empty-error-label state impossible to
+ * express, rather than guarding against it at runtime.
+ *
+ * In the error state the icon becomes `ExclamationMarkIcon` and the icon,
+ * title and message all take the error colour.
+ *
+ * @default state "default"
+ */
+type StateProps = {
+    state?: "default";
+    errorMessage?: never;
+} | {
+    state: "error";
+    errorMessage: string;
+};
+export type Props = BaseProps & StateProps;
+/**
+ * Renders a single instrument belonging to an action.
+ *
+ * Use `variant="compact"` for the inline pills listed on an `ActionCard`, and
+ * `variant="detailed"` for the full rows in `ActionCardDetailed`. Both of
+ * those consumers force the variant, so it is not part of the props they
+ * accept.
+ *
+ * @example
+ * ```tsx
+ * <InstrumentCard type="info" title="How to stop smoking" />
+ *
+ * <InstrumentCard
+ *   variant="detailed"
+ *   type="questionnaire"
+ *   title="Daily health questionnaire"
+ *   category="Questionnaire"
+ *   meta="Comments ON"
+ *   id="Id-30ry3-7240"
+ *   count={4}
+ * />
+ *
+ * <InstrumentCard
+ *   type="other"
+ *   title="Instrument title"
+ *   state="error"
+ *   errorMessage="Instrument missing in protocol"
+ * />
+ * ```
+ */
+export declare const InstrumentCard: FC<Props>;
+export {};

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

@@ -94,6 +94,8 @@ export { Breadcrumbs, type BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
 export { Tag } from "./components/Tag/Tag";
 export { TagGroup } from "./components/Tag/TagGroup";
+export { InstrumentCard, type InstrumentType, type Props as InstrumentCardProps, } from "./components/InstrumentCard/InstrumentCard";
+export { ActionCard, type ActionType, type ActionCardMetadata, type Props as ActionCardProps, } from "./components/ActionCard/ActionCard";
 export { Textarea, type TextareaProps, type ResizeTypes, } from "./components/Textarea/Textarea";
 export { TextEditor, type TextEditorTag, } from "./components/TextEditor/TextEditor";
 export { type TextEditorTranslations } from "./components/TextEditor/textEditorTranslations";

package/dist/src/index.d.ts

@@ -94,6 +94,8 @@ export { Breadcrumbs, type BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";
 export { Tag } from "./components/Tag/Tag";
 export { TagGroup } from "./components/Tag/TagGroup";
+export { InstrumentCard, type InstrumentType, type Props as InstrumentCardProps, } from "./components/InstrumentCard/InstrumentCard";
+export { ActionCard, type ActionType, type ActionCardMetadata, type Props as ActionCardProps, } from "./components/ActionCard/ActionCard";
 export { Textarea, type TextareaProps, type ResizeTypes, } from "./components/Textarea/Textarea";
 export { TextEditor, type TextEditorTag, } from "./components/TextEditor/TextEditor";
 export { type TextEditorTranslations } from "./components/TextEditor/textEditorTranslations";

package/dist/stories/ActionCard.stories.d.ts

@@ -0,0 +1,51 @@
+import { type StoryObj } from "@storybook/react-vite";
+import { type ActionType } from "../src/components/ActionCard/ActionCard";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../src").ActionCardProps>;
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+    argTypes: {
+        type: {
+            options: ActionType[];
+            control: {
+                type: "select";
+            };
+        };
+        variant: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        draggable: {
+            control: {
+                type: "boolean";
+            };
+        };
+        actions: {
+            control: false;
+        };
+        metadata: {
+            control: {
+                type: "object";
+            };
+        };
+        instruments: {
+            control: {
+                type: "object";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const EveryType: Story;
+export declare const WithAndWithoutActions: Story;
+export declare const DraggableAndStatic: Story;
+export declare const ListVariant: Story;
+export declare const CompactVariant: Story;

package/dist/stories/InstrumentCard.stories.d.ts

@@ -0,0 +1,43 @@
+import { type StoryObj } from "@storybook/react-vite";
+import { type InstrumentType } from "../src/components/InstrumentCard/InstrumentCard";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../src").InstrumentCardProps>;
+    parameters: {
+        backgrounds: {
+            default: string;
+        };
+    };
+    argTypes: {
+        type: {
+            options: InstrumentType[];
+            control: {
+                type: "select";
+            };
+        };
+        variant: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        state: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
+        count: {
+            control: {
+                type: "number";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const EveryTypeCompact: Story;
+export declare const EveryTypeDetailed: Story;
+export declare const DetailedOptionalFields: Story;
+export declare const ErrorStates: Story;

package/dist/web-ui-tailwind.css

@@ -1624,6 +1624,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:h-\[11px\] {
   height: 11px;
 }
+.ui\:h-\[12px\] {
+  height: 12px;
+}
 .ui\:h-\[20px\] {
   height: 20px;
 }
@@ -1966,6 +1969,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-\[500px\] {
   max-width: 500px;
 }
+.ui\:max-w-\[560px\] {
+  max-width: 560px;
+}
+.ui\:max-w-\[720px\] {
+  max-width: 720px;
+}
 .ui\:max-w-\[900px\] {
   max-width: 900px;
 }
@@ -1978,6 +1987,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-screen {
   max-width: 100vw;
 }
+.ui\:min-w-0 {
+  min-width: calc(var(--ui-spacing) * 0);
+}
 .ui\:min-w-24 {
   min-width: 1.5rem;
 }
@@ -2922,6 +2934,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-blue-400 {
   background-color: var(--ui-color-blue-400);
 }
+.ui\:bg-border-neutral-primary-default {
+  background-color: var(--ui-primitive-color-grey-300);
+}
 .ui\:bg-color-divider {
   background-color: #eeeeee;
 }
@@ -3848,6 +3863,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:text-green-800 {
   color: var(--ui-color-green-800);
 }
+.ui\:text-icon-brand-primary-default {
+  color: var(--ui-primitive-color-brand-700);
+}
+.ui\:text-icon-error-primary-default {
+  color: var(--ui-primitive-color-red-900);
+}
 .ui\:text-negative-solid {
   color: var(--ui-color-red-400);
 }
@@ -4805,6 +4826,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     position: absolute;
   }
 }
+.ui\:after\:inset-0 {
+  &::after {
+    content: var(--tw-content);
+    inset: 0px;
+  }
+}
 .ui\:after\:start-\[2px\] {
   &::after {
     content: var(--tw-content);