@nation-a/ui 0.5.1 → 0.7.0

package/dist/index.cjs

@@ -593,6 +593,8 @@ function toArray$1(v2) {
   if (!v2) return [];
   return Array.isArray(v2) ? v2 : [v2];
 }
+var first = (v2) => v2[0];
+var last = (v2) => v2[v2.length - 1];
 var isString = (v2) => typeof v2 === "string";
 var isFunction = (v2) => typeof v2 === "function";
 var fnToString = Function.prototype.toString;
@@ -629,6 +631,7 @@ function ensure(c, m2) {
   if (c == null) throw new Error(m2);
 }
 var isObject = (v2) => typeof v2 === "object" && v2 !== null;
+var dataAttr = (guard) => guard ? "" : void 0;
 var ELEMENT_NODE = 1;
 var DOCUMENT_NODE = 9;
 var DOCUMENT_FRAGMENT_NODE = 11;
@@ -645,6 +648,7 @@ function isRootElement(node) {
 var isNode = (el) => isObject(el) && el.nodeType !== void 0;
 var isShadowRoot = (el) => isNode(el) && el.nodeType === DOCUMENT_FRAGMENT_NODE && "host" in el;
 var isInputElement = (el) => isHTMLElement(el) && el.localName === "input";
+var isAnchorElement = (el) => !!(el == null ? void 0 : el.matches("a[href]"));
 var isElementVisible = (el) => {
   if (!isHTMLElement(el)) return false;
   return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
@@ -715,8 +719,20 @@ function getPlatform() {
   const agent = navigator.userAgentData;
   return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
+function getUserAgent() {
+  const ua2 = navigator.userAgentData;
+  if (ua2 && Array.isArray(ua2.brands)) {
+    return ua2.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ");
+  }
+  return navigator.userAgent;
+}
 var pt = (v2) => isDom() && v2.test(getPlatform());
+var ua = (v2) => isDom() && v2.test(getUserAgent());
+var vn = (v2) => isDom() && v2.test(navigator.vendor);
 var isMac = () => pt(/^Mac/);
+var isSafari = () => isApple() && vn(/apple/i);
+var isFirefox = () => ua(/firefox\//i);
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
 var isIos = () => pt(/iP(hone|ad|od)|iOS/);
 function getComposedPath(event) {
   var _a, _b, _c;
@@ -726,9 +742,39 @@ function getEventTarget(event) {
   const composedPath = getComposedPath(event);
   return (composedPath == null ? void 0 : composedPath[0]) ?? event.target;
 }
+var isSelfTarget = (event) => {
+  return contains(event.currentTarget, getEventTarget(event));
+};
+function isComposingEvent(event) {
+  return getNativeEvent(event).isComposing;
+}
 var isContextMenuEvent = (e) => {
   return e.button === 2 || isMac() && e.ctrlKey && e.button === 0;
 };
+var keyMap = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Esc: "Escape",
+  " ": "Space",
+  ",": "Comma",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+};
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft"
+};
+function getEventKey(event, options = {}) {
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  let key = event.key;
+  key = keyMap[key] ?? key;
+  const isRtl = dir === "rtl" && orientation === "horizontal";
+  if (isRtl && key in rtlKeyMap) key = rtlKeyMap[key];
+  return key;
+}
+function getNativeEvent(event) {
+  return event.nativeEvent ?? event;
+}
 var addDomEvent = (target, eventName, handler, options) => {
   const node = typeof target === "function" ? target() : target;
   node == null ? void 0 : node.addEventListener(eventName, handler, options);
@@ -807,6 +853,26 @@ function raf$2(fn) {
     cleanup == null ? void 0 : cleanup();
   };
 }
+function queueBeforeEvent(el, type, cb) {
+  const cancelTimer = raf$2(() => {
+    el.removeEventListener(type, exec, true);
+    cb();
+  });
+  const exec = () => {
+    cancelTimer();
+    cb();
+  };
+  el.addEventListener(type, exec, { once: true, capture: true });
+  return cancelTimer;
+}
+function clickIfLink(el) {
+  const click = () => el.click();
+  if (isFirefox()) {
+    queueBeforeEvent(el, "keyup", click);
+  } else {
+    queueMicrotask(click);
+  }
+}
 function getNearestOverflowAncestor(el) {
   const parentNode = getParentNode$1(el);
   if (isRootElement(parentNode)) return getDocument(parentNode).body;
@@ -819,6 +885,28 @@ function isOverflowElement(el) {
   const { overflow, overflowX, overflowY, display } = win.getComputedStyle(el);
   return OVERFLOW_RE.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
 }
+function queryAll(root, selector) {
+  return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
+}
+var defaultItemToId = (v2) => v2.id;
+function itemById(v2, id, itemToId = defaultItemToId) {
+  return v2.find((item) => itemToId(item) === id);
+}
+function indexOfId(v2, id, itemToId = defaultItemToId) {
+  const item = itemById(v2, id, itemToId);
+  return item ? v2.indexOf(item) : -1;
+}
+function nextById(v2, id, loop2 = true) {
+  let idx = indexOfId(v2, id);
+  idx = loop2 ? (idx + 1) % v2.length : Math.min(idx + 1, v2.length - 1);
+  return v2[idx];
+}
+function prevById(v2, id, loop2 = true) {
+  let idx = indexOfId(v2, id);
+  if (idx === -1) return loop2 ? v2[v2.length - 1] : null;
+  idx = loop2 ? (idx - 1 + v2.length) % v2.length : Math.max(0, idx - 1);
+  return v2[idx];
+}
 var cleanups = /* @__PURE__ */ new WeakMap();
 function set(element, key, setup) {
   if (!cleanups.has(element)) {
@@ -935,6 +1023,25 @@ function mergeProps(...args) {
   }
   return result;
 }
+function createGuards() {
+  return {
+    and: (...guards) => {
+      return function andGuard(params) {
+        return guards.every((str) => params.guard(str));
+      };
+    },
+    or: (...guards) => {
+      return function orGuard(params) {
+        return guards.some((str) => params.guard(str));
+      };
+    },
+    not: (guard) => {
+      return function notGuard(params) {
+        return !params.guard(guard);
+      };
+    }
+  };
+}
 function createMachine(config2) {
   return config2;
 }
@@ -1831,7 +1938,7 @@ const [PresenceProvider, usePresenceContext] = createContext({
   providerName: "<PresenceProvider />"
 });
 const splitPresenceProps = (props) => createSplitProps()(props, ["immediate", "lazyMount", "onExitComplete", "present", "unmountOnExit"]);
-function connect$1(service, _normalize) {
+function connect$2(service, _normalize) {
   const { state, send, context: context2 } = service;
   const present = state.matches("mounted", "unmountSuspended");
   return {
@@ -1846,7 +1953,7 @@ function connect$1(service, _normalize) {
     }
   };
 }
-var machine$1 = createMachine({
+var machine$2 = createMachine({
   props({ props: props2 }) {
     return { ...props2, present: !!props2.present };
   },
@@ -2013,8 +2120,8 @@ const usePresence = (props = {}) => {
     present,
     onExitComplete: useEvent(props.onExitComplete)
   };
-  const service = useMachine(machine$1, machineProps);
-  const api = connect$1(service);
+  const service = useMachine(machine$2, machineProps);
+  const api = connect$2(service);
   if (api.present) {
     wasEverPresent.current = true;
   }
@@ -2793,7 +2900,7 @@ function preventBodyScroll(_document) {
     body.removeAttribute(LOCK_CLASSNAME);
   };
 }
-var anatomy = createAnatomy("dialog").parts(
+var anatomy$1 = createAnatomy("dialog").parts(
   "trigger",
   "backdrop",
   "positioner",
@@ -2802,7 +2909,7 @@ var anatomy = createAnatomy("dialog").parts(
   "description",
   "closeTrigger"
 );
-var parts = anatomy.build();
+var parts$1 = anatomy$1.build();
 var getPositionerId = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.positioner) ?? `dialog:${ctx2.id}:positioner`;
@@ -2811,11 +2918,11 @@ var getBackdropId = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.backdrop) ?? `dialog:${ctx2.id}:backdrop`;
 };
-var getContentId = (ctx2) => {
+var getContentId$1 = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.content) ?? `dialog:${ctx2.id}:content`;
 };
-var getTriggerId = (ctx2) => {
+var getTriggerId$1 = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.trigger) ?? `dialog:${ctx2.id}:trigger`;
 };
@@ -2831,14 +2938,14 @@ var getCloseTriggerId = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.closeTrigger) ?? `dialog:${ctx2.id}:close`;
 };
-var getContentEl = (ctx2) => ctx2.getById(getContentId(ctx2));
+var getContentEl$1 = (ctx2) => ctx2.getById(getContentId$1(ctx2));
 var getPositionerEl = (ctx2) => ctx2.getById(getPositionerId(ctx2));
 var getBackdropEl = (ctx2) => ctx2.getById(getBackdropId(ctx2));
-var getTriggerEl = (ctx2) => ctx2.getById(getTriggerId(ctx2));
+var getTriggerEl$1 = (ctx2) => ctx2.getById(getTriggerId$1(ctx2));
 var getTitleEl = (ctx2) => ctx2.getById(getTitleId(ctx2));
 var getDescriptionEl = (ctx2) => ctx2.getById(getDescriptionId(ctx2));
 var getCloseTriggerEl = (ctx2) => ctx2.getById(getCloseTriggerId(ctx2));
-function connect(service, normalize) {
+function connect$1(service, normalize) {
   const { state, send, context: context2, prop, scope } = service;
   const ariaLabel = prop("aria-label");
   const open = state.matches("open");
@@ -2851,14 +2958,14 @@ function connect(service, normalize) {
     },
     getTriggerProps() {
       return normalize.button({
-        ...parts.trigger.attrs,
+        ...parts$1.trigger.attrs,
         dir: prop("dir"),
-        id: getTriggerId(scope),
+        id: getTriggerId$1(scope),
         "aria-haspopup": "dialog",
         type: "button",
         "aria-expanded": open,
         "data-state": open ? "open" : "closed",
-        "aria-controls": getContentId(scope),
+        "aria-controls": getContentId$1(scope),
         onClick(event) {
           if (event.defaultPrevented) return;
           send({ type: "TOGGLE" });
@@ -2867,7 +2974,7 @@ function connect(service, normalize) {
     },
     getBackdropProps() {
       return normalize.element({
-        ...parts.backdrop.attrs,
+        ...parts$1.backdrop.attrs,
         dir: prop("dir"),
         hidden: !open,
         id: getBackdropId(scope),
@@ -2876,7 +2983,7 @@ function connect(service, normalize) {
     },
     getPositionerProps() {
       return normalize.element({
-        ...parts.positioner.attrs,
+        ...parts$1.positioner.attrs,
         dir: prop("dir"),
         id: getPositionerId(scope),
         style: {
@@ -2887,11 +2994,11 @@ function connect(service, normalize) {
     getContentProps() {
       const rendered = context2.get("rendered");
       return normalize.element({
-        ...parts.content.attrs,
+        ...parts$1.content.attrs,
         dir: prop("dir"),
         role: prop("role"),
         hidden: !open,
-        id: getContentId(scope),
+        id: getContentId$1(scope),
         tabIndex: -1,
         "data-state": open ? "open" : "closed",
         "aria-modal": true,
@@ -2902,21 +3009,21 @@ function connect(service, normalize) {
     },
     getTitleProps() {
       return normalize.element({
-        ...parts.title.attrs,
+        ...parts$1.title.attrs,
         dir: prop("dir"),
         id: getTitleId(scope)
       });
     },
     getDescriptionProps() {
       return normalize.element({
-        ...parts.description.attrs,
+        ...parts$1.description.attrs,
         dir: prop("dir"),
         id: getDescriptionId(scope)
       });
     },
     getCloseTriggerProps() {
       return normalize.button({
-        ...parts.closeTrigger.attrs,
+        ...parts$1.closeTrigger.attrs,
         dir: prop("dir"),
         id: getCloseTriggerId(scope),
         type: "button",
@@ -2929,7 +3036,7 @@ function connect(service, normalize) {
     }
   };
 }
-var machine = createMachine({
+var machine$1 = createMachine({
   props({ props: props2, scope }) {
     const alertDialog = props2.role === "alertdialog";
     const initialFocusEl = alertDialog ? () => getCloseTriggerEl(scope) : void 0;
@@ -3025,11 +3132,11 @@ var machine = createMachine({
     },
     effects: {
       trackDismissableElement({ scope, send, prop }) {
-        const getContentEl2 = () => getContentEl(scope);
+        const getContentEl2 = () => getContentEl$1(scope);
         return trackDismissableElement(getContentEl2, {
           defer: true,
           pointerBlocking: prop("modal"),
-          exclude: [getTriggerEl(scope)],
+          exclude: [getTriggerEl$1(scope)],
           onInteractOutside(event) {
             var _a;
             (_a = prop("onInteractOutside")) == null ? void 0 : _a(event);
@@ -3058,7 +3165,7 @@ var machine = createMachine({
       },
       trapFocus({ scope, prop }) {
         if (!prop("trapFocus") || !prop("modal")) return;
-        const contentEl = () => getContentEl(scope);
+        const contentEl = () => getContentEl$1(scope);
         return trapFocus(contentEl, {
           preventScroll: true,
           returnFocusOnDeactivate: !!prop("restoreFocus"),
@@ -3071,8 +3178,8 @@ var machine = createMachine({
       },
       hideContentBelow({ scope, prop }) {
         if (!prop("modal")) return;
-        const getElements = () => [getContentEl(scope)];
-        return ariaHidden(getElements, { defer: true });
+        const getElements2 = () => [getContentEl$1(scope)];
+        return ariaHidden(getElements2, { defer: true });
       }
     },
     actions: {
@@ -3086,7 +3193,7 @@ var machine = createMachine({
       },
       syncZIndex({ scope }) {
         raf$2(() => {
-          const contentEl = getContentEl(scope);
+          const contentEl = getContentEl$1(scope);
           if (!contentEl) return;
           const styles = getComputedStyle(contentEl);
           const elems = [getPositionerEl(scope), getBackdropEl(scope)];
@@ -3148,8 +3255,8 @@ const useDialog = (props) => {
     dir,
     ...props
   };
-  const service = useMachine(machine, machineProps);
-  return connect(service, normalizeProps);
+  const service = useMachine(machine$1, machineProps);
+  return connect$1(service, normalizeProps);
 };
 const DialogRoot = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
@@ -3205,6 +3312,595 @@ const getPortalNode = (cb) => {
 };
 const subscribe = () => () => {
 };
+const [TabsProvider, useTabsContext] = createContext({
+  name: "TabsContext",
+  hookName: "useTabsContext",
+  providerName: "<TabsProvider />"
+});
+const TabList = React.forwardRef((props, ref) => {
+  const tabs = useTabsContext();
+  const mergedProps = mergeProps(tabs.getListProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref });
+});
+TabList.displayName = "TabList";
+const TabTrigger = React.forwardRef((props, ref) => {
+  const [tabProps, localProps] = createSplitProps()(props, ["disabled", "value"]);
+  const tabs = useTabsContext();
+  const mergedProps = mergeProps(tabs.getTriggerProps(tabProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.button, { ...mergedProps, ref });
+});
+TabTrigger.displayName = "TabTrigger";
+var anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
+var parts = anatomy.build();
+var getRootId = (ctx2) => {
+  var _a;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx2.id}`;
+};
+var getListId = (ctx2) => {
+  var _a;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.list) ?? `tabs:${ctx2.id}:list`;
+};
+var getContentId = (ctx2, id) => {
+  var _a;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx2.id}:content-${id}`;
+};
+var getTriggerId = (ctx2, id) => {
+  var _a;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx2.id}:trigger-${id}`;
+};
+var getIndicatorId = (ctx2) => {
+  var _a;
+  return ((_a = ctx2.ids) == null ? void 0 : _a.indicator) ?? `tabs:${ctx2.id}:indicator`;
+};
+var getListEl = (ctx2) => ctx2.getById(getListId(ctx2));
+var getContentEl = (ctx2, id) => ctx2.getById(getContentId(ctx2, id));
+var getTriggerEl = (ctx2, id) => ctx2.getById(getTriggerId(ctx2, id));
+var getIndicatorEl = (ctx2) => ctx2.getById(getIndicatorId(ctx2));
+var getElements = (ctx2) => {
+  const ownerId = CSS.escape(getListId(ctx2));
+  const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
+  return queryAll(getListEl(ctx2), selector);
+};
+var getFirstTriggerEl = (ctx2) => first(getElements(ctx2));
+var getLastTriggerEl = (ctx2) => last(getElements(ctx2));
+var getNextTriggerEl = (ctx2, opts) => nextById(getElements(ctx2), getTriggerId(ctx2, opts.value), opts.loopFocus);
+var getPrevTriggerEl = (ctx2, opts) => prevById(getElements(ctx2), getTriggerId(ctx2, opts.value), opts.loopFocus);
+var getOffsetRect = (el) => {
+  return {
+    left: (el == null ? void 0 : el.offsetLeft) ?? 0,
+    top: (el == null ? void 0 : el.offsetTop) ?? 0,
+    width: (el == null ? void 0 : el.offsetWidth) ?? 0,
+    height: (el == null ? void 0 : el.offsetHeight) ?? 0
+  };
+};
+var getRectById = (ctx2, id) => {
+  const tab = itemById(getElements(ctx2), getTriggerId(ctx2, id));
+  return resolveRect(getOffsetRect(tab));
+};
+var resolveRect = (rect) => ({
+  width: `${rect.width}px`,
+  height: `${rect.height}px`,
+  left: `${rect.left}px`,
+  top: `${rect.top}px`
+});
+function connect(service, normalize) {
+  const { state, send, context: context2, prop, scope } = service;
+  const translations = prop("translations");
+  const focused = state.matches("focused");
+  const isVertical = prop("orientation") === "vertical";
+  const isHorizontal = prop("orientation") === "horizontal";
+  const composite = prop("composite");
+  function getTriggerState(props2) {
+    return {
+      selected: context2.get("value") === props2.value,
+      focused: context2.get("focusedValue") === props2.value,
+      disabled: !!props2.disabled
+    };
+  }
+  return {
+    value: context2.get("value"),
+    focusedValue: context2.get("focusedValue"),
+    setValue(value) {
+      send({ type: "SET_VALUE", value });
+    },
+    clearValue() {
+      send({ type: "CLEAR_VALUE" });
+    },
+    setIndicatorRect(value) {
+      const id = getTriggerId(scope, value);
+      send({ type: "SET_INDICATOR_RECT", id });
+    },
+    syncTabIndex() {
+      send({ type: "SYNC_TAB_INDEX" });
+    },
+    selectNext(fromValue) {
+      send({ type: "TAB_FOCUS", value: fromValue, src: "selectNext" });
+      send({ type: "ARROW_NEXT", src: "selectNext" });
+    },
+    selectPrev(fromValue) {
+      send({ type: "TAB_FOCUS", value: fromValue, src: "selectPrev" });
+      send({ type: "ARROW_PREV", src: "selectPrev" });
+    },
+    focus() {
+      var _a;
+      const value = context2.get("value");
+      if (!value) return;
+      (_a = getTriggerEl(scope, value)) == null ? void 0 : _a.focus();
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        id: getRootId(scope),
+        "data-orientation": prop("orientation"),
+        "data-focus": dataAttr(focused),
+        dir: prop("dir")
+      });
+    },
+    getListProps() {
+      return normalize.element({
+        ...parts.list.attrs,
+        id: getListId(scope),
+        role: "tablist",
+        dir: prop("dir"),
+        "data-focus": dataAttr(focused),
+        "aria-orientation": prop("orientation"),
+        "data-orientation": prop("orientation"),
+        "aria-label": translations == null ? void 0 : translations.listLabel,
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (!isSelfTarget(event)) return;
+          if (isComposingEvent(event)) return;
+          const keyMap2 = {
+            ArrowDown() {
+              if (isHorizontal) return;
+              send({ type: "ARROW_NEXT", key: "ArrowDown" });
+            },
+            ArrowUp() {
+              if (isHorizontal) return;
+              send({ type: "ARROW_PREV", key: "ArrowUp" });
+            },
+            ArrowLeft() {
+              if (isVertical) return;
+              send({ type: "ARROW_PREV", key: "ArrowLeft" });
+            },
+            ArrowRight() {
+              if (isVertical) return;
+              send({ type: "ARROW_NEXT", key: "ArrowRight" });
+            },
+            Home() {
+              send({ type: "HOME" });
+            },
+            End() {
+              send({ type: "END" });
+            },
+            Enter() {
+              send({ type: "ENTER" });
+            }
+          };
+          let key = getEventKey(event, {
+            dir: prop("dir"),
+            orientation: prop("orientation")
+          });
+          const exec = keyMap2[key];
+          if (exec) {
+            event.preventDefault();
+            exec(event);
+          }
+        }
+      });
+    },
+    getTriggerState,
+    getTriggerProps(props2) {
+      const { value, disabled } = props2;
+      const triggerState = getTriggerState(props2);
+      return normalize.button({
+        ...parts.trigger.attrs,
+        role: "tab",
+        type: "button",
+        disabled,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
+        "data-disabled": dataAttr(disabled),
+        "aria-disabled": disabled,
+        "data-value": value,
+        "aria-selected": triggerState.selected,
+        "data-selected": dataAttr(triggerState.selected),
+        "data-focus": dataAttr(triggerState.focused),
+        "aria-controls": triggerState.selected ? getContentId(scope, value) : void 0,
+        "data-ownedby": getListId(scope),
+        "data-ssr": dataAttr(context2.get("ssr")),
+        id: getTriggerId(scope, value),
+        tabIndex: triggerState.selected && composite ? 0 : -1,
+        onFocus() {
+          send({ type: "TAB_FOCUS", value });
+        },
+        onBlur(event) {
+          const target = event.relatedTarget;
+          if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
+            send({ type: "TAB_BLUR" });
+          }
+        },
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          if (disabled) return;
+          if (isSafari()) {
+            event.currentTarget.focus();
+          }
+          send({ type: "TAB_CLICK", value });
+        }
+      });
+    },
+    getContentProps(props2) {
+      const { value } = props2;
+      const selected = context2.get("value") === value;
+      return normalize.element({
+        ...parts.content.attrs,
+        dir: prop("dir"),
+        id: getContentId(scope, value),
+        tabIndex: composite ? 0 : -1,
+        "aria-labelledby": getTriggerId(scope, value),
+        role: "tabpanel",
+        "data-ownedby": getListId(scope),
+        "data-selected": dataAttr(selected),
+        "data-orientation": prop("orientation"),
+        hidden: !selected
+      });
+    },
+    getIndicatorProps() {
+      const indicatorRect = context2.get("indicatorRect");
+      const indicatorTransition = context2.get("indicatorTransition");
+      return normalize.element({
+        id: getIndicatorId(scope),
+        ...parts.indicator.attrs,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
+        style: {
+          "--transition-property": "left, right, top, bottom, width, height",
+          "--left": indicatorRect.left,
+          "--top": indicatorRect.top,
+          "--width": indicatorRect.width,
+          "--height": indicatorRect.height,
+          position: "absolute",
+          willChange: "var(--transition-property)",
+          transitionProperty: "var(--transition-property)",
+          transitionDuration: indicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionTimingFunction: "var(--transition-timing-function)",
+          [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
+        }
+      });
+    }
+  };
+}
+var { not } = createGuards();
+var machine = createMachine({
+  props({ props: props2 }) {
+    return {
+      dir: "ltr",
+      orientation: "horizontal",
+      activationMode: "automatic",
+      loopFocus: true,
+      composite: true,
+      navigate(details) {
+        clickIfLink(details.node);
+      },
+      defaultValue: null,
+      ...props2
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          var _a;
+          (_a = prop("onValueChange")) == null ? void 0 : _a({ value });
+        }
+      })),
+      focusedValue: bindable(() => ({
+        defaultValue: prop("value") || prop("defaultValue"),
+        sync: true,
+        onChange(value) {
+          var _a;
+          (_a = prop("onFocusChange")) == null ? void 0 : _a({ focusedValue: value });
+        }
+      })),
+      ssr: bindable(() => ({ defaultValue: true })),
+      indicatorTransition: bindable(() => ({ defaultValue: false })),
+      indicatorRect: bindable(() => ({
+        defaultValue: { left: "0px", top: "0px", width: "0px", height: "0px" }
+      }))
+    };
+  },
+  watch({ context: context2, prop, track, action }) {
+    track([() => context2.get("value")], () => {
+      action(["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+    });
+    track([() => prop("dir"), () => prop("orientation")], () => {
+      action(["syncIndicatorRect"]);
+    });
+  },
+  on: {
+    SET_VALUE: {
+      actions: ["setValue"]
+    },
+    CLEAR_VALUE: {
+      actions: ["clearValue"]
+    },
+    SET_INDICATOR_RECT: {
+      actions: ["setIndicatorRect"]
+    },
+    SYNC_TAB_INDEX: {
+      actions: ["syncTabIndex"]
+    }
+  },
+  entry: ["syncIndicatorRect", "syncTabIndex", "syncSsr"],
+  exit: ["cleanupObserver"],
+  states: {
+    idle: {
+      on: {
+        TAB_FOCUS: {
+          target: "focused",
+          actions: ["setFocusedValue"]
+        },
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
+        }
+      }
+    },
+    focused: {
+      on: {
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
+        },
+        ARROW_PREV: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusPrevTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusPrevTab"]
+          }
+        ],
+        ARROW_NEXT: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusNextTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusNextTab"]
+          }
+        ],
+        HOME: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusFirstTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusFirstTab"]
+          }
+        ],
+        END: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusLastTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusLastTab"]
+          }
+        ],
+        ENTER: {
+          guard: not("selectOnFocus"),
+          actions: ["selectFocusedTab"]
+        },
+        TAB_FOCUS: {
+          actions: ["setFocusedValue"]
+        },
+        TAB_BLUR: {
+          target: "idle",
+          actions: ["clearFocusedValue"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      selectOnFocus: ({ prop }) => prop("activationMode") === "automatic"
+    },
+    actions: {
+      selectFocusedTab({ context: context2, prop }) {
+        raf$2(() => {
+          const focusedValue = context2.get("focusedValue");
+          if (!focusedValue) return;
+          const nullable = prop("deselectable") && context2.get("value") === focusedValue;
+          const value = nullable ? null : focusedValue;
+          context2.set("value", value);
+        });
+      },
+      setFocusedValue({ context: context2, event, flush: flush2 }) {
+        if (event.value == null) return;
+        flush2(() => {
+          context2.set("focusedValue", event.value);
+        });
+      },
+      clearFocusedValue({ context: context2 }) {
+        context2.set("focusedValue", null);
+      },
+      setValue({ context: context2, event, prop }) {
+        const nullable = prop("deselectable") && context2.get("value") === context2.get("focusedValue");
+        context2.set("value", nullable ? null : event.value);
+      },
+      clearValue({ context: context2 }) {
+        context2.set("value", null);
+      },
+      focusFirstTab({ scope }) {
+        raf$2(() => {
+          var _a;
+          (_a = getFirstTriggerEl(scope)) == null ? void 0 : _a.focus();
+        });
+      },
+      focusLastTab({ scope }) {
+        raf$2(() => {
+          var _a;
+          (_a = getLastTriggerEl(scope)) == null ? void 0 : _a.focus();
+        });
+      },
+      focusNextTab({ context: context2, prop, scope, event }) {
+        const focusedValue = event.value ?? context2.get("focusedValue");
+        if (!focusedValue) return;
+        const triggerEl = getNextTriggerEl(scope, {
+          value: focusedValue,
+          loopFocus: prop("loopFocus")
+        });
+        raf$2(() => {
+          if (prop("composite")) {
+            triggerEl == null ? void 0 : triggerEl.focus();
+          } else if ((triggerEl == null ? void 0 : triggerEl.dataset.value) != null) {
+            context2.set("focusedValue", triggerEl.dataset.value);
+          }
+        });
+      },
+      focusPrevTab({ context: context2, prop, scope, event }) {
+        const focusedValue = event.value ?? context2.get("focusedValue");
+        if (!focusedValue) return;
+        const triggerEl = getPrevTriggerEl(scope, {
+          value: focusedValue,
+          loopFocus: prop("loopFocus")
+        });
+        raf$2(() => {
+          if (prop("composite")) {
+            triggerEl == null ? void 0 : triggerEl.focus();
+          } else if ((triggerEl == null ? void 0 : triggerEl.dataset.value) != null) {
+            context2.set("focusedValue", triggerEl.dataset.value);
+          }
+        });
+      },
+      syncTabIndex({ context: context2, scope }) {
+        raf$2(() => {
+          const value = context2.get("value");
+          if (!value) return;
+          const contentEl = getContentEl(scope, value);
+          if (!contentEl) return;
+          const focusables = getFocusables(contentEl);
+          if (focusables.length > 0) {
+            contentEl.removeAttribute("tabindex");
+          } else {
+            contentEl.setAttribute("tabindex", "0");
+          }
+        });
+      },
+      cleanupObserver({ refs }) {
+        const cleanup = refs.get("indicatorCleanup");
+        if (cleanup) cleanup();
+      },
+      allowIndicatorTransition({ context: context2 }) {
+        context2.set("indicatorTransition", true);
+      },
+      setIndicatorRect({ context: context2, event, scope }) {
+        const value = event.id ?? context2.get("value");
+        const indicatorEl = getIndicatorEl(scope);
+        if (!indicatorEl || !value) return;
+        const triggerEl = getTriggerEl(scope, value);
+        if (!triggerEl) return;
+        context2.set("indicatorRect", getRectById(scope, value));
+        nextTick(() => {
+          context2.set("indicatorTransition", false);
+        });
+      },
+      syncSsr({ context: context2 }) {
+        context2.set("ssr", false);
+      },
+      syncIndicatorRect({ context: context2, refs, scope }) {
+        const cleanup = refs.get("indicatorCleanup");
+        if (cleanup) cleanup();
+        const value = context2.get("value");
+        if (!value) return;
+        const triggerEl = getTriggerEl(scope, value);
+        const indicatorEl = getIndicatorEl(scope);
+        if (!triggerEl || !indicatorEl) return;
+        const exec = () => {
+          const rect = getOffsetRect(triggerEl);
+          context2.set("indicatorRect", resolveRect(rect));
+          nextTick(() => {
+            context2.set("indicatorTransition", false);
+          });
+        };
+        exec();
+        const win = scope.getWin();
+        const obs = new win.ResizeObserver(exec);
+        obs.observe(triggerEl);
+        refs.set("indicatorCleanup", () => obs.disconnect());
+      },
+      navigateIfNeeded({ context: context2, prop, scope }) {
+        var _a;
+        const value = context2.get("value");
+        if (!value) return;
+        const triggerEl = getTriggerEl(scope, value);
+        if (!isAnchorElement(triggerEl)) return;
+        (_a = prop("navigate")) == null ? void 0 : _a({ value, node: triggerEl });
+      }
+    }
+  }
+});
+createProps()([
+  "activationMode",
+  "composite",
+  "deselectable",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "loopFocus",
+  "navigate",
+  "onFocusChange",
+  "onValueChange",
+  "orientation",
+  "translations",
+  "value",
+  "defaultValue"
+]);
+createProps()(["disabled", "value"]);
+createProps()(["value"]);
+const useTabs = (props) => {
+  const id = React.useId();
+  const { getRootNode } = useEnvironmentContext();
+  const { dir } = useLocaleContext();
+  const machineProps = {
+    id,
+    dir,
+    getRootNode,
+    ...props
+  };
+  const service = useMachine(machine, machineProps);
+  return connect(service, normalizeProps);
+};
+const TabsRoot = React.forwardRef((props, ref) => {
+  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
+  const [useTabsProps, localprops] = createSplitProps()(tabsProps, [
+    "activationMode",
+    "composite",
+    "defaultValue",
+    "deselectable",
+    "id",
+    "ids",
+    "loopFocus",
+    "navigate",
+    "onFocusChange",
+    "onValueChange",
+    "orientation",
+    "translations",
+    "value"
+  ]);
+  const tabs = useTabs(useTabsProps);
+  const mergedProps = mergeProps(tabs.getRootProps(), localprops);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsProvider, { value: tabs, children: /* @__PURE__ */ jsxRuntime.jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref }) }) });
+});
+TabsRoot.displayName = "TabsRoot";
 const spinnerRecipe = cva({
   base: {
     display: "inline-block",
@@ -3832,7 +4528,7 @@ const createStyleContext = (recipe) => {
 };
 const dialogRecipe = sva({
   className: "dialog",
-  slots: [...anatomy.keys(), "header", "footer", "body"],
+  slots: [...anatomy$1.keys(), "header", "footer", "body"],
   base: {
     backdrop: {
       backdropFilter: "blur(4px)",
@@ -3917,16 +4613,16 @@ const dialogRecipe = sva({
     }
   }
 });
-const { withRootProvider, withContext } = createStyleContext(dialogRecipe);
-const Root = withRootProvider(DialogRoot);
-const Backdrop$1 = withContext(DialogBackdrop, "backdrop");
-const Trigger = withContext(DialogTrigger, "trigger");
-const Content = withContext(DialogContent, "content");
-const Title = withContext(DialogTitle, "title");
-const Description = withContext(DialogDescription, "description");
-const Positioner = withContext(DialogPositioner, "positioner");
-const Header = withContext(ark.header, "header");
-const Footer = withContext(
+const { withRootProvider: withRootProvider$1, withContext: withContext$1 } = createStyleContext(dialogRecipe);
+const Root$1 = withRootProvider$1(DialogRoot);
+const Backdrop$1 = withContext$1(DialogBackdrop, "backdrop");
+const Trigger$1 = withContext$1(DialogTrigger, "trigger");
+const Content = withContext$1(DialogContent, "content");
+const Title = withContext$1(DialogTitle, "title");
+const Description = withContext$1(DialogDescription, "description");
+const Positioner = withContext$1(DialogPositioner, "positioner");
+const Header = withContext$1(ark.header, "header");
+const Footer = withContext$1(
   ({ orientation = "horizontal", className, ...props }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ark.footer,
@@ -3944,12 +4640,12 @@ const Footer = withContext(
   },
   "footer"
 );
-const Body = withContext(ark.main, "body");
-const CloseTrigger = withContext(DialogCloseTrigger, "closeTrigger");
+const Body = withContext$1(ark.main, "body");
+const CloseTrigger = withContext$1(DialogCloseTrigger, "closeTrigger");
 const Dialog = {
-  Root,
+  Root: Root$1,
   Backdrop: Backdrop$1,
-  Trigger,
+  Trigger: Trigger$1,
   Content,
   Title,
   Description,
@@ -7750,6 +8446,220 @@ const BottomSheet = (props) => {
 };
 BottomSheetFrame.displayName = "BottomSheetFrame";
 Backdrop.displayName = "Backdrop";
+const navigationRecipe = sva({
+  className: "navigation",
+  slots: anatomy.keys(),
+  base: {
+    root: {
+      bg: "surface.layer_1",
+      zIndex: 10
+    },
+    list: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-around",
+      bg: "surface.layer_1",
+      pt: 2,
+      pb: 8
+    },
+    trigger: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      h: "48px",
+      w: "64px",
+      px: 2,
+      textStyle: "label.sm",
+      color: "content.neutral.subtlest",
+      transitionDuration: "normal",
+      transitionProperty: "background, border-color, color, box-shadow",
+      transitionTimingFunction: "default",
+      userSelect: "none",
+      rounded: "lg",
+      cursor: "pointer",
+      _hover: {
+        bg: "background.neutral.selected"
+      },
+      _selected: {
+        color: "content.neutral.default",
+        bg: "background.neutral.default"
+      }
+    }
+  }
+});
+const { withRootProvider, withContext } = createStyleContext(navigationRecipe);
+const Root = withRootProvider(TabsRoot);
+const Trigger = withContext(
+  ({ icon, label, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(TabTrigger, { ...props, children: [
+    icon,
+    label
+  ] }),
+  "trigger"
+);
+const List = withContext(TabList, "list");
+const Navigation = {
+  Root,
+  Item: Trigger,
+  List
+};
+const tagRecipe = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 1,
+    px: 2,
+    py: 1,
+    textStyle: "label.md",
+    height: "fit-content",
+    width: "fit-content",
+    cursor: "default"
+  },
+  variants: {
+    color: {
+      neutral: {},
+      black: {},
+      white: {}
+    },
+    background: {
+      on: {},
+      off: {}
+    },
+    radius: {
+      sm: { borderRadius: "sm" },
+      full: { borderRadius: "full" }
+    },
+    avatar: {
+      true: {
+        borderRadius: "full",
+        pl: 1
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      avatar: true,
+      color: "white",
+      css: {
+        background: "background.static.whiteAlpha.bold",
+        color: "content.static.black.default"
+      }
+    },
+    {
+      avatar: true,
+      color: "neutral",
+      css: {
+        background: "background.neutral.selected",
+        color: "content.neutral.default"
+      }
+    },
+    {
+      avatar: true,
+      color: "black",
+      css: {
+        background: "background.static.blackAlpha.default",
+        color: "content.static.white.default"
+      }
+    },
+    {
+      avatar: false,
+      background: "on",
+      color: "neutral",
+      css: {
+        background: "background.neutral.selected",
+        color: "content.neutral.default"
+      }
+    },
+    {
+      avatar: false,
+      background: "on",
+      color: "black",
+      css: {
+        background: "background.static.blackAlpha.default",
+        color: "content.static.white.default"
+      }
+    },
+    {
+      avatar: false,
+      background: "on",
+      color: "white",
+      css: {
+        background: "background.static.whiteAlpha.selected",
+        color: "content.static.black.default"
+      }
+    },
+    {
+      avatar: false,
+      background: "off",
+      color: "neutral",
+      css: {
+        background: "transparent",
+        color: "content.neutral.default"
+      }
+    },
+    {
+      avatar: false,
+      background: "off",
+      color: "black",
+      css: {
+        background: "transparent",
+        color: "content.static.black.default"
+      }
+    },
+    {
+      avatar: false,
+      background: "off",
+      color: "white",
+      css: {
+        background: "transparent",
+        color: "content.static.white.default"
+      }
+    }
+  ],
+  defaultVariants: {
+    background: "on",
+    radius: "sm",
+    color: "neutral",
+    avatar: false
+  }
+});
+function CloseOutlineIcon({ size = 24, color = "currentColor", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      strokeWidth: "0",
+      color,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          id: "Union",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+const Tag = React.forwardRef(({ color, background, radius, imageSrc, text, onDeleteClick, ...rest }, ref) => {
+  const StyledTag = styled(ark.div, tagRecipe);
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledTag, { color, background, radius, avatar: !!imageSrc, ref, ...rest, children: [
+    imageSrc ? /* @__PURE__ */ jsxRuntime.jsx(styled.img, { src: imageSrc, width: 8, height: 8, borderRadius: "full", overflow: "hidden", alt: "avatar thumbnail" }) : null,
+    text,
+    onDeleteClick ? /* @__PURE__ */ jsxRuntime.jsx(CloseOutlineIcon, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
+  ] });
+});
+Tag.displayName = "Tag";
 function definePreset(preset2) {
   return preset2;
 }
@@ -8054,8 +8964,10 @@ exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.Dialog = Dialog;
 exports.IconButton = IconButton;
+exports.Navigation = Navigation;
 exports.Portal = Portal;
 exports.Spinner = Spinner;
+exports.Tag = Tag;
 exports.Text = Text;
 exports.preset = preset;
 //# sourceMappingURL=index.cjs.map