@luscii-healthtech/web-ui 61.0.2 → 62.0.0

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

@@ -41,11 +41,11 @@ type SharedProps = {
  * </LabeledRadioCardGroup>
  * ```
  *
- * Using `children` prop for custom content:
+ * Using `children` prop for custom content, rendered as-is:
  * ```tsx
  * <LabeledRadioCardGroup>
  *   <LabeledRadioCard name="payment" id="credit" value="credit">
- *     <Stack axis="y" _gap="base">
+ *     <Stack as="span" axis="y" _gap="base">
  *       <Text variant="body-base-regular">Credit Card</Text>
  *       <Text variant="body-small-light" color="neutral-secondary">
  *         Pay securely with your card
@@ -60,6 +60,11 @@ export declare const LabeledRadioCard: React.ForwardRefExoticComponent<(Omit<Omi
     subtitle?: React.ReactNode;
     leadingIcon?: React.ReactNode;
 }, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children"> & SharedProps & {
+    /**
+     * Custom content, rendered as-is: lay it out and style it yourself. It's
+     * rendered inside a `<label>`, so use phrasing elements (e.g.
+     * `<Stack as="span">`).
+     */
     children: React.ReactNode;
 }, "ref">) & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/src/generated/components/Radio/LabeledRadioCard.d.ts

@@ -41,11 +41,11 @@ type SharedProps = {
  * </LabeledRadioCardGroup>
  * ```
  *
- * Using `children` prop for custom content:
+ * Using `children` prop for custom content, rendered as-is:
  * ```tsx
  * <LabeledRadioCardGroup>
  *   <LabeledRadioCard name="payment" id="credit" value="credit">
- *     <Stack axis="y" _gap="base">
+ *     <Stack as="span" axis="y" _gap="base">
  *       <Text variant="body-base-regular">Credit Card</Text>
  *       <Text variant="body-small-light" color="neutral-secondary">
  *         Pay securely with your card
@@ -60,6 +60,11 @@ export declare const LabeledRadioCard: React.ForwardRefExoticComponent<(Omit<Omi
     subtitle?: React.ReactNode;
     leadingIcon?: React.ReactNode;
 }, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "children"> & SharedProps & {
+    /**
+     * Custom content, rendered as-is: lay it out and style it yourself. It's
+     * rendered inside a `<label>`, so use phrasing elements (e.g.
+     * `<Stack as="span">`).
+     */
     children: React.ReactNode;
 }, "ref">) & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/stories/LabeledRadio.stories.d.ts

@@ -37,6 +37,13 @@ export declare const OverviewLabeledRadioCard: Story;
 export declare const UsingLabelAndSubtitleProps: Story;
 export declare const UsingChildrenPropForCustomContent: Story;
 export declare const SingleColumnWithIcons: Story;
+/**
+ * A `ReactNode` passed as `label` or `children` is rendered as-is and fills
+ * the card, so you decide its layout: e.g. center the content, or put an icon
+ * above the label. Use phrasing elements (e.g. `Stack as="span"`), as the
+ * content is rendered inside a `<label>`.
+ */
+export declare const CustomContentLayout: Story;
 /**
  * Besides a string, `title` takes a node, such as a `Heading` with an info
  * icon. It's still rendered as the fieldset's `<legend>`, so it names the

package/dist/stories/PopoverRadioCardRecipe.stories.d.ts

@@ -6,9 +6,6 @@ import { type StoryObj } from "@storybook/react-vite";
  *
  * The selection is only applied when the user confirms it with the "Set"
  * button, so the field value doesn't change while the user is still choosing.
- *
- * See `POPOVER_RADIOCARD_RECIPE_SHORTCOMINGS.md` in the root of this
- * repository for the workarounds this recipe needs.
  */
 declare const meta: {
     title: string;

package/dist/web-ui-tailwind.css

@@ -1970,16 +1970,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-\[calc\(100dvw-\(var\(--ui-spacing-xl\)\)\)\] {
   max-width: calc(100dvw - (var(--ui-spacing-xl)));
 }
-.ui\:max-w-\[none\] {
-  max-width: none;
-}
 .ui\:max-w-full {
   max-width: 100%;
 }
-.ui\:max-w-none {
-  max-width: none;
-  max-width: var(--ui-spacing-none);
-}
 .ui\:max-w-screen {
   max-width: 100vw;
 }
@@ -3804,9 +3797,6 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:text-\(--ui-primitive-color-red-700\) {
   color: var(--ui-primitive-color-red-700);
 }
-.ui\:text-\(--ui-primitive-color-…\) {
-  color: var(--ui-primitive-color-…);
-}
 .ui\:text-amber-700 {
   color: var(--ui-color-amber-700);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luscii-healthtech/web-ui",
-  "version": "61.0.2",
+  "version": "62.0.0",
   "license": "MIT",
   "author": {
     "name": "Joris Janssen"