@birdycom/omniaui-react 0.12.3 → 0.12.4

package/dist/index.d.ts

@@ -1489,8 +1489,10 @@ interface PriceCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     monthly: PriceCardPrice;
     /** Without a yearly price the toggle is not rendered. */
     yearly?: PriceCardPrice;
+    /** Optional third option, e.g. a one-time price. Needs `yearly`. */
+    lifetime?: PriceCardPrice;
     /** Period that is selected first (uncontrolled radio). */
-    defaultPeriod?: "monthly" | "yearly";
+    defaultPeriod?: "monthly" | "yearly" | "lifetime";
     features?: PriceCardFeature[];
     /** Call to action, e.g. <a className="oc-btn oc-price-card__cta">. */
     cta?: ReactNode;
@@ -1498,8 +1500,9 @@ interface PriceCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
     /** Labels of the toggle. */
     monthlyLabel?: ReactNode;
     yearlyLabel?: ReactNode;
+    lifetimeLabel?: ReactNode;
 }
-/** `<article class="oc-price-card">`: plan card with a CSS-only monthly / yearly switch. */
+/** `<article class="oc-price-card">`: plan card with a CSS-only monthly / yearly (/ lifetime) switch. */
 declare const PriceCard: react.ForwardRefExoticComponent<PriceCardProps & react.RefAttributes<HTMLElement>>;
 
 type ProductMarkSize = "sm" | "default" | "lg" | "xl";

package/dist/index.js

@@ -2976,12 +2976,14 @@ var PriceCard = forwardRef74(function PriceCard2({
   discount,
   monthly,
   yearly,
+  lifetime,
   defaultPeriod = "monthly",
   features = [],
   cta,
   featured = false,
   monthlyLabel = "Monthly",
   yearlyLabel = "Yearly",
+  lifetimeLabel = "Lifetime",
   className,
   ...rest
 }, ref) {
@@ -3002,10 +3004,16 @@ var PriceCard = forwardRef74(function PriceCard2({
         /* @__PURE__ */ jsx76("input", { type: "radio", name: group, value: "yearly", defaultChecked: defaultPeriod === "yearly" }),
         " ",
         yearlyLabel
+      ] }),
+      lifetime && /* @__PURE__ */ jsxs60("label", { className: "oc-segmented-item", children: [
+        /* @__PURE__ */ jsx76("input", { type: "radio", name: group, value: "lifetime", defaultChecked: defaultPeriod === "lifetime" }),
+        " ",
+        lifetimeLabel
       ] })
     ] }),
     /* @__PURE__ */ jsx76(Price, { kind: "monthly", price: monthly }),
     yearly && /* @__PURE__ */ jsx76(Price, { kind: "yearly", price: yearly }),
+    yearly && lifetime && /* @__PURE__ */ jsx76(Price, { kind: "lifetime", price: lifetime }),
     features.length > 0 && /* @__PURE__ */ jsx76("ul", { className: "oc-price-card__features", children: features.map((f, i) => /* @__PURE__ */ jsx76("li", { className: cx("oc-price-card__feature", f.excluded && "oc-price-card__feature--excluded"), children: f.label }, i)) }),
     cta
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-react",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "description": "OmniaUI for React: typed function components and page blocks that render the exact @birdycom/omniaui and @birdycom/omniaui-blocks markup.",
   "type": "module",
   "license": "MIT",

package/src/components/PriceCard.tsx

@@ -25,8 +25,10 @@ export interface PriceCardProps extends Omit<HTMLAttributes<HTMLElement>, "title
   monthly: PriceCardPrice;
   /** Without a yearly price the toggle is not rendered. */
   yearly?: PriceCardPrice;
+  /** Optional third option, e.g. a one-time price. Needs `yearly`. */
+  lifetime?: PriceCardPrice;
   /** Period that is selected first (uncontrolled radio). */
-  defaultPeriod?: "monthly" | "yearly";
+  defaultPeriod?: "monthly" | "yearly" | "lifetime";
   features?: PriceCardFeature[];
   /** Call to action, e.g. <a className="oc-btn oc-price-card__cta">. */
   cta?: ReactNode;
@@ -34,9 +36,10 @@ export interface PriceCardProps extends Omit<HTMLAttributes<HTMLElement>, "title
   /** Labels of the toggle. */
   monthlyLabel?: ReactNode;
   yearlyLabel?: ReactNode;
+  lifetimeLabel?: ReactNode;
 }
 
-function Price({ kind, price }: { kind: "monthly" | "yearly"; price: PriceCardPrice }) {
+function Price({ kind, price }: { kind: "monthly" | "yearly" | "lifetime"; price: PriceCardPrice }) {
   return (
     <p className={`oc-price-card__price oc-price-card__price--${kind}`}>
       <span className="oc-price-card__amount">{price.amount}</span>
@@ -47,10 +50,10 @@ function Price({ kind, price }: { kind: "monthly" | "yearly"; price: PriceCardPr
   );
 }
 
-/** `<article class="oc-price-card">`: plan card with a CSS-only monthly / yearly switch. */
+/** `<article class="oc-price-card">`: plan card with a CSS-only monthly / yearly (/ lifetime) switch. */
 export const PriceCard = forwardRef<HTMLElement, PriceCardProps>(function PriceCard(
-  { name, description, discount, monthly, yearly, defaultPeriod = "monthly", features = [], cta, featured = false,
-    monthlyLabel = "Monthly", yearlyLabel = "Yearly", className, ...rest },
+  { name, description, discount, monthly, yearly, lifetime, defaultPeriod = "monthly", features = [], cta, featured = false,
+    monthlyLabel = "Monthly", yearlyLabel = "Yearly", lifetimeLabel = "Lifetime", className, ...rest },
   ref,
 ) {
   // Every card needs its own radio group name.
@@ -66,10 +69,12 @@ export const PriceCard = forwardRef<HTMLElement, PriceCardProps>(function PriceC
         <div className="oc-segmented oc-price-card__toggle" role="radiogroup" aria-label="Billing period">
           <label className="oc-segmented-item"><input type="radio" name={group} value="monthly" defaultChecked={defaultPeriod === "monthly"} /> {monthlyLabel}</label>
           <label className="oc-segmented-item"><input type="radio" name={group} value="yearly" defaultChecked={defaultPeriod === "yearly"} /> {yearlyLabel}</label>
+          {lifetime && <label className="oc-segmented-item"><input type="radio" name={group} value="lifetime" defaultChecked={defaultPeriod === "lifetime"} /> {lifetimeLabel}</label>}
         </div>
       )}
       <Price kind="monthly" price={monthly} />
       {yearly && <Price kind="yearly" price={yearly} />}
+      {yearly && lifetime && <Price kind="lifetime" price={lifetime} />}
       {features.length > 0 && (
         <ul className="oc-price-card__features">
           {features.map((f, i) => (