@scripso-homepad/ui 0.3.9 → 0.4.0

package/dist/web/index.cjs

@@ -0,0 +1,1211 @@
+'use strict';
+
+var lucideReact = require('lucide-react');
+var react = require('react');
+var reactNative = require('react-native');
+var Svg = require('react-native-svg');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactRouterDom = require('react-router-dom');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Svg__default = /*#__PURE__*/_interopDefault(Svg);
+
+// src/web/layout/AppHeader.tsx
+
+// src/icons/eyeIconPaths.ts
+var EYE_OPEN_OUTLINE_PATH = "M1.71835 10.2898C1.6489 10.1027 1.6489 9.89691 1.71835 9.70981C2.39476 8.06969 3.54294 6.66735 5.01732 5.68056C6.4917 4.69378 8.22588 4.16699 10 4.16699C11.7741 4.16699 13.5083 4.69378 14.9827 5.68056C16.4571 6.66735 17.6053 8.06969 18.2817 9.70981C18.3511 9.89691 18.3511 10.1027 18.2817 10.2898C17.6053 11.9299 16.4571 13.3323 14.9827 14.3191C13.5083 15.3058 11.7741 15.8326 10 15.8326C8.22588 15.8326 6.4917 15.3058 5.01732 14.3191C3.54294 13.3323 2.39476 11.9299 1.71835 10.2898Z";
+var EYE_OPEN_PUPIL_PATH = "M10 12.4998C11.3807 12.4998 12.5 11.3805 12.5 9.99981C12.5 8.6191 11.3807 7.49981 10 7.49981C8.6193 7.49981 7.50001 8.6191 7.50001 9.99981C7.50001 11.3805 8.6193 12.4998 10 12.4998Z";
+var EYE_OFF_PATH = "M10.733 5.076C13.0624 4.7984 15.4186 5.29082 17.4419 6.47805C19.4651 7.66528 21.0442 9.48208 21.938 11.651C22.0213 11.8755 22.0213 12.1225 21.938 12.347C21.5705 13.238 21.0848 14.0755 20.494 14.837M14.084 14.158C13.5182 14.7045 12.7604 15.0069 11.9738 15C11.1872 14.9932 10.4348 14.6777 9.87854 14.1215C9.32232 13.5652 9.00681 12.8128 8.99998 12.0262C8.99314 11.2396 9.29553 10.4818 9.842 9.916M17.479 17.499C16.1525 18.2848 14.6725 18.776 13.1394 18.9394C11.6063 19.1028 10.056 18.9345 8.59363 18.4459C7.13131 17.9573 5.79119 17.1599 4.66421 16.1077C3.53723 15.0556 2.64975 13.7734 2.062 12.348C1.97866 12.1235 1.97866 11.8765 2.062 11.652C2.94863 9.50186 4.50867 7.69725 6.508 6.509M2 2L22 22";
+function EyeIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Svg.Path,
+      {
+        d: EYE_OPEN_OUTLINE_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Svg.Path,
+      {
+        d: EYE_OPEN_PUPIL_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function EyeOffIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: EYE_OFF_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/theme/tokens.ts
+var stormGray = {
+  "0.5": "#eceef0",
+  "1.5": "#c7cdd1",
+  "2": "#b5bcc1",
+  "3": "#8f9aa3",
+  "4": "#6a7984"};
+var navy = {
+  "0.5": "#e5e9ef",
+  "5": "#08275d"};
+var rubyRed = {
+  "0.5": "#f7dddf",
+  "5": "#ae0011"};
+var brand = {
+  slateBlue: "#182e3c",
+  navy: navy["5"],
+  rubyRed: rubyRed["5"]};
+var colors = {
+  // Brand colors
+  slateBlue: brand.slateBlue,
+  /** Primary brand navy — Figma Navy 5 */
+  navy: brand.navy,
+  stormGray50: stormGray["0.5"],
+  stormGray150: stormGray["1.5"],
+  stormGray200: stormGray["2"],
+  stormGray300: stormGray["3"],
+  stormGray400: stormGray["4"],
+  white: "#ffffff",
+  /** @deprecated Use `rubyRed` */
+  inputError: brand.rubyRed,
+  inputOutlineFocus: navy["0.5"],
+  inputOutlineError: rubyRed["0.5"],
+  transparent: "transparent"
+};
+var radii = {
+  lg: 16};
+var spacing = {
+  sm: 8};
+var fontSize = {
+  sm: 12,
+  md: 14};
+var fontWeight = {
+  medium: "500"};
+var fonts = {
+  sans: "Noto Sans Armenian"
+};
+var labelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.sm,
+  fontWeight: fontWeight.medium,
+  lineHeight: fontSize.sm,
+  letterSpacing: 0
+};
+
+// src/theme/input.ts
+var INPUT_HEIGHT = 52;
+var INPUT_ICON_SIZE = 20;
+var INPUT_ICON_GAP = 10;
+var INPUT_OUTLINE_WIDTH = 2;
+function resolveInputVisualState({
+  focused = false,
+  error = false,
+  disabled = false
+}) {
+  if (disabled) return "disabled";
+  if (error) return "error";
+  if (focused) return "focused";
+  return "default";
+}
+function createOutlineStyle(ringColor) {
+  return {
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderColor: ringColor,
+    padding: 0,
+    backgroundColor: colors.transparent,
+    width: "100%",
+    alignSelf: "stretch",
+    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+  };
+}
+var defaultOutline = createOutlineStyle(colors.transparent);
+function getInputFieldStyles(state) {
+  const containerBase = {
+    borderRadius: radii.lg,
+    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+  };
+  switch (state) {
+    case "disabled":
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.stormGray50
+        },
+        text: { color: colors.stormGray300 },
+        placeholder: colors.stormGray300,
+        icon: colors.stormGray150
+      };
+    case "error":
+      return {
+        outline: createOutlineStyle(colors.inputOutlineError),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.inputError,
+          backgroundColor: colors.white
+        },
+        text: { color: colors.inputError },
+        placeholder: colors.stormGray200,
+        icon: colors.inputError
+      };
+    case "focused":
+      return {
+        outline: createOutlineStyle(colors.inputOutlineFocus),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.navy,
+          backgroundColor: colors.white
+        },
+        text: { color: colors.slateBlue },
+        placeholder: colors.stormGray200,
+        icon: colors.navy
+      };
+    default:
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.white
+        },
+        text: { color: colors.slateBlue },
+        placeholder: colors.stormGray200,
+        icon: colors.stormGray150
+      };
+  }
+}
+var inputFieldMetrics = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: INPUT_HEIGHT,
+    minHeight: INPUT_HEIGHT,
+    maxHeight: INPUT_HEIGHT,
+    borderRadius: radii.lg,
+    padding: 16,
+    gap: INPUT_ICON_GAP,
+    ...reactNative.Platform.OS === "web" ? { boxSizing: "border-box" } : null
+  },
+  input: {
+    flex: 1,
+    alignSelf: "stretch",
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium,
+    lineHeight: reactNative.Platform.OS === "web" ? fontSize.md : 20,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    borderWidth: 0,
+    backgroundColor: colors.transparent,
+    ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
+    ...reactNative.Platform.OS === "web" ? {
+      height: "100%",
+      minHeight: 0,
+      outlineStyle: "none"
+    } : null
+  }
+});
+function hasClassList(node) {
+  return typeof node === "object" && node !== null && "classList" in node && typeof node.classList?.add === "function";
+}
+function resolveWebElement(ref) {
+  const node = ref.current;
+  if (!node) return null;
+  if (hasClassList(node)) return node;
+  const host = node;
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
+  }
+  return null;
+}
+function useApplyWebClassName(ref, className, enabled = true) {
+  react.useLayoutEffect(() => {
+    if (!enabled || reactNative.Platform.OS !== "web" || !className?.trim()) return;
+    const element = resolveWebElement(ref);
+    if (!element) return;
+    const classes = className.trim().split(/\s+/);
+    element.classList.add(...classes);
+    return () => {
+      element.classList.remove(...classes);
+    };
+  }, [ref, className, enabled]);
+}
+function Label({
+  children,
+  required = false,
+  disabled = false,
+  style,
+  className,
+  ...props
+}) {
+  const ref = react.useRef(null);
+  useApplyWebClassName(ref, className);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Text,
+    {
+      ref,
+      style: [styles.label, disabled && styles.labelDisabled, style],
+      accessibilityRole: "text",
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.required, children: " *" }) : null
+      ]
+    }
+  );
+}
+var styles = reactNative.StyleSheet.create({
+  label: {
+    ...labelTypography,
+    color: colors.slateBlue
+  },
+  labelDisabled: {
+    color: colors.stormGray400
+  },
+  required: {
+    color: colors.inputError
+  }
+});
+function renderInputIcon(icon, color) {
+  if (!icon) return null;
+  if (react.isValidElement(icon)) {
+    return react.cloneElement(icon, {
+      size: icon.props.size ?? INPUT_ICON_SIZE,
+      color: icon.props.color ?? color
+    });
+  }
+  return icon;
+}
+function Input({
+  label,
+  leftIcon,
+  rightIcon,
+  error,
+  hint,
+  containerStyle,
+  style,
+  className,
+  fieldClassName,
+  fieldStyle,
+  labelClassName,
+  inputClassName,
+  errorClassName,
+  hintClassName,
+  editable = true,
+  secureTextEntry,
+  showPasswordToggle,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const wrapperRef = react.useRef(null);
+  const fieldRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const helperRef = react.useRef(null);
+  const [focused, setFocused] = react.useState(false);
+  const [passwordVisible, setPasswordVisible] = react.useState(false);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(fieldRef, fieldClassName);
+  useApplyWebClassName(inputRef, inputClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  const isDisabled = editable === false;
+  const passwordToggleEnabled = secureTextEntry === true && showPasswordToggle !== false && rightIcon == null;
+  const effectiveSecureTextEntry = passwordToggleEnabled ? !passwordVisible : secureTextEntry;
+  const visualState = resolveInputVisualState({
+    focused,
+    error: Boolean(error),
+    disabled: isDisabled
+  });
+  const fieldStyles = getInputFieldStyles(visualState);
+  const iconColor = fieldStyles.icon;
+  function handleFocus(event) {
+    setFocused(true);
+    onFocus?.(event);
+  }
+  function handleBlur(event) {
+    setFocused(false);
+    onBlur?.(event);
+  }
+  const helperMessage = error ?? hint;
+  function togglePasswordVisibility() {
+    if (!isDisabled) {
+      setPasswordVisible((visible) => !visible);
+    }
+  }
+  const trailingIcon = passwordToggleEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress: togglePasswordVisibility,
+      disabled: isDisabled,
+      accessibilityRole: "button",
+      accessibilityLabel: passwordVisible ? "Hide password" : "Show password",
+      hitSlop: 8,
+      style: styles2.iconPressable,
+      children: renderInputIcon(
+        passwordVisible ? /* @__PURE__ */ jsxRuntime.jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon, {}),
+        iconColor
+      )
+    }
+  ) : rightIcon ? renderInputIcon(rightIcon, iconColor) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles2.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ref: fieldRef,
+        style: [inputFieldMetrics.container, fieldStyles.container, fieldStyle],
+        children: [
+          leftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconSlot, children: renderInputIcon(leftIcon, iconColor) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              ref: inputRef,
+              style: [
+                inputFieldMetrics.input,
+                fieldStyles.text,
+                style
+              ],
+              placeholderTextColor: fieldStyles.placeholder,
+              editable,
+              secureTextEntry: effectiveSecureTextEntry,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              accessibilityState: { disabled: isDisabled },
+              ...props
+            }
+          ),
+          trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.iconSlot, children: trailingIcon }) : null
+        ]
+      }
+    ) }),
+    helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles2.error : styles2.hint, children: helperMessage }) : null
+  ] });
+}
+var styles2 = reactNative.StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: spacing.sm
+  },
+  iconSlot: {
+    width: INPUT_ICON_SIZE,
+    height: INPUT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  iconPressable: {
+    width: INPUT_ICON_SIZE,
+    height: INPUT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 16,
+    color: colors.inputError
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 16,
+    color: colors.stormGray300
+  }
+});
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function BellIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      className: cn("shrink-0", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M8.58333 17.4998C8.72282 17.7535 8.92787 17.9651 9.17708 18.1125C9.42628 18.2599 9.71048 18.3376 10 18.3376C10.2895 18.3376 10.5737 18.2599 10.8229 18.1125C11.0721 17.9651 11.2772 17.7535 11.4167 17.4998M5 6.6665C5 5.34042 5.52678 4.06865 6.46447 3.13097C7.40215 2.19329 8.67392 1.6665 10 1.6665C11.3261 1.6665 12.5979 2.19329 13.5355 3.13097C14.4732 4.06865 15 5.34042 15 6.6665C15 12.4998 17.5 14.1665 17.5 14.1665H2.5C2.5 14.1665 5 12.4998 5 6.6665Z",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function BuildingIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      className: cn("shrink-0", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 12h4",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 8h4",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M14 21v-3a2 2 0 0 0-4 0v3",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function useOnClickOutside(ref, handler, enabled = true) {
+  react.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!ref.current || !target || ref.current.contains(target)) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("touchstart", onPointerDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("touchstart", onPointerDown);
+    };
+  }, [enabled, handler, ref]);
+}
+function BuildingSelect({
+  options,
+  value,
+  labels,
+  onChange,
+  disabled = false,
+  className,
+  menuClassName,
+  buildingIcon,
+  chevronIcon
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = react.useState(-1);
+  const rootRef = react.useRef(null);
+  const listboxId = react.useId();
+  const selectedOption = options.find((option) => option.value === value);
+  const displayLabel = selectedOption?.label ?? labels.selectBuilding;
+  const selectableOptions = options.filter((option) => !option.disabled);
+  const closeMenu = react.useCallback(() => {
+    setOpen(false);
+    setHighlightedIndex(-1);
+  }, []);
+  const openMenu = react.useCallback(() => {
+    if (disabled || selectableOptions.length === 0) {
+      return;
+    }
+    const selectedIndex = selectableOptions.findIndex((option) => option.value === value);
+    setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    setOpen(true);
+  }, [disabled, selectableOptions, value]);
+  const selectOption = react.useCallback(
+    (option) => {
+      if (option.disabled) {
+        return;
+      }
+      onChange?.(option.value);
+      closeMenu();
+    },
+    [closeMenu, onChange]
+  );
+  useOnClickOutside(rootRef, closeMenu, open);
+  const handleTriggerKeyDown = (event) => {
+    if (disabled) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        openMenu();
+        break;
+      case "Escape":
+        closeMenu();
+        break;
+    }
+  };
+  const handleListKeyDown = (event) => {
+    if (!open || selectableOptions.length === 0) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setHighlightedIndex((current) => (current + 1) % selectableOptions.length);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setHighlightedIndex(
+          (current) => (current - 1 + selectableOptions.length) % selectableOptions.length
+        );
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (highlightedIndex >= 0) {
+          selectOption(selectableOptions[highlightedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        closeMenu();
+        break;
+      case "Tab":
+        closeMenu();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("relative w-57.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": listboxId,
+        "aria-label": labels.selectBuilding,
+        onClick: () => open ? closeMenu() : openMenu(),
+        onKeyDown: handleTriggerKeyDown,
+        className: cn(
+          "flex h-11 w-full items-center gap-3 rounded-xl border border-storm-gray-50 bg-white p-3 text-left transition-colors",
+          !disabled && "cursor-pointer hover:bg-storm-gray-50/60",
+          open && "bg-storm-gray-50/60",
+          disabled && "cursor-not-allowed opacity-60"
+        ),
+        children: [
+          buildingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(BuildingIcon, { className: "shrink-0 text-navy" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-slate-blue", children: displayLabel }),
+          chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronsUpDown,
+            {
+              size: 16,
+              strokeWidth: 1.75,
+              className: cn(
+                "shrink-0 text-storm-gray-100 transition-transform duration-200",
+                open && "rotate-180"
+              ),
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": labels.selectBuilding,
+        tabIndex: -1,
+        onKeyDown: handleListKeyDown,
+        className: cn(
+          "absolute top-[calc(100%+4px)] left-0 z-50 flex w-full flex-col gap-1 overflow-hidden rounded-xl border border-storm-gray-50 bg-white p-2 shadow-[0_8px_24px_rgba(21,26,30,0.08)]",
+          menuClassName
+        ),
+        children: options.map((option) => {
+          const selectableIndex = selectableOptions.findIndex(
+            (selectable) => selectable.value === option.value
+          );
+          const isSelected = option.value === value;
+          const isHighlighted = selectableIndex === highlightedIndex;
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              disabled: option.disabled,
+              onMouseEnter: () => {
+                if (!option.disabled && selectableIndex >= 0) {
+                  setHighlightedIndex(selectableIndex);
+                }
+              },
+              onClick: () => selectOption(option),
+              className: cn(
+                "flex w-full rounded-lg px-3 py-2.5 text-left text-sm font-medium text-slate-blue transition-colors",
+                !option.disabled && "cursor-pointer hover:bg-storm-gray-50",
+                (isSelected || isHighlighted) && !option.disabled && "bg-storm-gray-50",
+                option.disabled && "cursor-not-allowed opacity-50"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+            }
+          ) }, option.value);
+        })
+      }
+    ) : null
+  ] });
+}
+var defaultSearchFieldStyle = {
+  height: 44,
+  minHeight: 44,
+  maxHeight: 44,
+  backgroundColor: "transparent",
+  padding: 12,
+  width: 260,
+  borderRadius: 12
+};
+function AppHeader({
+  title,
+  labels,
+  buildingOptions,
+  selectedBuildingId,
+  className,
+  buildingSelectClassName,
+  searchClassName,
+  notificationsButtonClassName,
+  searchValue,
+  searchFieldStyle,
+  buildingIcon,
+  notificationsIcon,
+  searchIcon,
+  buildingChevronIcon,
+  buildingSelectDisabled = false,
+  searchDisabled = false,
+  notificationsDisabled = false,
+  onBuildingChange,
+  onNotificationsClick,
+  onSearchChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-between gap-4 border-b border-storm-gray-50 bg-storm-gray-0 px-6 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate text-xl font-bold text-slate-blue", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BuildingSelect,
+            {
+              options: buildingOptions,
+              value: selectedBuildingId,
+              labels,
+              onChange: onBuildingChange,
+              disabled: buildingSelectDisabled,
+              className: buildingSelectClassName,
+              buildingIcon,
+              chevronIcon: buildingChevronIcon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              leftIcon: searchIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { strokeWidth: 1.75 }),
+              placeholder: labels.searchPlaceholder,
+              value: searchValue,
+              onChangeText: (value) => onSearchChange?.(value),
+              editable: !searchDisabled,
+              className: cn("w-65!", searchClassName),
+              containerStyle: { width: 260, maxWidth: 260, flexShrink: 0 },
+              fieldStyle: searchFieldStyle ?? defaultSearchFieldStyle,
+              accessibilityLabel: labels.searchPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onNotificationsClick,
+              disabled: notificationsDisabled,
+              className: cn(
+                "h-11 cursor-pointer rounded-xl border border-storm-gray-50 p-3 text-slate-blue transition-colors hover:bg-storm-gray-50/60",
+                notificationsDisabled && "pointer-events-none opacity-60",
+                notificationsButtonClassName
+              ),
+              "aria-label": labels.notifications,
+              children: notificationsIcon ?? /* @__PURE__ */ jsxRuntime.jsx(BellIcon, { className: "text-navy" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = react.useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return window.matchMedia(query).matches;
+  });
+  react.useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    const handleChange = () => setMatches(mediaQuery.matches);
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [query]);
+  return matches;
+}
+function SidebarNavItem({ item, isOpen, onNavigate }) {
+  if (item.hidden) {
+    return null;
+  }
+  const handleClick = () => {
+    item.onClick?.();
+    onNavigate?.(item);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactRouterDom.NavLink,
+    {
+      to: item.to,
+      end: item.end,
+      onClick: handleClick,
+      "aria-disabled": item.disabled,
+      tabIndex: item.disabled ? -1 : void 0,
+      className: ({ isActive }) => cn(
+        "relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out",
+        isOpen ? "w-full gap-4" : "justify-center gap-0 px-3",
+        item.disabled && "pointer-events-none opacity-50",
+        isActive ? "bg-black/12 text-white" : "text-navy-100 hover:bg-white/5"
+      ),
+      children: ({ isActive }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "absolute top-1.5 -left-1 h-8 w-2 rounded-full bg-white transition-[opacity,transform] duration-300 ease-in-out",
+              isActive ? "scale-100 opacity-100" : "scale-75 opacity-0"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: item.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "overflow-hidden text-sm font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out",
+              isOpen ? "max-w-[180px] opacity-100" : "max-w-0 opacity-0"
+            ),
+            children: item.label
+          }
+        )
+      ] })
+    }
+  );
+}
+function getInitials(fullName, email) {
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length > 0) {
+    return parts.slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
+  }
+  return email.slice(0, 2).toUpperCase();
+}
+function SidebarUserCard({
+  user,
+  isOpen,
+  logoutLabel,
+  onLogout,
+  className
+}) {
+  const initials = user.initials ?? getInitials(user.fullName, user.email);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center rounded-xl p-3 transition-[background-color,justify-content,gap] duration-300 ease-in-out",
+        isOpen ? "justify-between gap-3 bg-black/12" : "justify-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 items-center transition-[gap,flex] duration-300 ease-in-out",
+              isOpen ? "flex-1 gap-3" : "gap-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 text-sm font-bold text-white",
+                  "aria-hidden": true,
+                  children: initials
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "min-w-0 overflow-hidden transition-[max-width,opacity] duration-300 ease-in-out",
+                    isOpen ? "max-w-[160px] opacity-100" : "max-w-0 opacity-0"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-bold text-white", children: user.fullName }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-storm-gray-100", children: user.email })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onLogout?.(),
+            className: cn(
+              "shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform,max-width] duration-300 ease-in-out hover:opacity-80 active:scale-95",
+              isOpen ? "max-w-8 scale-100 opacity-100" : "pointer-events-none max-w-0 scale-90 opacity-0"
+            ),
+            "aria-label": logoutLabel,
+            tabIndex: isOpen ? 0 : -1,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { size: 20, strokeWidth: 1.75 })
+          }
+        )
+      ]
+    }
+  );
+}
+function readInitialCollapsedState(storageKey, initialCollapsed) {
+  if (initialCollapsed !== void 0) {
+    return initialCollapsed;
+  }
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const stored = window.localStorage.getItem(storageKey);
+  if (stored === null) {
+    return false;
+  }
+  return stored !== "true";
+}
+function Sidebar({
+  navItems,
+  footerNavItems,
+  branding,
+  labels,
+  sidebarStorageKey,
+  user,
+  onLogout,
+  className,
+  mobileOpen,
+  onMobileClose,
+  onNavItemClick,
+  collapseIcon,
+  expandIcon,
+  closeIcon,
+  initialCollapsed,
+  collapsed,
+  onCollapsedChange
+}) {
+  const location = reactRouterDom.useLocation();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [internalCollapsed, setInternalCollapsed] = react.useState(
+    () => readInitialCollapsedState(sidebarStorageKey, initialCollapsed)
+  );
+  const isCollapsed = collapsed ?? internalCollapsed;
+  const isExpanded = isDesktop ? !isCollapsed : true;
+  const setCollapsed = react.useCallback(
+    (next) => {
+      if (collapsed === void 0) {
+        setInternalCollapsed(next);
+        window.localStorage.setItem(sidebarStorageKey, String(!next));
+      }
+      onCollapsedChange?.(next);
+    },
+    [collapsed, onCollapsedChange, sidebarStorageKey]
+  );
+  const toggleCollapsed = react.useCallback(() => {
+    setCollapsed(!isCollapsed);
+  }, [isCollapsed, setCollapsed]);
+  const handleHeaderAction = react.useCallback(() => {
+    if (isDesktop) {
+      toggleCollapsed();
+      return;
+    }
+    onMobileClose?.();
+  }, [isDesktop, onMobileClose, toggleCollapsed]);
+  const handleNavItemNavigate = react.useCallback(
+    (item) => {
+      onNavItemClick?.(item);
+      if (!isDesktop) {
+        onMobileClose?.();
+      }
+    },
+    [isDesktop, onMobileClose, onNavItemClick]
+  );
+  const pathnameRef = react.useRef(location.pathname);
+  react.useEffect(() => {
+    if (pathnameRef.current === location.pathname) {
+      return;
+    }
+    pathnameRef.current = location.pathname;
+    if (!isDesktop) {
+      onMobileClose?.();
+    }
+  }, [location.pathname, isDesktop, onMobileClose]);
+  react.useEffect(() => {
+    if (!mobileOpen || isDesktop) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [mobileOpen, isDesktop]);
+  const visibleNavItems = navItems.filter((item) => !item.hidden);
+  const visibleFooterNavItems = footerNavItems.filter((item) => !item.hidden);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": labels.closeMenu,
+        onClick: onMobileClose,
+        className: cn(
+          "fixed inset-0 z-40 bg-navy-800/60 backdrop-blur-[1px] transition-opacity duration-300 ease-in-out md:hidden",
+          mobileOpen ? "opacity-100" : "pointer-events-none opacity-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        className: cn(
+          "fixed inset-y-0 left-0 z-50 flex h-screen w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl",
+          "transition-[transform,width,padding,gap] duration-300 ease-in-out will-change-[transform,width]",
+          mobileOpen ? "translate-x-0" : "-translate-x-full",
+          "md:relative md:z-auto md:w-[300px] md:translate-x-0 md:shadow-none",
+          isExpanded ? "md:w-[300px]" : "md:w-[52px] md:items-center md:gap-4 md:px-3 md:py-4",
+          className
+        ),
+        "aria-hidden": !isDesktop && !mobileOpen,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex w-full items-center transition-[justify-content] duration-300 ease-in-out",
+                isExpanded ? "justify-between" : "justify-center"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex min-w-0 items-center gap-1.5 overflow-hidden transition-[max-width,opacity] duration-300 ease-in-out",
+                      isExpanded ? "max-w-[240px] opacity-100" : "max-w-0 opacity-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("img", { src: branding.logoIconSrc, alt: "", className: "h-5 w-[29px] shrink-0" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col leading-none", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[21px] font-bold tracking-tight whitespace-nowrap text-white", children: branding.logoTitle }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[6.5px] font-normal tracking-[-0.26px] text-navy-300 uppercase", children: branding.logoTagline })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleHeaderAction,
+                    className: "shrink-0 cursor-pointer text-white transition-[opacity,transform] duration-200 hover:opacity-80 active:scale-95",
+                    "aria-label": isDesktop ? isExpanded ? labels.collapse : labels.expand : labels.closeMenu,
+                    children: isDesktop ? isExpanded ? collapseIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 20, strokeWidth: 1.75 }) : expandIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { size: 20, strokeWidth: 1.75 }) : closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20, strokeWidth: 1.75 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden", children: visibleNavItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            SidebarNavItem,
+            {
+              item,
+              isOpen: isExpanded,
+              onNavigate: handleNavItemNavigate
+            },
+            item.to
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+            visibleFooterNavItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarNavItem,
+              {
+                item,
+                isOpen: isExpanded,
+                onNavigate: handleNavItemNavigate
+              },
+              item.to
+            )),
+            user ? /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarUserCard,
+              {
+                user,
+                isOpen: isExpanded,
+                logoutLabel: labels.logout,
+                onLogout
+              }
+            ) : null
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SidebarMobileHeader({
+  branding,
+  openMenuLabel,
+  onOpenMenu,
+  menuOpen = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-storm-gray-50 bg-storm-gray-0 px-4 md:hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onOpenMenu,
+            className: "flex size-10 items-center justify-center rounded-xl text-navy transition-colors hover:bg-storm-gray-50",
+            "aria-label": openMenuLabel,
+            "aria-expanded": menuOpen,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { size: 22, strokeWidth: 1.75 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("img", { src: branding.logoIconSrc, alt: "", className: "h-[30px] w-[42px] shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 leading-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-base font-bold tracking-tight text-navy", children: branding.logoTitle }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[6.5px] font-normal tracking-[-0.26px] text-navy-300 uppercase", children: branding.logoTagline })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function DashboardLayout({
+  sidebar,
+  header,
+  mobileHeader,
+  children,
+  className,
+  mainClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className ?? "flex min-h-screen bg-storm-gray-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...sidebar }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SidebarMobileHeader, { ...mobileHeader }),
+      /* @__PURE__ */ jsxRuntime.jsx(AppHeader, { ...header }),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClassName ?? "flex-1 overflow-auto p-4 md:p-6", children })
+    ] })
+  ] });
+}
+
+exports.AppHeader = AppHeader;
+exports.BellIcon = BellIcon;
+exports.BuildingIcon = BuildingIcon;
+exports.BuildingSelect = BuildingSelect;
+exports.DashboardLayout = DashboardLayout;
+exports.Sidebar = Sidebar;
+exports.SidebarMobileHeader = SidebarMobileHeader;
+exports.SidebarNavItem = SidebarNavItem;
+exports.SidebarUserCard = SidebarUserCard;
+exports.cn = cn;
+exports.useMediaQuery = useMediaQuery;
+exports.useOnClickOutside = useOnClickOutside;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map