@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/table/thead.js.map

@@ -1 +1 @@
-{"version":3,"file":"thead.js","names":["Tr","Th"],"sources":["../../src/table/thead.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TheadProps } from './table.types'\nimport Th from './th'\nimport Tr from './tr'\n\nconst TheadBase = styled.theadBox`\n  tr th,\n  tr td {\n    border-bottom: 1px solid sandstone.main;\n  }\n`\n\n/** Displays Table head with support for columns and sticky. */\nexport const Thead = vui<'thead', TheadProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { columns, stickyHeader } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n\n  const stickyProps = stickyHeader\n    ? {\n        bg: 'white',\n        position: 'sticky',\n        top: 0,\n        zIndex: 3,\n      }\n    : {}\n\n  return (\n    <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>\n      {children ?? (\n        <Tr>\n          {columns?.map(column => (\n            <Th key={column.field} role=\"columnheader\" {...column} />\n          ))}\n        </Tr>\n      )}\n    </TheadBase>\n  )\n})\n\nThead.displayName = 'Thead'\n\nexport default Thead\n"],"mappings":"+SAOA,MAAM,EAAY,EAAO,QAAQ;;;;;EAQpB,EAAQ,GAA0B,EAAO,IAAQ,CAC5D,GAAM,CAAE,WAAU,YAAW,GAAG,GAAS,EACnC,CAAE,UAAS,gBAAiB,GAAiB,EAAI,EAAE,CACnD,EAAS,EAAe,QAAS,GAAiB,CAAC,CAEnD,EAAc,EAChB,CACE,GAAI,QACJ,SAAU,SACV,IAAK,EACL,OAAQ,EACT,CACD,EAAE,CAEN,OACE,EAAC,EAAA,CAAU,UAAW,EAAG,YAAa,EAAU,CAAO,MAAK,GAAI,EAAa,GAAI,EAAO,MAAO,GAAI,WAChG,GACC,EAACA,EAAAA,CAAAA,SACE,GAAS,IAAI,GACZ,EAACC,EAAAA,CAAsB,KAAK,eAAe,GAAI,GAAtC,EAAO,MAAyC,CACzD,CAAA,CACC,EAEG,EAEd,CAEF,EAAM,YAAc,QAEpB,IAAA,EAAe"}
+{"version":3,"file":"thead.js","names":["Tr","Th"],"sources":["../../src/table/thead.tsx"],"sourcesContent":["import { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TheadProps } from './table.types'\nimport Th from './th'\nimport Tr from './tr'\n\nconst TheadBase = styled.theadBox`\n  tr th,\n  tr td {\n    border-bottom: 1px solid sandstone.main;\n  }\n`\n\n/** Displays Table head with support for columns and sticky. */\nexport const Thead = vui<'thead', TheadProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const { columns, stickyHeader } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n\n  const stickyProps = stickyHeader\n    ? {\n        bg: 'white',\n        position: 'sticky',\n        top: 0,\n        zIndex: 3,\n      }\n    : {}\n\n  return (\n    <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>\n      {children ?? (\n        <Tr>\n          {columns?.map(column => (\n            <Th key={column.field} role=\"columnheader\" {...column} />\n          ))}\n        </Tr>\n      )}\n    </TheadBase>\n  )\n})\n\nThead.displayName = 'Thead'\n\nexport default Thead\n"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAY,OAAO,QAAQ;;;;;;;AAQjC,MAAa,QAAQ,KAA0B,OAAO,QAAQ;CAC5D,MAAM,EAAE,UAAU,UAAW,GAAG,SAAS;CACzC,MAAM,EAAE,SAAS,iBAAiB,iBAAiB,IAAI,EAAE;CACzD,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;CAEzD,MAAM,cAAc,eAChB;EACE,IAAI;EACJ,UAAU;EACV,KAAK;EACL,QAAQ;EACT,GACD,EAAE;AAEN,QACE,oBAAC;EAAU,WAAW,GAAG,aAAa,UAAU;EAAO;EAAK,GAAI;EAAa,GAAI,OAAO;EAAO,GAAI;YAChG,YACC,oBAACA,wBACE,SAAS,KAAI,WACZ,oBAACC;GAAsB,MAAK;GAAe,GAAI;KAAtC,OAAO,MAAyC,CACzD,GACC;GAEG;EAEd;AAEF,MAAM,cAAc;AAEpB,oBAAe"}

package/dist/table/theme.js

@@ -1,2 +1,42 @@
-var e={baseStyle:{th:{fontSize:14,fontWeight:500,color:`darkBlue.main`}},defaultProps:{size:`lg`,variant:`bordered`},parts:[`container`,`sortIcon`,`tbody`,`td`,`tfoot`,`th`,`thead`,`tr`],sizes:{lg:{tr:{h:48}},md:{tr:{h:40}},sm:{tr:{h:32}}},variants:{bordered:{td:{borderBottom:`1px solid sandstone.90`}},striped:{},basic:{td:{borderBottom:`1px solid sandstone.90`}}}};export{e as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/table/theme.ts
+const baseStyle = { th: {
+	fontSize: 14,
+	fontWeight: 500,
+	color: "darkBlue.main"
+} };
+const defaultProps = {
+	size: "lg",
+	variant: "bordered"
+};
+const parts = [
+	"container",
+	"sortIcon",
+	"tbody",
+	"td",
+	"tfoot",
+	"th",
+	"thead",
+	"tr"
+];
+const sizes = {
+	lg: { tr: { h: 48 } },
+	md: { tr: { h: 40 } },
+	sm: { tr: { h: 32 } }
+};
+const variants = {
+	bordered: { td: { borderBottom: "1px solid sandstone.90" } },
+	striped: {},
+	basic: { td: { borderBottom: "1px solid sandstone.90" } }
+};
+var theme_default = {
+	baseStyle,
+	defaultProps,
+	parts,
+	sizes,
+	variants
+};
+
+//#endregion
+export { theme_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=theme.js.map

package/dist/table/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/table/theme.ts"],"sourcesContent":["const baseStyle = {\n  th: {\n    fontSize: 14,\n    fontWeight: 500,\n    color: 'darkBlue.main',\n  },\n}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'bordered',\n}\n\nconst parts = ['container', 'sortIcon', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr']\n\nconst sizes = {\n  lg: {\n    tr: {\n      h: 48,\n    },\n  },\n  md: {\n    tr: {\n      h: 40,\n    },\n  },\n  sm: {\n    tr: {\n      h: 32,\n    },\n  },\n}\n\nconst variants = {\n  bordered: {\n    td: {\n      borderBottom: '1px solid sandstone.90',\n    },\n  },\n  striped: {},\n  basic: {\n    td: {\n      borderBottom: '1px solid sandstone.90',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":"AA+CA,IAAA,EAAe,CACb,UAhDgB,CAChB,GAAI,CACF,SAAU,GACV,WAAY,IACZ,MAAO,gBACR,CACF,CA2CC,aAzCmB,CACnB,KAAM,KACN,QAAS,WACV,CAuCC,MArCY,CAAC,YAAa,WAAY,QAAS,KAAM,QAAS,KAAM,QAAS,KAAK,CAsClF,MApCY,CACZ,GAAI,CACF,GAAI,CACF,EAAG,GACJ,CACF,CACD,GAAI,CACF,GAAI,CACF,EAAG,GACJ,CACF,CACD,GAAI,CACF,GAAI,CACF,EAAG,GACJ,CACF,CACF,CAqBC,SAnBe,CACf,SAAU,CACR,GAAI,CACF,aAAc,yBACf,CACF,CACD,QAAS,EAAE,CACX,MAAO,CACL,GAAI,CACF,aAAc,yBACf,CACF,CACF,CAQA"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/table/theme.ts"],"sourcesContent":["const baseStyle = {\n  th: {\n    fontSize: 14,\n    fontWeight: 500,\n    color: 'darkBlue.main',\n  },\n}\n\nconst defaultProps = {\n  size: 'lg',\n  variant: 'bordered',\n}\n\nconst parts = ['container', 'sortIcon', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr']\n\nconst sizes = {\n  lg: {\n    tr: {\n      h: 48,\n    },\n  },\n  md: {\n    tr: {\n      h: 40,\n    },\n  },\n  sm: {\n    tr: {\n      h: 32,\n    },\n  },\n}\n\nconst variants = {\n  bordered: {\n    td: {\n      borderBottom: '1px solid sandstone.90',\n    },\n  },\n  striped: {},\n  basic: {\n    td: {\n      borderBottom: '1px solid sandstone.90',\n    },\n  },\n}\n\nexport default {\n  baseStyle,\n  defaultProps,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";AAAA,MAAM,YAAY,EAChB,IAAI;CACF,UAAU;CACV,YAAY;CACZ,OAAO;CACR,EACF;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACV;AAED,MAAM,QAAQ;CAAC;CAAa;CAAY;CAAS;CAAM;CAAS;CAAM;CAAS;CAAK;AAEpF,MAAM,QAAQ;CACZ,IAAI,EACF,IAAI,EACF,GAAG,IACJ,EACF;CACD,IAAI,EACF,IAAI,EACF,GAAG,IACJ,EACF;CACD,IAAI,EACF,IAAI,EACF,GAAG,IACJ,EACF;CACF;AAED,MAAM,WAAW;CACf,UAAU,EACR,IAAI,EACF,cAAc,0BACf,EACF;CACD,SAAS,EAAE;CACX,OAAO,EACL,IAAI,EACF,cAAc,0BACf,EACF;CACF;AAED,oBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/dist/table/tr.d.ts

@@ -1,10 +1,11 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { TrProps } from "./table.types.js";
-import * as styled_components400 from "styled-components";
+import "../index.js";
+import * as styled_components435 from "styled-components";
 
 //#region src/table/tr.d.ts
-declare const TrBase: styled_components400.StyledComponent<"tr", styled_components400.DefaultTheme, SystemProps, never>;
+declare const TrBase: styled_components435.StyledComponent<"tr", styled_components435.DefaultTheme, SystemProps, never>;
 /** Displays Table row that can contain heading or data cells. */
 declare const Tr: VuiComponent<"tr", TrProps>;
 //#endregion

package/dist/table/tr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tr.d.ts","names":[],"sources":["../../src/table/tr.tsx"],"sourcesContent":[],"mappings":";;;;;;cAYa,QAAM,oBAAA,CAAA,sBAGlB,oBAAA,CAHkB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAMN,IAAE,mBAAA"}
+{"version":3,"file":"tr.d.ts","names":[],"sources":["../../src/table/tr.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAYa,QAAM,oBAAA,CAAA,sBAGlB,oBAAA,CAHkB,YAAA,CAAA,CAAA,WAAA,CAAA;;cAMN,IAAE,mBAAA"}

package/dist/table/tr.js

@@ -1,5 +1,63 @@
-import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{styled as n}from"../core/styled.js";import{vui as r}from"../core/vui.js";import i from"../button/button.js";import{useTableContext as a}from"./context.js";import o from"./td.js";import{useEffect as s,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=`vui-tr`,p=e=>`falAngle${e?`Down`:`Right`}`,m=n.trBox`
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import button_default from "../button/button.js";
+import { useTableContext } from "./context.js";
+import td_default from "./td.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/table/tr.tsx
+const trClassName = "vui-tr";
+const buttonClassName = (isExpanded) => `falAngle${isExpanded ? "Down" : "Right"}`;
+const TrBase = styled.trBox`
   position: relative;
   transition-duration: fast;
-`,h=r((n,r)=>{let{className:h,isExpanded:g,isSelected:_,nested:v,onCollapsed:y,onExpanded:b,...x}=n,{variant:S}=a()??{},C=t(`Table`,a()),[w,T]=c(g);s(()=>{T(g)},[g]);let E=()=>{w?(T(!1),y?.()):(T(!0),b?.())},D=_?{bg:`skyBlue.selected`}:{};return x.children=d(l,{children:[v!==void 0&&u(o,{maxW:16,px:0,textAlign:`center`,children:v?u(i,{icon:p(w),onClick:E,variant:`subtleBlue`}):null}),x.children]}),d(l,{children:[u(m,{className:e(f,`${f}-${w?`expanded`:`collapsed`}`,h),"data-selected":!!_,"data-variant":S,ref:r,...C.tr,...D,...x}),w&&v]})});h.displayName=`Tr`;var g=h;export{h as Tr,m as TrBase,g as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/** Displays Table row that can contain heading or data cells. */
+const Tr = vui((props, ref) => {
+	const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded,...rest } = props;
+	const { variant } = useTableContext() ?? {};
+	const styles = useStyleConfig("Table", useTableContext());
+	const [isExpanded, setIsExpanded] = useState(isExpandedProp);
+	useEffect(() => {
+		setIsExpanded(isExpandedProp);
+	}, [isExpandedProp]);
+	const onToggle = () => {
+		if (isExpanded) {
+			setIsExpanded(false);
+			onCollapsed?.();
+		} else {
+			setIsExpanded(true);
+			onExpanded?.();
+		}
+	};
+	const selectedProps = isSelected ? { bg: "skyBlue.selected" } : {};
+	rest.children = /* @__PURE__ */ jsxs(Fragment$1, { children: [nested !== void 0 && /* @__PURE__ */ jsx(td_default, {
+		maxW: 16,
+		px: 0,
+		textAlign: "center",
+		children: nested ? /* @__PURE__ */ jsx(button_default, {
+			icon: buttonClassName(isExpanded),
+			onClick: onToggle,
+			variant: "subtleBlue"
+		}) : null
+	}), rest.children] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TrBase, {
+		className: cs(trClassName, `${trClassName}-${isExpanded ? "expanded" : "collapsed"}`, className),
+		"data-selected": Boolean(isSelected),
+		"data-variant": variant,
+		ref,
+		...styles.tr,
+		...selectedProps,
+		...rest
+	}), isExpanded && nested] });
+});
+Tr.displayName = "Tr";
+var tr_default = Tr;
+
+//#endregion
+export { Tr, TrBase, tr_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=tr.js.map

package/dist/table/tr.js.map

@@ -1 +1 @@
-{"version":3,"file":"tr.js","names":["Td","Button"],"sources":["../../src/table/tr.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TrProps } from './table.types'\nimport Td from './td'\n\nconst trClassName = 'vui-tr'\nconst buttonClassName = (isExpanded?: boolean) => `falAngle${isExpanded ? 'Down' : 'Right'}`\n\nexport const TrBase = styled.trBox`\n  position: relative;\n  transition-duration: fast;\n`\n\n/** Displays Table row that can contain heading or data cells. */\nexport const Tr = vui<'tr', TrProps>((props, ref) => {\n  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props\n  const { variant } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n  const [isExpanded, setIsExpanded] = useState(isExpandedProp)\n\n  useEffect(() => {\n    setIsExpanded(isExpandedProp)\n  }, [isExpandedProp])\n\n  const onToggle = () => {\n    if (isExpanded) {\n      setIsExpanded(false)\n      onCollapsed?.()\n    } else {\n      setIsExpanded(true)\n      onExpanded?.()\n    }\n  }\n\n  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}\n\n  rest.children = (\n    <>\n      {nested !== undefined && (\n        <Td maxW={16} px={0} textAlign=\"center\">\n          {nested ? <Button icon={buttonClassName(isExpanded)} onClick={onToggle} variant=\"subtleBlue\" /> : null}\n        </Td>\n      )}\n      {rest.children}\n    </>\n  )\n\n  return (\n    <>\n      <TrBase\n        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}\n        data-selected={Boolean(isSelected)}\n        data-variant={variant}\n        ref={ref}\n        {...styles.tr}\n        {...selectedProps}\n        {...rest}\n      />\n      {isExpanded && nested}\n    </>\n  )\n})\n\nTr.displayName = 'Tr'\nexport default Tr\n"],"mappings":"mYASA,MAAM,EAAc,SACd,EAAmB,GAAyB,WAAW,EAAa,OAAS,UAEtE,EAAS,EAAO,KAAK;;;EAMrB,EAAK,GAAoB,EAAO,IAAQ,CACnD,GAAM,CAAE,YAAW,WAAY,EAAgB,aAAY,SAAQ,cAAa,aAAY,GAAG,GAAS,EAClG,CAAE,WAAY,GAAiB,EAAI,EAAE,CACrC,EAAS,EAAe,QAAS,GAAiB,CAAC,CACnD,CAAC,EAAY,GAAiB,EAAS,EAAe,CAE5D,MAAgB,CACd,EAAc,EAAe,EAC5B,CAAC,EAAe,CAAC,CAEpB,IAAM,MAAiB,CACjB,GACF,EAAc,GAAM,CACpB,KAAe,GAEf,EAAc,GAAK,CACnB,KAAc,GAIZ,EAAgB,EAAa,CAAE,GAAI,mBAAoB,CAAG,EAAE,CAalE,MAXA,GAAK,SACH,EAAA,EAAA,CAAA,SAAA,CACG,IAAW,IAAA,IACV,EAACA,EAAAA,CAAG,KAAM,GAAI,GAAI,EAAG,UAAU,kBAC5B,EAAS,EAACC,EAAAA,CAAO,KAAM,EAAgB,EAAW,CAAE,QAAS,EAAU,QAAQ,cAAe,CAAG,MAC/F,CAEN,EAAK,SAAA,CAAA,CACL,CAIH,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CACC,UAAW,EAAG,EAAa,GAAG,EAAY,GAAG,EAAa,WAAa,cAAe,EAAU,CAChG,gBAAe,EAAQ,EACvB,eAAc,EACT,MACL,GAAI,EAAO,GACX,GAAI,EACJ,GAAI,GACJ,CACD,GAAc,EAAA,CAAA,CACd,EAEL,CAEF,EAAG,YAAc,KACjB,IAAA,EAAe"}
+{"version":3,"file":"tr.js","names":["Td","Button"],"sources":["../../src/table/tr.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport Button from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useTableContext } from './context'\nimport type { TrProps } from './table.types'\nimport Td from './td'\n\nconst trClassName = 'vui-tr'\nconst buttonClassName = (isExpanded?: boolean) => `falAngle${isExpanded ? 'Down' : 'Right'}`\n\nexport const TrBase = styled.trBox`\n  position: relative;\n  transition-duration: fast;\n`\n\n/** Displays Table row that can contain heading or data cells. */\nexport const Tr = vui<'tr', TrProps>((props, ref) => {\n  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props\n  const { variant } = useTableContext() ?? {}\n  const styles = useStyleConfig('Table', useTableContext())\n  const [isExpanded, setIsExpanded] = useState(isExpandedProp)\n\n  useEffect(() => {\n    setIsExpanded(isExpandedProp)\n  }, [isExpandedProp])\n\n  const onToggle = () => {\n    if (isExpanded) {\n      setIsExpanded(false)\n      onCollapsed?.()\n    } else {\n      setIsExpanded(true)\n      onExpanded?.()\n    }\n  }\n\n  const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}\n\n  rest.children = (\n    <>\n      {nested !== undefined && (\n        <Td maxW={16} px={0} textAlign=\"center\">\n          {nested ? <Button icon={buttonClassName(isExpanded)} onClick={onToggle} variant=\"subtleBlue\" /> : null}\n        </Td>\n      )}\n      {rest.children}\n    </>\n  )\n\n  return (\n    <>\n      <TrBase\n        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}\n        data-selected={Boolean(isSelected)}\n        data-variant={variant}\n        ref={ref}\n        {...styles.tr}\n        {...selectedProps}\n        {...rest}\n      />\n      {isExpanded && nested}\n    </>\n  )\n})\n\nTr.displayName = 'Tr'\nexport default Tr\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc;AACpB,MAAM,mBAAmB,eAAyB,WAAW,aAAa,SAAS;AAEnF,MAAa,SAAS,OAAO,KAAK;;;;;AAMlC,MAAa,KAAK,KAAoB,OAAO,QAAQ;CACnD,MAAM,EAAE,WAAW,YAAY,gBAAgB,YAAY,QAAQ,aAAa,WAAY,GAAG,SAAS;CACxG,MAAM,EAAE,YAAY,iBAAiB,IAAI,EAAE;CAC3C,MAAM,SAAS,eAAe,SAAS,iBAAiB,CAAC;CACzD,MAAM,CAAC,YAAY,iBAAiB,SAAS,eAAe;AAE5D,iBAAgB;AACd,gBAAc,eAAe;IAC5B,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB;AACrB,MAAI,YAAY;AACd,iBAAc,MAAM;AACpB,kBAAe;SACV;AACL,iBAAc,KAAK;AACnB,iBAAc;;;CAIlB,MAAM,gBAAgB,aAAa,EAAE,IAAI,oBAAoB,GAAG,EAAE;AAElE,MAAK,WACH,8CACG,WAAW,UACV,oBAACA;EAAG,MAAM;EAAI,IAAI;EAAG,WAAU;YAC5B,SAAS,oBAACC;GAAO,MAAM,gBAAgB,WAAW;GAAE,SAAS;GAAU,SAAQ;IAAe,GAAG;GAC/F,EAEN,KAAK,YACL;AAGL,QACE,8CACE,oBAAC;EACC,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,aAAa,eAAe,UAAU;EAChG,iBAAe,QAAQ,WAAW;EAClC,gBAAc;EACT;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;GACJ,EACD,cAAc,UACd;EAEL;AAEF,GAAG,cAAc;AACjB,iBAAe"}

package/dist/table/useTable.d.ts

@@ -1,5 +1,6 @@
 import { Sort } from "../utils/types.js";
 import { UseTableProps } from "./useTable.types.js";
+import "../index.js";
 
 //#region src/table/useTable.d.ts
 /** Handles controlled/uncontrolled sort of the Table rows. */

package/dist/table/useTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.d.ts","names":[],"sources":["../../src/table/useTable.ts"],"sourcesContent":[],"mappings":";;;;;iBAawB,QAAA,QAAgB;;EAAhB,YAAQ,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAAA,IAAA,CAAA,CAAqB,IAArB;;AAAqB,IAAA,CAgBzC,kBAAA,CAAA,CAAA,CAAqB,UAhBoB,CAAA,MAAA,CAgBF,QAhBE,CAAA"}
+{"version":3,"file":"useTable.d.ts","names":[],"sources":["../../src/table/useTable.ts"],"sourcesContent":[],"mappings":";;;;;;iBAawB,QAAA,QAAgB;;;EAAhB,IAAA,CAAA,CAA6B,IAArB;AAgBhC,CAAA;KAAY,kBAAA,CAAA,CAAA,CAAqB,kBAAkB"}

package/dist/table/useTable.js

@@ -1,2 +1,40 @@
-import{useCallbackRef as e,useControlled as t}from"../utils/react.js";const n=[`asc`,`desc`,null],r=n[0];function i(e){let t=n.indexOf(e)+1;return n[t]===void 0?r:n[t]}function a(n){let{defaultSort:a={key:``,order:r},onSortChange:o,sort:s}=n,[c,l,{isControlled:u}]=t({defaultValue:a,onChange:o,value:s});return{isControlled:u,onSortChange:e(e=>{l({key:e,order:c.key===e?i(c.order):r})}),sort:c}}export{a as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { useCallbackRef, useControlled } from "../utils/react.js";
+
+//#region src/table/useTable.ts
+const sortOrders = [
+	"asc",
+	"desc",
+	null
+];
+const defaultSortOrder = sortOrders[0];
+function getNextOrder(order) {
+	const next = sortOrders.indexOf(order) + 1;
+	return sortOrders[next] !== void 0 ? sortOrders[next] : defaultSortOrder;
+}
+/** Handles controlled/uncontrolled sort of the Table rows. */
+function useTable(props) {
+	const { defaultSort = {
+		key: "",
+		order: defaultSortOrder
+	}, onSortChange: onSortChangeProp, sort: value } = props;
+	const [sort, onChange, { isControlled }] = useControlled({
+		defaultValue: defaultSort,
+		onChange: onSortChangeProp,
+		value
+	});
+	return {
+		isControlled,
+		onSortChange: useCallbackRef((key) => {
+			onChange({
+				key,
+				order: sort.key === key ? getNextOrder(sort.order) : defaultSortOrder
+			});
+		}),
+		sort
+	};
+}
+
+//#endregion
+export { useTable as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=useTable.js.map

package/dist/table/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","names":["sortOrders: SortOrder[]","defaultSortOrder: SortOrder"],"sources":["../../src/table/useTable.ts"],"sourcesContent":["import type { SortOrder } from '../utils'\nimport { useCallbackRef, useControlled } from '../utils'\nimport type { UseTableProps } from './useTable.types'\n\nconst sortOrders: SortOrder[] = ['asc', 'desc', null]\nconst defaultSortOrder: SortOrder = sortOrders[0]\n\nfunction getNextOrder(order: SortOrder) {\n  const next = sortOrders.indexOf(order) + 1\n  return sortOrders[next] !== undefined ? sortOrders[next] : defaultSortOrder\n}\n\n/** Handles controlled/uncontrolled sort of the Table rows. */\nexport default function useTable(props: UseTableProps) {\n  const { defaultSort = { key: '', order: defaultSortOrder }, onSortChange: onSortChangeProp, sort: value } = props\n  const [sort, onChange, { isControlled }] = useControlled({\n    defaultValue: defaultSort,\n    onChange: onSortChangeProp,\n    value,\n  })\n\n  const onSortChange = useCallbackRef((key: string) => {\n    const order = sort.key === key ? getNextOrder(sort.order) : defaultSortOrder\n    onChange({ key, order })\n  })\n\n  return { isControlled, onSortChange, sort }\n}\n\nexport type UseTableReturnType = ReturnType<typeof useTable>\n"],"mappings":"sEAIA,MAAMA,EAA0B,CAAC,MAAO,OAAQ,KAAK,CAC/CC,EAA8B,EAAW,GAE/C,SAAS,EAAa,EAAkB,CACtC,IAAM,EAAO,EAAW,QAAQ,EAAM,CAAG,EACzC,OAAO,EAAW,KAAU,IAAA,GAA+B,EAAnB,EAAW,GAIrD,SAAwB,EAAS,EAAsB,CACrD,GAAM,CAAE,cAAc,CAAE,IAAK,GAAI,MAAO,EAAkB,CAAE,aAAc,EAAkB,KAAM,GAAU,EACtG,CAAC,EAAM,EAAU,CAAE,iBAAkB,EAAc,CACvD,aAAc,EACd,SAAU,EACV,QACD,CAAC,CAOF,MAAO,CAAE,eAAc,aALF,EAAgB,GAAgB,CAEnD,EAAS,CAAE,MAAK,MADF,EAAK,MAAQ,EAAM,EAAa,EAAK,MAAM,CAAG,EACrC,CAAC,EACxB,CAEmC,OAAM"}
+{"version":3,"file":"useTable.js","names":["sortOrders: SortOrder[]","defaultSortOrder: SortOrder"],"sources":["../../src/table/useTable.ts"],"sourcesContent":["import type { SortOrder } from '../utils'\nimport { useCallbackRef, useControlled } from '../utils'\nimport type { UseTableProps } from './useTable.types'\n\nconst sortOrders: SortOrder[] = ['asc', 'desc', null]\nconst defaultSortOrder: SortOrder = sortOrders[0]\n\nfunction getNextOrder(order: SortOrder) {\n  const next = sortOrders.indexOf(order) + 1\n  return sortOrders[next] !== undefined ? sortOrders[next] : defaultSortOrder\n}\n\n/** Handles controlled/uncontrolled sort of the Table rows. */\nexport default function useTable(props: UseTableProps) {\n  const { defaultSort = { key: '', order: defaultSortOrder }, onSortChange: onSortChangeProp, sort: value } = props\n  const [sort, onChange, { isControlled }] = useControlled({\n    defaultValue: defaultSort,\n    onChange: onSortChangeProp,\n    value,\n  })\n\n  const onSortChange = useCallbackRef((key: string) => {\n    const order = sort.key === key ? getNextOrder(sort.order) : defaultSortOrder\n    onChange({ key, order })\n  })\n\n  return { isControlled, onSortChange, sort }\n}\n\nexport type UseTableReturnType = ReturnType<typeof useTable>\n"],"mappings":";;;AAIA,MAAMA,aAA0B;CAAC;CAAO;CAAQ;CAAK;AACrD,MAAMC,mBAA8B,WAAW;AAE/C,SAAS,aAAa,OAAkB;CACtC,MAAM,OAAO,WAAW,QAAQ,MAAM,GAAG;AACzC,QAAO,WAAW,UAAU,SAAY,WAAW,QAAQ;;;AAI7D,SAAwB,SAAS,OAAsB;CACrD,MAAM,EAAE,cAAc;EAAE,KAAK;EAAI,OAAO;EAAkB,EAAE,cAAc,kBAAkB,MAAM,UAAU;CAC5G,MAAM,CAAC,MAAM,UAAU,EAAE,kBAAkB,cAAc;EACvD,cAAc;EACd,UAAU;EACV;EACD,CAAC;AAOF,QAAO;EAAE;EAAc,cALF,gBAAgB,QAAgB;AAEnD,YAAS;IAAE;IAAK,OADF,KAAK,QAAQ,MAAM,aAAa,KAAK,MAAM,GAAG;IACrC,CAAC;IACxB;EAEmC;EAAM"}

package/dist/table/useTable.types.d.ts

@@ -1,4 +1,5 @@
 import { Sort } from "../utils/types.js";
+import "../utils/index.js";
 
 //#region src/table/useTable.types.d.ts
 type UseTableProps = {

package/dist/table/useTable.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.types.d.ts","names":[],"sources":["../../src/table/useTable.types.ts"],"sourcesContent":[],"mappings":";;;KAEY,aAAA,CAAA,CAAA;;EAAA,WAAA,CAAA,CAAA,CAEI,IAFS;EAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,MAAA,CAAA,IAAA,CAAA,OAAA,CAAA,KAAA,CAAA,IAAA,CAAA,IAAA,CAAA,OAAA,CAAA,CAAA,CAAA;cAET,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAEQ,IAFR,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;;MAIP,CAAA,CAAA,CAAA,IAAA;CAAI"}
+{"version":3,"file":"useTable.types.d.ts","names":[],"sources":["../../src/table/useTable.types.ts"],"sourcesContent":[],"mappings":";;;;KAEY,aAAA,CAAA,CAAA;;gBAEI;EAFJ,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,MAAA,CAAA,IAAA,CAAA,OAAA,CAAA,KAAA,CAAA,IAAA,CAAA,IAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAEI,YAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAEQ,IAFR,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAEQ,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,KAAA,CAAA,EAAA,CAAA,UAAA,CAAA,IAAA,CAAA,CAAA,CAAA;EAEf,IAAA,CAAA,CAAA,CAAA,IAAA;CAAI"}

package/dist/tabs/consts.js

@@ -1,2 +1,20 @@
-const e={activeBg:`skyBlue.main`,border:`sandstone.main`,color:`sandstone.10`,hover:`skyBlue.hover`,main:`seaBlue.main`},t={sm:`xs`,md:`sm`,lg:`md`,xl:`lg`,xxl:`xl`};export{e as colors,t as iconSizeMapper};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+//#region src/tabs/consts.ts
+const colors = {
+	activeBg: "skyBlue.main",
+	border: "sandstone.main",
+	color: "sandstone.10",
+	hover: "skyBlue.hover",
+	main: "seaBlue.main"
+};
+const iconSizeMapper = {
+	sm: "xs",
+	md: "sm",
+	lg: "md",
+	xl: "lg",
+	xxl: "xl"
+};
+
+//#endregion
+export { colors, iconSizeMapper };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=consts.js.map

package/dist/tabs/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":["iconSizeMapper: Dict"],"sources":["../../src/tabs/consts.ts"],"sourcesContent":["import type { Dict } from '../utils'\n\nexport const colors = {\n  activeBg: 'skyBlue.main',\n  border: 'sandstone.main',\n  color: 'sandstone.10',\n  hover: 'skyBlue.hover',\n  main: 'seaBlue.main',\n}\n\nexport const iconSizeMapper: Dict = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'xl',\n}\n"],"mappings":"AAEA,MAAa,EAAS,CACpB,SAAU,eACV,OAAQ,iBACR,MAAO,eACP,MAAO,gBACP,KAAM,eACP,CAEYA,EAAuB,CAClC,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,IAAK,KACN"}
+{"version":3,"file":"consts.js","names":["iconSizeMapper: Dict"],"sources":["../../src/tabs/consts.ts"],"sourcesContent":["import type { Dict } from '../utils'\n\nexport const colors = {\n  activeBg: 'skyBlue.main',\n  border: 'sandstone.main',\n  color: 'sandstone.10',\n  hover: 'skyBlue.hover',\n  main: 'seaBlue.main',\n}\n\nexport const iconSizeMapper: Dict = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n  xxl: 'xl',\n}\n"],"mappings":";AAEA,MAAa,SAAS;CACpB,UAAU;CACV,QAAQ;CACR,OAAO;CACP,OAAO;CACP,MAAM;CACP;AAED,MAAaA,iBAAuB;CAClC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;CACN"}

package/dist/tabs/index.d.ts

@@ -0,0 +1,3 @@
+import { AnimationDirection, NavBarIconSize, TabIndexProps, TabNavBarProps, TabProps, TabsProps, TabsSize } from "./tabs.types.js";
+import { Tabs, TabsBase } from "./tabs.js";
+import { Tab, TabBase } from "./tab.js";

package/dist/tabs/tab.d.ts

@@ -1,10 +1,11 @@
 import { SystemProps } from "../system/system.js";
 import { VuiComponent } from "../core/vui.js";
 import { TabProps } from "./tabs.types.js";
-import * as styled_components420 from "styled-components";
+import "../index.js";
+import * as styled_components439 from "styled-components";
 
 //#region src/tabs/tab.d.ts
-declare const TabBase: styled_components420.StyledComponent<"div", styled_components420.DefaultTheme, SystemProps, never>;
+declare const TabBase: styled_components439.StyledComponent<"div", styled_components439.DefaultTheme, SystemProps, never>;
 /**
  * Implements a Tab component
  */

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

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","names":[],"sources":["../../src/tabs/tab.tsx"],"sourcesContent":[],"mappings":";;;;;;cAIa,SAAO,oBAAA,CAAA,uBAEnB,oBAAA,CAFmB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;cAOP,KAAG,oBAAA"}
+{"version":3,"file":"tab.d.ts","names":[],"sources":["../../src/tabs/tab.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAIa,SAAO,oBAAA,CAAA,uBAEnB,oBAAA,CAFmB,YAAA,CAAA,CAAA,WAAA,CAAA;;;;cAOP,KAAG,oBAAA"}

package/dist/tabs/tab.js

@@ -1,4 +1,24 @@
-import{cs as e}from"../utils/styles.js";import{styled as t}from"../core/styled.js";import{vui as n}from"../core/vui.js";import{jsx as r}from"react/jsx-runtime";const i=t.divBox`
+import { cs } from "../utils/styles.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/tabs/tab.tsx
+const TabBase = styled.divBox`
   width: 100%;
-`,a=n(({children:t,className:n},a)=>r(i,{className:e(`vui-tab`,n),ref:a,children:t}));a.displayName=`Tab`;var o=a;export{a as Tab,i as TabBase,o as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/**
+* Implements a Tab component
+*/
+const Tab = vui(({ children, className }, ref) => /* @__PURE__ */ jsx(TabBase, {
+	className: cs("vui-tab", className),
+	ref,
+	children
+}));
+Tab.displayName = "Tab";
+var tab_default = Tab;
+
+//#endregion
+export { Tab, TabBase, tab_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=tab.js.map

package/dist/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","names":[],"sources":["../../src/tabs/tab.tsx"],"sourcesContent":["import { styled, vui } from '../core'\nimport { cs } from '../utils'\nimport type { TabProps } from './tabs.types'\n\nexport const TabBase = styled.divBox`\n  width: 100%;\n`\n\n/**\n * Implements a Tab component\n */\nexport const Tab = vui<'div', TabProps>(({ children, className }, ref) => (\n  <TabBase className={cs('vui-tab', className)} ref={ref}>\n    {children}\n  </TabBase>\n))\n\nTab.displayName = 'Tab'\n\nexport default Tab\n"],"mappings":"gKAIA,MAAa,EAAU,EAAO,MAAM;;EAOvB,EAAM,GAAsB,CAAE,WAAU,aAAa,IAChE,EAAC,EAAA,CAAQ,UAAW,EAAG,UAAW,EAAU,CAAO,MAChD,YACO,CACV,CAEF,EAAI,YAAc,MAElB,IAAA,EAAe"}
+{"version":3,"file":"tab.js","names":[],"sources":["../../src/tabs/tab.tsx"],"sourcesContent":["import { styled, vui } from '../core'\nimport { cs } from '../utils'\nimport type { TabProps } from './tabs.types'\n\nexport const TabBase = styled.divBox`\n  width: 100%;\n`\n\n/**\n * Implements a Tab component\n */\nexport const Tab = vui<'div', TabProps>(({ children, className }, ref) => (\n  <TabBase className={cs('vui-tab', className)} ref={ref}>\n    {children}\n  </TabBase>\n))\n\nTab.displayName = 'Tab'\n\nexport default Tab\n"],"mappings":";;;;;;AAIA,MAAa,UAAU,OAAO,MAAM;;;;;;AAOpC,MAAa,MAAM,KAAsB,EAAE,UAAU,aAAa,QAChE,oBAAC;CAAQ,WAAW,GAAG,WAAW,UAAU;CAAO;CAChD;EACO,CACV;AAEF,IAAI,cAAc;AAElB,kBAAe"}

package/dist/tabs/tabs.d.ts

@@ -18,12 +18,13 @@ import { ColorProps, FontFamilyProps, FontSizeProps, FontStyleProps, FontWeightP
 import { ChildrenProp } from "../core/types.js";
 import { VuiComponent } from "../core/vui.js";
 import { TabsProps } from "./tabs.types.js";
-import * as react952 from "react";
-import * as styled_components418 from "styled-components";
+import "../index.js";
+import * as react955 from "react";
+import * as styled_components437 from "styled-components";
 
 //#region src/tabs/tabs.d.ts
-declare const TabsBase: styled_components418.StyledComponent<"div", styled_components418.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & ThemingProps<"Tabs"> & ChildrenProp & {
-  actions?: react952.ReactNode;
+declare const TabsBase: styled_components437.StyledComponent<"div", styled_components437.DefaultTheme, AnimationProps & BackgroundColorProps & BorderProps & BorderTopProps & BorderRightProps & BorderBottomProps & BorderLeftProps & BorderColorProps & BorderTopColorProps & BorderRightColorProps & BorderBottomColorProps & BorderLeftColorProps & BorderWidthProps & BorderTopWidthProps & BorderRightWidthProps & BorderBottomWidthProps & BorderLeftWidthProps & BorderStyleProps & BorderRadiusProps & OutlineProps & OutlineColorProps & OutlineWidthProps & OutlineStyleProps & DivideXProps & DivideYProps & DivideXReverseProps & DivideYReverseProps & DivideColorProps & DivideStyleProps & RingProps & RingColorProps & OpacityProps & BoxShadowProps & TextShadowProps & DisplayProps & AlignItemsProps & AlignContentProps & JustifyContentProps & JustifyItemsProps & FlexWrapProps & FlexGrowProps & FlexShrinkProps & FlexBasisProps & FlexDirectionProps & FlexProps & JustifySelfProps & AlignSelfProps & OrderProps & RowProps & ColProps & GapProps & ColumnGapProps & RowGapProps & GridColumnProps & GridRowProps & GridAutoFlowProps & GridAutoColumnsProps & GridAutoRowsProps & GridTemplateColumnsProps & GridTemplateRowsProps & GridTemplateAreasProps & GridAreaProps & AppearanceProps & CursorProps & PointerEventsProps & ResizeProps & UserSelectProps & IsTruncatedProps & FloatProps & BoxSizingProps & OverflowProps & OverflowXProps & OverflowYProps & PositionProps & ZIndexProps & TopProps & RightProps & BottomProps & LeftProps & VisibilityProps & OverscrollBehaviorProps & ObjectFitProps & MaxLinesProps & WidthProps & HeightProps & MaxWidthProps & MaxHeightProps & MinWidthProps & MinHeightProps & MarginProps & MarginTopProps & MarginRightProps & MarginBottomProps & MarginLeftProps & MarginXProps & MarginYProps & PaddingProps & PaddingTopProps & PaddingRightProps & PaddingBottomProps & PaddingLeftProps & PaddingXProps & PaddingYProps & SpaceXProps & SpaceYProps & SpaceXReverseProps & SpaceYReverseProps & BorderCollapseProps & TableLayoutProps & TransformProps & TransformOriginProps & TranslateXProps & TranslateYProps & RotateProps & SkewXProps & SkewYProps & ScaleProps & ScaleXProps & ScaleYProps & TransitionProps & TransitionPropertyProps & TransitionDurationProps & TransitionTimingFunctionProps & TransitionDelayProps & FontFamilyProps & FontSizeProps & FontStyleProps & FontWeightProps & LineHeightProps & ColorProps & TextTransformProps & TextDecorationProps & TextAlignProps & VerticalAlignProps & LetterSpacingProps & WhiteSpaceProps & TextOverflowProps & ListStyleTypeProps & ListStylePositionProps & WordBreakProps & ThemingProps<"Tabs"> & ChildrenProp & {
+  actions?: react955.ReactNode;
   activeTabId?: number | string;
   showBorder?: boolean;
   onTabClick?: (id?: number | string) => void;

package/dist/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/tabs/tabs.js

@@ -1,4 +1,82 @@
-import{cs as e}from"../utils/styles.js";import{useStyleConfig as t}from"../core/theme.js";import{styled as n}from"../core/styled.js";import{vui as r}from"../core/vui.js";import{P as i}from"../p/p.js";import a from"./tab.js";import o from"./tabsNavBar.js";import{useTabsState as s}from"./useTabsState.js";import{Children as c,useEffect as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";const f=n.divBox`
+import { cs } from "../utils/styles.js";
+import { useStyleConfig } from "../core/theme.js";
+import { styled } from "../core/styled.js";
+import { vui } from "../core/vui.js";
+import { P } from "../p/p.js";
+import tab_default from "./tab.js";
+import tabsNavBar_default from "./tabsNavBar.js";
+import { useTabsState } from "./useTabsState.js";
+import { Children, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/tabs/tabs.tsx
+const TabsBase = styled.divBox`
   width: 100%;
-`,p=r((n,r)=>{let{actions:p,activeTabId:m,showBorder:h=!0,children:g,className:_,size:v,onTabClick:y,...b}=n,x=t(`Tabs`,n),{tabs:S,setTabs:C,activeTabIndex:w,setActiveTabIndex:T,animationDirection:E,setAnimationDirection:D}=s(`fadeIn`,0);l(()=>{let e=[];if(g&&c.toArray(g).forEach((t,n)=>{t?.props?.title&&e.push({id:t.props.id,index:n,title:t.props.title,icon:t.props.icon,className:t.props.className,children:t.props.children,disabled:t.props.disabled,onClick:t.props.onClick,onDelete:t.props.onDelete})}),C(e),m!==void 0){let t=e.find(e=>e?.id===m||e?.index===m);t?.index!==void 0&&T(t.index)}},[g,m]);let O=(e,t)=>{let n=S.find(t=>t.index===e);n?.children!==void 0&&n?.index!==void 0&&(D(n.index<w?`fadeLeft`:`fadeRight`),T(n.index),y?.(n.id||n.index)),n?.onClick?.(t)},k=S?.[w];return d(f,{className:e(`vui-tabs`,_),ref:r,...x.container,...b,children:[!!S?.length&&u(o,{actions:p,activeNavItem:w,animationDirection:E,onNavItemClick:(e,t)=>O(e,t),showBorder:h,size:v,tabs:S}),S?.length?u(a,{onClick:k?.onClick,title:k?.title,children:!k?.disabled&&k?.children}):u(i,{p:2,children:`Please specify Tabs.`})]})});p.displayName=`Tabs`;export{p as Tabs,f as TabsBase};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+/**
+* Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
+*/
+const Tabs = vui((props, ref) => {
+	const { actions, activeTabId, showBorder = true, children, className, size, onTabClick,...rest } = props;
+	const styles = useStyleConfig("Tabs", props);
+	const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState("fadeIn", 0);
+	useEffect(() => {
+		const _tabs = [];
+		if (children) Children.toArray(children).forEach((child, index) => {
+			if (child?.props?.title) _tabs.push({
+				id: child.props.id,
+				index,
+				title: child.props.title,
+				icon: child.props.icon,
+				className: child.props.className,
+				children: child.props.children,
+				disabled: child.props.disabled,
+				onClick: child.props.onClick,
+				onDelete: child.props.onDelete
+			});
+		});
+		setTabs(_tabs);
+		if (activeTabId !== void 0) {
+			const tab = _tabs.find((t) => t?.id === activeTabId || t?.index === activeTabId);
+			if (tab?.index !== void 0) setActiveTabIndex(tab.index);
+		}
+	}, [children, activeTabId]);
+	const onNavItemClick = (tabIndex, e) => {
+		const tab = tabs.find((t) => t.index === tabIndex);
+		if (tab?.children !== void 0 && tab?.index !== void 0) {
+			setAnimationDirection(tab.index < activeTabIndex ? "fadeLeft" : "fadeRight");
+			setActiveTabIndex(tab.index);
+			onTabClick?.(tab.id || tab.index);
+		}
+		tab?.onClick?.(e);
+	};
+	const activeTab = tabs?.[activeTabIndex];
+	return /* @__PURE__ */ jsxs(TabsBase, {
+		className: cs("vui-tabs", className),
+		ref,
+		...styles.container,
+		...rest,
+		children: [!!tabs?.length && /* @__PURE__ */ jsx(tabsNavBar_default, {
+			actions,
+			activeNavItem: activeTabIndex,
+			animationDirection,
+			onNavItemClick: (tabIndex, e) => onNavItemClick(tabIndex, e),
+			showBorder,
+			size,
+			tabs
+		}), tabs?.length ? /* @__PURE__ */ jsx(tab_default, {
+			onClick: activeTab?.onClick,
+			title: activeTab?.title,
+			children: !activeTab?.disabled && activeTab?.children
+		}) : /* @__PURE__ */ jsx(P, {
+			p: 2,
+			children: "Please specify Tabs."
+		})]
+	});
+});
+Tabs.displayName = "Tabs";
+
+//#endregion
+export { Tabs, TabsBase };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=tabs.js.map

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["_tabs: TabIndexProps[]","TabsNavBar","Tab"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect } from 'react'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { P } from '../p'\nimport { cs } from '../utils'\nimport Tab from './tab'\nimport type { TabIndexProps, TabProps, TabsProps } from './tabs.types'\nimport TabsNavBar from './tabsNavBar'\nimport { useTabsState } from './useTabsState'\n\nexport const TabsBase = styled.divBox<TabsProps>`\n  width: 100%;\n`\n\n/**\n * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**\n */\nexport const Tabs = vui<'div', TabsProps>((props, ref) => {\n  const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props\n  const styles = useStyleConfig('Tabs', props)\n  const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(\n    'fadeIn',\n    0,\n  )\n\n  useEffect(() => {\n    const _tabs: TabIndexProps[] = []\n    if (children) {\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {\n        if (child?.props?.title)\n          _tabs.push({\n            id: child.props.id,\n            index: index,\n            title: child.props.title,\n            icon: child.props.icon,\n            className: child.props.className,\n            children: child.props.children,\n            disabled: child.props.disabled,\n            onClick: child.props.onClick,\n            onDelete: child.props.onDelete,\n          })\n      })\n    }\n    setTabs(_tabs)\n    if (activeTabId !== undefined) {\n      const tab = _tabs.find((t: TabIndexProps) => t?.id === activeTabId || t?.index === activeTabId)\n      if (tab?.index !== undefined) setActiveTabIndex(tab.index)\n    }\n  }, [children, activeTabId])\n\n  const onNavItemClick = (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n    const tab = tabs.find(t => t.index === tabIndex)\n    if (tab?.children !== undefined && tab?.index !== undefined) {\n      setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight')\n      setActiveTabIndex(tab.index)\n      onTabClick?.(tab.id || tab.index)\n    }\n    tab?.onClick?.(e)\n  }\n\n  const activeTab = tabs?.[activeTabIndex]\n\n  return (\n    <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>\n      {!!tabs?.length && (\n        <TabsNavBar\n          actions={actions}\n          activeNavItem={activeTabIndex}\n          animationDirection={animationDirection}\n          onNavItemClick={(tabIndex, e) => onNavItemClick(tabIndex, e)}\n          showBorder={showBorder}\n          size={size}\n          tabs={tabs}\n        />\n      )}\n      {tabs?.length ? (\n        <Tab onClick={activeTab?.onClick} title={activeTab?.title}>\n          {!activeTab?.disabled && activeTab?.children}\n        </Tab>\n      ) : (\n        <P p={2}>Please specify Tabs.</P>\n      )}\n    </TabsBase>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\nexport default Tabs\n"],"mappings":"kZAWA,MAAa,EAAW,EAAO,MAAiB;;EAOnC,EAAO,GAAuB,EAAO,IAAQ,CACxD,GAAM,CAAE,UAAS,cAAa,aAAa,GAAM,WAAU,YAAW,OAAM,aAAY,GAAG,GAAS,EAC9F,EAAS,EAAe,OAAQ,EAAM,CACtC,CAAE,OAAM,UAAS,iBAAgB,oBAAmB,qBAAoB,yBAA0B,EACtG,SACA,EACD,CAED,MAAgB,CACd,IAAMA,EAAyB,EAAE,CAkBjC,GAjBI,GACA,EAAS,QAAQ,EAAS,CAAoB,SAAS,EAA+B,IAAkB,CACpG,GAAO,OAAO,OAChB,EAAM,KAAK,CACT,GAAI,EAAM,MAAM,GACT,QACP,MAAO,EAAM,MAAM,MACnB,KAAM,EAAM,MAAM,KAClB,UAAW,EAAM,MAAM,UACvB,SAAU,EAAM,MAAM,SACtB,SAAU,EAAM,MAAM,SACtB,QAAS,EAAM,MAAM,QACrB,SAAU,EAAM,MAAM,SACvB,CAAC,EACJ,CAEJ,EAAQ,EAAM,CACV,IAAgB,IAAA,GAAW,CAC7B,IAAM,EAAM,EAAM,KAAM,GAAqB,GAAG,KAAO,GAAe,GAAG,QAAU,EAAY,CAC3F,GAAK,QAAU,IAAA,IAAW,EAAkB,EAAI,MAAM,GAE3D,CAAC,EAAU,EAAY,CAAC,CAE3B,IAAM,GAAkB,EAAkB,IAAmD,CAC3F,IAAM,EAAM,EAAK,KAAK,GAAK,EAAE,QAAU,EAAS,CAC5C,GAAK,WAAa,IAAA,IAAa,GAAK,QAAU,IAAA,KAChD,EAAsB,EAAI,MAAQ,EAAiB,WAAa,YAAY,CAC5E,EAAkB,EAAI,MAAM,CAC5B,IAAa,EAAI,IAAM,EAAI,MAAM,EAEnC,GAAK,UAAU,EAAE,EAGb,EAAY,IAAO,GAEzB,OACE,EAAC,EAAA,CAAS,UAAW,EAAG,WAAY,EAAU,CAAO,MAAK,GAAI,EAAO,UAAW,GAAI,YACjF,CAAC,CAAC,GAAM,QACP,EAACC,EAAAA,CACU,UACT,cAAe,EACK,qBACpB,gBAAiB,EAAU,IAAM,EAAe,EAAU,EAAE,CAChD,aACN,OACA,QACN,CAEH,GAAM,OACL,EAACC,EAAAA,CAAI,QAAS,GAAW,QAAS,MAAO,GAAW,eACjD,CAAC,GAAW,UAAY,GAAW,UAChC,CAEN,EAAC,EAAA,CAAE,EAAG,WAAG,wBAAwB,CAAA,EAE1B,EAEb,CAEF,EAAK,YAAc"}
+{"version":3,"file":"tabs.js","names":["_tabs: TabIndexProps[]","TabsNavBar","Tab"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["import type { ReactElement } from 'react'\nimport { Children, useEffect } from 'react'\n\nimport { styled, useStyleConfig, vui } from '../core'\nimport { P } from '../p'\nimport { cs } from '../utils'\nimport Tab from './tab'\nimport type { TabIndexProps, TabProps, TabsProps } from './tabs.types'\nimport TabsNavBar from './tabsNavBar'\nimport { useTabsState } from './useTabsState'\n\nexport const TabsBase = styled.divBox<TabsProps>`\n  width: 100%;\n`\n\n/**\n * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**\n */\nexport const Tabs = vui<'div', TabsProps>((props, ref) => {\n  const { actions, activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props\n  const styles = useStyleConfig('Tabs', props)\n  const { tabs, setTabs, activeTabIndex, setActiveTabIndex, animationDirection, setAnimationDirection } = useTabsState(\n    'fadeIn',\n    0,\n  )\n\n  useEffect(() => {\n    const _tabs: TabIndexProps[] = []\n    if (children) {\n      ;(Children.toArray(children) as ReactElement[]).forEach((child: ReactElement<TabProps>, index: number) => {\n        if (child?.props?.title)\n          _tabs.push({\n            id: child.props.id,\n            index: index,\n            title: child.props.title,\n            icon: child.props.icon,\n            className: child.props.className,\n            children: child.props.children,\n            disabled: child.props.disabled,\n            onClick: child.props.onClick,\n            onDelete: child.props.onDelete,\n          })\n      })\n    }\n    setTabs(_tabs)\n    if (activeTabId !== undefined) {\n      const tab = _tabs.find((t: TabIndexProps) => t?.id === activeTabId || t?.index === activeTabId)\n      if (tab?.index !== undefined) setActiveTabIndex(tab.index)\n    }\n  }, [children, activeTabId])\n\n  const onNavItemClick = (tabIndex: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {\n    const tab = tabs.find(t => t.index === tabIndex)\n    if (tab?.children !== undefined && tab?.index !== undefined) {\n      setAnimationDirection(tab.index < activeTabIndex ? 'fadeLeft' : 'fadeRight')\n      setActiveTabIndex(tab.index)\n      onTabClick?.(tab.id || tab.index)\n    }\n    tab?.onClick?.(e)\n  }\n\n  const activeTab = tabs?.[activeTabIndex]\n\n  return (\n    <TabsBase className={cs('vui-tabs', className)} ref={ref} {...styles.container} {...rest}>\n      {!!tabs?.length && (\n        <TabsNavBar\n          actions={actions}\n          activeNavItem={activeTabIndex}\n          animationDirection={animationDirection}\n          onNavItemClick={(tabIndex, e) => onNavItemClick(tabIndex, e)}\n          showBorder={showBorder}\n          size={size}\n          tabs={tabs}\n        />\n      )}\n      {tabs?.length ? (\n        <Tab onClick={activeTab?.onClick} title={activeTab?.title}>\n          {!activeTab?.disabled && activeTab?.children}\n        </Tab>\n      ) : (\n        <P p={2}>Please specify Tabs.</P>\n      )}\n    </TabsBase>\n  )\n})\n\nTabs.displayName = 'Tabs'\n\nexport default Tabs\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,WAAW,OAAO,MAAiB;;;;;;AAOhD,MAAa,OAAO,KAAuB,OAAO,QAAQ;CACxD,MAAM,EAAE,SAAS,aAAa,aAAa,MAAM,UAAU,WAAW,MAAM,WAAY,GAAG,SAAS;CACpG,MAAM,SAAS,eAAe,QAAQ,MAAM;CAC5C,MAAM,EAAE,MAAM,SAAS,gBAAgB,mBAAmB,oBAAoB,0BAA0B,aACtG,UACA,EACD;AAED,iBAAgB;EACd,MAAMA,QAAyB,EAAE;AACjC,MAAI,SACD,CAAC,SAAS,QAAQ,SAAS,CAAoB,SAAS,OAA+B,UAAkB;AACxG,OAAI,OAAO,OAAO,MAChB,OAAM,KAAK;IACT,IAAI,MAAM,MAAM;IACT;IACP,OAAO,MAAM,MAAM;IACnB,MAAM,MAAM,MAAM;IAClB,WAAW,MAAM,MAAM;IACvB,UAAU,MAAM,MAAM;IACtB,UAAU,MAAM,MAAM;IACtB,SAAS,MAAM,MAAM;IACrB,UAAU,MAAM,MAAM;IACvB,CAAC;IACJ;AAEJ,UAAQ,MAAM;AACd,MAAI,gBAAgB,QAAW;GAC7B,MAAM,MAAM,MAAM,MAAM,MAAqB,GAAG,OAAO,eAAe,GAAG,UAAU,YAAY;AAC/F,OAAI,KAAK,UAAU,OAAW,mBAAkB,IAAI,MAAM;;IAE3D,CAAC,UAAU,YAAY,CAAC;CAE3B,MAAM,kBAAkB,UAAkB,MAAmD;EAC3F,MAAM,MAAM,KAAK,MAAK,MAAK,EAAE,UAAU,SAAS;AAChD,MAAI,KAAK,aAAa,UAAa,KAAK,UAAU,QAAW;AAC3D,yBAAsB,IAAI,QAAQ,iBAAiB,aAAa,YAAY;AAC5E,qBAAkB,IAAI,MAAM;AAC5B,gBAAa,IAAI,MAAM,IAAI,MAAM;;AAEnC,OAAK,UAAU,EAAE;;CAGnB,MAAM,YAAY,OAAO;AAEzB,QACE,qBAAC;EAAS,WAAW,GAAG,YAAY,UAAU;EAAO;EAAK,GAAI,OAAO;EAAW,GAAI;aACjF,CAAC,CAAC,MAAM,UACP,oBAACC;GACU;GACT,eAAe;GACK;GACpB,iBAAiB,UAAU,MAAM,eAAe,UAAU,EAAE;GAChD;GACN;GACA;IACN,EAEH,MAAM,SACL,oBAACC;GAAI,SAAS,WAAW;GAAS,OAAO,WAAW;aACjD,CAAC,WAAW,YAAY,WAAW;IAChC,GAEN,oBAAC;GAAE,GAAG;aAAG;IAAwB;GAE1B;EAEb;AAEF,KAAK,cAAc"}

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

@@ -1,7 +1,10 @@
 import { ThemingProps } from "../theme/types.js";
 import { SystemProps } from "../system/system.js";
+import "../system/index.js";
 import { IconProp } from "../icon/icon.types.js";
+import "../icon/index.js";
 import { ChildrenProp } from "../core/types.js";
+import "../core/index.js";
 import { ReactNode } from "react";
 
 //#region src/tabs/tabs.types.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.types.d.ts","names":[],"sources":["../../src/tabs/tabs.types.ts"],"sourcesContent":[],"mappings":";;;;;;;KAOY,kBAAA,CAAA,CAAA;KACA,QAAA,CAAA,CAAA;AADA,IAAA,CAEA,cAAA,CAAA,CAAA,CAFkB,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,SAAA;AAClB,IAAA,CAGA,SAAA,CAAA,CAAA,CAAY,WAHJ,CAAA,CAAA,CAIlB,YAJkB,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAKlB,YALkB,CAAA,CAAA,CAAA;EACR,OAAA,CAAA,CAAA,CAKE,SALY;EAEd,WAAA,CAAS,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA;EAAA,UAAA,CAAA,CAAA,CAAA,OAAA;YAAG,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;;AAEtB,IAAA,CAOU,QAAA,CAAA,CAAA,CAAW,WAPrB,CAAA,CAAA,CAQA,YARA,CAAA,CAAA,CAAA;MACY,CAAA,CAAA,CAQH,QARG;EAAS,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA;EAMX,KAAA,CAAA,CAID,SAJS;EAAA,QAAA,CAAA,CAAA,CAAA,OAAA;WAAG,CAAA,CAAA,CAAA,MAAA;SACrB,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAM2B,KAAA,CAAM,UANjC,CAM4C,aAN5C,CAAA,CAM2D,UAN3D,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;;UAGS,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAKmB,KAAA,CAAM,UALzB,CAKoC,iBALpC,CAAA,CAKuD,UALvD,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;;AAGkD,IAAA,CAKjD,aAAA,CAAA,CAAA,CAAgB,QALiC,CAAA,CAAA,CAAA;OAAhC,CAAA,CAAA,CAAA,MAAM;;AAE+B,IAAA,CAOtD,cAAA,CAAA,CAAA,CAPsD;SAApC,CAAA,CAAA,CAQlB,SARwB;EAAU,IAAA,CAAA,CAStC,aATsC,CAAA,CAAA;EAGlC,cAAA,CAAA,CAAa,CAAA,QAAA,CAAA,CAAA,MAAG,CAAA,CAAA,CAAA,CAAA,CAOY,KAAA,CAAM,UAPV,CAOqB,aAPrB,CAAA,CAOoC,UAPpC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAIxB,aAAA,CAAA,CAAA,CAAA,MAAc,CAAA,CAAA,CAAA,MAAA;EAAA,kBAAA,CAAA,CAAA,CAKH,kBALG;YACd,CAAA,CAAA,CAAA,OAAA;MACJ,CAAA,CAAA,CAKC,QALD"}
+{"version":3,"file":"tabs.types.d.ts","names":[],"sources":["../../src/tabs/tabs.types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;KAOY,kBAAA,CAAA,CAAA;KACA,QAAA,CAAA,CAAA;KACA,cAAA,CAAA,CAAA;KAEA,SAAA,CAAA,CAAA,CAAY,cACtB,uBACA;YACY;EAPF,WAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAkB,MAAA;EAClB,UAAA,CAAQ,CAAA,CAAA,OAAA;EACR,UAAA,CAAA,CAAA,CAAA,CAAA,EAAc,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;AAE1B,CAAA;AAAwB,IAAA,CASZ,QAAA,CAAA,CAAA,CAAW,WATC,CAAA,CAAA,CAUtB,YAVsB,CAAA,CAAA,CAAA;EACtB,IAAA,CAAA,CAAA,CAUS,QAVT;EACA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,MAAA;EACY,KAAA,CAAA,CAUH,SAVG;EAAS,QAAA,CAAA,CAAA,CAAA,OAAA;EAMX,SAAA,CAAA,CAAA,CAAQ,MAAA;EAAG,OAAA,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAOM,KAAA,CAAM,UAPZ,CAOuB,aAPvB,CAAA,CAOsC,UAPtC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EACrB,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,MAAA,CAAA,MAAA,CAAA,IAAA,CAAA,IAAA,CAAA,QAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EACS,QAAA,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,CAAA,CAOmB,KAAA,CAAM,UAPzB,CAOoC,iBAPpC,CAAA,CAOuD,UAPvD,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;CAEA;AAGmC,IAAA,CAKlC,aAAA,CAAA,CAAA,CAAgB,QALkB,CAAA,CAAA,CAAA;EAAe,KAAA,CAAA,CAAA,CAAA,MAAA;CAAhC;AAEkB,IAAA,CAOnC,cAAA,CAAA,CAAA,CAPmC;EAAmB,OAAA,CAAA,CAAA,CAQtD,SARsD;EAApC,IAAM,CAAA,CAS5B,aAT4B,CAAA,CAAA;EAAU,cAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAUN,KAAA,CAAM,UAVA,CAUW,aAVX,CAAA,CAU0B,UAV1B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA;EAGlC,aAAA,CAAA,CAAA,CAAa,MAAA,CAAA,CAAA,CAAA,MAAG;EAIhB,kBAAc,CAAA,CAAA,CAKH,kBALG;EACd,UAAA,CAAA,CAAA,CAAA,OAAA;EACJ,IAAA,CAAA,CAAA,CAKC,QALD;CACiD"}