@ensofinance/checkout-widget 0.0.1

package/src/components/ui/index.tsx

@@ -0,0 +1,394 @@
+// Theme-aware UI components to replace @ensofinance/checkout-ui-library imports
+import React, { forwardRef, useMemo } from "react";
+import {
+    Button as ChakraButton,
+    IconButton as ChakraIconButton,
+    Input as ChakraInput,
+    Box,
+    Text,
+    Flex,
+    Image,
+    type ButtonProps as ChakraButtonProps,
+    type IconButtonProps as ChakraIconButtonProps,
+    type InputProps as ChakraInputProps,
+    chakra,
+    Select as ChakraSelect,
+    createListCollection,
+    Portal,
+    Span,
+    Link,
+    Badge,
+    useRecipe,
+} from "@chakra-ui/react";
+import { inputRecipe } from "../ChakraProvider";
+
+// Button Component
+export interface ButtonProps
+    extends Omit<ChakraButtonProps, "variant" | "size"> {
+    variant?: "primary" | "secondary" | "lightGray";
+    visual?: "primary" | "secondary" | "lightGray" | "solid";
+    size?: "mdPlus" | "sm" | "md" | "lg";
+    onClick?: () => void;
+    isDisabled?: boolean;
+}
+
+interface CustomInputProps extends Omit<ChakraInputProps, "variant"> {
+    variant?: "text" | "outline" | "subtle" | "flushed";
+}
+
+export const Input = forwardRef<HTMLInputElement, CustomInputProps>(
+    ({ variant, ...props }, ref) => {
+        const recipe = useRecipe({ recipe: inputRecipe });
+
+        // Handle custom "text" variant using the recipe
+        if (variant === "text") {
+            const styles = recipe({ variant: "text" });
+            return <chakra.input ref={ref} css={styles} {...props} />;
+        }
+
+        // For built-in variants, use ChakraInput
+        return <ChakraInput ref={ref} variant={variant as any} {...props} />;
+    },
+);
+
+export const Button = chakra(ChakraButton, {
+    base: {
+        display: "flex",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "md",
+        flexShrink: "initial",
+        // cursor: "pointer",
+        // transition: "all 0.2s ease-in-out",
+    },
+    variants: {
+        visual: {
+            solid: {
+                bg: "primary",
+                // color: "customWhite",
+                _hover: {
+                    bg: "primary.emphasis",
+                    // color: "customWhite",
+                },
+            },
+            grayFilled: {
+                bg: "bg.emphasized",
+                color: "customWhite",
+            },
+            lightGray: {
+                bg: "bg.subtle",
+                color: "fg",
+            },
+        },
+        size: {
+            sm: { padding: "8px 16px", fontSize: "14px", fontWeight: "medium" },
+            md: { padding: "4", fontSize: "16px" },
+            lg: { padding: "8", fontSize: "24px" },
+        },
+    },
+    defaultVariants: {
+        visual: "solid",
+        size: "sm",
+    },
+});
+
+Button.displayName = "Button";
+
+// IconButton Component
+export interface IconButtonProps
+    extends Omit<ChakraIconButtonProps, "variant"> {
+    variant?: "primary" | "secondary" | "lightGray";
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    ({ variant = "secondary", children, ...props }, ref) => {
+        return (
+            <ChakraIconButton
+                ref={ref}
+                variant="ghost"
+                bg="transparent"
+                border="none"
+                _hover={{
+                    bg: "bg.subtle",
+                }}
+                _active={{
+                    bg: "bg.emphasized",
+                }}
+                color="fg.muted"
+                {...props}
+            >
+                {children}
+            </ChakraIconButton>
+        );
+    },
+);
+
+IconButton.displayName = "IconButton";
+
+export const Tab = chakra("div", {
+    base: {
+        p: "10px 12px",
+        h: "32px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        borderRadius: "6px",
+        cursor: "pointer",
+        color: "fg.muted",
+        fontSize: "14px",
+        fontWeight: "medium",
+        transition: "all 0.2s ease-in-out",
+        _hover: {
+            bg: "bg.subtle",
+            color: "fg",
+        },
+    },
+});
+
+// Select Component
+export interface SelectItem {
+    value: string;
+    label: string;
+    detail?: string;
+    icon?: string;
+    detailIsLink?: boolean;
+}
+
+export interface SelectProps {
+    items: SelectItem[];
+    variant?: "filled" | "customOutline";
+    size?: "xs" | "sm" | "md" | "lg";
+    width?: string | number;
+    placeholder?: string | React.ReactNode;
+    label?: string | React.ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+export const Select: React.FC<SelectProps> = ({
+    items,
+    variant = "customOutline",
+    size = "md",
+    width = "320px",
+    placeholder,
+    label,
+    defaultValue,
+    onChange,
+    value,
+}) => {
+    const collection = React.useMemo(
+        () =>
+            createListCollection({
+                items: items.map((item) => ({
+                    label: item.label,
+                    value: item.value,
+                })),
+            }),
+        [items],
+    );
+
+    return (
+        <ChakraSelect.Root
+            collection={collection}
+            defaultValue={defaultValue ? [defaultValue] : undefined}
+            onValueChange={(details) => onChange?.(details.value[0])}
+            value={value ? [value] : undefined}
+            size={size}
+            width={width}
+        >
+            <ChakraSelect.HiddenSelect />
+            {label && <ChakraSelect.Label>{label}</ChakraSelect.Label>}
+            <ChakraSelect.Control>
+                <ChakraSelect.Trigger>
+                    <ChakraSelect.ValueText
+                        placeholder={placeholder as string}
+                    />
+                </ChakraSelect.Trigger>
+                <ChakraSelect.IndicatorGroup>
+                    <ChakraSelect.Indicator />
+                </ChakraSelect.IndicatorGroup>
+            </ChakraSelect.Control>
+            <Portal>
+                <ChakraSelect.Positioner>
+                    <ChakraSelect.Content>
+                        {items.map((item) => {
+                            const { label, value, icon, detail, detailIsLink } =
+                                item;
+                            return (
+                                <ChakraSelect.Item
+                                    item={{ label, value }}
+                                    key={value}
+                                >
+                                    <Flex
+                                        justify="space-between"
+                                        align="center"
+                                        w="100%"
+                                    >
+                                        <Flex align="center" gap={2}>
+                                            {icon && (
+                                                <Image
+                                                    src={icon}
+                                                    w={"16px"}
+                                                    h={"16px"}
+                                                    alt="icon"
+                                                />
+                                            )}
+                                            <Span>{label}</Span>
+                                        </Flex>
+                                        {detail &&
+                                            (detailIsLink ? (
+                                                <Link
+                                                    href="#"
+                                                    color="fg"
+                                                    fontWeight="medium"
+                                                >
+                                                    {detail}
+                                                </Link>
+                                            ) : (
+                                                <Span
+                                                    color="fg.muted"
+                                                    fontWeight="medium"
+                                                >
+                                                    {detail}
+                                                </Span>
+                                            ))}
+                                    </Flex>
+                                    <ChakraSelect.ItemIndicator />
+                                </ChakraSelect.Item>
+                            );
+                        })}
+                    </ChakraSelect.Content>
+                </ChakraSelect.Positioner>
+            </Portal>
+        </ChakraSelect.Root>
+    );
+};
+
+// Card Component
+export interface CardProps {
+    children: React.ReactNode;
+    padding?: string;
+    onClick?: () => void;
+    selected?: boolean;
+    disabled?: boolean;
+}
+
+const CardTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <Text fontSize="md" fontWeight="500" color="fg">
+        {children}
+    </Text>
+);
+
+const CardDescription: React.FC<{ children: React.ReactNode }> = ({
+    children,
+}) => (
+    <Text fontSize="xs" color="fg.muted">
+        {children}
+    </Text>
+);
+
+export const Card: React.FC<CardProps> & {
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+} = ({
+    children,
+    padding = "8px 12px",
+    onClick,
+    selected = false,
+    disabled = false,
+}) => {
+    return (
+        <Box
+            p={padding}
+            borderRadius="md"
+            border="1px solid"
+            borderColor={selected ? "primary" : "border"}
+            bg="bg"
+            cursor={onClick && !disabled ? "pointer" : "default"}
+            opacity={disabled ? 0.5 : 1}
+            _hover={
+                selected
+                    ? undefined
+                    : {
+                          borderColor: "border.emphasized",
+                      }
+            }
+            onClick={disabled ? undefined : onClick}
+        >
+            {children}
+        </Box>
+    );
+};
+
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+
+export const Tag = chakra(Badge, {
+    base: {
+        display: "flex",
+        padding: "2px 10px",
+        justifyContent: "center",
+        alignItems: "center",
+        lineHeight: "16px",
+        borderRadius: "full",
+        fontSize: "xs",
+        color: "fg.muted",
+        backgroundColor: "bg.subtle",
+        width: "fit-content",
+        fontWeight: 600,
+    },
+});
+
+// Helper Component
+export interface HelperProps {
+    children: React.ReactNode;
+    type?: "info" | "warning" | "error" | "success";
+}
+
+export const Helper: React.FC<HelperProps> = ({ children, type = "info" }) => {
+    const style = useMemo(() => {
+        const typeStyles = {
+            info: {
+                bg: "bg.subtle",
+                color: "fg.muted",
+                borderColor: "bg.subtle",
+            },
+            warning: {
+                bg: "warning",
+                color: "bg",
+                borderColor: "warning",
+            },
+            error: {
+                bg: "error",
+                color: "bg",
+                borderColor: "error",
+            },
+            success: {
+                bg: "success",
+                color: "bg",
+                borderColor: "success",
+            },
+        };
+
+        return typeStyles[type];
+    }, [type]);
+
+    return (
+        <Flex
+            gap={1}
+            p={3}
+            borderRadius="md"
+            border="1px solid"
+            fontSize="sm"
+            {...style}
+        >
+            {children}
+        </Flex>
+    );
+};
+
+// Export Tooltip component
+export { Tooltip } from "./tooltip";

package/src/components/ui/styled.tsx

@@ -0,0 +1,85 @@
+import { chakra } from "@chakra-ui/react";
+
+// Shared HeaderWrapper variants
+export const HeaderWrapper = chakra("div", {
+    base: {
+        display: "flex",
+        flexDirection: "row",
+        width: "100%",
+        alignItems: "center",
+        gap: "12px",
+        paddingBottom: "16px",
+        borderBottom: "1px solid",
+        borderColor: "border",
+    },
+});
+
+export const HeaderWrapperSpaceBetween = chakra("div", {
+    base: {
+        display: "flex",
+        flexDirection: "row",
+        width: "100%",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: "12px",
+        paddingBottom: "16px",
+        borderBottom: "1px solid",
+        borderColor: "border",
+    },
+});
+
+// Shared HeaderTitle component
+export const HeaderTitle = chakra("h2", {
+    base: {
+        fontWeight: "600",
+        fontSize: "14px",
+        lineHeight: "120%",
+        letterSpacing: "-0.4px",
+        color: "fg",
+    },
+});
+
+// Shared HeaderDescription component
+export const HeaderDescription = chakra("p", {
+    base: {
+        fontWeight: "400",
+        fontSize: "12px",
+        lineHeight: "100%",
+        letterSpacing: "-0.4px",
+        color: "fg.muted",
+    },
+});
+
+// Shared ListWrapper component
+export const ListWrapper = chakra("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 4,
+    },
+});
+
+export const BodyWrapper = chakra("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "12px",
+        paddingTop: "16px",
+    },
+});
+
+export const Divider = chakra("hr", {
+    base: {
+        width: "100%",
+        color: "border",
+        backgroundColor: "border",
+        borderColor: "border",
+    },
+});
+

package/src/components/ui/toaster.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster,
+} from "@chakra-ui/react"
+
+export const toaster = createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true,
+})
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
+        {(toast) => (
+          <Toast.Root width={{ md: "sm" }}>
+            {toast.type === "loading" ? (
+              <Spinner size="sm" color="blue.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  )
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,46 @@
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  content: React.ReactNode
+  contentProps?: ChakraTooltip.ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props
+
+    if (disabled) return children
+
+    return (
+      <ChakraTooltip.Root {...rest}>
+        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content ref={ref} {...contentProps}>
+              {showArrow && (
+                <ChakraTooltip.Arrow>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
+    )
+  },
+)