@accelint/design-system 0.1.0 → 0.1.1

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

@@ -0,0 +1,49 @@
+import type { TabsClassNames } from './types';
+export declare const tabsContainers: {
+    list: string;
+    tab: string;
+    panels: string;
+    panel: string;
+};
+export declare const tabColorVars: {
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const tabSpaceVars: {
+    list: {
+        gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    tab: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+export declare const tabListStateVars: {
+    align: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    anchor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    count: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    orientation: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    variant: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const tabStateVars: {
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const tabPanelsStateVars: {
+    shouldForceMount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const tabPanelStateVars: {
+    shouldForceMount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const tabsClassNames: TabsClassNames;

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,68 @@
+import { type ContextValue, type SlotProps } from 'react-aria-components';
+import type { RequiredDeep } from 'type-fest';
+import type { TabsClassNames, TabListProps, TabPanelProps, TabPanelsProps, TabsProps } from './types';
+export declare const TEST_IDS: RequiredDeep<TabsClassNames>;
+export declare const TabsContext: import("react").Context<ContextValue<TabsProps, HTMLDivElement>>;
+/**
+ * A required wrapper for other Tabs components, which manages
+ * and provides the state context. Other Tabs components will
+ * throw an error if not wrapped with this component
+ *
+ * NOTE: TabList & TabPanels do not have to be direct children
+ * of this component. Additional layout can be introduced around
+ * this components children
+ */
+export declare const Tabs: (props: Omit<import("react-aria-components").TabsProps, "children" | "className" | "style"> & {
+    classNames?: TabsClassNames;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const TabListContext: import("react").Context<ContextValue<TabListProps<unknown>, HTMLDivElement>>;
+/**
+ * Parent of Tab
+ */
+export declare const TabList: <T extends object>(props: Omit<import("react-aria-components").TabListProps<T>, "className" | "style"> & {
+    align?: import("./types").TabListAlignment;
+    anchor?: import("./types").TabListAnchor;
+    orientation?: import("react-aria").Orientation;
+    size?: import("./types").TabListSizes;
+    variant?: import("./types").TabListVariants;
+} & {
+    classNames?: TabsClassNames;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const TabContext: import("react").Context<ContextValue<Omit<Omit<import("react-aria-components").TabProps, "className" | "style"> & {
+    id: string;
+} & import("react-aria").PressEvents & {
+    classNames?: TabsClassNames;
+} & SlotProps, "id">, HTMLDivElement>>;
+/**
+ * Must be a direct child of TabList
+ */
+export declare const Tab: (props: Omit<import("react-aria-components").TabProps, "className" | "style"> & {
+    id: string;
+} & import("react-aria").PressEvents & {
+    classNames?: TabsClassNames;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const TabPanelsContext: import("react").Context<ContextValue<TabPanelsProps, HTMLDivElement>>;
+/**
+ * Parent of TabPanel, but only required if using shouldForceMount=true
+ */
+export declare const TabPanels: (props: {
+    shouldForceMount?: boolean;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    classNames?: TabsClassNames;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const TabPanelContext: import("react").Context<ContextValue<Omit<TabPanelProps, "id">, HTMLDivElement>>;
+/**
+ * Must be direct child of TabPanels if TabPanel implements shouldForceMount=true
+ *
+ * Othewise can be used anywhere inside of Tabs. TabPanels may be desirable to use
+ * if theme implements any styles that adjust layout
+ */
+export declare const TabPanel: (props: Omit<import("react-aria-components").TabPanelProps, "className" | "style"> & {
+    id: string;
+} & {
+    classNames?: TabsClassNames;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,108 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, useMemo, Children, useCallback } from 'react';
+import { useContextProps, Provider, Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } from 'react-aria-components';
+import { inlineVars } from '../../utils/css.js';
+import { mergeClassNames, callRenderProps } from '../../utils/props.js';
+import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
+import { usePropagatingPress } from '../../hooks/use-propagating-press/use-propagating-press.js';
+import { useTheme } from '../../hooks/use-theme/use-theme.js';
+import { tabsClassNames, tabListStateVars, tabPanelStateVars, tabStateVars, tabPanelsStateVars } from './tabs.vanilla.js';
+
+const TEST_IDS = {
+  tabs: "tabs",
+  list: {
+    container: "tabs.list.container",
+    list: "tabs.list"
+  },
+  tab: {
+    container: "tabs.tab.container",
+    tab: "tabs.tab"
+  },
+  panels: {
+    container: "tabs.panels.container",
+    panels: "tabs.panels"
+  },
+  panel: {
+    container: "tabs.panel.container",
+    panel: "tabs.panel"
+  }
+};
+const TabsContext = createContext(null);
+const Tabs = forwardRef(function Tabs2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabsContext);
+  props = useDefaultProps(props, "Tabs");
+  const { classNames: classNamesProp, ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(() => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp), [theme.Tabs, classNamesProp]);
+  const values = useMemo(() => [
+    [TabListContext, { classNames }],
+    [TabPanelsContext, { classNames }]
+  ], [classNames]);
+  return jsx(Provider, { values, children: jsx(Tabs$1, { ...rest, ref, className: classNames?.tabs, "data-testid": TEST_IDS.tabs }) });
+});
+const TabListContext = createContext(null);
+const TabList = forwardRef(function TabList2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabListContext);
+  props = useDefaultProps(props, "TabList");
+  const { children, classNames: classNamesProp, anchor = "end", items, orientation = "horizontal", size = "lg", variant = "border", align = orientation === "horizontal" ? "center" : "start", ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(() => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp), [theme.Tabs, classNamesProp]);
+  const values = useMemo(() => [[TabContext, { classNames }]], [classNames]);
+  const style = useMemo(() => inlineVars(tabListStateVars, {
+    align,
+    anchor,
+    count: items ? Array.from(items).length : Children.count(children),
+    orientation,
+    size,
+    variant
+  }), [align, anchor, items, children, orientation, size, variant]);
+  return jsx(Provider, { values, children: jsx("div", { className: classNames?.list?.container, style, "data-testid": TEST_IDS.list.container, children: jsx(TabList$1, { ...rest, ref, className: classNames?.list?.list, items, "data-testid": TEST_IDS.list.list, children }) }) });
+});
+const TabContext = createContext(null);
+const Tab = forwardRef(function Tab2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabContext);
+  props = useDefaultProps(props, "Tab");
+  const { children: childrenProp, classNames: classNamesProp, onPress, onPressChange, onPressEnd, onPressStart, onPressUp, ...rest } = props;
+  const { pressProps } = usePropagatingPress({
+    onPress,
+    onPressChange,
+    onPressEnd,
+    onPressStart,
+    onPressUp
+  });
+  const theme = useTheme();
+  const classNames = useMemo(() => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp), [theme.Tabs, classNamesProp]);
+  const style = useCallback((renderProps) => inlineVars(tabStateVars, renderProps), []);
+  const children = useCallback((renderProps) => jsx("div", { ...pressProps, className: classNames?.tab?.tab, "data-testid": TEST_IDS.tab.tab, children: callRenderProps(childrenProp, {
+    ...renderProps,
+    defaultChildren: null
+  }) }), [pressProps, classNames?.tab?.tab, childrenProp]);
+  return jsx(Tab$1, { ...rest, ref, className: classNames?.tab?.container, style, "data-testid": TEST_IDS.tab.container, children });
+});
+const TabPanelsContext = createContext(null);
+const TabPanels = forwardRef(function TabPanels2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabPanelsContext);
+  props = useDefaultProps(props, "TabPanels");
+  const { children, classNames: classNamesProp, shouldForceMount = false } = props;
+  const theme = useTheme();
+  const classNames = useMemo(() => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp), [theme.Tabs, classNamesProp]);
+  const style = useMemo(() => inlineVars(tabPanelsStateVars, { shouldForceMount }), [shouldForceMount]);
+  const values = useMemo(() => [[TabPanelContext, { classNames, shouldForceMount }]], [classNames, shouldForceMount]);
+  return jsx(Provider, { values, children: jsx("div", { ref, className: classNames?.panels?.container, style, "data-testid": TEST_IDS.panels.container, children: jsx("div", { className: classNames?.panels?.panels, "data-testid": TEST_IDS.panels.panels, children }) }) });
+});
+const TabPanelContext = createContext(null);
+const TabPanel = forwardRef(function TabPanel2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TabPanelContext);
+  props = useDefaultProps(props, "TabPanel");
+  const { children: childrenProp, classNames: classNamesProp, shouldForceMount = false, ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(() => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp), [theme.Tabs, classNamesProp]);
+  const style = useCallback((renderProps) => inlineVars(tabPanelStateVars, { ...renderProps, shouldForceMount }), [shouldForceMount]);
+  const children = useCallback((renderProps) => jsx("div", { className: classNames?.panel?.panel, "data-testid": TEST_IDS.panel.panel, children: callRenderProps(childrenProp, {
+    ...renderProps,
+    defaultChildren: null
+  }) }), [childrenProp, classNames?.panel?.panel]);
+  return jsx(TabPanel$1, { ...rest, ref, className: classNames?.panel?.container, shouldForceMount, style, "data-testid": TEST_IDS.panel.container, children });
+});
+
+export { TEST_IDS, Tab, TabContext, TabList, TabListContext, TabPanel, TabPanelContext, TabPanels, TabPanelsContext, Tabs, TabsContext };

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  Provider,\n  Tab as RACTab,\n  TabList as RACTabList,\n  TabPanel as RACTabPanel,\n  Tabs as RACTabs,\n  type SlotProps,\n  useContextProps,\n} from 'react-aria-components';\nimport type { RequiredDeep } from 'type-fest';\nimport { useDefaultProps, usePropagatingPress, useTheme } from '../../hooks';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  tabListStateVars,\n  tabPanelsStateVars,\n  tabPanelStateVars,\n  tabsClassNames,\n  tabStateVars,\n} from './tabs.css';\nimport type {\n  TabsClassNames,\n  TabListProps,\n  TabPanelProps,\n  TabPanelRenderProps,\n  TabPanelsProps,\n  TabProps,\n  TabRenderProps,\n  TabsProps,\n} from './types';\n\nexport const TEST_IDS: RequiredDeep<TabsClassNames> = {\n  tabs: 'tabs',\n  list: {\n    container: 'tabs.list.container',\n    list: 'tabs.list',\n  },\n  tab: {\n    container: 'tabs.tab.container',\n    tab: 'tabs.tab',\n  },\n  panels: {\n    container: 'tabs.panels.container',\n    panels: 'tabs.panels',\n  },\n  panel: {\n    container: 'tabs.panel.container',\n    panel: 'tabs.panel',\n  },\n};\n\nexport const TabsContext =\n  createContext<ContextValue<TabsProps, HTMLDivElement>>(null);\n\n/**\n * A required wrapper for other Tabs components, which manages\n * and provides the state context. Other Tabs components will\n * throw an error if not wrapped with this component\n *\n * NOTE: TabList & TabPanels do not have to be direct children\n * of this component. Additional layout can be introduced around\n * this components children\n */\nexport const Tabs = forwardRef(function Tabs(\n  props: TabsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabsContext);\n  props = useDefaultProps(props, 'Tabs');\n\n  const { classNames: classNamesProp, ...rest } = props;\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof TabListContext,\n        ContextValue<TabListProps<unknown>, HTMLDivElement>,\n      ],\n      [typeof TabPanelsContext, ContextValue<TabPanelsProps, HTMLDivElement>],\n    ]\n  >(\n    () => [\n      [TabListContext, { classNames }],\n      [TabPanelsContext, { classNames }],\n    ],\n    [classNames],\n  );\n\n  return (\n    <Provider values={values}>\n      <RACTabs\n        {...rest}\n        ref={ref}\n        className={classNames?.tabs}\n        data-testid={TEST_IDS.tabs}\n      />\n    </Provider>\n  );\n});\n\nexport const TabListContext =\n  createContext<ContextValue<TabListProps<unknown>, HTMLDivElement>>(null);\n\n/**\n * Parent of Tab\n */\nexport const TabList = forwardRef(function TabList<T extends object>(\n  props: TabListProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabListContext);\n  props = useDefaultProps(props, 'TabList');\n\n  const {\n    children,\n    classNames: classNamesProp,\n    anchor = 'end',\n    items,\n    orientation = 'horizontal',\n    size = 'lg',\n    variant = 'border',\n    align = orientation === 'horizontal' ? 'center' : 'start',\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const values = useMemo<[[typeof TabContext, Omit<TabProps, 'id'>]]>(\n    () => [[TabContext, { classNames }]],\n    [classNames],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(tabListStateVars, {\n        align,\n        anchor,\n        count: items ? Array.from(items).length : Children.count(children),\n        orientation,\n        size,\n        variant,\n      }),\n    [align, anchor, items, children, orientation, size, variant],\n  );\n\n  return (\n    <Provider values={values}>\n      <div\n        className={classNames?.list?.container}\n        style={style}\n        data-testid={TEST_IDS.list.container}\n      >\n        <RACTabList<T>\n          {...rest}\n          ref={ref}\n          className={classNames?.list?.list}\n          items={items}\n          data-testid={TEST_IDS.list.list}\n        >\n          {children}\n        </RACTabList>\n      </div>\n    </Provider>\n  );\n});\n\nexport const TabContext =\n  createContext<ContextValue<Omit<TabProps & SlotProps, 'id'>, HTMLDivElement>>(\n    null,\n  );\n\n/**\n * Must be a direct child of TabList\n */\nexport const Tab = forwardRef(function Tab(\n  props: TabProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabContext);\n  props = useDefaultProps(props, 'Tab');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    onPress,\n    onPressChange,\n    onPressEnd,\n    onPressStart,\n    onPressUp,\n    ...rest\n  } = props;\n\n  const { pressProps } = usePropagatingPress({\n    onPress,\n    onPressChange,\n    onPressEnd,\n    onPressStart,\n    onPressUp,\n  });\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const style = useCallback(\n    (renderProps: TabRenderProps) => inlineVars(tabStateVars, renderProps),\n    [],\n  );\n\n  const children = useCallback(\n    (renderProps: TabRenderProps) => (\n      <div\n        {...pressProps}\n        className={classNames?.tab?.tab}\n        data-testid={TEST_IDS.tab.tab}\n      >\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          defaultChildren: null,\n        })}\n      </div>\n    ),\n    [pressProps, classNames?.tab?.tab, childrenProp],\n  );\n\n  return (\n    <RACTab\n      {...rest}\n      ref={ref}\n      className={classNames?.tab?.container}\n      style={style}\n      data-testid={TEST_IDS.tab.container}\n    >\n      {children}\n    </RACTab>\n  );\n});\n\nexport const TabPanelsContext =\n  createContext<ContextValue<TabPanelsProps, HTMLDivElement>>(null);\n\n/**\n * Parent of TabPanel, but only required if using shouldForceMount=true\n */\nexport const TabPanels = forwardRef(function TabPanels(\n  props: TabPanelsProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabPanelsContext);\n  props = useDefaultProps(props, 'TabPanels');\n\n  const {\n    children,\n    classNames: classNamesProp,\n    shouldForceMount = false,\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const style = useMemo(\n    () => inlineVars(tabPanelsStateVars, { shouldForceMount }),\n    [shouldForceMount],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof TabPanelContext,\n        ContextValue<Omit<TabPanelProps, 'id'>, HTMLDivElement>,\n      ],\n    ]\n  >(\n    () => [[TabPanelContext, { classNames, shouldForceMount }]],\n    [classNames, shouldForceMount],\n  );\n\n  return (\n    <Provider values={values}>\n      <div\n        ref={ref}\n        className={classNames?.panels?.container}\n        style={style}\n        data-testid={TEST_IDS.panels.container}\n      >\n        <div\n          className={classNames?.panels?.panels}\n          data-testid={TEST_IDS.panels.panels}\n        >\n          {children}\n        </div>\n      </div>\n    </Provider>\n  );\n});\n\nexport const TabPanelContext =\n  createContext<ContextValue<Omit<TabPanelProps, 'id'>, HTMLDivElement>>(null);\n\n/**\n * Must be direct child of TabPanels if TabPanel implements shouldForceMount=true\n *\n * Othewise can be used anywhere inside of Tabs. TabPanels may be desirable to use\n * if theme implements any styles that adjust layout\n */\nexport const TabPanel = forwardRef(function TabPanel(\n  props: TabPanelProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TabPanelContext);\n  props = useDefaultProps(props, 'TabPanel');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    shouldForceMount = false,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tabsClassNames, theme.Tabs, classNamesProp),\n    [theme.Tabs, classNamesProp],\n  );\n\n  const style = useCallback(\n    (renderProps: TabPanelRenderProps) =>\n      inlineVars(tabPanelStateVars, { ...renderProps, shouldForceMount }),\n    [shouldForceMount],\n  );\n\n  const children = useCallback(\n    (renderProps: TabPanelRenderProps) => (\n      <div\n        className={classNames?.panel?.panel}\n        data-testid={TEST_IDS.panel.panel}\n      >\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          defaultChildren: null,\n        })}\n      </div>\n    ),\n    [childrenProp, classNames?.panel?.panel],\n  );\n\n  return (\n    <RACTabPanel\n      {...rest}\n      ref={ref}\n      className={classNames?.panel?.container}\n      shouldForceMount={shouldForceMount}\n      style={style}\n      data-testid={TEST_IDS.panel.container}\n    >\n      {children}\n    </RACTabPanel>\n  );\n});\n"],"names":["Tabs","RACTabs","TabList","RACTabList","Tab","RACTab","TabPanels","TabPanel","RACTabPanel"],"mappings":"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"}

package/dist/components/tabs/tabs.vanilla.js

@@ -0,0 +1,11 @@
+
+var tabColorVars = { background: "var(--background__plnfe24)", border: "var(--border__plnfe25)", color: "var(--color__plnfe26)" };
+var tabListStateVars = { align: "var(--align__plnfe2c)", anchor: "var(--anchor__plnfe2d)", count: "var(--count__plnfe2e)", orientation: "var(--orientation__plnfe2f)", size: "var(--size__plnfe2g)", variant: "var(--variant__plnfe2h)" };
+var tabPanelStateVars = { shouldForceMount: "var(--shouldForceMount__plnfe2p)", isFocused: "var(--isFocused__plnfe2q)", isFocusVisible: "var(--isFocusVisible__plnfe2r)", isInert: "var(--isInert__plnfe2s)" };
+var tabPanelsStateVars = { shouldForceMount: "var(--shouldForceMount__plnfe2o)" };
+var tabSpaceVars = { list: { gap: "var(--list-gap__plnfe27)", x: "var(--list-x__plnfe28)", y: "var(--list-y__plnfe29)" }, tab: { x: "var(--tab-x__plnfe2a)", y: "var(--tab-y__plnfe2b)" } };
+var tabStateVars = { isHovered: "var(--isHovered__plnfe2i)", isPressed: "var(--isPressed__plnfe2j)", isSelected: "var(--isSelected__plnfe2k)", isFocused: "var(--isFocused__plnfe2l)", isFocusVisible: "var(--isFocusVisible__plnfe2m)", isDisabled: "var(--isDisabled__plnfe2n)" };
+var tabsClassNames = { tabs: "tabs_tabsClassNames_tabs__plnfe2t", list: { container: "tabs_tabsClassNames_list_container__plnfe2u", list: "tabs_tabsClassNames_list_list__plnfe2v" }, tab: { container: "tabs_tabsClassNames_tab_container__plnfe2w", tab: "tabs_tabsClassNames_tab_tab__plnfe2x typography_label__j8fgabg" }, panels: { container: "tabs_tabsClassNames_panels_container__plnfe2y", panels: "tabs_tabsClassNames_panels_panels__plnfe2z" }, panel: { container: "tabs_tabsClassNames_panel_container__plnfe210", panel: "tabs_tabsClassNames_panel_panel__plnfe211" } };
+var tabsContainers = { list: "tabs_tabsContainers_list__plnfe20", tab: "tabs_tabsContainers_tab__plnfe21", panels: "tabs_tabsContainers_panels__plnfe22", panel: "tabs_tabsContainers_panel__plnfe23" };
+
+export { tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers };

package/dist/components/tabs/tabs.vanilla.js.map

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

package/dist/components/tabs/types.d.ts

@@ -0,0 +1,82 @@
+import type { AsType } from '../../types';
+import type { PropsWithChildren } from 'react';
+import type { Orientation, PressEvents } from 'react-aria';
+import type { TabListProps as RACTabListProps, TabPanelProps as RACTabPanelProps, TabPanelRenderProps as RACTabPanelRenderProps, TabProps as RACTabProps, TabRenderProps as RACTabRenderProps, TabsProps as RACTabsProps } from 'react-aria-components';
+import type { PartialDeep } from 'type-fest';
+export type TabsClassNames = PartialDeep<{
+    tabs: string;
+    list: {
+        container: string;
+        list: string;
+    };
+    tab: {
+        container: string;
+        tab: string;
+    };
+    panels: {
+        container: string;
+        panels: string;
+    };
+    panel: {
+        container: string;
+        panel: string;
+    };
+}>;
+export type TabListVariants = 'border' | 'fill';
+export type TabListAnchor = 'start' | 'end';
+export type TabListAlignment = 'start' | 'center' | 'end';
+export type TabListSizes = 'sm' | 'lg';
+export type TabRenderProps = AsType<RACTabRenderProps>;
+export type TabPanelRenderProps = AsType<RACTabPanelRenderProps>;
+type BaseProps = {
+    classNames?: TabsClassNames;
+};
+type BaseTabListProps = {
+    align?: TabListAlignment;
+    /**
+     * To be combined with orientation, where:
+     * orientation=horizontal + anchor=end = bottom
+     * orientation=horizontal + anchor=start = top
+     * orientation=vertical + anchor=end = right
+     * orientation=vertical + anchor=start = left
+     */
+    anchor?: TabListAnchor;
+    orientation?: Orientation;
+    size?: TabListSizes;
+    variant?: TabListVariants;
+};
+type BaseTabProps = {
+    /**
+     * Must match cooresponding TabPanel id, should be
+     * unique to all other ids
+     */
+    id: string;
+} & PressEvents;
+type BaseTabPanelsProps = PropsWithChildren<{
+    /**
+     * Setting this to true will apply to all panels and
+     * change the layout to a stacked approach that grows
+     * to the size of the largest panel content, no matter
+     * which panel is active
+     */
+    shouldForceMount?: boolean;
+}>;
+type BaseTabPanelProps = {
+    /**
+     * Must match cooresponding Tab id, should be unique
+     * to all other ids
+     */
+    id: string;
+};
+export type TabListState = Required<BaseTabListProps> & {
+    count: number;
+};
+export type TabState = AsType<RACTabRenderProps>;
+export type TabPanelsState = Required<Pick<BaseTabPanelsProps, 'shouldForceMount'>>;
+export type TabPanelState = Omit<TabPanelRenderProps, 'state'> & Required<Pick<RACTabPanelProps, 'shouldForceMount'>>;
+export type TabsProps = Omit<RACTabsProps, 'children' | 'className' | 'style'> & PropsWithChildren<BaseProps>;
+export type TabListProps<T> = Omit<RACTabListProps<T>, 'className' | 'style'> & BaseTabListProps & BaseProps;
+export type TabProps = Omit<RACTabProps, 'className' | 'style'> & BaseTabProps & BaseProps;
+export type TabPanelsProps = BaseTabPanelsProps & BaseProps;
+export type TabPanelProps = Omit<RACTabPanelProps, 'className' | 'style'> & BaseTabPanelProps & BaseProps;
+export {};

package/dist/components/textarea/index.d.ts

@@ -0,0 +1,3 @@
+export { TextArea, TextAreaContext } from './textarea';
+export { textAreaClassNames, textAreaContainer, textAreaColorVars, textAreaSpaceVars, textAreaStateVars, } from './textarea.css';
+export { type TextAreaClassNames, type TextAreaProps, type TextAreaRenderProps, type TextAreaState, } from './types';

package/dist/components/textarea/textarea.css.d.ts

@@ -0,0 +1,31 @@
+import type { TextAreaClassNames } from './types';
+export declare const textAreaContainer: string;
+export declare const textAreaColorVars: {
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const textAreaSpaceVars: {
+    minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    maxWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    minHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    maxHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const textAreaStateVars: {
+    resize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEmpty: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPlaceholder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const textAreaClassNames: TextAreaClassNames;

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,14 @@
+import { type ContextValue, type TextAreaProps as RACTextAreaProps } from 'react-aria-components';
+import type { TextAreaProps } from './types';
+export declare const TextAreaContext: import("react").Context<ContextValue<TextAreaProps, HTMLTextAreaElement>>;
+/**
+ * We implement a textarea as a content editable span to provide
+ * improved UX, where the input area automatically grows with input
+ * content length. This can be overriden by applying max-height
+ * and overflow CSS, if desired.
+ *
+ * This also has the side effect of changing the target element in
+ * the ref and event handlers. The normal `event.target.value` is not
+ * available, and must be substituted with `event.currentTarget.textContent`
+ */
+export declare const TextArea: (props: Omit<RACTextAreaProps, "children" | "className" | "style" | "onChange" | "cols" | "rows"> & import("./types").BaseTextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>) => import("react").ReactElement | null;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,86 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControlledState } from '@react-stately/utils';
+import { createContext, forwardRef, useMemo, useCallback, useEffect } from 'react';
+import { useFocusRing, useHover } from 'react-aria';
+import { useContextProps, TextAreaContext as TextAreaContext$1 } from 'react-aria-components';
+import { inlineVars } from '../../utils/css.js';
+import { mergeClassNames, mergeProps } from '../../utils/props.js';
+import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
+import { useTheme } from '../../hooks/use-theme/use-theme.js';
+import { inputs } from '../../styles/typography.vanilla.js';
+import { textAreaClassNames, textAreaStateVars } from './textarea.vanilla.js';
+
+const defaultMapping = {
+  font: inputs
+};
+const TextAreaContext = createContext(null);
+const TextArea = forwardRef(function TextArea2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TextAreaContext$1);
+  delete props.className;
+  delete props.style;
+  [props, ref] = useContextProps(props, ref, TextAreaContext);
+  props = useDefaultProps(props, "TextArea");
+  const { classNames: classNamesProp, defaultValue = "", disabled: isDisabled = false, mapping: mappingProp, placeholder, readOnly: isReadOnly = false, required: isRequired = false, resize = "none", size = "lg", value: valueProp, onChange, onHoverStart, onHoverChange, onHoverEnd, "aria-invalid": ariaInvalid, ...rest } = props;
+  const [value, setValue] = useControlledState(valueProp, defaultValue);
+  const isInvalid = !!ariaInvalid && ariaInvalid !== "false";
+  const isPlaceholder = !!placeholder && !value;
+  const isEmpty = !value;
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing({
+    autoFocus: props.autoFocus,
+    isTextInput: true
+  });
+  const { hoverProps, isHovered } = useHover({
+    isDisabled,
+    onHoverStart,
+    onHoverChange,
+    onHoverEnd
+  });
+  const theme = useTheme();
+  const mapping = useMemo(() => ({
+    ...defaultMapping,
+    ...mappingProp
+  }), [mappingProp]);
+  const classNames = useMemo(() => mergeClassNames(textAreaClassNames, theme.TextArea, classNamesProp, {
+    textarea: mapping.font[size]
+  }), [theme.TextArea, classNamesProp, mapping.font, size]);
+  const mergedProps = useMemo(() => mergeProps(rest, focusProps, hoverProps), [focusProps, hoverProps, rest]);
+  const style = useMemo(() => inlineVars(textAreaStateVars, {
+    resize,
+    size,
+    isDisabled,
+    isEmpty,
+    isFocused,
+    isFocusVisible,
+    isHovered,
+    isInvalid,
+    isPlaceholder,
+    isReadOnly,
+    isRequired
+  }), [
+    resize,
+    size,
+    isDisabled,
+    isEmpty,
+    isFocused,
+    isFocusVisible,
+    isHovered,
+    isInvalid,
+    isPlaceholder,
+    isReadOnly,
+    isRequired
+  ]);
+  const handleChange = useCallback((event) => {
+    onChange?.(event);
+    if (!event.defaultPrevented) {
+      setValue(event.currentTarget.textContent ?? "");
+    }
+  }, [onChange, setValue]);
+  useEffect(() => {
+    if (typeof ref !== "function" && ref?.current) {
+      ref.current.textContent = `${value ?? ""}`;
+    }
+  }, [ref, value]);
+  return jsx("div", { className: classNames?.container, style, children: jsx("span", { ...mergedProps, ...hoverProps, ref, className: classNames?.textarea, contentEditable: !isDisabled && !isReadOnly, role: "textbox", suppressContentEditableWarning: true, onInput: handleChange, "aria-invalid": ariaInvalid, "data-placeholder": placeholder }) });
+});
+
+export { TextArea, TextAreaContext };

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport {\n  type FormEvent,\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useMemo,\n  useCallback,\n  useEffect,\n} from 'react';\nimport { useFocusRing, useHover } from 'react-aria';\nimport {\n  type ContextValue,\n  TextAreaContext as RACTextAreaContext,\n  type TextAreaProps as RACTextAreaProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { useDefaultProps, useTheme } from '../../hooks';\nimport { inputs } from '../../styles';\nimport { inlineVars, mergeClassNames, mergeProps } from '../../utils';\nimport { textAreaClassNames, textAreaStateVars } from './textarea.css';\nimport type { TextAreaMapping, TextAreaProps } from './types';\n\nconst defaultMapping: TextAreaMapping = {\n  font: inputs,\n};\n\nexport const TextAreaContext =\n  createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>(null);\n\n/**\n * We implement a textarea as a content editable span to provide\n * improved UX, where the input area automatically grows with input\n * content length. This can be overriden by applying max-height\n * and overflow CSS, if desired.\n *\n * This also has the side effect of changing the target element in\n * the ref and event handlers. The normal `event.target.value` is not\n * available, and must be substituted with `event.currentTarget.textContent`\n */\nexport const TextArea = forwardRef(function TextArea(\n  props: TextAreaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  [props, ref] = useContextProps(props, ref, RACTextAreaContext);\n\n  // Disallow props possibly provided by React Aria context\n  // could be render props functions we don't want to support\n  delete (props as RACTextAreaProps).className;\n  delete (props as RACTextAreaProps).style;\n\n  // Duplicate context prop merging to support React Aria's context\n  // and our own which establishes a superset type for the props\n  [props, ref] = useContextProps(props, ref, TextAreaContext);\n  props = useDefaultProps(props, 'TextArea');\n\n  const {\n    classNames: classNamesProp,\n    defaultValue = '',\n    disabled: isDisabled = false,\n    mapping: mappingProp,\n    placeholder,\n    readOnly: isReadOnly = false,\n    required: isRequired = false,\n    resize = 'none',\n    size = 'lg',\n    value: valueProp,\n    onChange,\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n    'aria-invalid': ariaInvalid,\n    ...rest\n  } = props;\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue);\n  const isInvalid = !!ariaInvalid && ariaInvalid !== 'false';\n  const isPlaceholder = !!placeholder && !value;\n  const isEmpty = !value;\n\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    autoFocus: props.autoFocus,\n    isTextInput: true,\n  });\n\n  const { hoverProps, isHovered } = useHover({\n    isDisabled,\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n  });\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(textAreaClassNames, theme.TextArea, classNamesProp, {\n        textarea: mapping.font[size],\n      }),\n    [theme.TextArea, classNamesProp, mapping.font, size],\n  );\n\n  const mergedProps = useMemo(\n    () => mergeProps(rest, focusProps, hoverProps),\n    [focusProps, hoverProps, rest],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(textAreaStateVars, {\n        resize,\n        size,\n        isDisabled,\n        isEmpty,\n        isFocused,\n        isFocusVisible,\n        isHovered,\n        isInvalid,\n        isPlaceholder,\n        isReadOnly,\n        isRequired,\n      }),\n    [\n      resize,\n      size,\n      isDisabled,\n      isEmpty,\n      isFocused,\n      isFocusVisible,\n      isHovered,\n      isInvalid,\n      isPlaceholder,\n      isReadOnly,\n      isRequired,\n    ],\n  );\n\n  const handleChange = useCallback(\n    (event: FormEvent<HTMLSpanElement>) => {\n      onChange?.(event);\n\n      if (!event.defaultPrevented) {\n        setValue(event.currentTarget.textContent ?? '');\n      }\n    },\n    [onChange, setValue],\n  );\n\n  /**\n   * In order to provide the UX of an \"input\" that auto grows in height\n   * thats driven by content, we implement a content-editable span instead\n   * of a textarea. However, this has the side effect that it must be\n   * updated as an \"uncontrolled\" element, otherwise the cursor resets\n   * to the beginning of the input area after every keystroke if the value\n   * is passed in as \"children\"\n   */\n  useEffect(() => {\n    if (typeof ref !== 'function' && ref?.current) {\n      ref.current.textContent = `${value ?? ''}`;\n    }\n  }, [ref, value]);\n\n  return (\n    <div className={classNames?.container} style={style}>\n      <span\n        {...mergedProps}\n        {...hoverProps}\n        ref={ref}\n        className={classNames?.textarea}\n        contentEditable={!isDisabled && !isReadOnly}\n        role='textbox'\n        suppressContentEditableWarning\n        onInput={handleChange}\n        aria-invalid={ariaInvalid}\n        data-placeholder={placeholder}\n      />\n    </div>\n  );\n});\n"],"names":["TextArea","RACTextAreaContext"],"mappings":"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"}

package/dist/components/textarea/textarea.vanilla.js

@@ -0,0 +1,8 @@
+
+var textAreaClassNames = { container: "textarea_textAreaClassNames_container__13oc1ofn", textarea: "textarea_textAreaClassNames_textarea__13oc1ofo" };
+var textAreaColorVars = { background: "var(--background__13oc1of1)", border: "var(--border__13oc1of2)", color: "var(--color__13oc1of3)" };
+var textAreaContainer = "textarea_textAreaContainer__13oc1of0";
+var textAreaSpaceVars = { minWidth: "var(--minWidth__13oc1of4)", width: "var(--width__13oc1of5)", maxWidth: "var(--maxWidth__13oc1of6)", minHeight: "var(--minHeight__13oc1of7)", height: "var(--height__13oc1of8)", maxHeight: "var(--maxHeight__13oc1of9)", x: "var(--x__13oc1ofa)", y: "var(--y__13oc1ofb)" };
+var textAreaStateVars = { resize: "var(--resize__13oc1ofc)", size: "var(--size__13oc1ofd)", isDisabled: "var(--isDisabled__13oc1ofe)", isEmpty: "var(--isEmpty__13oc1off)", isFocused: "var(--isFocused__13oc1ofg)", isFocusVisible: "var(--isFocusVisible__13oc1ofh)", isHovered: "var(--isHovered__13oc1ofi)", isInvalid: "var(--isInvalid__13oc1ofj)", isPlaceholder: "var(--isPlaceholder__13oc1ofk)", isReadOnly: "var(--isReadOnly__13oc1ofl)", isRequired: "var(--isRequired__13oc1ofm)" };
+
+export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars };

package/dist/components/textarea/textarea.vanilla.js.map

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

package/dist/components/textarea/types.d.ts

@@ -0,0 +1,39 @@
+import type { AsType } from '../../types';
+import type { FormEventHandler } from 'react';
+import type { InputRenderProps as RACInputRenderProps, TextAreaProps as RACTextAreaProps } from 'react-aria-components';
+export type TextAreaClassNames = Partial<{
+    container: string;
+    textarea: string;
+}>;
+export type TextAreaSize = 'sm' | 'lg';
+export type TextAreaMapping = {
+    font: Partial<Record<TextAreaSize, string>>;
+};
+export type TextAreaRenderProps = AsType<RACInputRenderProps> & {
+    /**
+     * If value is undefined or empty
+     */
+    isEmpty: boolean;
+    /**
+     * If placeholder is provided and value is undefined or empty
+     */
+    isPlaceholder: boolean;
+    /**
+     * If read only
+     */
+    isReadOnly: boolean;
+    /**
+     * If required
+     */
+    isRequired: boolean;
+};
+export type TextAreaResize = 'both' | 'horizontal' | 'vertical' | 'none';
+export type BaseTextAreaProps = {
+    classNames?: TextAreaClassNames;
+    mapping?: Partial<TextAreaMapping>;
+    resize?: TextAreaResize;
+    size?: TextAreaSize;
+    onChange?: FormEventHandler<HTMLSpanElement>;
+};
+export type TextAreaState = TextAreaRenderProps & Required<Pick<BaseTextAreaProps, 'resize' | 'size'>>;
+export type TextAreaProps = Omit<RACTextAreaProps, 'children' | 'className' | 'cols' | 'rows' | 'style' | 'onChange'> & BaseTextAreaProps;

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { Tooltip, TooltipContext, TooltipTarget, TooltipTargetContext, } from './tooltip';
+export { tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars, } from './tooltip.css';
+export { type TooltipClassNames, type TooltipMapping, type TooltipProps, type TooltipRenderProps, type TooltipState, type TooltipTargetProps, type TooltipTargetState, } from './types';

package/dist/components/tooltip/tooltip.css.d.ts

@@ -0,0 +1,23 @@
+import type { TooltipClassNames } from './types';
+export declare const tooltipContainers: {
+    tooltip: string;
+    target: string;
+};
+export declare const tooltipSpaceVars: {
+    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const tooltipStateVars: {
+    containerPadding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    crossOffset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    offset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    placement: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEntering: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isExiting: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isOpen: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const tooltipTargetStateVars: {
+    focusable: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    relative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const tooltipClassNames: TooltipClassNames;