@persona/design-system 0.1.5-pre.4

package/dist/TabBar-Bf89XksH.mjs

@@ -0,0 +1,266 @@
+import { isActive, isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import "./variables/transitions.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { n as Button, t as IconButton } from "./IconButton-C28qxOdi.mjs";
+import "./components/Button/index.mjs";
+import { t as Badge } from "./Badge-BqLnhb4n.mjs";
+import { t as $5dc95899b306f630$export$c9058316764c140e } from "./mergeRefs-BgcbK0Qy.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, forwardRef, useContext, useRef } from "react";
+//#region components/TabBar/TabBarContext.ts
+var TabBarContext_default = createContext({});
+//#endregion
+//#region components/TabBar/TabBar.tsx
+const TabBarContainer = styled.div`
+  display: flex;
+  height: ${Spacing[6]};
+  position: relative;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${Color.BorderDivider};
+  justify-content: space-between;
+  gap: ${Spacing[4]};
+`;
+const RightActions = styled.div`
+  align-self: center;
+`;
+const TitleTab = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  ${paragraphMixins.mdBold};
+`;
+const StyledTabContainer = styled.div`
+  display: flex;
+  gap: ${({ $size = "md" }) => $size === "sm" ? Spacing[3] : Spacing[4]};
+  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab
+  margin-bottom: -2px;
+  padding-bottom: 2px;
+  overflow: hidden;
+  flex-wrap: wrap;
+`;
+const TabContainer = forwardRef(function TabContainer({ children, maxTabChars, size, ...props }, forwardedRef) {
+	const tabListRef = useRef(null);
+	const getIndexOfCurrentTab = (list) => {
+		return getIndex(list, document.activeElement);
+	};
+	const handleKeyDown = (e) => {
+		const list = getTabList(tabListRef.current.children);
+		if (document.activeElement && !list.includes(document.activeElement)) return;
+		switch (e.key) {
+			case "ArrowLeft": {
+				const curIndex = getIndexOfCurrentTab(list);
+				list[curIndex === 0 ? list.length - 1 : curIndex - 1].focus();
+				break;
+			}
+			case "ArrowRight":
+				list[(getIndexOfCurrentTab(list) + 1) % list.length].focus();
+				break;
+			case "Home":
+				list[0].focus();
+				break;
+			case "End":
+				list[list.length - 1].focus();
+				break;
+			default: break;
+		}
+	};
+	return /* @__PURE__ */ jsx(TabBarContext_default.Provider, {
+		value: {
+			maxTabChars,
+			size
+		},
+		children: /* @__PURE__ */ jsx(StyledTabContainer, {
+			role: "tablist",
+			ref: $5dc95899b306f630$export$c9058316764c140e(tabListRef, forwardedRef),
+			onKeyDown: handleKeyDown,
+			$size: size,
+			...props,
+			children
+		})
+	});
+});
+const getIndex = (children, element) => {
+	return children.indexOf(element);
+};
+const getTabList = (list) => {
+	return Array.from(list).filter((e) => {
+		return !(e.getAttribute("aria-disabled") || e.getAttribute("disabled"));
+	});
+};
+const TabBar = forwardRef(function TabBar({ children, actions, title, "data-tour-target": dataTourTarget, maxTabChars, size, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...elemProps }, forwardedRef) {
+	return /* @__PURE__ */ jsxs(TabBarContainer, {
+		...elemProps,
+		children: [/* @__PURE__ */ jsxs(TabContainer, {
+			ref: forwardedRef,
+			maxTabChars,
+			size,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			children: [title && /* @__PURE__ */ jsx(TitleTab, {
+				"data-tour-target": dataTourTarget,
+				children: title
+			}), children]
+		}), actions && /* @__PURE__ */ jsx(RightActions, { children: actions })]
+	});
+});
+//#endregion
+//#region components/TabBar/Tab.tsx
+const BadgeContainer = styled.span`
+  padding: 0;
+  margin-left: ${Spacing[1]};
+`;
+const sizeStyles = {
+	md: css`
+    ${paragraphMixins.md}
+  `,
+	sm: css`
+    ${paragraphMixins.sm}
+  `
+};
+const tabSelectedStyle = css`
+  color: ${({ theme }) => theme.color.primary.brand};
+  border-bottom-color: ${({ theme }) => theme.color.primary.brand};
+  box-shadow: none;
+  &:after {
+    transition: border-bottom-color ${"200ms"};
+    border-bottom-color: ${({ theme }) => theme.color.primary.brand};
+  }
+`;
+const StyledTab = styled(Button).attrs({
+	width: "auto",
+	variant: "basic"
+})`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  white-space: nowrap;
+  background-color: transparent;
+  color: ${({ theme, disabled }) => disabled ? theme.color.variants.basic.textDisabled : theme.color.text.tertiary};
+  transition: color ${"200ms"} ease-out;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  ${({ size }) => sizeStyles[size || "md"]};
+  outline: none;
+  border-radius: ${({ theme }) => theme.button.borderRadius};
+
+  a {
+    color: currentColor;
+  }
+
+  /* remove default button focused/hovered box shadow */
+  &${isActive}${isNotDisabled} {
+    background-color: unset;
+  }
+  &${isHovered}${isNotDisabled} {
+    background-color: unset;
+    ${({ selected }) => !selected && css`
+        color: ${Color.TextPrimary};
+      `}
+  }
+  &${isFocused}${isNotDisabled} {
+    box-shadow: none;
+    background-color: unset;
+  }
+  &${isHovered}${isFocused}${isNotDisabled} {
+    background-color: unset;
+  }
+  &:disabled {
+    background-color: unset;
+  }
+
+  &:after {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    border-bottom: 1px solid transparent;
+    content: '';
+  }
+
+  &.selected,
+  &.active {
+    ${tabSelectedStyle}
+  }
+
+  ${({ selected }) => selected && tabSelectedStyle}
+
+  ${({ disabled }) => disabled && css`
+      cursor: default;
+    `}
+
+  a& {
+    text-decoration: none;
+  }
+`;
+/**
+* Helper function to truncate text if it exceeds maxCharacters
+*/
+const truncateText = (text, maxCharacters) => {
+	if (text.length <= maxCharacters) return text;
+	return `${text.substring(0, maxCharacters).trimEnd()}...`;
+};
+const Tab = ({ selected, disabled, children, badge, as, size, ...elemProps }) => {
+	const { maxTabChars, size: contextSize } = useContext(TabBarContext_default);
+	const finalSize = size || contextSize || "md";
+	const hasTruncation = maxTabChars && typeof children === "string";
+	const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;
+	return /* @__PURE__ */ jsxs(StyledTab, {
+		role: "tab",
+		selected,
+		"aria-selected": selected,
+		"aria-disabled": disabled,
+		disabled,
+		as,
+		size: finalSize,
+		title: hasTruncation ? children : void 0,
+		...elemProps,
+		children: [displayChildren, badge && /* @__PURE__ */ jsx(BadgeContainer, { children: badge.type === Badge ? cloneElement(badge, {
+			variant: selected ? "active" : "basic",
+			onSecondaryBackground: true
+		}) : badge })]
+	});
+};
+//#endregion
+//#region components/TabBar/TabBarIconButton.tsx
+var TabBarIconButton_default = styled(IconButton).attrs({ size: "sm" })`
+  padding-left: ${Spacing[2]};
+  padding-right: ${Spacing[2]};
+  border-radius: ${BorderRadius.Sm};
+
+  // remove default button focused/hovered box shadow
+  &${isActive}${isNotDisabled} {
+    background-color: transparent;
+  }
+  &${isHovered}${isNotDisabled} {
+    box-shadow: none;
+  }
+  &${isFocused}${isNotDisabled} {
+    box-shadow: none;
+  }
+  &${isHovered}${isFocused}${isNotDisabled} {
+    box-shadow: none;
+  }
+  &:disabled {
+    background-color: transparent;
+  }
+  &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {
+    box-shadow: 0 0 0 3px ${({ theme }) => theme.color.variants.basic.highlight};
+  }
+
+  svg {
+    color: ${Color.CoreSlate800};
+  }
+
+  &:hover {
+    svg {
+      color: ${Color.CoreSlate900};
+    }
+  }
+`;
+//#endregion
+export { TabContainer as a, TabBar as i, StyledTab as n, Tab as r, TabBarIconButton_default as t };
+
+//# sourceMappingURL=TabBar-Bf89XksH.mjs.map

package/dist/TabBar-Bf89XksH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar-Bf89XksH.mjs","names":["TabBarContext","mergeRefs","TabBarContext"],"sources":["../components/TabBar/TabBarContext.ts","../components/TabBar/TabBar.tsx","../components/TabBar/Tab.tsx","../components/TabBar/TabBarIconButton.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport default createContext<{ maxTabChars?: number; size?: 'md' | 'sm' }>({});\n","import { Color, Spacing } from '@persona/design-tokens';\nimport { mergeRefs } from '@react-aria/utils';\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEventHandler,\n  type ReactNode,\n  useRef,\n} from 'react';\nimport styled from 'styled-components';\n\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst TabBarContainer = styled.div`\n  display: flex;\n  height: ${Spacing[6]};\n  position: relative;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${Color.BorderDivider};\n  justify-content: space-between;\n  gap: ${Spacing[4]};\n`;\n\nconst RightActions = styled.div`\n  align-self: center;\n`;\n\nconst TitleTab = styled.div`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  ${paragraphMixins.mdBold};\n`;\n\nconst StyledTabContainer = styled.div<{ $size?: 'md' | 'sm' }>`\n  display: flex;\n  gap: ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[3] : Spacing[4])};\n  // These two lines prevent the overflow hidden from hiding the bottom border of the selected tab\n  margin-bottom: -2px;\n  padding-bottom: 2px;\n  overflow: hidden;\n  flex-wrap: wrap;\n`;\n\ninterface TabContainerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabContainer = forwardRef<HTMLDivElement, TabContainerProps>(function TabContainer(\n  { children, maxTabChars, size, ...props },\n  forwardedRef,\n) {\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const getIndexOfCurrentTab = (list: Element[]) => {\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    return getIndex(list, document.activeElement);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n    /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n    const list = getTabList(tabListRef.current.children);\n\n    if (document.activeElement && !list.includes(document.activeElement)) {\n      return;\n    }\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        // Go to previous tab\n        const curIndex = getIndexOfCurrentTab(list);\n        const nextIndex = curIndex === 0 ? list.length - 1 : curIndex - 1;\n        (list[nextIndex] as HTMLElement).focus();\n        break;\n      }\n      case 'ArrowRight': {\n        // Go to next tab\n        const curIndex = getIndexOfCurrentTab(list);\n        (list[(curIndex + 1) % list.length] as HTMLElement).focus();\n        break;\n      }\n      case 'Home': {\n        // Go to first tab\n        (list[0] as HTMLElement).focus();\n        break;\n      }\n      case 'End': {\n        // Go to last tab\n        (list[list.length - 1] as HTMLElement).focus();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <TabBarContext.Provider value={{ maxTabChars, size }}>\n      <StyledTabContainer\n        role='tablist'\n        ref={mergeRefs<HTMLDivElement>(tabListRef, forwardedRef)}\n        onKeyDown={handleKeyDown}\n        $size={size}\n        {...props}\n      >\n        {children}\n      </StyledTabContainer>\n    </TabBarContext.Provider>\n  );\n});\n\nconst getIndex = (children: Element[], element: Element) => {\n  return children.indexOf(element);\n};\n\nconst getTabList = (list: HTMLCollection) => {\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  return Array.from(list).filter((e: HTMLElement) => {\n    return !(e.getAttribute('aria-disabled') || e.getAttribute('disabled'));\n  });\n};\n\nexport interface TabBarProps extends ComponentPropsWithoutRef<'div'> {\n  actions?: ReactNode;\n  title?: string;\n  'data-tour-target'?: string;\n  /**\n   * Truncate tab text to the specified number of characters.\n   */\n  maxTabChars?: number;\n  /**\n   * Size of the tabs. Affects font size.\n   */\n  size?: 'md' | 'sm';\n}\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(function TabBar(\n  {\n    children,\n    actions,\n    title,\n    'data-tour-target': dataTourTarget,\n    maxTabChars,\n    size,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...elemProps\n  },\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <TabBarContainer {...elemProps}>\n      <TabContainer\n        ref={forwardedRef}\n        maxTabChars={maxTabChars}\n        size={size}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n      >\n        {title && <TitleTab data-tour-target={dataTourTarget}>{title}</TitleTab>}\n        {children}\n      </TabContainer>\n      {actions && <RightActions>{actions}</RightActions>}\n    </TabBarContainer>\n  );\n});\n\nexport default TabBar;\n","import { Color, Spacing } from '@persona/design-tokens';\nimport {\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactElement,\n  useContext,\n} from 'react';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type FlattenInterpolation,\n  type ThemeProps,\n} from 'styled-components';\n\nimport Badge from 'design-system/components/Badge';\nimport Button from 'design-system/components/Button';\nimport TabBarContext from 'design-system/components/TabBar/TabBarContext';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\ninterface TabProps<T extends ElementType = 'button'> extends ComponentPropsWithoutRef<\n  typeof Button\n> {\n  selected?: boolean;\n  badge?: ReactElement;\n  as?: T;\n  size?: 'md' | 'sm';\n}\n\nconst BadgeContainer = styled.span`\n  padding: 0;\n  margin-left: ${Spacing[1]};\n`;\n\nconst sizeStyles: Record<\n  NonNullable<TabProps['size']>,\n  FlattenInterpolation<ThemeProps<DefaultTheme>>\n> = {\n  md: css`\n    ${paragraphMixins.md}\n  `,\n  sm: css`\n    ${paragraphMixins.sm}\n  `,\n};\n\nconst tabSelectedStyle = css`\n  color: ${({ theme }) => theme.color.primary.brand};\n  border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  box-shadow: none;\n  &:after {\n    transition: border-bottom-color ${TransitionDuration.Fast};\n    border-bottom-color: ${({ theme }) => theme.color.primary.brand};\n  }\n`;\n\nexport const StyledTab = styled(Button).attrs<TabProps>({\n  width: 'auto',\n  variant: 'basic',\n})<TabProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  white-space: nowrap;\n  background-color: transparent;\n  color: ${({ theme, disabled }) =>\n    disabled ? theme.color.variants.basic.textDisabled : theme.color.text.tertiary};\n  transition: color ${TransitionDuration.Fast} ease-out;\n  height: 32px;\n  margin: 0;\n  padding: 0;\n  ${({ size }) => sizeStyles[size || 'md']};\n  outline: none;\n  border-radius: ${({ theme }) => theme.button.borderRadius};\n\n  a {\n    color: currentColor;\n  }\n\n  /* remove default button focused/hovered box shadow */\n  &${isActive}${isNotDisabled} {\n    background-color: unset;\n  }\n  &${isHovered}${isNotDisabled} {\n    background-color: unset;\n    ${({ selected }) =>\n      !selected &&\n      css`\n        color: ${Color.TextPrimary};\n      `}\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n    background-color: unset;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    background-color: unset;\n  }\n  &:disabled {\n    background-color: unset;\n  }\n\n  &:after {\n    position: absolute;\n    bottom: 0px;\n    width: 100%;\n    border-bottom: 1px solid transparent;\n    content: '';\n  }\n\n  &.selected,\n  &.active {\n    ${tabSelectedStyle}\n  }\n\n  ${({ selected }) => selected && tabSelectedStyle}\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n    `}\n\n  a& {\n    text-decoration: none;\n  }\n`;\n\n/**\n * Helper function to truncate text if it exceeds maxCharacters\n */\nconst truncateText = (text: string, maxCharacters: number): string => {\n  if (text.length <= maxCharacters) {\n    return text;\n  }\n  return `${text.substring(0, maxCharacters).trimEnd()}...`;\n};\n\nconst Tab = <T extends ElementType = 'button'>({\n  selected,\n  disabled,\n  children,\n  badge,\n  as,\n  size,\n  ...elemProps\n}: TabProps<T> & ComponentPropsWithoutRef<T>) => {\n  const { maxTabChars, size: contextSize } = useContext(TabBarContext);\n  const finalSize = size || contextSize || 'md';\n\n  // Truncate text if maxTabChars is provided and children is a string\n  const hasTruncation = maxTabChars && typeof children === 'string';\n  const displayChildren = hasTruncation ? truncateText(children, maxTabChars) : children;\n\n  return (\n    <StyledTab\n      role='tab'\n      selected={selected}\n      aria-selected={selected}\n      aria-disabled={disabled}\n      disabled={disabled}\n      as={as as ElementType}\n      size={finalSize}\n      title={hasTruncation ? children : undefined}\n      {...elemProps}\n    >\n      {displayChildren}\n      {badge && (\n        <BadgeContainer>\n          {badge.type === Badge\n            ? cloneElement(badge, {\n                variant: selected ? 'active' : 'basic',\n                onSecondaryBackground: true,\n              })\n            : badge}\n        </BadgeContainer>\n      )}\n    </StyledTab>\n  );\n};\n\nexport default Tab;\n","import { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport styled from 'styled-components';\n\nimport { IconButton } from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\n\nexport default styled(IconButton).attrs({\n  size: 'sm',\n})`\n  padding-left: ${Spacing[2]};\n  padding-right: ${Spacing[2]};\n  border-radius: ${BorderRadius.Sm};\n\n  // remove default button focused/hovered box shadow\n  &${isActive}${isNotDisabled} {\n    background-color: transparent;\n  }\n  &${isHovered}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &${isHovered}${isFocused}${isNotDisabled} {\n    box-shadow: none;\n  }\n  &:disabled {\n    background-color: transparent;\n  }\n  &:focus-visible${isNotDisabled}, &${isHovered}${isNotDisabled}:focus-visible {\n    box-shadow: 0 0 0 3px ${({ theme }) => theme.color.variants.basic.highlight};\n  }\n\n  svg {\n    color: ${Color.CoreSlate800};\n  }\n\n  &:hover {\n    svg {\n      color: ${Color.CoreSlate900};\n    }\n  }\n`;\n"],"mappings":"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"}

package/dist/TabBar.d.cts

@@ -0,0 +1,33 @@
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#region components/TabBar/TabBar.d.ts
+interface TabContainerProps extends ComponentPropsWithoutRef<'div'> {
+  children: ReactNode;
+  /**
+   * Truncate tab text to the specified number of characters.
+   */
+  maxTabChars?: number;
+  /**
+   * Size of the tabs. Affects font size.
+   */
+  size?: 'md' | 'sm';
+}
+declare const TabContainer: _$react.ForwardRefExoticComponent<TabContainerProps & _$react.RefAttributes<HTMLDivElement>>;
+interface TabBarProps extends ComponentPropsWithoutRef<'div'> {
+  actions?: ReactNode;
+  title?: string;
+  'data-tour-target'?: string;
+  /**
+   * Truncate tab text to the specified number of characters.
+   */
+  maxTabChars?: number;
+  /**
+   * Size of the tabs. Affects font size.
+   */
+  size?: 'md' | 'sm';
+}
+declare const TabBar: _$react.ForwardRefExoticComponent<TabBarProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabBar, TabBar as default, TabBarProps, TabContainer };
+//# sourceMappingURL=TabBar.d.cts.map

package/dist/TabBar.d.mts

@@ -0,0 +1,33 @@
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#region components/TabBar/TabBar.d.ts
+interface TabContainerProps extends ComponentPropsWithoutRef<'div'> {
+  children: ReactNode;
+  /**
+   * Truncate tab text to the specified number of characters.
+   */
+  maxTabChars?: number;
+  /**
+   * Size of the tabs. Affects font size.
+   */
+  size?: 'md' | 'sm';
+}
+declare const TabContainer: _$react.ForwardRefExoticComponent<TabContainerProps & _$react.RefAttributes<HTMLDivElement>>;
+interface TabBarProps extends ComponentPropsWithoutRef<'div'> {
+  actions?: ReactNode;
+  title?: string;
+  'data-tour-target'?: string;
+  /**
+   * Truncate tab text to the specified number of characters.
+   */
+  maxTabChars?: number;
+  /**
+   * Size of the tabs. Affects font size.
+   */
+  size?: 'md' | 'sm';
+}
+declare const TabBar: _$react.ForwardRefExoticComponent<TabBarProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabBar, TabBar as default, TabBarProps, TabContainer };
+//# sourceMappingURL=TabBar.d.mts.map

package/dist/TabBarContext.d.mts

@@ -0,0 +1,10 @@
+import * as _$react from "react";
+
+//#region components/TabBar/TabBarContext.d.ts
+declare const _default: _$react.Context<{
+  maxTabChars?: number;
+  size?: "md" | "sm";
+}>;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=TabBarContext.d.mts.map

package/dist/TabBarIconButton.d.cts

@@ -0,0 +1,10 @@
+import { n as IconButtonProps } from "./IconButton-ZcyTFjPn.cjs";
+import * as _$react from "react";
+import * as _$styled_components0 from "styled-components";
+
+//#region components/TabBar/TabBarIconButton.d.ts
+declare const _default: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {
+  size: "sm";
+}, "size">;
+export = _default;
+//# sourceMappingURL=TabBarIconButton.d.cts.map

package/dist/TabBarIconButton.d.mts

@@ -0,0 +1,11 @@
+import { n as IconButtonProps } from "./IconButton-DsXbc3nQ.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react from "react";
+
+//#region components/TabBar/TabBarIconButton.d.ts
+declare const _default: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {
+  size: "sm";
+}, "size">;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=TabBarIconButton.d.mts.map

package/dist/Table-34f5m7w5.d.mts

@@ -0,0 +1,13 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Table/Table.d.ts
+interface TableProps {
+  size?: 'sm' | 'md';
+  isLoading?: boolean;
+}
+declare const Table: _$styled_components0.StyledComponent<"table", any, {
+  role: "table";
+} & TableProps, "role">;
+//#endregion
+export { Table as t };
+//# sourceMappingURL=Table-34f5m7w5.d.mts.map

package/dist/Table-DkAA1lt_.d.cts

@@ -0,0 +1,13 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Table/Table.d.ts
+interface TableProps {
+  size?: 'sm' | 'md';
+  isLoading?: boolean;
+}
+declare const Table: _$styled_components0.StyledComponent<"table", any, {
+  role: "table";
+} & TableProps, "role">;
+//#endregion
+export { Table as t };
+//# sourceMappingURL=Table-DkAA1lt_.d.cts.map

package/dist/Table.d.cts

@@ -0,0 +1,2 @@
+import { t as Table } from "./Table-DkAA1lt_.cjs";
+export { Table, Table as default };

package/dist/Table.d.mts

@@ -0,0 +1,2 @@
+import { t as Table } from "./Table-34f5m7w5.mjs";
+export { Table, Table as default };

package/dist/TableBody-5QcVMPP_.d.cts

@@ -0,0 +1,9 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Table/TableBody.d.ts
+declare const TableBody: _$styled_components0.StyledComponent<"tbody", any, {
+  role: "rowgroup";
+}, "role">;
+//#endregion
+export { TableBody as t };
+//# sourceMappingURL=TableBody-5QcVMPP_.d.cts.map

package/dist/TableBody-Clf34yzJ.d.mts

@@ -0,0 +1,9 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Table/TableBody.d.ts
+declare const TableBody: _$styled_components0.StyledComponent<"tbody", any, {
+  role: "rowgroup";
+}, "role">;
+//#endregion
+export { TableBody as t };
+//# sourceMappingURL=TableBody-Clf34yzJ.d.mts.map

package/dist/TableBody.d.cts

@@ -0,0 +1,2 @@
+import { t as TableBody } from "./TableBody-5QcVMPP_.cjs";
+export = TableBody;

package/dist/TableBody.d.mts

@@ -0,0 +1,2 @@
+import { t as TableBody } from "./TableBody-Clf34yzJ.mjs";
+export { TableBody as default };

package/dist/TableCell-DIs9h97h.d.cts

@@ -0,0 +1,75 @@
+import { t as TableHeaderCell } from "./TableHeaderCell-25lC9tNk.cjs";
+import { n as TableRowProps } from "./TableRow-IPjQnK2q.cjs";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/Table/TableTH.d.ts
+interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {
+  canSort?: boolean;
+  isSorted?: boolean;
+  isDescending?: boolean;
+  isSticky?: boolean;
+  /**
+   * Display help icon and tooltip for column header
+   */
+  helpText?: ReactNode;
+  align?: 'left' | 'right';
+  size?: 'sm' | 'md';
+}
+declare const TableTH: _$react.ForwardRefExoticComponent<TableTHProps & _$react.RefAttributes<HTMLTableCellElement>>;
+//#endregion
+//#region components/Table/TableCell.d.ts
+interface TableCellProps {
+  breakWord?: boolean;
+  size?: 'sm' | 'md';
+}
+declare const TableCell: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps, "role">;
+interface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {
+  subtitle?: ReactNode;
+}
+declare const TableCellTitle: ({
+  children,
+  subtitle,
+  ...elemProps
+}: TableCellTitleProps) => _$react_jsx_runtime0.JSX.Element;
+declare const TableTD: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps & {
+  unclickable?: boolean;
+}, "role">;
+declare const TableIconTD: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps & {
+  unclickable?: boolean;
+}, "role">;
+declare const TableActionTD: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps & {
+  unclickable?: boolean;
+}, "role">;
+declare const StickyTD: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps & {
+  unclickable?: boolean;
+} & {
+  left?: number;
+  hasRightBorder?: boolean;
+}, "role">;
+declare const StickyTH: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<TableTHProps & _$react.RefAttributes<HTMLTableCellElement>>, any, {
+  left?: number;
+  hasRightBorder?: boolean;
+  size?: "sm" | "md";
+}, never>;
+declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
+  role: "row";
+} & TableRowProps & {
+  disableHoverBackground?: boolean;
+  $isActive?: boolean;
+}, "role">;
+//#endregion
+export { TableCellProps as a, TableTD as c, TableTHProps as d, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t, TableTH as u };
+//# sourceMappingURL=TableCell-DIs9h97h.d.cts.map

package/dist/TableCell-Dog4Blfq.d.mts

@@ -0,0 +1,75 @@
+import { t as TableHeaderCell } from "./TableHeaderCell-DzYZq7SG.mjs";
+import { n as TableRowProps } from "./TableRow-CBKpDeUV.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+
+//#region components/Table/TableTH.d.ts
+interface TableTHProps extends ComponentPropsWithoutRef<typeof TableHeaderCell> {
+  canSort?: boolean;
+  isSorted?: boolean;
+  isDescending?: boolean;
+  isSticky?: boolean;
+  /**
+   * Display help icon and tooltip for column header
+   */
+  helpText?: ReactNode;
+  align?: 'left' | 'right';
+  size?: 'sm' | 'md';
+}
+declare const TableTH: _$react.ForwardRefExoticComponent<TableTHProps & _$react.RefAttributes<HTMLTableCellElement>>;
+//#endregion
+//#region components/Table/TableCell.d.ts
+interface TableCellProps {
+  breakWord?: boolean;
+  size?: 'sm' | 'md';
+}
+declare const TableCell: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps, "role">;
+interface TableCellTitleProps extends ComponentPropsWithoutRef<'div'> {
+  subtitle?: ReactNode;
+}
+declare const TableCellTitle: ({
+  children,
+  subtitle,
+  ...elemProps
+}: TableCellTitleProps) => _$react_jsx_runtime0.JSX.Element;
+declare const TableTD: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps & {
+  unclickable?: boolean;
+}, "role">;
+declare const TableIconTD: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps & {
+  unclickable?: boolean;
+}, "role">;
+declare const TableActionTD: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps & {
+  unclickable?: boolean;
+}, "role">;
+declare const StickyTD: _$styled_components0.StyledComponent<"td", any, {
+  role: "cell";
+} & TableCellProps & {
+  unclickable?: boolean;
+} & {
+  left?: number;
+  hasRightBorder?: boolean;
+}, "role">;
+declare const StickyTH: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<TableTHProps & _$react.RefAttributes<HTMLTableCellElement>>, any, {
+  left?: number;
+  hasRightBorder?: boolean;
+  size?: "sm" | "md";
+}, never>;
+declare const TableTR: _$styled_components0.StyledComponent<"tr", any, {
+  role: "row";
+} & TableRowProps & {
+  disableHoverBackground?: boolean;
+  $isActive?: boolean;
+}, "role">;
+//#endregion
+export { TableCellProps as a, TableTD as c, TableTHProps as d, TableCell as i, TableTR as l, StickyTH as n, TableCellTitle as o, TableActionTD as r, TableIconTD as s, StickyTD as t, TableTH as u };
+//# sourceMappingURL=TableCell-Dog4Blfq.d.mts.map

package/dist/TableCell.d.cts

@@ -0,0 +1,2 @@
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-DIs9h97h.cjs";
+export { StickyTD, StickyTH, TableActionTD, TableCellProps, TableCellTitle, TableIconTD, TableTD, TableTR, TableCell as default };

package/dist/TableCell.d.mts

@@ -0,0 +1,2 @@
+import { a as TableCellProps, c as TableTD, i as TableCell, l as TableTR, n as StickyTH, o as TableCellTitle, r as TableActionTD, s as TableIconTD, t as StickyTD } from "./TableCell-Dog4Blfq.mjs";
+export { StickyTD, StickyTH, TableActionTD, TableCellProps, TableCellTitle, TableIconTD, TableTD, TableTR, TableCell as default };

package/dist/TableHead-9LLM1B8I.d.cts

@@ -0,0 +1,12 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Table/TableHead.d.ts
+interface TableHeadProps {
+  sticky?: boolean;
+}
+declare const TableHead: _$styled_components0.StyledComponent<"thead", any, {
+  role: "rowgroup";
+} & TableHeadProps, "role">;
+//#endregion
+export { TableHead as t };
+//# sourceMappingURL=TableHead-9LLM1B8I.d.cts.map

package/dist/TableHead-DJBGHoUD.d.mts

@@ -0,0 +1,12 @@
+import * as _$styled_components0 from "styled-components";
+
+//#region components/Table/TableHead.d.ts
+interface TableHeadProps {
+  sticky?: boolean;
+}
+declare const TableHead: _$styled_components0.StyledComponent<"thead", any, {
+  role: "rowgroup";
+} & TableHeadProps, "role">;
+//#endregion
+export { TableHead as t };
+//# sourceMappingURL=TableHead-DJBGHoUD.d.mts.map

package/dist/TableHead.d.cts

@@ -0,0 +1,2 @@
+import { t as TableHead } from "./TableHead-9LLM1B8I.cjs";
+export = TableHead;

package/dist/TableHead.d.mts

@@ -0,0 +1,2 @@
+import { t as TableHead } from "./TableHead-DJBGHoUD.mjs";
+export { TableHead as default };