@lightsparkdev/ui 0.0.12 → 1.0.0

package/dist/{chunk-NM7UW54G.js → chunk-SMDDRU6V.js}

@@ -1,37 +1,50 @@
-import {
-  toReactNodes
-} from "./chunk-VE7J2N47.js";
 import {
   useLiveRef
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-E3AOYBY5.js";
+} from "./chunk-RVT4NV6Z.js";
+import {
+  toReactNodes
+} from "./chunk-VENBTZHV.js";
+import {
+  Drawer
+} from "./chunk-LXK52GLU.js";
 import {
-  Button
-} from "./chunk-ZANLDY2W.js";
+  Button,
+  ButtonSelector
+} from "./chunk-GHIYWOAC.js";
+import {
+  Headline,
+  headlineSelector
+} from "./chunk-4YN25H5H.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
-  UnstyledButton
-} from "./chunk-3GS5EFXV.js";
+  Body
+} from "./chunk-POTDIFIX.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
-  overflowAutoWithoutScrollbars,
-  pxToRems
-} from "./chunk-FCZJILMW.js";
+  UnstyledButton
+} from "./chunk-HGYVPOA7.js";
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-JXXIU52B.js";
 import {
   Icon
-} from "./chunk-RWIZ7Q74.js";
+} from "./chunk-UAFWDZRG.js";
 import {
   overlaySurface,
   standardBorderRadius,
   standardContentInset,
   standardFocusOutline
-} from "./chunk-JK4BP73A.js";
+} from "./chunk-52POF2W4.js";
+import {
+  TokenSize
+} from "./chunk-ENBUKLVT.js";
 import {
   bp,
   useBreakpoints
@@ -41,7 +54,10 @@ import {
 import styled from "@emotion/styled";
 import React, { Fragment, useEffect, useLayoutEffect, useRef } from "react";
 import ReactDOM from "react-dom";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment2, jsx, jsxs } from "@emotion/react/jsx-runtime";
+function isSubmitLinkWithHref(submitLink) {
+  return Boolean(submitLink && "href" in submitLink);
+}
 function Modal({
   visible,
   title,
@@ -56,12 +72,16 @@ function Modal({
   submitDisabled,
   submitLoading,
   submitText,
+  submitLink,
   cancelText = "Cancel",
   firstFocusRef,
+  smDrawer,
   nonDismissable = false,
   autoFocus = true,
   width = 460,
-  progressBar
+  progressBar,
+  buttonLayout = "horizontal",
+  extraActions
 }) {
   const visibleChangedRef = useRef(false);
   const nodeRef = useRef(null);
@@ -73,7 +93,6 @@ function Modal({
   const modalContainerRef = useRef(null);
   const bp2 = useBreakpoints();
   const isSm = bp2.current("sm" /* sm */);
-  const formattedDescription = description ? toReactNodes(description) : null;
   useEffect(() => {
     if (visible !== visibleChangedRef.current) {
       visibleChangedRef.current = visible;
@@ -144,7 +163,7 @@ function Modal({
     }
   }, [visible, visibleChanged, ref, autoFocus]);
   function onClickCloseButton(event) {
-    event.stopPropagation();
+    event == null ? void 0 : event.stopPropagation();
     onClose();
   }
   function onSubmitForm(e) {
@@ -160,58 +179,89 @@ function Modal({
       onClose();
     }
   }
+  const linkIsHref = isSubmitLinkWithHref(submitLink);
+  const linkIsRoute = !linkIsHref && submitLink;
+  const buttonContent = /* @__PURE__ */ jsxs(Fragment2, { children: [
+    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((action) => action.content),
+    !isSm && !cancelHidden && /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: cancelDisabled,
+        onClick: onClickCancel,
+        text: cancelText
+      }
+    ),
+    onSubmit && /* @__PURE__ */ jsx(
+      Button,
+      {
+        kind: "primary",
+        disabled: submitDisabled,
+        text: submitText != null ? submitText : "Continue",
+        loading: submitLoading,
+        to: linkIsRoute ? submitLink.to : void 0,
+        href: linkIsHref ? submitLink.href : void 0,
+        hrefFilename: linkIsHref ? submitLink.filename : void 0,
+        type: submitLink ? "button" : "submit",
+        onClick: submitLink ? onSubmit : void 0
+      }
+    ),
+    isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText }),
+    extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((action) => action.content)
+  ] });
+  let titleContent = null;
+  if (title) {
+    if (typeof title === "string") {
+      titleContent = /* @__PURE__ */ jsx(Headline, { heading: "h4", size: TokenSize.Small, children: title });
+    } else {
+      titleContent = toReactNodes(title);
+    }
+  }
+  let descriptionContent = null;
+  if (description) {
+    if (typeof description === "string") {
+      descriptionContent = /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(Body, { size: "ExtraSmall", content: description }) });
+    } else {
+      descriptionContent = /* @__PURE__ */ jsx(Description, { children: toReactNodes(description) });
+    }
+  }
   const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ModalOverlay, { ref: overlayRef }),
-    /* @__PURE__ */ jsx(
-      ModalContainer,
+    progressBar ? /* @__PURE__ */ jsx("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx(
+      ProgressBar,
       {
-        "aria-modal": true,
-        "aria-hidden": true,
-        tabIndex: -1,
-        role: "dialog",
-        ref: modalContainerRef,
-        children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, children: [
-          !firstFocusRef && /* @__PURE__ */ jsx(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-          !(nonDismissable || ghost) && /* @__PURE__ */ jsx(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "Close", width: 9 }) }),
-          /* @__PURE__ */ jsxs(ModalContentInner, { ghost, children: [
-            progressBar ? /* @__PURE__ */ jsx("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ jsx(
-              ProgressBar,
-              {
-                progressPercentage: progressBar.progressPercentage,
-                isSm: progressBar.isSm
-              }
-            ) }) : null,
-            title ? /* @__PURE__ */ jsx("h4", { children: title }) : null,
-            formattedDescription ? /* @__PURE__ */ jsx(Description, { children: formattedDescription }) : null,
-            /* @__PURE__ */ jsx("div", { children }),
-            onSubmit || onCancel ? /* @__PURE__ */ jsxs(ModalButtonRow, { children: [
-              !isSm && !cancelHidden && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  disabled: cancelDisabled,
-                  onClick: onClickCancel,
-                  text: cancelText
-                }
-              ),
-              onSubmit && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  disabled: submitDisabled,
-                  primary: true,
-                  text: submitText != null ? submitText : "Continue",
-                  loading: submitLoading,
-                  type: "submit"
-                }
-              ),
-              isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText })
-            ] }) : null
-          ] })
-        ] })
+        progressPercentage: progressBar.progressPercentage,
+        isSm: progressBar.isSm
       }
-    )
+    ) }) : null,
+    titleContent,
+    descriptionContent,
+    children,
+    onSubmit || onCancel ? buttonLayout === "horizontal" ? /* @__PURE__ */ jsx(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ jsx(ModalButtonColumn, { children: buttonContent }) : null
   ] });
+  let content;
+  if (smDrawer && isSm) {
+    content = /* @__PURE__ */ jsx(Drawer, { onClose: () => onClickCloseButton(), closeButton: true, children: modalContent });
+  } else {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ModalOverlay, { ref: overlayRef }),
+      /* @__PURE__ */ jsx(
+        ModalContainer,
+        {
+          "aria-modal": true,
+          "aria-hidden": true,
+          tabIndex: -1,
+          role: "dialog",
+          ref: modalContainerRef,
+          children: /* @__PURE__ */ jsxs(ModalContent, { width, ghost, children: [
+            !firstFocusRef && /* @__PURE__ */ jsx(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+            !(nonDismissable || ghost) && /* @__PURE__ */ jsx(CloseButtonContainer, { children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "Close", width: 9 }) }) }),
+            /* @__PURE__ */ jsx(ModalContentInner, { ghost, children: modalContent })
+          ] })
+        }
+      )
+    ] });
+  }
   return visible && nodeReady && nodeRef.current ? ReactDOM.createPortal(
-    onSubmit ? /* @__PURE__ */ jsx("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
+    onSubmit ? /* @__PURE__ */ jsx("form", { onSubmit: onSubmitForm, children: content }) : content,
     nodeRef.current
   ) : null;
 }
@@ -229,7 +279,6 @@ var ModalOverlay = styled.div`
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(2px);
 `;
 var ModalContainer = styled.div`
   pointer-events: none;
@@ -251,33 +300,38 @@ var ModalContainer = styled.div`
 var contentTopMarginPx = 24;
 var Description = styled.div`
   color: ${({ theme }) => theme.mcNeutral};
-  margin-top: 4px;
+  margin-top: ${"12px" /* sm */};
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
 var ModalButtonRow = styled.div`
-  margin-top: 32px;
+  margin-top: ${"24px" /* lg */};
   ${bp.minSm(`display: flex;`)}
   gap: 10px;
 
-  button {
+  ${ButtonSelector()} {
     width: 50%;
     ${bp.sm(`
       width: 100%;
     `)}
   }
+`;
+var ModalButtonColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${"12px" /* sm */};
 
-  button:last-of-type {
-    ${bp.sm(`
-      margin-top: 16px;
-    `)}
+  ${ButtonSelector()} {
+    width: 100%;
   }
+
+  margin-top: ${"24px" /* lg */};
 `;
 var ModalContent = styled.div`
   ${overflowAutoWithoutScrollbars}
   ${standardContentInset.smCSS}
-  ${standardBorderRadius(16)}
+  ${(props) => props.ghost ? "" : standardBorderRadius(16)}
   ${(props) => props.ghost ? "" : overlaySurface}
   pointer-events: auto;
   transition: width 0.25s ease-in;
@@ -287,15 +341,19 @@ var ModalContent = styled.div`
   position: absolute;
   ${(props) => props.ghost ? "" : "padding: 16px 16px 40px;"}
 
-  h4 {
+  ${headlineSelector("h4")} { {
     margin: 0;
-    font-weight: 800;
-    font-size: ${pxToRems(21)};
     & + *:not(${select(Description)}) {
       margin-top: ${contentTopMarginPx}px;
     }
   }
 `;
+var CloseButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: flex-end;
+`;
 var CloseButton = styled(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;

package/dist/chunk-SW6GFFIG.js

@@ -0,0 +1,77 @@
+import {
+  standardLineHeightEms
+} from "./chunk-52POF2W4.js";
+
+// src/components/Checkbox.tsx
+import styled from "@emotion/styled";
+
+// src/static/images/Checkmark.svg?url
+var Checkmark_default = 'data:image/svg+xml,<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M10.5004 1.84998L5.79662 6.63103C4.99697 7.44383 4.59714 7.85023 4.1003 7.85023C3.60346 7.85023 3.20363 7.44383 2.40398 6.63103L1.5 5.7122" stroke="white" stroke-width="1.90917" stroke-linecap="round"/>%0A</svg>%0A';
+
+// src/components/Checkbox.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Checkbox({
+  checked,
+  onChange,
+  id,
+  label,
+  mt = 0,
+  alignItems = "center",
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsxs(CheckboxContainer, { mt, alignItems, children: [
+    /* @__PURE__ */ jsx(
+      StyledCheckbox,
+      {
+        id,
+        type: "checkbox",
+        checked,
+        onChange: () => onChange(!checked),
+        disabled,
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            onChange(!checked);
+          }
+        }
+      }
+    ),
+    label && /* @__PURE__ */ jsx(CheckboxLabel, { htmlFor: id, children: label })
+  ] });
+}
+var StyledCheckbox = styled.input`
+  margin: 0;
+  cursor: pointer;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  /* min-width needed when in flex container: */
+  min-width: 18px;
+  border-radius: 2.25px;
+  ${({ checked, theme }) => !checked && `border: 1px solid ${theme.mcNeutral};`}
+  background-color: ${({ theme, checked }) => checked ? theme.info : theme.bg};
+  background-image: ${({ checked }) => checked ? `url("${Checkmark_default}");` : "none;"}
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 9px auto;
+  ${({ disabled }) => disabled && "opacity: 0.2;"}
+`;
+var CheckboxContainer = styled.span`
+  display: flex;
+  margin-top: ${({ mt }) => mt}px;
+  align-items: ${({ alignItems }) => alignItems};
+
+  & + & {
+    margin-top: 12px;
+  }
+`;
+var CheckboxLabel = styled.label`
+  margin-left: 12px;
+  cursor: pointer;
+  height: ${standardLineHeightEms}em;
+`;
+
+export {
+  Checkbox,
+  CheckboxContainer
+};

package/dist/chunk-TA7W237X.js

@@ -0,0 +1,26 @@
+// src/icons/Close.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Close() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 8 8",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M0.5 0.5L7.5 7.5M0.5 7.5L7.5 0.5",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Close
+};

package/dist/chunk-TAEOGBWY.js

@@ -0,0 +1,28 @@
+// src/icons/Search.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Search() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10.9972 10.9512C9.78136 12.1281 8.12781 12.6667 6.83333 12.6667C4.5 12.6667 1 10.9167 1 6.83333C1 2.75 4.5 1 6.83333 1C9.16667 1 12.6667 2.75 12.6667 6.83333C12.6667 8.65133 11.9729 10.0068 10.9972 10.9512ZM10.9972 10.9512L15 15",
+          stroke: "#404040",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Search
+};

package/dist/{chunk-7T36JGTC.js → chunk-TKERS7F6.js}

@@ -1,9 +1,9 @@
 import {
   CopyToClipboardButton
-} from "./chunk-7C4MHI6Q.js";
+} from "./chunk-PK4E5P4Q.js";
 import {
   standardBorderRadius
-} from "./chunk-JK4BP73A.js";
+} from "./chunk-52POF2W4.js";
 
 // src/components/SecretContainer.tsx
 import styled from "@emotion/styled";

package/dist/chunk-TSHXYNRZ.js

@@ -0,0 +1,94 @@
+import {
+  pageSectionScrollOffset
+} from "./chunk-JJC2AUQ3.js";
+import {
+  TextButton
+} from "./chunk-YYPRW5VJ.js";
+import {
+  IconContainer
+} from "./chunk-UAFWDZRG.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  colors
+} from "./chunk-KYTOF4WO.js";
+
+// src/components/PageSection/PageSectionNav.tsx
+import styled from "@emotion/styled";
+import { notNullUndefined } from "@lightsparkdev/core";
+import { jsx } from "@emotion/react/jsx-runtime";
+var StyledPageSectionNav = styled.div`
+  display: none;
+  flex-direction: column;
+  margin-right: 32px;
+  position: relative;
+
+  ${bp.minMd(`
+    display: flex;
+    width: 150px;
+  `)}
+
+  ${bp.lg(`
+    width: 200px;
+  `)}
+`;
+var PageSectionList = styled.ul`
+  margin: 0;
+  padding: 0;
+  position: sticky;
+  top: ${({ top }) => top}px;
+`;
+var StyledPageSectionNavItem = styled.li`
+  align-items: center;
+  color: ${colors.gray40};
+  display: flex;
+  list-style: none;
+
+  ${IconContainer}:not(:first-of-type) {
+    visibility: hidden;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.hcNeutral};
+
+    ${IconContainer} {
+      visibility: visible;
+    }
+  }
+`;
+var PageSectionListItem = ({ leftIcon, label, sectionId }) => /* @__PURE__ */ jsx(StyledPageSectionNavItem, { children: /* @__PURE__ */ jsx(
+  TextButton,
+  {
+    text: label,
+    padding: "8px 0",
+    leftIcon: { name: leftIcon },
+    onClick: () => {
+      if (sectionId) {
+        window.location.replace(`#${sectionId}`);
+      } else {
+        window.location.replace("#");
+      }
+    }
+  }
+) });
+function PageSectionNav({
+  headerOffset = 0,
+  pageSectionNavItems
+}) {
+  return /* @__PURE__ */ jsx(StyledPageSectionNav, { children: /* @__PURE__ */ jsx(PageSectionList, { top: headerOffset + pageSectionScrollOffset, children: pageSectionNavItems.filter(notNullUndefined).map((item) => {
+    return /* @__PURE__ */ jsx(
+      PageSectionListItem,
+      {
+        leftIcon: item.leftIcon,
+        label: item.label,
+        sectionId: item.sectionId
+      },
+      item.sectionId
+    );
+  }) }) });
+}
+
+export {
+  PageSectionNav
+};

package/dist/chunk-TSYLKHL2.js

@@ -0,0 +1,27 @@
+// src/icons/Code.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Code() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 16 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3.85714 3.37502L0.75 7.00002L3.85714 10.625M12.1429 3.37502L15.25 7.00002L12.1429 10.625M9.55357 1.30359L6.44643 12.6964",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Code
+};