@class101/cdn-ui-system 0.0.7 → 0.0.11

package/lib/PopoverBottomSheet/PopoverBottomSheet.js

@@ -1,135 +1,57 @@
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[Object.keys(fn)[0]])(fn = 0)), res;
-};
-
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-var init_react_shim = __esm({
-  "tools/builders/framer-esm/build/react-shim.js"() {
-  }
-});
+import {
+  useLazyUnmount,
+  useLockBodyScroll
+} from "../../chunk-O6RRFC57.js";
+import "../../chunk-LN36XQS3.js";
+import {
+  React,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/PopoverBottomSheet/PopoverBottomSheet.tsx
 init_react_shim();
-import {useCallback, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState2} from "react";
-
-// libs/shared/utils-hooks/src/index.ts
-init_react_shim();
-
-// libs/shared/utils-hooks/src/lib/useLazyUnmount/index.ts
-init_react_shim();
-
-// libs/shared/utils-hooks/src/lib/useLazyUnmount/useLazyUnmount.ts
-init_react_shim();
-import {useEffect, useState} from "react";
-var useLazyUnmount = (state, delay) => {
-  const [isMounted, setIsMounted] = useState(state);
-  useEffect(() => {
-    if (state) {
-      setIsMounted(state);
-      return void 0;
-    }
-    const timer = setTimeout(() => {
-      setIsMounted(false);
-    }, delay);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [delay, state]);
-  return isMounted;
-};
-
-// libs/shared/utils-hooks/src/lib/useLockBodyScroll/index.ts
-init_react_shim();
-
-// libs/shared/utils-hooks/src/lib/useLockBodyScroll/useLockBodyScroll.ts
-init_react_shim();
-import {useEffect as useEffect2, useRef} from "react";
-
-// libs/shared/utils-browser/src/index.ts
-init_react_shim();
-
-// libs/shared/utils-browser/src/lib/canUseDOM.ts
-init_react_shim();
-
-// libs/shared/utils-browser/src/lib/isBrowser.ts
-init_react_shim();
-
-// libs/shared/utils-browser/src/lib/isServer.ts
-init_react_shim();
-var isServer = typeof window === "undefined";
-
-// libs/shared/utils-browser/src/lib/isBrowser.ts
-var isBrowser = !isServer;
-
-// libs/shared/utils-browser/src/lib/canUseDOM.ts
-var canUseDOM = Boolean(isBrowser && window.document && window.document.createElement);
-
-// libs/shared/utils-hooks/src/lib/useLockBodyScroll/useLockBodyScroll.ts
-var useLockBodyScroll = (locked = false) => {
-  const bodyStyleRef = useRef({paddingRight: "", overflow: ""});
-  const lockBodyScroll = () => {
-    if (!canUseDOM) {
-      return;
-    }
-    bodyStyleRef.current = {
-      paddingRight: document.body.style.paddingRight,
-      overflow: document.body.style.overflow
-    };
-    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.paddingRight = `${scrollBarWidth}px`;
-    document.body.style.overflow = "hidden";
-  };
-  const unlockBodyScroll = () => {
-    if (!canUseDOM) {
-      return;
-    }
-    document.body.style.paddingRight = bodyStyleRef.current.paddingRight;
-    document.body.style.overflow = bodyStyleRef.current.overflow;
-  };
-  useEffect2(() => {
-    if (locked) {
-      lockBodyScroll();
-    } else {
-      unlockBodyScroll();
-    }
-    return () => {
-      unlockBodyScroll();
-    };
-  }, [locked]);
-};
-
-// libs/shared/ui-system/src/lib/PopoverBottomSheet/PopoverBottomSheet.tsx
-import {system} from "../../core/index.js";
-import {Box} from "../../private/Box/index.js";
-import {Action} from "../Action/index.js";
-import {SlideAnimation} from "../Animation/SlideAnimation/index.js";
-import {Icon} from "../Icon/index.js";
-import {HStack} from "../Layout/HStack/index.js";
-import {Position} from "../Layout/Position/index.js";
-import {Portal} from "../Portal/index.js";
-import {Title} from "../Typography/Title/index.js";
-import {Backdrop} from "../Backdrop/index.js";
-import {VStack} from "../Layout/VStack/index.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { system } from "../../core/index.js";
+import { useWindowResizeEvent } from "../../hooks/useWindowResizeEvent/index.js";
+import { Box } from "../../private/Box/index.js";
+import { Action } from "../Action/index.js";
+import { SlideAnimation } from "../Animation/SlideAnimation/index.js";
+import { Backdrop } from "../Backdrop/index.js";
+import { Icon } from "../Icon/index.js";
+import { HStack } from "../Layout/HStack/index.js";
+import { Position } from "../Layout/Position/index.js";
+import { VStack } from "../Layout/VStack/index.js";
+import { Portal } from "../Portal/index.js";
+import { Title } from "../Typography/Title/index.js";
 var ANIMATION_TIME_MS = 500;
-var PopoverBottomSheet = system()()(({title, renderOpener, children, opened, popoverColor = "white", onClose}) => {
-  const [isOpened, setIsOpened] = useState2(opened ?? false);
+var PopoverBottomSheet = system()()(({
+  title,
+  renderOpener,
+  children,
+  opened,
+  popoverColor = "white",
+  onClose,
+  anchorRef,
+  transformOrigin = { vertical: "top", horizontal: "left" }
+}) => {
+  const [isOpened, setIsOpened] = useState(opened != null ? opened : false);
   const isMounted = useLazyUnmount(isOpened, ANIMATION_TIME_MS);
-  const [openerRect, setOpenerRect] = useState2(null);
-  const openerElement = useRef2();
+  const [anchorRect, setAnchorRect] = useState(null);
+  const openerRef = useRef();
   useLockBodyScroll(isOpened);
   const open = useCallback(() => {
-    if (!openerElement.current) {
+    var _a;
+    if (!openerRef.current) {
       return;
     }
-    setOpenerRect(openerElement.current.getBoundingClientRect());
+    setAnchorRect(((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : openerRef.current).getBoundingClientRect());
     setIsOpened(true);
-  }, [openerElement]);
+  }, [anchorRef]);
   const close = useCallback(() => {
     setIsOpened(false);
-    onClose?.();
+    onClose == null ? void 0 : onClose();
   }, [onClose]);
-  useEffect3(() => {
+  useEffect(() => {
     if (opened === void 0) {
       return;
     }
@@ -140,9 +62,17 @@ var PopoverBottomSheet = system()()(({title, renderOpener, children, opened, pop
     close();
   }, [close, open, opened]);
   const opener = useMemo(() => renderOpener((ref) => {
-    openerElement.current = ref;
+    ref && (openerRef.current = ref);
   }, open), [open, renderOpener]);
-  const popoverLayout = openerRect !== null ? {top: openerRect.top + openerRect.height, left: openerRect.left} : null;
+  const popoverLayout = anchorRect !== null ? { top: anchorRect.top + anchorRect.height, left: anchorRect.left } : null;
+  const updateAnchorRect = useCallback(() => {
+    var _a;
+    if (!isOpened || !openerRef.current) {
+      return;
+    }
+    setAnchorRect(((_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : openerRef.current).getBoundingClientRect());
+  }, [anchorRef, isOpened]);
+  useWindowResizeEvent(updateAnchorRect);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, opener, popoverLayout !== null && isMounted && /* @__PURE__ */ React.createElement(Portal, {
     id: "popover",
     zIndex: 1
@@ -166,6 +96,10 @@ var PopoverBottomSheet = system()()(({title, renderOpener, children, opened, pop
     duration: ANIMATION_TIME_MS,
     fillMode: "forwards"
   }, /* @__PURE__ */ React.createElement(Box, {
+    transform: {
+      translateY: transformOrigin.vertical === "bottom" ? "-100%" : 0,
+      translateX: transformOrigin.horizontal === "right" ? "-100%" : 0
+    },
     width: ["100%", "100%", "unset"],
     minWidth: ["unset", "unset", 200],
     maxHeight: "calc(100% - 48px)",
@@ -193,7 +127,15 @@ var PopoverBottomSheet = system()()(({title, renderOpener, children, opened, pop
   }, /* @__PURE__ */ React.createElement(Icon.Regular.Close, {
     size: 20,
     fill: "black"
-  }))), children)))))))));
+  }))), /* @__PURE__ */ React.createElement(VStack, {
+    overflow: "auto",
+    "overscroll-behavior": "contain",
+    maxHeight: [
+      "calc(100vh - 140px)",
+      "calc(100vh - 140px)",
+      `calc(100vh - ${popoverLayout.top}px - 40px)`
+    ]
+  }, typeof children === "function" ? children({ closePopover: close }) : children))))))))));
 });
 export {
   PopoverBottomSheet

package/lib/PopoverBottomSheet/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/PopoverBottomSheet/index.ts
-import {PopoverBottomSheet} from "./PopoverBottomSheet.js";
+init_react_shim();
+import { PopoverBottomSheet } from "./PopoverBottomSheet.js";
 export {
   PopoverBottomSheet
 };

package/lib/Portal/Portal.js

@@ -1,44 +1,36 @@
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[Object.keys(fn)[0]])(fn = 0)), res;
-};
-
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
-var init_react_shim = __esm({
-  "tools/builders/framer-esm/build/react-shim.js"() {
-  }
-});
+import {
+  canUseDOM,
+  findOrCreateElementById
+} from "../../chunk-LN36XQS3.js";
+import {
+  Global,
+  css
+} from "../../chunk-T7TBQTBE.js";
+import "../../chunk-LE44IRCL.js";
+import "../../chunk-CGEEKALF.js";
+import "../../chunk-J3Q2BPOW.js";
+import {
+  React,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Portal/Portal.tsx
 init_react_shim();
-import {css, Global} from "https://jspm.dev/@emotion/react@11.1.5";
 import ReactDOM from "react-dom";
-
-// libs/shared/utils-browser/src/index.ts
-init_react_shim();
-
-// libs/shared/utils-browser/src/lib/findOrCreateElementById.ts
-init_react_shim();
-function findOrCreateElementById(id) {
-  const existingElement = document.getElementById(id);
-  if (existingElement) {
-    return existingElement;
+var Portal = ({ id, zIndex = 0, position = "relative", children }) => {
+  if (!canUseDOM) {
+    return null;
   }
-  const container = document.createElement("div");
-  container.id = id;
-  document.body.appendChild(container);
-  return container;
-}
-
-// libs/shared/ui-system/src/lib/Portal/Portal.tsx
-var Portal = ({id, zIndex = 0, children}) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Global, {
-  styles: css`
-        #${id} {
-          position: relative;
-          z-index: ${zIndex};
-        }
-      `
-}), ReactDOM.createPortal(children, findOrCreateElementById(id)));
+  const container = document.fullscreenElement ? document.fullscreenElement : findOrCreateElementById(id);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Global, {
+    styles: css`
+          #${id} {
+            position: ${position};
+            z-index: ${zIndex};
+          }
+        `
+  }), ReactDOM.createPortal(children, container));
+};
 export {
   Portal
 };

package/lib/Portal/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Portal/index.ts
-import {Portal} from "./Portal.js";
+init_react_shim();
+import { Portal } from "./Portal.js";
 export {
   Portal
 };

package/lib/Profile/Profile.js

@@ -1,10 +1,13 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Profile/Profile.tsx
-import {useMemo, cloneElement} from "react";
-import {Stack} from "../../private/Stack/index.js";
-var Profile = ({direction, size, renderAvatar, renderProfileLabel}) => {
+init_react_shim();
+import { useMemo, cloneElement } from "react";
+import { Stack } from "../../private/Stack/index.js";
+var Profile = ({ direction, size, renderAvatar, renderProfileLabel }) => {
   const spacing = useMemo(() => {
     if (direction === "horizontal") {
       if (size === "xl") {
@@ -33,7 +36,7 @@ var Profile = ({direction, size, renderAvatar, renderProfileLabel}) => {
     direction,
     spacing,
     alignment: "center"
-  }, cloneElement(renderAvatar(), {size}), cloneElement(renderProfileLabel(), {
+  }, cloneElement(renderAvatar(), { size }), cloneElement(renderProfileLabel(), {
     size,
     center: direction === "vertical"
   }));

package/lib/Profile/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Profile/index.ts
-import {Profile} from "./Profile.js";
+init_react_shim();
+import { Profile } from "./Profile.js";
 export {
   Profile
 };

package/lib/ProfileLabel/ProfileLabel.js

@@ -1,67 +1,102 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  __objRest,
+  __spreadValues,
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/ProfileLabel/ProfileLabel.tsx
-import {variant} from "https://jspm.dev/@class101/styled-system@5.3.1";
-import {css} from "https://jspm.dev/@emotion/react@11.1.5";
-import styled from "https://jspm.dev/@emotion/styled@11.3.0";
-import {Box} from "../../private/Box/index.js";
-import {Stack} from "../../private/Stack/index.js";
-import {skipForwardProps} from "../../core/index.js";
-import {Highlight} from "../Highlight/index.js";
-import {kindVariants as textKindVariants, weightVariants as textWeightVariants} from "../Typography/Text/index.js";
-var nameSizeVariant = {
-  xl: {
-    ...textKindVariants.title4
-  },
-  lg: {
-    ...textKindVariants.body1
-  },
-  md: {
-    ...textKindVariants.body3
-  },
-  sm: {
-    ...textKindVariants.caption1
-  }
-};
-var descriptionSizeVariant = {
-  xl: {
-    ...textKindVariants.caption1
-  },
-  lg: {
-    ...textKindVariants.caption1
-  },
-  md: {
-    ...textKindVariants.caption2
-  },
-  sm: {
-    ...textKindVariants.caption2
-  }
-};
-var ProfileLabel = styled(({direction, size = "md", name, description, highlight, icon, isSpacing, ...restProps}) => {
-  const isLarge = size === "xl" || size === "lg" || isSpacing === "lg";
-  return /* @__PURE__ */ React.createElement(Stack, {
+init_react_shim();
+import { propVariant, system } from "../../core/index.js";
+import { Stack } from "../../private/Stack/index.js";
+import { Highlight } from "../Highlight/index.js";
+import { Text } from "../Typography/Text/index.js";
+var ProfileLabel = system()()((_a) => {
+  var _b = _a, {
+    direction,
+    size = "md",
+    name,
+    description,
+    highlight,
+    icon,
+    color = "gray.700"
+  } = _b, restProps = __objRest(_b, [
+    "direction",
+    "size",
+    "name",
+    "description",
+    "highlight",
+    "icon",
+    "color"
+  ]);
+  const isLarge = size === "xl" || size === "lg";
+  return /* @__PURE__ */ React.createElement(Stack, __spreadValues({
     direction,
     alignment: direction === "horizontal" ? "center" : void 0,
-    spacing: isLarge ? 4 : 2,
-    ...restProps
-  }, highlight ? /* @__PURE__ */ React.createElement(Highlight, null, /* @__PURE__ */ React.createElement(NameLabel, {
-    size
+    spacing: isLarge ? 4 : 2
+  }, restProps), highlight ? /* @__PURE__ */ React.createElement(Highlight, null, /* @__PURE__ */ React.createElement(NameLabel, {
+    size,
+    color
   }, name)) : /* @__PURE__ */ React.createElement(NameLabel, {
-    size
-  }, name), icon, description && /* @__PURE__ */ React.createElement(DescriptionLabel, {
     size,
-    color: "gray.600"
+    color
+  }, name), icon, description && /* @__PURE__ */ React.createElement(DescriptionLabel, {
+    size
   }, description));
-})((props) => props.center && css`
-      text-align: center;
-    `);
-var NameLabel = styled((props) => /* @__PURE__ */ React.createElement(Box, {
-  ...props
-}), skipForwardProps(["size"]))({...textWeightVariants.bold}, variant({prop: "size", variants: nameSizeVariant}));
-var DescriptionLabel = styled((props) => /* @__PURE__ */ React.createElement(Box, {
-  ...props
-}), skipForwardProps(["size"]))(variant({prop: "size", variants: descriptionSizeVariant}));
+});
+var NameLabel = system()(propVariant({
+  prop: "size",
+  variants: {
+    xl: {
+      kind: "title4",
+      weight: "bold"
+    },
+    lg: {
+      kind: "body1",
+      weight: "bold"
+    },
+    md: {
+      kind: "body3",
+      weight: "bold"
+    },
+    sm: {
+      kind: "body4",
+      weight: "bold"
+    }
+  },
+  skipForward: true
+}))((_a) => {
+  var _b = _a, { kind } = _b, restProps = __objRest(_b, ["kind"]);
+  return /* @__PURE__ */ React.createElement(Text, __spreadValues({
+    kind,
+    as: "p"
+  }, restProps));
+});
+var DescriptionLabel = system()(propVariant({
+  prop: "size",
+  variants: {
+    xl: {
+      kind: "body4"
+    },
+    lg: {
+      kind: "body4"
+    },
+    md: {
+      kind: "body5"
+    },
+    sm: {
+      kind: "body5"
+    }
+  },
+  skipForward: true
+}))((_a) => {
+  var _b = _a, { kind } = _b, restProps = __objRest(_b, ["kind"]);
+  return /* @__PURE__ */ React.createElement(Text, __spreadValues({
+    kind,
+    color: "gray.600",
+    as: "p"
+  }, restProps));
+});
 export {
   ProfileLabel
 };

package/lib/ProfileLabel/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/ProfileLabel/index.ts
-import {ProfileLabel} from "./ProfileLabel.js";
+init_react_shim();
+import { ProfileLabel } from "./ProfileLabel.js";
 export {
   ProfileLabel
 };

package/lib/Progress/ProgressBar/ProgressBar.js

@@ -1,12 +1,15 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  React,
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Progress/ProgressBar/ProgressBar.tsx
-import {useCallback, useMemo} from "react";
-import {SlideAnimation} from "../../Animation/SlideAnimation/index.js";
-import {Background} from "../../Background/index.js";
-import {VStack} from "../../Layout/VStack/index.js";
-import {Bar} from "../../../private/Bar/index.js";
+init_react_shim();
+import { useCallback, useMemo } from "react";
+import { Bar } from "../../../private/Bar/index.js";
+import { SlideAnimation } from "../../Animation/SlideAnimation/index.js";
+import { Background } from "../../Background/index.js";
+import { VStack } from "../../Layout/VStack/index.js";
 var ProgressBar = ({
   color = "black",
   bgColor = "gray.400",
@@ -19,10 +22,10 @@ var ProgressBar = ({
 }) => {
   const to = useMemo(() => [`${Math.min(progress, 100) - 100}%`, 0], [progress]);
   const handleProgressStart = useCallback(() => {
-    onProgressStart?.();
+    onProgressStart == null ? void 0 : onProgressStart();
   }, [onProgressStart]);
   const handleProgressEnd = useCallback(() => {
-    onProgressEnd?.();
+    onProgressEnd == null ? void 0 : onProgressEnd();
   }, [onProgressEnd]);
   return /* @__PURE__ */ React.createElement(Background, {
     color: bgColor

package/lib/Progress/ProgressBar/index.js

@@ -1,8 +1,10 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../../../chunk-VIIHQGZ3.js";
 
 // libs/shared/ui-system/src/lib/Progress/ProgressBar/index.ts
-import {ProgressBar} from "./ProgressBar.js";
+init_react_shim();
+import { ProgressBar } from "./ProgressBar.js";
 export {
   ProgressBar
 };