@luscii-healthtech/web-ui 42.14.0 → 44.0.0

package/dist/src/components/Page/CRUDPage.types.d.ts

@@ -1,6 +1,5 @@
 import type { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
 import type { PageHeaderProps } from "../PageHeader";
-import type { StepsProps } from "../Steps/Steps";
 type CRUDPageButtonProps = Pick<BaseButtonProps, "onClick" | "text" | "isDisabled" | "form" | "type">;
 type CRUDPageTitle = {
     text: string;
@@ -32,9 +31,11 @@ type CRUDPagePropsWithoutHeaderOrTitle = {
     isSubmitting?: boolean;
     children?: React.ReactNode;
     steps?: {
-        titles: StepsProps["orderedStepTitles"];
-        currentStep: StepsProps["currentStep"];
-        localization: StepsProps["localization"];
+        titles: Array<string>;
+        currentStep: number;
+        localization: {
+            step: string;
+        };
     };
     /**
      * When `true` will set the height of the

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

@@ -8,9 +8,16 @@ export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>
     innerRef?: React.Ref<HTMLInputElement>;
 }
 /**
- * TODO: The CSS styling is all messed up, including isError
- * Warning: don't use this prop before this is resolved
- * Issue to track: https://github.com/Luscii/web-ui/issues/57
- * TODO: remove this comment once this is resolved
+ * @deprecated Use `LabeledRadio` components in a `LabeledRadioGroup` instead.
+ *
+ * E.g. with React Hook Form:
+ *
+ * @example
+ * ```tsx
+ * <LabeledRadioGroup>
+ *   <LabeledRadio {...register("favoriteFruit")} label="Apple" value="apple" />
+ *   <LabeledRadio {...register("favoriteFruit")} label="Banana" value="banana" />
+ * </LabeledRadioGroup>
+ * ```
  */
 export declare const RadioV2: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/RadioGroup/RadioGroupV2.d.ts

@@ -7,4 +7,17 @@ export interface RadioGroupProps extends Omit<React.InputHTMLAttributes<HTMLInpu
     innerRef?: React.Ref<HTMLInputElement>;
     title?: string;
 }
+/**
+ * @deprecated Use `LabeledRadio` components in a `LabeledRadioGroup` instead.
+ *
+ * E.g. with React Hook Form:
+ *
+ * @example
+ * ```tsx
+ * <LabeledRadioGroup>
+ *   <LabeledRadio {...register("favoriteFruit")} label="Apple" value="apple" />
+ *   <LabeledRadio {...register("favoriteFruit")} label="Banana" value="banana" />
+ * </LabeledRadioGroup>
+ * ```
+ */
 export declare const RadioGroupV2: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -26,7 +26,7 @@ type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
      * Positioning of items along the Stack’s main axis.
      * The values are based on Tailwind's classnames and are therefore limited to the following:
      */
-    justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly";
+    justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch";
     /**
      * Positioning of items along the Stack’s x (horizontal) or y (vertical) axis
      */

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

@@ -1,9 +1,11 @@
-export interface StepsProps {
-    orderedStepTitles: Array<string>;
-    currentStep: number;
+import React from "react";
+import { Step } from "./subcomponents/Step";
+type Props = {
+    children?: React.ReactNode;
     className?: string;
-    localization: {
-        step: string;
-    };
-}
-export declare const Steps: ({ orderedStepTitles, currentStep, className, localization, }: StepsProps) => JSX.Element;
+};
+type StaticProperties = {
+    Step: typeof Step;
+};
+export declare const Steps: React.FC<Props> & StaticProperties;
+export {};

package/dist/src/components/Steps/subcomponents/Step.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    title: string;
+    subtitle?: string;
+    state: "completed" | "current" | "upcoming";
+};
+export declare const Step: React.FC<Props>;
+export {};

package/dist/src/index.d.ts

@@ -65,8 +65,6 @@ export { Page, CRUDPage, type CRUDPageProps } from "./components/Page";
 export { PaginationMenu } from "./components/PaginationMenu/PaginationMenu";
 export { type PageSize as PaginationMenuPageSize, type OnPaginationChange as OnPaginationMenuChange, type Localization as PaginationMenuLocalization, type PaginationMenuProps, } from "./components/PaginationMenu/PaginationMenu.types";
 export { default as PreviewPhone } from "./components/PreviewPhone/PreviewPhone";
-export { default as Radio } from "./components/Radio/Radio";
-export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { type RadioProps, RadioV2 } from "./components/Radio/RadioV2";
 export { type RadioGroupProps, RadioGroupV2, } from "./components/RadioGroup/RadioGroupV2";
 export { default as Section, type SectionProps, } from "./components/Section/Section";

package/dist/stories/Divider.stories.d.ts

@@ -11,7 +11,7 @@ declare const meta: {
         as?: import("react").ElementType | undefined;
         gap?: "none" | "s" | "xs" | "xl" | "m" | "xxxxs" | "xxxs" | "xxs" | "l" | "xxl";
         align?: "start" | "end" | "center" | "baseline" | "stretch" | "normal";
-        justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly";
+        justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch";
         axis?: "x" | "y";
         reverse?: boolean;
         wrap?: boolean;
@@ -35,7 +35,7 @@ declare const meta: {
         as?: import("react").ElementType | undefined;
         gap?: "none" | "s" | "xs" | "xl" | "m" | "xxxxs" | "xxxs" | "xxs" | "l" | "xxl";
         align?: "start" | "end" | "center" | "baseline" | "stretch" | "normal";
-        justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly";
+        justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch";
         axis?: "x" | "y";
         reverse?: boolean;
         wrap?: boolean;

package/dist/stories/RadioGroupV2.stories.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("../src").RadioGroupProps & import("react").RefAttributes<HTMLInputElement>>;
+    tags: string[];
 };
 export default _default;
 export declare const RadioGroup: {

package/dist/stories/RadioV2.stories.d.ts

@@ -1,6 +1,7 @@
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("../src").RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+    tags: string[];
 };
 export default _default;
 export declare const Base: {

package/dist/stories/Steps.stories.d.ts

@@ -1,14 +1,26 @@
 declare const _default: {
     title: string;
-    component: ({ orderedStepTitles, currentStep, className, localization, }: import("../src/components/Steps/Steps").StepsProps) => JSX.Element;
+    component: import("react").FC<{
+        children?: React.ReactNode;
+        className?: string;
+    }> & {
+        Step: typeof import("../src/components/Steps/subcomponents/Step").Step;
+    };
+    subcomponents: {
+        Step: import("react").FC<{
+            title: string;
+            subtitle?: string;
+            state: "completed" | "current" | "upcoming";
+        }>;
+    };
 };
 export default _default;
 export declare const Full: {
-    args: {
-        orderedStepTitles: string[];
-        currentStep: number;
-        localization: {
-            step: string;
-        };
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithSubcomponents: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithSubcomponentsAndSubtitles: {
+    render: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/stories/TimelineCardLayout.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
         as?: import("react").ElementType | undefined;
         gap?: "none" | "s" | "xs" | "xl" | "m" | "xxxxs" | "xxxs" | "xxs" | "l" | "xxl";
         align?: "start" | "end" | "center" | "baseline" | "stretch" | "normal";
-        justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly";
+        justify?: "normal" | "start" | "end" | "center" | "between" | "around" | "evenly" | "stretch";
         axis?: "x" | "y";
         reverse?: boolean;
         wrap?: boolean;

package/dist/web-ui-tailwind.css

@@ -1591,8 +1591,8 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:justify-start {
   justify-content: flex-start;
 }
-.ui\:justify-items-stretch {
-  justify-items: stretch;
+.ui\:justify-stretch {
+  justify-content: stretch;
 }
 .ui\:gap-2 {
   gap: calc(var(--ui-spacing) * 2);
@@ -1711,13 +1711,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     margin-inline-end: calc(calc(var(--ui-spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
   }
 }
-.ui\:space-x-6 {
-  :where(& > :not(:last-child)) {
-    --tw-space-x-reverse: 0;
-    margin-inline-start: calc(calc(var(--ui-spacing) * 6) * var(--tw-space-x-reverse));
-    margin-inline-end: calc(calc(var(--ui-spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
-  }
-}
 .ui\:space-x-8 {
   :where(& > :not(:last-child)) {
     --tw-space-x-reverse: 0;
@@ -3979,13 +3972,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
-.ui\:hover\:bg-primary-dark {
-  &:hover {
-    @media (hover: hover) {
-      background-color: var(--ui-color-blue-900);
-    }
-  }
-}
 .ui\:hover\:bg-red-50 {
   &:hover {
     @media (hover: hover) {