@bubbasfw/ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,12 +1,37 @@
 "use client";
-import { forwardRef } from 'react';
-import { Pressable, ActivityIndicator, Text } from 'react-native';
+import { createContext, forwardRef, useId, useState, useEffect, useContext, useRef, useCallback, useReducer, useMemo } from 'react';
+import { Pressable, ActivityIndicator, Text, Platform, View, Linking, TextInput, Modal, ScrollView, useColorScheme, Image } from 'react-native';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'nativewind/jsx-runtime';
+import { vars } from 'nativewind';
+import { jsxs, jsx, Fragment } from 'nativewind/jsx-runtime';
+
+function cn(...values) {
+  return twMerge(values.filter(Boolean).join(" "));
+}
+var focusRing = "web:focus-visible:outline web:focus-visible:outline-2 web:focus-visible:outline-offset-2 web:focus-visible:outline-ui-focus";
+function useControllableState({ value, defaultValue, onChange }) {
+  const [local, setLocal] = useState(defaultValue);
+  const controlled = value !== void 0;
+  const current = controlled ? value : local;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = useCallback((next) => {
+    if (Object.is(currentRef.current, next)) return;
+    if (!controlled) {
+      currentRef.current = next;
+      setLocal(next);
+    }
+    onChangeRef.current?.(next);
+  }, [controlled]);
+  return [current, setValue];
+}
 
 // src/tokens.ts
 var tokens = {
   brandVersion: "1.0.0",
+  systemVersion: "0.3.0",
   colors: {
     blue: "#007CE8",
     red: "#CC0000",
@@ -23,19 +48,133 @@ var tokens = {
   },
   spacing: { 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32, 12: 48, 16: 64 },
   radius: { control: 4, panel: 12 },
-  touchTarget: { minimum: 44, default: 48 }
+  touchTarget: { minimum: 44, default: 48 },
+  layout: { maxWidth: 1200, readingWidth: 720, breakpoints: { compact: 640, wide: 960 } },
+  motion: { feedback: 140 },
+  themes: {
+    "light": {
+      "canvas": "#F7F8FA",
+      "surface": "#FFFFFF",
+      "raised": "#FFFFFF",
+      "hover": "#F6F7F9",
+      "selected": "#ECEEF1",
+      "text": "#131B23",
+      "heading": "#03256C",
+      "muted": "#526075",
+      "line": "#E4E6EA",
+      "border": "#637086",
+      "link": "#03256C",
+      "link-hover": "#A80000",
+      "focus": "#03256C",
+      "focus-inner": "#FFFFFF",
+      "accent": "#CC0000",
+      "action-text": "#FFFFFF",
+      "action-border": "#A80000",
+      "disabled-surface": "#F0F2F5",
+      "disabled-text": "#6B727E",
+      "info": "#03256C",
+      "info-surface": "#F1F5FC",
+      "info-border": "#03256C",
+      "success": "#23633F",
+      "success-surface": "#EAF5EF",
+      "success-border": "#23633F",
+      "warning": "#805500",
+      "warning-surface": "#FFF4D6",
+      "warning-border": "#805500",
+      "error": "#B42318",
+      "error-surface": "#FFF0EF",
+      "error-border": "#B42318",
+      "code-surface": "#171717",
+      "code-text": "#FFFFFF",
+      "code-muted": "#B4B4B4",
+      "selection": "#D9E8FB",
+      "selection-text": "#131B23",
+      "scrollbar": "#637086",
+      "scrollbar-track": "#F7F8FA",
+      "shadow-action": "0 3px 8px #CC000024",
+      "shadow-panel": "0 2px 12px #131B2308",
+      "shadow-dialog": "0 20px 100px #00133345"
+    },
+    "dark": {
+      "canvas": "#171717",
+      "surface": "#202020",
+      "raised": "#292929",
+      "hover": "#303030",
+      "selected": "#383838",
+      "text": "#FFFFFF",
+      "heading": "#FFFFFF",
+      "muted": "#B4B4B4",
+      "line": "#3D3D3D",
+      "border": "#858585",
+      "link": "#8DC7FF",
+      "link-hover": "#B8DEFF",
+      "focus": "#FFFFFF",
+      "focus-inner": "#202020",
+      "accent": "#FF9F99",
+      "action-text": "#FFFFFF",
+      "action-border": "#EF817A",
+      "disabled-surface": "#242424",
+      "disabled-text": "#9A9A9A",
+      "info": "#8DC7FF",
+      "info-surface": "#1D2D3D",
+      "info-border": "#8DC7FF",
+      "success": "#8DDBA9",
+      "success-surface": "#183323",
+      "success-border": "#8DDBA9",
+      "warning": "#FED766",
+      "warning-surface": "#3A2E12",
+      "warning-border": "#FED766",
+      "error": "#FFAEA8",
+      "error-surface": "#3D2020",
+      "error-border": "#FFAEA8",
+      "code-surface": "#171717",
+      "code-text": "#FFFFFF",
+      "code-muted": "#B4B4B4",
+      "selection": "#383838",
+      "selection-text": "#FFFFFF",
+      "scrollbar": "#858585",
+      "scrollbar-track": "#171717",
+      "shadow-action": "0 3px 8px #00000040",
+      "shadow-panel": "0 2px 12px #00000020",
+      "shadow-dialog": "0 20px 100px #00000080"
+    }
+  }
 };
+function rgb(hex) {
+  return [1, 3, 5].map((start) => parseInt(hex.slice(start, start + 2), 16)).join(" ");
+}
+function themeVariables(appearance) {
+  return vars(Object.fromEntries(Object.entries(tokens.themes[appearance]).filter(([, value]) => value.startsWith("#")).map(([key, value]) => [`--bui-${key}`, rgb(value)])));
+}
+function themeValue(appearance, resolvedAppearance) {
+  return {
+    appearance,
+    resolvedAppearance,
+    colors: Object.fromEntries(Object.entries(tokens.themes[resolvedAppearance]).filter(([, value]) => value.startsWith("#"))),
+    variables: themeVariables(resolvedAppearance)
+  };
+}
+var ThemeContext = createContext(themeValue("light", "light"));
+function ThemeProvider({ appearance = "light", children, className, style, ...props }) {
+  const system = useColorScheme();
+  const resolved = appearance === "system" ? system === "dark" ? "dark" : "light" : appearance;
+  const value = useMemo(() => themeValue(appearance, resolved), [appearance, resolved]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(View, { ...props, className: cn("bg-ui-canvas", className), style: [value.variables, style], children }) });
+}
+function useTheme() {
+  return useContext(ThemeContext);
+}
 var containerVariants = {
-  primary: "border-bubba-red bg-bubba-red",
-  secondary: "border-bubba-navy bg-bubba-navy",
-  outline: "border-bubba-navy bg-transparent",
+  primary: "border-ui-action-border bg-bubba-red",
+  secondary: "border-ui-border bg-ui-selected",
+  outline: "border-ui-border bg-transparent",
   ghost: "border-transparent bg-transparent"
 };
 var textVariants = {
-  primary: "text-bubba-white",
-  secondary: "text-bubba-white",
-  outline: "text-bubba-navy",
-  ghost: "text-bubba-navy"
+  primary: "text-ui-action-text",
+  secondary: "text-ui-text",
+  outline: "text-ui-text",
+  ghost: "text-ui-link"
 };
 var containerSizes = {
   sm: "min-h-[44px] px-3 py-2",
@@ -62,10 +201,11 @@ var Button = forwardRef(
     "aria-disabled": ariaDisabled,
     ...props
   }, ref) {
+    const { colors } = useTheme();
     const explicitlyDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
     const isDisabled = explicitlyDisabled || loading;
     const isBusy = loading || (ariaBusy ?? accessibilityState?.busy ?? false);
-    const spinnerColor = explicitlyDisabled ? tokens.colors.disabledText : variant === "primary" || variant === "secondary" ? tokens.colors.white : tokens.colors.navy;
+    const spinnerColor = explicitlyDisabled ? colors["disabled-text"] : variant === "primary" ? colors["action-text"] : colors.text;
     return /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -76,11 +216,12 @@ var Button = forwardRef(
         "aria-busy": isBusy,
         "aria-disabled": isDisabled,
         disabled: isDisabled,
-        className: twMerge(
-          "min-w-[44px] flex-row items-center justify-center gap-2 rounded-[4px] border active:opacity-80 web:focus-visible:outline web:focus-visible:outline-2 web:focus-visible:outline-offset-2 web:focus-visible:outline-bubba-navy",
+        className: cn(
+          "min-w-[44px] flex-row items-center justify-center gap-2 rounded-[4px] border active:opacity-80",
+          focusRing,
           containerVariants[variant],
           containerSizes[size],
-          explicitlyDisabled && "border-bubba-disabled bg-bubba-disabled",
+          explicitlyDisabled && "border-ui-disabled-surface bg-ui-disabled-surface",
           className
         ),
         children: [
@@ -88,11 +229,11 @@ var Button = forwardRef(
           /* @__PURE__ */ jsx(
             Text,
             {
-              className: twMerge(
+              className: cn(
                 "font-bold text-center",
                 textVariants[variant],
                 textSizes[size],
-                explicitlyDisabled && "text-bubba-disabledText",
+                explicitlyDisabled && "text-ui-disabled-text",
                 textClassName
               ),
               children: loading && loadingLabel ? loadingLabel : children
@@ -103,5 +244,922 @@ var Button = forwardRef(
     );
   }
 );
+var tones = { default: "text-ui-text", muted: "text-ui-muted", info: "text-ui-info", success: "text-ui-success", warning: "text-ui-warning", error: "text-ui-error" };
+var variants = { body: "text-base leading-6", lead: "text-lg leading-7", small: "text-sm leading-5", label: "text-base leading-6 font-semibold", caption: "text-xs leading-4", code: "font-mono text-sm leading-6" };
+var Text2 = forwardRef(function Text3({ tone = "default", variant = "body", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Text, { ...props, ref, className: cn(variants[variant], tones[tone], className) });
+});
+var levels = { 1: "text-3xl leading-10", 2: "text-2xl leading-8", 3: "text-xl leading-7", 4: "text-lg leading-6", 5: "text-base leading-6", 6: "text-sm leading-5" };
+var Heading = forwardRef(function Heading2({ level = 2, className, ...props }, ref) {
+  const webLevel = Platform.OS === "web" ? { "aria-level": level } : {};
+  return /* @__PURE__ */ jsx(Text, { ...props, ...webLevel, ref, accessibilityRole: "header", className: cn("font-bold text-ui-heading", levels[level], className) });
+});
+var gaps = { 0: "gap-0", 1: "gap-1", 2: "gap-2", 3: "gap-3", 4: "gap-4", 6: "gap-6", 8: "gap-8", 12: "gap-12", 16: "gap-16" };
+var alignments = { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" };
+var justifications = { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between" };
+var Stack = forwardRef(function Stack2({ gap = 4, align = "stretch", justify = "start", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(View, { ...props, ref, className: cn("flex-col", gaps[gap], alignments[align], justifications[justify], className) });
+});
+var Inline = forwardRef(function Inline2({ gap = 3, align = "center", justify = "start", wrap = true, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(View, { ...props, ref, className: cn("flex-row", gaps[gap], alignments[align], justifications[justify], wrap ? "flex-wrap" : "flex-nowrap", className) });
+});
+var Container = forwardRef(function Container2({ reading = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(View, { ...props, ref, className: cn("mx-auto w-full px-4 sm:px-6 lg:px-8", reading ? "max-w-[720px]" : "max-w-[1200px]", className) });
+});
+var paddings = { 0: "p-0", 1: "p-1", 2: "p-2", 3: "p-3", 4: "p-4", 6: "p-6", 8: "p-8", 12: "p-12", 16: "p-16" };
+var Card = forwardRef(function Card2({ padding = 6, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(View, { ...props, ref, className: cn("rounded-xl border border-ui-line bg-ui-surface", paddings[padding], className) });
+});
+function Divider({ orientation = "horizontal", className, ...props }) {
+  return /* @__PURE__ */ jsx(View, { ...props, accessible: false, className: cn("bg-ui-line", orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch", className) });
+}
+var iconVariants = { primary: "bg-bubba-red border-bubba-red", outline: "border-ui-border bg-transparent", ghost: "border-transparent bg-transparent" };
+var IconButton = forwardRef(function IconButton2({ accessibilityLabel, children, variant = "ghost", className, disabled, accessibilityState, "aria-disabled": ariaDisabled, ...props }, ref) {
+  const isDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
+  return /* @__PURE__ */ jsx(Pressable, { ...props, ref, accessibilityRole: "button", accessibilityLabel, disabled: isDisabled, "aria-disabled": isDisabled, accessibilityState: { ...accessibilityState, disabled: isDisabled }, className: cn("h-12 w-12 items-center justify-center rounded border active:opacity-80", focusRing, iconVariants[variant], isDisabled && "opacity-50", className), children });
+});
+var LinkPressable = Pressable;
+var Link = forwardRef(function Link2({ href, children, external = false, className, textClassName, disabled, onPress, onOpenError, accessibilityState, "aria-disabled": ariaDisabled, ...props }, ref) {
+  const isDisabled = disabled || (ariaDisabled ?? accessibilityState?.disabled ?? false);
+  const webProps = Platform.OS === "web" && !isDisabled ? { href, hrefAttrs: external ? { target: "_blank", rel: "noopener noreferrer" } : void 0 } : {};
+  return /* @__PURE__ */ jsx(LinkPressable, { ...props, ...webProps, ref, accessibilityRole: "link", disabled: isDisabled, "aria-disabled": isDisabled, accessibilityState: { ...accessibilityState, disabled: isDisabled }, className: cn("min-h-[44px] min-w-[44px] justify-center self-start", focusRing, isDisabled && "opacity-50", className), onPress: (event) => {
+    onPress?.(event);
+    if (Platform.OS !== "web" && !event.isDefaultPrevented()) void Linking.openURL(href).catch((error) => onOpenError?.(error));
+  }, children: /* @__PURE__ */ jsx(Text2, { className: cn("text-ui-link underline", textClassName), children }) });
+});
+var toneClasses = {
+  neutral: "bg-ui-selected",
+  info: "bg-ui-info-surface",
+  success: "bg-ui-success-surface",
+  warning: "bg-ui-warning-surface",
+  error: "bg-ui-error-surface"
+};
+var toneText = { neutral: "text-ui-text", info: "text-ui-info", success: "text-ui-success", warning: "text-ui-warning", error: "text-ui-error" };
+function Badge({ children, tone = "neutral", className, textClassName, ...props }) {
+  return /* @__PURE__ */ jsx(View, { ...props, className: cn("self-start rounded-full px-3 py-1", toneClasses[tone], className), children: /* @__PURE__ */ jsx(Text2, { variant: "small", className: cn("font-semibold", toneText[tone], textClassName), children }) });
+}
+var avatarSizes = { sm: "h-8 w-8", md: "h-12 w-12", lg: "h-16 w-16" };
+function Avatar({ source, name, size = "md", className, ...props }) {
+  const [failedSource, setFailedSource] = useState();
+  const initials = name.trim().split(/\s+/).slice(0, 2).map((part) => part[0]).join("").toUpperCase() || "?";
+  return /* @__PURE__ */ jsx(View, { ...props, accessible: true, accessibilityRole: "image", accessibilityLabel: name, className: cn("items-center justify-center overflow-hidden rounded-full bg-ui-selected", avatarSizes[size], className), children: source && source !== failedSource ? /* @__PURE__ */ jsx(Image, { source, resizeMode: "cover", accessible: false, className: "h-full w-full", onError: () => setFailedSource(source) }) : /* @__PURE__ */ jsx(Text2, { accessible: false, className: "font-bold", children: initials }) });
+}
+function EmptyState({ title, description, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs(View, { ...props, className: cn("items-start gap-3 py-8", className), children: [
+    /* @__PURE__ */ jsx(Text2, { className: "text-lg font-bold", children: title }),
+    description ? /* @__PURE__ */ jsx(Text2, { tone: "muted", children: description }) : null,
+    children
+  ] });
+}
+var ListItem = forwardRef(function ListItem2({ title, description, leading, trailing, className, disabled = false, onPress, accessibilityState, ...props }, ref) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading,
+    /* @__PURE__ */ jsxs(View, { className: "min-w-0 flex-1 gap-1", children: [
+      /* @__PURE__ */ jsx(Text2, { className: "font-semibold", children: title }),
+      description ? /* @__PURE__ */ jsx(Text2, { variant: "small", tone: "muted", children: description }) : null
+    ] }),
+    trailing
+  ] });
+  const classes = cn("min-h-[48px] min-w-[44px] flex-row items-center gap-3 border-b border-ui-line py-3", onPress && focusRing, disabled && "opacity-50", className);
+  return onPress ? /* @__PURE__ */ jsx(Pressable, { ...props, ref, onPress, disabled, "aria-disabled": disabled, accessibilityRole: "button", accessibilityState: { ...accessibilityState, disabled }, className: classes, children: content }) : /* @__PURE__ */ jsx(View, { ...props, ref, accessibilityState, className: classes, children: content });
+});
+function Accordion({ items, value, defaultValue = "", onValueChange, className, ...props }) {
+  const [selected, setSelected] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const id = useId();
+  return /* @__PURE__ */ jsx(View, { ...props, className, children: items.map((item, index) => {
+    const expanded = selected === item.value;
+    const triggerID = `${id}-trigger-${index}`;
+    const panelID = `${id}-panel-${index}`;
+    return /* @__PURE__ */ jsxs(View, { className: "border-b border-ui-line", children: [
+      /* @__PURE__ */ jsxs(Pressable, { nativeID: triggerID, accessibilityRole: "button", accessibilityLabel: item.title, accessibilityState: { expanded, disabled: item.disabled }, "aria-expanded": expanded, "aria-disabled": item.disabled, ...{ "aria-controls": expanded ? panelID : void 0 }, disabled: item.disabled, onPress: () => setSelected(expanded ? "" : item.value), className: cn("min-h-[48px] min-w-[44px] flex-row items-center justify-between gap-4 py-3", focusRing, item.disabled && "opacity-50"), children: [
+        /* @__PURE__ */ jsx(Text2, { className: "flex-1 font-semibold", children: item.title }),
+        /* @__PURE__ */ jsx(View, { accessible: false, className: cn("mr-1 h-2 w-2 border-b-2 border-r-2 border-ui-text", expanded ? "rotate-[225deg]" : "rotate-45") })
+      ] }),
+      expanded ? /* @__PURE__ */ jsx(View, { nativeID: panelID, "aria-labelledby": triggerID, className: "gap-3 pb-4", children: item.content }) : null
+    ] }, item.value);
+  }) });
+}
+var locks = /* @__PURE__ */ new WeakMap();
+var overflowProperties = ["overflow", "overflow-x", "overflow-y"];
+var overscrollProperties = ["overscroll-behavior", "overscroll-behavior-x", "overscroll-behavior-y"];
+function preserve(style, properties) {
+  const previous = properties.map((property) => ({
+    property,
+    value: style.getPropertyValue(property),
+    priority: style.getPropertyPriority(property)
+  }));
+  return () => {
+    for (const { property, value, priority } of previous) {
+      if (value) style.setProperty(property, value, priority);
+      else style.removeProperty(property);
+    }
+  };
+}
+function acquire(document) {
+  let lock = locks.get(document);
+  if (!lock) {
+    const body = document.body;
+    const view = document.defaultView;
+    if (!body || !view) return;
+    const root = document.documentElement;
+    const { scrollX, scrollY } = view;
+    const width = root.clientWidth;
+    const paddingRight = Number.parseFloat(view.getComputedStyle(body).paddingRight) || 0;
+    const restoreRoot = preserve(root.style, [...overflowProperties, ...overscrollProperties]);
+    const restoreBody = preserve(body.style, [
+      ...overflowProperties,
+      ...overscrollProperties,
+      "position",
+      "top",
+      "left",
+      "right",
+      "padding-right"
+    ]);
+    const restoreScrollBehavior = preserve(root.style, ["scroll-behavior"]);
+    root.style.setProperty("scroll-behavior", "auto", "important");
+    root.style.setProperty("overflow", "hidden", "important");
+    root.style.setProperty("overscroll-behavior", "none", "important");
+    body.style.setProperty("overflow", "hidden", "important");
+    body.style.setProperty("overscroll-behavior", "none", "important");
+    body.style.setProperty("position", "fixed", "important");
+    body.style.setProperty("top", `${-scrollY}px`, "important");
+    body.style.setProperty("left", `${-scrollX}px`, "important");
+    body.style.setProperty("right", `${scrollX}px`, "important");
+    const compensation = Math.max(0, root.clientWidth - width);
+    if (compensation > 0) body.style.setProperty("padding-right", `${paddingRight + compensation}px`, "important");
+    lock = {
+      count: 0,
+      restore: () => {
+        restoreRoot();
+        restoreBody();
+        view.scrollTo(scrollX, scrollY);
+        restoreScrollBehavior();
+      }
+    };
+    locks.set(document, lock);
+  }
+  lock.count += 1;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    lock.count -= 1;
+    if (lock.count === 0) {
+      lock.restore();
+      locks.delete(document);
+    }
+  };
+}
+function useWebScrollLock(active) {
+  useEffect(() => {
+    if (!active || Platform.OS !== "web") return;
+    const document = globalThis.document;
+    return document ? acquire(document) : void 0;
+  }, [active]);
+}
+function Overlay({ open, defaultOpen = false, onOpenChange, title, description, children, closeLabel = "Close", dismissOnBackdropPress = true, className, contentClassName, testID, style, sheet = false, ...props }) {
+  const [isOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
+  const { variables } = useTheme();
+  const titleID = useId();
+  const descriptionID = useId();
+  const [webMounted, setWebMounted] = useState(false);
+  useEffect(() => {
+    if (Platform.OS === "web") setWebMounted(true);
+  }, []);
+  const [, refreshPortal] = useReducer((count) => count + 1, 0);
+  useEffect(() => {
+    if (Platform.OS === "web" && isOpen && webMounted) refreshPortal();
+  }, [isOpen, webMounted]);
+  const canRender = Platform.OS !== "web" || webMounted;
+  useWebScrollLock(isOpen && canRender);
+  if (!isOpen || !canRender) return null;
+  return /* @__PURE__ */ jsx(Modal, { transparent: true, visible: true, animationType: "none", onRequestClose: () => setOpen(false), accessibilityLabel: title, "aria-labelledby": titleID, ...description ? { "aria-describedby": descriptionID } : {}, children: /* @__PURE__ */ jsxs(View, { className: cn("flex-1 px-4 py-6", sheet ? "justify-end" : "justify-center"), style: variables, children: [
+    /* @__PURE__ */ jsx(View, { testID: testID ? `${testID}-backdrop` : void 0, accessible: false, onStartShouldSetResponder: () => dismissOnBackdropPress, onResponderRelease: () => {
+      if (dismissOnBackdropPress) setOpen(false);
+    }, className: "absolute inset-0 bg-black/50" }),
+    /* @__PURE__ */ jsxs(View, { ...props, testID, accessibilityViewIsModal: true, className: cn("w-full self-center bg-ui-surface p-6", sheet ? "max-h-[85%] max-w-[720px] rounded-t-xl" : "max-h-[85%] max-w-[560px] rounded-xl", className), style, children: [
+      /* @__PURE__ */ jsxs(View, { className: "mb-4 flex-row items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs(View, { className: "min-w-0 flex-1 gap-2", children: [
+          /* @__PURE__ */ jsx(Heading, { nativeID: titleID, level: 2, children: title }),
+          description ? /* @__PURE__ */ jsx(Text2, { nativeID: descriptionID, tone: "muted", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: closeLabel, onPress: () => setOpen(false), className: cn("min-h-[44px] min-w-[44px] items-center justify-center rounded px-2", focusRing), children: /* @__PURE__ */ jsx(Text2, { variant: "small", className: "font-semibold text-ui-link", children: closeLabel }) })
+      ] }),
+      /* @__PURE__ */ jsx(ScrollView, { keyboardShouldPersistTaps: "handled", className: cn("shrink", contentClassName), children })
+    ] })
+  ] }) });
+}
+function Dialog(props) {
+  return /* @__PURE__ */ jsx(Overlay, { ...props });
+}
+function Sheet(props) {
+  return /* @__PURE__ */ jsx(Overlay, { ...props, sheet: true });
+}
+var paints = { neutral: "bg-ui-selected", info: "bg-ui-info-surface", success: "bg-ui-success-surface", warning: "bg-ui-warning-surface", error: "bg-ui-error-surface" };
+var texts = { neutral: "text-ui-text", info: "text-ui-info", success: "text-ui-success", warning: "text-ui-warning", error: "text-ui-error" };
+function Alert({ title, description, children, tone = "info", announce = "off", className, ...props }) {
+  return /* @__PURE__ */ jsxs(View, { ...props, accessibilityLiveRegion: announce === "off" ? "none" : announce, "aria-live": announce, className: cn("gap-2 rounded-xl p-4", paints[tone], className), children: [
+    /* @__PURE__ */ jsx(Text2, { className: cn("font-semibold", texts[tone]), children: title }),
+    description ? /* @__PURE__ */ jsx(Text2, { className: texts[tone], children: description }) : null,
+    children
+  ] });
+}
+function Toast({ open, defaultOpen = true, onOpenChange, duration = 0, dismissLabel = "Dismiss notification", className, children, ...props }) {
+  const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
+  useEffect(() => {
+    if (!visible || duration <= 0) return;
+    const timer = setTimeout(() => setVisible(false), duration);
+    return () => clearTimeout(timer);
+  }, [duration, visible, setVisible]);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs(Alert, { ...props, accessibilityRole: "alert", announce: "polite", className, children: [
+    children,
+    /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: dismissLabel, onPress: () => setVisible(false), className: cn("min-h-[44px] min-w-[44px] self-start justify-center rounded px-2", focusRing), children: /* @__PURE__ */ jsx(Text2, { variant: "small", className: "font-semibold underline", children: "Dismiss" }) })
+  ] });
+}
+function Spinner({ label = "Loading", size = "small", className, ...props }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ jsx(View, { ...props, accessibilityRole: "progressbar", accessibilityLabel: label, accessibilityState: { busy: true }, "aria-busy": true, className: cn("self-start", className), children: /* @__PURE__ */ jsx(ActivityIndicator, { accessible: false, color: colors.text, size }) });
+}
+function Progress({ value, max = 100, label, className, indicatorClassName, ...props }) {
+  const maximum = Number.isFinite(max) && max > 0 ? max : 100;
+  const current = Math.min(maximum, Math.max(0, Number.isFinite(value) ? value : 0));
+  return /* @__PURE__ */ jsx(View, { ...props, accessibilityRole: "progressbar", accessibilityLabel: label, accessibilityValue: { min: 0, max: maximum, now: current }, "aria-valuemin": 0, "aria-valuemax": maximum, "aria-valuenow": current, className: cn("h-2 w-full overflow-hidden rounded-full bg-ui-selected", className), children: /* @__PURE__ */ jsx(View, { className: cn("h-full bg-bubba-red", indicatorClassName), style: { width: `${current / maximum * 100}%` } }) });
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(View, { ...props, accessible: false, "aria-hidden": true, importantForAccessibility: "no-hide-descendants", className: cn("h-4 w-full rounded bg-ui-selected", className) });
+}
+function Breadcrumbs({ items, label = "Breadcrumb", className, ...props }) {
+  return /* @__PURE__ */ jsx(View, { ...props, role: "navigation", accessibilityLabel: label, className: cn("flex-row flex-wrap items-center gap-2", className), children: items.map((item, index) => /* @__PURE__ */ jsxs(View, { className: "flex-row items-center gap-2", children: [
+    index > 0 ? /* @__PURE__ */ jsx(View, { accessible: false, className: "h-2 w-2 rotate-[-45deg] border-b border-r border-ui-muted" }) : null,
+    item.href && index !== items.length - 1 ? /* @__PURE__ */ jsx(Link, { href: item.href, textClassName: "text-sm", children: item.label }) : /* @__PURE__ */ jsx(Text2, { variant: "small", ...index === items.length - 1 ? { "aria-current": "page" } : {}, children: item.label })
+  ] }, `${item.label}-${index}`)) });
+}
+function Pagination({ page, count, onPageChange, label = "Pagination", className, ...props }) {
+  const total = Math.max(1, Math.floor(Number.isFinite(count) ? count : 1));
+  const current = Math.min(total, Math.max(1, Math.floor(Number.isFinite(page) ? page : 1)));
+  return /* @__PURE__ */ jsxs(View, { ...props, role: "navigation", accessibilityLabel: label, className: cn("flex-row flex-wrap items-center gap-3", className), children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: current === 1, onPress: () => onPageChange(current - 1), accessibilityLabel: "Previous page", children: "Previous" }),
+    /* @__PURE__ */ jsx(Text2, { variant: "small", accessibilityLiveRegion: "polite", "aria-live": "polite", children: `Page ${current} of ${total}` }),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: current === total, onPress: () => onPageChange(current + 1), accessibilityLabel: "Next page", children: "Next" })
+  ] });
+}
+var FieldContext = createContext(void 0);
+function useFormField() {
+  return useContext(FieldContext);
+}
+var FormField = forwardRef(function FormField2({
+  label,
+  hint,
+  error,
+  required = false,
+  disabled = false,
+  announceError = false,
+  children,
+  nativeID,
+  className,
+  labelClassName,
+  ...props
+}, ref) {
+  const generatedID = useId().replace(/:/g, "");
+  const id = nativeID ?? `bui-field-${generatedID}`;
+  const descriptionID = [hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(" ") || void 0;
+  const field = {
+    controlID: `${id}-control`,
+    labelID: `${id}-label`,
+    label,
+    descriptionID,
+    hint,
+    error,
+    invalid: Boolean(error),
+    required,
+    disabled
+  };
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: field, children: /* @__PURE__ */ jsxs(View, { ...props, ref, nativeID, className: cn("gap-2", className), children: [
+    /* @__PURE__ */ jsxs(Text, { nativeID: field.labelID, className: cn("text-base font-semibold text-ui-text", labelClassName), children: [
+      label,
+      required ? " *" : ""
+    ] }),
+    children,
+    hint ? /* @__PURE__ */ jsx(Text, { nativeID: `${id}-hint`, className: "text-sm leading-5 text-ui-muted", children: hint }) : null,
+    error ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        nativeID: `${id}-error`,
+        accessibilityLiveRegion: announceError ? "polite" : "none",
+        ...Platform.OS === "web" ? { "aria-live": announceError ? "polite" : "off" } : {},
+        className: "text-sm leading-5 text-ui-error",
+        children: error
+      }
+    ) : null
+  ] }) });
+});
+var Input = forwardRef(function Input2({
+  disabled,
+  invalid,
+  required,
+  readOnly = false,
+  editable,
+  className,
+  nativeID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  "aria-label": ariaLabel,
+  "aria-disabled": ariaDisabled,
+  placeholderTextColor,
+  selectionColor,
+  ...props
+}, ref) {
+  const field = useFormField();
+  const { colors } = useTheme();
+  const isDisabled = Boolean(disabled || ariaDisabled || accessibilityState?.disabled || field?.disabled);
+  const isReadOnly = readOnly || editable === false && !isDisabled;
+  const isInvalid = invalid ?? field?.invalid ?? false;
+  const isRequired = required ?? field?.required ?? false;
+  const explicitLabel = accessibilityLabel ?? ariaLabel;
+  const nativeHint = [
+    accessibilityHint ?? field?.hint,
+    field?.error && `Error: ${field.error}`,
+    isRequired && "Required",
+    isReadOnly && "Read only"
+  ].filter(Boolean).join(". ") || void 0;
+  const webProps = Platform.OS === "web" ? {
+    disabled: isDisabled,
+    readOnly: isReadOnly,
+    "aria-describedby": field?.descriptionID,
+    "aria-labelledby": explicitLabel ? void 0 : field?.labelID,
+    "aria-invalid": isInvalid,
+    "aria-required": isRequired,
+    "aria-readonly": isReadOnly || void 0
+  } : {};
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      ...props,
+      ...webProps,
+      ref,
+      nativeID: nativeID ?? field?.controlID,
+      accessibilityLabel: explicitLabel ?? (Platform.OS === "web" ? void 0 : field?.label),
+      accessibilityHint: nativeHint,
+      accessibilityState: { ...accessibilityState, disabled: isDisabled },
+      "aria-disabled": isDisabled,
+      editable: !isDisabled && !isReadOnly,
+      placeholderTextColor: placeholderTextColor ?? colors.muted,
+      selectionColor: selectionColor ?? colors.selection,
+      className: cn(
+        "min-h-[48px] rounded-[4px] border border-ui-border bg-ui-surface px-3 py-3 text-base text-ui-text",
+        focusRing,
+        isInvalid && "border-ui-error",
+        isDisabled && "bg-ui-disabled-surface text-ui-disabled-text",
+        className
+      )
+    }
+  );
+});
+var Textarea = forwardRef(function Textarea2({
+  className,
+  numberOfLines = 4,
+  textAlignVertical = "top",
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      ref,
+      multiline: true,
+      numberOfLines,
+      textAlignVertical,
+      className: cn("min-h-[120px]", className)
+    }
+  );
+});
+function spaceKeyHandler(disabled, activate) {
+  return Platform.OS === "web" ? {
+    onKeyDown(event) {
+      const key = event.key;
+      if (key === " " || key === "Spacebar") {
+        event.preventDefault();
+        if (!disabled && !event.repeat) activate(event);
+      }
+    }
+  } : {};
+}
+var ChoiceControl = forwardRef(function ChoiceControl2({
+  kind,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  indeterminate = false,
+  label,
+  description,
+  invalid,
+  required,
+  disabled,
+  className,
+  textClassName,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  "aria-label": ariaLabel,
+  "aria-disabled": ariaDisabled,
+  nativeID,
+  ...props
+}, ref) {
+  const field = useFormField();
+  const generatedID = useId().replace(/:/g, "");
+  const id = nativeID ?? field?.controlID ?? `bui-choice-${generatedID}`;
+  const isDisabled = Boolean(disabled || ariaDisabled || accessibilityState?.disabled || field?.disabled);
+  const [isChecked, setChecked] = useControllableState({ value: checked, defaultValue: defaultChecked, onChange: onCheckedChange });
+  const mixed = kind === "checkbox" && indeterminate;
+  const state = mixed ? "mixed" : isChecked;
+  const name = accessibilityLabel ?? ariaLabel ?? label ?? field?.label;
+  const isRequired = required ?? field?.required ?? false;
+  const isInvalid = invalid ?? field?.invalid ?? false;
+  const hint = [
+    accessibilityHint ?? description ?? field?.hint,
+    field?.error && `Error: ${field.error}`,
+    isRequired && "Required"
+  ].filter(Boolean).join(". ") || void 0;
+  const activate = (event) => {
+    if (isDisabled) return;
+    setChecked(mixed || !isChecked);
+    onPress?.(event);
+  };
+  const descriptions = [description && `${id}-description`, field?.descriptionID].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ...props,
+      ...spaceKeyHandler(isDisabled, activate),
+      ref,
+      nativeID: id,
+      accessibilityRole: kind,
+      accessibilityLabel: name,
+      accessibilityHint: hint,
+      accessibilityState: { ...accessibilityState, checked: state, disabled: isDisabled },
+      "aria-checked": state,
+      "aria-disabled": isDisabled,
+      disabled: isDisabled,
+      ...Platform.OS === "web" ? {
+        "aria-describedby": descriptions,
+        "aria-required": isRequired,
+        "aria-invalid": isInvalid
+      } : {},
+      onPress: activate,
+      className: cn(
+        "min-h-[44px] min-w-[44px] flex-row items-center gap-3 rounded-[4px] py-2",
+        focusRing,
+        isDisabled && "opacity-50",
+        className
+      ),
+      children: [
+        kind === "checkbox" ? /* @__PURE__ */ jsx(
+          View,
+          {
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+            className: cn(
+              "h-5 w-5 items-center justify-center rounded-[4px] border-2 border-ui-border",
+              (isChecked || mixed) && "border-bubba-red bg-bubba-red",
+              isInvalid && "border-ui-error"
+            ),
+            children: mixed ? /* @__PURE__ */ jsx(View, { className: "h-0.5 w-3 bg-white" }) : isChecked ? /* @__PURE__ */ jsx(View, { className: "h-[10px] w-[6px] -translate-y-px rotate-45 border-b-2 border-r-2 border-white" }) : null
+          }
+        ) : /* @__PURE__ */ jsx(
+          View,
+          {
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+            className: cn(
+              "h-[26px] w-[44px] rounded-full border border-ui-border bg-ui-selected p-[2px]",
+              isChecked && "border-bubba-red bg-bubba-red",
+              isInvalid && "border-ui-error"
+            ),
+            children: /* @__PURE__ */ jsx(View, { className: cn("h-5 w-5 rounded-full", isChecked ? "translate-x-[18px] bg-white" : "translate-x-0 bg-ui-muted") })
+          }
+        ),
+        label || description ? /* @__PURE__ */ jsxs(View, { className: "min-w-0 flex-1 gap-1", children: [
+          label ? /* @__PURE__ */ jsx(Text, { className: cn("text-base font-medium text-ui-text", textClassName), children: label }) : null,
+          description ? /* @__PURE__ */ jsx(Text, { nativeID: `${id}-description`, className: "text-sm leading-5 text-ui-muted", children: description }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+var Checkbox = forwardRef(function Checkbox2(props, ref) {
+  return /* @__PURE__ */ jsx(ChoiceControl, { ...props, ref, kind: "checkbox" });
+});
+var Switch = forwardRef(function Switch2(props, ref) {
+  return /* @__PURE__ */ jsx(ChoiceControl, { ...props, ref, kind: "switch" });
+});
+function useSelectionNavigation(items, value, onSelect, orientation, disabled = false, onActivate = onSelect) {
+  const refs = useRef([]);
+  const enabled = items.map((item, index) => !disabled && !item.disabled ? index : -1).filter((index) => index !== -1);
+  const selectedIndex = items.findIndex((item) => item.value === value && !item.disabled);
+  const tabStop = selectedIndex >= 0 && !disabled ? selectedIndex : enabled[0];
+  return (index) => ({
+    ref: (node) => {
+      refs.current[index] = node;
+    },
+    tabIndex: Platform.OS === "web" && index !== tabStop ? -1 : 0,
+    ...Platform.OS === "web" ? {
+      onKeyDown(event) {
+        if (disabled || items[index]?.disabled) return;
+        const key = event.key ?? event.nativeEvent?.key;
+        if (key === " " || key === "Spacebar") {
+          event.preventDefault();
+          if (!event.repeat) onActivate(items[index].value);
+          return;
+        }
+        const forward = key === (orientation === "horizontal" ? "ArrowRight" : "ArrowDown");
+        const backward = key === (orientation === "horizontal" ? "ArrowLeft" : "ArrowUp");
+        if (!forward && !backward && key !== "Home" && key !== "End") return;
+        event.preventDefault();
+        const position = enabled.indexOf(index);
+        const next = key === "Home" ? enabled[0] : key === "End" ? enabled[enabled.length - 1] : enabled[(position + (forward ? 1 : -1) + enabled.length) % enabled.length];
+        if (next === void 0) return;
+        onSelect(items[next].value);
+        refs.current[next]?.focus();
+      }
+    } : {}
+  });
+}
+var RadioGroup = forwardRef(function RadioGroup2({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  disabled = false,
+  required,
+  invalid,
+  orientation = "vertical",
+  className,
+  optionClassName,
+  textClassName,
+  nativeID,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  "aria-label": ariaLabel,
+  "aria-disabled": ariaDisabled,
+  ...props
+}, ref) {
+  const field = useFormField();
+  const generatedID = useId().replace(/:/g, "");
+  const id = nativeID ?? field?.controlID ?? `bui-radio-${generatedID}`;
+  const isDisabled = Boolean(disabled || ariaDisabled || accessibilityState?.disabled || field?.disabled);
+  const isRequired = required ?? field?.required ?? false;
+  const isInvalid = invalid ?? field?.invalid ?? false;
+  const [selected, setSelected] = useControllableState({
+    value,
+    defaultValue,
+    onChange: (next) => {
+      if (next !== void 0) onValueChange?.(next);
+    }
+  });
+  const select = (next) => {
+    if (!isDisabled && options.some((option) => option.value === next && !option.disabled)) setSelected(next);
+  };
+  const navigation = useSelectionNavigation(options, selected, select, orientation, isDisabled);
+  const labelID = label ? `${id}-label` : field?.labelID;
+  const explicitLabel = accessibilityLabel ?? ariaLabel;
+  const name = explicitLabel ?? label ?? field?.label;
+  const hint = [
+    accessibilityHint ?? field?.hint,
+    field?.error && `Error: ${field.error}`,
+    isRequired && "Required"
+  ].filter(Boolean).join(". ") || void 0;
+  return /* @__PURE__ */ jsxs(View, { ...props, ref, nativeID: id, className: cn("gap-2", className), children: [
+    label ? /* @__PURE__ */ jsx(Text, { nativeID: labelID, className: "text-base font-semibold text-ui-text", children: label }) : null,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: Platform.OS === "web" && labelID && !explicitLabel ? void 0 : name,
+        accessibilityHint: hint,
+        accessibilityState: { ...accessibilityState, disabled: isDisabled },
+        "aria-disabled": isDisabled,
+        ...Platform.OS === "web" ? {
+          "aria-labelledby": explicitLabel ? void 0 : labelID,
+          "aria-describedby": field?.descriptionID,
+          "aria-required": isRequired,
+          "aria-invalid": isInvalid,
+          "aria-orientation": orientation
+        } : {},
+        className: cn("gap-1", orientation === "horizontal" && "flex-row flex-wrap gap-x-6"),
+        children: options.map((option, index) => {
+          const checked = selected === option.value;
+          const optionDisabled = isDisabled || Boolean(option.disabled);
+          const optionID = `${id}-option-${index}`;
+          return /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              ...navigation(index),
+              nativeID: optionID,
+              accessibilityRole: "radio",
+              accessibilityLabel: option.label,
+              accessibilityHint: option.description,
+              accessibilityState: { checked, disabled: optionDisabled },
+              "aria-checked": checked,
+              "aria-disabled": optionDisabled,
+              ...Platform.OS === "web" ? { "aria-describedby": option.description ? `${optionID}-description` : void 0 } : {},
+              disabled: optionDisabled,
+              onPress: () => select(option.value),
+              className: cn(
+                "min-h-[44px] min-w-[44px] flex-row items-center gap-3 rounded-[4px] py-2",
+                focusRing,
+                optionDisabled && "opacity-50",
+                optionClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    accessible: false,
+                    importantForAccessibility: "no-hide-descendants",
+                    className: cn("h-5 w-5 items-center justify-center rounded-full border-2 border-ui-border", checked && "border-bubba-red"),
+                    children: checked ? /* @__PURE__ */ jsx(View, { className: "h-2.5 w-2.5 rounded-full bg-bubba-red" }) : null
+                  }
+                ),
+                /* @__PURE__ */ jsxs(View, { className: "min-w-0 flex-1 gap-1", children: [
+                  /* @__PURE__ */ jsx(Text, { className: cn("text-base font-medium text-ui-text", textClassName), children: option.label }),
+                  option.description ? /* @__PURE__ */ jsx(Text, { nativeID: `${optionID}-description`, className: "text-sm leading-5 text-ui-muted", children: option.description }) : null
+                ] })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+});
+var Select = forwardRef(function Select2({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  placeholder = "Choose an option",
+  required,
+  invalid,
+  disabled,
+  className,
+  textClassName,
+  nativeID,
+  testID,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  "aria-label": ariaLabel,
+  "aria-disabled": ariaDisabled,
+  ...props
+}, ref) {
+  const field = useFormField();
+  const generatedID = useId().replace(/:/g, "");
+  const id = nativeID ?? field?.controlID ?? `bui-select-${generatedID}`;
+  const isDisabled = Boolean(disabled || ariaDisabled || accessibilityState?.disabled || field?.disabled);
+  const isInvalid = invalid ?? field?.invalid ?? false;
+  const isRequired = required ?? field?.required ?? false;
+  const [selected, setSelected] = useControllableState({
+    value,
+    defaultValue,
+    onChange: (next) => {
+      if (next !== void 0) onValueChange?.(next);
+    }
+  });
+  const [open, setOpen] = useState(false);
+  const [pending, setPending] = useState(selected);
+  useEffect(() => {
+    if (isDisabled) setOpen(false);
+  }, [isDisabled]);
+  const selectedOption = options.find((option) => option.value === selected);
+  const title = label ?? field?.label ?? "Choose an option";
+  const labelID = label ? `${id}-label` : field?.labelID;
+  const explicitLabel = accessibilityLabel ?? ariaLabel;
+  const hint = [
+    accessibilityHint ?? field?.hint,
+    field?.error && `Error: ${field.error}`,
+    isRequired && "Required",
+    "Opens a list of choices"
+  ].filter(Boolean).join(". ");
+  const commit = (next) => {
+    if (isDisabled || !options.some((option) => option.value === next && !option.disabled)) return;
+    setSelected(next);
+    setOpen(false);
+  };
+  const navigation = useSelectionNavigation(options, pending, setPending, "vertical", isDisabled, commit);
+  return /* @__PURE__ */ jsxs(View, { className: "gap-2", children: [
+    label ? /* @__PURE__ */ jsx(Text, { nativeID: labelID, className: "text-base font-semibold text-ui-text", children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        ...props,
+        ref,
+        nativeID: id,
+        testID,
+        accessibilityRole: "button",
+        accessibilityLabel: explicitLabel ?? (Platform.OS === "web" ? void 0 : `${title}: ${selectedOption?.label ?? placeholder}`),
+        accessibilityHint: hint,
+        accessibilityState: { ...accessibilityState, disabled: isDisabled, expanded: open },
+        "aria-disabled": isDisabled,
+        "aria-expanded": open,
+        disabled: isDisabled,
+        ...Platform.OS === "web" ? {
+          "aria-haspopup": "dialog",
+          "aria-labelledby": !explicitLabel && labelID ? `${labelID} ${id}-value` : void 0,
+          "aria-describedby": field?.descriptionID,
+          "aria-invalid": isInvalid
+        } : {},
+        onPress: (event) => {
+          if (!isDisabled) {
+            setPending(selected);
+            setOpen(true);
+          }
+          onPress?.(event);
+        },
+        className: cn(
+          "min-h-[48px] flex-row items-center justify-between gap-4 rounded-[4px] border border-ui-border bg-ui-surface px-3 py-3",
+          focusRing,
+          isInvalid && "border-ui-error",
+          isDisabled && "bg-ui-disabled-surface",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Text, { nativeID: `${id}-value`, className: cn(
+            "min-w-0 flex-1 text-base",
+            selectedOption ? "text-ui-text" : "text-ui-muted",
+            isDisabled && "text-ui-disabled-text",
+            textClassName
+          ), children: selectedOption?.label ?? placeholder }),
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              accessible: false,
+              importantForAccessibility: "no-hide-descendants",
+              className: "mr-1 h-2 w-2 rotate-45 border-b-2 border-r-2 border-ui-muted"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        title,
+        closeLabel: "Cancel",
+        testID: testID ? `${testID}-dialog` : void 0,
+        children: /* @__PURE__ */ jsxs(
+          View,
+          {
+            accessibilityRole: "radiogroup",
+            accessibilityLabel: title,
+            ...Platform.OS === "web" ? { "aria-required": isRequired } : {},
+            className: "gap-1",
+            children: [
+              options.map((option, index) => {
+                const checked = pending === option.value;
+                const optionID = `${id}-option-${index}`;
+                return /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    ...navigation(index),
+                    nativeID: optionID,
+                    testID: testID ? `${testID}-option-${option.value}` : void 0,
+                    accessibilityRole: "radio",
+                    accessibilityLabel: option.label,
+                    accessibilityHint: option.description,
+                    accessibilityState: { checked, disabled: Boolean(option.disabled) },
+                    "aria-checked": checked,
+                    "aria-disabled": Boolean(option.disabled),
+                    disabled: option.disabled,
+                    ...Platform.OS === "web" ? { "aria-describedby": option.description ? `${optionID}-description` : void 0 } : {},
+                    onPress: () => commit(option.value),
+                    className: cn(
+                      "min-h-[48px] min-w-[44px] flex-row items-center gap-3 rounded-[4px] px-3 py-3",
+                      focusRing,
+                      checked && "bg-ui-selected",
+                      option.disabled && "opacity-50"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        View,
+                        {
+                          accessible: false,
+                          importantForAccessibility: "no-hide-descendants",
+                          className: cn("h-5 w-5 items-center justify-center rounded-full border-2 border-ui-border", checked && "border-bubba-red"),
+                          children: checked ? /* @__PURE__ */ jsx(View, { className: "h-2.5 w-2.5 rounded-full bg-bubba-red" }) : null
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(View, { className: "min-w-0 flex-1 gap-1", children: [
+                        /* @__PURE__ */ jsx(Text, { className: "text-base font-medium text-ui-text", children: option.label }),
+                        option.description ? /* @__PURE__ */ jsx(Text, { nativeID: `${optionID}-description`, className: "text-sm leading-5 text-ui-muted", children: option.description }) : null
+                      ] })
+                    ]
+                  },
+                  option.value
+                );
+              }),
+              options.length === 0 ? /* @__PURE__ */ jsx(Text, { className: "px-3 py-4 text-base text-ui-muted", children: "No options available." }) : null
+            ]
+          }
+        )
+      }
+    )
+  ] });
+});
+var Tabs = forwardRef(function Tabs2({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  label = "Content sections",
+  orientation = "horizontal",
+  className,
+  tabListClassName,
+  tabClassName,
+  textClassName,
+  panelClassName,
+  nativeID,
+  ...props
+}, ref) {
+  const generatedID = useId().replace(/:/g, "");
+  const id = nativeID ?? `bui-tabs-${generatedID}`;
+  const [selected, setSelected] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? items.find((item) => !item.disabled)?.value,
+    onChange: (next) => {
+      if (next !== void 0) onValueChange?.(next);
+    }
+  });
+  const select = (next) => {
+    if (items.some((item) => item.value === next && !item.disabled)) setSelected(next);
+  };
+  const navigation = useSelectionNavigation(items, selected, select, orientation);
+  const activeIndex = items.findIndex((item) => item.value === selected && !item.disabled);
+  const active = items[activeIndex];
+  return /* @__PURE__ */ jsxs(View, { ...props, ref, nativeID: id, className: cn("gap-4", className), children: [
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "tablist",
+        accessibilityLabel: label,
+        ...Platform.OS === "web" ? { "aria-orientation": orientation } : {},
+        className: cn(
+          "gap-1 rounded-md border border-ui-border bg-ui-selected p-1",
+          orientation === "horizontal" && "flex-row flex-wrap",
+          tabListClassName
+        ),
+        children: items.map((item, index) => {
+          const isSelected = index === activeIndex;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              ...navigation(index),
+              nativeID: `${id}-tab-${index}`,
+              accessibilityRole: "tab",
+              accessibilityLabel: item.label,
+              accessibilityState: { selected: isSelected, disabled: Boolean(item.disabled) },
+              "aria-selected": isSelected,
+              "aria-disabled": Boolean(item.disabled),
+              disabled: item.disabled,
+              ...Platform.OS === "web" ? { "aria-controls": isSelected ? `${id}-panel-${index}` : void 0 } : {},
+              onPress: () => select(item.value),
+              className: cn(
+                "min-h-[44px] min-w-[44px] items-center justify-center rounded-[4px] px-4 py-2",
+                focusRing,
+                isSelected && "bg-ui-surface",
+                item.disabled && "opacity-50",
+                tabClassName
+              ),
+              children: /* @__PURE__ */ jsx(Text, { className: cn("text-base font-semibold", isSelected ? "text-ui-text" : "text-ui-muted", textClassName), children: item.label })
+            },
+            item.value
+          );
+        })
+      }
+    ),
+    active ? /* @__PURE__ */ jsx(
+      View,
+      {
+        nativeID: `${id}-panel-${activeIndex}`,
+        role: "tabpanel",
+        accessibilityLabel: Platform.OS === "web" ? void 0 : active.label,
+        tabIndex: 0,
+        ...Platform.OS === "web" ? { "aria-labelledby": `${id}-tab-${activeIndex}` } : {},
+        className: cn("rounded-[4px]", focusRing, panelClassName),
+        children: active.content
+      },
+      active.value
+    ) : null
+  ] });
+});
 
-export { Button, tokens };
+export { Accordion, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, Container, Dialog, Divider, EmptyState, FormField, Heading, IconButton, Inline, Input, Link, ListItem, Pagination, Progress, RadioGroup, Select, Sheet, Skeleton, Spinner, Stack, Switch, Tabs, Text2 as Text, Textarea, ThemeProvider, Toast, themeVariables, tokens, useTheme };