@lightsparkdev/ui 0.0.8 → 0.0.11

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @lightsparkdev/ui
 
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [b47bc60]
+  - @lightsparkdev/core@1.0.20
+
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [330f913]
+  - @lightsparkdev/core@1.0.19
+
+## 0.0.9
+
+### Patch Changes
+
+- 79f9f9f: - Fix ButtonRow inset
+  - Add CardPage
+  - Add GradientCardHeader
+  - Default cancelText value for Modal and simplify inset refs
+- 062bf8a: - Add active prop to textInputStyle for indicating active style in response to external factors
+- 062bf8a: [js] Add engines field to all packages to indicate supported NodeJS versions
+- Updated dependencies [062bf8a]
+  - @lightsparkdev/core@1.0.18
+
 ## 0.0.8
 
 ### Patch Changes

package/dist/{chunk-NRXJA2PM.js → chunk-3EVAP5JT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-55OQPFLF.js";
 import {
   overlaySurface
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-4KWTXZRY.js → chunk-3GS5EFXV.js}

@@ -1,6 +1,6 @@
 import {
   standardFocusOutline
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 
 // src/components/UnstyledButton.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-WTO7C7WA.js → chunk-5POPBNPS.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 
 // src/components/TextIconAligner.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";

package/dist/{chunk-UWN53KLJ.js → chunk-7C4MHI6Q.js}

@@ -1,12 +1,12 @@
 import {
   UnstyledButton
-} from "./chunk-4KWTXZRY.js";
+} from "./chunk-3GS5EFXV.js";
 import {
   LightTooltip
-} from "./chunk-NRXJA2PM.js";
+} from "./chunk-3EVAP5JT.js";
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   __async
 } from "./chunk-CIGAQ47A.js";

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

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

package/dist/{chunk-YPB5SA65.js → chunk-A4FQBEYU.js}

@@ -1,15 +1,15 @@
 import {
   Loading
-} from "./chunk-BAO4T4G5.js";
-import {
-  flexCenter
-} from "./chunk-2YB7653N.js";
+} from "./chunk-J4FJQ3FN.js";
 import {
   UnstyledButton
-} from "./chunk-4KWTXZRY.js";
+} from "./chunk-3GS5EFXV.js";
+import {
+  flexCenter
+} from "./chunk-FCZJILMW.js";
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   colors
 } from "./chunk-2VBDEO6M.js";

package/dist/{chunk-SZVMKB4E.js → chunk-ATUH6SXK.js}

@@ -4,7 +4,7 @@ import {
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   colors,
   themeOr
@@ -52,8 +52,21 @@ var textInputPaddingPx = 12;
 var textInputPadding = `${textInputPaddingPx}px`;
 var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
 var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
+var textInputActiveStyles = ({
+  theme,
+  paddingLeftPx,
+  paddingRightPx
+}) => css`
+  border-color: ${textInputBorderColorFocused({ theme })};
+  border-width: 2px;
+  color: ${textInputColor({ theme })};
+  padding: ${textInputPaddingPx - 1}px;
+  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
+  ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+`;
 var textInputStyle = ({
   theme,
+  active,
   disabled,
   hasError,
   paddingLeftPx,
@@ -87,15 +100,13 @@ var textInputStyle = ({
   max-width: ${maxFieldWidth};
   text-overflow: ellipsis;
   &:focus,
-  &:active {
-    border-color: ${textInputBorderColorFocused({ theme })};
-    border-width: 2px;
-    color: ${textInputColor({ theme })};
-    padding: ${textInputPaddingPx - 1}px;
-    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
-    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+  &:active,
+  &:has(:focus) {
+    ${textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
   }
 
+  ${active && textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+
   &::placeholder {
     color: ${textInputPlaceholderColor({ theme })};
   }

package/dist/{chunk-U6XT5JKC.js → chunk-DQRN4E5G.js}

@@ -1,6 +1,6 @@
 import {
   standardBorderRadius
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   isLight
 } from "./chunk-2VBDEO6M.js";

package/dist/{chunk-36C653MV.js → chunk-E3AOYBY5.js}

@@ -1,6 +1,6 @@
 import {
   standardBorderRadius
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   themeOr
 } from "./chunk-2VBDEO6M.js";

package/dist/{chunk-MAMSU2XB.js → chunk-EEFNW7NS.js}

@@ -1,12 +1,12 @@
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-2YB7653N.js";
+} from "./chunk-FCZJILMW.js";
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   standardBorderRadius
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-2YB7653N.js → chunk-FCZJILMW.js}

@@ -1,6 +1,6 @@
 import {
   rootFontSizePx
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 
 // src/styles/utils.tsx
 import { css } from "@emotion/react";

package/dist/{chunk-ZYHA6MJC.js → chunk-H3RW6JSU.js}

@@ -1,6 +1,6 @@
 import {
   GlobalStyles
-} from "./chunk-ZSUX6RLD.js";
+} from "./chunk-KMR5C25B.js";
 import {
   themes
 } from "./chunk-2VBDEO6M.js";

package/dist/chunk-IPAXAP6K.js

@@ -0,0 +1,119 @@
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+
+// src/components/GradientCardHeader.tsx
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function GradientCardHeader(props) {
+  return /* @__PURE__ */ jsxs(CardHeaderWrapper, { children: [
+    /* @__PURE__ */ jsx(Gradients, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      props.status,
+      /* @__PURE__ */ jsx(CardHeaderTitle, { children: props.title })
+    ] }),
+    props.children
+  ] });
+}
+var CardHeaderWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 40px 32px 24px 32px;
+  background-color: black;
+  color: white;
+  height: 264px;
+`;
+var CardHeaderTitle = styled.h3`
+  font-size: 21px;
+  font-weight: 800;
+  color: white;
+  margin: 0;
+  z-index: ${z.headerContainer} - 1;
+  position: relative;
+`;
+var Gradients = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ jsx(BackgroundGradients, {}),
+    /* @__PURE__ */ jsx(AccentGradients, {})
+  ] });
+};
+var BackgroundGradients = styled.div`
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    margin: auto;
+    filter: blur(38.5px);
+  }
+  &:before {
+    z-index: ${z.walletActionPreviewTopGradient};
+    right: -280px;
+    top: -340px;
+    width: 704px;
+    height: 619px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      #0032ff 0%,
+      rgb(0 121 255 / 31%) 97%,
+      rgba(0, 102, 255, 0.05) 100%
+    );
+  }
+  &:after {
+    z-index: ${z.walletActionPreviewTopGradient - 1};
+    width: 636px;
+    height: 552px;
+    top: -400px;
+    right: -280px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      rgb(255 114 104) 0%,
+      rgb(191 9 255 / 14%) 90%,
+      rgb(191 9 255 / 5%) 100%
+    );
+  }
+`;
+var AccentGradients = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  right: 0;
+  bottom: 0;
+  z-index: ${z.walletActionPreviewTopGradient - 1};
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    margin: auto;
+    filter: blur(38.5px);
+  }
+  &:before {
+    right: -70px;
+    top: -100px;
+    width: 169px;
+    height: 323px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      #ff8c28,
+      rgba(191, 9, 255, 0.1) 100%
+    );
+  }
+  &:after {
+    right: -22px;
+    top: -140px;
+    width: 225px;
+    height: 190px;
+    background: radial-gradient(
+      41.57% 62.06% at 53.1% 49.9%,
+      rgb(255 119 0),
+      rgb(255 106 9 / 55%) 100%
+    );
+  }
+`;
+
+export {
+  GradientCardHeader
+};

package/dist/{chunk-BAO4T4G5.js → chunk-J4FJQ3FN.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 
 // src/components/Loading.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-HNVQIY5U.js → chunk-JK4BP73A.js}

@@ -14,9 +14,44 @@ var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
 var headingContentMarginPx = 30;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var cardBorderRadiusPx = 16;
 var standardBorderRadius = (radius) => {
   const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
@@ -24,27 +59,6 @@ var standardBorderRadius = (radius) => {
     border-radius: ${borderRadiusPx};
   `;
 };
-var smContentInset = css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -118,14 +132,9 @@ export {
   rootFontSizeRems,
   standardLineHeightEms,
   headingContentMarginPx,
-  standardContentInsetPx,
-  standardContentInsetMdPx,
-  standardContentInsetSmPx,
+  standardContentInset,
   cardBorderRadiusPx,
   standardBorderRadius,
-  smContentInset,
-  minSmMaxLgContentInset,
-  standardContentInset,
   standardCardShadow,
   pageBorderRadiusPx,
   pageBorderRadius,

package/dist/{chunk-ZSUX6RLD.js → chunk-KMR5C25B.js}

@@ -4,7 +4,7 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   useThemeBg
 } from "./chunk-2VBDEO6M.js";

package/dist/{chunk-2JM7UTAZ.js → chunk-NFSAJ5GJ.js}

@@ -1,12 +1,12 @@
 import {
   Button
-} from "./chunk-76Q4BK35.js";
+} from "./chunk-ZANLDY2W.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-2YB7653N.js";
+} from "./chunk-FCZJILMW.js";
 import {
-  standardContentInsetSmPx
-} from "./chunk-HNVQIY5U.js";
+  standardContentInset
+} from "./chunk-JK4BP73A.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
@@ -37,9 +37,9 @@ var ButtonRowContainer = styled.div`
             position: sticky;
             top: ${headerHeight}px;
             margin-top: 24px;
-            margin-left: -${standardContentInsetSmPx}px;
-            width: calc(100% + ${standardContentInsetSmPx * 2}px);
-            max-width: calc(100% + ${standardContentInsetSmPx * 2}px);
+            margin-left: -${standardContentInset.smPx}px;
+            width: calc(100% + ${standardContentInset.smPx * 2}px);
+            max-width: calc(100% + ${standardContentInset.smPx * 2}px);
             z-index: 2;` : `position: relative;`}
         z-index: 2;
         &:before {
@@ -78,7 +78,7 @@ var StyledButtonRow = styled.div`
   }
 
   ${bp.sm(`
-    padding: 12px;
+    padding: ${standardContentInset.smPx}px;
   `)}
 `;
 

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

@@ -6,33 +6,32 @@ import {
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-36C653MV.js";
+} from "./chunk-E3AOYBY5.js";
 import {
   Button
-} from "./chunk-76Q4BK35.js";
+} from "./chunk-ZANLDY2W.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
-import {
-  overflowAutoWithoutScrollbars,
-  pxToRems
-} from "./chunk-2YB7653N.js";
 import {
   UnstyledButton
-} from "./chunk-4KWTXZRY.js";
+} from "./chunk-3GS5EFXV.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  overflowAutoWithoutScrollbars,
+  pxToRems
+} from "./chunk-FCZJILMW.js";
 import {
   Icon
-} from "./chunk-VHW2KROZ.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   overlaySurface,
-  smContentInset,
   standardBorderRadius,
-  standardContentInsetSmPx,
+  standardContentInset,
   standardFocusOutline
-} from "./chunk-HNVQIY5U.js";
+} from "./chunk-JK4BP73A.js";
 import {
   bp,
   useBreakpoints
@@ -57,7 +56,7 @@ function Modal({
   submitDisabled,
   submitLoading,
   submitText,
-  cancelText,
+  cancelText = "Cancel",
   firstFocusRef,
   nonDismissable = false,
   autoFocus = true,
@@ -185,16 +184,16 @@ function Modal({
             title ? /* @__PURE__ */ jsx("h4", { children: title }) : null,
             formattedDescription ? /* @__PURE__ */ jsx(Description, { children: formattedDescription }) : null,
             /* @__PURE__ */ jsx("div", { children }),
-            onSubmit ? /* @__PURE__ */ jsxs(ModalButtonRow, { children: [
+            onSubmit || onCancel ? /* @__PURE__ */ jsxs(ModalButtonRow, { children: [
               !isSm && !cancelHidden && /* @__PURE__ */ jsx(
                 Button,
                 {
                   disabled: cancelDisabled,
                   onClick: onClickCancel,
-                  text: cancelText != null ? cancelText : "Cancel"
+                  text: cancelText
                 }
               ),
-              /* @__PURE__ */ jsx(
+              onSubmit && /* @__PURE__ */ jsx(
                 Button,
                 {
                   disabled: submitDisabled,
@@ -204,7 +203,7 @@ function Modal({
                   type: "submit"
                 }
               ),
-              isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: "Cancel" })
+              isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText })
             ] }) : null
           ] })
         ] })
@@ -247,7 +246,7 @@ var ModalContainer = styled.div`
   justify-content: center;
   align-items: center;
   color: ${({ theme }) => theme.text};
-  padding-top: ${standardContentInsetSmPx}px;
+  padding-top: ${standardContentInset.smPx}px;
 `;
 var contentTopMarginPx = 24;
 var Description = styled.div`
@@ -260,6 +259,7 @@ var Description = styled.div`
 var ModalButtonRow = styled.div`
   margin-top: 32px;
   ${bp.minSm(`display: flex;`)}
+  gap: 10px;
 
   button {
     width: 50%;
@@ -272,14 +272,11 @@ var ModalButtonRow = styled.div`
     ${bp.sm(`
       margin-top: 16px;
     `)}
-    ${bp.minSm(`
-      margin-left: 10px;
-    `)}
   }
 `;
 var ModalContent = styled.div`
   ${overflowAutoWithoutScrollbars}
-  ${smContentInset}
+  ${standardContentInset.smCSS}
   ${standardBorderRadius(16)}
   ${(props) => props.ghost ? "" : overlaySurface}
   pointer-events: auto;