@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/PasswordInput.tsx

@@ -1,36 +1,36 @@
-"use client";
-
-import { forwardRef, useState } from "react";
-import type { InputHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
-  showLabel?: string;
-  hideLabel?: string;
-  /** Accessible name of the toggle button. */
-  toggleLabel?: string;
-  error?: boolean;
-}
-
-/** Password field with a show / hide button (`aria-pressed`), inside `.oc-input-reveal`. */
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(function PasswordInput(
-  { showLabel = "Show", hideLabel = "Hide", toggleLabel = "Toggle password visibility", error, className, ...rest },
-  ref,
-) {
-  const [shown, setShown] = useState(false);
-  return (
-    <div className="oc-input-reveal">
-      <input
-        ref={ref}
-        className={cx("oc-input", error && "oc-input--error", className)}
-        type={shown ? "text" : "password"}
-        autoComplete="current-password"
-        aria-invalid={error ? true : undefined}
-        {...rest}
-      />
-      <button className="oc-input-reveal-button" type="button" aria-pressed={shown} aria-label={toggleLabel} onClick={() => setShown((s) => !s)}>
-        {shown ? hideLabel : showLabel}
-      </button>
-    </div>
-  );
-});
+"use client";
+
+import { forwardRef, useState } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  showLabel?: string;
+  hideLabel?: string;
+  /** Accessible name of the toggle button. */
+  toggleLabel?: string;
+  error?: boolean;
+}
+
+/** Password field with a show / hide button (`aria-pressed`), inside `.oc-input-reveal`. */
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(function PasswordInput(
+  { showLabel = "Show", hideLabel = "Hide", toggleLabel = "Toggle password visibility", error, className, ...rest },
+  ref,
+) {
+  const [shown, setShown] = useState(false);
+  return (
+    <div className="oc-input-reveal">
+      <input
+        ref={ref}
+        className={cx("oc-input", error && "oc-input--error", className)}
+        type={shown ? "text" : "password"}
+        autoComplete="current-password"
+        aria-invalid={error ? true : undefined}
+        {...rest}
+      />
+      <button className="oc-input-reveal-button" type="button" aria-pressed={shown} aria-label={toggleLabel} onClick={() => setShown((s) => !s)}>
+        {shown ? hideLabel : showLabel}
+      </button>
+    </div>
+  );
+});

package/src/components/PasswordRequirements.tsx

@@ -1,46 +1,46 @@
-// File: packages/react/src/components/PasswordRequirements.tsx
-// Map: rule type + default rules -> component (live list, --met per rule)
-// Same markup as packages/ui/snippets/password-requirements.html.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface PasswordRule {
-  label: ReactNode;
-  /** True when the password meets the rule. */
-  test: (password: string) => boolean;
-}
-
-/** Common rules: length, uppercase, number, symbol. Pass your own list to change them. */
-export const defaultPasswordRules: PasswordRule[] = [
-  { label: "At least 8 characters", test: (p) => p.length >= 8 },
-  { label: "One uppercase letter", test: (p) => /[A-Z]/.test(p) },
-  { label: "One number", test: (p) => /[0-9]/.test(p) },
-  { label: "One symbol", test: (p) => /[^A-Za-z0-9]/.test(p) },
-];
-
-export interface PasswordRequirementsProps extends HTMLAttributes<HTMLUListElement> {
-  password: string;
-  rules?: PasswordRule[];
-  /** Rules side by side. */
-  inline?: boolean;
-  /** Render nothing until the user types. */
-  hideWhenEmpty?: boolean;
-}
-
-/** `.oc-password-requirements`: each rule turns green (--met) as soon as it passes. */
-export const PasswordRequirements = forwardRef<HTMLUListElement, PasswordRequirementsProps>(function PasswordRequirements(
-  { password, rules = defaultPasswordRules, inline, hideWhenEmpty, className, ...rest },
-  ref,
-) {
-  if (hideWhenEmpty && !password) return null;
-  return (
-    <ul ref={ref} className={cx("oc-password-requirements", inline && "oc-password-requirements--inline", className)} aria-live="polite" {...rest}>
-      {rules.map((rule, i) => (
-        <li key={i} className={cx("oc-password-requirement", rule.test(password) && "oc-password-requirement--met")}>
-          {rule.label}
-        </li>
-      ))}
-    </ul>
-  );
-});
+// File: packages/react/src/components/PasswordRequirements.tsx
+// Map: rule type + default rules -> component (live list, --met per rule)
+// Same markup as packages/ui/snippets/password-requirements.html.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface PasswordRule {
+  label: ReactNode;
+  /** True when the password meets the rule. */
+  test: (password: string) => boolean;
+}
+
+/** Common rules: length, uppercase, number, symbol. Pass your own list to change them. */
+export const defaultPasswordRules: PasswordRule[] = [
+  { label: "At least 8 characters", test: (p) => p.length >= 8 },
+  { label: "One uppercase letter", test: (p) => /[A-Z]/.test(p) },
+  { label: "One number", test: (p) => /[0-9]/.test(p) },
+  { label: "One symbol", test: (p) => /[^A-Za-z0-9]/.test(p) },
+];
+
+export interface PasswordRequirementsProps extends HTMLAttributes<HTMLUListElement> {
+  password: string;
+  rules?: PasswordRule[];
+  /** Rules side by side. */
+  inline?: boolean;
+  /** Render nothing until the user types. */
+  hideWhenEmpty?: boolean;
+}
+
+/** `.oc-password-requirements`: each rule turns green (--met) as soon as it passes. */
+export const PasswordRequirements = forwardRef<HTMLUListElement, PasswordRequirementsProps>(function PasswordRequirements(
+  { password, rules = defaultPasswordRules, inline, hideWhenEmpty, className, ...rest },
+  ref,
+) {
+  if (hideWhenEmpty && !password) return null;
+  return (
+    <ul ref={ref} className={cx("oc-password-requirements", inline && "oc-password-requirements--inline", className)} aria-live="polite" {...rest}>
+      {rules.map((rule, i) => (
+        <li key={i} className={cx("oc-password-requirement", rule.test(password) && "oc-password-requirement--met")}>
+          {rule.label}
+        </li>
+      ))}
+    </ul>
+  );
+});

package/src/components/PhoneInput.tsx

@@ -1,93 +1,93 @@
-// File: packages/react/src/components/PhoneInput.tsx
-// Map: types -> helpers (split value, group digits) -> component (dial select + tel input)
-// Same markup as packages/ui/snippets/phone-input.html. The only JS: digit grouping and joining dial + number.
-"use client";
-
-import { forwardRef, useState } from "react";
-import type { InputHTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface PhoneCountry {
-  /** Dial code with plus sign, e.g. "+32". */
-  dial: string;
-  /** Text in the select, e.g. "BE +32". */
-  label: string;
-}
-
-export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> {
-  /** Full value without spaces, e.g. "+32470123456" (empty string = no number). */
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  countries?: PhoneCountry[];
-  /** Dial code used while the value is empty. */
-  defaultDial?: string;
-  size?: "sm" | "md";
-  error?: boolean;
-  /** Accessible name of the dial code select. */
-  dialLabel?: string;
-}
-
-const DEFAULT_COUNTRIES: PhoneCountry[] = [
-  { dial: "+32", label: "BE +32" },
-  { dial: "+31", label: "NL +31" },
-  { dial: "+33", label: "FR +33" },
-  { dial: "+49", label: "DE +49" },
-];
-
-/** "470123456" -> "470 12 34 56": a group of 3, then pairs (readable for most European numbers). */
-export function formatPhoneNational(digits: string): string {
-  const clean = digits.replace(/\D/g, "");
-  const head = clean.slice(0, 3);
-  const pairs = clean.slice(3).match(/.{1,2}/g) ?? [];
-  return [head, ...pairs].filter(Boolean).join(" ");
-}
-
-/** Split "+32470..." into the known dial code (longest match) and the national digits. */
-function splitPhone(full: string, countries: PhoneCountry[]) {
-  const match = [...countries].sort((a, b) => b.dial.length - a.dial.length).find((c) => full.startsWith(c.dial));
-  return match ? { dial: match.dial, national: full.slice(match.dial.length) } : { dial: "", national: full.replace(/^\+/, "") };
-}
-
-/** `.oc-phone-input`: country dial code + national number. Emits one value: dial + digits. */
-export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function PhoneInput(
-  { value, defaultValue, onChange, countries = DEFAULT_COUNTRIES, defaultDial, size = "md", error, dialLabel = "Country code", className, disabled, ...rest },
-  ref,
-) {
-  const [full, setFull] = useControllable<string>(value, defaultValue ?? "", onChange);
-  const parsed = splitPhone(full, countries);
-  // Remember the chosen dial code, also while the number is still empty.
-  const [dialState, setDialState] = useState(parsed.dial || defaultDial || countries[0]?.dial || "");
-  const dial = parsed.dial || dialState;
-
-  const emit = (nextDial: string, national: string) => {
-    setDialState(nextDial);
-    const digits = national.replace(/\D/g, "");
-    setFull(digits ? nextDial + digits : "");
-  };
-
-  return (
-    <div className={cx("oc-phone-input", size === "sm" && "oc-phone-input--sm", error && "oc-phone-input--error", className)}>
-      <select className="oc-phone-input-dial" aria-label={dialLabel} value={dial} disabled={disabled} onChange={(e) => emit(e.target.value, parsed.national)}>
-        {countries.map((c) => (
-          <option key={c.dial} value={c.dial}>
-            {c.label}
-          </option>
-        ))}
-      </select>
-      <input
-        ref={ref}
-        className="oc-phone-input-number"
-        type="tel"
-        inputMode="tel"
-        autoComplete="tel-national"
-        aria-invalid={error ? true : undefined}
-        disabled={disabled}
-        value={formatPhoneNational(parsed.national)}
-        onChange={(e) => emit(dial, e.target.value)}
-        {...rest}
-      />
-    </div>
-  );
-});
+// File: packages/react/src/components/PhoneInput.tsx
+// Map: types -> helpers (split value, group digits) -> component (dial select + tel input)
+// Same markup as packages/ui/snippets/phone-input.html. The only JS: digit grouping and joining dial + number.
+"use client";
+
+import { forwardRef, useState } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface PhoneCountry {
+  /** Dial code with plus sign, e.g. "+32". */
+  dial: string;
+  /** Text in the select, e.g. "BE +32". */
+  label: string;
+}
+
+export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> {
+  /** Full value without spaces, e.g. "+32470123456" (empty string = no number). */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  countries?: PhoneCountry[];
+  /** Dial code used while the value is empty. */
+  defaultDial?: string;
+  size?: "sm" | "md";
+  error?: boolean;
+  /** Accessible name of the dial code select. */
+  dialLabel?: string;
+}
+
+const DEFAULT_COUNTRIES: PhoneCountry[] = [
+  { dial: "+32", label: "BE +32" },
+  { dial: "+31", label: "NL +31" },
+  { dial: "+33", label: "FR +33" },
+  { dial: "+49", label: "DE +49" },
+];
+
+/** "470123456" -> "470 12 34 56": a group of 3, then pairs (readable for most European numbers). */
+export function formatPhoneNational(digits: string): string {
+  const clean = digits.replace(/\D/g, "");
+  const head = clean.slice(0, 3);
+  const pairs = clean.slice(3).match(/.{1,2}/g) ?? [];
+  return [head, ...pairs].filter(Boolean).join(" ");
+}
+
+/** Split "+32470..." into the known dial code (longest match) and the national digits. */
+function splitPhone(full: string, countries: PhoneCountry[]) {
+  const match = [...countries].sort((a, b) => b.dial.length - a.dial.length).find((c) => full.startsWith(c.dial));
+  return match ? { dial: match.dial, national: full.slice(match.dial.length) } : { dial: "", national: full.replace(/^\+/, "") };
+}
+
+/** `.oc-phone-input`: country dial code + national number. Emits one value: dial + digits. */
+export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function PhoneInput(
+  { value, defaultValue, onChange, countries = DEFAULT_COUNTRIES, defaultDial, size = "md", error, dialLabel = "Country code", className, disabled, ...rest },
+  ref,
+) {
+  const [full, setFull] = useControllable<string>(value, defaultValue ?? "", onChange);
+  const parsed = splitPhone(full, countries);
+  // Remember the chosen dial code, also while the number is still empty.
+  const [dialState, setDialState] = useState(parsed.dial || defaultDial || countries[0]?.dial || "");
+  const dial = parsed.dial || dialState;
+
+  const emit = (nextDial: string, national: string) => {
+    setDialState(nextDial);
+    const digits = national.replace(/\D/g, "");
+    setFull(digits ? nextDial + digits : "");
+  };
+
+  return (
+    <div className={cx("oc-phone-input", size === "sm" && "oc-phone-input--sm", error && "oc-phone-input--error", className)}>
+      <select className="oc-phone-input-dial" aria-label={dialLabel} value={dial} disabled={disabled} onChange={(e) => emit(e.target.value, parsed.national)}>
+        {countries.map((c) => (
+          <option key={c.dial} value={c.dial}>
+            {c.label}
+          </option>
+        ))}
+      </select>
+      <input
+        ref={ref}
+        className="oc-phone-input-number"
+        type="tel"
+        inputMode="tel"
+        autoComplete="tel-national"
+        aria-invalid={error ? true : undefined}
+        disabled={disabled}
+        value={formatPhoneNational(parsed.national)}
+        onChange={(e) => emit(dial, e.target.value)}
+        {...rest}
+      />
+    </div>
+  );
+});

package/src/components/Popover.tsx

@@ -1,34 +1,34 @@
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-import { Button } from "./Button";
-import type { ButtonProps } from "./Button";
-
-export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  /** Content of the trigger button. */
-  trigger: ReactNode;
-  triggerProps?: ButtonProps;
-  size?: "sm" | "md" | "lg";
-  title?: ReactNode;
-  /** Short body text (`oc-popover-text`). */
-  text?: ReactNode;
-}
-
-/** Trigger + `<div class="oc-popover" popover>` floating panel. */
-export const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
-  { trigger, triggerProps, size = "md", title, text, className, id, children, ...rest },
-  ref,
-) {
-  const auto = useId();
-  const panelId = id ?? `oc-popover-${auto.replace(/:/g, "")}`;
-  return (
-    <>
-      <Button variant="outline" type="button" {...triggerProps} {...attrs({ popovertarget: panelId })}>{trigger}</Button>
-      <div ref={ref} className={cx("oc-popover", size !== "md" && `oc-popover--${size}`, className)} id={panelId} {...attrs({ popover: "" })} {...rest}>
-        {title != null && <h3 className="oc-popover-title">{title}</h3>}
-        {text != null && <p className="oc-popover-text">{text}</p>}
-        {children}
-      </div>
-    </>
-  );
-});
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { Button } from "./Button";
+import type { ButtonProps } from "./Button";
+
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Content of the trigger button. */
+  trigger: ReactNode;
+  triggerProps?: ButtonProps;
+  size?: "sm" | "md" | "lg";
+  title?: ReactNode;
+  /** Short body text (`oc-popover-text`). */
+  text?: ReactNode;
+}
+
+/** Trigger + `<div class="oc-popover" popover>` floating panel. */
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
+  { trigger, triggerProps, size = "md", title, text, className, id, children, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const panelId = id ?? `oc-popover-${auto.replace(/:/g, "")}`;
+  return (
+    <>
+      <Button variant="outline" type="button" {...triggerProps} {...attrs({ popovertarget: panelId })}>{trigger}</Button>
+      <div ref={ref} className={cx("oc-popover", size !== "md" && `oc-popover--${size}`, className)} id={panelId} {...attrs({ popover: "" })} {...rest}>
+        {title != null && <h3 className="oc-popover-title">{title}</h3>}
+        {text != null && <p className="oc-popover-text">{text}</p>}
+        {children}
+      </div>
+    </>
+  );
+});

package/src/components/PriceCard.tsx

@@ -1,83 +1,83 @@
-// File: packages/react/src/components/PriceCard.tsx | Map: types -> PriceCard (head -> toggle (radios) -> prices -> features -> cta)
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface PriceCardFeature {
-  label: ReactNode;
-  /** Shown with a cross and muted text. */
-  excluded?: boolean;
-}
-
-export interface PriceCardPrice {
-  amount: ReactNode;
-  period?: ReactNode;
-  /** Old price (struck through). */
-  was?: ReactNode;
-  note?: ReactNode;
-}
-
-export interface PriceCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  name: ReactNode;
-  description?: ReactNode;
-  /** Badge such as "Save 20%". */
-  discount?: ReactNode;
-  monthly: PriceCardPrice;
-  /** Without a yearly price the toggle is not rendered. */
-  yearly?: PriceCardPrice;
-  /** Period that is selected first (uncontrolled radio). */
-  defaultPeriod?: "monthly" | "yearly";
-  features?: PriceCardFeature[];
-  /** Call to action, e.g. <a className="oc-btn oc-price-card__cta">. */
-  cta?: ReactNode;
-  featured?: boolean;
-  /** Labels of the toggle. */
-  monthlyLabel?: ReactNode;
-  yearlyLabel?: ReactNode;
-}
-
-function Price({ kind, price }: { kind: "monthly" | "yearly"; price: PriceCardPrice }) {
-  return (
-    <p className={`oc-price-card__price oc-price-card__price--${kind}`}>
-      <span className="oc-price-card__amount">{price.amount}</span>
-      {price.period != null && <span className="oc-price-card__period">{price.period}</span>}
-      {price.was != null && <s className="oc-price-card__was">{price.was}</s>}
-      {price.note != null && <span className="oc-price-card__note">{price.note}</span>}
-    </p>
-  );
-}
-
-/** `<article class="oc-price-card">`: plan card with a CSS-only monthly / yearly 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 },
-  ref,
-) {
-  // Every card needs its own radio group name.
-  const group = `oc-price-${useId().replace(/[^\w-]/g, "")}`;
-  return (
-    <article ref={ref} className={cx("oc-price-card", featured && "oc-price-card--featured", className)} {...rest}>
-      <div className="oc-price-card__head">
-        <h3 className="oc-price-card__name">{name}</h3>
-        {discount != null && <span className="oc-price-card__discount">{discount}</span>}
-      </div>
-      {description != null && <p className="oc-price-card__desc">{description}</p>}
-      {yearly && (
-        <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>
-        </div>
-      )}
-      <Price kind="monthly" price={monthly} />
-      {yearly && <Price kind="yearly" price={yearly} />}
-      {features.length > 0 && (
-        <ul className="oc-price-card__features">
-          {features.map((f, i) => (
-            <li key={i} className={cx("oc-price-card__feature", f.excluded && "oc-price-card__feature--excluded")}>{f.label}</li>
-          ))}
-        </ul>
-      )}
-      {cta}
-    </article>
-  );
-});
+// File: packages/react/src/components/PriceCard.tsx | Map: types -> PriceCard (head -> toggle (radios) -> prices -> features -> cta)
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface PriceCardFeature {
+  label: ReactNode;
+  /** Shown with a cross and muted text. */
+  excluded?: boolean;
+}
+
+export interface PriceCardPrice {
+  amount: ReactNode;
+  period?: ReactNode;
+  /** Old price (struck through). */
+  was?: ReactNode;
+  note?: ReactNode;
+}
+
+export interface PriceCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  name: ReactNode;
+  description?: ReactNode;
+  /** Badge such as "Save 20%". */
+  discount?: ReactNode;
+  monthly: PriceCardPrice;
+  /** Without a yearly price the toggle is not rendered. */
+  yearly?: PriceCardPrice;
+  /** Period that is selected first (uncontrolled radio). */
+  defaultPeriod?: "monthly" | "yearly";
+  features?: PriceCardFeature[];
+  /** Call to action, e.g. <a className="oc-btn oc-price-card__cta">. */
+  cta?: ReactNode;
+  featured?: boolean;
+  /** Labels of the toggle. */
+  monthlyLabel?: ReactNode;
+  yearlyLabel?: ReactNode;
+}
+
+function Price({ kind, price }: { kind: "monthly" | "yearly"; price: PriceCardPrice }) {
+  return (
+    <p className={`oc-price-card__price oc-price-card__price--${kind}`}>
+      <span className="oc-price-card__amount">{price.amount}</span>
+      {price.period != null && <span className="oc-price-card__period">{price.period}</span>}
+      {price.was != null && <s className="oc-price-card__was">{price.was}</s>}
+      {price.note != null && <span className="oc-price-card__note">{price.note}</span>}
+    </p>
+  );
+}
+
+/** `<article class="oc-price-card">`: plan card with a CSS-only monthly / yearly 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 },
+  ref,
+) {
+  // Every card needs its own radio group name.
+  const group = `oc-price-${useId().replace(/[^\w-]/g, "")}`;
+  return (
+    <article ref={ref} className={cx("oc-price-card", featured && "oc-price-card--featured", className)} {...rest}>
+      <div className="oc-price-card__head">
+        <h3 className="oc-price-card__name">{name}</h3>
+        {discount != null && <span className="oc-price-card__discount">{discount}</span>}
+      </div>
+      {description != null && <p className="oc-price-card__desc">{description}</p>}
+      {yearly && (
+        <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>
+        </div>
+      )}
+      <Price kind="monthly" price={monthly} />
+      {yearly && <Price kind="yearly" price={yearly} />}
+      {features.length > 0 && (
+        <ul className="oc-price-card__features">
+          {features.map((f, i) => (
+            <li key={i} className={cx("oc-price-card__feature", f.excluded && "oc-price-card__feature--excluded")}>{f.label}</li>
+          ))}
+        </ul>
+      )}
+      {cta}
+    </article>
+  );
+});