@blockle/blocks-react 3.1.0 → 3.3.0

package/dist/components/navigation/Tabs/Tab.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { useContext, useRef, useEffect } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { TabListContext } from "./TabListContext.js";
+import { useTabsContext, getPanelId, getTabId } from "./TabsContext.js";
+import { trigger, slot, tab } from "./tabs.css.js";
+function hasContent(node) {
+  return node !== null && node !== void 0 && node !== false;
+}
+function revealInline(tab2, list) {
+  const tabBox = tab2.getBoundingClientRect();
+  const listBox = list.getBoundingClientRect();
+  if (tabBox.left < listBox.left) {
+    list.scrollLeft -= listBox.left - tabBox.left;
+  } else if (tabBox.right > listBox.right) {
+    list.scrollLeft += tabBox.right - listBox.right;
+  }
+}
+const TabFrame = ({
+  active,
+  as: Wrapper,
+  children,
+  endSlot,
+  scrollRef,
+  startSlot
+}) => {
+  const wrapperRef = useRef(null);
+  const tabClassName = useComponentStyles("tabs", { tab: true });
+  const startSlotClassName = useComponentStyles(
+    "tabs",
+    { startSlot: true },
+    false
+  );
+  const endSlotClassName = useComponentStyles("tabs", { endSlot: true }, false);
+  useEffect(() => {
+    if (active && wrapperRef.current && scrollRef?.current) {
+      revealInline(wrapperRef.current, scrollRef.current);
+    }
+  }, [active, scrollRef]);
+  return /* @__PURE__ */ jsxs(Wrapper, { ref: wrapperRef, className: classnames(tab, tabClassName), children: [
+    hasContent(startSlot) && /* @__PURE__ */ jsx("span", { className: classnames(slot, startSlotClassName), children: startSlot }),
+    children,
+    hasContent(endSlot) && /* @__PURE__ */ jsx("span", { className: classnames(slot, endSlotClassName), children: endSlot })
+  ] });
+};
+const [LinkTemplate, LinkSlot] = createSlottable("a");
+const TabsTab = ({
+  asChild: _asChild,
+  children,
+  className,
+  current: _current,
+  endSlot,
+  onClick,
+  startSlot,
+  value,
+  ...restProps
+}) => {
+  const { baseId, setValue, value: selectedValue } = useTabsContext("Tab");
+  const list = useContext(TabListContext);
+  const triggerClassName = useComponentStyles("tabs", { trigger: true });
+  if (value === void 0) {
+    throw new Error("Tab needs a value inside Tabs");
+  }
+  const selected = selectedValue === value;
+  return /* @__PURE__ */ jsx(
+    TabFrame,
+    {
+      as: "div",
+      active: selected,
+      scrollRef: list?.scrollRef,
+      startSlot,
+      endSlot,
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          ...restProps,
+          type: "button",
+          role: "tab",
+          id: getTabId(baseId, value),
+          "aria-selected": selected,
+          "aria-controls": getPanelId(baseId, value),
+          tabIndex: selected || list?.fallbackValue === value ? 0 : -1,
+          className: classnames(trigger, triggerClassName, className),
+          onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+              setValue(value);
+            }
+          },
+          children
+        }
+      )
+    }
+  );
+};
+const TabNavTab = ({
+  asChild,
+  children,
+  className,
+  current,
+  endSlot,
+  startSlot,
+  value: _value,
+  ...restProps
+}) => {
+  const list = useContext(TabListContext);
+  const triggerClassName = useComponentStyles("tabs", { trigger: true });
+  return /* @__PURE__ */ jsx(
+    TabFrame,
+    {
+      as: "li",
+      active: Boolean(current),
+      scrollRef: list?.scrollRef,
+      startSlot,
+      endSlot,
+      children: /* @__PURE__ */ jsx(
+        LinkTemplate,
+        {
+          ...restProps,
+          asChild,
+          "aria-current": current ? "page" : void 0,
+          className: classnames(trigger, triggerClassName, className),
+          children: /* @__PURE__ */ jsx(LinkSlot, { children })
+        }
+      )
+    }
+  );
+};
+const Tab = (props) => {
+  const inNav = useContext(TabListContext)?.nav ?? false;
+  return inNav ? /* @__PURE__ */ jsx(TabNavTab, { ...props }) : /* @__PURE__ */ jsx(TabsTab, { ...props });
+};
+export {
+  Tab
+};

package/dist/components/navigation/Tabs/TabIndicator.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The Tab indicator: one decorative bar per list, positioned by the base styles
+ * against the selected tab and styled by the theme. Shared by `TabList` and `TabNav`.
+ */
+export declare const TabIndicator: React.FC;
+//# sourceMappingURL=TabIndicator.d.ts.map

package/dist/components/navigation/Tabs/TabIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/TabIndicator.tsx"],"names":[],"mappings":"AAOA;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAUhC,CAAC"}

package/dist/components/navigation/Tabs/TabIndicator.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { indicator } from "./tabs.css.js";
+const TabIndicator = () => {
+  const className = useComponentStyles("tabs", { indicator: true });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-tab-indicator": "",
+      className: classnames(indicator, className)
+    }
+  );
+};
+export {
+  TabIndicator
+};

package/dist/components/navigation/Tabs/TabList.d.ts

@@ -0,0 +1,10 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type TabListProps = {
+    /** Names the tab list; use it or `aria-labelledby` when a page has several */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+} & Omit<HTMLElementProps<HTMLDivElement>, 'children' | 'ref'>;
+export declare const TabList: React.FC<TabListProps>;
+//# sourceMappingURL=TabList.d.ts.map

package/dist/components/navigation/Tabs/TabList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AASzE,MAAM,MAAM,YAAY,GAAG;IACzB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE/D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuG1C,CAAC"}

package/dist/components/navigation/Tabs/TabList.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useRef, useState, useLayoutEffect, useMemo } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { TabIndicator } from "./TabIndicator.js";
+import { TabListContext } from "./TabListContext.js";
+import { useTabsContext, getTabValue } from "./TabsContext.js";
+import { list } from "./tabs.css.js";
+const TabList = ({
+  children,
+  className,
+  onKeyDown,
+  ref,
+  ...restProps
+}) => {
+  const { baseId, setValue } = useTabsContext("TabList");
+  const listRef = useRef(null);
+  const listClassName = useComponentStyles("tabs", { list: true });
+  const [fallbackValue, setFallbackValue] = useState();
+  useLayoutEffect(() => {
+    const tabs = Array.from(
+      listRef.current?.querySelectorAll('[role="tab"]') ?? []
+    );
+    const hasSelected = tabs.some(
+      (tab) => tab.getAttribute("aria-selected") === "true"
+    );
+    const first = tabs[0];
+    setFallbackValue(
+      hasSelected || !first ? void 0 : getTabValue(baseId, first.id)
+    );
+  });
+  const context = useMemo(
+    () => ({ fallbackValue, nav: false, scrollRef: listRef }),
+    [fallbackValue]
+  );
+  return /* @__PURE__ */ jsx(TabListContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...restProps,
+      role: "tablist",
+      ref: (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      className: classnames(list, listClassName, className),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || !listRef.current) {
+          return;
+        }
+        const tabs = Array.from(
+          listRef.current.querySelectorAll('[role="tab"]')
+        );
+        const index = tabs.indexOf(event.target);
+        if (index === -1) {
+          return;
+        }
+        const nextIndex = getNextIndex(event.key, index, tabs.length);
+        if (nextIndex === void 0) {
+          return;
+        }
+        event.preventDefault();
+        const next = tabs[nextIndex];
+        if (!next) {
+          return;
+        }
+        const nextValue = getTabValue(baseId, next.id);
+        next.focus();
+        if (nextValue !== void 0) {
+          setValue(nextValue);
+        }
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TabIndicator, {})
+      ]
+    }
+  ) });
+};
+function getNextIndex(key, index, count) {
+  switch (key) {
+    case "ArrowRight":
+      return (index + 1) % count;
+    case "ArrowLeft":
+      return (index - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return void 0;
+  }
+}
+export {
+  TabList
+};

package/dist/components/navigation/Tabs/TabListContext.d.ts

@@ -0,0 +1,13 @@
+export type TabListContextValue = {
+    /**
+     * The value of the tab that takes the tab stop when no tab is selected, so
+     * the list stays reachable by keyboard. Undefined in a `TabNav`.
+     */
+    fallbackValue: string | undefined;
+    /** True inside a `TabNav`, so a Tab renders a link */
+    nav: boolean;
+    /** The element that scrolls sideways when the tabs overflow */
+    scrollRef: React.RefObject<HTMLElement | null>;
+};
+export declare const TabListContext: import('react').Context<TabListContextValue | null>;
+//# sourceMappingURL=TabListContext.d.ts.map

package/dist/components/navigation/Tabs/TabListContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListContext.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/TabListContext.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,sDAAsD;IACtD,GAAG,EAAE,OAAO,CAAC;IACb,+DAA+D;IAC/D,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,cAAc,qDAAkD,CAAC"}

package/dist/components/navigation/Tabs/TabListContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from "react";
+const TabListContext = createContext(null);
+export {
+  TabListContext
+};

package/dist/components/navigation/Tabs/TabNav.d.ts

@@ -0,0 +1,15 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type TabNavProps = {
+    /** Names the navigation; use it or `aria-labelledby` when a page has several */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** `Tab`s, each a link; mark the current page's with `current` */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+} & Omit<HTMLElementProps<HTMLElement>, 'children' | 'ref'>;
+/**
+ * Route tabs: a `nav` around a list of links that looks like `Tabs`. It has no
+ * tab roles or arrow-key handling; the links are plain links in the tab order.
+ */
+export declare const TabNav: React.FC<TabNavProps>;
+//# sourceMappingURL=TabNav.d.ts.map

package/dist/components/navigation/Tabs/TabNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNav.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/TabNav.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAQzE,MAAM,MAAM,WAAW,GAAG;IACxB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqCxC,CAAC"}

package/dist/components/navigation/Tabs/TabNav.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useRef, useMemo } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { TabIndicator } from "./TabIndicator.js";
+import { TabListContext } from "./TabListContext.js";
+import { navList, list } from "./tabs.css.js";
+const TabNav = ({
+  children,
+  className,
+  ref,
+  ...restProps
+}) => {
+  const navRef = useRef(null);
+  const listClassName = useComponentStyles("tabs", { list: true });
+  const navListClassName = useComponentStyles("tabs", { navList: true });
+  const context = useMemo(
+    () => ({ fallbackValue: void 0, nav: true, scrollRef: navRef }),
+    []
+  );
+  return /* @__PURE__ */ jsx(TabListContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: (node) => {
+        navRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      className: classnames(list, listClassName, className),
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: classnames(navList, navListClassName), children }),
+        /* @__PURE__ */ jsx(TabIndicator, {})
+      ]
+    }
+  ) });
+};
+export {
+  TabNav
+};

package/dist/components/navigation/Tabs/TabPanel.d.ts

@@ -0,0 +1,14 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type TabPanelProps = {
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+    /** Matches the `value` of the Tab that shows this panel */
+    value: string;
+} & Omit<HTMLElementProps<HTMLDivElement>, 'children' | 'ref' | 'value'>;
+/**
+ * Stays mounted while inactive, hidden with the `hidden` attribute, so its
+ * state (such as a typed draft) survives switching tabs. Render its children
+ * conditionally to mount them only while selected.
+ */
+export declare const TabPanel: React.FC<TabPanelProps>;
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/components/navigation/Tabs/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAKzE,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,OAAO,CAAC,CAAC;AAEzE;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuB5C,CAAC"}

package/dist/components/navigation/Tabs/TabPanel.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { useTabsContext, getTabId, getPanelId } from "./TabsContext.js";
+const TabPanel = ({
+  children,
+  className,
+  value,
+  ...restProps
+}) => {
+  const { baseId, value: selectedValue } = useTabsContext("TabPanel");
+  const selected = selectedValue === value;
+  const panelClassName = useComponentStyles("tabs", { panel: true });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: getPanelId(baseId, value),
+      "aria-labelledby": getTabId(baseId, value),
+      hidden: !selected,
+      tabIndex: selected ? 0 : void 0,
+      className: classnames(panelClassName, className),
+      ...restProps,
+      children
+    }
+  );
+};
+export {
+  TabPanel
+};

package/dist/components/navigation/Tabs/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type TabsProps = {
+    children?: React.ReactNode;
+    /** The initially selected tab when the selection is uncontrolled */
+    defaultValue?: string;
+    /** Called with the value of the tab that is selected */
+    onValueChange?: (value: string) => void;
+    ref?: React.Ref<HTMLDivElement>;
+    /** The selected tab, for a controlled selection */
+    value?: string;
+} & Omit<HTMLElementProps<HTMLDivElement>, 'children' | 'defaultValue' | 'ref' | 'value'>;
+export declare const Tabs: React.FC<TabsProps>;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/navigation/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CACN,gBAAgB,CAAC,cAAc,CAAC,EAChC,UAAU,GAAG,cAAc,GAAG,KAAK,GAAG,OAAO,CAC9C,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiCpC,CAAC"}

package/dist/components/navigation/Tabs/Tabs.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useId, useState, useCallback, useMemo } from "react";
+import { TabsContext } from "./TabsContext.js";
+const Tabs = ({
+  children,
+  defaultValue,
+  onValueChange,
+  value: controlledValue,
+  ...restProps
+}) => {
+  const baseId = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const setValue = useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    },
+    [isControlled, onValueChange]
+  );
+  const context = useMemo(
+    () => ({ value, setValue, baseId }),
+    [value, setValue, baseId]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ...restProps, children }) });
+};
+export {
+  Tabs
+};

package/dist/components/navigation/Tabs/TabsContext.d.ts

@@ -0,0 +1,13 @@
+export type TabsContextValue = {
+    /** The selected tab's value, or undefined when nothing is selected */
+    value: string | undefined;
+    setValue: (value: string) => void;
+    /** Prefix for the ids generated from each Tab's and TabPanel's value */
+    baseId: string;
+};
+export declare const TabsContext: import('react').Context<TabsContextValue | null>;
+export declare function useTabsContext(part: string): TabsContextValue;
+export declare function getTabId(baseId: string, value: string): string;
+export declare function getTabValue(baseId: string, id: string): string | undefined;
+export declare function getPanelId(baseId: string, value: string): string;
+//# sourceMappingURL=TabsContext.d.ts.map

package/dist/components/navigation/Tabs/TabsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/TabsContext.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,sEAAsE;IACtE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,kDAA+C,CAAC;AAExE,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAQ7D;AAGD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAErD;AAGD,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,sBAMrD;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAEvD"}

package/dist/components/navigation/Tabs/TabsContext.js

@@ -0,0 +1,27 @@
+"use client";
+import { useContext, createContext } from "react";
+const TabsContext = createContext(null);
+function useTabsContext(part) {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(`${part} must be rendered inside Tabs`);
+  }
+  return context;
+}
+function getTabId(baseId, value) {
+  return `${baseId}-tab-${encodeURIComponent(value)}`;
+}
+function getTabValue(baseId, id) {
+  const prefix = `${baseId}-tab-`;
+  return id.startsWith(prefix) ? decodeURIComponent(id.slice(prefix.length)) : void 0;
+}
+function getPanelId(baseId, value) {
+  return `${baseId}-panel-${encodeURIComponent(value)}`;
+}
+export {
+  TabsContext,
+  getPanelId,
+  getTabId,
+  getTabValue,
+  useTabsContext
+};

package/dist/components/navigation/Tabs/tabs.css.d.ts

@@ -0,0 +1,7 @@
+export declare const list: string;
+export declare const navList: string;
+export declare const indicator: string;
+export declare const tab: string;
+export declare const trigger: string;
+export declare const slot: string;
+//# sourceMappingURL=tabs.css.d.ts.map

package/dist/components/navigation/Tabs/tabs.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.css.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/Tabs/tabs.css.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,IAAI,QAgBf,CAAC;AAIH,eAAO,MAAM,OAAO,QAUlB,CAAC;AAMH,eAAO,MAAM,SAAS,QAiCpB,CAAC;AAEH,eAAO,MAAM,GAAG,QA2Bd,CAAC;AAQH,eAAO,MAAM,OAAO,QAMlB,CAAC;AAIH,eAAO,MAAM,IAAI,QAAY,CAAC"}

package/dist/components/navigation/Tabs/tabs.css.js

@@ -0,0 +1,122 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers, tabIndicatorVars } from "@blockle/blocks-core";
+import { style, globalStyle } from "@vanilla-extract/css";
+setFileScope("src/components/navigation/Tabs/tabs.css.ts", "@blockle/blocks-react");
+const selectedTrigger = '[aria-selected="true"], [aria-current="page"]';
+const selected = '> :is([aria-selected="true"], [aria-current="page"])';
+const anchorName = "--blockle-tab";
+const anchorPositioning = "(anchor-name: --a) and (anchor-scope: --a)";
+const anchorCss = (properties) => properties;
+const list = style({
+  "@layer": {
+    [layers.molecule]: {
+      // The Tab indicator is positioned against this box
+      position: "relative",
+      display: "flex",
+      // One row that scrolls sideways, never wraps. The Tab indicator is a
+      // child, so it scrolls with the tabs.
+      overflowX: "auto",
+      "@supports": {
+        // Keeps another tab list's selected tab from anchoring this list's
+        // Tab indicator
+        [anchorPositioning]: anchorCss({ anchorScope: anchorName })
+      }
+    }
+  }
+});
+const navList = style({
+  "@layer": {
+    [layers.molecule]: {
+      display: "flex",
+      flexShrink: 0,
+      listStyle: "none",
+      margin: 0,
+      padding: 0
+    }
+  }
+});
+const indicator = style({
+  "@layer": {
+    [layers.molecule]: {
+      display: "none",
+      "@supports": {
+        [anchorPositioning]: anchorCss({
+          display: "block",
+          position: "absolute",
+          positionAnchor: anchorName,
+          left: `anchor(${anchorName} left)`,
+          width: `anchor-size(${anchorName} width)`,
+          bottom: 0,
+          height: tabIndicatorVars.thickness,
+          backgroundColor: tabIndicatorVars.color,
+          pointerEvents: "none"
+        })
+      },
+      // Moves only for users who haven't asked for less motion
+      "@media": {
+        "(prefers-reduced-motion: no-preference)": {
+          transitionProperty: "left, width",
+          transitionDuration: tabIndicatorVars.duration,
+          transitionTimingFunction: tabIndicatorVars.easing
+        }
+      },
+      selectors: {
+        // Nothing selected, nothing to point at
+        [`${list}:not(:has(${selectedTrigger})) > &`]: {
+          display: "none"
+        }
+      }
+    }
+  }
+});
+const tab = style({
+  "@layer": {
+    [layers.molecule]: {
+      position: "relative",
+      flexShrink: 0,
+      selectors: {
+        // Static bar under the selected tab. Without anchor positioning it is
+        // the only mark; the moving Tab indicator replaces it everywhere else.
+        [`&:has(${selected})::after`]: {
+          content: '""',
+          position: "absolute",
+          insetInline: 0,
+          insetBlockEnd: 0,
+          blockSize: tabIndicatorVars.thickness,
+          backgroundColor: tabIndicatorVars.color
+        }
+      },
+      "@supports": {
+        [anchorPositioning]: {
+          selectors: {
+            [`&:has(${selected})`]: anchorCss({ anchorName }),
+            [`&:has(${selected})::after`]: { content: "none" }
+          }
+        }
+      }
+    }
+  }
+});
+const insetRing = { outlineOffset: "-2px !important" };
+const trigger = style({
+  "@layer": {
+    [layers.molecule]: {
+      ":focus-visible": insetRing
+    }
+  }
+});
+const slot = style({});
+globalStyle(`${slot} :is(button, a, [tabindex]):focus-visible`, {
+  "@layer": {
+    [layers.molecule]: insetRing
+  }
+});
+endFileScope();
+export {
+  indicator,
+  list,
+  navList,
+  slot,
+  tab,
+  trigger
+};