@luscii-healthtech/web-ui 40.0.1 → 40.1.0

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

@@ -0,0 +1,16 @@
+import { type PropsWithChildren, type FC, type ReactNode, type ComponentProps } from "react";
+import { Box } from "../Box/Box";
+type Props = {
+    /**
+     * Wether the aside should be presented.
+     *
+     * @default true
+     */
+    open: boolean;
+    /**
+     * A slot for the aside element.
+     */
+    aside: ReactNode;
+} & ComponentProps<typeof Box>;
+export declare const SplitViewLayout: FC<PropsWithChildren<Props>>;
+export {};

package/dist/stories/SplitViewLayout.stories.d.ts

@@ -0,0 +1,27 @@
+import { type StoryObj } from "@storybook/react";
+import { BADGES } from "../.storybook/constants";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("react").PropsWithChildren<{
+        open: boolean;
+        aside: import("react").ReactNode;
+    } & Omit<any, "ref"> & Partial<Record<"p" | "m" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "mt" | "mr" | "mb" | "ml" | "mx" | "my", "none" | "s" | "xl" | "m" | "xs" | "xxxxs" | "xxxs" | "xxs" | "l" | "xxl">> & {
+        as?: import("react").ElementType | undefined;
+        elevation?: "small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge";
+        width?: "full" | "1/2" | "1/3" | "2/3" | "1/4" | "3/4" | keyof typeof import("../src/index").SIZES;
+        backgroundColor?: import("../src/types/general.types").BackgroundColor;
+        borderRadius?: keyof typeof import("../src/index").SIZES;
+        borderRadiusLeft?: keyof typeof import("../src/index").SIZES;
+        borderRadiusRight?: keyof typeof import("../src/index").SIZES;
+        hoverBackgroundColor?: import("../src/types/general.types").BackgroundColor;
+        cursor?: import("../src/types/general.types").CursorOption;
+    }>>;
+    parameters: {
+        badges: BADGES[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Closed: Story;
+export declare const Open: Story;
+export declare const CRUDLayoutExample: Story;

package/dist/web-ui-tailwind.css

@@ -258,6 +258,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:invisible {
   visibility: hidden;
 }
+.ui\:visible {
+  visibility: visible;
+}
 .ui\:sr-only {
   position: absolute;
   width: 1px;
@@ -1208,6 +1211,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-270 {
   max-width: 67.5rem;
 }
+.ui\:max-w-\[--spacing\(132\)\] {
+  max-width: calc(var(--ui-spacing) * 132);
+}
 .ui\:max-w-\[20ch\] {
   max-width: 20ch;
 }
@@ -1217,6 +1223,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:max-w-\[30ch\] {
   max-width: 30ch;
 }
+.ui\:max-w-\[100vw\] {
+  max-width: 100vw;
+}
 .ui\:max-w-\[200px\] {
   max-width: 200px;
 }
@@ -1302,10 +1311,18 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   --tw-translate-x: calc(var(--ui-spacing) * 1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
+.ui\:translate-x-\[--spacing\(132\)\] {
+  --tw-translate-x: calc(var(--ui-spacing) * 132);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
 .ui\:translate-x-\[-1\.5px\] {
   --tw-translate-x: -1.5px;
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
+.ui\:translate-x-\[0\] {
+  --tw-translate-x: 0;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
 .ui\:-translate-y-1\/2 {
   --tw-translate-y: calc(calc(1/2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1999,6 +2016,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:bg-background {
   background-color: var(--ui-color-slate-50);
 }
+.ui\:bg-black {
+  background-color: var(--ui-color-black);
+}
 .ui\:bg-blue-50 {
   background-color: var(--ui-color-blue-50);
 }
@@ -2791,6 +2811,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:opacity-\[0\.01\] {
   opacity: 0.01;
 }
+.ui\:opacity-\[0\.2\] {
+  opacity: 0.2;
+}
 .ui\:\!shadow-none {
   --tw-shadow: 0 0 #0000 !important;
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
@@ -2903,6 +2926,21 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
 }
+.ui\:transition-\[max-width\] {
+  transition-property: max-width;
+  transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+}
+.ui\:transition-\[opacity\,display\] {
+  transition-property: opacity,display;
+  transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+}
+.ui\:transition-\[translate\,opacity\,display\] {
+  transition-property: translate,opacity,display;
+  transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+}
 .ui\:transition-all {
   transition-property: all;
   transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
@@ -2923,6 +2961,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
 }
+.ui\:transition-discrete {
+  transition-behavior: allow-discrete;
+}
 .ui\:duration-75 {
   --tw-duration: 75ms;
   transition-duration: 75ms;
@@ -2947,6 +2988,10 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
   --tw-duration: 3000ms;
   transition-duration: 3000ms;
 }
+.ui\:duration-\[300ms\] {
+  --tw-duration: 300ms;
+  transition-duration: 300ms;
+}
 .ui\:ease-in {
   --tw-ease: var(--ui-ease-in);
   transition-timing-function: var(--ui-ease-in);
@@ -2962,6 +3007,13 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:will-change-transform {
   will-change: transform;
 }
+.ui\:contain-size {
+  --tw-contain-size: size;
+  contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,);
+}
+.ui\:contain-strict {
+  contain: strict;
+}
 .ui\:outline-none {
   --tw-outline-style: none;
   outline-style: none;
@@ -2991,6 +3043,9 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 .ui\:duration-3000 {
   animation-duration: 3000ms;
 }
+.ui\:duration-\[300ms\] {
+  animation-duration: 300ms;
+}
 .ui\:ease-in {
   animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -3967,6 +4022,11 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     margin-bottom: calc(var(--ui-spacing) * 0);
   }
 }
+.ui\:lg\:hidden {
+  @media (width >= 64rem) {
+    display: none;
+  }
+}
 .ui\:lg\:w-16 {
   @media (width >= 64rem) {
     width: calc(var(--ui-spacing) * 16);
@@ -3997,6 +4057,11 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     width: 100%;
   }
 }
+.ui\:lg\:max-w-\[calc\(100vw-\(--spacing\(132\)\)\)\] {
+  @media (width >= 64rem) {
+    max-width: calc(100vw - (calc(var(--ui-spacing) * 132)));
+  }
+}
 .ui\:lg\:flex-row {
   @media (width >= 64rem) {
     flex-direction: row;
@@ -4027,6 +4092,22 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
     width: 100%;
   }
 }
+.ui\:starting\:translate-x-\[calc\(100vw\)\] {
+  @starting-style {
+    --tw-translate-x: calc(100vw);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+}
+.ui\:starting\:opacity-0 {
+  @starting-style {
+    opacity: 0%;
+  }
+}
+.ui\:starting\:opacity-\[0\] {
+  @starting-style {
+    opacity: 0;
+  }
+}
 .ui\:\[\&_span\]\:font-bold {
   & span {
     --tw-font-weight: var(--ui-font-weight-bold);
@@ -4142,6 +4223,12 @@ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-se
 td, th {
   padding: 1px;
 }
+.ui\:contain-strict {
+  contain: strict;
+}
+.ui\:contain-size {
+  contain: size;
+}
 button:not(:disabled), [role="button"]:not(:disabled) {
   cursor: pointer;
 }
@@ -4395,6 +4482,22 @@ button:not(:disabled), [role="button"]:not(:disabled) {
   syntax: "*";
   inherits: false;
 }
+@property --tw-contain-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contain-layout {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contain-paint {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contain-style {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -4509,6 +4612,10 @@ button:not(:disabled), [role="button"]:not(:disabled) {
       --tw-outline-style: solid;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-contain-size: initial;
+      --tw-contain-layout: initial;
+      --tw-contain-paint: initial;
+      --tw-contain-style: initial;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/package.json

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