@ttoss/react-billing 0.5.12 → 0.5.14

package/dist/esm/index.js

@@ -1,710 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import * as React from 'react';
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", {
-  value,
-  configurable: true
-});
-
-// src/components/planCard/PlanCard.tsx
-import { Box as Box4, Card } from "@ttoss/ui";
-
-// src/components/planCard/PlanCardCtaSlot.tsx
-import { Button, Flex } from "@ttoss/ui";
-var PlanCardCtaSlot = /* @__PURE__ */__name(({
-  buttonProps
-}) => {
-  const {
-    label: ctaLabel = "Assine agora",
-    sx: buttonSx,
-    leftIcon,
-    variant: buttonVariant,
-    ...restButtonProps
-  } = buttonProps ?? {};
-  return /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      marginTop: "auto",
-      paddingY: "2",
-      paddingX: "6",
-      width: "full",
-      justifyContent: "center"
-    }
-  }, /* @__PURE__ */React.createElement(Button, {
-    ...restButtonProps,
-    variant: buttonVariant ?? "accent",
-    leftIcon,
-    sx: {
-      width: "full",
-      justifyContent: "center",
-      fontWeight: "semibold",
-      ...buttonSx
-    }
-  }, ctaLabel));
-}, "PlanCardCtaSlot");
-
-// src/components/planCard/PlanCardFeaturesSlot.tsx
-import { Icon } from "@ttoss/react-icons";
-import { Box, Flex as Flex2, Stack, Text } from "@ttoss/ui";
-import * as React2 from "react";
-
-// src/components/planCard/PlanCardVariants.ts
-var normalizeVariant = /* @__PURE__ */__name(variantType => {
-  if (variantType === "default") return "primary";
-  if (variantType === "enterprise") return "secondary";
-  return variantType ?? "primary";
-}, "normalizeVariant");
-var getPlanCardVariantStyles = /* @__PURE__ */__name(variantType => {
-  const variant = normalizeVariant(variantType);
-  const variants = {
-    primary: {
-      // Primary is the default PlanCard styling (previously `muted`).
-      backgroundColor: "display.background.primary.default",
-      color: "display.text.primary.default",
-      secondaryColor: "display.text.secondary.default",
-      borderColor: "display.border.muted.default",
-      positiveColor: "feedback.text.positive.default"
-    },
-    secondary: {
-      // Secondary matches the old `enterprise` look.
-      backgroundColor: "display.background.primary.active",
-      color: "action.text.primary.default",
-      secondaryColor: "action.text.primary.default",
-      borderColor: "display.border.muted.default",
-      positiveColor: "action.text.primary.default"
-    }
-  };
-  return variants[variant] ?? variants.primary;
-}, "getPlanCardVariantStyles");
-
-// src/components/planCard/PlanCardFeaturesSlot.tsx
-var featuresTitle = "RECURSOS";
-var PlanCardFeaturesSlot = /* @__PURE__ */__name(({
-  features,
-  variant = "primary"
-}) => {
-  const variantStyles = getPlanCardVariantStyles(variant);
-  const featurePositiveColor = variantStyles.positiveColor;
-  return /* @__PURE__ */React2.createElement(Box, {
-    sx: {
-      paddingY: "4",
-      paddingX: "6",
-      width: "full",
-      borderTop: "md",
-      borderBottom: "md",
-      borderColor: "display.border.muted.default"
-    }
-  }, /* @__PURE__ */React2.createElement(Stack, {
-    sx: {
-      gap: "5",
-      paddingY: "3"
-    }
-  }, /* @__PURE__ */React2.createElement(Flex2, {
-    sx: {
-      letterSpacing: "widest",
-      color: variantStyles.color
-    }
-  }, featuresTitle), /* @__PURE__ */React2.createElement(Flex2, {
-    sx: {
-      flexDirection: "column",
-      gap: "3"
-    }
-  }, features.map((feature, index) => {
-    if (/* @__PURE__ */React2.isValidElement(feature)) {
-      return /* @__PURE__ */React2.createElement(React2.Fragment, {
-        key: index
-      }, feature);
-    }
-    return /* @__PURE__ */React2.createElement(Flex2, {
-      key: index,
-      sx: {
-        fontSize: "sm",
-        color: featurePositiveColor,
-        alignItems: "center",
-        gap: "3"
-      }
-    }, /* @__PURE__ */React2.createElement(Icon, {
-      icon: "fluent:checkmark-24-filled"
-    }), /* @__PURE__ */React2.createElement(Text, {
-      sx: {
-        fontSize: "sm",
-        color: featurePositiveColor,
-        alignItems: "center"
-      }
-    }, String(feature)));
-  }))));
-}, "PlanCardFeaturesSlot");
-
-// src/components/planCard/PlanCardHeaderSlot.tsx
-import { Box as Box2, Flex as Flex3, Heading, Text as Text2 } from "@ttoss/ui";
-var PlanCardHeaderSlot = /* @__PURE__ */__name(({
-  title,
-  subtitle,
-  hasTopTag,
-  variant = "primary"
-}) => {
-  const variantStyles = getPlanCardVariantStyles(variant);
-  return /* @__PURE__ */React.createElement(Box2, {
-    sx: {
-      paddingY: hasTopTag ? "4" : "8",
-      paddingX: "8",
-      width: "full"
-    }
-  }, /* @__PURE__ */React.createElement(Flex3, {
-    sx: {
-      flexDirection: "column",
-      gap: "2",
-      width: "full",
-      alignItems: "center"
-    }
-  }, /* @__PURE__ */React.createElement(Heading, {
-    sx: {
-      fontSize: "3xl",
-      color: variantStyles.color
-    }
-  }, title), subtitle && /* @__PURE__ */React.createElement(Text2, {
-    sx: {
-      fontSize: "sm",
-      color: variantStyles.secondaryColor
-    }
-  }, subtitle)));
-}, "PlanCardHeaderSlot");
-
-// src/components/planCard/PlanCardMetadataSlot.tsx
-import { Icon as Icon2 } from "@ttoss/react-icons";
-import { Flex as Flex4, Stack as Stack2, Text as Text3 } from "@ttoss/ui";
-var PlanCardMetadataSlot = /* @__PURE__ */__name(({
-  metadata,
-  variant = "primary"
-}) => {
-  const variantStyles = getPlanCardVariantStyles(variant);
-  return /* @__PURE__ */React.createElement(Stack2, {
-    sx: {
-      width: "full",
-      gap: "6"
-    }
-  }, metadata.map(service => {
-    const serviceKey = service.id ?? service.key ?? service.label;
-    return /* @__PURE__ */React.createElement(Flex4, {
-      key: serviceKey,
-      sx: {
-        gap: "3",
-        flexDirection: "column",
-        width: "full"
-      }
-    }, /* @__PURE__ */React.createElement(Flex4, {
-      sx: {
-        gap: "4",
-        alignItems: "center",
-        color: variantStyles.secondaryColor,
-        width: "full"
-      }
-    }, service.icon && /* @__PURE__ */React.createElement(Icon2, {
-      icon: service.icon
-    }), /* @__PURE__ */React.createElement(Text3, {
-      sx: {
-        color: variantStyles.secondaryColor
-      }
-    }, service.label + String.fromCharCode(58))), service.parameters.map(parameter => {
-      return /* @__PURE__ */React.createElement(Flex4, {
-        key: parameter.name,
-        sx: {
-          paddingX: "6",
-          paddingY: "4",
-          backgroundColor: "display.background.muted.default",
-          borderRadius: "lg",
-          width: "full"
-        }
-      }, /* @__PURE__ */React.createElement(Flex4, {
-        sx: {
-          width: "full",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: "2"
-        }
-      }, /* @__PURE__ */React.createElement(Text3, {
-        sx: {
-          fontSize: "sm",
-          textAlign: "center"
-        }
-      }, parameter.name), /* @__PURE__ */React.createElement(Text3, {
-        sx: {
-          fontWeight: "semibold",
-          fontSize: "lg"
-        }
-      }, parameter.value)));
-    }));
-  }));
-}, "PlanCardMetadataSlot");
-
-// src/components/planCard/PlanCardPriceSlot.tsx
-import { Flex as Flex5, Text as Text4 } from "@ttoss/ui";
-var PlanCardPriceSlot = /* @__PURE__ */__name(({
-  price,
-  variant = "primary"
-}) => {
-  const variantStyles = getPlanCardVariantStyles(variant);
-  return /* @__PURE__ */React.createElement(Flex5, {
-    sx: {
-      paddingY: "6",
-      paddingX: "8",
-      width: "full",
-      alignItems: "center",
-      flexDirection: "column",
-      gap: "3"
-    }
-  }, /* @__PURE__ */React.createElement(Flex5, {
-    sx: {
-      alignItems: "baseline",
-      gap: "4",
-      justifyContent: "center"
-    }
-  }, /* @__PURE__ */React.createElement(Text4, {
-    sx: {
-      fontSize: "4xl",
-      fontWeight: "bold",
-      color: variantStyles.color
-    }
-  }, price.value), /* @__PURE__ */React.createElement(Text4, {
-    sx: {
-      fontSize: "sm",
-      color: variantStyles.secondaryColor
-    }
-  }, price.interval)), price.description && /* @__PURE__ */React.createElement(Text4, {
-    sx: {
-      fontSize: "md",
-      color: variantStyles.secondaryColor
-    }
-  }, price.description));
-}, "PlanCardPriceSlot");
-
-// src/components/planCard/PlanCardTopTagSlot.tsx
-import { Box as Box3 } from "@ttoss/ui";
-var PlanCardTopTagSlot = /* @__PURE__ */__name(({
-  children
-}) => {
-  return /* @__PURE__ */React.createElement(Box3, {
-    sx: {
-      padding: "4"
-    }
-  }, children);
-}, "PlanCardTopTagSlot");
-
-// src/components/planCard/PlanCard.tsx
-var PlanCard = /* @__PURE__ */__name(props => {
-  const {
-    variant = "primary",
-    topTag,
-    title,
-    subtitle,
-    metadata = [],
-    metadataVariant,
-    price,
-    features = [],
-    buttonProps,
-    ...cardProps
-  } = props;
-  const effectiveMetadataVariant = metadataVariant ?? variant;
-  const variantStyles = getPlanCardVariantStyles(variant);
-  return /* @__PURE__ */React.createElement(Card, {
-    ...cardProps,
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      width: "full",
-      maxWidth: "410px",
-      backgroundColor: variantStyles.backgroundColor,
-      borderColor: variantStyles.borderColor,
-      ...cardProps.sx
-    }
-  }, topTag && /* @__PURE__ */React.createElement(PlanCardTopTagSlot, {
-    variant
-  }, topTag), /* @__PURE__ */React.createElement(PlanCardHeaderSlot, {
-    title,
-    subtitle,
-    hasTopTag: Boolean(topTag),
-    variant
-  }), metadata.length > 0 && /* @__PURE__ */React.createElement(Box4, {
-    sx: {
-      paddingY: "4",
-      paddingX: "8",
-      width: "full"
-    }
-  }, /* @__PURE__ */React.createElement(PlanCardMetadataSlot, {
-    metadata,
-    variant: effectiveMetadataVariant
-  })), /* @__PURE__ */React.createElement(PlanCardPriceSlot, {
-    price,
-    variant
-  }), features.length > 0 && /* @__PURE__ */React.createElement(PlanCardFeaturesSlot, {
-    features,
-    variant
-  }), /* @__PURE__ */React.createElement(PlanCardCtaSlot, {
-    buttonProps,
-    variant
-  }));
-}, "PlanCard");
-
-// src/components/plansPanel/PlansPanel.tsx
-import { Flex as Flex6, SegmentedControl, Stack as Stack3, Text as Text5 } from "@ttoss/ui";
-import * as React3 from "react";
-var PlansPanel = /* @__PURE__ */__name(({
-  filters = [],
-  plans,
-  activePlanId,
-  onSelectPlan,
-  filterValues: controlledFilterValues,
-  onFilterChange
-}) => {
-  const [internalFilterValues, setInternalFilterValues] = React3.useState(() => {
-    const initial = {};
-    for (const filter of filters) {
-      if (filter.defaultValue !== void 0) {
-        initial[filter.id] = filter.defaultValue;
-      }
-    }
-    return initial;
-  });
-  const isControlled = controlledFilterValues !== void 0;
-  const activeFilterValues = isControlled ? controlledFilterValues : internalFilterValues;
-  const handleFilterChange = /* @__PURE__ */__name((id, value) => {
-    const strValue = String(value);
-    if (isControlled) {
-      onFilterChange?.(id, strValue);
-    } else {
-      setInternalFilterValues(prev => {
-        return {
-          ...prev,
-          [id]: strValue
-        };
-      });
-    }
-  }, "handleFilterChange");
-  const visiblePlans = plans.filter(plan => {
-    if (!plan.filterValues || Object.keys(plan.filterValues).length === 0) {
-      return true;
-    }
-    return Object.entries(activeFilterValues).every(([filterId, filterValue]) => {
-      if (!plan.filterValues || !(filterId in plan.filterValues)) {
-        return true;
-      }
-      return plan.filterValues[filterId] === filterValue;
-    });
-  });
-  return /* @__PURE__ */React3.createElement(Stack3, {
-    sx: {
-      gap: "6",
-      width: "full",
-      alignItems: "center"
-    }
-  }, filters.length > 0 && /* @__PURE__ */React3.createElement(Stack3, {
-    sx: {
-      gap: "4",
-      alignItems: "center"
-    }
-  }, filters.map(filter => {
-    return /* @__PURE__ */React3.createElement(Stack3, {
-      key: filter.id,
-      sx: {
-        gap: "2",
-        alignItems: "center"
-      }
-    }, filter.label && /* @__PURE__ */React3.createElement(Text5, {
-      sx: {
-        fontWeight: "semibold",
-        color: "display.text.primary.default"
-      }
-    }, filter.label), /* @__PURE__ */React3.createElement(SegmentedControl, {
-      options: filter.options,
-      value: isControlled ? controlledFilterValues[filter.id] ?? filter.defaultValue : activeFilterValues[filter.id],
-      defaultValue: isControlled ? void 0 : filter.defaultValue,
-      onChange: /* @__PURE__ */__name(value => {
-        return handleFilterChange(filter.id, value);
-      }, "onChange")
-    }));
-  })), /* @__PURE__ */React3.createElement(Flex6, {
-    sx: {
-      flexWrap: "wrap",
-      gap: "4",
-      width: "full",
-      justifyContent: "center"
-    }
-  }, visiblePlans.map(plan => {
-    const isActive = plan.id === activePlanId;
-    const effectiveVariant = isActive ? "secondary" : plan.variant ?? "primary";
-    return /* @__PURE__ */React3.createElement(PlanCard, {
-      key: plan.id,
-      title: plan.title,
-      subtitle: plan.subtitle,
-      price: plan.price,
-      features: plan.features,
-      metadata: plan.metadata,
-      variant: effectiveVariant,
-      topTag: plan.topTag,
-      buttonProps: {
-        ...plan.buttonProps,
-        onClick: /* @__PURE__ */__name(e => {
-          onSelectPlan?.(plan.id);
-          plan.buttonProps?.onClick?.(e);
-        }, "onClick")
-      }
-    });
-  })));
-}, "PlansPanel");
-
-// src/components/subscriptionPanel/SubscriptionPanel.tsx
-import { EnhancedTitle } from "@ttoss/components/EnhancedTitle";
-import { MetricCard } from "@ttoss/components/MetricCard";
-import { Card as Card2, Flex as Flex8, Spinner } from "@ttoss/ui";
-
-// src/components/subscriptionPanel/SubscriptionPanel.styles.ts
-import { keyframes } from "@ttoss/ui";
-var gradientFlow = keyframes({
-  "0%": {
-    backgroundPosition: "0% 50%"
-  },
-  "50%": {
-    backgroundPosition: "100% 50%"
-  },
-  "100%": {
-    backgroundPosition: "0% 50%"
-  }
-});
-var getAccentGradientBackground = /* @__PURE__ */__name(t => {
-  const theme = t;
-  const start = theme.colors?.action?.background?.accent?.default || theme.colors?.input?.background?.accent?.default;
-  if (!start) return void 0;
-  const middle = theme.colors?.action?.background?.accent?.active || theme.colors?.input?.background?.accent?.active || start;
-  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
-}, "getAccentGradientBackground");
-var getPrimaryGradientBackground = /* @__PURE__ */__name(t => {
-  const theme = t;
-  const start = theme.colors?.action?.background?.primary?.default;
-  if (!start) return void 0;
-  const middle = theme.colors?.action?.background?.secondary?.default || start;
-  return `linear-gradient(270deg, ${start}, ${middle}, ${start})`;
-}, "getPrimaryGradientBackground");
-var getVariantStyles = /* @__PURE__ */__name(variantType => {
-  const variants = {
-    "spotlight-accent": {
-      backgroundColor: "input.background.accent.default",
-      color: "action.text.accent.default",
-      borderColor: "display.border.muted.default",
-      gradientBackground: getAccentGradientBackground
-    },
-    "spotlight-primary": {
-      backgroundColor: "action.background.primary.default",
-      color: "display.text.accent.default",
-      borderColor: "display.border.muted.default",
-      gradientBackground: getPrimaryGradientBackground
-    },
-    primary: {
-      backgroundColor: "action.background.primary.default",
-      color: "action.text.primary.default",
-      borderColor: "display.border.muted.default",
-      gradientBackground: void 0
-    },
-    secondary: {
-      backgroundColor: "action.background.secondary.default",
-      color: "action.text.primary.default",
-      borderColor: "display.border.muted.default",
-      gradientBackground: void 0
-    },
-    accent: {
-      backgroundColor: "action.background.accent.default",
-      color: "action.text.accent.default",
-      borderColor: "display.border.muted.default",
-      gradientBackground: void 0
-    }
-  };
-  return variants[variantType] || variants["spotlight-accent"];
-}, "getVariantStyles");
-var getSubscriptionPanelAccentBarSx = /* @__PURE__ */__name((variant = "spotlight-accent") => {
-  const variantStyles = getVariantStyles(variant);
-  const isSpotlight = variant.startsWith("spotlight-");
-  const gradientBg = variant === "spotlight-accent" ? getAccentGradientBackground : getPrimaryGradientBackground;
-  return {
-    height: "12px",
-    width: "full",
-    borderTopLeftRadius: "lg",
-    borderTopRightRadius: "lg",
-    backgroundColor: variantStyles.backgroundColor,
-    color: variantStyles.color,
-    borderColor: variantStyles.borderColor,
-    ...(isSpotlight ? {
-      background: gradientBg,
-      backgroundSize: "400% 400%",
-      animation: `${gradientFlow} 6s ease infinite`
-    } : {})
-  };
-}, "getSubscriptionPanelAccentBarSx");
-var SubscriptionPanelAccentBarSx = getSubscriptionPanelAccentBarSx("spotlight-accent");
-
-// src/components/subscriptionPanel/SubscriptionPanelActionsSlot.tsx
-import { Icon as Icon3 } from "@ttoss/react-icons";
-import { Button as Button2, Flex as Flex7 } from "@ttoss/ui";
-var SubscriptionPanelActionsSlot = /* @__PURE__ */__name(({
-  actions
-}) => {
-  if (actions.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */React.createElement(Flex7, {
-    sx: {
-      gap: "3",
-      flexDirection: ["column", "row"],
-      flexShrink: 0,
-      paddingX: "6",
-      paddingBottom: "6"
-    }
-  }, actions.map((action, index) => {
-    const {
-      label,
-      onClick,
-      leftIcon,
-      isLoading,
-      variant = "secondary",
-      disabled,
-      ...buttonProps
-    } = action;
-    return /* @__PURE__ */React.createElement(Button2, {
-      key: index,
-      onClick,
-      variant,
-      disabled: disabled || isLoading,
-      leftIcon: isLoading ? void 0 : leftIcon,
-      sx: {
-        gap: "2",
-        justifyContent: "center",
-        minWidth: "fit-content"
-      },
-      ...buttonProps
-    }, isLoading ? /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Icon3, {
-      icon: "fluent:spinner-ios-20-regular"
-    }), "Processando...") : label);
-  }));
-}, "SubscriptionPanelActionsSlot");
-
-// src/components/subscriptionPanel/SubscriptionPanel.tsx
-var renderMetricCard = /* @__PURE__ */__name(params => {
-  const {
-    metric,
-    index,
-    isLoading
-  } = params;
-  return /* @__PURE__ */React.createElement(MetricCard, {
-    key: index,
-    metric,
-    isLoading
-  });
-}, "renderMetricCard");
-var SubscriptionPanel = /* @__PURE__ */__name(({
-  variant = "accent",
-  icon,
-  planName,
-  price,
-  status,
-  features = [],
-  actions = [],
-  metrics = [],
-  isLoading = false
-}) => {
-  if (isLoading) {
-    return /* @__PURE__ */React.createElement(Card2, {
-      sx: {
-        width: "full",
-        height: "400px",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    }, /* @__PURE__ */React.createElement(Spinner, null));
-  }
-  return /* @__PURE__ */React.createElement(Card2, {
-    sx: {
-      width: "full"
-    }
-  }, /* @__PURE__ */React.createElement(Flex8, {
-    sx: getSubscriptionPanelAccentBarSx(variant)
-  }), /* @__PURE__ */React.createElement(Flex8, {
-    sx: {
-      width: "full",
-      paddingX: "6",
-      paddingY: "6",
-      flexDirection: "column"
-    }
-  }, /* @__PURE__ */React.createElement(Flex8, {
-    sx: {
-      paddingY: "10",
-      paddingX: "3",
-      width: "full",
-      flexDirection: ["column", "column", "row"],
-      alignItems: ["stretch", "stretch", "center"],
-      justifyContent: "space-between",
-      gap: "6",
-      borderBottom: "sm",
-      borderBottomColor: "display.border.muted.default"
-    }
-  }, /* @__PURE__ */React.createElement(EnhancedTitle, {
-    variant,
-    icon,
-    title: planName,
-    frontTitle: price.interval ? `${price.value}/${price.interval}` : price.value,
-    topBadges: [
-    // Status badge
-    ...(status.status === "active" ? [{
-      label: "Ativo",
-      variant: "positive",
-      icon: "fluent:checkmark-circle-24-filled"
-    }] : status.status === "inactive" ? [{
-      label: "Inativo",
-      variant: "muted",
-      icon: "fluent:dismiss-circle-24-filled"
-    }] : [{
-      label: "Cancelado",
-      variant: "negative",
-      icon: "fluent:error-circle-24-filled"
-    }]),
-    // Interval badge
-    ...(status.interval ? [{
-      label: status.interval,
-      variant: "informative"
-    }] : []),
-    // Scheduled update badge
-    ...(status.hasScheduledUpdate ? [{
-      label: "Altera\xE7\xE3o Agendada",
-      variant: "informative",
-      icon: "fluent:clock-24-regular"
-    }] : []),
-    // Cancellation badge
-    ...(status.hasCancellation ? [{
-      label: "Renova\xE7\xE3o Cancelada",
-      variant: "negative",
-      icon: "fluent:dismiss-circle-24-regular"
-    }] : [])],
-    bottomBadges: features.map(feature => {
-      return {
-        label: feature.label,
-        icon: typeof feature.icon === "string" ? feature.icon : "fluent:checkmark-24-filled",
-        variant: "muted"
-      };
-    })
-  }), actions.length > 0 && /* @__PURE__ */React.createElement(SubscriptionPanelActionsSlot, {
-    actions
-  })), metrics.length > 0 && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Flex8, {
-    sx: {
-      paddingY: "10",
-      paddingX: "3",
-      width: "full",
-      flexWrap: "wrap",
-      gap: "10",
-      justifyContent: "center"
-    }
-  }, metrics.map((metric, index) => {
-    return renderMetricCard({
-      metric,
-      index,
-      isLoading
-    });
-  })))));
-}, "SubscriptionPanel");
-export { PlanCard, PlansPanel, SubscriptionPanel };