@lightsparkdev/ui 1.0.8 → 1.0.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @lightsparkdev/ui
 
+## 1.0.9
+
+### Patch Changes
+
+- 07900ac: - Add several components and hooks
+  - Upgrade Typescript to 5.6.2
+  - Remove remaining generic type arguments for Routes - replaced with interface extension in downstream apps via NewRoutesType
+  - Remove generic typography arguments, using simpler/better inference via TypographyPropsWithoutContent type
+  - Improve and simplify toReactNodes
+  - Add CurrencyAmount as an available toReactNodes node
+- Updated dependencies [07900ac]
+  - @lightsparkdev/core@1.2.2
+
 ## 1.0.8
 
 ### Patch Changes

package/dist/{chunk-TRIJJTMX.cjs → chunk-22I3LZGW.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAZRC3MXCcjs = require('./chunk-AZRC3MXC.cjs');
+var _chunkOVJZVL57cjs = require('./chunk-OVJZVL57.cjs');
 
 
-var _chunkG5HBO2FIcjs = require('./chunk-G5HBO2FI.cjs');
+var _chunkUN4FMYEQcjs = require('./chunk-UN4FMYEQ.cjs');
 
 
-var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
+var _chunkUKMVD656cjs = require('./chunk-UKMVD656.cjs');
 
 // src/components/typography/Code.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -23,7 +23,7 @@ var Code = ({
 }) => {
   let reactNodes = children || null;
   if (content) {
-    reactNodes = _chunkAZRC3MXCcjs.toNonTypographicReactNodes.call(void 0, content);
+    reactNodes = _chunkUKMVD656cjs.toReactNodesBase.call(void 0, content);
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     StyledCode,
@@ -39,8 +39,8 @@ var Code = ({
   );
 };
 var StyledCode = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkZBBVZQKJcjs.applyTypography.call(void 0, theme, "Code", size, colorProp)}
-  ${_chunkG5HBO2FIcjs.typographyStyles}
+  ${({ theme, size, colorProp }) => _chunkUN4FMYEQcjs.applyTypography.call(void 0, theme, "Code", size, colorProp)}
+  ${_chunkOVJZVL57cjs.typographyStyles}
 `;
 
 

package/dist/{chunk-PYL3O7AF.cjs → chunk-23NA5VW6.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkWTHHP7G2cjs = require('./chunk-WTHHP7G2.cjs');
+var _chunkJX6HEEEQcjs = require('./chunk-JX6HEEEQ.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkKSKKC6C2cjs = require('./chunk-KSKKC6C2.cjs');
+var _chunkO7USIZI6cjs = require('./chunk-O7USIZI6.cjs');
 
 // src/styles/common.tsx
 var _react = require('@emotion/react');
@@ -109,13 +109,13 @@ var Subtext = _styled2.default.div`
   ${subtext}
 `;
 var darkGradientBg = _react.css`
-  background: ${_chunkKSKKC6C2cjs.darkGradient};
+  background: ${_chunkO7USIZI6cjs.darkGradient};
 `;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
 }) => _react.css`
-  border-color: ${_chunkWTHHP7G2cjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme })}
+  border-color: ${_chunkJX6HEEEQcjs.themeOr.call(void 0, theme.c1Neutral, theme.c3Neutral)({ theme })}
     ${important ? "!important" : ""};
 `;
 var overlaySurface = ({
@@ -123,11 +123,11 @@ var overlaySurface = ({
   important = false,
   border = true
 }) => _react.css`
-  background-color: ${_chunkWTHHP7G2cjs.themeOr.call(void 0, theme.bg, theme.c1Neutral)({ theme })}
+  background-color: ${_chunkJX6HEEEQcjs.themeOr.call(void 0, theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
   ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
-  ${_chunkWTHHP7G2cjs.themeOr.call(void 0, 
+  ${_chunkJX6HEEEQcjs.themeOr.call(void 0, 
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
   ""
 )({ theme })}

package/dist/{chunk-HN6NGIKM.js → chunk-24MZEHRM.js}

@@ -1,6 +1,9 @@
 import {
   Icon
-} from "./chunk-QQTZ6DZL.js";
+} from "./chunk-K3DMPJSX.js";
+import {
+  renderTypography
+} from "./chunk-5GLOHTP6.js";
 
 // src/components/CurrencyAmount.tsx
 import styled from "@emotion/styled";
@@ -18,7 +21,9 @@ function CurrencyAmount({
   showUnits = false,
   includeEstimatedIndicator = false,
   fullPrecision = false,
-  ml = 0
+  id,
+  ml = 0,
+  typography
 }) {
   const unit = displayUnit;
   const amountMap = isCurrencyMap(amount) ? amount : mapCurrencyAmount(amount);
@@ -39,10 +44,18 @@ function CurrencyAmount({
   if (showUnits) {
     formattedNumber += ` ${shorttext(unit, value)}`;
   }
-  return /* @__PURE__ */ jsxs(StyledCurrencyAmount, { ml, children: [
+  let content = formattedNumber;
+  if (typography && typography.type) {
+    content = renderTypography(typography.type, {
+      size: typography.size,
+      color: typography.color,
+      content: formattedNumber
+    });
+  }
+  return /* @__PURE__ */ jsxs(StyledCurrencyAmount, { ml, id, children: [
     includeEstimatedIndicator && "Est. ",
     /* @__PURE__ */ jsx(CurrencyIcon, { unit }),
-    formattedNumber
+    content
   ] });
 }
 var CurrencyIcon = ({ unit }) => {

package/dist/{chunk-FBU6BGRP.js → chunk-2EEW2LXQ.js}

@@ -1,12 +1,12 @@
-import {
-  toNonTypographicReactNodes
-} from "./chunk-UC6SP4KJ.js";
 import {
   typographyStyles
-} from "./chunk-EGOOSBGG.js";
+} from "./chunk-X5SBSJ3Z.js";
 import {
   applyTypography
-} from "./chunk-GHXNMLAB.js";
+} from "./chunk-U4Y4CF4A.js";
+import {
+  toReactNodesBase
+} from "./chunk-HQO3PIAY.js";
 
 // src/components/typography/LabelStrong.tsx
 import styled from "@emotion/styled";
@@ -23,7 +23,7 @@ var LabelStrong = ({
 }) => {
   let reactNodes = children || null;
   if (content) {
-    reactNodes = toNonTypographicReactNodes(content);
+    reactNodes = toReactNodesBase(content);
   }
   return /* @__PURE__ */ jsx(
     StyledLabelStrong,

package/dist/chunk-2HIH3J6K.js

@@ -0,0 +1,191 @@
+import {
+  defaultTextInputTypography,
+  fieldWidth,
+  maxFieldWidth,
+  textInputBorderColor,
+  textInputBorderColorFocused,
+  textInputPadding,
+  textInputPaddingPx,
+  textInputPlaceholderColor
+} from "./chunk-W5NH2F3D.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+import {
+  Icon
+} from "./chunk-K3DMPJSX.js";
+import {
+  getColor,
+  themeOr
+} from "./chunk-GZW6KBUI.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/Select.tsx
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import BaseSelect from "react-select";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Select(_a) {
+  var _b = _a, {
+    zIndex,
+    selectRef,
+    label,
+    openMenuOnFocus = true,
+    tabSelectsValue = false,
+    getOptionStyles
+  } = _b, rest = __objRest(_b, [
+    "zIndex",
+    "selectRef",
+    "label",
+    "openMenuOnFocus",
+    "tabSelectsValue",
+    "getOptionStyles"
+  ]);
+  const theme = useTheme();
+  const styles = {
+    container: (styles2, state) => {
+      return __spreadProps(__spreadValues({}, styles2), {
+        width: fieldWidth,
+        maxWidth: maxFieldWidth,
+        zIndex: z.select
+      });
+    },
+    control: (styles2, state) => {
+      return __spreadProps(__spreadValues({}, styles2), {
+        transition: "none",
+        padding: state.menuIsOpen || state.isFocused ? `${textInputPaddingPx - 1}px` : textInputPadding,
+        boxShadow: "none",
+        background: theme.bg,
+        minHeight: 0,
+        fontSize: 14,
+        borderWidth: state.menuIsOpen || state.isFocused ? "2px" : "1px",
+        "&:hover": {
+          borderColor: state.menuIsOpen ? textInputBorderColorFocused({ theme }) : textInputBorderColor({ theme })
+        },
+        borderColor: state.menuIsOpen || state.isFocused ? textInputBorderColorFocused({ theme }) : textInputBorderColor({ theme })
+      });
+    },
+    indicatorsContainer: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      padding: "0 8px"
+    }),
+    indicatorSeparator: (styles2) => ({
+      display: "none"
+    }),
+    menu: (styles2, state) => {
+      return __spreadProps(__spreadValues({}, styles2), {
+        overflow: "hidden",
+        border: `2px solid ${theme.lcNeutral}`,
+        backgroundColor: theme.bg,
+        boxShadow: "0px 3px 6px 1px rgba(0,0,0,0.05)",
+        borderColor: theme.hcNeutral,
+        width: "max-content",
+        minWidth: "100%"
+      });
+    },
+    option: (styles2, props) => {
+      const optionStyles = getOptionStyles ? getOptionStyles(styles2, props) : {};
+      return __spreadValues(__spreadProps(__spreadValues({}, styles2), {
+        color: props.isFocused ? getColor(theme, defaultTextInputTypography.color) : props.isDisabled ? textInputPlaceholderColor({ theme }) : getColor(theme, defaultTextInputTypography.color),
+        fontWeight: 600,
+        cursor: "pointer",
+        backgroundColor: props.isFocused ? themeOr(theme.c05Neutral, theme.c2Neutral)({ theme }) : theme.bg,
+        WebkitTapHighlightColor: theme.c1Neutral,
+        "&:active": {
+          backgroundColor: themeOr(
+            theme.c05Neutral,
+            theme.c5Neutral
+          )({ theme })
+        }
+      }), optionStyles);
+    },
+    menuPortal: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      fontSize: 14,
+      zIndex: zIndex || z.selectFocused
+    }),
+    singleValue: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      color: theme.text,
+      fontWeight: 600,
+      fontSize: 14
+    }),
+    placeholder: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      color: theme.mcNeutral
+    }),
+    valueContainer: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      padding: 0
+    }),
+    input: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+      color: theme.text,
+      fontWeight: 600,
+      fontSize: 14
+    })
+  };
+  return /* @__PURE__ */ jsxs(StyledSelect, { children: [
+    label && /* @__PURE__ */ jsx(SelectLabel, { hasError: false, children: label }),
+    /* @__PURE__ */ jsx(
+      BaseSelect,
+      __spreadProps(__spreadValues({}, rest), {
+        styles,
+        openMenuOnFocus,
+        tabSelectsValue,
+        menuPortalTarget: document.body,
+        ref: selectRef,
+        components: {
+          DropdownIndicator: () => /* @__PURE__ */ jsx(Icon, { name: "Chevron", width: 16 })
+          // Option: (option) => {
+          //   return <div>Option</div>;
+          // },
+        },
+        theme: (selectTheme) => __spreadProps(__spreadValues({}, selectTheme), {
+          borderRadius: 8,
+          colors: {
+            danger: theme.danger,
+            dangerLight: "#ff8",
+            primary: theme.text,
+            primary75: "#ccc",
+            primary50: "#888",
+            primary25: "#444",
+            neutral0: "#000",
+            neutral5: "#111",
+            neutral10: "#222",
+            neutral20: "#999",
+            neutral30: "#aaa",
+            neutral40: "#bbb",
+            neutral50: "#bbb",
+            neutral60: "#ccc",
+            neutral70: "#ccc",
+            neutral80: "#ddd",
+            neutral90: "#ddd"
+          }
+        })
+      })
+    )
+  ] });
+}
+var SelectLabel = styled.label`
+  font-size: 10px;
+  position: absolute;
+  z-index: ${z.select + 1};
+  background-color: ${({ theme }) => theme.bg};
+  color: ${({ theme, hasError }) => hasError ? theme.danger : theme.mcNeutral};
+  font-weight: 600;
+  padding: 0px 6px;
+  left: 12px;
+  top: -6px;
+`;
+var StyledSelect = styled.div`
+  position: relative;
+  & + & {
+    margin-top: 8px;
+  }
+`;
+var Select_default = Select;
+
+export {
+  Select,
+  StyledSelect,
+  Select_default
+};

package/dist/{chunk-MK445W3F.js → chunk-2NFJCUHR.js}

@@ -1,30 +1,30 @@
-import {
-  useResizeObserver
-} from "./chunk-ZSWFGISK.js";
 import {
   bannerTiming
 } from "./chunk-E3FGOYEJ.js";
 import {
-  toReactNodes
-} from "./chunk-JZJQOZEN.js";
-import {
-  Link
-} from "./chunk-34MTU3ER.js";
+  useResizeObserver
+} from "./chunk-ZSWFGISK.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  toReactNodes
+} from "./chunk-NXSA7WNB.js";
 import {
   Icon
-} from "./chunk-QQTZ6DZL.js";
+} from "./chunk-K3DMPJSX.js";
 import {
   getColor
-} from "./chunk-W5I53DTZ.js";
+} from "./chunk-GZW6KBUI.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
+import {
+  Link
+} from "./chunk-ELHOJIVP.js";
 import {
   colors
-} from "./chunk-REL56P3K.js";
+} from "./chunk-RTRS42I3.js";
 
 // src/components/Banner/Banner.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-CHXBDWS3.js → chunk-2PK3U5ML.js}

@@ -1,18 +1,18 @@
-import {
-  Button
-} from "./chunk-EJZ3BXS3.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-DNRHVCOE.js";
+} from "./chunk-IGZYEIQS.js";
+import {
+  Button
+} from "./chunk-R35JXTPE.js";
 import {
   standardContentInset
-} from "./chunk-APUV4UN4.js";
+} from "./chunk-ZMK4RE5I.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   __spreadValues
-} from "./chunk-LOPKRCGI.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/ButtonRow.tsx
 import styled from "@emotion/styled";

package/dist/chunk-2U7V5APX.cjs

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkVC743SV7cjs = require('./chunk-VC743SV7.cjs');
+
+
+var _chunkZAP2S2HOcjs = require('./chunk-ZAP2S2HO.cjs');
+
+
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/components/SatoshiInput.tsx
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function SatoshiInput(_a) {
+  var _b = _a, {
+    label,
+    maxValue,
+    error
+  } = _b, rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _b, [
+    "label",
+    "maxValue",
+    "error"
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
+    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkVC743SV7cjs.SatoshiInputLabel,
+      {
+        text: label.text,
+        availableSats: label.availableSats,
+        showTooltip: label.showTooltip
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkZAP2S2HOcjs.CommaNumberInput_default,
+      _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {
+        placeholder: "SATs"
+      }, rest), {
+        icon: { name: "SatoshiRounded", side: "left" },
+        maxValue: maxValue ? Math.floor(maxValue) : void 0,
+        error
+      })
+    )
+  ] });
+}
+var SatoshiInput_default = SatoshiInput;
+
+
+
+
+exports.SatoshiInput = SatoshiInput; exports.SatoshiInput_default = SatoshiInput_default;

package/dist/chunk-2ZRPJUTY.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/components/typography/renderTypography.tsx
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var typographyMapModulePromise = Promise.resolve().then(() => _interopRequireWildcard(require("./components/typography/typographyMap.cjs")));
+var renderTypography = (typographyType, typographyProps) => {
+  return _react2.default.createElement(RenderTypographyLoader, {
+    typographyType,
+    typographyProps
+  });
+};
+function RenderTypographyLoader({
+  typographyType,
+  typographyProps
+}) {
+  const typographyMap = _react.useRef.call(void 0, null);
+  const [ready, setReady] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    void typographyMapModulePromise.then((typographyMapModule) => {
+      typographyMap.current = typographyMapModule.typographyMap;
+      setReady(true);
+    });
+  }, []);
+  if (!ready || !typographyMap.current) {
+    return null;
+  }
+  const TypographyComponent = typographyMap.current[typographyType];
+  const { children } = typographyProps;
+  return _react2.default.createElement(TypographyComponent, typographyProps, children);
+}
+
+
+
+exports.renderTypography = renderTypography;