@luscii-healthtech/web-ui 23.0.0 → 23.1.1

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { SIZES } from "../../system/Sizes";
+import { ELEVATION } from "../../system/Elevation";
+type Size = keyof typeof SIZES;
+declare const spacingKeys: readonly ["p", "pt", "pr", "pb", "pl", "px", "py", "m", "mt", "mr", "mb", "ml", "mx", "my"];
+type SpacingProps = Partial<Record<(typeof spacingKeys)[number], Size>>;
+type ElevationProp = keyof typeof ELEVATION;
+type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & SpacingProps & {
+    /**
+     * Adds a box-shadow to the element based on the design system
+     */
+    elevation?: ElevationProp;
+    /**
+     * Make the item fill up horizontal space
+     */
+    width?: "full";
+};
+export declare const Box: <C extends React.ElementType<any> = "div">(props: Props<C>) => React.JSX.Element;
+export {};

package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -1,14 +1,28 @@
-export interface Crumb {
+/// <reference types="react" />
+import Text from "../Text/Text";
+type RenderBreadcrumb = (props: {
+    name: string;
+    link?: string;
+    textProps: React.ComponentProps<typeof Text>;
+}) => React.ReactNode;
+export type Crumb = {
+    render: RenderBreadcrumb;
+    key?: string;
+    name: never;
+    link: never;
+} | {
     name: string;
     key?: string;
     link?: string;
-}
+};
 export interface BreadcrumbProps {
     crumbs: Crumb[];
     truncateAfter?: number;
+    renderItem?: RenderBreadcrumb;
 }
 export type BreadcrumbDividerProps = {
     onClick: () => void;
     truncatedCrumbs: Crumb[];
 };
 export declare const isBreadcrumbDividerProps: (subject: unknown) => subject is BreadcrumbDividerProps;
+export {};

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

@@ -0,0 +1,62 @@
+import React, { ComponentProps } from "react";
+import { SIZES } from "../../system/Sizes";
+import { Box } from "../Box/Box";
+type Size = keyof typeof SIZES;
+type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
+    as?: C;
+    /**
+     * Size of gutter between items
+     */
+    gap?: Size;
+    /**
+     * Positioning of items along the Stack’s cross axis.
+     * The values are based on Tailwind's classnames and are therefore limited to the following:
+     */
+    align?: "start" | "end" | "center" | "baseline" | "stretch";
+    /**
+     * 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";
+    /**
+     * Positioning of items along the Stack’s x (horizontal) or y (vertical) axis
+     */
+    axis?: "x" | "y";
+    /**
+     * Reverse the order of the items
+     */
+    reverse?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+};
+export declare const Stack: <C extends React.ElementType<any> = "div">(props: React.PropsWithoutRef<React.ComponentProps<C>> & {
+    as?: C | undefined;
+    /**
+     * Size of gutter between items
+     */
+    gap?: "s" | "xl" | "xs" | "m" | "xxxs" | "xxs" | "l" | "xxl" | undefined;
+    /**
+     * Positioning of items along the Stack’s cross axis.
+     * The values are based on Tailwind's classnames and are therefore limited to the following:
+     */
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | undefined;
+    /**
+     * 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?: "center" | "start" | "end" | "between" | "normal" | "around" | "evenly" | undefined;
+    /**
+     * Positioning of items along the Stack’s x (horizontal) or y (vertical) axis
+     */
+    axis?: "x" | "y" | undefined;
+    /**
+     * Reverse the order of the items
+     */
+    reverse?: boolean | undefined;
+    children?: React.ReactNode;
+    className?: string | undefined;
+} & Omit<any, "ref"> & Partial<Record<"p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my", "s" | "xl" | "xs" | "m" | "xxxs" | "xxs" | "l" | "xxl">> & {
+    elevation?: "small" | "medium" | "large" | "base" | "drag" | "surface" | "extraLarge" | undefined;
+    width?: "full" | undefined;
+}) => React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -62,6 +62,8 @@ export { Steps } from "./components/Steps/Steps";
 export { default as Switcher } from "./components/Switcher/Switcher";
 export { default as Image } from "./components/Image/Image";
 export { MediaPicker, type TargetProps, } from "./components/MediaPicker/MediaPicker";
+export { Stack } from "./components/Stack/Stack";
+export { Box } from "./components/Box/Box";
 export { default as Tabbar, type TabbarProps, type TabItemDetails, } from "./components/Tabbar/Tabbar";
 export { Breadcrumbs, type BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader";

package/dist/index.development.js

@@ -22,6 +22,7 @@ var ReactSelect = require('react-select');
 var groupBy = require('lodash/groupBy');
 var debounce = require('lodash.debounce');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
+var omit = require('lodash.omit');
 var ReactQuill = require('react-quill');
 require('react-quill/dist/quill.snow.css');
 var react = require('@headlessui/react');
@@ -61,6 +62,7 @@ var ClipboardJS__default = /*#__PURE__*/_interopDefault(ClipboardJS);
 var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
+var omit__default = /*#__PURE__*/_interopDefault(omit);
 var ReactQuill__default = /*#__PURE__*/_interopDefault(ReactQuill);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 
@@ -4123,12 +4125,40 @@ const isBreadcrumbDividerProps = (subject) => {
   return typeof possibleSubject.onClick === "function" && Array.isArray(possibleSubject.truncatedCrumbs);
 };
 
-const BreadcrumbItem = ({ name, link }) => {
-  return React__namespace.default.createElement("li", { className: "ui-flex ui-flex-row ui-items-center ui-slash-split" }, link ? React__namespace.default.createElement(
-    router.Link,
-    { to: link },
-    React__namespace.default.createElement(Text, { text: name, color: "blue-800", className: "ui-whitespace-no-wrap ui-max-w-xs ui-truncate" })
-  ) : React__namespace.default.createElement(Text, { text: name, type: "strong", className: "ui-whitespace-no-wrap ui-w-full ui-max-w-xs ui-truncate" }));
+const BreadcrumbItem = (props) => {
+  return React__namespace.default.createElement(
+    "li",
+    { className: "ui-flex ui-flex-row ui-items-center ui-slash-split" },
+    React__namespace.default.createElement(BreadcrumbContent, Object.assign({}, props))
+  );
+};
+const linkTextProps = {
+  variant: "base",
+  color: "blue-800",
+  className: "ui-whitespace-no-wrap ui-max-w-xs ui-truncate"
+};
+const defaultTextProps = {
+  variant: "strong",
+  color: "base",
+  className: "ui-whitespace-no-wrap ui-w-full ui-max-w-xs ui-truncate"
+};
+const BreadcrumbContent = (_a) => {
+  var { name, link } = _a, props = __rest(_a, ["name", "link"]);
+  if ("render" in props && !!props.render) {
+    return React__namespace.default.createElement(React__namespace.default.Fragment, null, props.render({
+      name,
+      link,
+      textProps: link ? linkTextProps : defaultTextProps
+    }));
+  }
+  if (link) {
+    return React__namespace.default.createElement(
+      router.Link,
+      { to: link },
+      React__namespace.default.createElement(Text, Object.assign({}, linkTextProps), name)
+    );
+  }
+  return React__namespace.default.createElement(Text, Object.assign({}, defaultTextProps), name);
 };
 const BreadcrumbDividerItem = ({ onClick, truncatedCrumbs }) => {
   return React__namespace.default.createElement(
@@ -4137,12 +4167,12 @@ const BreadcrumbDividerItem = ({ onClick, truncatedCrumbs }) => {
     React__namespace.default.createElement(
       "button",
       { onClick, title: truncatedCrumbs.map((crumb) => crumb.name).join(" / "), className: "ui-px-1" },
-      React__namespace.default.createElement(Text, { text: "\u2026", color: "blue-800", type: "strong" })
+      React__namespace.default.createElement(Text, { color: "blue-800", type: "strong" }, "\u2026")
     )
   );
 };
 
-const Breadcrumbs = ({ crumbs, truncateAfter = Infinity }) => {
+const Breadcrumbs = ({ crumbs, truncateAfter = Infinity, renderItem }) => {
   const [head, ...tail] = crumbs;
   const [isTruncated, setIsTruncated] = React.useState(tail.length > truncateAfter);
   const truncatedCrumbs = [];
@@ -4163,7 +4193,7 @@ const Breadcrumbs = ({ crumbs, truncateAfter = Infinity }) => {
     dividerProps,
     ...tail
   ];
-  return React__namespace.default.createElement("ul", { "data-test-id": "breadcrumbs", className: "ui-flex ui-flex-row ui-flex-wrap ui-items-center" }, (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? React__namespace.default.createElement(BreadcrumbDividerItem, Object.assign({ key: `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}` }, crumbOrDividerProps)) : React__namespace.default.createElement(BreadcrumbItem, Object.assign({ key: crumbOrDividerProps.key || crumbOrDividerProps.name }, crumbOrDividerProps))));
+  return React__namespace.default.createElement("ul", { "data-test-id": "breadcrumbs", className: "ui-flex ui-flex-row ui-flex-wrap ui-items-center" }, (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? React__namespace.default.createElement(BreadcrumbDividerItem, Object.assign({ key: `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}` }, crumbOrDividerProps)) : React__namespace.default.createElement(BreadcrumbItem, Object.assign({ key: crumbOrDividerProps.key || crumbOrDividerProps.name }, crumbOrDividerProps, { render: renderItem }))));
 };
 
 const TabbarItem = ({ title, index, isSelected, onSelect, className, badgeCount = 0, isLoading = false, dataTestId = "" }) => {
@@ -4988,6 +5018,47 @@ const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   return React__namespace.default.createElement(ImagePickerInner, Object.assign({}, mappedProps, { innerRef: ref }));
 });
 
+const spacingKeys = [
+  "p",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "px",
+  "py",
+  "m",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "mx",
+  "my"
+];
+const createSpacingClassNames = (keys, spacingProps) => {
+  return keys.filter((key) => spacingProps[key]).map((key) => `ui-${key}-${spacingProps[key]}`).join(" ");
+};
+const Box = (props) => {
+  const { as: Element = "div", className, elevation, width } = props, attributes = __rest(props, ["as", "className", "elevation", "width"]);
+  const spacingClasses = createSpacingClassNames(spacingKeys, props);
+  const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
+  return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
+    [`ui-shadow-${elevation}`]: elevation,
+    "ui-w-full": width === "full"
+  }, className) }, attributesWithoutSpacingKeys));
+};
+
+const Stack = (props) => {
+  const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse"]);
+  const stackClasses = classNames__default.default(`ui-flex`, {
+    "ui-flex-row": axis === "x",
+    "ui-flex-col": axis === "y",
+    "ui-flex-row-reverse": axis === "x" && reverse,
+    "ui-flex-col-reverse": axis === "y" && reverse,
+    [`ui-gap-${gap}`]: gap
+  }, `ui-items-${align} ui-justify-${justify}`);
+  return React__namespace.default.createElement(Box, Object.assign({ className: classNames__default.default(stackClasses, className) }, attributes), children);
+};
+
 const TagGroup = ({ children, tags, tagSize = "base", className }) => React__namespace.default.createElement(
   "div",
   { className: classNames__default.default("ui-flex ui-flex-row ui-flex-wrap ui-gap-2", className) },
@@ -5781,6 +5852,7 @@ exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.BellIcon = BellIcon;
 exports.BluetoothIcon = BluetoothIcon;
+exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
 exports.BrushIcon = BrushIcon;
 exports.CRUDPage = CRUDPage;
@@ -5919,6 +5991,7 @@ exports.SmallDiamondIcon = SmallDiamondIcon;
 exports.SmallSquareIcon = SmallSquareIcon;
 exports.SpaceRocketIcon = RocketIcon;
 exports.Spinner = Spinner;
+exports.Stack = Stack;
 exports.StarIcon = StarIcon;
 exports.StatusColoredIcon = StatusColoredIcon;
 exports.StatusIndicator = StatusIndicator;