@tcn/ui 0.7.0 → 0.8.1

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

@@ -1,29 +1,69 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { HStack as n } from "../../../stacks/h_stack.js";
-import e from "clsx";
-import { Toggle as f } from "../../../actions/toggle/toggle.js";
-const T = ({
-  children: t,
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m, useCallback as f } from "react";
+import { HStack as u } from "../../../stacks/h_stack.js";
+import l from "clsx";
+import { Toggle as b } from "../../../actions/toggle/toggle.js";
+const g = (e) => {
+  const r = Array.from(e.currentTarget.querySelectorAll(':scope > [role="tab"]')), o = e.currentTarget.querySelector(":focus"), a = o ? r.indexOf(o) : -1;
+  if (a === -1) return;
+  let t = 0;
+  switch (e.key) {
+    case "ArrowRight":
+      t = (a + 1) % r.length;
+      break;
+    case "ArrowLeft":
+      t = (a - 1 + r.length) % r.length;
+      break;
+    case "Home":
+      t = 0;
+      break;
+    case "End":
+      t = r.length - 1;
+      break;
+    default:
+      return;
+  }
+  e.preventDefault(), e.stopPropagation(), r[t].focus();
+}, x = ({
+  children: e,
   className: r,
-  role: m = "tablist",
-  as: o = "menu",
-  ...a
-}) => /* @__PURE__ */ s(n, { as: o, role: m, className: e("tcn-tabs-list", r), ...a, children: t }), g = c(
-  ({ children: t, className: r, role: m = "tab", selected: o = !1, ...a }, i) => /* @__PURE__ */ s(
-    f,
+  role: o = "tablist",
+  as: a = "menu",
+  onKeyDown: t,
+  ...s
+}) => {
+  const i = f(
+    (c) => {
+      g(c), t && t(c);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ n(
+    u,
     {
-      ref: i,
-      role: m,
-      className: e(r, "tcn-interactive", "tcn-tab-item"),
-      selected: o,
-      ...a,
-      children: t
+      onKeyDown: i,
+      as: a,
+      role: o,
+      className: l("tcn-tabs-list", r),
+      ...s,
+      children: e
+    }
+  );
+}, w = m(
+  ({ children: e, className: r, role: o = "tab", selected: a = !1, ...t }, s) => /* @__PURE__ */ n(
+    b,
+    {
+      ref: s,
+      role: o,
+      className: l(r, "tcn-interactive", "tcn-tab-item"),
+      selected: a,
+      ...t,
+      children: e
     }
   )
 );
 export {
-  g as TabItem,
-  T as TabsList
+  w as TabItem,
+  x as TabsList
 };
 //# sourceMappingURL=tabs_list.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs_list.js","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"sourcesContent":["import { forwardRef, type FC, type PropsWithChildren } from 'react';\nimport { type BaseButtonProps } from '../../../actions/index.js';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport clsx from 'clsx';\nimport { Toggle } from '../../../actions/toggle/toggle.js';\n\nexport type TabsListProps = HStackProps;\n\nexport const TabsList: FC<PropsWithChildren<TabsListProps>> = ({\n  children,\n  className,\n  role = 'tablist',\n  as = 'menu',\n  ...props\n}) => {\n  return (\n    <HStack as={as} role={role} className={clsx('tcn-tabs-list', className)} {...props}>\n      {children}\n    </HStack>\n  );\n};\n\nexport interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {\n  selected?: boolean;\n}\n\nexport const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(\n  ({ children, className, role = 'tab', selected = false, ...props }, ref) => {\n    return (\n      <Toggle\n        ref={ref}\n        role={role}\n        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}\n        selected={selected}\n        {...props}\n      >\n        {children}\n      </Toggle>\n    );\n  }\n);\n"],"names":["TabsList","children","className","role","as","props","jsx","HStack","clsx","TabItem","forwardRef","selected","ref","Toggle"],"mappings":";;;;;AAQO,MAAMA,IAAiD,CAAC;AAAA,EAC7D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,GAAGC;AACL,MAEI,gBAAAC,EAACC,GAAA,EAAO,IAAAH,GAAQ,MAAAD,GAAY,WAAWK,EAAK,iBAAiBN,CAAS,GAAI,GAAGG,GAC1E,UAAAJ,EAAA,CACH,GAQSQ,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAT,GAAU,WAAAC,GAAW,MAAAC,IAAO,OAAO,UAAAQ,IAAW,IAAO,GAAGN,EAAA,GAASO,MAEhE,gBAAAN;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAT;AAAA,MACA,WAAWK,EAAKN,GAAW,mBAAmB,cAAc;AAAA,MAC5D,UAAAS;AAAA,MACC,GAAGN;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAIT;"}
+{"version":3,"file":"tabs_list.js","sources":["../../../../src/navigation/tabs/primitives/tabs_list.tsx"],"sourcesContent":["import { forwardRef, useCallback, type FC, type PropsWithChildren } from 'react';\nimport { type BaseButtonProps } from '../../../actions/index.js';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport clsx from 'clsx';\nimport { Toggle } from '../../../actions/toggle/toggle.js';\n\nexport type TabsListProps = HStackProps;\n\nconst navigateTabs = (event: React.KeyboardEvent<HTMLDivElement>) => {\n  const tabs = Array.from(event.currentTarget.querySelectorAll(':scope > [role=\"tab\"]'));\n  const currentTab = event.currentTarget.querySelector(':focus');\n  const currentIndex = currentTab ? tabs.indexOf(currentTab) : -1;\n  if (currentIndex === -1) return; // Exit if the focused element is not a tab\n  let newIndex = 0;\n\n  switch (event.key) {\n    case 'ArrowRight':\n      newIndex = (currentIndex + 1) % tabs.length;\n      break;\n    case 'ArrowLeft':\n      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      break;\n    case 'Home':\n      newIndex = 0;\n      break;\n    case 'End':\n      newIndex = tabs.length - 1;\n      break;\n    default:\n      return; // Exit if the key is not recognized\n  }\n\n  event.preventDefault();\n  event.stopPropagation();\n  tabs[newIndex]['focus']();\n};\n\nexport const TabsList: FC<PropsWithChildren<TabsListProps>> = ({\n  children,\n  className,\n  role = 'tablist',\n  as = 'menu',\n  onKeyDown,\n  ...props\n}) => {\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      navigateTabs(event);\n      onKeyDown && onKeyDown(event);\n    },\n    [onKeyDown]\n  );\n\n  return (\n    <HStack\n      onKeyDown={handleKeyDown}\n      as={as}\n      role={role}\n      className={clsx('tcn-tabs-list', className)}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n};\n\nexport interface TabItemProps extends Omit<BaseButtonProps, 'hierarchy'> {\n  selected?: boolean;\n}\n\nexport const TabItem = forwardRef<HTMLButtonElement, PropsWithChildren<TabItemProps>>(\n  ({ children, className, role = 'tab', selected = false, ...props }, ref) => {\n    return (\n      <Toggle\n        ref={ref}\n        role={role}\n        className={clsx(className, 'tcn-interactive', 'tcn-tab-item')}\n        selected={selected}\n        {...props}\n      >\n        {children}\n      </Toggle>\n    );\n  }\n);\n"],"names":["navigateTabs","event","tabs","currentTab","currentIndex","newIndex","TabsList","children","className","role","as","onKeyDown","props","handleKeyDown","useCallback","jsx","HStack","clsx","TabItem","forwardRef","selected","ref","Toggle"],"mappings":";;;;;AAQA,MAAMA,IAAe,CAACC,MAA+C;AACnE,QAAMC,IAAO,MAAM,KAAKD,EAAM,cAAc,iBAAiB,uBAAuB,CAAC,GAC/EE,IAAaF,EAAM,cAAc,cAAc,QAAQ,GACvDG,IAAeD,IAAaD,EAAK,QAAQC,CAAU,IAAI;AAC7D,MAAIC,MAAiB,GAAI;AACzB,MAAIC,IAAW;AAEf,UAAQJ,EAAM,KAAA;AAAA,IACZ,KAAK;AACH,MAAAI,KAAYD,IAAe,KAAKF,EAAK;AACrC;AAAA,IACF,KAAK;AACH,MAAAG,KAAYD,IAAe,IAAIF,EAAK,UAAUA,EAAK;AACnD;AAAA,IACF,KAAK;AACH,MAAAG,IAAW;AACX;AAAA,IACF,KAAK;AACH,MAAAA,IAAWH,EAAK,SAAS;AACzB;AAAA,IACF;AACE;AAAA,EAAA;AAGJ,EAAAD,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNC,EAAKG,CAAQ,EAAE,MAAO;AACxB,GAEaC,IAAiD,CAAC;AAAA,EAC7D,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpB,CAACb,MAA+C;AAC9C,MAAAD,EAAaC,CAAK,GAClBU,KAAaA,EAAUV,CAAK;AAAA,IAC9B;AAAA,IACA,CAACU,CAAS;AAAA,EAAA;AAGZ,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,MACX,IAAAH;AAAA,MACA,MAAAD;AAAA,MACA,WAAWQ,EAAK,iBAAiBT,CAAS;AAAA,MACzC,GAAGI;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP,GAMaW,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAZ,GAAU,WAAAC,GAAW,MAAAC,IAAO,OAAO,UAAAW,IAAW,IAAO,GAAGR,EAAA,GAASS,MAEhE,gBAAAN;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAZ;AAAA,MACA,WAAWQ,EAAKT,GAAW,mBAAmB,cAAc;AAAA,MAC5D,UAAAY;AAAA,MACC,GAAGR;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAIT;"}

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

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

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

@@ -1,34 +1,37 @@
-import { jsx as W } from "react/jsx-runtime";
-import { forwardRef as b, useCallback as x } from "react";
+import { jsx as k } from "react/jsx-runtime";
+import { forwardRef as x, useCallback as W } from "react";
 import { TabItem as l } from "../../primitives/tabs_list.js";
 import "../../../../utils/click_away_listener.js";
 import "../../../../utils/focus_redirect.js";
 import "../../../../utils/scroll_away_listener.js";
-import { useForkRef as T } from "../../../../utils/hooks/use_fork_ref.js";
+import { useForkRef as I } from "../../../../utils/hooks/use_fork_ref.js";
 import "../../../../utils/hooks/use_resize_observer.js";
 import "../../../../utils/dnd/context.js";
 import "clsx";
 import "../../../../draggable.module-BgelQsuJ.js";
-import { useTabs as u } from "../context.js";
+import { useTabs as T } from "../context.js";
 import { useTabLink as C } from "./use_tab_link.js";
-const D = b(
-  ({ children: r, value: o, onClick: i, minWidth: m, maxWidth: e, ...n }, p) => {
-    const { ref: s, isMatch: a } = C(o), t = u(), c = T(s, p), f = x(
-      (k) => {
-        t.onChange?.(o), i?.(k);
+const D = x(
+  ({ children: m, value: t, onClick: o, minWidth: n, maxWidth: e, id: M, ...a }, p) => {
+    const { ref: s, isMatch: r } = C(t), i = T(), c = I(s, p), d = W(
+      (b) => {
+        i.onChange?.(t), o?.(b);
       },
-      [t, o, i]
-    ), d = t.minItemWidth ?? m, h = t.maxItemWidth ?? e;
-    return /* @__PURE__ */ W(
+      [i, t, o]
+    ), f = i.minItemWidth ?? n, h = i.maxItemWidth ?? e;
+    return /* @__PURE__ */ k(
       l,
       {
         ref: c,
-        selected: a,
-        onClick: f,
-        minWidth: d,
+        selected: r,
+        onClick: d,
+        minWidth: f,
         maxWidth: h,
-        ...n,
-        children: r
+        id: `tab-${t}`,
+        "aria-controls": `tabpanel-${t}`,
+        tabIndex: r ? 0 : -1,
+        ...a,
+        children: m
       }
     );
   }

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

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

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

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

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

@@ -1,6 +1,11 @@
-import { useTabs as r } from "./context.js";
-const n = ({ value: t, children: e }) => r().value !== t ? null : e;
+import e from "react";
+import { useTabs as a } from "./context.js";
+const m = ({ value: o, children: t }) => a().value !== o ? null : t && e.isValidElement(t) ? e.cloneElement(t, {
+  ...t.props,
+  id: t.props.id ?? `tabpanel-${o}`,
+  role: t.props.role ?? "tabpanel"
+}) : t;
 export {
-  n as Tab
+  m as Tab
 };
 //# sourceMappingURL=tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { useTabs } from './context.js';\n\nexport interface TabProps {\n  value: string;\n}\n\nexport const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {\n  const state = useTabs();\n  if (state.value !== value) return null;\n  return children;\n};\n"],"names":["Tab","value","children","useTabs"],"mappings":";AAOO,MAAMA,IAAuC,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAC9CC,EAAA,EACJ,UAAUF,IAAc,OAC3BC;"}
+{"version":3,"file":"tab.js","sources":["../../../../src/navigation/tabs/state/tab.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC, PropsWithChildren } from 'react';\nimport { useTabs } from './context.js';\n\nexport interface TabProps {\n  value: string;\n}\n\nexport const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {\n  const state = useTabs();\n  if (state.value !== value) return null;\n\n  if (children && React.isValidElement(children)) {\n    return React.cloneElement(children, {\n      ...children.props,\n      id: children.props.id ?? `tabpanel-${value}`,\n      role: children.props.role ?? 'tabpanel',\n    });\n  }\n\n  return children;\n};\n"],"names":["Tab","value","children","useTabs","React"],"mappings":";;AAQO,MAAMA,IAAuC,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAC9CC,EAAA,EACJ,UAAUF,IAAc,OAE9BC,KAAYE,EAAM,eAAeF,CAAQ,IACpCE,EAAM,aAAaF,GAAU;AAAA,EAClC,GAAGA,EAAS;AAAA,EACZ,IAAIA,EAAS,MAAM,MAAM,YAAYD,CAAK;AAAA,EAC1C,MAAMC,EAAS,MAAM,QAAQ;AAAA,CAC9B,IAGIA;"}

package/dist/rail.css

@@ -0,0 +1 @@
+@layer tcn-system{:where(._rail-stack_76bc40f){width:100%;height:100%;overflow:auto}:where(._rail-stack_76bc40f) :where(._tcn-body_a4d9cc2){height:100%}}

package/dist/scaffold.css

@@ -1 +1 @@
-@layer tcn-system{:where(._scaffold-stack_8f97a6a){width:100%;height:100%;overflow:auto}}
+@layer tcn-system{:where(._scaffold-stack_8f97a6a){width:100%;height:100%;overflow:auto}:where(._scaffold-stack_8f97a6a) :where(._tcn-main_8a04212){height:auto;background:#000!important}}