@luscii-healthtech/web-ui 42.11.4 → 42.12.0

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

@@ -12,6 +12,12 @@ type Props = Omit<ComponentProps<typeof Box<"details">>, "as"> & {
      * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name
      */
     name?: string;
+    /**
+     * When set to true will omit the border around the DetailsDisclosure component.
+     *
+     * @default false
+     */
+    omitBorder?: boolean;
     /**
      * Called when the details component opens or closes.
      */

package/dist/stories/DetailsDisclosure.stories.d.ts

@@ -15,6 +15,7 @@ declare const meta: {
     }, "as"> & ({
         children?: import("react").ReactNode;
         name?: string;
+        omitBorder?: boolean;
         onToggleDetails?: (isOpen: boolean) => void;
     } & ({
         open?: never;
@@ -333,6 +334,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES;
         borderRadiusRight?: keyof typeof import("../src").SIZES;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        omitBorder?: boolean;
         onToggleDetails?: (isOpen: boolean) => void;
     } | {
         openByDefault: boolean;
@@ -628,6 +630,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES;
         borderRadiusRight?: keyof typeof import("../src").SIZES;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        omitBorder?: boolean;
         onToggleDetails?: (isOpen: boolean) => void;
     } | {
         openByDefault: boolean;
@@ -923,6 +926,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES;
         borderRadiusRight?: keyof typeof import("../src").SIZES;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        omitBorder?: boolean;
         onToggleDetails?: (isOpen: boolean) => void;
     } | {
         openByDefault: boolean;
@@ -1218,6 +1222,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES;
         borderRadiusRight?: keyof typeof import("../src").SIZES;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        omitBorder?: boolean;
         onToggleDetails?: (isOpen: boolean) => void;
     };
     decorators?: import("storybook/internal/csf").DecoratorFunction<import("@storybook/react").ReactRenderer, {
@@ -1513,6 +1518,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -1808,6 +1814,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }> | import("storybook/internal/csf").DecoratorFunction<import("@storybook/react").ReactRenderer, {
@@ -2103,6 +2110,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -2398,6 +2406,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }>[] | undefined;
@@ -2695,6 +2704,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -2990,6 +3000,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }>> | undefined;
@@ -3286,6 +3297,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -3581,6 +3593,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }> | import("storybook/internal/csf").LoaderFunction<import("@storybook/react").ReactRenderer, {
@@ -3876,6 +3889,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -4171,6 +4185,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }>[] | undefined;
@@ -4467,6 +4482,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -4762,6 +4778,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }> | import("storybook/internal/csf").BeforeEach<import("@storybook/react").ReactRenderer, {
@@ -5057,6 +5074,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -5352,6 +5370,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }>[] | undefined;
@@ -5648,6 +5667,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -5943,6 +5963,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }> | import("storybook/internal/csf").AfterEach<import("@storybook/react").ReactRenderer, {
@@ -6238,6 +6259,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -6533,6 +6555,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }>[] | undefined;
@@ -6829,6 +6852,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -7124,6 +7148,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }> | undefined;
@@ -7421,6 +7446,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -7716,6 +7742,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }>) => (ui?: import("react").JSX.Element) => Promise<import("storybook/internal/csf").Canvas>) | undefined;
@@ -8014,6 +8041,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -8309,6 +8337,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }> | undefined;
@@ -8606,6 +8635,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -8901,6 +8931,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }, Partial<{
@@ -9196,6 +9227,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: boolean | undefined;
     } | {
@@ -9491,6 +9523,7 @@ export declare const OpenByDefault: {
         borderRadiusLeft?: keyof typeof import("../src").SIZES | undefined;
         borderRadiusRight?: keyof typeof import("../src").SIZES | undefined;
         hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor | undefined;
+        omitBorder?: boolean | undefined;
         onToggleDetails?: ((isOpen: boolean) => void) | undefined;
         openByDefault?: never | undefined;
     }>>, "story"> | undefined;

package/dist/web-ui-tailwind.css

@@ -32,6 +32,7 @@
   --ui-color-blue-200: #bfdbfe;
   --ui-color-blue-300: #93c5fd;
   --ui-color-blue-400: #60a5fa;
+  --ui-color-blue-500: #3b82f6;
   --ui-color-blue-700: #1d4ed8;
   --ui-color-blue-800: #1e40af;
   --ui-color-blue-900: #1e3a8a;
@@ -1796,6 +1797,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:rounded-2xl {
   border-radius: var(--ui-radius-2xl);
 }
+.ui\:rounded-\[inherit\] {
+  border-radius: inherit;
+}
 .ui\:rounded-full {
   border-radius: calc(infinity * 1px);
 }
@@ -1934,6 +1938,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   border-style: var(--tw-border-style);
   border-width: 1px;
 }
+.ui\:border-0 {
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+}
 .ui\:border-2 {
   border-style: var(--tw-border-style);
   border-width: 2px;
@@ -3328,6 +3336,37 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     animation-duration: 300ms;
   }
 }
+.ui\:details-content\:h-0 {
+  &::details-content {
+    height: calc(var(--ui-spacing) * 0);
+  }
+}
+.ui\:details-content\:overflow-clip {
+  &::details-content {
+    overflow: clip;
+  }
+}
+.ui\:details-content\:opacity-0 {
+  &::details-content {
+    opacity: 0%;
+  }
+}
+.ui\:details-content\:transition-discrete {
+  &::details-content {
+    transition-behavior: allow-discrete;
+  }
+}
+.ui\:details-content\:duration-300 {
+  &::details-content {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+}
+.ui\:details-content\:duration-300 {
+  &::details-content {
+    animation-duration: 300ms;
+  }
+}
 .ui\:before\:absolute {
   &::before {
     content: var(--tw-content);
@@ -3647,6 +3686,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     border-top-right-radius: var(--ui-radius-2xl);
   }
 }
+.ui\:first\:rounded-t-\[inherit\] {
+  &:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+}
 .ui\:first\:rounded-l-xl {
   &:first-child {
     border-top-left-radius: var(--ui-radius-xl);
@@ -3681,6 +3726,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     border-bottom-left-radius: var(--ui-radius-2xl);
   }
 }
+.ui\:last\:rounded-b-\[inherit\] {
+  &:last-child {
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+}
 .ui\:last\:border-r {
   &:last-child {
     border-right-style: var(--tw-border-style);
@@ -3753,6 +3804,20 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
+.ui\:open\:details-content\:h-auto {
+  &:is([open], :popover-open, :open) {
+    &::details-content {
+      height: auto;
+    }
+  }
+}
+.ui\:open\:details-content\:opacity-100 {
+  &:is([open], :popover-open, :open) {
+    &::details-content {
+      opacity: 100%;
+    }
+  }
+}
 .ui\:checked\:grid {
   &:checked {
     display: grid;
@@ -4371,6 +4436,21 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     }
   }
 }
+.ui\:motion-reduce\:details-content\:duration-\[0ms\] {
+  @media (prefers-reduced-motion: reduce) {
+    &::details-content {
+      --tw-duration: 0ms;
+      transition-duration: 0ms;
+    }
+  }
+}
+.ui\:motion-reduce\:details-content\:duration-\[0ms\] {
+  @media (prefers-reduced-motion: reduce) {
+    &::details-content {
+      animation-duration: 0ms;
+    }
+  }
+}
 .ui\:before\:motion-reduce\:duration-\[0ms\]\! {
   &::before {
     content: var(--tw-content);
@@ -4742,6 +4822,16 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     z-index: 3;
   }
 }
+.ui\:\[\&\:has\(summary\:focus\)\]\:border-blue-500 {
+  &:has(summary:focus) {
+    border-color: var(--ui-color-blue-500);
+  }
+}
+.ui\:\[\&\:has\(summary\:hover\)\]\:border-blue-500 {
+  &:has(summary:hover) {
+    border-color: var(--ui-color-blue-500);
+  }
+}
 .ui\:\[\&\:not\(\:hover\)\]\:text-black {
   &:not(:hover) {
     color: var(--ui-color-black);
@@ -4899,6 +4989,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     border-top-width: 1px;
   }
 }
+:root {
+  interpolate-size: allow-keywords;
+}
 *, ::before, ::after {
   border-style: solid;
   border-color: #edf2f7;