@birdycom/omniaui-react 0.12.3 → 0.12.5

package/dist/index.d.ts

@@ -920,11 +920,13 @@ interface HeadingProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<HTMLDivElement>>;
 
 interface IconProps extends Omit<SVGProps<SVGSVGElement>, "d"> {
-    /** SVG path data (24x24 viewBox, stroke icon). Use `children` for several shapes. */
+    /** SVG path data on a 24x24 viewBox: a webicon path (MDI, MDI Light or Material Symbols), e.g. the path of mdi:menu. Use `children` for several shapes. */
     d?: string;
+    /** Draw `d` as a 2px line instead of a filled shape (older line icons). */
+    line?: boolean;
 }
-/** Inline 24x24 stroke icon (`currentColor`), the shape used by the snippets. */
-declare function Icon({ d, children, className, ...rest }: IconProps): react.JSX.Element;
+/** Inline 24x24 icon in `currentColor`: a filled webicon path (the snippets use MDI), drawn without iconify-icon. */
+declare function Icon({ d, line, children, className, ...rest }: IconProps): react.JSX.Element;
 
 interface ImageZoomProps extends HTMLAttributes<HTMLDivElement> {
     src?: string;
@@ -1489,8 +1491,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 +1502,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";
@@ -2164,7 +2169,7 @@ declare const UpgradeBanner: react.ForwardRefExoticComponent<UpgradeBannerProps
 interface UserProps extends HTMLAttributes<HTMLDivElement> {
     name: ReactNode;
     email?: ReactNode;
-    /** Initials shown in the avatar. */
+    /** Initials shown in the avatar (default: from `name` when it is a string). */
     initials?: string;
     /** Avatar image URL (wins over initials). */
     avatarSrc?: string;

package/dist/index.js

@@ -115,6 +115,9 @@ function mod(base, ...modifiers) {
 function attrs(record) {
   return record;
 }
+function initialsOf(name) {
+  return typeof name === "string" ? name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("") : "";
+}
 function callAll(...fns) {
   return (e) => fns.forEach((fn) => fn?.(e));
 }
@@ -2094,22 +2097,9 @@ var Heading = forwardRef46(function Heading2({ title, description, level = 2, si
 
 // src/components/Icon.tsx
 import { jsx as jsx48 } from "react/jsx-runtime";
-function Icon({ d, children, className, ...rest }) {
-  return /* @__PURE__ */ jsx48(
-    "svg",
-    {
-      className,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      ...rest,
-      children: d ? /* @__PURE__ */ jsx48("path", { d }) : children
-    }
-  );
+function Icon({ d, line = false, children, className, ...rest }) {
+  const paint = line ? { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" } : { fill: "currentColor" };
+  return /* @__PURE__ */ jsx48("svg", { className, viewBox: "0 0 24 24", "aria-hidden": "true", ...paint, ...rest, children: d ? /* @__PURE__ */ jsx48("path", { d }) : children });
 }
 
 // src/components/ImageZoom.tsx
@@ -2163,10 +2153,7 @@ var InputGroup = forwardRef49(function InputGroup2({ prefix, suffix, className,
 // src/components/LanguageSelect.tsx
 import { forwardRef as forwardRef50 } from "react";
 import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
-var Globe = () => /* @__PURE__ */ jsxs42("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-  /* @__PURE__ */ jsx52("circle", { cx: "12", cy: "12", r: "9" }),
-  /* @__PURE__ */ jsx52("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })
-] });
+var Globe = () => /* @__PURE__ */ jsx52("svg", { "data-icon": "mdi:web", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx52("path", { d: "M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2" }) });
 var LanguageSelect = forwardRef50(function LanguageSelect2({ options, value, defaultValue, onChange, currency, ghost, icon, labelClassName, className, ...rest }, ref) {
   const [current, setCurrent] = useControllable(value, defaultValue ?? options[0]?.value ?? "", onChange);
   return /* @__PURE__ */ jsxs42("label", { className: cx("oc-language-select", ghost && "oc-language-select--ghost", currency && "oc-language-select--currency", labelClassName), children: [
@@ -2426,8 +2413,8 @@ var MediaRow = forwardRef60(function MediaRow2({ title, href, meta, thumb, curre
 // src/components/Message.tsx
 import { forwardRef as forwardRef61 } from "react";
 import { Fragment as Fragment14, jsx as jsx63, jsxs as jsxs50 } from "react/jsx-runtime";
-var svg = (d, width = "2") => /* @__PURE__ */ jsx63("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: width, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx63("path", { d }) });
-var ICONS = { reply: "M9 14 4 9l5-5M4 9h10a6 6 0 0 1 6 6v4", delete: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6" };
+var svg = (d) => /* @__PURE__ */ jsx63("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx63("path", { d }) });
+var ICONS = { reply: "M8 9.8v.9l1.7.3c2.6.4 4.5 1.4 5.9 2.7c-1.7-.5-3.5-.8-5.6-.8H8v1.3L5.8 12zM10 5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11", delete: "M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z" };
 var STATUS = { sent: "Sent", read: "Read", failed: "Failed" };
 function MessageAttachments({ items }) {
   const thumbs = items.every((a) => a.kind === "thumb");
@@ -2461,7 +2448,7 @@ var Message = forwardRef61(function Message2({ direction = "in", sender, avatar,
       (time != null || status) && /* @__PURE__ */ jsxs50("p", { className: "oc-message__meta", children: [
         time != null && /* @__PURE__ */ jsx63("time", { dateTime: datetime, children: time }),
         status && /* @__PURE__ */ jsxs50("span", { className: cx("oc-message__status", status !== "sent" && `oc-message__status--${status}`), children: [
-          statusIcon && svg("M2 12.5 7 17.5 18 6.5M13 16.5l1 1L22.5 9", "2.2"),
+          statusIcon && svg("M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z"),
           statusLabel ?? STATUS[status]
         ] })
       ] })
@@ -2646,11 +2633,7 @@ var MessageThread = forwardRef62(function MessageThread2({
       (status || menu) && /* @__PURE__ */ jsxs51("div", { className: "oc-message-thread__actions", children: [
         status && /* @__PURE__ */ jsx64("span", { className: cx("oc-badge", status.variant && `oc-badge--${status.variant}`), children: status.label }),
         menu && /* @__PURE__ */ jsxs51(Fragment15, { children: [
-          /* @__PURE__ */ jsx64("button", { type: "button", className: "oc-message-thread__icon-btn", popoverTarget: `${base}-menu`, "aria-label": "Conversation actions", children: /* @__PURE__ */ jsxs51("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx64("circle", { cx: "12", cy: "5", r: "1.8" }),
-            /* @__PURE__ */ jsx64("circle", { cx: "12", cy: "12", r: "1.8" }),
-            /* @__PURE__ */ jsx64("circle", { cx: "12", cy: "19", r: "1.8" })
-          ] }) }),
+          /* @__PURE__ */ jsx64("button", { type: "button", className: "oc-message-thread__icon-btn", popoverTarget: `${base}-menu`, "aria-label": "Conversation actions", children: /* @__PURE__ */ jsx64("svg", { "data-icon": "mdi:dots-vertical", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx64("path", { d: "M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2" }) }) }),
           /* @__PURE__ */ jsx64("div", { className: "oc-dropdown-menu", id: `${base}-menu`, ...attrs({ popover: "" }), role: "menu", children: menu.map((m, i) => "separator" in m ? /* @__PURE__ */ jsx64("div", { className: "oc-dropdown-separator", role: "separator" }, i) : /* @__PURE__ */ jsx64("button", { type: "button", className: cx("oc-dropdown-item", m.destructive && "oc-dropdown-item--destructive"), role: "menuitem", onClick: () => onMenu?.(m.name), children: m.label }, i)) })
         ] })
       ] })
@@ -2976,12 +2959,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 +2987,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
   ] });
@@ -3966,7 +3957,7 @@ import { forwardRef as forwardRef109 } from "react";
 import { jsx as jsx111, jsxs as jsxs91 } from "react/jsx-runtime";
 var User = forwardRef109(function User2({ name, email, initials, avatarSrc, avatarSize = "md", className, ...rest }, ref) {
   return /* @__PURE__ */ jsxs91("div", { ref, className: cx("oc-user", className), ...rest, children: [
-    /* @__PURE__ */ jsx111(Avatar, { size: avatarSize, src: avatarSrc, children: initials }),
+    /* @__PURE__ */ jsx111(Avatar, { size: avatarSize, src: avatarSrc, children: initials ?? initialsOf(name) }),
     /* @__PURE__ */ jsxs91("span", { className: "oc-user-text", children: [
       /* @__PURE__ */ jsx111("span", { className: "oc-user-name", children: name }),
       email != null && /* @__PURE__ */ jsx111("span", { className: "oc-user-email", children: email })
@@ -4022,7 +4013,7 @@ import { jsx as jsx115, jsxs as jsxs94 } from "react/jsx-runtime";
 var BlockAppHeader = forwardRef113(function BlockAppHeader2({ toggleFor, toggleLabel = "Toggle sidebar", nav, navLabel = "Module navigation", actions, title, className, ...rest }, ref) {
   return /* @__PURE__ */ jsxs94("header", { ref, className: cx("oc-block-appbar", className), ...rest, children: [
     toggleFor && /* @__PURE__ */ jsxs94("label", { className: "oc-btn oc-btn--ghost oc-btn--icon", htmlFor: toggleFor, title: toggleLabel, children: [
-      /* @__PURE__ */ jsx115(Icon, { d: "M4 6h16M4 12h16M4 18h16" }),
+      /* @__PURE__ */ jsx115(Icon, { d: "M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" }),
       /* @__PURE__ */ jsx115("span", { className: "oc-visually-hidden", children: toggleLabel })
     ] }),
     title != null && /* @__PURE__ */ jsx115("span", { className: "oc-block-appbar-title", children: title }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-react",
-  "version": "0.12.3",
+  "version": "0.12.5",
   "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/blocks/BlockAppHeader.tsx

@@ -32,7 +32,7 @@ export const BlockAppHeader = forwardRef<HTMLElement, BlockAppHeaderProps>(funct
     <header ref={ref} className={cx("oc-block-appbar", className)} {...rest}>
       {toggleFor && (
         <label className="oc-btn oc-btn--ghost oc-btn--icon" htmlFor={toggleFor} title={toggleLabel}>
-          <Icon d="M4 6h16M4 12h16M4 18h16" />
+          <Icon d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" />
           <span className="oc-visually-hidden">{toggleLabel}</span>
         </label>
       )}

package/src/components/Icon.tsx

@@ -1,24 +1,19 @@
 import type { SVGProps } from "react";
 
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "d"> {
-  /** SVG path data (24x24 viewBox, stroke icon). Use `children` for several shapes. */
+  /** SVG path data on a 24x24 viewBox: a webicon path (MDI, MDI Light or Material Symbols), e.g. the path of mdi:menu. Use `children` for several shapes. */
   d?: string;
+  /** Draw `d` as a 2px line instead of a filled shape (older line icons). */
+  line?: boolean;
 }
 
-/** Inline 24x24 stroke icon (`currentColor`), the shape used by the snippets. */
-export function Icon({ d, children, className, ...rest }: IconProps) {
+/** Inline 24x24 icon in `currentColor`: a filled webicon path (the snippets use MDI), drawn without iconify-icon. */
+export function Icon({ d, line = false, children, className, ...rest }: IconProps) {
+  const paint = line
+    ? { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const }
+    : { fill: "currentColor" };
   return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...rest}
-    >
+    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" {...paint} {...rest}>
       {d ? <path d={d} /> : children}
     </svg>
   );

package/src/components/LanguageSelect.tsx

@@ -30,10 +30,7 @@ export interface LanguageSelectProps extends Omit<SelectHTMLAttributes<HTMLSelec
 
 /** Small globe drawn with currentColor. */
 const Globe = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    <circle cx="12" cy="12" r="9" />
-    <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
-  </svg>
+  <svg data-icon="mdi:web" viewBox="0 0 24 24" fill="currentColor"><path d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></svg>
 );
 
 /** `.oc-language-select`: native select in a pill with a leading icon. */

package/src/components/Message.tsx

@@ -48,10 +48,11 @@ export interface MessageData {
   id?: string;
 }
 
-const svg = (d: string, width = "2") => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={width} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={d} /></svg>
+/** A webicon (MDI path data, 24x24). */
+const svg = (d: string) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={d} /></svg>
 );
-const ICONS: Record<string, string> = { reply: "M9 14 4 9l5-5M4 9h10a6 6 0 0 1 6 6v4", delete: "M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6" };
+const ICONS: Record<string, string> = { reply: "M8 9.8v.9l1.7.3c2.6.4 4.5 1.4 5.9 2.7c-1.7-.5-3.5-.8-5.6-.8H8v1.3L5.8 12zM10 5l-7 7l7 7v-4.1c5 0 8.5 1.6 11 5.1c-1-5-4-10-11-11", delete: "M9 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z" };
 const STATUS = { sent: "Sent", read: "Read", failed: "Failed" };
 
 /** `.oc-message__attachments`: thumbnails share one `.oc-attachment-list`, files and images stand alone. */
@@ -93,7 +94,7 @@ export const Message = forwardRef<HTMLElement, MessageProps>(function Message(
             {time != null && <time dateTime={datetime}>{time}</time>}
             {status && (
               <span className={cx("oc-message__status", status !== "sent" && `oc-message__status--${status}`)}>
-                {statusIcon && svg("M2 12.5 7 17.5 18 6.5M13 16.5l1 1L22.5 9", "2.2")}{statusLabel ?? STATUS[status]}
+                {statusIcon && svg("M.41 13.41L6 19l1.41-1.42L1.83 12m20.41-6.42L11.66 16.17L7.5 12l-1.43 1.41L11.66 19l12-12M18 7l-1.41-1.42l-6.35 6.35l1.42 1.41z")}{statusLabel ?? STATUS[status]}
               </span>
             )}
           </p>

package/src/components/MessageThread.tsx

@@ -132,7 +132,7 @@ export const MessageThread = forwardRef<HTMLElement, MessageThreadProps>(functio
             {menu && (
               <>
                 <button type="button" className="oc-message-thread__icon-btn" popoverTarget={`${base}-menu`} aria-label="Conversation actions">
-                  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="12" cy="19" r="1.8" /></svg>
+                  <svg data-icon="mdi:dots-vertical" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2m0-6a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2"/></svg>
                 </button>
                 <div className="oc-dropdown-menu" id={`${base}-menu`} {...attrs({ popover: "" })} role="menu">
                   {menu.map((m, i) => "separator" in m

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) => (

package/src/components/User.tsx

@@ -1,13 +1,13 @@
 import { forwardRef } from "react";
 import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
+import { cx, initialsOf } from "../utils";
 import { Avatar } from "./Avatar";
 import type { AvatarSize } from "./Avatar";
 
 export interface UserProps extends HTMLAttributes<HTMLDivElement> {
   name: ReactNode;
   email?: ReactNode;
-  /** Initials shown in the avatar. */
+  /** Initials shown in the avatar (default: from `name` when it is a string). */
   initials?: string;
   /** Avatar image URL (wins over initials). */
   avatarSrc?: string;
@@ -21,7 +21,7 @@ export const User = forwardRef<HTMLDivElement, UserProps>(function User(
 ) {
   return (
     <div ref={ref} className={cx("oc-user", className)} {...rest}>
-      <Avatar size={avatarSize} src={avatarSrc}>{initials}</Avatar>
+      <Avatar size={avatarSize} src={avatarSrc}>{initials ?? initialsOf(name)}</Avatar>
       <span className="oc-user-text">
         <span className="oc-user-name">{name}</span>
         {email != null && <span className="oc-user-email">{email}</span>}

package/src/utils.ts

@@ -19,6 +19,13 @@ export function attrs(record: Record<string, string | undefined>): object {
 
 export type Slot = ReactNode;
 
+/** "Ada Lovelace" -> "AL": the first letters of the first two words (as the Blade components do). */
+export function initialsOf(name: unknown): string {
+  return typeof name === "string"
+    ? name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("")
+    : "";
+}
+
 /** Call a handler, then call another one. */
 export function callAll<E>(...fns: Array<((e: E) => void) | undefined>) {
   return (e: E) => fns.forEach((fn) => fn?.(e));