@bwp-web/components 1.10.1 → 1.11.0

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './BiampBanner';
 export * from './BiampSegmentedButton';
 export * from './BiampGlobalSearch';
 export * from './OrganizationSelector';
+export * from './LandingPage';
 export * from './UserInitialsIcon';
 export * from './DynamicSvgIcon';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -154,8 +154,8 @@ var require_randomColor = __commonJS({
             return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
           case "hsla":
             var hslColor = HSVtoHSL(hsv);
-            var alpha6 = options.alpha || Math.random();
-            return "hsla(" + hslColor[0] + ", " + hslColor[1] + "%, " + hslColor[2] + "%, " + alpha6 + ")";
+            var alpha7 = options.alpha || Math.random();
+            return "hsla(" + hslColor[0] + ", " + hslColor[1] + "%, " + hslColor[2] + "%, " + alpha7 + ")";
           case "rgbArray":
             return HSVtoRGB(hsv);
           case "rgb":
@@ -163,8 +163,8 @@ var require_randomColor = __commonJS({
             return "rgb(" + rgb.join(", ") + ")";
           case "rgba":
             var rgbColor = HSVtoRGB(hsv);
-            var alpha6 = options.alpha || Math.random();
-            return "rgba(" + rgbColor.join(", ") + ", " + alpha6 + ")";
+            var alpha7 = options.alpha || Math.random();
+            return "rgba(" + rgbColor.join(", ") + ", " + alpha7 + ")";
           default:
             return HSVtoHex(hsv);
         }
@@ -2077,7 +2077,7 @@ function BiampTableTruncatedCell({
   );
 }
 
-// src/BiampTable/slotProps.ts
+// src/slotProps.ts
 function resolveSlot(slot, ctx) {
   if (!slot) return void 0;
   return typeof slot === "function" ? slot(ctx) : slot;
@@ -2085,6 +2085,12 @@ function resolveSlot(slot, ctx) {
 function mergeSx(...inputs) {
   return inputs.filter((v) => Boolean(v)).flatMap((v) => Array.isArray(v) ? v : [v]);
 }
+function mergeSlotProps(ownProps, userProps) {
+  return typeof userProps === "function" ? (ownerState) => ({
+    ...ownProps,
+    ...userProps(ownerState)
+  }) : { ...ownProps, ...userProps };
+}
 
 // src/BiampTable/cellSx.ts
 var stickyHoverBg = {
@@ -3930,11 +3936,447 @@ function OrganizationSelectorPopover({
   );
 }
 
+// src/LandingPage/LandingFormPanel.tsx
+import {
+  Checkbox as Checkbox4,
+  FormControlLabel,
+  Stack as Stack10,
+  TextField as TextField3,
+  Typography as Typography9
+} from "@mui/material";
+import { useId as useId2 } from "react";
+import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
+function LandingFormPanel({
+  children,
+  onSubmit,
+  width = 441,
+  noValidate = true,
+  sx,
+  ...stackProps
+}) {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsx31(
+    Stack10,
+    {
+      component: "form",
+      onSubmit: handleSubmit,
+      noValidate,
+      gap: 2,
+      p: 1.5,
+      borderRadius: 4,
+      width,
+      maxWidth: "100%",
+      sx: mergeSx(
+        {
+          // Figma's `background_default` (#F5F5F5) is `grey[100]` here, not
+          // `palette.background.default` — that token is #FFFFFF in light mode.
+          backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100]
+        },
+        sx
+      ),
+      ...stackProps,
+      children
+    }
+  );
+}
+var fieldSx = {
+  "& .MuiOutlinedInput-root": {
+    backgroundColor: "background.paper"
+  },
+  // `Mui-disabled` is deliberately not excluded: the theme has no disabled
+  // outline colour, so dropping it here would fall back to MUI's faint default.
+  "& .MuiOutlinedInput-root:not(.Mui-error):not(.Mui-focused) .MuiOutlinedInput-notchedOutline": {
+    borderColor: ({ palette }) => palette.dividers.secondary
+  }
+};
+function LandingFormField({
+  label,
+  id,
+  slotProps,
+  sx,
+  ...textFieldProps
+}) {
+  const {
+    container: containerSlotProps,
+    label: labelSlotProps,
+    ...fieldSlotProps
+  } = slotProps ?? {};
+  const generatedId = useId2();
+  const fieldId = id ?? generatedId;
+  const labelId = labelSlotProps?.id ?? `${fieldId}-label`;
+  return /* @__PURE__ */ jsxs14(Stack10, { gap: 0.5, width: "100%", ...containerSlotProps, children: [
+    /* @__PURE__ */ jsx31(
+      Typography9,
+      {
+        component: "label",
+        id: labelId,
+        htmlFor: fieldId,
+        fontSize: 12,
+        fontWeight: 600,
+        color: "text.primary",
+        ...labelSlotProps,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx31(
+      TextField3,
+      {
+        id: fieldId,
+        fullWidth: true,
+        variant: "outlined",
+        slotProps: {
+          ...fieldSlotProps,
+          // `select` renders a `div[role="combobox"]`, which `<label for>`
+          // cannot name — and MUI points its `aria-labelledby` at the div
+          // itself, so the name would come out as the selected value. Naming
+          // the label explicitly is what MUI's own floating label does.
+          // Inert on a text field: `slotProps.select` only reaches a `Select`.
+          select: mergeSlotProps({ labelId }, fieldSlotProps.select)
+        },
+        sx: mergeSx(fieldSx, sx),
+        ...textFieldProps
+      }
+    )
+  ] });
+}
+function LandingFormActions(props) {
+  return /* @__PURE__ */ jsx31(Stack10, { direction: "row", gap: 1, width: "100%", ...props });
+}
+function LandingFormCheckbox({
+  label,
+  slotProps,
+  sx,
+  ...formControlLabelProps
+}) {
+  const { checkbox, ...labelSlotProps } = slotProps ?? {};
+  return /* @__PURE__ */ jsx31(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ jsx31(
+        Checkbox4,
+        {
+          ...checkbox,
+          sx: mergeSx({ p: 0 }, checkbox?.sx)
+        }
+      ),
+      label,
+      slotProps: {
+        ...labelSlotProps,
+        typography: mergeSlotProps(
+          { variant: "body2" },
+          labelSlotProps.typography
+        )
+      },
+      ...formControlLabelProps,
+      sx: mergeSx({ m: 0, gap: 1, alignItems: "center" }, sx)
+    }
+  );
+}
+
+// src/LandingPage/OrganizationsPanel.tsx
+import {
+  alpha as alpha6,
+  Box as Box17,
+  Divider as Divider5,
+  InputAdornment as InputAdornment3,
+  ListItemButton as ListItemButton4,
+  Stack as Stack11,
+  TextField as TextField4,
+  Typography as Typography10
+} from "@mui/material";
+import {
+  Children as Children3,
+  cloneElement as cloneElement2,
+  Fragment as Fragment9,
+  isValidElement as isValidElement2
+} from "react";
+import { ChevronRightIcon as ChevronRightIcon3, SearchIcon as SearchIcon3 } from "@bwp-web/assets";
+import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+function OrganizationRow({
+  primaryText,
+  secondaryText,
+  logo,
+  logoBackground = true,
+  disabled = false,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs15(
+    ListItemButton4,
+    {
+      disabled,
+      disableRipple: true,
+      sx: mergeSx(
+        {
+          p: 1.5,
+          gap: 2,
+          backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100],
+          // Disabled rows keep full opacity; only the logo dims (below).
+          "&.Mui-disabled": { opacity: 1 },
+          ...!disabled && {
+            "&:hover": { backgroundColor: "action.hover" }
+          }
+        },
+        sx
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx32(
+          Box17,
+          {
+            sx: {
+              width: 40,
+              height: 40,
+              borderRadius: "6px",
+              overflow: "hidden",
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              opacity: disabled ? 0.5 : 1,
+              backgroundColor: ({ palette }) => logoBackground ? palette.mode === "dark" ? palette.grey[800] : palette.grey[200] : "transparent"
+            },
+            children: typeof logo === "string" ? /* @__PURE__ */ jsx32(
+              Box17,
+              {
+                component: "img",
+                src: logo,
+                alt: "",
+                sx: { width: "100%", height: "100%", objectFit: "cover" }
+              }
+            ) : logo
+          }
+        ),
+        /* @__PURE__ */ jsxs15(Stack11, { sx: { minWidth: 0, flex: 1, textAlign: "left" }, children: [
+          /* @__PURE__ */ jsx32(
+            Typography10,
+            {
+              noWrap: true,
+              variant: "body2",
+              fontWeight: 600,
+              color: disabled ? "text.secondary" : "text.primary",
+              children: primaryText
+            }
+          ),
+          secondaryText && /* @__PURE__ */ jsx32(Typography10, { noWrap: true, variant: "caption", color: "text.secondary", children: secondaryText })
+        ] }),
+        !disabled && /* @__PURE__ */ jsx32(
+          ChevronRightIcon3,
+          {
+            variant: "xs",
+            sx: {
+              width: 16,
+              height: 16,
+              flexShrink: 0,
+              color: "text.primary"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var outlineSx = {
+  border: 0.6,
+  borderColor: ({ palette }) => palette.dividers.secondary,
+  borderRadius: "6px",
+  boxShadow: ({ palette }) => `0px 1px 1px 0px ${alpha6(palette.common.black, 0.05)}`
+};
+function OrganizationRowGroup({
+  children,
+  maxHeight,
+  sx,
+  ...boxProps
+}) {
+  const items = Children3.toArray(children).filter(isValidElement2);
+  return /* @__PURE__ */ jsx32(
+    Box17,
+    {
+      sx: mergeSx(
+        {
+          width: "100%",
+          ...outlineSx,
+          backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100],
+          overflow: "hidden",
+          ...maxHeight !== void 0 && { overflowY: "auto", maxHeight }
+        },
+        sx
+      ),
+      ...boxProps,
+      children: items.map((item, i) => /* @__PURE__ */ jsxs15(Fragment9, { children: [
+        item,
+        i !== items.length - 1 && /* @__PURE__ */ jsx32(Divider5, {})
+      ] }, item.key ?? i))
+    }
+  );
+}
+function TextDivider({ children, sx, ...props }) {
+  return /* @__PURE__ */ jsx32(
+    Divider5,
+    {
+      sx: mergeSx(
+        {
+          width: "100%",
+          userSelect: "none",
+          color: "text.primary",
+          fontWeight: 600,
+          fontSize: 14
+        },
+        sx
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function OrganizationsEmptyState({
+  icon = /* @__PURE__ */ jsx32(SearchIcon3, {}),
+  title = "No results found",
+  description,
+  ...stackProps
+}) {
+  return /* @__PURE__ */ jsxs15(
+    Stack11,
+    {
+      role: "status",
+      alignItems: "center",
+      gap: 0.5,
+      width: "100%",
+      py: 2,
+      px: 2,
+      ...stackProps,
+      children: [
+        cloneElement2(icon, {
+          "aria-hidden": true,
+          sx: {
+            width: 24,
+            height: 24,
+            mb: 0.5,
+            color: "text.secondary",
+            ...icon.props.sx
+          }
+        }),
+        /* @__PURE__ */ jsx32(
+          Typography10,
+          {
+            variant: "body2",
+            fontWeight: 600,
+            color: "text.primary",
+            textAlign: "center",
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx32(Typography10, { variant: "caption", color: "text.secondary", textAlign: "center", children: description })
+      ]
+    }
+  );
+}
+var DEFAULT_MAX_LIST_HEIGHT = 3 * 64 + 2;
+function OrganizationsPanel({
+  search,
+  personalOrgItem,
+  organizationsLabel,
+  organizationItems,
+  orLabel,
+  empty = false,
+  joinAction,
+  createAction,
+  width = 441,
+  maxListHeight = DEFAULT_MAX_LIST_HEIGHT,
+  slotProps,
+  sx,
+  ...stackProps
+}) {
+  const {
+    sx: searchSx,
+    slotProps: searchFieldSlotProps,
+    ...searchSlotProps
+  } = slotProps?.search ?? {};
+  return /* @__PURE__ */ jsxs15(
+    Stack11,
+    {
+      gap: 2,
+      alignItems: "center",
+      justifyContent: "center",
+      p: 1.5,
+      borderRadius: 4,
+      width,
+      maxWidth: "100%",
+      sx: mergeSx(
+        {
+          // Figma's `background_default` (#F5F5F5) is `grey[100]` here, not
+          // `palette.background.default` — that token is #FFFFFF in light mode.
+          backgroundColor: ({ palette }) => palette.mode === "dark" ? palette.grey[700] : palette.grey[100]
+        },
+        sx
+      ),
+      ...stackProps,
+      children: [
+        search && /* @__PURE__ */ jsx32(
+          TextField4,
+          {
+            variant: "outlined",
+            placeholder: search.placeholder,
+            value: search.value,
+            onChange: search.onChange,
+            fullWidth: true,
+            sx: mergeSx(
+              {
+                "& .MuiOutlinedInput-root": {
+                  backgroundColor: "background.paper"
+                },
+                "& .MuiOutlinedInput-notchedOutline": {
+                  borderColor: ({ palette }) => palette.dividers.secondary
+                }
+              },
+              searchSx
+            ),
+            slotProps: {
+              ...searchFieldSlotProps,
+              input: mergeSlotProps(
+                {
+                  startAdornment: /* @__PURE__ */ jsx32(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx32(SearchIcon3, { sx: { ml: 1 } }) })
+                },
+                searchFieldSlotProps?.input
+              ),
+              htmlInput: mergeSlotProps(
+                { "aria-label": search.placeholder },
+                searchFieldSlotProps?.htmlInput
+              )
+            },
+            ...searchSlotProps
+          }
+        ),
+        personalOrgItem && /* @__PURE__ */ jsx32(OrganizationRowGroup, { ...slotProps?.personalOrgGroup, children: personalOrgItem }),
+        organizationItems && /* @__PURE__ */ jsxs15(Fragment10, { children: [
+          organizationsLabel && /* @__PURE__ */ jsx32(TextDivider, { ...slotProps?.organizationsLabel, children: organizationsLabel }),
+          /* @__PURE__ */ jsx32(
+            OrganizationRowGroup,
+            {
+              maxHeight: maxListHeight,
+              ...slotProps?.organizationsGroup,
+              children: organizationItems
+            }
+          )
+        ] }),
+        empty ? empty === true ? /* @__PURE__ */ jsx32(OrganizationsEmptyState, {}) : empty : orLabel && /* @__PURE__ */ jsx32(TextDivider, { ...slotProps?.orLabel, children: orLabel }),
+        (joinAction || createAction) && /* @__PURE__ */ jsxs15(Stack11, { gap: 1, width: "100%", ...slotProps?.actions, children: [
+          joinAction && /* @__PURE__ */ jsx32(OrganizationRowGroup, { ...slotProps?.joinGroup, children: joinAction }),
+          createAction && /* @__PURE__ */ jsx32(OrganizationRowGroup, { ...slotProps?.createGroup, children: createAction })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/UserInitialsIcon/UserInitialsIcon.tsx
 var import_randomcolor = __toESM(require_randomColor(), 1);
-import { Box as Box17, Typography as Typography9 } from "@mui/material";
+import { Box as Box18, Typography as Typography11 } from "@mui/material";
 import { darken } from "@mui/material/styles";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var DEFAULT_SIZE = 40;
 var DEFAULT_BORDER_RADIUS = 1.5;
 var TEXT_RATIO = 0.4;
@@ -3952,8 +4394,8 @@ function UserInitialsIcon({
   const textColor = darken((0, import_randomcolor.default)({ luminosity: "dark", seed: id }), 0.3);
   const size = typeof width === "number" ? width : DEFAULT_SIZE;
   const fontSize = size * TEXT_RATIO;
-  return /* @__PURE__ */ jsx31(
-    Box17,
+  return /* @__PURE__ */ jsx33(
+    Box18,
     {
       minWidth: width,
       width,
@@ -3966,8 +4408,8 @@ function UserInitialsIcon({
       justifyContent: "center",
       sx: { ...sx },
       ...props,
-      children: /* @__PURE__ */ jsx31(
-        Typography9,
+      children: /* @__PURE__ */ jsx33(
+        Typography11,
         {
           variant: "h3",
           color: textColor,
@@ -3989,9 +4431,9 @@ var getInitials = (name) => {
 };
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
-import { SvgIcon, Skeleton, Box as Box18 } from "@mui/material";
+import { SvgIcon, Skeleton, Box as Box19 } from "@mui/material";
 import { useEffect as useEffect6, useState as useState9 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var svgCache = /* @__PURE__ */ new Map();
 function clearDynamicSvgIconCache() {
   svgCache.clear();
@@ -4093,7 +4535,7 @@ function DynamicSvgIcon({
     onError
   });
   if (loading) {
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx34(
       Skeleton,
       {
         variant: skeletonVariant,
@@ -4103,8 +4545,8 @@ function DynamicSvgIcon({
     );
   }
   if (error || !svgContent) {
-    return /* @__PURE__ */ jsx32(
-      Box18,
+    return /* @__PURE__ */ jsx34(
+      Box19,
       {
         sx: {
           width,
@@ -4123,7 +4565,7 @@ function DynamicSvgIcon({
       }
     );
   }
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     SvgIcon,
     {
       ...svgIconProps,
@@ -4133,7 +4575,7 @@ function DynamicSvgIcon({
         width,
         height
       },
-      children: /* @__PURE__ */ jsx32("g", { dangerouslySetInnerHTML: { __html: svgContent } })
+      children: /* @__PURE__ */ jsx34("g", { dangerouslySetInnerHTML: { __html: svgContent } })
     }
   );
 }
@@ -4190,11 +4632,19 @@ export {
   BiampTableTruncatedCell,
   BiampWrapper,
   DynamicSvgIcon,
+  LandingFormActions,
+  LandingFormCheckbox,
+  LandingFormField,
+  LandingFormPanel,
   OrganizationItem,
   OrganizationItemList,
+  OrganizationRow,
+  OrganizationRowGroup,
   OrganizationSelector,
   OrganizationSelectorButton,
   OrganizationSelectorPopover,
+  OrganizationsEmptyState,
+  OrganizationsPanel,
   SegmentedButton,
   SegmentedButtonGroup,
   UserInitialsIcon,