@luscii-healthtech/web-ui 58.3.0 → 58.5.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/ActionCardDetailed/ActionCardDetailed.d.ts

@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+import { type ActionType } from "../ActionCard/ActionCard";
+import { type Props as InstrumentCardProps } from "../InstrumentCard/InstrumentCard";
+/**
+ * `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;
+/** One line of the schedule section, e.g. "Starts: 4 day(s) before Patient Activated". */
+export type ScheduleRow = {
+    /**
+     * Leading 24x24 icon, e.g. `<FlagIcon />`. Decorative — the component hides
+     * it from assistive tech, so the label and value carry the meaning.
+     */
+    icon: ReactNode;
+    /** Light-weight prefix, e.g. `"Starts:"`. */
+    label: string;
+    /** Regular-weight value shown alongside the label on the same line. */
+    value: string;
+    /** Optional smaller line beneath, e.g. `"From 12:00 - 13:00"`. */
+    detail?: string;
+};
+export type Props = {
+    /** Selects the coloured action icon shown beside the title. */
+    type: ActionType;
+    /** Action name, rendered as the panel heading. */
+    title: string;
+    /** Subtitle beneath the title, e.g. `"Action category"`. Omitted when absent. */
+    category?: string;
+    /** Tags beneath the header, e.g. `["2 min reading time", "78% progress"]`. */
+    metadata?: string[];
+    /**
+     * Rows of the schedule section. The whole section — heading included — is
+     * omitted when this is absent or empty.
+     */
+    schedule?: ScheduleRow[];
+    /** @default "Schedule settings" */
+    scheduleHeading?: string;
+    /**
+     * Instruments belonging to the action. The whole section — heading included
+     * — is omitted when this is absent or empty. Always rendered in the detailed
+     * variant, so `variant` is not accepted.
+     */
+    instruments?: DistributiveOmit<InstrumentCardProps, "variant">[];
+    /** @default "Instruments in this action" */
+    instrumentsHeading?: string;
+    /** Renders the pencil button in the header. Omitted when not provided. */
+    onEdit?: () => void;
+    /** Renders the trash button in the header. Omitted when not provided. */
+    onDelete?: () => void;
+    /** Renders the close button in the header. Omitted when not provided. */
+    onClose?: () => void;
+    /** Merged onto the root element. */
+    className?: string;
+};
+/**
+ * The expanded detail panel for a single action — the counterpart to the
+ * `ActionCard` list row.
+ *
+ * Four sections stack vertically: header, metadata tags, schedule and
+ * instruments. The schedule and instrument sections are omitted entirely when
+ * their data is absent or empty, and each header button appears only when its
+ * handler is provided, so the Figma variant matrix is expressed by which props
+ * are passed rather than by a `variant` prop.
+ *
+ * The panel is capped at 600px wide to match the design; pass `className` to
+ * override that if the surrounding layout needs it.
+ *
+ * @example
+ * ```tsx
+ * <ActionCardDetailed
+ *   type="information"
+ *   title="Information action title"
+ *   category="Action category"
+ *   metadata={["2 min reading time", "78% progress"]}
+ *   schedule={[
+ *     { icon: <FlagIcon />, label: "Starts:", value: "4 day(s) before Patient Activated" },
+ *     {
+ *       icon: <CalendarDayIcon />,
+ *       label: "Timeframe:",
+ *       value: "Anytime on scheduled day",
+ *       detail: "From 12:00 - 13:00",
+ *     },
+ *   ]}
+ *   instruments={[
+ *     { type: "info", title: "How to stop smoking", category: "Lesson", count: 2 },
+ *   ]}
+ *   onEdit={openEditor}
+ *   onClose={closePanel}
+ * />
+ * ```
+ */
+export declare const ActionCardDetailed: ({ type, title, category, metadata, schedule, scheduleHeading, instruments, instrumentsHeading, onEdit, onDelete, onClose, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+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/ActionCardDetailed/ActionCardDetailed.d.ts

@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+import { type ActionType } from "../ActionCard/ActionCard";
+import { type Props as InstrumentCardProps } from "../InstrumentCard/InstrumentCard";
+/**
+ * `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;
+/** One line of the schedule section, e.g. "Starts: 4 day(s) before Patient Activated". */
+export type ScheduleRow = {
+    /**
+     * Leading 24x24 icon, e.g. `<FlagIcon />`. Decorative — the component hides
+     * it from assistive tech, so the label and value carry the meaning.
+     */
+    icon: ReactNode;
+    /** Light-weight prefix, e.g. `"Starts:"`. */
+    label: string;
+    /** Regular-weight value shown alongside the label on the same line. */
+    value: string;
+    /** Optional smaller line beneath, e.g. `"From 12:00 - 13:00"`. */
+    detail?: string;
+};
+export type Props = {
+    /** Selects the coloured action icon shown beside the title. */
+    type: ActionType;
+    /** Action name, rendered as the panel heading. */
+    title: string;
+    /** Subtitle beneath the title, e.g. `"Action category"`. Omitted when absent. */
+    category?: string;
+    /** Tags beneath the header, e.g. `["2 min reading time", "78% progress"]`. */
+    metadata?: string[];
+    /**
+     * Rows of the schedule section. The whole section — heading included — is
+     * omitted when this is absent or empty.
+     */
+    schedule?: ScheduleRow[];
+    /** @default "Schedule settings" */
+    scheduleHeading?: string;
+    /**
+     * Instruments belonging to the action. The whole section — heading included
+     * — is omitted when this is absent or empty. Always rendered in the detailed
+     * variant, so `variant` is not accepted.
+     */
+    instruments?: DistributiveOmit<InstrumentCardProps, "variant">[];
+    /** @default "Instruments in this action" */
+    instrumentsHeading?: string;
+    /** Renders the pencil button in the header. Omitted when not provided. */
+    onEdit?: () => void;
+    /** Renders the trash button in the header. Omitted when not provided. */
+    onDelete?: () => void;
+    /** Renders the close button in the header. Omitted when not provided. */
+    onClose?: () => void;
+    /** Merged onto the root element. */
+    className?: string;
+};
+/**
+ * The expanded detail panel for a single action — the counterpart to the
+ * `ActionCard` list row.
+ *
+ * Four sections stack vertically: header, metadata tags, schedule and
+ * instruments. The schedule and instrument sections are omitted entirely when
+ * their data is absent or empty, and each header button appears only when its
+ * handler is provided, so the Figma variant matrix is expressed by which props
+ * are passed rather than by a `variant` prop.
+ *
+ * The panel is capped at 600px wide to match the design; pass `className` to
+ * override that if the surrounding layout needs it.
+ *
+ * @example
+ * ```tsx
+ * <ActionCardDetailed
+ *   type="information"
+ *   title="Information action title"
+ *   category="Action category"
+ *   metadata={["2 min reading time", "78% progress"]}
+ *   schedule={[
+ *     { icon: <FlagIcon />, label: "Starts:", value: "4 day(s) before Patient Activated" },
+ *     {
+ *       icon: <CalendarDayIcon />,
+ *       label: "Timeframe:",
+ *       value: "Anytime on scheduled day",
+ *       detail: "From 12:00 - 13:00",
+ *     },
+ *   ]}
+ *   instruments={[
+ *     { type: "info", title: "How to stop smoking", category: "Lesson", count: 2 },
+ *   ]}
+ *   onEdit={openEditor}
+ *   onClose={closePanel}
+ * />
+ * ```
+ */
+export declare const ActionCardDetailed: ({ type, title, category, metadata, schedule, scheduleHeading, instruments, instrumentsHeading, onEdit, onDelete, onClose, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -95,6 +95,8 @@ 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 { ActionCardDetailed, type ScheduleRow, type Props as ActionCardDetailedProps, } from "./components/ActionCardDetailed/ActionCardDetailed";
 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

@@ -95,6 +95,8 @@ 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 { ActionCardDetailed, type ScheduleRow, type Props as ActionCardDetailedProps, } from "./components/ActionCardDetailed/ActionCardDetailed";
 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/ActionCardDetailed.stories.d.ts

@@ -0,0 +1,72 @@
+import { type StoryObj } from "@storybook/react-vite";
+import { type ActionType } from "../src/components/ActionCard/ActionCard";
+import { type Props as ActionCardDetailedProps } from "../src/components/ActionCardDetailed/ActionCardDetailed";
+declare const meta: {
+    title: string;
+    component: ({ type, title, category, metadata, schedule, scheduleHeading, instruments, instrumentsHeading, onEdit, onDelete, onClose, className, }: ActionCardDetailedProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+    };
+    argTypes: {
+        type: {
+            options: ActionType[];
+            control: {
+                type: "select";
+            };
+        };
+        title: {
+            control: {
+                type: "text";
+            };
+        };
+        category: {
+            control: {
+                type: "text";
+            };
+        };
+        metadata: {
+            control: {
+                type: "object";
+            };
+        };
+        schedule: {
+            control: {
+                type: "object";
+            };
+        };
+        scheduleHeading: {
+            control: {
+                type: "text";
+            };
+        };
+        instruments: {
+            control: {
+                type: "object";
+            };
+        };
+        instrumentsHeading: {
+            control: {
+                type: "text";
+            };
+        };
+        onEdit: {
+            action: string;
+        };
+        onDelete: {
+            action: string;
+        };
+        onClose: {
+            action: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FullExample: Story;
+export declare const ScheduleAndInstruments: Story;
+export declare const ScheduleOnly: Story;
+export declare const InstrumentsOnly: Story;
+export declare const WithoutScheduleOrInstruments: Story;

package/dist/web-ui-tailwind.css

@@ -1567,6 +1567,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   width: calc(var(--ui-spacing) * 2);
   height: calc(var(--ui-spacing) * 2);
 }
+.ui\:size-\[var\(--ui-semantic-size-xl\)\] {
+  width: var(--ui-semantic-size-xl);
+  height: var(--ui-semantic-size-xl);
+}
 .ui\:h-1 {
   height: calc(var(--ui-spacing) * 1);
 }
@@ -1972,6 +1976,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-\[560px\] {
   max-width: 560px;
 }
+.ui\:max-w-\[600px\] {
+  max-width: 600px;
+}
+.ui\:max-w-\[720px\] {
+  max-width: 720px;
+}
 .ui\:max-w-\[900px\] {
   max-width: 900px;
 }
@@ -2517,6 +2527,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:\[border-radius\:var\(--ui-semantic-radius-m\)\] {
   border-radius: var(--ui-semantic-radius-m);
 }
+.ui\:\[border-radius\:var\(--ui-semantic-radius-s\)\] {
+  border-radius: var(--ui-semantic-radius-s);
+}
 .ui\:radius-l {
   border-radius: 24px;
 }
@@ -4823,6 +4836,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);