@bwp-web/components 1.10.1 → 1.11.0

package/dist/index.cjs

@@ -160,8 +160,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":
@@ -169,8 +169,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);
         }
@@ -452,11 +452,19 @@ __export(index_exports, {
   BiampTableTruncatedCell: () => BiampTableTruncatedCell,
   BiampWrapper: () => BiampWrapper,
   DynamicSvgIcon: () => DynamicSvgIcon,
+  LandingFormActions: () => LandingFormActions,
+  LandingFormCheckbox: () => LandingFormCheckbox,
+  LandingFormField: () => LandingFormField,
+  LandingFormPanel: () => LandingFormPanel,
   OrganizationItem: () => OrganizationItem,
   OrganizationItemList: () => OrganizationItemList,
+  OrganizationRow: () => OrganizationRow,
+  OrganizationRowGroup: () => OrganizationRowGroup,
   OrganizationSelector: () => OrganizationSelector,
   OrganizationSelectorButton: () => OrganizationSelectorButton,
   OrganizationSelectorPopover: () => OrganizationSelectorPopover,
+  OrganizationsEmptyState: () => OrganizationsEmptyState,
+  OrganizationsPanel: () => OrganizationsPanel,
   SegmentedButton: () => SegmentedButton,
   SegmentedButtonGroup: () => SegmentedButtonGroup,
   UserInitialsIcon: () => UserInitialsIcon,
@@ -2105,7 +2113,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;
@@ -2113,6 +2121,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 = {
@@ -3909,11 +3923,427 @@ function OrganizationSelectorPopover({
   );
 }
 
-// src/UserInitialsIcon/UserInitialsIcon.tsx
+// src/LandingPage/LandingFormPanel.tsx
 var import_material27 = require("@mui/material");
+var import_react17 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function LandingFormPanel({
+  children,
+  onSubmit,
+  width = 441,
+  noValidate = true,
+  sx,
+  ...stackProps
+}) {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_material27.Stack,
+    {
+      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 = (0, import_react17.useId)();
+  const fieldId = id ?? generatedId;
+  const labelId = labelSlotProps?.id ?? `${fieldId}-label`;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_material27.Stack, { gap: 0.5, width: "100%", ...containerSlotProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_material27.Typography,
+      {
+        component: "label",
+        id: labelId,
+        htmlFor: fieldId,
+        fontSize: 12,
+        fontWeight: 600,
+        color: "text.primary",
+        ...labelSlotProps,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      import_material27.TextField,
+      {
+        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__ */ (0, import_jsx_runtime31.jsx)(import_material27.Stack, { direction: "row", gap: 1, width: "100%", ...props });
+}
+function LandingFormCheckbox({
+  label,
+  slotProps,
+  sx,
+  ...formControlLabelProps
+}) {
+  const { checkbox, ...labelSlotProps } = slotProps ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_material27.FormControlLabel,
+    {
+      control: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_material27.Checkbox,
+        {
+          ...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
+var import_material28 = require("@mui/material");
+var import_react18 = require("react");
+var import_assets15 = require("@bwp-web/assets");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function OrganizationRow({
+  primaryText,
+  secondaryText,
+  logo,
+  logoBackground = true,
+  disabled = false,
+  sx,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    import_material28.ListItemButton,
+    {
+      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__ */ (0, import_jsx_runtime32.jsx)(
+          import_material28.Box,
+          {
+            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__ */ (0, import_jsx_runtime32.jsx)(
+              import_material28.Box,
+              {
+                component: "img",
+                src: logo,
+                alt: "",
+                sx: { width: "100%", height: "100%", objectFit: "cover" }
+              }
+            ) : logo
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_material28.Stack, { sx: { minWidth: 0, flex: 1, textAlign: "left" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_material28.Typography,
+            {
+              noWrap: true,
+              variant: "body2",
+              fontWeight: 600,
+              color: disabled ? "text.secondary" : "text.primary",
+              children: primaryText
+            }
+          ),
+          secondaryText && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material28.Typography, { noWrap: true, variant: "caption", color: "text.secondary", children: secondaryText })
+        ] }),
+        !disabled && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          import_assets15.ChevronRightIcon,
+          {
+            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 ${(0, import_material28.alpha)(palette.common.black, 0.05)}`
+};
+function OrganizationRowGroup({
+  children,
+  maxHeight,
+  sx,
+  ...boxProps
+}) {
+  const items = import_react18.Children.toArray(children).filter(import_react18.isValidElement);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_material28.Box,
+    {
+      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__ */ (0, import_jsx_runtime32.jsxs)(import_react18.Fragment, { children: [
+        item,
+        i !== items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material28.Divider, {})
+      ] }, item.key ?? i))
+    }
+  );
+}
+function TextDivider({ children, sx, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_material28.Divider,
+    {
+      sx: mergeSx(
+        {
+          width: "100%",
+          userSelect: "none",
+          color: "text.primary",
+          fontWeight: 600,
+          fontSize: 14
+        },
+        sx
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function OrganizationsEmptyState({
+  icon = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_assets15.SearchIcon, {}),
+  title = "No results found",
+  description,
+  ...stackProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    import_material28.Stack,
+    {
+      role: "status",
+      alignItems: "center",
+      gap: 0.5,
+      width: "100%",
+      py: 2,
+      px: 2,
+      ...stackProps,
+      children: [
+        (0, import_react18.cloneElement)(icon, {
+          "aria-hidden": true,
+          sx: {
+            width: 24,
+            height: 24,
+            mb: 0.5,
+            color: "text.secondary",
+            ...icon.props.sx
+          }
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          import_material28.Typography,
+          {
+            variant: "body2",
+            fontWeight: 600,
+            color: "text.primary",
+            textAlign: "center",
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_material28.Typography, { 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__ */ (0, import_jsx_runtime32.jsxs)(
+    import_material28.Stack,
+    {
+      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__ */ (0, import_jsx_runtime32.jsx)(
+          import_material28.TextField,
+          {
+            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__ */ (0, import_jsx_runtime32.jsx)(import_material28.InputAdornment, { position: "start", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_assets15.SearchIcon, { sx: { ml: 1 } }) })
+                },
+                searchFieldSlotProps?.input
+              ),
+              htmlInput: mergeSlotProps(
+                { "aria-label": search.placeholder },
+                searchFieldSlotProps?.htmlInput
+              )
+            },
+            ...searchSlotProps
+          }
+        ),
+        personalOrgItem && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationRowGroup, { ...slotProps?.personalOrgGroup, children: personalOrgItem }),
+        organizationItems && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          organizationsLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextDivider, { ...slotProps?.organizationsLabel, children: organizationsLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            OrganizationRowGroup,
+            {
+              maxHeight: maxListHeight,
+              ...slotProps?.organizationsGroup,
+              children: organizationItems
+            }
+          )
+        ] }),
+        empty ? empty === true ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationsEmptyState, {}) : empty : orLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TextDivider, { ...slotProps?.orLabel, children: orLabel }),
+        (joinAction || createAction) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_material28.Stack, { gap: 1, width: "100%", ...slotProps?.actions, children: [
+          joinAction && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationRowGroup, { ...slotProps?.joinGroup, children: joinAction }),
+          createAction && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(OrganizationRowGroup, { ...slotProps?.createGroup, children: createAction })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/UserInitialsIcon/UserInitialsIcon.tsx
+var import_material29 = require("@mui/material");
 var import_styles2 = require("@mui/material/styles");
 var import_randomcolor = __toESM(require_randomColor(), 1);
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var DEFAULT_SIZE = 40;
 var DEFAULT_BORDER_RADIUS = 1.5;
 var TEXT_RATIO = 0.4;
@@ -3931,8 +4361,8 @@ function UserInitialsIcon({
   const textColor = (0, import_styles2.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__ */ (0, import_jsx_runtime31.jsx)(
-    import_material27.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_material29.Box,
     {
       minWidth: width,
       width,
@@ -3945,8 +4375,8 @@ function UserInitialsIcon({
       justifyContent: "center",
       sx: { ...sx },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-        import_material27.Typography,
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        import_material29.Typography,
         {
           variant: "h3",
           color: textColor,
@@ -3968,9 +4398,9 @@ var getInitials = (name) => {
 };
 
 // src/DynamicSvgIcon/DynamicSvgIcon.tsx
-var import_material28 = require("@mui/material");
-var import_react17 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_material30 = require("@mui/material");
+var import_react19 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var svgCache = /* @__PURE__ */ new Map();
 function clearDynamicSvgIconCache() {
   svgCache.clear();
@@ -3981,17 +4411,17 @@ function applyCurrentColor(svg) {
 function useDynamicSvgIcon(url, options = {}) {
   const { replaceColors = false, onLoad, onError } = options;
   const transform = replaceColors ? applyCurrentColor : (s) => s;
-  const [svgContent, setSvgContent] = (0, import_react17.useState)(() => {
+  const [svgContent, setSvgContent] = (0, import_react19.useState)(() => {
     const cached = svgCache.get(url);
     return cached ? transform(cached.innerContent) : null;
   });
-  const [svgViewBox, setSvgViewBox] = (0, import_react17.useState)(() => {
+  const [svgViewBox, setSvgViewBox] = (0, import_react19.useState)(() => {
     const cached = svgCache.get(url);
     return cached?.viewBox ?? null;
   });
-  const [loading, setLoading] = (0, import_react17.useState)(() => !svgCache.has(url));
-  const [error, setError] = (0, import_react17.useState)(null);
-  (0, import_react17.useEffect)(() => {
+  const [loading, setLoading] = (0, import_react19.useState)(() => !svgCache.has(url));
+  const [error, setError] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     if (!url) {
       setLoading(false);
       setError("No URL provided");
@@ -4072,8 +4502,8 @@ function DynamicSvgIcon({
     onError
   });
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      import_material28.Skeleton,
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_material30.Skeleton,
       {
         variant: skeletonVariant,
         animation: skeletonAnimation,
@@ -4082,8 +4512,8 @@ function DynamicSvgIcon({
     );
   }
   if (error || !svgContent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      import_material28.Box,
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_material30.Box,
       {
         sx: {
           width,
@@ -4102,8 +4532,8 @@ function DynamicSvgIcon({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_material28.SvgIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_material30.SvgIcon,
     {
       ...svgIconProps,
       ...svgViewBox && { viewBox: svgViewBox },
@@ -4112,7 +4542,7 @@ function DynamicSvgIcon({
         width,
         height
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { dangerouslySetInnerHTML: { __html: svgContent } })
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("g", { dangerouslySetInnerHTML: { __html: svgContent } })
     }
   );
 }
@@ -4170,11 +4600,19 @@ function DynamicSvgIcon({
   BiampTableTruncatedCell,
   BiampWrapper,
   DynamicSvgIcon,
+  LandingFormActions,
+  LandingFormCheckbox,
+  LandingFormField,
+  LandingFormPanel,
   OrganizationItem,
   OrganizationItemList,
+  OrganizationRow,
+  OrganizationRowGroup,
   OrganizationSelector,
   OrganizationSelectorButton,
   OrganizationSelectorPopover,
+  OrganizationsEmptyState,
+  OrganizationsPanel,
   SegmentedButton,
   SegmentedButtonGroup,
   UserInitialsIcon,