@mezo-org/passport 0.15.1-dev.6 → 0.15.1-dev.7

package/src/components/Dropdown/SlotNumber.tsx

@@ -1,131 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import React, { useMemo } from "react"
-import { AnimatePresence, motion } from "motion/react"
-import { Block, useStyletron } from "@mezo-org/mezo-clay"
-
-type SlotNumberProps = {
-  className?: string
-  children: number
-  formatFunction?: (value: number) => string
-}
-
-type SlotNumberDigitProps = {
-  className?: string
-  children: number
-}
-
-function SlotNumberDigit(props: SlotNumberDigitProps) {
-  const { children: value, ...restProps } = props
-
-  const [css] = useStyletron()
-
-  const digits = [...Array(10).keys()]
-
-  return (
-    <AnimatePresence initial={false}>
-      <motion.div
-        initial={{
-          y: "100%",
-        }}
-        animate={{
-          y: "0%",
-        }}
-        layout="position"
-        className={css({
-          position: "relative",
-        })}
-        {...restProps}
-      >
-        <Block
-          overrides={{
-            Block: {
-              style: {
-                visibility: "hidden",
-              },
-            },
-          }}
-        >
-          {value}
-        </Block>
-
-        <motion.div
-          className={css({
-            display: "flex",
-            flexDirection: "column",
-            position: "absolute",
-            inset: 0,
-            height: "fit-content",
-          })}
-          initial={false}
-          animate={{ y: `${(value / 10) * -100}%` }}
-          transition={{
-            type: "spring",
-            damping: 16,
-            stiffness: 220,
-          }}
-        >
-          {digits.map((digit) => (
-            <Block as="span" key={digit}>
-              {digit}
-            </Block>
-          ))}
-        </motion.div>
-      </motion.div>
-    </AnimatePresence>
-  )
-}
-
-/**
- * SlotNumber component displays a number with animated digits.
- *
- * @typedef {object} SlotNumberProps
- * @property {number} children - The number to display.
- * @property {function} [formatFunction] - Optional function to format the number.
- * @property {BlockProps} [restProps] - Additional properties for the Block component.
- * @see https://pyszkowski.dev/writings/slot-number
- * @returns {JSX.Element} The rendered SlotNumber component.
- */
-function SlotNumber(props: SlotNumberProps) {
-  const { children: value, formatFunction, ...restProps } = props
-
-  const [css] = useStyletron()
-
-  const characters = useMemo(() => {
-    const formattedValue = formatFunction
-      ? formatFunction(value)
-      : value.toString()
-
-    return formattedValue
-      .split("")
-      .map((character) => (/^[0-9]$/.test(character) ? +character : character))
-      .reverse()
-  }, [formatFunction, value])
-
-  return (
-    <motion.div
-      layout
-      className={css({
-        display: "inline-flex",
-        flexDirection: "row-reverse",
-        justifyContent: "flex-end",
-        overflow: "hidden",
-        userSelect: "none",
-      })}
-      {...restProps}
-    >
-      {characters.map((character, index) =>
-        typeof character === "number" ? (
-          <SlotNumberDigit key={`slot-number-character-${index}`}>
-            {character}
-          </SlotNumberDigit>
-        ) : (
-          <motion.span layout key={`slot-number-character-${index}`}>
-            {character}
-          </motion.span>
-        ),
-      )}
-    </motion.div>
-  )
-}
-
-export default SlotNumber

package/src/components/Dropdown/TestnetTopBanner.tsx

@@ -1,32 +0,0 @@
-import React from "react"
-import {
-  Block,
-  InfoCircle,
-  LabelSmall,
-  useStyletron,
-} from "@mezo-org/mezo-clay"
-import { usePassportContext } from "../../hooks/usePassportContext"
-
-export default function TestnetTopBanner() {
-  const [, theme] = useStyletron()
-
-  const { environment } = usePassportContext()
-
-  if (environment !== "testnet") {
-    return null
-  }
-
-  return (
-    <Block
-      display="flex"
-      alignItems="center"
-      padding={`${theme.sizing.scale700} ${theme.sizing.scale600}`}
-      backgroundColor={theme.colors.warning}
-    >
-      <InfoCircle size={theme.sizing.scale550} />
-      <LabelSmall marginLeft={theme.sizing.scale500}>
-        You are using testnet funds.
-      </LabelSmall>
-    </Block>
-  )
-}

package/src/components/Dropdown/index.ts

@@ -1,2 +0,0 @@
-export { Dropdown } from "./Dropdown"
-export type { DropdownProps } from "./Dropdown"

package/src/components/index.ts

@@ -1 +0,0 @@
-export { Dropdown, DropdownProps } from "./Dropdown"