@birdycom/omniaui-react 0.11.0 → 0.11.2

package/src/components/Greeting.tsx

@@ -1,63 +1,63 @@
-// File: packages/react/src/components/Greeting.tsx
-// Map: greetingTimeOfDay() helper -> Greeting = header -> icon -> body (eyebrow, title + name, date) -> actions
-// The time of day is computed from `date` (default: now). Morning 05-12, afternoon 12-18, evening otherwise.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export type GreetingTimeOfDay = "morning" | "afternoon" | "evening";
-
-/** Pick the time-of-day modifier for a date. */
-export function greetingTimeOfDay(date: Date = new Date()): GreetingTimeOfDay {
-  const h = date.getHours();
-  if (h >= 5 && h < 12) return "morning";
-  if (h >= 12 && h < 18) return "afternoon";
-  return "evening";
-}
-
-const WORDS: Record<GreetingTimeOfDay, string> = { morning: "Good morning", afternoon: "Good afternoon", evening: "Good evening" };
-
-export interface GreetingProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  name?: ReactNode;
-  /** The moment to greet for (default: now). Also shown as the date. */
-  date?: Date;
-  /** Force a time of day instead of computing it. */
-  timeOfDay?: GreetingTimeOfDay;
-  /** Translated greetings, e.g. `{ morning: "Goedemorgen", ... }`. */
-  words?: Partial<Record<GreetingTimeOfDay, string>>;
-  /** Locale for the date text (default: the browser locale). */
-  locale?: string;
-  /** Hide the date line. */
-  hideDate?: boolean;
-  eyebrow?: ReactNode;
-  icon?: ReactNode;
-  actions?: ReactNode;
-  size?: "lg";
-}
-
-/** `.oc-greeting`: dashboard greeting with date and actions. */
-export const Greeting = forwardRef<HTMLElement, GreetingProps>(function Greeting(
-  { name, date, timeOfDay, words, locale, hideDate, eyebrow, icon, actions, size, className, ...rest },
-  ref,
-) {
-  const when = date ?? new Date();
-  const tod = timeOfDay ?? greetingTimeOfDay(when);
-  const word = words?.[tod] ?? WORDS[tod];
-  const dateText = new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(when);
-  // datetime needs YYYY-MM-DD in local time (toISOString would use UTC).
-  const iso = `${when.getFullYear()}-${String(when.getMonth() + 1).padStart(2, "0")}-${String(when.getDate()).padStart(2, "0")}`;
-  return (
-    <header ref={ref} className={cx("oc-greeting", `oc-greeting--${tod}`, size && `oc-greeting--${size}`, className)} {...rest}>
-      {icon != null && <span className="oc-greeting-icon" aria-hidden="true">{icon}</span>}
-      <div className="oc-greeting-body">
-        {eyebrow != null && <p className="oc-greeting-eyebrow">{eyebrow}</p>}
-        <h2 className="oc-greeting-title">
-          {word}
-          {name != null && <>, <span className="oc-greeting-name">{name}</span></>}
-        </h2>
-        {!hideDate && <time className="oc-greeting-date" dateTime={iso}>{dateText}</time>}
-      </div>
-      {actions != null && <div className="oc-greeting-actions">{actions}</div>}
-    </header>
-  );
-});
+// File: packages/react/src/components/Greeting.tsx
+// Map: greetingTimeOfDay() helper -> Greeting = header -> icon -> body (eyebrow, title + name, date) -> actions
+// The time of day is computed from `date` (default: now). Morning 05-12, afternoon 12-18, evening otherwise.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type GreetingTimeOfDay = "morning" | "afternoon" | "evening";
+
+/** Pick the time-of-day modifier for a date. */
+export function greetingTimeOfDay(date: Date = new Date()): GreetingTimeOfDay {
+  const h = date.getHours();
+  if (h >= 5 && h < 12) return "morning";
+  if (h >= 12 && h < 18) return "afternoon";
+  return "evening";
+}
+
+const WORDS: Record<GreetingTimeOfDay, string> = { morning: "Good morning", afternoon: "Good afternoon", evening: "Good evening" };
+
+export interface GreetingProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  name?: ReactNode;
+  /** The moment to greet for (default: now). Also shown as the date. */
+  date?: Date;
+  /** Force a time of day instead of computing it. */
+  timeOfDay?: GreetingTimeOfDay;
+  /** Translated greetings, e.g. `{ morning: "Goedemorgen", ... }`. */
+  words?: Partial<Record<GreetingTimeOfDay, string>>;
+  /** Locale for the date text (default: the browser locale). */
+  locale?: string;
+  /** Hide the date line. */
+  hideDate?: boolean;
+  eyebrow?: ReactNode;
+  icon?: ReactNode;
+  actions?: ReactNode;
+  size?: "lg";
+}
+
+/** `.oc-greeting`: dashboard greeting with date and actions. */
+export const Greeting = forwardRef<HTMLElement, GreetingProps>(function Greeting(
+  { name, date, timeOfDay, words, locale, hideDate, eyebrow, icon, actions, size, className, ...rest },
+  ref,
+) {
+  const when = date ?? new Date();
+  const tod = timeOfDay ?? greetingTimeOfDay(when);
+  const word = words?.[tod] ?? WORDS[tod];
+  const dateText = new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(when);
+  // datetime needs YYYY-MM-DD in local time (toISOString would use UTC).
+  const iso = `${when.getFullYear()}-${String(when.getMonth() + 1).padStart(2, "0")}-${String(when.getDate()).padStart(2, "0")}`;
+  return (
+    <header ref={ref} className={cx("oc-greeting", `oc-greeting--${tod}`, size && `oc-greeting--${size}`, className)} {...rest}>
+      {icon != null && <span className="oc-greeting-icon" aria-hidden="true">{icon}</span>}
+      <div className="oc-greeting-body">
+        {eyebrow != null && <p className="oc-greeting-eyebrow">{eyebrow}</p>}
+        <h2 className="oc-greeting-title">
+          {word}
+          {name != null && <>, <span className="oc-greeting-name">{name}</span></>}
+        </h2>
+        {!hideDate && <time className="oc-greeting-date" dateTime={iso}>{dateText}</time>}
+      </div>
+      {actions != null && <div className="oc-greeting-actions">{actions}</div>}
+    </header>
+  );
+});

package/src/components/Heading.tsx

@@ -1,27 +1,27 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface HeadingProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  title: ReactNode;
-  description?: ReactNode;
-  /** Heading element level (default 2). */
-  level?: 1 | 2 | 3 | 4;
-  /** `sm` = section heading. */
-  size?: "md" | "sm";
-  titleId?: string;
-}
-
-/** `<div class="oc-heading">` title + muted description. */
-export const Heading = forwardRef<HTMLDivElement, HeadingProps>(function Heading(
-  { title, description, level = 2, size = "md", titleId, className, ...rest },
-  ref,
-) {
-  const Tag = `h${level}` as "h2";
-  return (
-    <div ref={ref} className={cx("oc-heading", size === "sm" && "oc-heading--sm", className)} {...rest}>
-      <Tag className="oc-heading-title" id={titleId}>{title}</Tag>
-      {description != null && <p className="oc-heading-description">{description}</p>}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface HeadingProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Heading element level (default 2). */
+  level?: 1 | 2 | 3 | 4;
+  /** `sm` = section heading. */
+  size?: "md" | "sm";
+  titleId?: string;
+}
+
+/** `<div class="oc-heading">` title + muted description. */
+export const Heading = forwardRef<HTMLDivElement, HeadingProps>(function Heading(
+  { title, description, level = 2, size = "md", titleId, className, ...rest },
+  ref,
+) {
+  const Tag = `h${level}` as "h2";
+  return (
+    <div ref={ref} className={cx("oc-heading", size === "sm" && "oc-heading--sm", className)} {...rest}>
+      <Tag className="oc-heading-title" id={titleId}>{title}</Tag>
+      {description != null && <p className="oc-heading-description">{description}</p>}
+    </div>
+  );
+});

package/src/components/Icon.tsx

@@ -1,25 +1,25 @@
-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. */
-  d?: string;
-}
-
-/** Inline 24x24 stroke icon (`currentColor`), the shape used by the snippets. */
-export function Icon({ d, children, className, ...rest }: IconProps) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={2}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...rest}
-    >
-      {d ? <path d={d} /> : children}
-    </svg>
-  );
-}
+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. */
+  d?: string;
+}
+
+/** Inline 24x24 stroke icon (`currentColor`), the shape used by the snippets. */
+export function Icon({ d, children, className, ...rest }: IconProps) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...rest}
+    >
+      {d ? <path d={d} /> : children}
+    </svg>
+  );
+}

package/src/components/ImageZoom.tsx

@@ -1,51 +1,51 @@
-// File: packages/react/src/components/ImageZoom.tsx
-// Map: props -> ImageZoom (toolbar of radio levels -> viewport -> canvas with the image)
-// Same markup as packages/ui/snippets/image-zoom.html. The chosen level is also written to --oc-zoom,
-// so any number works (the CSS-only :has() rules cover 1, 1.5, 2, 3 and 4).
-"use client";
-
-import { forwardRef, useId, useState } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ImageZoomProps extends HTMLAttributes<HTMLDivElement> {
-  src?: string;
-  alt?: string;
-  /** Zoom levels for the toolbar. Empty array = no toolbar. Default [1, 1.5, 2, 3]. */
-  levels?: number[];
-  /** Starting level. Default 1. */
-  defaultZoom?: number;
-  /** Window ratio: "square", "photo" or a CSS ratio such as "21 / 9". Default 16 / 9. */
-  ratio?: "square" | "photo" | string;
-  /** Replaces the <img> inside the canvas (svg, video, placeholder art). */
-  media?: ReactNode;
-}
-
-/** `.oc-image-zoom`: zoom by making the canvas wider than the viewport; pan by scrolling. */
-export const ImageZoom = forwardRef<HTMLDivElement, ImageZoomProps>(function ImageZoom(
-  { src, alt = "", levels = [1, 1.5, 2, 3], defaultZoom = 1, ratio, media, className, style, ...rest },
-  ref,
-) {
-  const name = `oc-zoom-${useId().replace(/:/g, "")}`;
-  const [zoom, setZoom] = useState(defaultZoom);
-  const preset = ratio === "square" || ratio === "photo" ? ratio : undefined;
-  const vars = { "--oc-zoom": String(zoom), ...(ratio && !preset ? { "--oc-image-zoom-ratio": ratio } : {}) } as CSSProperties;
-  return (
-    <div ref={ref} className={cx("oc-image-zoom", preset && `oc-image-zoom--${preset}`, className)} style={{ ...vars, ...style }} {...rest}>
-      {levels.length > 0 && (
-        <div className="oc-image-zoom__toolbar" role="radiogroup" aria-label="Zoom level">
-          <span className="oc-image-zoom__label">Zoom</span>
-          {levels.map((l) => (
-            <label key={l} className="oc-image-zoom__level">
-              <input type="radio" name={name} value={String(l)} checked={zoom === l} onChange={() => setZoom(l)} />
-              {Math.round(l * 100)}%
-            </label>
-          ))}
-        </div>
-      )}
-      <div className="oc-image-zoom__viewport" tabIndex={0} role="region" aria-label={alt ? `${alt}, scroll to pan` : "Scroll to pan"}>
-        <div className="oc-image-zoom__canvas">{media ?? (src ? <img src={src} alt={alt} /> : <div className="oc-media-art" role="img" aria-label={alt} />)}</div>
-      </div>
-    </div>
-  );
-});
+// File: packages/react/src/components/ImageZoom.tsx
+// Map: props -> ImageZoom (toolbar of radio levels -> viewport -> canvas with the image)
+// Same markup as packages/ui/snippets/image-zoom.html. The chosen level is also written to --oc-zoom,
+// so any number works (the CSS-only :has() rules cover 1, 1.5, 2, 3 and 4).
+"use client";
+
+import { forwardRef, useId, useState } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ImageZoomProps extends HTMLAttributes<HTMLDivElement> {
+  src?: string;
+  alt?: string;
+  /** Zoom levels for the toolbar. Empty array = no toolbar. Default [1, 1.5, 2, 3]. */
+  levels?: number[];
+  /** Starting level. Default 1. */
+  defaultZoom?: number;
+  /** Window ratio: "square", "photo" or a CSS ratio such as "21 / 9". Default 16 / 9. */
+  ratio?: "square" | "photo" | string;
+  /** Replaces the <img> inside the canvas (svg, video, placeholder art). */
+  media?: ReactNode;
+}
+
+/** `.oc-image-zoom`: zoom by making the canvas wider than the viewport; pan by scrolling. */
+export const ImageZoom = forwardRef<HTMLDivElement, ImageZoomProps>(function ImageZoom(
+  { src, alt = "", levels = [1, 1.5, 2, 3], defaultZoom = 1, ratio, media, className, style, ...rest },
+  ref,
+) {
+  const name = `oc-zoom-${useId().replace(/:/g, "")}`;
+  const [zoom, setZoom] = useState(defaultZoom);
+  const preset = ratio === "square" || ratio === "photo" ? ratio : undefined;
+  const vars = { "--oc-zoom": String(zoom), ...(ratio && !preset ? { "--oc-image-zoom-ratio": ratio } : {}) } as CSSProperties;
+  return (
+    <div ref={ref} className={cx("oc-image-zoom", preset && `oc-image-zoom--${preset}`, className)} style={{ ...vars, ...style }} {...rest}>
+      {levels.length > 0 && (
+        <div className="oc-image-zoom__toolbar" role="radiogroup" aria-label="Zoom level">
+          <span className="oc-image-zoom__label">Zoom</span>
+          {levels.map((l) => (
+            <label key={l} className="oc-image-zoom__level">
+              <input type="radio" name={name} value={String(l)} checked={zoom === l} onChange={() => setZoom(l)} />
+              {Math.round(l * 100)}%
+            </label>
+          ))}
+        </div>
+      )}
+      <div className="oc-image-zoom__viewport" tabIndex={0} role="region" aria-label={alt ? `${alt}, scroll to pan` : "Scroll to pan"}>
+        <div className="oc-image-zoom__canvas">{media ?? (src ? <img src={src} alt={alt} /> : <div className="oc-media-art" role="img" aria-label={alt} />)}</div>
+      </div>
+    </div>
+  );
+});

package/src/components/Input.tsx

@@ -1,21 +1,21 @@
-import { forwardRef } from "react";
-import type { InputHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  /** Error state: adds `oc-input--error` and `aria-invalid`. */
-  error?: boolean;
-}
-
-/** `<input class="oc-input">` */
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({ error, className, type = "text", ...rest }, ref) {
-  return (
-    <input
-      ref={ref}
-      type={type}
-      className={cx("oc-input", error && "oc-input--error", className)}
-      aria-invalid={error ? true : rest["aria-invalid"]}
-      {...rest}
-    />
-  );
-});
+import { forwardRef } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /** Error state: adds `oc-input--error` and `aria-invalid`. */
+  error?: boolean;
+}
+
+/** `<input class="oc-input">` */
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({ error, className, type = "text", ...rest }, ref) {
+  return (
+    <input
+      ref={ref}
+      type={type}
+      className={cx("oc-input", error && "oc-input--error", className)}
+      aria-invalid={error ? true : rest["aria-invalid"]}
+      {...rest}
+    />
+  );
+});

package/src/components/InputGroup.tsx

@@ -1,24 +1,24 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "prefix"> {
-  /** Addon before the input (currency sign...). */
-  prefix?: ReactNode;
-  /** Addon after the input (%, unit...). */
-  suffix?: ReactNode;
-}
-
-/** `<div class="oc-input-group">` with `oc-input-addon` spans around the child `<Input>`. */
-export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(
-  { prefix, suffix, className, children, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-input-group", className)} {...rest}>
-      {prefix != null && <span className="oc-input-addon">{prefix}</span>}
-      {children}
-      {suffix != null && <span className="oc-input-addon">{suffix}</span>}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "prefix"> {
+  /** Addon before the input (currency sign...). */
+  prefix?: ReactNode;
+  /** Addon after the input (%, unit...). */
+  suffix?: ReactNode;
+}
+
+/** `<div class="oc-input-group">` with `oc-input-addon` spans around the child `<Input>`. */
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(
+  { prefix, suffix, className, children, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-input-group", className)} {...rest}>
+      {prefix != null && <span className="oc-input-addon">{prefix}</span>}
+      {children}
+      {suffix != null && <span className="oc-input-addon">{suffix}</span>}
+    </div>
+  );
+});

package/src/components/LanguageSelect.tsx

@@ -1,64 +1,64 @@
-// File: packages/react/src/components/LanguageSelect.tsx
-// Map: types -> globe icon -> component (label pill: icon + native select)
-// Same markup as packages/ui/snippets/language-select.html. The app decides what "change" does.
-"use client";
-
-import { forwardRef } from "react";
-import type { ReactNode, SelectHTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface LanguageSelectOption {
-  value: string;
-  label: string;
-}
-
-export interface LanguageSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> {
-  options: LanguageSelectOption[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  /** Currency look (symbol in primary color). */
-  currency?: boolean;
-  /** No frame until hover / focus. */
-  ghost?: boolean;
-  /** Replaces the globe icon (e.g. "€"). */
-  icon?: ReactNode;
-  /** Class for the wrapping label (`className` goes to the select). */
-  labelClassName?: string;
-}
-
-/** 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>
-);
-
-/** `.oc-language-select`: native select in a pill with a leading icon. */
-export const LanguageSelect = forwardRef<HTMLSelectElement, LanguageSelectProps>(function LanguageSelect(
-  { options, value, defaultValue, onChange, currency, ghost, icon, labelClassName, className, ...rest },
-  ref,
-) {
-  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? options[0]?.value ?? "", onChange);
-  return (
-    <label className={cx("oc-language-select", ghost && "oc-language-select--ghost", currency && "oc-language-select--currency", labelClassName)}>
-      <span className="oc-language-select-icon" aria-hidden="true">{icon ?? (currency ? "\u20AC" : <Globe />)}</span>
-      <select
-        ref={ref}
-        className={cx("oc-language-select-control", className)}
-        aria-label={currency ? "Currency" : "Language"}
-        value={current}
-        onChange={(e) => setCurrent(e.target.value)}
-        {...rest}
-      >
-        {options.map((o) => (
-          <option key={o.value} value={o.value}>
-            {o.label}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-});
+// File: packages/react/src/components/LanguageSelect.tsx
+// Map: types -> globe icon -> component (label pill: icon + native select)
+// Same markup as packages/ui/snippets/language-select.html. The app decides what "change" does.
+"use client";
+
+import { forwardRef } from "react";
+import type { ReactNode, SelectHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface LanguageSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface LanguageSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> {
+  options: LanguageSelectOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Currency look (symbol in primary color). */
+  currency?: boolean;
+  /** No frame until hover / focus. */
+  ghost?: boolean;
+  /** Replaces the globe icon (e.g. "€"). */
+  icon?: ReactNode;
+  /** Class for the wrapping label (`className` goes to the select). */
+  labelClassName?: string;
+}
+
+/** 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>
+);
+
+/** `.oc-language-select`: native select in a pill with a leading icon. */
+export const LanguageSelect = forwardRef<HTMLSelectElement, LanguageSelectProps>(function LanguageSelect(
+  { options, value, defaultValue, onChange, currency, ghost, icon, labelClassName, className, ...rest },
+  ref,
+) {
+  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? options[0]?.value ?? "", onChange);
+  return (
+    <label className={cx("oc-language-select", ghost && "oc-language-select--ghost", currency && "oc-language-select--currency", labelClassName)}>
+      <span className="oc-language-select-icon" aria-hidden="true">{icon ?? (currency ? "\u20AC" : <Globe />)}</span>
+      <select
+        ref={ref}
+        className={cx("oc-language-select-control", className)}
+        aria-label={currency ? "Currency" : "Language"}
+        value={current}
+        onChange={(e) => setCurrent(e.target.value)}
+        {...rest}
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+});