@mittwald/flow-react-components 0.2.0-experimental.775 → 1.0.0

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.mjs","sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\n\ninterface Props {\n  selection: Aria.Key | undefined;\n  onContextMenuSelectionChange: (key: Aria.Key) => void;\n  disabledKeys?: Iterable<Aria.Key>;\n}\n\nexport const TabList: FC<Props> = (props) => {\n  const { selection, disabledKeys, onContextMenuSelectionChange } = props;\n\n  const titleCollapsedElementId = useId();\n  const overflowObserver = useObserveOverflow();\n  const isCollapsed = overflowObserver.isOverflowing;\n  const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n\n  const handleContextMenuSelectionChange = (key: Aria.Key) => {\n    onContextMenuSelectionChange(key);\n  };\n\n  const regularTabTitles = (\n    <Aria.TabList className={styles.titles} ref={overflowObserver.ref}>\n      <TunnelExit id=\"Titles\" />\n    </Aria.TabList>\n  );\n\n  const contextMenuWhenCollapsed = isCollapsed && (\n    <ContextMenuTriggerView>\n      <Button\n        variant=\"solid\"\n        className={styles.contextMenuButton}\n        color=\"light\"\n        aria-labelledby={titleCollapsedElementId}\n      >\n        <TunnelExit id=\"ActiveTitle\" />\n        <IconChevronDown />\n      </Button>\n\n      <ContextMenuView\n        disabledKeys={disabledKeys}\n        selectedKeys={selection ? [selection] : undefined}\n        selectionMode=\"navigation\"\n        onAction={(key) => handleContextMenuSelectionChange(key)}\n      >\n        <TunnelExit id=\"ContextMenuItems\" />\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n\n  return (\n    <div className={rootClassName}>\n      {regularTabTitles}\n      {contextMenuWhenCollapsed}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBO,MAAM,OAAA,GAAqB,CAAC,KAAA,KAAU;AAC3C,EAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,4BAAA,EAA6B,GAAI,KAAA;AAElE,EAAA,MAAM,0BAA0B,KAAA,EAAM;AACtC,EAAA,MAAM,mBAAmB,kBAAA,EAAmB;AAC5C,EAAA,MAAM,cAAc,gBAAA,CAAiB,aAAA;AACrC,EAAA,MAAM,gBAAgB,IAAA,CAAK,MAAA,CAAO,OAAA,EAAS,WAAA,IAAe,OAAO,SAAS,CAAA;AAE1E,EAAA,MAAM,gCAAA,GAAmC,CAAC,GAAA,KAAkB;AAC1D,IAAA,4BAAA,CAA6B,GAAG,CAAA;AAAA,EAClC,CAAA;AAEA,EAAA,MAAM,gBAAA,mBACJ,GAAA,CAAC,IAAA,CAAK,OAAA,EAAL,EAAa,SAAA,EAAW,MAAA,CAAO,MAAA,EAAQ,GAAA,EAAK,iBAAiB,GAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,UAAS,CAAA,EAC1B,CAAA;AAGF,EAAA,MAAM,wBAAA,GAA2B,WAAA,oBAC/B,IAAA,CAAC,sBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,WAAW,MAAA,CAAO,iBAAA;AAAA,QAClB,KAAA,EAAM,OAAA;AAAA,QACN,iBAAA,EAAiB,uBAAA;AAAA,QAEjB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAG,aAAA,EAAc,CAAA;AAAA,8BAC5B,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,KACnB;AAAA,oBAEA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,YAAA;AAAA,QACA,YAAA,EAAc,SAAA,GAAY,CAAC,SAAS,CAAA,GAAI,MAAA;AAAA,QACxC,aAAA,EAAc,YAAA;AAAA,QACd,QAAA,EAAU,CAAC,GAAA,KAAQ,gCAAA,CAAiC,GAAG,CAAA;AAAA,QAEvD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,kBAAA,EAAmB;AAAA;AAAA;AACpC,GAAA,EACF,CAAA;AAGF,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EACb,QAAA,EAAA;AAAA,IAAA,gBAAA;AAAA,IACA;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TabList.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n  selection: Aria.Key | undefined;\n  onContextMenuSelectionChange: (key: Aria.Key) => void;\n  disabledKeys?: Iterable<Aria.Key>;\n}\n\nexport const TabList: FC<Props> = (props) => {\n  const { selection, disabledKeys, onContextMenuSelectionChange } = props;\n\n  const titleCollapsedElementId = useId();\n  const overflowObserver = useObserveOverflow();\n  const isCollapsed = overflowObserver.isOverflowing;\n  const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n  const tabIndicator = useTabIndicator(isCollapsed);\n\n  const setTitlesRef = useMergeRefs<HTMLDivElement>([\n    overflowObserver.ref,\n    tabIndicator.titlesRef,\n  ]);\n\n  const handleContextMenuSelectionChange = (key: Aria.Key) => {\n    onContextMenuSelectionChange(key);\n  };\n\n  const regularTabTitles = (\n    <Aria.TabList className={styles.titles} ref={setTitlesRef}>\n      <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n    </Aria.TabList>\n  );\n\n  const contextMenuWhenCollapsed = isCollapsed && (\n    <ContextMenuTriggerView>\n      <Button\n        variant=\"solid\"\n        className={styles.contextMenuButton}\n        color=\"light\"\n        aria-labelledby={titleCollapsedElementId}\n      >\n        <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n        <IconChevronDown />\n      </Button>\n\n      <ContextMenuView\n        disabledKeys={disabledKeys}\n        selectedKeys={selection ? [selection] : undefined}\n        selectionMode=\"navigation\"\n        onAction={(key) => handleContextMenuSelectionChange(key)}\n      >\n        <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n\n  return (\n    <div className={rootClassName} ref={tabIndicator.rootRef}>\n      {!isCollapsed && tabIndicator.indicatorStyle && (\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            styles.activeIndicator,\n            tabIndicator.isAnimated && styles.animated,\n          )}\n          style={tabIndicator.indicatorStyle}\n        />\n      )}\n      {regularTabTitles}\n      {contextMenuWhenCollapsed}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EAAE,WAAW,cAAc,iCAAiC;CAElE,MAAM,0BAA0B,MAAM;CACtC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,eAAe,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EAAc,WAAW,uBAAO;EAAQ,KAAK;EAC3C,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAG1B,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,KAAK,aAAa;EAAjD,UAAA;GACG,CAAC,eAAe,aAAa,kBAC5B,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACT,uBAAO,iBACP,aAAa,cAAc,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.module.mjs

@@ -0,0 +1,21 @@
+"use client"
+/* */
+//#region src/components/Tabs/components/TabList/TabList.module.scss
+var tabList = "flow--tabs--tab-list";
+var activeIndicator = "flow--tabs--tab-list--active-indicator";
+var animated = "flow--tabs--tab-list--animated";
+var contextMenuButton = "flow--tabs--tab-list--context-menu-button";
+var titles = "flow--tabs--tab-list--titles";
+var collapsed = "flow--tabs--tab-list--collapsed";
+var TabList_module_default = {
+	tabList,
+	activeIndicator,
+	animated,
+	contextMenuButton,
+	titles,
+	collapsed
+};
+//#endregion
+export { activeIndicator, animated, collapsed, contextMenuButton, TabList_module_default as default, tabList, titles };
+
+//# sourceMappingURL=TabList.module.mjs.map

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.module.scss"],"sourcesContent":[".tabList {\n  background-color: var(--tabs--background-color--default);\n  position: relative;\n  border-radius: var(--tabs--corner-radius);\n\n  /* Precedes `.titles` in the DOM, so it is painted below the tab titles\n     without needing a z-index. */\n  .activeIndicator {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    width: calc(var(--tab-indicator-width));\n    transform: translateX(var(--tab-indicator-x));\n    border-radius: var(--tabs--corner-radius);\n    background-color: var(--tabs--background-color--selected);\n    border: var(--tabs--border-width) var(--tabs--border-style)\n      var(--tabs--border-color);\n    pointer-events: none;\n\n    &.animated {\n      transition-property: transform, width;\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  .contextMenuButton {\n    padding-block: var(--tabs--padding-y);\n    padding-inline: var(--tabs--padding-x);\n    background-color: var(--tabs--background-color--selected);\n    border-radius: var(--tabs--corner-radius);\n    border: var(--tabs--border-width) var(--tabs--border-style)\n      var(--tabs--border-color);\n    width: 100%;\n  }\n\n  .titles {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    overflow: hidden;\n    position: relative;\n  }\n\n  &.collapsed {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    .titles {\n      visibility: hidden;\n      position: absolute;\n      width: auto;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs

@@ -1,27 +1,50 @@
 "use client"
 /* */
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import 'react';
-import * as Aria from 'react-aria-components';
-import clsx from 'clsx';
-import styles from './TabTitle.module.scss.mjs';
-import { Text } from '../../../Text/Text.mjs';
-import { useTabContext } from '../Tab/context.mjs';
-import { TunnelEntry } from '@mittwald/react-tunnel';
-import { MenuItem } from '../../../MenuItem/MenuItem.mjs';
-
-const TabTitle = (props) => {
-  const { children, className, ...rest } = props;
-  const { id } = useTabContext();
-  const titleClassName = clsx(styles.tabTitle, className);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(TunnelEntry, { id: "Titles", children: /* @__PURE__ */ jsx(Aria.Tab, { ...rest, id, className: titleClassName, children: (p) => /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { emulateBoldWidth: true, children: /* @__PURE__ */ jsx("span", { className: styles.text, children }) }),
-      /* @__PURE__ */ jsx(TunnelEntry, { id: "ActiveTitle", children: p.isSelected && children })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(TunnelEntry, { id: "ContextMenuItems", children: /* @__PURE__ */ jsx(MenuItem, { className: styles.menuItem, id, children }) })
-  ] });
+import { UiComponentTunnelEntry } from "../../../UiComponentTunnel/UiComponentTunnelEntry.mjs";
+import { Text } from "../../../Text/Text.mjs";
+import { MenuItem } from "../../../MenuItem/MenuItem.mjs";
+import TabTitle_module_default from "./TabTitle.module.mjs";
+import { useTabContext } from "../Tab/context.mjs";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/Tabs/components/TabTitle/TabTitle.tsx
+/** @flr-generate all */
+var TabTitle = (props) => {
+	const { children, className, ...rest } = props;
+	const { id } = useTabContext();
+	const titleClassName = clsx(TabTitle_module_default.tabTitle, className);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UiComponentTunnelEntry, {
+		id: "Titles",
+		component: "Tabs",
+		children: /* @__PURE__ */ jsx(Aria.Tab, {
+			...rest,
+			id,
+			className: titleClassName,
+			children: (p) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+				emulateBoldWidth: true,
+				children: /* @__PURE__ */ jsx("span", {
+					className: TabTitle_module_default.text,
+					children
+				})
+			}), /* @__PURE__ */ jsx(UiComponentTunnelEntry, {
+				id: "ActiveTitle",
+				component: "Tabs",
+				children: p.isSelected && children
+			})] })
+		})
+	}), /* @__PURE__ */ jsx(UiComponentTunnelEntry, {
+		id: "ContextMenuItems",
+		component: "Tabs",
+		children: /* @__PURE__ */ jsx(MenuItem, {
+			...rest,
+			className: TabTitle_module_default.menuItem,
+			id,
+			children
+		})
+	})] });
 };
+//#endregion
+export { TabTitle, TabTitle as default };
 
-export { TabTitle };
-//# sourceMappingURL=TabTitle.mjs.map
+//# sourceMappingURL=TabTitle.mjs.map

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabTitle.mjs","sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./TabTitle.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useTabContext } from \"@/components/Tabs/components/Tab/context\";\nimport { TunnelEntry } from \"@mittwald/react-tunnel\";\nimport { MenuItem } from \"@/components/MenuItem\";\n\nexport interface TabTitleProps\n  extends\n    Omit<Aria.TabProps, \"children\" | \"id\" | \"isDisabled\">,\n    PropsWithChildren {}\n\n/** @flr-generate all */\nexport const TabTitle: FC<TabTitleProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const { id } = useTabContext();\n  const titleClassName = clsx(styles.tabTitle, className);\n\n  return (\n    <>\n      <TunnelEntry id=\"Titles\">\n        <Aria.Tab {...rest} id={id} className={titleClassName}>\n          {(p) => (\n            <>\n              <Text emulateBoldWidth>\n                <span className={styles.text}>{children}</span>\n              </Text>\n              <TunnelEntry id=\"ActiveTitle\">\n                {p.isSelected && children}\n              </TunnelEntry>\n            </>\n          )}\n        </Aria.Tab>\n      </TunnelEntry>\n\n      <TunnelEntry id=\"ContextMenuItems\">\n        <MenuItem className={styles.menuItem} id={id}>\n          {children}\n        </MenuItem>\n      </TunnelEntry>\n    </>\n  );\n};\n\nexport default TabTitle;\n"],"names":[],"mappings":";;;;;;;;;;AAgBO,MAAM,QAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAEzC,EAAA,MAAM,EAAE,EAAA,EAAG,GAAI,aAAA,EAAc;AAC7B,EAAA,MAAM,cAAA,GAAiB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAEtD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAG,QAAA,EACd,QAAA,kBAAA,GAAA,CAAC,KAAK,GAAA,EAAL,EAAU,GAAG,IAAA,EAAM,EAAA,EAAQ,SAAA,EAAW,cAAA,EACpC,QAAA,EAAA,CAAC,sBACA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,kBAAgB,IAAA,EACpB,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EAAO,QAAA,EAAS,CAAA,EAC1C,CAAA;AAAA,0BACC,WAAA,EAAA,EAAY,EAAA,EAAG,aAAA,EACb,QAAA,EAAA,CAAA,CAAE,cAAc,QAAA,EACnB;AAAA,KAAA,EACF,GAEJ,CAAA,EACF,CAAA;AAAA,oBAEA,GAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAG,kBAAA,EACd,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,MAAA,CAAO,QAAA,EAAU,EAAA,EACnC,QAAA,EACH,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TabTitle.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./TabTitle.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useTabContext } from \"@/components/Tabs/components/Tab/context\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabTitleProps\n  extends\n    Omit<Aria.TabProps, \"children\" | \"id\" | \"isDisabled\">,\n    PropsWithChildren {}\n\n/** @flr-generate all */\nexport const TabTitle: FC<TabTitleProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const { id } = useTabContext();\n\n  const titleClassName = clsx(styles.tabTitle, className);\n\n  return (\n    <>\n      <UiComponentTunnelEntry id=\"Titles\" component=\"Tabs\">\n        <Aria.Tab {...rest} id={id} className={titleClassName}>\n          {(p) => (\n            <>\n              <Text emulateBoldWidth>\n                <span className={styles.text}>{children}</span>\n              </Text>\n              <UiComponentTunnelEntry id=\"ActiveTitle\" component=\"Tabs\">\n                {p.isSelected && children}\n              </UiComponentTunnelEntry>\n            </>\n          )}\n        </Aria.Tab>\n      </UiComponentTunnelEntry>\n\n      <UiComponentTunnelEntry id=\"ContextMenuItems\" component=\"Tabs\">\n        <MenuItem {...rest} className={styles.menuItem} id={id}>\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default TabTitle;\n"],"mappings":";;;;;;;;;;;;AAeA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,EAAE,OAAO,cAAc;CAE7B,MAAM,iBAAiB,KAAK,wBAAO,UAAU,SAAS;CAEtD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,KAAK,KAAN;GAAU,GAAI;GAAU;GAAI,WAAW;GACnC,WAAA,MACA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,kBAAA;IACJ,UAAA,oBAAC,QAAD;KAAM,WAAW,wBAAO;KAAO;IAAe,CAAA;GAC1C,CAAA,GACN,oBAAC,wBAAD;IAAwB,IAAG;IAAc,WAAU;IAChD,UAAA,EAAE,cAAc;GACK,CAAA,CACxB,EAAA,CAAA;EAEI,CAAA;CACY,CAAA,GAExB,oBAAC,wBAAD;EAAwB,IAAG;EAAmB,WAAU;EACtD,UAAA,oBAAC,UAAD;GAAU,GAAI;GAAM,WAAW,wBAAO;GAAc;GACjD;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs

@@ -0,0 +1,15 @@
+"use client"
+/* */
+//#region src/components/Tabs/components/TabTitle/TabTitle.module.scss
+var tabTitle = "flow--tabs--tab-title";
+var text = "flow--tabs--tab-title--text";
+var menuItem = "flow--tabs--tab-title--menu-item";
+var TabTitle_module_default = {
+	tabTitle,
+	text,
+	menuItem
+};
+//#endregion
+export { TabTitle_module_default as default, menuItem, tabTitle, text };
+
+//# sourceMappingURL=TabTitle.module.mjs.map

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n.menuItem {\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Tabs/lib/useTabIndicator.mjs

@@ -0,0 +1,60 @@
+"use client"
+/* */
+import { createFrameResizeObserver } from "../../../lib/dom/createFrameResizeObserver.mjs";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/Tabs/lib/useTabIndicator.ts
+var getTabIndicatorStyle = (state) => state && {
+	"--tab-indicator-x": `${state.x}px`,
+	"--tab-indicator-width": `${state.width}px`
+};
+var useTabIndicator = (isCollapsed) => {
+	const rootRef = useRef(null);
+	const titlesRef = useRef(null);
+	const hasMeasuredRef = useRef(false);
+	const [indicator, setIndicator] = useState();
+	const resetIndicator = () => {
+		hasMeasuredRef.current = false;
+		setIndicator(void 0);
+	};
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		const titles = titlesRef.current;
+		if (!root || !titles || isCollapsed) {
+			resetIndicator();
+			return;
+		}
+		const measureIndicator = () => {
+			const selectedTab = titles.querySelector("[data-selected]");
+			if (!selectedTab) {
+				resetIndicator();
+				return;
+			}
+			const rootRect = root.getBoundingClientRect();
+			const selectedTabRect = selectedTab.getBoundingClientRect();
+			const nextIndicator = {
+				x: selectedTabRect.left - rootRect.left,
+				width: selectedTabRect.width,
+				isAnimated: hasMeasuredRef.current
+			};
+			setIndicator((previousIndicator) => {
+				if (previousIndicator && previousIndicator.x === nextIndicator.x && previousIndicator.width === nextIndicator.width && previousIndicator.isAnimated === nextIndicator.isAnimated) return previousIndicator;
+				return nextIndicator;
+			});
+			hasMeasuredRef.current = true;
+		};
+		measureIndicator();
+		const observer = createFrameResizeObserver(measureIndicator);
+		observer.observe([root, titles]);
+		return () => observer.disconnect();
+	});
+	return {
+		rootRef,
+		titlesRef,
+		indicatorStyle: getTabIndicatorStyle(indicator),
+		isAnimated: indicator?.isAnimated ?? false
+	};
+};
+//#endregion
+export { useTabIndicator };
+
+//# sourceMappingURL=useTabIndicator.mjs.map

package/dist/js/packages/components/src/components/Tabs/lib/useTabIndicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabIndicator.mjs","names":[],"sources":["../../../../../../../../src/components/Tabs/lib/useTabIndicator.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { createFrameResizeObserver } from \"@/lib/dom/createFrameResizeObserver\";\n\ninterface TabIndicatorState {\n  x: number;\n  width: number;\n  isAnimated: boolean;\n}\n\ninterface TabIndicatorStyle extends CSSProperties {\n  \"--tab-indicator-x\": string;\n  \"--tab-indicator-width\": string;\n}\n\nconst getTabIndicatorStyle = (\n  state: TabIndicatorState | undefined,\n): TabIndicatorStyle | undefined =>\n  state && {\n    \"--tab-indicator-x\": `${state.x}px`,\n    \"--tab-indicator-width\": `${state.width}px`,\n  };\n\nexport const useTabIndicator = (isCollapsed: boolean) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const titlesRef = useRef<HTMLDivElement | null>(null);\n  const hasMeasuredRef = useRef(false);\n  const [indicator, setIndicator] = useState<TabIndicatorState | undefined>();\n\n  const resetIndicator = () => {\n    hasMeasuredRef.current = false;\n    // React bails out of the re-render when the state is already `undefined`.\n    setIndicator(undefined);\n  };\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const titles = titlesRef.current;\n\n    if (!root || !titles || isCollapsed) {\n      resetIndicator();\n      return;\n    }\n\n    const measureIndicator = () => {\n      const selectedTab = titles.querySelector<HTMLElement>(\"[data-selected]\");\n\n      if (!selectedTab) {\n        resetIndicator();\n        return;\n      }\n\n      const rootRect = root.getBoundingClientRect();\n      const selectedTabRect = selectedTab.getBoundingClientRect();\n      const nextIndicator: TabIndicatorState = {\n        x: selectedTabRect.left - rootRect.left,\n        width: selectedTabRect.width,\n        isAnimated: hasMeasuredRef.current,\n      };\n\n      setIndicator((previousIndicator) => {\n        if (\n          previousIndicator &&\n          previousIndicator.x === nextIndicator.x &&\n          previousIndicator.width === nextIndicator.width &&\n          previousIndicator.isAnimated === nextIndicator.isAnimated\n        ) {\n          return previousIndicator;\n        }\n\n        return nextIndicator;\n      });\n\n      hasMeasuredRef.current = true;\n    };\n\n    measureIndicator();\n\n    const observer = createFrameResizeObserver(measureIndicator);\n    observer.observe([root, titles]);\n\n    return () => observer.disconnect();\n  });\n\n  return {\n    rootRef,\n    titlesRef,\n    indicatorStyle: getTabIndicatorStyle(indicator),\n    isAnimated: indicator?.isAnimated ?? false,\n  };\n};\n"],"mappings":";;;;;AAeA,IAAM,wBACJ,UAEA,SAAS;CACP,qBAAqB,GAAG,MAAM,EAAE;CAChC,yBAAyB,GAAG,MAAM,MAAM;AAC1C;AAEF,IAAa,mBAAmB,gBAAyB;CACvD,MAAM,UAAU,OAA8B,IAAI;CAClD,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,CAAC,WAAW,gBAAgB,SAAwC;CAE1E,MAAM,uBAAuB;EAC3B,eAAe,UAAU;EAEzB,aAAa,KAAA,CAAS;CACxB;CAEA,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,QAAQ,CAAC,UAAU,aAAa;GACnC,eAAe;GACf;EACF;EAEA,MAAM,yBAAyB;GAC7B,MAAM,cAAc,OAAO,cAA2B,iBAAiB;GAEvE,IAAI,CAAC,aAAa;IAChB,eAAe;IACf;GACF;GAEA,MAAM,WAAW,KAAK,sBAAsB;GAC5C,MAAM,kBAAkB,YAAY,sBAAsB;GAC1D,MAAM,gBAAmC;IACvC,GAAG,gBAAgB,OAAO,SAAS;IACnC,OAAO,gBAAgB;IACvB,YAAY,eAAe;GAC7B;GAEA,cAAc,sBAAsB;IAClC,IACE,qBACA,kBAAkB,MAAM,cAAc,KACtC,kBAAkB,UAAU,cAAc,SAC1C,kBAAkB,eAAe,cAAc,YAE/C,OAAO;IAGT,OAAO;GACT,CAAC;GAED,eAAe,UAAU;EAC3B;EAEA,iBAAiB;EAEjB,MAAM,WAAW,0BAA0B,gBAAgB;EAC3D,SAAS,QAAQ,CAAC,MAAM,MAAM,CAAC;EAE/B,aAAa,SAAS,WAAW;CACnC,CAAC;CAED,OAAO;EACL;EACA;EACA,gBAAgB,qBAAqB,SAAS;EAC9C,YAAY,WAAW,cAAc;CACvC;AACF"}

package/dist/js/packages/components/src/components/Text/Text.mjs

@@ -1,60 +1,60 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import 'react';
-import * as Aria from 'react-aria-components';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { isAlphaColor } from '../../lib/types/props.mjs';
-import invariant from 'invariant';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { EmulatedBoldText } from '../EmulatedBoldText/EmulatedBoldText.mjs';
-import { Wrap } from '../Wrap/Wrap.mjs';
-import clsx from 'clsx';
-import styles from './Text.module.scss.mjs';
-
-const Text = flowComponent("Text", (props) => {
-  const {
-    children,
-    className,
-    elementType = "span",
-    emulateBoldWidth,
-    ref,
-    color = "default",
-    align = "start",
-    wrap,
-    style: styleFromProps,
-    whiteSpace,
-    wordBreak,
-    ...rest
-  } = props;
-  const rootClassName = clsx(
-    styles.text,
-    isAlphaColor(color) && styles[color],
-    align && styles[`align-${align}`],
-    wrap && styles[`wrap-${wrap}`],
-    className
-  );
-  const textProps = { ...rest, className: rootClassName };
-  const propsContext = {
-    Link: {
-      inline: true
-    },
-    Icon: { className: styles.icon },
-    Kbd: { variant: "soft" }
-  };
-  const style = { whiteSpace, wordBreak, ...styleFromProps };
-  const childrenElement = /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(Wrap, { if: emulateBoldWidth, children: /* @__PURE__ */ jsx(EmulatedBoldText, { children }) }) });
-  if (!props.slot) {
-    const Element = elementType;
-    return /* @__PURE__ */ jsx(Element, { style, ...textProps, ref, children: childrenElement });
-  }
-  invariant(
-    typeof elementType === "string",
-    "'elementType' in Text component must be of type string"
-  );
-  return /* @__PURE__ */ jsx(Aria.Text, { style, ...textProps, elementType, ref, children: childrenElement });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { isAlphaColor } from "../../lib/types/props.mjs";
+import { Wrap } from "../Wrap/Wrap.mjs";
+import { EmulatedBoldText } from "../EmulatedBoldText/EmulatedBoldText.mjs";
+import Text_module_default from "./Text.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+import invariant from "invariant";
+//#region src/components/Text/Text.tsx
+/** @flr-generate all */
+var Text = flowComponent("Text", (props) => {
+	const { children, className, elementType = "span", emulateBoldWidth, ref, color = "default", align = "start", wrap, style: styleFromProps, whiteSpace, wordBreak, noLigatures, ...rest } = props;
+	const rootClassName = clsx(Text_module_default.text, isAlphaColor(color) && Text_module_default[color], align && Text_module_default[`align-${align}`], wrap && Text_module_default[`wrap-${wrap}`], noLigatures && Text_module_default[`no-ligatures`], className);
+	const textProps = {
+		...rest,
+		className: rootClassName
+	};
+	const propsContext = {
+		Link: {
+			inline: true,
+			color: isAlphaColor(color) ? color : void 0
+		},
+		Icon: { className: Text_module_default.icon },
+		Kbd: { variant: "soft" }
+	};
+	const style = {
+		whiteSpace,
+		wordBreak,
+		...styleFromProps
+	};
+	const childrenElement = /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children: /* @__PURE__ */ jsx(Wrap, {
+			if: emulateBoldWidth,
+			children: /* @__PURE__ */ jsx(EmulatedBoldText, { children })
+		})
+	});
+	if (!props.slot) return /* @__PURE__ */ jsx(elementType, {
+		style,
+		...textProps,
+		ref,
+		children: childrenElement
+	});
+	invariant(typeof elementType === "string", "'elementType' in Text component must be of type string");
+	return /* @__PURE__ */ jsx(Aria.Text, {
+		style,
+		...textProps,
+		elementType,
+		ref,
+		children: childrenElement
+	});
 });
-
+//#endregion
 export { Text, Text as default };
-//# sourceMappingURL=Text.mjs.map
+
+//# sourceMappingURL=Text.mjs.map

package/dist/js/packages/components/src/components/Text/Text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.mjs","sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n  extends\n    PropsWithChildren,\n    Omit<Aria.TextProps, \"children\" | \"elementType\">,\n    PropsWithElementType<\"span\" | \"div\" | \"p\">,\n    FlowComponentProps {\n  /* Whether the elements width should match the width it would have with mold text. */\n  emulateBoldWidth?: boolean;\n  /* The color of the text. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /* The alignment of the text. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\";\n  /* The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\" | \"pretty\";\n  /* The white-space property of the text. @default undefined */\n  whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n  /* The word-break property of the text. @default undefined */\n  wordBreak?: React.CSSProperties[\"wordBreak\"];\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n  const {\n    children,\n    className,\n    elementType = \"span\",\n    emulateBoldWidth,\n    ref,\n    color = \"default\",\n    align = \"start\",\n    wrap,\n    style: styleFromProps,\n    whiteSpace,\n    wordBreak,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.text,\n    isAlphaColor(color) && styles[color],\n    align && styles[`align-${align}`],\n    wrap && styles[`wrap-${wrap}`],\n    className,\n  );\n\n  const textProps = { ...rest, className: rootClassName };\n\n  const propsContext: PropsContext = {\n    Link: {\n      inline: true,\n    },\n    Icon: { className: styles.icon },\n    Kbd: { variant: \"soft\" },\n  };\n\n  const style = { whiteSpace, wordBreak, ...styleFromProps };\n\n  const childrenElement = (\n    <PropsContextProvider props={propsContext}>\n      <Wrap if={emulateBoldWidth}>\n        <EmulatedBoldText>{children}</EmulatedBoldText>\n      </Wrap>\n    </PropsContextProvider>\n  );\n\n  if (!props.slot) {\n    const Element = elementType;\n    return (\n      <Element style={style} {...textProps} ref={ref}>\n        {childrenElement}\n      </Element>\n    );\n  }\n\n  invariant(\n    typeof elementType === \"string\",\n    \"'elementType' in Text component must be of type string\",\n  );\n\n  return (\n    <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n      {childrenElement}\n    </Aria.Text>\n  );\n});\n\nexport default Text;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuCO,MAAM,IAAA,GAAO,aAAA,CAAc,MAAA,EAAQ,CAAC,KAAA,KAAU;AACnD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA,GAAc,MAAA;AAAA,IACd,gBAAA;AAAA,IACA,GAAA;AAAA,IACA,KAAA,GAAQ,SAAA;AAAA,IACR,KAAA,GAAQ,OAAA;AAAA,IACR,IAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP,UAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,IAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC,KAAA,IAAS,MAAA,CAAO,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAA;AAAA,IAChC,IAAA,IAAQ,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,IAC7B;AAAA,GACF;AAEA,EAAA,MAAM,SAAA,GAAY,EAAE,GAAG,IAAA,EAAM,WAAW,aAAA,EAAc;AAEtD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA,KACV;AAAA,IACA,IAAA,EAAM,EAAE,SAAA,EAAW,MAAA,CAAO,IAAA,EAAK;AAAA,IAC/B,GAAA,EAAK,EAAE,OAAA,EAAS,MAAA;AAAO,GACzB;AAEA,EAAA,MAAM,KAAA,GAAQ,EAAE,UAAA,EAAY,SAAA,EAAW,GAAG,cAAA,EAAe;AAEzD,EAAA,MAAM,eAAA,mBACJ,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,gBAAA,EACR,QAAA,kBAAA,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAS,GAC9B,CAAA,EACF,CAAA;AAGF,EAAA,IAAI,CAAC,MAAM,IAAA,EAAM;AACf,IAAA,MAAM,OAAA,GAAU,WAAA;AAChB,IAAA,2BACG,OAAA,EAAA,EAAQ,KAAA,EAAe,GAAG,SAAA,EAAW,KACnC,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,SAAA;AAAA,IACE,OAAO,WAAA,KAAgB,QAAA;AAAA,IACvB;AAAA,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAK,IAAA,EAAL,EAAU,OAAe,GAAG,SAAA,EAAW,WAAA,EAA0B,GAAA,EAC/D,QAAA,EAAA,eAAA,EACH,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Text.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type React from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithElementType,\n} from \"@/lib/types/props\";\nimport invariant from \"invariant\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { EmulatedBoldText } from \"@/components/EmulatedBoldText\";\nimport { Wrap } from \"@/components/Wrap\";\nimport clsx from \"clsx\";\nimport styles from \"./Text.module.scss\";\n\nexport interface TextProps\n  extends\n    PropsWithChildren,\n    Omit<Aria.TextProps, \"children\" | \"elementType\">,\n    PropsWithElementType<\"span\" | \"div\" | \"p\">,\n    FlowComponentProps {\n  /**\n   * Whether the elements width should match the width it would have with bold\n   * text.\n   */\n  emulateBoldWidth?: boolean;\n  /** The color of the text. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The alignment of the text. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The text-wrap property of the text. */\n  wrap?: \"wrap\" | \"balance\" | \"pretty\";\n  /** The white-space property of the text. */\n  whiteSpace?: React.CSSProperties[\"whiteSpace\"];\n  /** The word-break property of the text. */\n  wordBreak?: React.CSSProperties[\"wordBreak\"];\n  /**\n   * Disables standard and contextual ligatures for predictable, literal text\n   * rendering.\n   */\n  noLigatures?: boolean;\n}\n\n/** @flr-generate all */\nexport const Text = flowComponent(\"Text\", (props) => {\n  const {\n    children,\n    className,\n    elementType = \"span\",\n    emulateBoldWidth,\n    ref,\n    color = \"default\",\n    align = \"start\",\n    wrap,\n    style: styleFromProps,\n    whiteSpace,\n    wordBreak,\n    noLigatures,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.text,\n    isAlphaColor(color) && styles[color],\n    align && styles[`align-${align}`],\n    wrap && styles[`wrap-${wrap}`],\n    noLigatures && styles[`no-ligatures`],\n    className,\n  );\n\n  const textProps = { ...rest, className: rootClassName };\n\n  const propsContext: PropsContext = {\n    Link: {\n      inline: true,\n      color: isAlphaColor(color) ? color : undefined,\n    },\n    Icon: { className: styles.icon },\n    Kbd: { variant: \"soft\" },\n  };\n\n  const style = {\n    whiteSpace,\n    wordBreak,\n    ...styleFromProps,\n  };\n\n  const childrenElement = (\n    <PropsContextProvider props={propsContext}>\n      <Wrap if={emulateBoldWidth}>\n        <EmulatedBoldText>{children}</EmulatedBoldText>\n      </Wrap>\n    </PropsContextProvider>\n  );\n\n  if (!props.slot) {\n    const Element = elementType;\n    return (\n      <Element style={style} {...textProps} ref={ref}>\n        {childrenElement}\n      </Element>\n    );\n  }\n\n  invariant(\n    typeof elementType === \"string\",\n    \"'elementType' in Text component must be of type string\",\n  );\n\n  return (\n    <Aria.Text style={style} {...textProps} elementType={elementType} ref={ref}>\n      {childrenElement}\n    </Aria.Text>\n  );\n});\n\nexport default Text;\n"],"mappings":";;;;;;;;;;;;;;AA+CA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,cAAc,QACd,kBACA,KACA,QAAQ,WACR,QAAQ,SACR,MACA,OAAO,gBACP,YACA,WACA,aACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,oBAAO,MACP,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,oBAAO,SAAS,UACzB,QAAQ,oBAAO,QAAQ,SACvB,eAAe,oBAAO,iBACtB,SACF;CAEA,MAAM,YAAY;EAAE,GAAG;EAAM,WAAW;CAAc;CAEtD,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;GACR,OAAO,aAAa,KAAK,IAAI,QAAQ,KAAA;EACvC;EACA,MAAM,EAAE,WAAW,oBAAO,KAAK;EAC/B,KAAK,EAAE,SAAS,OAAO;CACzB;CAEA,MAAM,QAAQ;EACZ;EACA;EACA,GAAG;CACL;CAEA,MAAM,kBACJ,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;EAC1C,CAAA;CACc,CAAA;CAGxB,IAAI,CAAC,MAAM,MAET,OACE,oBAAC,aAAD;EAAgB;EAAO,GAAI;EAAgB;EACxC,UAAA;CACM,CAAA;CAIb,UACE,OAAO,gBAAgB,UACvB,wDACF;CAEA,OACE,oBAAC,KAAK,MAAN;EAAkB;EAAO,GAAI;EAAwB;EAAkB;EACpE,UAAA;CACQ,CAAA;AAEf,CAAC"}

package/dist/js/packages/components/src/components/Text/Text.module.mjs

@@ -0,0 +1,26 @@
+"use client"
+/* */
+//#region src/components/Text/Text.module.scss
+var text = "flow--text";
+var dark = "flow--text--dark";
+var light = "flow--text--light";
+var icon = "flow--text--icon";
+var Text_module_default = {
+	text,
+	dark,
+	light,
+	"dark-static": "flow--text--dark-static",
+	"light-static": "flow--text--light-static",
+	icon,
+	"align-start": "flow--text--align-start",
+	"align-center": "flow--text--align-center",
+	"align-end": "flow--text--align-end",
+	"wrap-wrap": "flow--text--wrap-wrap",
+	"wrap-balance": "flow--text--wrap-balance",
+	"wrap-pretty": "flow--text--wrap-pretty",
+	"no-ligatures": "flow--text--no-ligatures"
+};
+//#endregion
+export { dark, Text_module_default as default, icon, light, text };
+
+//# sourceMappingURL=Text.module.mjs.map

package/dist/js/packages/components/src/components/Text/Text.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  color: inherit;\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--text--color--#{$color});\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n\n  ul,\n  ol {\n    padding-inline-start: var(--text--list-padding);\n  }\n\n  ul {\n    li {\n      list-style: initial;\n    }\n  }\n\n  small {\n    font-size: var(--font-size-text--s);\n  }\n\n  blockquote {\n    border-inline-start: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-inline-start: var(--text--blockquote-padding);\n  }\n\n  .icon {\n    vertical-align: text-bottom;\n  }\n\n  small {\n    .icon {\n      width: var(--line-height-s);\n      height: var(--line-height-s);\n    }\n  }\n\n  &:where(.align-start) {\n    text-align: start;\n  }\n\n  &:where(.align-center) {\n    text-align: center;\n  }\n\n  &:where(.align-end) {\n    text-align: end;\n  }\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n\n  &:where(.wrap-pretty) {\n    text-wrap: pretty;\n  }\n\n  &:where(.no-ligatures) {\n    font-variant-ligatures: none;\n  }\n}\n"],"mappings":""}