@tcn/ui 0.3.1 → 0.3.3

package/dist/multiselect_values.css

@@ -1 +1 @@
-._chip_ab2e86b{margin-block:2px;margin-inline-end:4px;padding:4px 8px 4px 12px}._remove_e42285d,._remove_e42285d:focus,._remove_e42285d:active{outline-width:1px}._item-container_2592c83{background-color:#fff;border-radius:4px;padding:4px;max-height:150px;min-width:100%;overflow:auto;border:1px solid #aaa}._item-container_2592c83[data-is-disabled=true]{background-color:#0000000d;cursor:not-allowed}._item-container_2592c83[data-is-disabled=true]>._chip_ab2e86b{opacity:.5;cursor:not-allowed}
+@layer tcn-system{:where(._chip_ab2e86b){margin-block:2px;margin-inline-end:4px;padding:4px 8px 4px 12px}:where(._remove_e42285d),:where(._remove_e42285d:focus),:where(._remove_e42285d:active){outline-width:1px}:where(._item-container_2592c83){background-color:#fff;border-radius:4px;padding:4px;max-height:150px;min-width:100%;overflow:auto;border:1px solid #aaa}:where(._item-container_2592c83[data-is-disabled=true]){background-color:#0000000d;cursor:not-allowed}:where(._item-container_2592c83[data-is-disabled=true]>._chip_ab2e86b){opacity:.5;cursor:not-allowed}}

package/dist/navigation/index.d.ts

@@ -0,0 +1,7 @@
+export { Tabs, useTabs, type TabsProps, type TabsState } from './tabs/state/context.js';
+export { TabLink, type TabLinkProps, type TabLinkOwnProps, } from './tabs/state/link/tab_link.js';
+export { Tab, type TabProps } from './tabs/state/tab.js';
+export { TabsNavbar, type TabsNavbarProps } from './tabs/state/nav_bar.js';
+export { TabsBar, type TabsBarProps } from './tabs/primitives/tabs_bar.js';
+export { TabsList, TabItem, type TabsListProps, type TabItemProps, } from './tabs/primitives/tabs_list.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,KAAK,eAAe,GACrB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG3E,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EACL,QAAQ,EACR,OAAO,EACP,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,gCAAgC,CAAC"}

package/dist/navigation/index.js

@@ -0,0 +1,17 @@
+import { Tabs as a, useTabs as b } from "./tabs/state/context.js";
+import { TabLink as t } from "./tabs/state/link/tab_link.js";
+import { Tab as m } from "./tabs/state/tab.js";
+import { TabsNavbar as f } from "./tabs/state/nav_bar.js";
+import { TabsBar as x } from "./tabs/primitives/tabs_bar.js";
+import { TabItem as L, TabsList as k } from "./tabs/primitives/tabs_list.js";
+export {
+  m as Tab,
+  L as TabItem,
+  t as TabLink,
+  a as Tabs,
+  x as TabsBar,
+  k as TabsList,
+  f as TabsNavbar,
+  b as useTabs
+};
+//# sourceMappingURL=index.js.map

package/dist/navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/navigation/tabs/primitives/tabs_bar.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+import { HStackProps } from '../../../stacks/h_stack.js';
+export interface TabsBarProps extends HStackProps {
+    variant?: 'default' | 'inline';
+}
+export declare const TabsBar: FC<PropsWithChildren<TabsBarProps>>;
+//# sourceMappingURL=tabs_bar.d.ts.map

package/dist/navigation/tabs/primitives/tabs_bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_bar.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/primitives/tabs_bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGtE,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;CAChC;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAevD,CAAC"}

package/dist/navigation/tabs/primitives/tabs_bar.js

@@ -0,0 +1,21 @@
+import { jsx as b } from "react/jsx-runtime";
+import o from "clsx";
+import { HStack as c } from "../../../stacks/h_stack.js";
+import '../../../tabs_bar.css';const m = "_tabs-bar_ec9c589", e = { "tabs-bar": m }, l = ({
+  children: a,
+  className: t,
+  variant: r = "default",
+  ...s
+}) => /* @__PURE__ */ b(
+  c,
+  {
+    "data-variant": r,
+    className: o("tcn-tabs-bar", e["tabs-bar"], t),
+    ...s,
+    children: a
+  }
+);
+export {
+  l as TabsBar
+};
+//# sourceMappingURL=tabs_bar.js.map

package/dist/navigation/tabs/primitives/tabs_bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_bar.js","sources":["../../../../src/navigation/tabs/primitives/tabs_bar.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport styles from './tabs_bar.module.css';\n\nexport interface TabsBarProps extends HStackProps {\n  variant?: 'default' | 'inline';\n}\n\nexport const TabsBar: FC<PropsWithChildren<TabsBarProps>> = ({\n  children,\n  className,\n  variant = 'default',\n  ...props\n}) => {\n  return (\n    <HStack\n      data-variant={variant}\n      className={clsx('tcn-tabs-bar', styles['tabs-bar'], className)}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n};\n"],"names":["TabsBar","children","className","variant","props","jsx","HStack","clsx","styles"],"mappings":";;;sDASaA,IAA+C,CAAC;AAAA,EAC3D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,gBAAcH;AAAA,IACd,WAAWI,EAAK,gBAAgBC,EAAO,UAAU,GAAGN,CAAS;AAAA,IAC5D,GAAGE;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA;"}

package/dist/navigation/tabs/primitives/tabs_list.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { BaseButtonProps } from '../../../actions/index.js';
+import { HStackProps } from '../../../stacks/h_stack.js';
+export type TabsListProps = HStackProps;
+export declare const TabsList: FC<PropsWithChildren<TabsListProps>>;
+export interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {
+    selected?: boolean;
+}
+export declare const TabItem: import('react').ForwardRefExoticComponent<Omit<PropsWithChildren<TabItemProps>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=tabs_list.d.ts.map

package/dist/navigation/tabs/primitives/tabs_list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_list.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGtE,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC;AAExC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAYzD,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,4IAgBnB,CAAC"}

package/dist/navigation/tabs/primitives/tabs_list.js

@@ -0,0 +1,36 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { BaseButton as p } from "../../../actions/button/base_button/base_button.js";
+import "../../../actions/button/button_group/button_group.js";
+import "../../../actions/button/slim_button/slim_button.js";
+import "../../../actions/button/button/button.js";
+import "../../../actions/button/select_group/select_group.js";
+import "../../../actions/button/select_group/single_select_group.js";
+import { HStack as n } from "../../../stacks/h_stack.js";
+import e from "clsx";
+const T = ({
+  children: r,
+  className: a,
+  role: i = "tablist",
+  as: t = "menu",
+  ...m
+}) => /* @__PURE__ */ o(n, { as: t, role: i, className: e("tcn-tabs-list", a), ...m, children: r }), j = c(
+  ({ children: r, className: a, role: i = "tab", selected: t = !1, ...m }, s) => /* @__PURE__ */ o(
+    p,
+    {
+      ref: s,
+      role: i,
+      className: e(a, "tcn-interactive", "tcn-tab-item"),
+      hierarchy: "tertiary",
+      "data-is-selected": t,
+      "aria-selected": t,
+      ...m,
+      children: r
+    }
+  )
+);
+export {
+  j as TabItem,
+  T as TabsList
+};
+//# sourceMappingURL=tabs_list.js.map

package/dist/navigation/tabs/primitives/tabs_list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_list.js","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"sourcesContent":["import { forwardRef, type FC, type PropsWithChildren } from 'react';\nimport { BaseButton, type BaseButtonProps } from '../../../actions/index.js';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport clsx from 'clsx';\n\nexport type TabsListProps = HStackProps;\n\nexport const TabsList: FC<PropsWithChildren<TabsListProps>> = ({\n  children,\n  className,\n  role = 'tablist',\n  as = 'menu',\n  ...props\n}) => {\n  return (\n    <HStack as={as} role={role} className={clsx('tcn-tabs-list', className)} {...props}>\n      {children}\n    </HStack>\n  );\n};\n\nexport interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {\n  selected?: boolean;\n}\n\nexport const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(\n  ({ children, className, role = 'tab', selected = false, ...props }, ref) => {\n    return (\n      <BaseButton\n        ref={ref}\n        role={role}\n        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}\n        hierarchy=\"tertiary\"\n        data-is-selected={selected}\n        aria-selected={selected}\n        {...props}\n      >\n        {children}\n      </BaseButton>\n    );\n  }\n);\n"],"names":["TabsList","children","className","role","as","props","jsx","HStack","clsx","TabItem","forwardRef","selected","ref","BaseButton"],"mappings":";;;;;;;;;;AAOO,MAAMA,IAAiD,CAAC;AAAA,EAC7D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,GAAGC;AACL,MAEI,gBAAAC,EAACC,GAAA,EAAO,IAAAH,GAAQ,MAAAD,GAAY,WAAWK,EAAK,iBAAiBN,CAAS,GAAI,GAAGG,GAC1E,UAAAJ,EAAA,CACH,GAQSQ,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAT,GAAU,WAAAC,GAAW,MAAAC,IAAO,OAAO,UAAAQ,IAAW,IAAO,GAAGN,EAAA,GAASO,MAEhE,gBAAAN;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAT;AAAA,MACA,WAAWK,EAAKN,GAAW,mBAAmB,cAAc;AAAA,MAC5D,WAAU;AAAA,MACV,oBAAkBS;AAAA,MAClB,iBAAeA;AAAA,MACd,GAAGN;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAIT;"}

package/dist/navigation/tabs/state/context.d.ts

@@ -0,0 +1,21 @@
+import { FC, PropsWithChildren } from 'react';
+import { Rectangle } from '../../../utils/index.js';
+export interface TabsState {
+    value: string;
+    onChange?: (value: string) => void;
+    minItemWidth?: number;
+    maxItemWidth?: number;
+}
+export interface TabsContextValue extends TabsState {
+    activeTrigger: Rectangle | null;
+    setActiveTrigger: (trigger: Rectangle) => void;
+}
+export declare function useTabs(): TabsContextValue;
+export interface TabsProps {
+    value: string;
+    onChange?: (value: string) => void;
+    minItemWidth?: number;
+    maxItemWidth?: number;
+}
+export declare const Tabs: FC<PropsWithChildren<TabsProps>>;
+//# sourceMappingURL=context.d.ts.map

package/dist/navigation/tabs/state/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/state/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,aAAa,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,gBAAgB,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;CAChD;AAID,wBAAgB,OAAO,IAAI,gBAAgB,CAM1C;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAqBjD,CAAC"}

package/dist/navigation/tabs/state/context.js

@@ -0,0 +1,34 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as T, useContext as b, useState as x, useMemo as l } from "react";
+const n = T(null);
+function v() {
+  const t = b(n);
+  if (!t)
+    throw new Error("useTabs must be used within a Tabs provider");
+  return t;
+}
+const g = ({
+  value: t,
+  onChange: e,
+  children: u,
+  minItemWidth: r,
+  maxItemWidth: o
+}) => {
+  const [s, c] = x(null), i = l(
+    () => ({
+      value: t,
+      onChange: e,
+      activeTrigger: s,
+      setActiveTrigger: c,
+      minItemWidth: r,
+      maxItemWidth: o
+    }),
+    [t, e, s, r, o]
+  );
+  return /* @__PURE__ */ a(n.Provider, { value: i, children: u });
+};
+export {
+  g as Tabs,
+  v as useTabs
+};
+//# sourceMappingURL=context.js.map

package/dist/navigation/tabs/state/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../src/navigation/tabs/state/context.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  useContext,\n  useMemo,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\nimport type { Rectangle } from '../../../utils/index.js';\n\nexport interface TabsState {\n  value: string;\n  onChange?: (value: string) => void;\n  minItemWidth?: number;\n  maxItemWidth?: number;\n}\n\nexport interface TabsContextValue extends TabsState {\n  activeTrigger: Rectangle | null;\n  setActiveTrigger: (trigger: Rectangle) => void;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabs(): TabsContextValue {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('useTabs must be used within a Tabs provider');\n  }\n  return context;\n}\n\nexport interface TabsProps {\n  value: string;\n  onChange?: (value: string) => void;\n  minItemWidth?: number;\n  maxItemWidth?: number;\n}\n\nexport const Tabs: FC<PropsWithChildren<TabsProps>> = ({\n  value,\n  onChange,\n  children,\n  minItemWidth,\n  maxItemWidth,\n}) => {\n  const [activeTrigger, setActiveTrigger] = useState<Rectangle | null>(null);\n  const contextValue = useMemo(\n    () => ({\n      value,\n      onChange,\n      activeTrigger,\n      setActiveTrigger,\n      minItemWidth,\n      maxItemWidth,\n    }),\n    [value, onChange, activeTrigger, minItemWidth, maxItemWidth]\n  );\n\n  return <TabsContext.Provider value={contextValue}>{children}</TabsContext.Provider>;\n};\n"],"names":["TabsContext","createContext","useTabs","context","useContext","Tabs","value","onChange","children","minItemWidth","maxItemWidth","activeTrigger","setActiveTrigger","useState","contextValue","useMemo"],"mappings":";;AAsBA,MAAMA,IAAcC,EAAuC,IAAI;AAExD,SAASC,IAA4B;AAC1C,QAAMC,IAAUC,EAAWJ,CAAW;AACtC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,6CAA6C;AAE/D,SAAOA;AACT;AASO,MAAME,IAAyC,CAAC;AAAA,EACrD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA2B,IAAI,GACnEC,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,OAAAT;AAAA,MACA,UAAAC;AAAA,MACA,eAAAI;AAAA,MACA,kBAAAC;AAAA,MACA,cAAAH;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,IAEF,CAACJ,GAAOC,GAAUI,GAAeF,GAAcC,CAAY;AAAA,EAAA;AAG7D,2BAAQV,EAAY,UAAZ,EAAqB,OAAOc,GAAe,UAAAN,GAAS;AAC9D;"}

package/dist/navigation/tabs/state/link/tab_link.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { TabItemProps } from '../../primitives/tabs_list.js';
+export interface TabLinkOwnProps {
+    value: string;
+}
+export interface TabLinkProps extends Omit<TabItemProps, 'selected' | 'value'>, TabLinkOwnProps {
+}
+export declare const TabLink: import('react').ForwardRefExoticComponent<Omit<PropsWithChildren<TabLinkProps>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=tab_link.d.ts.map

package/dist/navigation/tabs/state/link/tab_link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab_link.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK3E,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,OAAO,CAAC,EAC9C,eAAe;CAAG;AAEtB,eAAO,MAAM,OAAO,4IA8BnB,CAAC"}

package/dist/navigation/tabs/state/link/tab_link.js

@@ -0,0 +1,36 @@
+import { jsx as W } from "react/jsx-runtime";
+import { forwardRef as b, useCallback as x } from "react";
+import { TabItem as l } from "../../primitives/tabs_list.js";
+import "../../../../utils/click_away_listener.js";
+import "../../../../utils/focus_redirect.js";
+import "../../../../utils/scroll_away_listener.js";
+import { useForkRef as T } from "../../../../utils/hooks/use_fork_ref.js";
+import "../../../../utils/hooks/use_resize_observer.js";
+import { useTabs as u } from "../context.js";
+import { useTabLink as C } from "./use_tab_link.js";
+const z = b(
+  ({ children: r, value: o, onClick: i, minWidth: m, maxWidth: e, ...n }, s) => {
+    const { ref: a, isMatch: c } = C(o), t = u(), p = T(a, s), f = x(
+      (k) => {
+        t.onChange?.(o), i?.(k);
+      },
+      [t, o, i]
+    ), d = t.minItemWidth ?? m, h = t.maxItemWidth ?? e;
+    return /* @__PURE__ */ W(
+      l,
+      {
+        ref: p,
+        selected: c,
+        onClick: f,
+        minWidth: d,
+        maxWidth: h,
+        ...n,
+        children: r
+      }
+    );
+  }
+);
+export {
+  z as TabLink
+};
+//# sourceMappingURL=tab_link.js.map

package/dist/navigation/tabs/state/link/tab_link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAiB;AAC5E,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWR,CAAK,GAChDS,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWT,CAAK,GACtBC,IAAUc,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOT,GAAOC,CAAO;AAAA,IAAA,GAGlBe,IAAeP,EAAM,gBAAgBP,GACrCe,IAAeR,EAAM,gBAAgBN;AAE3C,WACE,gBAAAe;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACT,GAAGb;AAAA,QAEH,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/navigation/tabs/state/link/use_tab_link.d.ts

@@ -0,0 +1,5 @@
+export declare function useTabLink(value: string): {
+    ref: import('react').RefObject<HTMLElement>;
+    isMatch: boolean;
+};
+//# sourceMappingURL=use_tab_link.d.ts.map

package/dist/navigation/tabs/state/link/use_tab_link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_tab_link.d.ts","sourceRoot":"","sources":["../../../../../src/navigation/tabs/state/link/use_tab_link.ts"],"names":[],"mappings":"AAIA,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM;;;EAYvC"}

package/dist/navigation/tabs/state/link/use_tab_link.js

@@ -0,0 +1,13 @@
+import { useLayoutEffect as o } from "react";
+import { useTabs as s } from "../context.js";
+import { useTrackActiveItemRectangle as a } from "../../../../utils/css_utils.js";
+function m(c) {
+  const e = s(), r = e.value === c, { ref: i, rectangle: t } = a(r);
+  return o(() => {
+    t && e.setActiveTrigger(t);
+  }, [t, e.setActiveTrigger]), { ref: i, isMatch: r };
+}
+export {
+  m as useTabLink
+};
+//# sourceMappingURL=use_tab_link.js.map

package/dist/navigation/tabs/state/link/use_tab_link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/use_tab_link.ts"],"sourcesContent":["import { useLayoutEffect } from 'react';\nimport { useTabs } from '../context.js';\nimport { useTrackActiveItemRectangle } from '../../../../utils/css_utils.js';\n\nexport function useTabLink(value: string) {\n  const state = useTabs();\n  const isMatch = state.value === value;\n  const { ref, rectangle } = useTrackActiveItemRectangle(isMatch);\n\n  useLayoutEffect(() => {\n    if (rectangle) {\n      state.setActiveTrigger(rectangle);\n    }\n  }, [rectangle, state.setActiveTrigger]);\n\n  return { ref, isMatch };\n}\n"],"names":["useTabLink","value","state","useTabs","isMatch","ref","rectangle","useTrackActiveItemRectangle","useLayoutEffect"],"mappings":";;;AAIO,SAASA,EAAWC,GAAe;AACxC,QAAMC,IAAQC,EAAA,GACRC,IAAUF,EAAM,UAAUD,GAC1B,EAAE,KAAAI,GAAK,WAAAC,MAAcC,EAA4BH,CAAO;AAE9D,SAAAI,EAAgB,MAAM;AACpB,IAAIF,KACFJ,EAAM,iBAAiBI,CAAS;AAAA,EAEpC,GAAG,CAACA,GAAWJ,EAAM,gBAAgB,CAAC,GAE/B,EAAE,KAAAG,GAAK,SAAAD,EAAA;AAChB;"}

package/dist/navigation/tabs/state/nav_bar.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from 'react';
+import { TabsBarProps } from '../primitives/tabs_bar.js';
+export type TabsNavbarProps = TabsBarProps;
+export declare const TabsNavbar: FC<PropsWithChildren<TabsNavbarProps>>;
+//# sourceMappingURL=nav_bar.d.ts.map

package/dist/navigation/tabs/state/nav_bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav_bar.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/state/nav_bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAKvE,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC;AAE3C,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA2B7D,CAAC"}

package/dist/navigation/tabs/state/nav_bar.js

@@ -0,0 +1,36 @@
+import { jsx as s } from "react/jsx-runtime";
+import m from "clsx";
+import { TabsBar as b } from "../primitives/tabs_bar.js";
+import { TabsList as l } from "../primitives/tabs_list.js";
+import { useTabs as n } from "./context.js";
+import { convertRectangleToCssVariables as f } from "../../../utils/css_utils.js";
+const d = ({
+  children: a,
+  className: r,
+  variant: t = "default",
+  style: o,
+  ...e
+}) => {
+  const i = n(), c = {
+    ...f(
+      "tabs",
+      "active",
+      i.activeTrigger
+    ),
+    ...o
+  };
+  return /* @__PURE__ */ s(
+    b,
+    {
+      style: c,
+      className: m("tcn-tabs-navbar", r),
+      variant: t,
+      ...e,
+      children: /* @__PURE__ */ s(l, { children: a })
+    }
+  );
+};
+export {
+  d as TabsNavbar
+};
+//# sourceMappingURL=nav_bar.js.map

package/dist/navigation/tabs/state/nav_bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav_bar.js","sources":["../../../../src/navigation/tabs/state/nav_bar.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren } from 'react';\nimport clsx from 'clsx';\nimport { TabsBar, type TabsBarProps } from '../primitives/tabs_bar.js';\nimport { TabsList } from '../primitives/tabs_list.js';\nimport { useTabs } from './context.js';\nimport { convertRectangleToCssVariables } from '../../../utils/css_utils.js';\n\nexport type TabsNavbarProps = TabsBarProps;\n\nexport const TabsNavbar: FC<PropsWithChildren<TabsNavbarProps>> = ({\n  children,\n  className,\n  variant = 'default',\n  style,\n  ...props\n}) => {\n  const state = useTabs();\n  const cssVariables = convertRectangleToCssVariables(\n    'tabs',\n    'active',\n    state.activeTrigger\n  );\n  const finalStyle = {\n    ...cssVariables,\n    ...style,\n  };\n  return (\n    <TabsBar\n      style={finalStyle}\n      className={clsx('tcn-tabs-navbar', className)}\n      variant={variant}\n      {...props}\n    >\n      <TabsList>{children}</TabsList>\n    </TabsBar>\n  );\n};\n"],"names":["TabsNavbar","children","className","variant","style","props","state","useTabs","finalStyle","convertRectangleToCssVariables","jsx","TabsBar","clsx","TabsList"],"mappings":";;;;;;AASO,MAAMA,IAAqD,CAAC;AAAA,EACjE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAQC,EAAA,GAMRC,IAAa;AAAA,IACjB,GANmBC;AAAA,MACnB;AAAA,MACA;AAAA,MACAH,EAAM;AAAA,IAAA;AAAA,IAIN,GAAGF;AAAA,EAAA;AAEL,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOH;AAAA,MACP,WAAWI,EAAK,mBAAmBV,CAAS;AAAA,MAC5C,SAAAC;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAA,gBAAAK,EAACG,KAAU,UAAAZ,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG1B;"}

package/dist/navigation/tabs/state/tab.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+export interface TabProps {
+    value: string;
+}
+export declare const Tab: FC<PropsWithChildren<TabProps>>;
+//# sourceMappingURL=tab.d.ts.map

package/dist/navigation/tabs/state/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAI/C,CAAC"}

package/dist/navigation/tabs/state/tab.js

@@ -0,0 +1,6 @@
+import { useTabs as r } from "./context.js";
+const n = ({ value: t, children: e }) => r().value !== t ? null : e;
+export {
+  n as Tab
+};
+//# sourceMappingURL=tab.js.map

package/dist/navigation/tabs/state/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { useTabs } from './context.js';\n\nexport interface TabProps {\n  value: string;\n}\n\nexport const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {\n  const state = useTabs();\n  if (state.value !== value) return null;\n  return children;\n};\n"],"names":["Tab","value","children","useTabs"],"mappings":";AAOO,MAAMA,IAAuC,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAC9CC,EAAA,EACJ,UAAUF,IAAc,OAC3BC;"}

package/dist/overlay/context_menu/context_menu.js

@@ -1,15 +1,15 @@
-import { jsxs as c, Fragment as m, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, Fragment as m, jsx as t } from "react/jsx-runtime";
 import { Portal as s } from "../portal/portal.js";
 import { useState as h } from "react";
 import { Menu as u } from "../menu/menu.js";
 function v({ open: e, position: r, children: n, onClose: i }) {
   const [o, l] = h(null);
-  return !e || r == null ? null : /* @__PURE__ */ c(m, { children: [
+  return !e || r == null ? null : /* @__PURE__ */ a(m, { children: [
     /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t("div", { style: { position: "fixed", inset: 0 }, children: /* @__PURE__ */ t(
       "div",
       {
-        ref: (a) => {
-          l(a);
+        ref: (c) => {
+          l(c);
         },
         style: {
           position: "absolute",
@@ -33,7 +33,7 @@ function v({ open: e, position: r, children: n, onClose: i }) {
         open: e,
         onClose: i,
         minWidth: "150px",
-        className: "context-menu",
+        className: "tcn-context-menu",
         children: n
       }
     )

package/dist/overlay/context_menu/context_menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"context_menu.js","sources":["../../../src/overlay/context_menu/context_menu.tsx"],"sourcesContent":["import { Position } from '../../utils/index.js';\nimport { Portal } from '../portal/portal.js';\nimport React, { useState } from 'react';\nimport { Menu } from '../menu/menu.js';\n\nexport interface ContextMenuProps {\n  open: boolean;\n  onClose: () => void;\n  position?: Position | null;\n  children?: React.ReactNode;\n}\n\nexport function ContextMenu({ open, position, children, onClose }: ContextMenuProps) {\n  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n\n  if (!open || position == null) {\n    return null;\n  }\n\n  return (\n    <>\n      <Portal>\n        <div style={{ position: 'fixed', inset: 0 }}>\n          <div\n            ref={element => {\n              setAnchorElement(element);\n            }}\n            style={{\n              position: 'absolute',\n              top: position.y,\n              left: position.x,\n              width: '1px',\n              height: '1px',\n              opacity: 0,\n            }}\n          ></div>\n        </div>\n      </Portal>\n      <Menu\n        veil\n        horizontalAnchor=\"start\"\n        verticalAnchor=\"top\"\n        horizontalOrigin=\"start\"\n        verticalOrigin=\"top\"\n        anchorElement={anchorElement}\n        open={open}\n        onClose={onClose}\n        minWidth=\"150px\"\n        className=\"context-menu\"\n      >\n        {children}\n      </Menu>\n    </>\n  );\n}\n"],"names":["ContextMenu","open","position","children","onClose","anchorElement","setAnchorElement","useState","jsxs","Fragment","jsx","Portal","element","Menu"],"mappings":";;;;AAYO,SAASA,EAAY,EAAE,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,SAAAC,KAA6B;AACnF,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA6B,IAAI;AAE3E,SAAI,CAACN,KAAQC,KAAY,OAChB,OAIP,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,4BAAC,OAAA,EAAI,OAAO,EAAE,UAAU,SAAS,OAAO,EAAA,GACtC,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,CAAAE,MAAW;AACd,UAAAN,EAAiBM,CAAO;AAAA,QAC1B;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAKV,EAAS;AAAA,UACd,MAAMA,EAAS;AAAA,UACf,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACA,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,eAAAR;AAAA,QACA,MAAAJ;AAAA,QACA,SAAAG;AAAA,QACA,UAAS;AAAA,QACT,WAAU;AAAA,QAET,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"context_menu.js","sources":["../../../src/overlay/context_menu/context_menu.tsx"],"sourcesContent":["import { Position } from '../../utils/index.js';\nimport { Portal } from '../portal/portal.js';\nimport React, { useState } from 'react';\nimport { Menu } from '../menu/menu.js';\n\nexport interface ContextMenuProps {\n  open: boolean;\n  onClose: () => void;\n  position?: Position | null;\n  children?: React.ReactNode;\n}\n\nexport function ContextMenu({ open, position, children, onClose }: ContextMenuProps) {\n  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n\n  if (!open || position == null) {\n    return null;\n  }\n\n  return (\n    <>\n      <Portal>\n        <div style={{ position: 'fixed', inset: 0 }}>\n          <div\n            ref={element => {\n              setAnchorElement(element);\n            }}\n            style={{\n              position: 'absolute',\n              top: position.y,\n              left: position.x,\n              width: '1px',\n              height: '1px',\n              opacity: 0,\n            }}\n          ></div>\n        </div>\n      </Portal>\n      <Menu\n        veil\n        horizontalAnchor=\"start\"\n        verticalAnchor=\"top\"\n        horizontalOrigin=\"start\"\n        verticalOrigin=\"top\"\n        anchorElement={anchorElement}\n        open={open}\n        onClose={onClose}\n        minWidth=\"150px\"\n        className=\"tcn-context-menu\"\n      >\n        {children}\n      </Menu>\n    </>\n  );\n}\n"],"names":["ContextMenu","open","position","children","onClose","anchorElement","setAnchorElement","useState","jsxs","Fragment","jsx","Portal","element","Menu"],"mappings":";;;;AAYO,SAASA,EAAY,EAAE,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,SAAAC,KAA6B;AACnF,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAA6B,IAAI;AAE3E,SAAI,CAACN,KAAQC,KAAY,OAChB,OAIP,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,4BAAC,OAAA,EAAI,OAAO,EAAE,UAAU,SAAS,OAAO,EAAA,GACtC,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,CAAAE,MAAW;AACd,UAAAN,EAAiBM,CAAO;AAAA,QAC1B;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAKV,EAAS;AAAA,UACd,MAAMA,EAAS;AAAA,UACf,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACA,gBAAAQ;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,eAAAR;AAAA,QACA,MAAAJ;AAAA,QACA,SAAAG;AAAA,QACA,UAAS;AAAA,QACT,WAAU;AAAA,QAET,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/overlay/menu/menu.js

@@ -73,7 +73,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
       onClose: x,
       restoreFocus: Y,
       veil: s,
-      children: /* @__PURE__ */ g(J, { ref: I, className: L(j.menu, E, "menu"), ...b, children: m })
+      children: /* @__PURE__ */ g(J, { ref: I, className: L(j.menu, E, "tcn-menu"), ...b, children: m })
     }
   );
 }), D = f.forwardRef(function({
@@ -129,7 +129,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
         ref: t,
         "data-is-selected": !!R,
         "data-has-children": !!a,
-        className: L(S, j["menu-item"], "menu-item"),
+        className: L(S, j["menu-item"], "tcn-menu-item"),
         "data-is-open": s,
         ...c,
         children: typeof d == "string" ? /* @__PURE__ */ g(O, { color: "inherit", children: d }) : d

package/dist/overlay/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/overlay/menu/menu.tsx"],"sourcesContent":["import { BodyText } from '../../typography/body_text/body_text.js';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { HStackProps } from '../../stacks/h_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { Popper, type PopperProps } from '../popper/legacy/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport { clsx } from 'clsx';\n\nexport type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {\n  children?: React.ReactNode;\n  onActivatedMenu?: (hasActiveMenu: boolean) => void;\n  direction?: 'up' | 'down';\n};\n\nexport const Menu = React.forwardRef(function Menu(\n  {\n    anchorElement,\n    verticalAnchor,\n    verticalOrigin,\n    verticalOffset,\n    horizontalAnchor,\n    horizontalOrigin,\n    horizontalOffset,\n    direction,\n    open,\n    onClose,\n    restoreFocus,\n    veil,\n    onActivatedMenu,\n    children = [],\n    className,\n    ...props\n  }: MenuProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const clonedChildren = React.Children.toArray(children).map((child, index) => {\n    if (!React.isValidElement(child)) {\n      return child;\n    }\n\n    if (child.type !== MenuItem) {\n      return React.cloneElement(child, {\n        ...child.props,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          e.stopPropagation();\n          child.props.onClick && child.props.onClick(e);\n        },\n      });\n    }\n\n    const props = {\n      ...child.props,\n      key: index,\n      verticalAnchor: direction === 'up' ? 'bottom' : 'top',\n      verticalOrigin: direction === 'up' ? 'bottom' : 'top',\n      verticalOffset,\n      horizontalAnchor: 'end',\n      horizontalOrigin: 'start',\n      horizontalOffset,\n      direction,\n      onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n        if (child.props.children == null) {\n          onClose && onClose();\n        }\n        child.props.onClick && child.props.onClick(e);\n      },\n      onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n        setFocusedIndex(index);\n        onActivatedMenu && onActivatedMenu(true);\n        child.props.onMouseEnter && child.props.onMouseEnter(e);\n      },\n    };\n\n    if (child.type === MenuItem) {\n      props.open = focusedIndex === index;\n    }\n\n    return React.cloneElement(child, props);\n  });\n\n  direction === 'up' && clonedChildren.reverse();\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setFocusedIndex(-1);\n      onActivatedMenu && onActivatedMenu(false);\n    }\n  }, [open, onActivatedMenu]);\n\n  return (\n    <Popper\n      anchorElement={anchorElement}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor || 'end'}\n      horizontalOrigin={horizontalOrigin || 'end'}\n      horizontalOffset={horizontalOffset}\n      open={open}\n      onClose={onClose}\n      restoreFocus={restoreFocus}\n      veil={veil}\n    >\n      <VStack ref={ref} className={clsx(styles.menu, className, 'menu')} {...props}>\n        {clonedChildren}\n      </VStack>\n    </Popper>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HStackProps, 'children'> {\n  open?: boolean;\n  children?: React.ReactElement<MenuItemProps>[];\n  selected?: boolean;\n  label?: React.ReactNode;\n  direction?: 'up' | 'down';\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'center' | 'start' | 'end';\n  horizontalOrigin?: 'center' | 'start' | 'end';\n  horizontalOffset?: number;\n}\n\nexport const MenuItem = React.forwardRef(function MenuItem(\n  {\n    selected,\n    label,\n    className,\n    children,\n    direction = 'down',\n    verticalAnchor = 'top',\n    verticalOrigin = 'top',\n    verticalOffset,\n    horizontalAnchor = 'end',\n    horizontalOrigin = 'start',\n    horizontalOffset,\n    open = false,\n    ...props\n  }: MenuItemProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasEnteredMenuRef = useRef(false);\n  const cursorPositionRef = useRef({ x: -1, y: -1 });\n  const cursorDeltaRef = useRef({ x: -1, y: -1 });\n  const [showVeil, setShowVeil] = useState(false);\n  const itemRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, itemRef);\n  const hasSubmenu = children != null && children.length > 0;\n\n  function close() {\n    setShowVeil(false);\n  }\n\n  useLayoutEffect(() => {\n    const itemElement = itemRef.current;\n\n    if (itemElement && hasSubmenu && open) {\n      const direction = window.getComputedStyle(itemElement).direction;\n\n      const startPosition = cursorPositionRef.current;\n      const delta = cursorDeltaRef.current;\n\n      const calculateSlope = (event: MouseEvent) => {\n        if (startPosition.x === -1) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n\n        const deltaX = event.clientX - startPosition.x;\n        const deltaY = event.clientY - startPosition.y;\n        delta.x = Math.max(Math.abs(deltaX), 0.001);\n        delta.y = Math.max(Math.abs(deltaY), 0.001);\n\n        const isSlopeWrongDirection =\n          ((deltaX < 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'ltr') ||\n          ((deltaX > 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'rtl');\n\n        if (isSlopeWrongDirection) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        const distance = Math.sqrt(delta.x ** 2 + delta.y ** 2);\n\n        if (hasEnteredMenuRef.current) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        if (distance > 5) {\n          const movingHorizontal = delta.x / delta.y > 0.2;\n\n          if (movingHorizontal) {\n            setShowVeil(true);\n          } else {\n            setShowVeil(false);\n          }\n\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n      };\n\n      window.addEventListener('mousemove', calculateSlope);\n\n      return () => {\n        window.removeEventListener('mousemove', calculateSlope);\n      };\n    }\n  }, [hasSubmenu, open]);\n\n  useLayoutEffect(() => {\n    setShowVeil(open);\n  }, [open]);\n\n  return (\n    <>\n      <HStack\n        as=\"button\"\n        ref={forkedRef}\n        data-is-selected={Boolean(selected)}\n        data-has-children={Boolean(hasSubmenu)}\n        className={clsx(className, styles['menu-item'], 'menu-item')}\n        data-is-open={open}\n        {...props}\n      >\n        {typeof label === 'string' ? <BodyText color=\"inherit\">{label}</BodyText> : label}\n      </HStack>\n      {children && (\n        <Menu\n          anchorElement={itemRef.current}\n          veil={showVeil}\n          onClose={close}\n          open={open}\n          direction={direction}\n          verticalAnchor={verticalAnchor}\n          verticalOrigin={verticalOrigin}\n          verticalOffset={verticalOffset}\n          horizontalAnchor={horizontalAnchor}\n          horizontalOrigin={horizontalOrigin}\n          horizontalOffset={horizontalOffset}\n          hAlign=\"start\"\n          onActivatedMenu={hasActiveMenu => {\n            hasEnteredMenuRef.current = hasActiveMenu;\n          }}\n        >\n          {children}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["Menu","React","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","direction","open","onClose","restoreFocus","veil","onActivatedMenu","children","className","props","ref","focusedIndex","setFocusedIndex","useState","clonedChildren","child","index","MenuItem","useLayoutEffect","jsx","Popper","VStack","clsx","styles","selected","label","hasEnteredMenuRef","useRef","cursorPositionRef","cursorDeltaRef","showVeil","setShowVeil","itemRef","forkedRef","useForkRef","hasSubmenu","close","itemElement","startPosition","delta","calculateSlope","event","deltaX","deltaY","distance","movingHorizontal","jsxs","Fragment","HStack","BodyText","hasActiveMenu"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../../src/overlay/menu/menu.tsx"],"sourcesContent":["import { BodyText } from '../../typography/body_text/body_text.js';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { HStackProps } from '../../stacks/h_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { Popper, type PopperProps } from '../popper/legacy/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport { clsx } from 'clsx';\n\nexport type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {\n  children?: React.ReactNode;\n  onActivatedMenu?: (hasActiveMenu: boolean) => void;\n  direction?: 'up' | 'down';\n};\n\nexport const Menu = React.forwardRef(function Menu(\n  {\n    anchorElement,\n    verticalAnchor,\n    verticalOrigin,\n    verticalOffset,\n    horizontalAnchor,\n    horizontalOrigin,\n    horizontalOffset,\n    direction,\n    open,\n    onClose,\n    restoreFocus,\n    veil,\n    onActivatedMenu,\n    children = [],\n    className,\n    ...props\n  }: MenuProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const clonedChildren = React.Children.toArray(children).map((child, index) => {\n    if (!React.isValidElement(child)) {\n      return child;\n    }\n\n    if (child.type !== MenuItem) {\n      return React.cloneElement(child, {\n        ...child.props,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          e.stopPropagation();\n          child.props.onClick && child.props.onClick(e);\n        },\n      });\n    }\n\n    const props = {\n      ...child.props,\n      key: index,\n      verticalAnchor: direction === 'up' ? 'bottom' : 'top',\n      verticalOrigin: direction === 'up' ? 'bottom' : 'top',\n      verticalOffset,\n      horizontalAnchor: 'end',\n      horizontalOrigin: 'start',\n      horizontalOffset,\n      direction,\n      onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n        if (child.props.children == null) {\n          onClose && onClose();\n        }\n        child.props.onClick && child.props.onClick(e);\n      },\n      onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n        setFocusedIndex(index);\n        onActivatedMenu && onActivatedMenu(true);\n        child.props.onMouseEnter && child.props.onMouseEnter(e);\n      },\n    };\n\n    if (child.type === MenuItem) {\n      props.open = focusedIndex === index;\n    }\n\n    return React.cloneElement(child, props);\n  });\n\n  direction === 'up' && clonedChildren.reverse();\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setFocusedIndex(-1);\n      onActivatedMenu && onActivatedMenu(false);\n    }\n  }, [open, onActivatedMenu]);\n\n  return (\n    <Popper\n      anchorElement={anchorElement}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor || 'end'}\n      horizontalOrigin={horizontalOrigin || 'end'}\n      horizontalOffset={horizontalOffset}\n      open={open}\n      onClose={onClose}\n      restoreFocus={restoreFocus}\n      veil={veil}\n    >\n      <VStack ref={ref} className={clsx(styles.menu, className, 'tcn-menu')} {...props}>\n        {clonedChildren}\n      </VStack>\n    </Popper>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HStackProps, 'children'> {\n  open?: boolean;\n  children?: React.ReactElement<MenuItemProps>[];\n  selected?: boolean;\n  label?: React.ReactNode;\n  direction?: 'up' | 'down';\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'center' | 'start' | 'end';\n  horizontalOrigin?: 'center' | 'start' | 'end';\n  horizontalOffset?: number;\n}\n\nexport const MenuItem = React.forwardRef(function MenuItem(\n  {\n    selected,\n    label,\n    className,\n    children,\n    direction = 'down',\n    verticalAnchor = 'top',\n    verticalOrigin = 'top',\n    verticalOffset,\n    horizontalAnchor = 'end',\n    horizontalOrigin = 'start',\n    horizontalOffset,\n    open = false,\n    ...props\n  }: MenuItemProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasEnteredMenuRef = useRef(false);\n  const cursorPositionRef = useRef({ x: -1, y: -1 });\n  const cursorDeltaRef = useRef({ x: -1, y: -1 });\n  const [showVeil, setShowVeil] = useState(false);\n  const itemRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, itemRef);\n  const hasSubmenu = children != null && children.length > 0;\n\n  function close() {\n    setShowVeil(false);\n  }\n\n  useLayoutEffect(() => {\n    const itemElement = itemRef.current;\n\n    if (itemElement && hasSubmenu && open) {\n      const direction = window.getComputedStyle(itemElement).direction;\n\n      const startPosition = cursorPositionRef.current;\n      const delta = cursorDeltaRef.current;\n\n      const calculateSlope = (event: MouseEvent) => {\n        if (startPosition.x === -1) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n\n        const deltaX = event.clientX - startPosition.x;\n        const deltaY = event.clientY - startPosition.y;\n        delta.x = Math.max(Math.abs(deltaX), 0.001);\n        delta.y = Math.max(Math.abs(deltaY), 0.001);\n\n        const isSlopeWrongDirection =\n          ((deltaX < 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'ltr') ||\n          ((deltaX > 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'rtl');\n\n        if (isSlopeWrongDirection) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        const distance = Math.sqrt(delta.x ** 2 + delta.y ** 2);\n\n        if (hasEnteredMenuRef.current) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        if (distance > 5) {\n          const movingHorizontal = delta.x / delta.y > 0.2;\n\n          if (movingHorizontal) {\n            setShowVeil(true);\n          } else {\n            setShowVeil(false);\n          }\n\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n      };\n\n      window.addEventListener('mousemove', calculateSlope);\n\n      return () => {\n        window.removeEventListener('mousemove', calculateSlope);\n      };\n    }\n  }, [hasSubmenu, open]);\n\n  useLayoutEffect(() => {\n    setShowVeil(open);\n  }, [open]);\n\n  return (\n    <>\n      <HStack\n        as=\"button\"\n        ref={forkedRef}\n        data-is-selected={Boolean(selected)}\n        data-has-children={Boolean(hasSubmenu)}\n        className={clsx(className, styles['menu-item'], 'tcn-menu-item')}\n        data-is-open={open}\n        {...props}\n      >\n        {typeof label === 'string' ? <BodyText color=\"inherit\">{label}</BodyText> : label}\n      </HStack>\n      {children && (\n        <Menu\n          anchorElement={itemRef.current}\n          veil={showVeil}\n          onClose={close}\n          open={open}\n          direction={direction}\n          verticalAnchor={verticalAnchor}\n          verticalOrigin={verticalOrigin}\n          verticalOffset={verticalOffset}\n          horizontalAnchor={horizontalAnchor}\n          horizontalOrigin={horizontalOrigin}\n          horizontalOffset={horizontalOffset}\n          hAlign=\"start\"\n          onActivatedMenu={hasActiveMenu => {\n            hasEnteredMenuRef.current = hasActiveMenu;\n          }}\n        >\n          {children}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["Menu","React","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","direction","open","onClose","restoreFocus","veil","onActivatedMenu","children","className","props","ref","focusedIndex","setFocusedIndex","useState","clonedChildren","child","index","MenuItem","useLayoutEffect","jsx","Popper","VStack","clsx","styles","selected","label","hasEnteredMenuRef","useRef","cursorPositionRef","cursorDeltaRef","showVeil","setShowVeil","itemRef","forkedRef","useForkRef","hasSubmenu","close","itemElement","startPosition","delta","calculateSlope","event","deltaX","deltaY","distance","movingHorizontal","jsxs","Fragment","HStack","BodyText","hasActiveMenu"],"mappings":"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"}

package/dist/overlay/popper/legacy/popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popper.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/C,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAGD,wBAAgB,MAAM,CAAC,EACrB,aAAa,EACb,cAAyB,EACzB,cAAsB,EACtB,cAAkB,EAClB,gBAA0B,EAC1B,gBAA0B,EAC1B,gBAAoB,EACpB,YAAoB,EACpB,IAAY,EACZ,WAAW,EACX,aAAkB,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,gBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,GACtB,EAAE,WAAW,kDA8Kb"}
+{"version":3,"file":"popper.d.ts","sourceRoot":"","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAKjE,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/C,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAGD,wBAAgB,MAAM,CAAC,EACrB,aAAa,EACb,cAAyB,EACzB,cAAsB,EACtB,cAAkB,EAClB,gBAA0B,EAC1B,gBAA0B,EAC1B,gBAAoB,EACpB,YAAoB,EACpB,IAAY,EACZ,WAAW,EACX,aAAkB,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,gBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,GACtB,EAAE,WAAW,kDA8Kb"}

package/dist/overlay/popper/legacy/popper.js

@@ -5,9 +5,10 @@ import { ScrollAwayListener as J } from "../../../utils/scroll_away_listener.js"
 import { useRef as f, useState as K, useLayoutEffect as E } from "react";
 import "../../../utils/hooks/use_resize_observer.js";
 import { Portal as M } from "../../portal/portal.js";
-import '../../../popper.css';const Q = "_popover_fcfb66a", U = "_popover-veil_c56df66", P = { popover: Q, "popover-veil": U };
-function ie({
-  anchorElement: n,
+import Q from "clsx";
+import '../../../popper.css';const U = "_popover_fcfb66a", V = "_popover-veil_c56df66", P = { popover: U, "popover-veil": V };
+function re({
+  anchorElement: r,
   verticalAnchor: _ = "bottom",
   verticalOrigin: j = "top",
   verticalOffset: h = 0,
@@ -25,13 +26,13 @@ function ie({
   isClickAwayException: W,
   isScrollAwayException: $
 }) {
-  const k = f(n), [c, q] = K({ top: 0, left: 0 }), x = f(null), w = f(null), T = u && n != null, D = H ?? [], F = !N, C = f(null);
+  const k = f(r), [c, q] = K({ top: 0, left: 0 }), x = f(null), w = f(null), T = u && r != null, D = H ?? [], F = !N, C = f(null);
   function S() {
     R && R();
   }
   const m = () => {
-    if (!n || !w.current) return;
-    const e = n.getBoundingClientRect(), o = w.current.getBoundingClientRect(), A = window.innerWidth, L = window.innerHeight, v = getComputedStyle(n).direction === "rtl";
+    if (!r || !w.current) return;
+    const e = r.getBoundingClientRect(), o = w.current.getBoundingClientRect(), A = window.innerWidth, L = window.innerHeight, v = getComputedStyle(r).direction === "rtl";
     let t = e.top, i = e.left;
     switch (_) {
       case "top":
@@ -55,8 +56,8 @@ function ie({
         break;
     }
     d === "start" ? i += v ? e.width + s : s : d === "center" ? i += e.width / 2 : d === "end" && (i += v ? -s : e.width + s);
-    let r = a;
-    v && (a === "start" ? r = "end" : a === "end" && (r = "start")), r === "start" || (r === "center" ? i -= o.width / 2 : r === "end" && (i -= o.width)), i + o.width > A && (i = A - o.width), i < 0 && (i = 0), t + o.height > L && (t = L - o.height), t < 0 && (t = 0), (t !== c.top || i !== c.left) && q({ top: t, left: i });
+    let n = a;
+    v && (a === "start" ? n = "end" : a === "end" && (n = "start")), n === "start" || (n === "center" ? i -= o.width / 2 : n === "end" && (i -= o.width)), i + o.width > A && (i = A - o.width), i < 0 && (i = 0), t + o.height > L && (t = L - o.height), t < 0 && (t = 0), (t !== c.top || i !== c.left) && q({ top: t, left: i });
   };
   if (E(() => (m(), window.addEventListener("resize", m), () => {
     window.removeEventListener("resize", m);
@@ -71,12 +72,12 @@ function ie({
     }
   }, [u, g]), !T)
     return null;
-  k.current = n;
+  k.current = r;
   let l = /* @__PURE__ */ p(J, { onScrollAway: S, isException: $, children: /* @__PURE__ */ p(
     "div",
     {
       ref: w,
-      className: P.popover,
+      className: Q(P.popover, "tcn-popper"),
       style: {
         top: `${c.top}px`,
         left: `${c.left}px`
@@ -106,6 +107,6 @@ function ie({
   ] });
 }
 export {
-  ie as Popper
+  re as Popper
 };
 //# sourceMappingURL=popper.js.map