@birdycom/omniaui-react 0.12.5 → 0.12.6

package/manifest.json

@@ -48,6 +48,12 @@
       "file": "src/components/Avatar.tsx",
       "snippet": "@birdycom/omniaui/snippets/avatar.html"
     },
+    {
+      "name": "avatar-picker",
+      "kind": "component",
+      "file": "src/components/AvatarPicker.tsx",
+      "snippet": "@birdycom/omniaui/snippets/avatar-picker.html"
+    },
     {
       "name": "back-link",
       "kind": "component",
@@ -60,6 +66,12 @@
       "file": "src/components/Badge.tsx",
       "snippet": "@birdycom/omniaui/snippets/badge.html"
     },
+    {
+      "name": "barcode",
+      "kind": "component",
+      "file": "src/components/Barcode.tsx",
+      "snippet": "@birdycom/omniaui/snippets/barcode.html"
+    },
     {
       "name": "barcode-input",
       "kind": "component",
@@ -144,12 +156,6 @@
       "file": "src/components/ColorSelect.tsx",
       "snippet": "@birdycom/omniaui/snippets/color-select.html"
     },
-    {
-      "name": "column-menu",
-      "kind": "component",
-      "file": "src/components/ColumnMenu.tsx",
-      "snippet": "@birdycom/omniaui/snippets/column-menu.html"
-    },
     {
       "name": "command",
       "kind": "component",
@@ -186,6 +192,12 @@
       "file": "src/components/DataTable.tsx",
       "snippet": "@birdycom/omniaui/snippets/data-table.html"
     },
+    {
+      "name": "date-field",
+      "kind": "component",
+      "file": "src/components/DateField.tsx",
+      "snippet": "@birdycom/omniaui/snippets/date-field.html"
+    },
     {
       "name": "decimal-input",
       "kind": "component",
@@ -258,12 +270,30 @@
       "file": "src/components/FormField.tsx",
       "snippet": "@birdycom/omniaui/snippets/form-field.html"
     },
+    {
+      "name": "form-section",
+      "kind": "component",
+      "file": "src/components/FormSection.tsx",
+      "snippet": "@birdycom/omniaui/snippets/form-section.html"
+    },
+    {
+      "name": "gallery",
+      "kind": "component",
+      "file": "src/components/Gallery.tsx",
+      "snippet": "@birdycom/omniaui/snippets/gallery.html"
+    },
     {
       "name": "glass",
       "kind": "component",
       "file": "src/components/Glass.tsx",
       "snippet": "@birdycom/omniaui/snippets/glass.html"
     },
+    {
+      "name": "glass-bar",
+      "kind": "component",
+      "file": "src/components/GlassBar.tsx",
+      "snippet": null
+    },
     {
       "name": "greeting",
       "kind": "component",
@@ -312,6 +342,12 @@
       "file": "src/components/LauncherCard.tsx",
       "snippet": "@birdycom/omniaui/snippets/launcher-card.html"
     },
+    {
+      "name": "lazy-image",
+      "kind": "component",
+      "file": "src/components/LazyImage.tsx",
+      "snippet": null
+    },
     {
       "name": "lightbox",
       "kind": "component",
@@ -378,12 +414,24 @@
       "file": "src/components/MessageThread.tsx",
       "snippet": "@birdycom/omniaui/snippets/message-thread.html"
     },
+    {
+      "name": "meter-row",
+      "kind": "component",
+      "file": "src/components/MeterRow.tsx",
+      "snippet": "@birdycom/omniaui/snippets/meter-row.html"
+    },
     {
       "name": "modal",
       "kind": "component",
       "file": "src/components/Modal.tsx",
       "snippet": "@birdycom/omniaui/snippets/modal.html"
     },
+    {
+      "name": "name-card",
+      "kind": "component",
+      "file": "src/components/NameCard.tsx",
+      "snippet": "@birdycom/omniaui/snippets/name-card.html"
+    },
     {
       "name": "navmenu",
       "kind": "component",
@@ -444,6 +492,12 @@
       "file": "src/components/Popover.tsx",
       "snippet": "@birdycom/omniaui/snippets/popover.html"
     },
+    {
+      "name": "price",
+      "kind": "component",
+      "file": "src/components/Price.tsx",
+      "snippet": "@birdycom/omniaui/snippets/price.html"
+    },
     {
       "name": "price-card",
       "kind": "component",
@@ -474,12 +528,30 @@
       "file": "src/components/Prose.tsx",
       "snippet": "@birdycom/omniaui/snippets/prose.html"
     },
+    {
+      "name": "quantity",
+      "kind": "component",
+      "file": "src/components/Quantity.tsx",
+      "snippet": "@birdycom/omniaui/snippets/quantity.html"
+    },
+    {
+      "name": "rating",
+      "kind": "component",
+      "file": "src/components/Rating.tsx",
+      "snippet": "@birdycom/omniaui/snippets/rating.html"
+    },
     {
       "name": "recovery-codes",
       "kind": "component",
       "file": "src/components/RecoveryCodes.tsx",
       "snippet": "@birdycom/omniaui/snippets/recovery-codes.html"
     },
+    {
+      "name": "ribbon",
+      "kind": "component",
+      "file": "src/components/Ribbon.tsx",
+      "snippet": "@birdycom/omniaui/snippets/ribbon.html"
+    },
     {
       "name": "segmented",
       "kind": "component",
@@ -522,6 +594,12 @@
       "file": "src/components/SortableRow.tsx",
       "snippet": "@birdycom/omniaui/snippets/sortable-row.html"
     },
+    {
+      "name": "spec-list",
+      "kind": "component",
+      "file": "src/components/SpecList.tsx",
+      "snippet": "@birdycom/omniaui/snippets/spec-list.html"
+    },
     {
       "name": "stack-card",
       "kind": "component",
@@ -552,6 +630,12 @@
       "file": "src/components/Stepper.tsx",
       "snippet": "@birdycom/omniaui/snippets/stepper.html"
     },
+    {
+      "name": "stock",
+      "kind": "component",
+      "file": "src/components/Stock.tsx",
+      "snippet": "@birdycom/omniaui/snippets/stock.html"
+    },
     {
       "name": "switch",
       "kind": "component",

package/package.json

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

@@ -37,7 +37,7 @@ export const BlockAppShell = forwardRef<HTMLDivElement, BlockAppShellProps>(func
         {breadcrumbs && (
           <div className="oc-block-shell-breadcrumbs">
             <nav aria-label="Breadcrumb">
-              <ol className="oc-breadcrumb">
+              <ol className="oc-breadcrumb oc-breadcrumb--chevron">
                 {breadcrumbs.map((item, i) =>
                   item.href && i < breadcrumbs.length - 1 ? (
                     <li className="oc-breadcrumb-item" key={i}><a href={item.href}>{item.label}</a></li>

package/src/blocks/BlockProfileHeader.tsx

@@ -5,8 +5,12 @@ import { cx } from "../utils";
 
 export interface ProfileHeaderTab {
   label: ReactNode;
-  href: string;
+  /** A link per tab (a route in your app); leave out and give content for tabs on the page itself. */
+  href?: string;
+  /** The open tab (aria-current for links, checked for tabs with content). */
   current?: boolean;
+  /** Panel content: with content the tabs switch on the page itself (radios + panels, CSS only). */
+  content?: ReactNode;
 }
 
 export interface BlockProfileHeaderProps extends HTMLAttributes<HTMLElement> {
@@ -25,13 +29,14 @@ export interface BlockProfileHeaderProps extends HTMLAttributes<HTMLElement> {
   headingLevel?: 1 | 2;
 }
 
-/** `.oc-block-profile`: banner, overhanging avatar, name, meta, actions and link tabs. */
+/** `.oc-block-profile`: banner, overhanging avatar, name, meta, actions and tabs (links, or panels on the page). */
 export const BlockProfileHeader = forwardRef<HTMLElement, BlockProfileHeaderProps>(function BlockProfileHeader(
   { name, meta, bio, avatar, banner, actions, tabs = [], tabsLabel = "Profile sections", compact = false, headingLevel = 1, className, ...rest },
   ref,
 ) {
   const nameId = `oc-profile-name-${useId().replace(/[^\w-]/g, "")}`;
   const Heading = headingLevel === 1 ? "h1" : "h2";
+  const panels = tabs.some((tab) => tab.content != null);
   const bannerStyle = banner ? ({ "--oc-profile-banner": `url("${banner}")` } as CSSProperties) : undefined;
   return (
     <section ref={ref} className={cx("oc-block-profile", compact && "oc-block-profile--compact", className)} aria-labelledby={nameId} {...rest}>
@@ -45,7 +50,19 @@ export const BlockProfileHeader = forwardRef<HTMLElement, BlockProfileHeaderProp
         </div>
         {actions != null && <div className="oc-block-profile-actions">{actions}</div>}
       </div>
-      {tabs.length > 0 && (
+      {tabs.length > 0 && panels && (
+        <>
+          <div className="oc-block-profile-tabs" role="radiogroup" aria-label={tabsLabel}>
+            {tabs.map((tab, i) => (
+              <label key={i} className="oc-block-profile-tab"><input type="radio" name={`${nameId}-tab`} defaultChecked={tab.current ?? i === 0} />{tab.label}</label>
+            ))}
+          </div>
+          <div className="oc-block-profile-panels">
+            {tabs.map((tab, i) => <div key={i} className="oc-block-profile-panel">{tab.content}</div>)}
+          </div>
+        </>
+      )}
+      {tabs.length > 0 && !panels && (
         <nav className="oc-block-profile-tabs" aria-label={tabsLabel}>
           {tabs.map((tab, i) => (
             <a key={i} className="oc-block-profile-tab" href={tab.href} aria-current={tab.current ? "page" : undefined}>{tab.label}</a>

package/src/components/Attachment.tsx

@@ -124,7 +124,7 @@ export interface AttachmentListProps extends HTMLAttributes<HTMLElement> {
 }
 
 const DEMO: AttachmentFile[] = [
-  { name: "Quote kitchen Dewitte v2.pdf", size: "1.2 MB", href: "#quote.pdf" },
+  { name: "Quote kitchen Project 1 v2.pdf", size: "1.2 MB", href: "#quote.pdf" },
   { name: "Measurements ground floor.xlsx", size: "86 KB", href: "#measurements.xlsx" },
   { name: "Contract addendum.docx", size: "240 KB", href: "#contract.docx" },
   { name: "Plans architect.zip", size: "14.8 MB", href: "#plans.zip" },

package/src/components/AvatarPicker.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { forwardRef, useEffect, useId, useRef } from "react";
+import type { HTMLAttributes, InputHTMLAttributes } from "react";
+import { bindAvatarPicker } from "../../../ui/src/form-extras.js";
+import { cx } from "../utils";
+import { Icon } from "./Icon";
+
+export interface AvatarPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onInvalid"> {
+  initials: string;
+  label?: string;
+  hint?: string;
+  /** Rounded square and contain-fit (a company logo). */
+  logo?: boolean;
+  /** Name of the file input (sent with the form). */
+  name?: string;
+  accept?: string;
+  /** Refuse larger files (KB); the reason shows under the buttons. */
+  maxKb?: number;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  onChange?: (file: File | null) => void;
+  /** A refused file (wrong type for accept, or larger than maxKb) and the reason. */
+  onInvalid?: (file: File, reason: string) => void;
+}
+
+/** Avatar or logo picker with a preview, Upload and Remove, and drag and drop (`.oc-avatar-picker`). */
+export const AvatarPicker = forwardRef<HTMLDivElement, AvatarPickerProps>(function AvatarPicker(
+  { initials, label = "Profile picture", hint, logo, name, accept = "image/*", maxKb, inputProps, onChange, onInvalid, className, ...rest },
+  ref,
+) {
+  const id = useId();
+  const own = useRef<HTMLDivElement | null>(null);
+  const changeRef = useRef(onChange);
+  changeRef.current = onChange;
+  const invalidRef = useRef(onInvalid);
+  invalidRef.current = onInvalid;
+  useEffect(() => {
+    const el = own.current;
+    if (!el) return;
+    bindAvatarPicker(el);
+    const handler = (event: Event) => changeRef.current?.((event as CustomEvent<{ file: File | null }>).detail.file);
+    const refused = (event: Event) => { const { file, reason } = (event as CustomEvent<{ file: File; reason: string }>).detail; invalidRef.current?.(file, reason); };
+    el.addEventListener("oc-avatar-change", handler);
+    el.addEventListener("oc-avatar-invalid", refused);
+    return () => { el.removeEventListener("oc-avatar-change", handler); el.removeEventListener("oc-avatar-invalid", refused); };
+  }, []);
+  return (
+    <div
+      ref={(node) => { own.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }}
+      className={cx("oc-avatar-picker", logo && "oc-avatar-picker--square oc-avatar-picker--logo", className)}
+      data-oc-max-kb={maxKb}
+      {...rest}
+    >
+      <label className="oc-avatar-picker__preview" htmlFor={id} title="Choose an image">
+        <span data-oc-initials="">{initials}</span>
+        <input className="oc-avatar-picker__file" id={id} type="file" accept={accept} name={name} {...inputProps} />
+      </label>
+      <div className="oc-avatar-picker__text">
+        <span className="oc-avatar-picker__label">{label}</span>
+        {hint && <span className="oc-avatar-picker__hint">{hint}</span>}
+        <div className="oc-avatar-picker__actions">
+          <button type="button" className="oc-btn oc-btn--outline oc-btn--sm" data-oc-avatar-upload=""><Icon d="M9 16v-6H5l7-7l7 7h-4v6zm-4 4v-2h14v2z" />Upload</button>
+          <button type="button" className="oc-btn oc-btn--ghost oc-btn--sm" data-oc-avatar-remove=""><Icon d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z" />Remove</button>
+        </div>
+      </div>
+    </div>
+  );
+});

package/src/components/Barcode.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { forwardRef, useMemo } from "react";
+import type { HTMLAttributes } from "react";
+import { barsToSvg, encodeBarcode } from "../../../ui/src/barcode.js";
+import { cx } from "../utils";
+
+export interface BarcodeProps extends HTMLAttributes<HTMLElement> {
+  value: string;
+  format?: "auto" | "EAN13" | "EAN8" | "UPC" | "CODE128";
+  /** Digits under the bars. Default true. */
+  digits?: boolean;
+  size?: "md" | "hero" | "compact";
+}
+
+/** EAN-13, EAN-8, UPC-A or Code 128 as SVG (`figure.oc-barcode`); shows the reason when the value cannot be encoded. */
+export const Barcode = forwardRef<HTMLElement, BarcodeProps>(function Barcode(
+  { value, format = "auto", digits = true, size = "md", className, ...rest },
+  ref,
+) {
+  const result = useMemo(() => {
+    try {
+      const { bits, text } = encodeBarcode(value, format);
+      return { svg: barsToSvg(bits, `Barcode ${text}`), text, error: "" };
+    } catch (err) {
+      return { svg: "", text: value, error: (err as Error).message };
+    }
+  }, [value, format]);
+  return (
+    <figure
+      ref={ref}
+      className={cx("oc-barcode", size !== "md" && `oc-barcode--${size}`, className)}
+      data-error={result.error ? "" : undefined}
+      {...rest}
+    >
+      {result.svg && <span style={{ display: "contents" }} dangerouslySetInnerHTML={{ __html: result.svg }} />}
+      {(digits || result.error) && (
+        <figcaption className="oc-barcode__digits">{result.error ? `${value}: ${result.error}` : result.text}</figcaption>
+      )}
+    </figure>
+  );
+});

package/src/components/Breadcrumb.tsx

@@ -6,24 +6,28 @@ export interface BreadcrumbItemData {
   label: ReactNode;
   /** Omit (or put last) to mark the current page. */
   href?: string;
+  /** Shown before the label: an `<iconify-icon icon="mdi:…" />`, an `<Icon d=… />` or any node. */
+  icon?: ReactNode;
 }
 
 export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
   items?: BreadcrumbItemData[];
+  /** `"slash"` (default) or `"chevron"` (›) between the items. */
+  separator?: "slash" | "chevron";
 }
 
 /** `<nav class="oc-breadcrumb">` with links and a final `aria-current="page"` item. */
 export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(
-  { items, children, className, "aria-label": ariaLabel = "Breadcrumb", ...rest },
+  { items, separator = "slash", children, className, "aria-label": ariaLabel = "Breadcrumb", ...rest },
   ref,
 ) {
   return (
-    <nav ref={ref} className={cx("oc-breadcrumb", className)} aria-label={ariaLabel} {...rest}>
+    <nav ref={ref} className={cx("oc-breadcrumb", separator === "chevron" && "oc-breadcrumb--chevron", className)} aria-label={ariaLabel} {...rest}>
       {items?.map((item, i) =>
         item.href && i < items.length - 1 ? (
-          <a key={i} className="oc-breadcrumb-item" href={item.href}>{item.label}</a>
+          <a key={i} className="oc-breadcrumb-item" href={item.href}>{item.icon}{item.label}</a>
         ) : (
-          <span key={i} className="oc-breadcrumb-item" aria-current="page">{item.label}</span>
+          <span key={i} className="oc-breadcrumb-item" aria-current="page">{item.icon}{item.label}</span>
         ),
       )}
       {children}

package/src/components/Button.tsx

@@ -2,7 +2,9 @@ import { forwardRef } from "react";
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
 import { cx } from "../utils";
 
-export type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "success" | "gradient" | "glass";
+export type ButtonVariant =
+  | "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "success" | "gradient" | "glass"
+  | "soft-primary" | "soft-success" | "soft-warning" | "soft-destructive" | "soft-info" | "plain";
 export type ButtonSize = "xs" | "sm" | "md" | "lg";
 
 interface ButtonStyleProps {
@@ -18,6 +20,11 @@ interface ButtonStyleProps {
   inline?: boolean;
 }
 
+interface LoadingProp {
+  /** Busy: a spinner replaces the leading icon and the button cannot be clicked (`aria-busy`). */
+  loading?: boolean;
+}
+
 /** The class string of a button; reuse it on your own elements (router links etc.). */
 export function buttonClass({ variant = "default", size = "md", icon, pill, inline, className }: ButtonStyleProps & { className?: string }) {
   return cx(
@@ -31,22 +38,30 @@ export function buttonClass({ variant = "default", size = "md", icon, pill, inli
   );
 }
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps, LoadingProp {}
 
 /** `<button class="oc-btn oc-btn--{variant} oc-btn--{size}">` */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { variant, size, icon, pill, inline, className, ...rest },
+  { variant, size, icon, pill, inline, loading, disabled, className, ...rest },
   ref,
 ) {
-  return <button ref={ref} className={buttonClass({ variant, size, icon, pill, inline, className })} {...rest} />;
+  return (
+    <button
+      ref={ref}
+      className={buttonClass({ variant, size, icon, pill, inline, className })}
+      aria-busy={loading || undefined}
+      disabled={disabled || loading}
+      {...rest}
+    />
+  );
 });
 
-export interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, ButtonStyleProps {}
+export interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, ButtonStyleProps, LoadingProp {}
 
 /** An anchor styled as a button. */
 export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(function ButtonLink(
-  { variant, size, icon, pill, inline, className, ...rest },
+  { variant, size, icon, pill, inline, loading, className, ...rest },
   ref,
 ) {
-  return <a ref={ref} className={buttonClass({ variant, size, icon, pill, inline, className })} {...rest} />;
+  return <a ref={ref} className={buttonClass({ variant, size, icon, pill, inline, className })} aria-busy={loading || undefined} {...rest} />;
 });

package/src/components/ChatComposer.tsx

@@ -66,7 +66,7 @@ export const ChatComposer = forwardRef<HTMLFormElement, ChatComposerProps>(funct
       <div className="oc-chat-composer__bar">
         {tools != null && <div className="oc-chat-composer__tools">{tools}</div>}
         {hint != null && <span className="oc-chat-composer__hint">{hint}</span>}
-        <button type="submit" className="oc-chat-composer__send" aria-label="Send" disabled={disabled}>&#10148;</button>
+        <button type="submit" className="oc-chat-composer__send" aria-label="Send" disabled={disabled}><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 21l21-9L2 3v7l15 2l-15 2z"/></svg></button>
       </div>
     </form>
   );