@tcn/ui 0.15.0 → 0.17.0

package/dist/layouts/containers/rows/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sources":["../../../../src/layouts/containers/rows/row.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../../stacks/h_stack.js';\nimport styles from './row.module.css';\n\nexport interface RowProps extends Omit<HStackProps, 'as'> {}\n\nexport const Row = React.forwardRef<HTMLElement, RowProps>(function Row(\n  { children, className, ...props }: RowProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"section\"\n      className={clsx('tcn-row', styles['row'], className)}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Row","React","children","className","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;0CAOaA,IAAMC,EAAM,WAAkC,SACzD,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAK,WAAWC,EAAO,KAAQN,CAAS;AAAA,MAClD,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/containers/rows/rows.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ScaffoldProps } from '../scaffold.js';
+export interface RowsOwnProps {
+    rowsMinHeight?: string | number;
+    rowsHeight?: string | number;
+    rowsMaxHeight?: string | number;
+}
+export interface RowsProps extends Omit<ScaffoldProps, 'as'>, RowsOwnProps {
+}
+export declare const Rows: React.ForwardRefExoticComponent<RowsProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=rows.d.ts.map

package/dist/layouts/containers/rows/rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rows.d.ts","sourceRoot":"","sources":["../../../../src/layouts/containers/rows/rows.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG9D,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,EAAE,YAAY;CAAG;AAE7E,eAAO,MAAM,IAAI,+EA4Bf,CAAC"}

package/dist/layouts/containers/rows/rows.js

@@ -0,0 +1,34 @@
+import { jsx as a } from "react/jsx-runtime";
+import c from "react";
+import { clsx as w } from "clsx";
+import { Scaffold as p } from "../scaffold.js";
+import { removeUndefinedProperties as h } from "../../../stacks/utils/remove_undefined_properties.js";
+const _ = c.forwardRef(function({
+  children: o,
+  className: r,
+  rowsMinHeight: t,
+  rowsHeight: e,
+  rowsMaxHeight: s,
+  style: m,
+  ...f
+}, i) {
+  const n = h({
+    "--rows-min-height": t,
+    "--rows-height": e,
+    "--rows-max-height": s
+  });
+  return /* @__PURE__ */ a(
+    p,
+    {
+      ref: i,
+      className: w("tcn-rows", r),
+      style: { ...n, ...m },
+      ...f,
+      children: o
+    }
+  );
+});
+export {
+  _ as Rows
+};
+//# sourceMappingURL=rows.js.map

package/dist/layouts/containers/rows/rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rows.js","sources":["../../../../src/layouts/containers/rows/rows.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Scaffold, type ScaffoldProps } from '../scaffold.js';\nimport { removeUndefinedProperties } from '../../../stacks/utils/remove_undefined_properties.js';\n\nexport interface RowsOwnProps {\n  rowsMinHeight?: string | number;\n  rowsHeight?: string | number;\n  rowsMaxHeight?: string | number;\n}\n\nexport interface RowsProps extends Omit<ScaffoldProps, 'as'>, RowsOwnProps {}\n\nexport const Rows = React.forwardRef<HTMLElement, RowsProps>(function Rows(\n  {\n    children,\n    className,\n    rowsMinHeight,\n    rowsHeight,\n    rowsMaxHeight,\n    style,\n    ...props\n  }: RowsProps,\n  ref\n) {\n  const rowVars = removeUndefinedProperties({\n    '--rows-min-height': rowsMinHeight,\n    '--rows-height': rowsHeight,\n    '--rows-max-height': rowsMaxHeight,\n  });\n\n  return (\n    <Scaffold\n      ref={ref}\n      className={clsx('tcn-rows', className)}\n      style={{ ...rowVars, ...style }}\n      {...props}\n    >\n      {children}\n    </Scaffold>\n  );\n});\n"],"names":["Rows","React","children","className","rowsMinHeight","rowsHeight","rowsMaxHeight","style","props","ref","rowVars","removeUndefinedProperties","jsx","Scaffold","clsx"],"mappings":";;;;;AAaO,MAAMA,IAAOC,EAAM,WAAmC,SAC3D;AAAA,EACE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAA0B;AAAA,IACxC,qBAAqBP;AAAA,IACrB,iBAAiBC;AAAA,IACjB,qBAAqBC;AAAA,EAAA,CACtB;AAED,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK,EAAK,YAAYX,CAAS;AAAA,MACrC,OAAO,EAAE,GAAGO,GAAS,GAAGH,EAAA;AAAA,MACvB,GAAGC;AAAA,MAEH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/containers/scaffold.d.ts

@@ -1,9 +1,6 @@
 import { default as React } from 'react';
-import { BoxProps } from '../../stacks/box/box.js';
-import { Alignment } from '../../stacks/types/alignment.js';
-export interface ScaffoldProps extends Omit<BoxProps, 'as'> {
-    vAlign?: Alignment;
-    hAlign?: Alignment;
+import { VStackProps } from '../../stacks/v_stack.js';
+export interface ScaffoldProps extends Omit<VStackProps, 'as'> {
 }
 export declare const Scaffold: React.ForwardRefExoticComponent<ScaffoldProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=scaffold.d.ts.map

package/dist/layouts/containers/scaffold.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../../../src/layouts/containers/scaffold.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,mFAyDnB,CAAC"}
+{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../../../src/layouts/containers/scaffold.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;CAAG;AAEjE,eAAO,MAAM,QAAQ,mFAsBnB,CAAC"}

package/dist/layouts/containers/scaffold.js

@@ -1,67 +1,29 @@
-import { jsx as e } from "react/jsx-runtime";
-import u from "react";
-import { clsx as l } from "clsx";
-import { Box as x } from "../../stacks/box/box.js";
-import { VStack as S } from "../../stacks/v_stack.js";
-import { s as t } from "../../containers.module-DlGySre0.js";
-const B = u.forwardRef(function({
-  children: m,
-  width: d,
-  height: i,
-  minWidth: a,
-  maxWidth: o,
-  minHeight: c,
-  maxHeight: r,
-  hAlign: s = "start",
-  vAlign: f = "start",
-  className: p,
-  ...k
-}, n) {
-  return /* @__PURE__ */ e(
-    x,
+import { jsx as m } from "react/jsx-runtime";
+import n from "react";
+import { clsx as e } from "clsx";
+import { VStack as i } from "../../stacks/v_stack.js";
+import { s as t } from "../../containers.module-BmICKsOK.js";
+const R = n.forwardRef(function({ children: o, className: r, vAlign: f = "start", hAlign: a = "start", ...c }, s) {
+  return /* @__PURE__ */ m(
+    i,
     {
-      ref: n,
-      width: d,
-      height: i,
-      minWidth: a,
-      maxWidth: o,
-      minHeight: c,
-      maxHeight: r,
-      "data-h-alignment": s,
-      "data-v-alignment": f,
-      className: l(
-        p,
+      ref: s,
+      as: "section",
+      vAlign: f,
+      hAlign: a,
+      className: e(
+        r,
         t.scaffold,
         t.container,
         "tcn-container",
         "tcn-scaffold"
       ),
-      ...k,
-      children: /* @__PURE__ */ e(
-        S,
-        {
-          as: "section",
-          minWidth: a,
-          maxWidth: o,
-          minHeight: c,
-          maxHeight: r,
-          hAlign: s,
-          vAlign: f,
-          ref: n,
-          className: l(
-            t["scaffold-stack"],
-            t["container-stack"],
-            "tcn-container-stack",
-            "tcn-scaffold-stack"
-          ),
-          zIndex: 0,
-          children: m
-        }
-      )
+      ...c,
+      children: o
     }
   );
 });
 export {
-  B as Scaffold
+  R as Scaffold
 };
 //# sourceMappingURL=scaffold.js.map

package/dist/layouts/containers/scaffold.js.map

@@ -1 +1 @@
-{"version":3,"file":"scaffold.js","sources":["../../../src/layouts/containers/scaffold.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Box, type BoxProps } from '../../stacks/box/box.js';\nimport type { Alignment } from '../../stacks/types/alignment.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport styles from './containers.module.css';\n\nexport interface ScaffoldProps extends Omit<BoxProps, 'as'> {\n  vAlign?: Alignment;\n  hAlign?: Alignment;\n}\n\nexport const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(\n  {\n    children,\n    width,\n    height,\n    minWidth,\n    maxWidth,\n    minHeight,\n    maxHeight,\n    hAlign = 'start',\n    vAlign = 'start',\n    className,\n    ...props\n  }: ScaffoldProps,\n  ref\n) {\n  return (\n    <Box\n      ref={ref}\n      width={width}\n      height={height}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      data-h-alignment={hAlign}\n      data-v-alignment={vAlign}\n      className={clsx(\n        className,\n        styles['scaffold'],\n        styles['container'],\n        'tcn-container',\n        'tcn-scaffold'\n      )}\n      {...props}\n    >\n      <VStack\n        as=\"section\"\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        hAlign={hAlign}\n        vAlign={vAlign}\n        ref={ref}\n        className={clsx(\n          styles['scaffold-stack'],\n          styles['container-stack'],\n          'tcn-container-stack',\n          'tcn-scaffold-stack'\n        )}\n        zIndex={0}\n      >\n        {children}\n      </VStack>\n    </Box>\n  );\n});\n"],"names":["Scaffold","React","children","width","height","minWidth","maxWidth","minHeight","maxHeight","hAlign","vAlign","className","props","ref","jsx","Box","clsx","styles","VStack"],"mappings":";;;;;;AAYO,MAAMA,IAAWC,EAAM,WAAuC,SACnE;AAAA,EACE,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,OAAAV;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBC;AAAA,MAClB,oBAAkBC;AAAA,MAClB,WAAWM;AAAA,QACTL;AAAA,QACAM,EAAO;AAAA,QACPA,EAAO;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,UAAAb;AAAA,UACA,UAAAC;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,QAAAC;AAAA,UACA,QAAAC;AAAA,UACA,KAAAG;AAAA,UACA,WAAWG;AAAA,YACTC,EAAO,gBAAgB;AAAA,YACvBA,EAAO,iBAAiB;AAAA,YACxB;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,QAAQ;AAAA,UAEP,UAAAf;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"scaffold.js","sources":["../../../src/layouts/containers/scaffold.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport styles from './containers.module.css';\n\nexport interface ScaffoldProps extends Omit<VStackProps, 'as'> {}\n\nexport const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Scaffold(\n  { children, className, vAlign = 'start', hAlign = 'start', ...props }: ScaffoldProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"section\"\n      vAlign={vAlign}\n      hAlign={hAlign}\n      className={clsx(\n        className,\n        styles['scaffold'],\n        styles['container'],\n        'tcn-container',\n        'tcn-scaffold'\n      )}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Scaffold","React","children","className","vAlign","hAlign","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;;AAOO,MAAMA,IAAWC,EAAM,WAAuC,SACnE,EAAE,UAAAC,GAAU,WAAAC,GAAW,QAAAC,IAAS,SAAS,QAAAC,IAAS,SAAS,GAAGC,EAAA,GAC9DC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,QAAAH;AAAA,MACA,QAAAC;AAAA,MACA,WAAWK;AAAA,QACTP;AAAA,QACAQ,EAAO;AAAA,QACPA,EAAO;AAAA,QACP;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/index.d.ts

@@ -1,4 +1,4 @@
-export * from './column/column.js';
+export { Column, type ColumnProps } from './containers/columns/column.js';
 export * from './divider/divider.js';
 export * from './grid/grid.js';
 export * from './list/item.js';
@@ -16,6 +16,8 @@ export { Responsive, type ResponsiveProps } from './responsive/responsive.js';
 export { Breakpoint, type BreakpointProps } from './responsive/breakpoint.js';
 export { TTable, THead, TBody, TFoot, TR, TH, TD } from './table/table.js';
 export { Rail, type RailProps } from './containers/rail.js';
-export { Side, type SideProps } from './containers/side/side.js';
+export { Columns, type ColumnsProps } from './containers/columns/columns.js';
+export { Row, type RowProps } from './containers/rows/row.js';
+export { Rows, type RowsProps } from './containers/rows/rows.js';
 export { UtilityStrip, type UtilityStripProps, } from './containers/utility_strip/utility_strip.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/layouts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,6CAA6C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC1E,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,6CAA6C,CAAC"}

package/dist/layouts/index.js

@@ -1,45 +1,49 @@
-import { Column as e } from "./column/column.js";
+import { Column as e } from "./containers/columns/column.js";
 import { Divider as p } from "./divider/divider.js";
-import { Grid as m } from "./grid/grid.js";
+import { Grid as f } from "./grid/grid.js";
 import { Item as i } from "./list/item.js";
 import { List as d } from "./list/list.js";
-import { SidebarEnd as l } from "./sidebar_end/sidebar_end.js";
-import { SidebarStart as n } from "./sidebar_start/sidebar_start.js";
-import { Scaffold as H } from "./containers/scaffold.js";
-import { Footer as s } from "./footer/footer.js";
-import { Header as D } from "./header/header.js";
-import { UtilityBar as c } from "./utility_bar/utility_bar.js";
+import { SidebarEnd as T } from "./sidebar_end/sidebar_end.js";
+import { SidebarStart as S } from "./sidebar_start/sidebar_start.js";
+import { Scaffold as R } from "./containers/scaffold.js";
+import { Footer as H } from "./footer/footer.js";
+import { Header as u } from "./header/header.js";
+import { UtilityBar as D } from "./utility_bar/utility_bar.js";
 import { Group as v } from "./group/group.js";
-import { Bar as G } from "./bar/bar.js";
-import { Section as g } from "./section/section.js";
-import { Heading as C } from "./section/heading.js";
-import { Detail as I } from "./section/detail.js";
-import { Responsive as h } from "./responsive/responsive.js";
-import { Breakpoint as q } from "./responsive/breakpoint.js";
+import { Bar as C } from "./bar/bar.js";
+import { Section as G } from "./section/section.js";
+import { Heading as g } from "./section/heading.js";
+import { Detail as E } from "./section/detail.js";
+import { Responsive as L } from "./responsive/responsive.js";
+import { Breakpoint as j } from "./responsive/breakpoint.js";
 import { TBody as z, TD as A, TFoot as J, TH as K, THead as M, TR as N, TTable as O } from "./table/table.js";
 import { Rail as Q } from "./containers/rail.js";
-import { Side as W } from "./containers/side/side.js";
-import { UtilityStrip as Y } from "./containers/utility_strip/utility_strip.js";
+import { Columns as W } from "./containers/columns/columns.js";
+import { Row as Y } from "./containers/rows/row.js";
+import { Rows as _ } from "./containers/rows/rows.js";
+import { UtilityStrip as oo } from "./containers/utility_strip/utility_strip.js";
 export {
-  G as Bar,
-  q as Breakpoint,
+  C as Bar,
+  j as Breakpoint,
   e as Column,
-  I as Detail,
+  W as Columns,
+  E as Detail,
   p as Divider,
-  s as Footer,
-  m as Grid,
+  H as Footer,
+  f as Grid,
   v as Group,
-  D as Header,
-  C as Heading,
+  u as Header,
+  g as Heading,
   i as Item,
   d as List,
   Q as Rail,
-  h as Responsive,
-  H as Scaffold,
-  g as Section,
-  W as Side,
-  l as SidebarEnd,
-  n as SidebarStart,
+  L as Responsive,
+  Y as Row,
+  _ as Rows,
+  R as Scaffold,
+  G as Section,
+  T as SidebarEnd,
+  S as SidebarStart,
   z as TBody,
   A as TD,
   J as TFoot,
@@ -47,7 +51,7 @@ export {
   M as THead,
   N as TR,
   O as TTable,
-  c as UtilityBar,
-  Y as UtilityStrip
+  D as UtilityBar,
+  oo as UtilityStrip
 };
 //# sourceMappingURL=index.js.map

package/dist/layouts/index.js.map

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

package/dist/mobile/inputs/date_picker/mobile_date_picker_header.js

@@ -16,10 +16,13 @@ import "../../../utils/hooks/use_resize_observer.js";
 import "../../../utils/dnd/context.js";
 import { clsx as z } from "clsx";
 import "../../../draggable.module-BgelQsuJ.js";
+import "../../../utils/resize/context.js";
+import "../../../resizable.module-I6iyBAvM.js";
+import "../../../utils/resize/resize_handle.js";
 import { ChevronLeftIcon as E } from "@tcn/icons/chevron_left_icon.js";
 import { ChevronRightIcon as T } from "@tcn/icons/chevron_right_icon.js";
 import '../../../mobile_date_picker_header.css';const W = "_mobile-date-picker-header_0678759", G = "_mobile-date-picker-overlay_d1d8dc4", J = "_mobile-month-list_1081f6a", Q = "_mobile-year-overlay_daba362", l = { "mobile-date-picker-header": W, "mobile-date-picker-overlay": G, "mobile-month-list": J, "mobile-year-overlay": Q };
-function be({
+function ve({
   presenter: r,
   countryCode: a,
   selectMonthMessage: R = "Select Month",
@@ -158,6 +161,6 @@ function be({
   ] });
 }
 export {
-  be as MobileDatePickerHeader
+  ve as MobileDatePickerHeader
 };
 //# sourceMappingURL=mobile_date_picker_header.js.map

package/dist/mobile/inputs/date_picker/mobile_date_picker_header.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile_date_picker_header.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_header.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport { Spacer } from '../../../stacks/spacer.js';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { getMonthsOfYear } from '../../../utils/calendar/get_months_of_year.js';\nimport { DatePickerPresenter } from '../../../inputs/date_picker/date_picker_presenter.js';\nimport { MobileDatePickerYearSelector } from './mobile_date_picker_year_selector.js';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { MobilePortal } from '../../portal/mobile_portal.js';\nimport { MobileOverlayHeader } from './mobile_overlay_header.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { clsx } from 'clsx';\nimport styles from './mobile_date_picker_header.module.css';\n\nexport interface MobileDatePickerHeaderProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n  selectMonthMessage?: string;\n  selectYearMessage?: string;\n}\n\nexport function MobileDatePickerHeader({\n  presenter,\n  countryCode,\n  selectMonthMessage = 'Select Month',\n  selectYearMessage = 'Select Year',\n}: MobileDatePickerHeaderProps) {\n  const state = useSignalValue(presenter.stateBroadcast);\n  const [monthOpen, setMonthOpen] = useState(false);\n  const [yearOpen, setYearOpen] = useState(false);\n  const monthButtonRef = useRef<HTMLButtonElement | null>(null);\n  const yearButtonRef = useRef<HTMLButtonElement | null>(null);\n  const monthListRef = useRef<HTMLDivElement | null>(null);\n\n  const longMonths = useMemo(() => getMonthsOfYear(countryCode, 'long'), [countryCode]);\n  const shortMonths = useMemo(() => getMonthsOfYear(countryCode, 'short'), [countryCode]);\n\n  function selectMonth(value: string) {\n    presenter.setVisibleMonth(Number(value));\n  }\n\n  function previous() {\n    presenter.setVisibleMonth(state.visibleMonth - 1);\n  }\n\n  function next() {\n    presenter.setVisibleMonth(state.visibleMonth + 1);\n  }\n\n  function openMonths() {\n    setMonthOpen(true);\n  }\n\n  function closeMonths() {\n    setMonthOpen(false);\n    requestAnimationFrame(() => monthButtonRef.current?.focus());\n  }\n\n  function openYears() {\n    setYearOpen(true);\n  }\n\n  function closeYears() {\n    setYearOpen(false);\n    requestAnimationFrame(() => yearButtonRef.current?.focus());\n  }\n\n  function handleMonthKeyDown(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeMonths();\n    }\n  }\n\n  function handleYearKeyDown(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeYears();\n    }\n  }\n\n  function handleMonthRedirect() {\n    monthListRef.current?.focus();\n  }\n\n  return (\n    <>\n      <HStack\n        className={clsx(\n          styles['mobile-date-picker-header'],\n          'tcn-mobile-date-picker-header'\n        )}\n        minWidth=\"35px\"\n        width=\"100%\"\n      >\n        <MobileButton\n          disabled={!state.canNavigateToPreviousMonth}\n          hierarchy=\"tertiary\"\n          width=\"auto\"\n          onClick={previous}\n        >\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n        <Spacer />\n        <HStack hAlign=\"center\" gap=\"4px\" width=\"auto\">\n          <MobileButton\n            ref={monthButtonRef}\n            hierarchy=\"tertiary\"\n            width=\"auto\"\n            onClick={openMonths}\n          >\n            {shortMonths[state.visibleMonth]}\n          </MobileButton>\n          <MobileButton\n            ref={yearButtonRef}\n            hierarchy=\"tertiary\"\n            width=\"auto\"\n            onClick={openYears}\n          >\n            {String(state.visibleYear)}\n          </MobileButton>\n        </HStack>\n        <Spacer />\n        <MobileButton\n          disabled={!state.canNavigateToNextMonth}\n          hierarchy=\"tertiary\"\n          width=\"auto\"\n          onClick={next}\n        >\n          <ChevronRightIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n      </HStack>\n\n      {monthOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-date-picker-overlay']}\n            onKeyDown={handleMonthKeyDown}\n          >\n            <MobileOverlayHeader title={selectMonthMessage} onClose={closeMonths} />\n            <VStack\n              ref={monthListRef}\n              tabIndex={0}\n              padding=\"16px\"\n              gap=\"8px\"\n              height=\"flex\"\n              overflowY=\"auto\"\n              className={styles['mobile-month-list']}\n            >\n              {longMonths.map((month, index) => (\n                <MobileButton\n                  key={index}\n                  hierarchy={index === state.visibleMonth ? 'primary' : 'secondary'}\n                  width=\"100%\"\n                  onClick={() => {\n                    selectMonth(String(index));\n                    closeMonths();\n                  }}\n                >\n                  {month}\n                </MobileButton>\n              ))}\n              <FocusRedirect onRedirect={handleMonthRedirect} />\n            </VStack>\n          </VStack>\n        </MobilePortal>\n      )}\n\n      {yearOpen && (\n        <MobilePortal>\n          <VStack className={styles['mobile-year-overlay']} onKeyDown={handleYearKeyDown}>\n            <MobileOverlayHeader title={selectYearMessage} onClose={closeYears} />\n            <MobileDatePickerYearSelector presenter={presenter} onClose={closeYears} />\n          </VStack>\n        </MobilePortal>\n      )}\n    </>\n  );\n}\n"],"names":["MobileDatePickerHeader","presenter","countryCode","selectMonthMessage","selectYearMessage","state","useSignalValue","monthOpen","setMonthOpen","useState","yearOpen","setYearOpen","monthButtonRef","useRef","yearButtonRef","monthListRef","longMonths","useMemo","getMonthsOfYear","shortMonths","selectMonth","value","previous","next","openMonths","closeMonths","openYears","closeYears","handleMonthKeyDown","event","handleYearKeyDown","handleMonthRedirect","jsxs","Fragment","HStack","clsx","styles","jsx","MobileButton","ChevronLeftIcon","Spacer","ChevronRightIcon","MobilePortal","VStack","MobileOverlayHeader","month","index","FocusRedirect","MobileDatePickerYearSelector"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBO,SAASA,GAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,mBAAAC,IAAoB;AACtB,GAAgC;AAC9B,QAAMC,IAAQC,EAAeL,EAAU,cAAc,GAC/C,CAACM,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GACxCG,IAAiBC,EAAiC,IAAI,GACtDC,IAAgBD,EAAiC,IAAI,GACrDE,IAAeF,EAA8B,IAAI,GAEjDG,IAAaC,EAAQ,MAAMC,EAAgBhB,GAAa,MAAM,GAAG,CAACA,CAAW,CAAC,GAC9EiB,IAAcF,EAAQ,MAAMC,EAAgBhB,GAAa,OAAO,GAAG,CAACA,CAAW,CAAC;AAEtF,WAASkB,EAAYC,GAAe;AAClC,IAAApB,EAAU,gBAAgB,OAAOoB,CAAK,CAAC;AAAA,EACzC;AAEA,WAASC,IAAW;AAClB,IAAArB,EAAU,gBAAgBI,EAAM,eAAe,CAAC;AAAA,EAClD;AAEA,WAASkB,IAAO;AACd,IAAAtB,EAAU,gBAAgBI,EAAM,eAAe,CAAC;AAAA,EAClD;AAEA,WAASmB,IAAa;AACpB,IAAAhB,EAAa,EAAI;AAAA,EACnB;AAEA,WAASiB,IAAc;AACrB,IAAAjB,EAAa,EAAK,GAClB,sBAAsB,MAAMI,EAAe,SAAS,MAAA,CAAO;AAAA,EAC7D;AAEA,WAASc,IAAY;AACnB,IAAAf,EAAY,EAAI;AAAA,EAClB;AAEA,WAASgB,IAAa;AACpB,IAAAhB,EAAY,EAAK,GACjB,sBAAsB,MAAMG,EAAc,SAAS,MAAA,CAAO;AAAA,EAC5D;AAEA,WAASc,EAAmBC,GAA4B;AACtD,IAAIA,EAAM,QAAQ,YAChBJ,EAAA;AAAA,EAEJ;AAEA,WAASK,EAAkBD,GAA4B;AACrD,IAAIA,EAAM,QAAQ,YAChBF,EAAA;AAAA,EAEJ;AAEA,WAASI,IAAsB;AAC7B,IAAAhB,EAAa,SAAS,MAAA;AAAA,EACxB;AAEA,SACE,gBAAAiB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACTC,EAAO,2BAA2B;AAAA,UAClC;AAAA,QAAA;AAAA,QAEF,UAAS;AAAA,QACT,OAAM;AAAA,QAEN,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,UAAU,CAACjC,EAAM;AAAA,cACjB,WAAU;AAAA,cACV,OAAM;AAAA,cACN,SAASiB;AAAA,cAET,UAAA,gBAAAe,EAACE,GAAA,EAAgB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEtCC,GAAA,EAAO;AAAA,4BACPN,GAAA,EAAO,QAAO,UAAS,KAAI,OAAM,OAAM,QACtC,UAAA;AAAA,YAAA,gBAAAG;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,KAAK1B;AAAA,gBACL,WAAU;AAAA,gBACV,OAAM;AAAA,gBACN,SAASY;AAAA,gBAER,UAAAL,EAAYd,EAAM,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,YAEjC,gBAAAgC;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,KAAKxB;AAAA,gBACL,WAAU;AAAA,gBACV,OAAM;AAAA,gBACN,SAASY;AAAA,gBAER,UAAA,OAAOrB,EAAM,WAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UAC3B,GACF;AAAA,4BACCmC,GAAA,EAAO;AAAA,UACR,gBAAAH;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,UAAU,CAACjC,EAAM;AAAA,cACjB,WAAU;AAAA,cACV,OAAM;AAAA,cACN,SAASkB;AAAA,cAET,UAAA,gBAAAc,EAACI,GAAA,EAAiB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACxC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGDlC,uBACEmC,GAAA,EACC,UAAA,gBAAAV;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,WAAWP,EAAO,4BAA4B;AAAA,QAC9C,WAAWR;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAS,EAACO,GAAA,EAAoB,OAAOzC,GAAoB,SAASsB,GAAa;AAAA,UACtE,gBAAAO;AAAA,YAACW;AAAA,YAAA;AAAA,cACC,KAAK5B;AAAA,cACL,UAAU;AAAA,cACV,SAAQ;AAAA,cACR,KAAI;AAAA,cACJ,QAAO;AAAA,cACP,WAAU;AAAA,cACV,WAAWqB,EAAO,mBAAmB;AAAA,cAEpC,UAAA;AAAA,gBAAApB,EAAW,IAAI,CAAC6B,GAAOC,MACtB,gBAAAT;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBAEC,WAAWQ,MAAUzC,EAAM,eAAe,YAAY;AAAA,oBACtD,OAAM;AAAA,oBACN,SAAS,MAAM;AACb,sBAAAe,EAAY,OAAO0B,CAAK,CAAC,GACzBrB,EAAA;AAAA,oBACF;AAAA,oBAEC,UAAAoB;AAAA,kBAAA;AAAA,kBARIC;AAAA,gBAAA,CAUR;AAAA,gBACD,gBAAAT,EAACU,GAAA,EAAc,YAAYhB,EAAA,CAAqB;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAClD;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,IAGDrB,KACC,gBAAA2B,EAACK,GAAA,EACC,UAAA,gBAAAV,EAACW,GAAA,EAAO,WAAWP,EAAO,qBAAqB,GAAG,WAAWN,GAC3D,UAAA;AAAA,MAAA,gBAAAO,EAACO,GAAA,EAAoB,OAAOxC,GAAmB,SAASuB,GAAY;AAAA,MACpE,gBAAAU,EAACW,GAAA,EAA6B,WAAA/C,GAAsB,SAAS0B,EAAA,CAAY;AAAA,IAAA,EAAA,CAC3E,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"mobile_date_picker_header.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_header.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport { Spacer } from '../../../stacks/spacer.js';\nimport React, { useMemo, useRef, useState } from 'react';\nimport { getMonthsOfYear } from '../../../utils/calendar/get_months_of_year.js';\nimport { DatePickerPresenter } from '../../../inputs/date_picker/date_picker_presenter.js';\nimport { MobileDatePickerYearSelector } from './mobile_date_picker_year_selector.js';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { MobilePortal } from '../../portal/mobile_portal.js';\nimport { MobileOverlayHeader } from './mobile_overlay_header.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { clsx } from 'clsx';\nimport styles from './mobile_date_picker_header.module.css';\n\nexport interface MobileDatePickerHeaderProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n  selectMonthMessage?: string;\n  selectYearMessage?: string;\n}\n\nexport function MobileDatePickerHeader({\n  presenter,\n  countryCode,\n  selectMonthMessage = 'Select Month',\n  selectYearMessage = 'Select Year',\n}: MobileDatePickerHeaderProps) {\n  const state = useSignalValue(presenter.stateBroadcast);\n  const [monthOpen, setMonthOpen] = useState(false);\n  const [yearOpen, setYearOpen] = useState(false);\n  const monthButtonRef = useRef<HTMLButtonElement | null>(null);\n  const yearButtonRef = useRef<HTMLButtonElement | null>(null);\n  const monthListRef = useRef<HTMLDivElement | null>(null);\n\n  const longMonths = useMemo(() => getMonthsOfYear(countryCode, 'long'), [countryCode]);\n  const shortMonths = useMemo(() => getMonthsOfYear(countryCode, 'short'), [countryCode]);\n\n  function selectMonth(value: string) {\n    presenter.setVisibleMonth(Number(value));\n  }\n\n  function previous() {\n    presenter.setVisibleMonth(state.visibleMonth - 1);\n  }\n\n  function next() {\n    presenter.setVisibleMonth(state.visibleMonth + 1);\n  }\n\n  function openMonths() {\n    setMonthOpen(true);\n  }\n\n  function closeMonths() {\n    setMonthOpen(false);\n    requestAnimationFrame(() => monthButtonRef.current?.focus());\n  }\n\n  function openYears() {\n    setYearOpen(true);\n  }\n\n  function closeYears() {\n    setYearOpen(false);\n    requestAnimationFrame(() => yearButtonRef.current?.focus());\n  }\n\n  function handleMonthKeyDown(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeMonths();\n    }\n  }\n\n  function handleYearKeyDown(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeYears();\n    }\n  }\n\n  function handleMonthRedirect() {\n    monthListRef.current?.focus();\n  }\n\n  return (\n    <>\n      <HStack\n        className={clsx(\n          styles['mobile-date-picker-header'],\n          'tcn-mobile-date-picker-header'\n        )}\n        minWidth=\"35px\"\n        width=\"100%\"\n      >\n        <MobileButton\n          disabled={!state.canNavigateToPreviousMonth}\n          hierarchy=\"tertiary\"\n          width=\"auto\"\n          onClick={previous}\n        >\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n        <Spacer />\n        <HStack hAlign=\"center\" gap=\"4px\" width=\"auto\">\n          <MobileButton\n            ref={monthButtonRef}\n            hierarchy=\"tertiary\"\n            width=\"auto\"\n            onClick={openMonths}\n          >\n            {shortMonths[state.visibleMonth]}\n          </MobileButton>\n          <MobileButton\n            ref={yearButtonRef}\n            hierarchy=\"tertiary\"\n            width=\"auto\"\n            onClick={openYears}\n          >\n            {String(state.visibleYear)}\n          </MobileButton>\n        </HStack>\n        <Spacer />\n        <MobileButton\n          disabled={!state.canNavigateToNextMonth}\n          hierarchy=\"tertiary\"\n          width=\"auto\"\n          onClick={next}\n        >\n          <ChevronRightIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n      </HStack>\n\n      {monthOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-date-picker-overlay']}\n            onKeyDown={handleMonthKeyDown}\n          >\n            <MobileOverlayHeader title={selectMonthMessage} onClose={closeMonths} />\n            <VStack\n              ref={monthListRef}\n              tabIndex={0}\n              padding=\"16px\"\n              gap=\"8px\"\n              height=\"flex\"\n              overflowY=\"auto\"\n              className={styles['mobile-month-list']}\n            >\n              {longMonths.map((month, index) => (\n                <MobileButton\n                  key={index}\n                  hierarchy={index === state.visibleMonth ? 'primary' : 'secondary'}\n                  width=\"100%\"\n                  onClick={() => {\n                    selectMonth(String(index));\n                    closeMonths();\n                  }}\n                >\n                  {month}\n                </MobileButton>\n              ))}\n              <FocusRedirect onRedirect={handleMonthRedirect} />\n            </VStack>\n          </VStack>\n        </MobilePortal>\n      )}\n\n      {yearOpen && (\n        <MobilePortal>\n          <VStack className={styles['mobile-year-overlay']} onKeyDown={handleYearKeyDown}>\n            <MobileOverlayHeader title={selectYearMessage} onClose={closeYears} />\n            <MobileDatePickerYearSelector presenter={presenter} onClose={closeYears} />\n          </VStack>\n        </MobilePortal>\n      )}\n    </>\n  );\n}\n"],"names":["MobileDatePickerHeader","presenter","countryCode","selectMonthMessage","selectYearMessage","state","useSignalValue","monthOpen","setMonthOpen","useState","yearOpen","setYearOpen","monthButtonRef","useRef","yearButtonRef","monthListRef","longMonths","useMemo","getMonthsOfYear","shortMonths","selectMonth","value","previous","next","openMonths","closeMonths","openYears","closeYears","handleMonthKeyDown","event","handleYearKeyDown","handleMonthRedirect","jsxs","Fragment","HStack","clsx","styles","jsx","MobileButton","ChevronLeftIcon","Spacer","ChevronRightIcon","MobilePortal","VStack","MobileOverlayHeader","month","index","FocusRedirect","MobileDatePickerYearSelector"],"mappings":"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"}

package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js

@@ -13,8 +13,11 @@ import "../../../utils/hooks/use_resize_observer.js";
 import "../../../utils/dnd/context.js";
 import "clsx";
 import "../../../draggable.module-BgelQsuJ.js";
+import "../../../utils/resize/context.js";
+import "../../../resizable.module-I6iyBAvM.js";
+import "../../../utils/resize/resize_handle.js";
 import { VStack as C } from "../../../stacks/v_stack.js";
-import '../../../mobile_date_picker_input.css';const ue = "_mobile-date-picker-overlay_099a224", pe = "_mobile-time-picker-overlay_6622396", H = { "mobile-date-picker-overlay": ue, "mobile-time-picker-overlay": pe }, Ie = le.forwardRef(function({
+import '../../../mobile_date_picker_input.css';const ue = "_mobile-date-picker-overlay_099a224", pe = "_mobile-time-picker-overlay_6622396", H = { "mobile-date-picker-overlay": ue, "mobile-time-picker-overlay": pe }, qe = le.forwardRef(function({
   value: i = /* @__PURE__ */ new Date(),
   onChange: D,
   onError: K,
@@ -185,6 +188,6 @@ import '../../../mobile_date_picker_input.css';const ue = "_mobile-date-picker-o
   ] });
 });
 export {
-  Ie as MobileDatePickerInput
+  qe as MobileDatePickerInput
 };
 //# sourceMappingURL=mobile_date_picker_input.js.map

package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile_date_picker_input.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { ButtonGroup } from '../../../actions/button/button_group/button_group.js';\nimport { MobilePortal } from '../../portal/mobile_portal.js';\nimport { MobileDatePicker } from './mobile_date_picker.js';\nimport { MobileDatePickerTimeSelector } from './mobile_date_picker_time_selector.js';\nimport { MobileOverlayHeader } from './mobile_overlay_header.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport type { DatePickerInputProps } from '../../../inputs/date_picker/date_picker_input.js';\nimport styles from './mobile_date_picker_input.module.css';\n\nexport interface MobileDatePickerInputProps extends DatePickerInputProps {\n  selectTimeMessage?: string;\n  selectMonthMessage?: string;\n  selectYearMessage?: string;\n}\n\nexport const MobileDatePickerInput = React.forwardRef<\n  HTMLButtonElement,\n  MobileDatePickerInputProps\n>(function MobileDatePickerInput(\n  {\n    value = new Date(),\n    onChange,\n    onError,\n    min = new Date('01/01/1924'),\n    max = new Date('01/01/2124'),\n    disabled,\n    width = '100%',\n    maxWidth,\n    minWidth,\n    showTime = false,\n    timeIntervalInMinutes = 15,\n    hierarchy = 'secondary',\n    disabledDates,\n    selectDateMessage = 'Select Date',\n    selectTimeMessage = 'Select Time',\n    selectMonthMessage,\n    selectYearMessage,\n    countryCode,\n    renderActions,\n    onTimeSelected,\n    ...props\n  },\n  ref\n) {\n  const [dateOpen, setDateOpen] = useState(false);\n  const [timeOpen, setTimeOpen] = useState(false);\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n  const timeRef = useRef<HTMLDivElement | null>(null);\n  const dateButtonRef = useRef<HTMLButtonElement | null>(null);\n  const timeButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setDateButtonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      dateButtonRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n      }\n    },\n    [ref]\n  );\n\n  const dateFormatter = useMemo(() => {\n    return new Intl.DateTimeFormat(countryCode, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  }, [countryCode]);\n\n  const timeFormatter = useMemo(() => {\n    return new Intl.DateTimeFormat(countryCode, {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    });\n  }, [countryCode]);\n\n  const formattedDate = value != null ? dateFormatter.format(value) : selectDateMessage;\n  const formattedTime = value != null ? timeFormatter.format(value) : selectTimeMessage;\n\n  function openDatePicker() {\n    setDateOpen(true);\n  }\n\n  function closeDatePicker() {\n    setDateOpen(false);\n    requestAnimationFrame(() => dateButtonRef.current?.focus());\n  }\n\n  function openTimePicker() {\n    setTimeOpen(true);\n  }\n\n  function closeTimePicker() {\n    setTimeOpen(false);\n    requestAnimationFrame(() => timeButtonRef.current?.focus());\n  }\n\n  useLayoutEffect(() => {\n    if (dateOpen) {\n      requestAnimationFrame(() => pickerRef.current?.focus());\n    }\n  }, [dateOpen]);\n\n  useLayoutEffect(() => {\n    if (timeOpen) {\n      requestAnimationFrame(() => timeRef.current?.focus());\n    }\n  }, [timeOpen]);\n\n  function handleDateEscape(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeDatePicker();\n    }\n  }\n\n  function handleTimeEscape(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeTimePicker();\n    }\n  }\n\n  function handleDateRedirect() {\n    pickerRef.current?.focus();\n  }\n\n  function handleTimeRedirect() {\n    timeRef.current?.focus();\n  }\n\n  function dateSelected(date: Date | null) {\n    onChange?.(date);\n    closeDatePicker();\n  }\n\n  function timeSelected(hour: number, minutes: number, seconds: number) {\n    if (value != null) {\n      const updated = new Date(value);\n      updated.setHours(hour, minutes, seconds);\n      onChange?.(updated);\n    }\n    onTimeSelected?.(hour, minutes, seconds);\n    closeTimePicker();\n  }\n\n  return (\n    <>\n      {showTime ? (\n        <ButtonGroup hierarchy={hierarchy} width={width}>\n          <MobileButton\n            ref={setDateButtonRef}\n            hAlign=\"start\"\n            disabled={disabled}\n            onClick={openDatePicker}\n            width=\"flex\"\n            {...props}\n          >\n            <span className=\"ellipsis\">{formattedDate}</span>\n          </MobileButton>\n          <MobileButton\n            ref={timeButtonRef}\n            hAlign=\"start\"\n            disabled={disabled || value == null}\n            onClick={openTimePicker}\n            width=\"auto\"\n          >\n            <span className=\"ellipsis\">{formattedTime}</span>\n          </MobileButton>\n        </ButtonGroup>\n      ) : (\n        <MobileButton\n          ref={setDateButtonRef}\n          hAlign=\"start\"\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openDatePicker}\n          width={width}\n          maxWidth={maxWidth}\n          {...props}\n        >\n          <span className=\"ellipsis\">{formattedDate}</span>\n        </MobileButton>\n      )}\n\n      {dateOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-date-picker-overlay']}\n            onKeyDown={handleDateEscape}\n          >\n            <MobileOverlayHeader title={selectDateMessage} onClose={closeDatePicker} />\n            <MobileDatePicker\n              ref={pickerRef}\n              value={value}\n              onChange={dateSelected}\n              min={min}\n              max={max}\n              onError={onError}\n              disabled={disabled}\n              disabledDates={disabledDates}\n              countryCode={countryCode}\n              renderActions={renderActions}\n              selectMonthMessage={selectMonthMessage}\n              selectYearMessage={selectYearMessage}\n            />\n            <FocusRedirect onRedirect={handleDateRedirect} />\n          </VStack>\n        </MobilePortal>\n      )}\n\n      {timeOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-time-picker-overlay']}\n            onKeyDown={handleTimeEscape}\n          >\n            <MobileOverlayHeader title={selectTimeMessage} onClose={closeTimePicker} />\n            <MobileDatePickerTimeSelector\n              ref={timeRef}\n              origin={value}\n              min={min}\n              max={max}\n              intervalInMinutes={timeIntervalInMinutes}\n              disabled={disabled}\n              onSelect={(hour, minutes, seconds) => {\n                timeSelected(hour, minutes, seconds);\n              }}\n            />\n            <FocusRedirect onRedirect={handleTimeRedirect} />\n          </VStack>\n        </MobilePortal>\n      )}\n    </>\n  );\n});\n"],"names":["MobileDatePickerInput","React","value","onChange","onError","min","max","disabled","width","maxWidth","minWidth","showTime","timeIntervalInMinutes","hierarchy","disabledDates","selectDateMessage","selectTimeMessage","selectMonthMessage","selectYearMessage","countryCode","renderActions","onTimeSelected","props","ref","dateOpen","setDateOpen","useState","timeOpen","setTimeOpen","pickerRef","useRef","timeRef","dateButtonRef","timeButtonRef","setDateButtonRef","useCallback","node","dateFormatter","useMemo","timeFormatter","formattedDate","formattedTime","openDatePicker","closeDatePicker","openTimePicker","closeTimePicker","useLayoutEffect","handleDateEscape","event","handleTimeEscape","handleDateRedirect","handleTimeRedirect","dateSelected","date","timeSelected","hour","minutes","seconds","updated","jsxs","Fragment","ButtonGroup","jsx","MobileButton","MobilePortal","VStack","styles","MobileOverlayHeader","MobileDatePicker","FocusRedirect","MobileDatePickerTimeSelector"],"mappings":"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"}
+{"version":3,"file":"mobile_date_picker_input.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { ButtonGroup } from '../../../actions/button/button_group/button_group.js';\nimport { MobilePortal } from '../../portal/mobile_portal.js';\nimport { MobileDatePicker } from './mobile_date_picker.js';\nimport { MobileDatePickerTimeSelector } from './mobile_date_picker_time_selector.js';\nimport { MobileOverlayHeader } from './mobile_overlay_header.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport type { DatePickerInputProps } from '../../../inputs/date_picker/date_picker_input.js';\nimport styles from './mobile_date_picker_input.module.css';\n\nexport interface MobileDatePickerInputProps extends DatePickerInputProps {\n  selectTimeMessage?: string;\n  selectMonthMessage?: string;\n  selectYearMessage?: string;\n}\n\nexport const MobileDatePickerInput = React.forwardRef<\n  HTMLButtonElement,\n  MobileDatePickerInputProps\n>(function MobileDatePickerInput(\n  {\n    value = new Date(),\n    onChange,\n    onError,\n    min = new Date('01/01/1924'),\n    max = new Date('01/01/2124'),\n    disabled,\n    width = '100%',\n    maxWidth,\n    minWidth,\n    showTime = false,\n    timeIntervalInMinutes = 15,\n    hierarchy = 'secondary',\n    disabledDates,\n    selectDateMessage = 'Select Date',\n    selectTimeMessage = 'Select Time',\n    selectMonthMessage,\n    selectYearMessage,\n    countryCode,\n    renderActions,\n    onTimeSelected,\n    ...props\n  },\n  ref\n) {\n  const [dateOpen, setDateOpen] = useState(false);\n  const [timeOpen, setTimeOpen] = useState(false);\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n  const timeRef = useRef<HTMLDivElement | null>(null);\n  const dateButtonRef = useRef<HTMLButtonElement | null>(null);\n  const timeButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setDateButtonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      dateButtonRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n      }\n    },\n    [ref]\n  );\n\n  const dateFormatter = useMemo(() => {\n    return new Intl.DateTimeFormat(countryCode, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  }, [countryCode]);\n\n  const timeFormatter = useMemo(() => {\n    return new Intl.DateTimeFormat(countryCode, {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    });\n  }, [countryCode]);\n\n  const formattedDate = value != null ? dateFormatter.format(value) : selectDateMessage;\n  const formattedTime = value != null ? timeFormatter.format(value) : selectTimeMessage;\n\n  function openDatePicker() {\n    setDateOpen(true);\n  }\n\n  function closeDatePicker() {\n    setDateOpen(false);\n    requestAnimationFrame(() => dateButtonRef.current?.focus());\n  }\n\n  function openTimePicker() {\n    setTimeOpen(true);\n  }\n\n  function closeTimePicker() {\n    setTimeOpen(false);\n    requestAnimationFrame(() => timeButtonRef.current?.focus());\n  }\n\n  useLayoutEffect(() => {\n    if (dateOpen) {\n      requestAnimationFrame(() => pickerRef.current?.focus());\n    }\n  }, [dateOpen]);\n\n  useLayoutEffect(() => {\n    if (timeOpen) {\n      requestAnimationFrame(() => timeRef.current?.focus());\n    }\n  }, [timeOpen]);\n\n  function handleDateEscape(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeDatePicker();\n    }\n  }\n\n  function handleTimeEscape(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeTimePicker();\n    }\n  }\n\n  function handleDateRedirect() {\n    pickerRef.current?.focus();\n  }\n\n  function handleTimeRedirect() {\n    timeRef.current?.focus();\n  }\n\n  function dateSelected(date: Date | null) {\n    onChange?.(date);\n    closeDatePicker();\n  }\n\n  function timeSelected(hour: number, minutes: number, seconds: number) {\n    if (value != null) {\n      const updated = new Date(value);\n      updated.setHours(hour, minutes, seconds);\n      onChange?.(updated);\n    }\n    onTimeSelected?.(hour, minutes, seconds);\n    closeTimePicker();\n  }\n\n  return (\n    <>\n      {showTime ? (\n        <ButtonGroup hierarchy={hierarchy} width={width}>\n          <MobileButton\n            ref={setDateButtonRef}\n            hAlign=\"start\"\n            disabled={disabled}\n            onClick={openDatePicker}\n            width=\"flex\"\n            {...props}\n          >\n            <span className=\"ellipsis\">{formattedDate}</span>\n          </MobileButton>\n          <MobileButton\n            ref={timeButtonRef}\n            hAlign=\"start\"\n            disabled={disabled || value == null}\n            onClick={openTimePicker}\n            width=\"auto\"\n          >\n            <span className=\"ellipsis\">{formattedTime}</span>\n          </MobileButton>\n        </ButtonGroup>\n      ) : (\n        <MobileButton\n          ref={setDateButtonRef}\n          hAlign=\"start\"\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openDatePicker}\n          width={width}\n          maxWidth={maxWidth}\n          {...props}\n        >\n          <span className=\"ellipsis\">{formattedDate}</span>\n        </MobileButton>\n      )}\n\n      {dateOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-date-picker-overlay']}\n            onKeyDown={handleDateEscape}\n          >\n            <MobileOverlayHeader title={selectDateMessage} onClose={closeDatePicker} />\n            <MobileDatePicker\n              ref={pickerRef}\n              value={value}\n              onChange={dateSelected}\n              min={min}\n              max={max}\n              onError={onError}\n              disabled={disabled}\n              disabledDates={disabledDates}\n              countryCode={countryCode}\n              renderActions={renderActions}\n              selectMonthMessage={selectMonthMessage}\n              selectYearMessage={selectYearMessage}\n            />\n            <FocusRedirect onRedirect={handleDateRedirect} />\n          </VStack>\n        </MobilePortal>\n      )}\n\n      {timeOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-time-picker-overlay']}\n            onKeyDown={handleTimeEscape}\n          >\n            <MobileOverlayHeader title={selectTimeMessage} onClose={closeTimePicker} />\n            <MobileDatePickerTimeSelector\n              ref={timeRef}\n              origin={value}\n              min={min}\n              max={max}\n              intervalInMinutes={timeIntervalInMinutes}\n              disabled={disabled}\n              onSelect={(hour, minutes, seconds) => {\n                timeSelected(hour, minutes, seconds);\n              }}\n            />\n            <FocusRedirect onRedirect={handleTimeRedirect} />\n          </VStack>\n        </MobilePortal>\n      )}\n    </>\n  );\n});\n"],"names":["MobileDatePickerInput","React","value","onChange","onError","min","max","disabled","width","maxWidth","minWidth","showTime","timeIntervalInMinutes","hierarchy","disabledDates","selectDateMessage","selectTimeMessage","selectMonthMessage","selectYearMessage","countryCode","renderActions","onTimeSelected","props","ref","dateOpen","setDateOpen","useState","timeOpen","setTimeOpen","pickerRef","useRef","timeRef","dateButtonRef","timeButtonRef","setDateButtonRef","useCallback","node","dateFormatter","useMemo","timeFormatter","formattedDate","formattedTime","openDatePicker","closeDatePicker","openTimePicker","closeTimePicker","useLayoutEffect","handleDateEscape","event","handleTimeEscape","handleDateRedirect","handleTimeRedirect","dateSelected","date","timeSelected","hour","minutes","seconds","updated","jsxs","Fragment","ButtonGroup","jsx","MobileButton","MobilePortal","VStack","styles","MobileOverlayHeader","MobileDatePicker","FocusRedirect","MobileDatePickerTimeSelector"],"mappings":"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"}

package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js

@@ -21,17 +21,20 @@ import "../../../utils/hooks/use_resize_observer.js";
 import "../../../utils/dnd/context.js";
 import { clsx as Y } from "clsx";
 import "../../../draggable.module-BgelQsuJ.js";
+import "../../../utils/resize/context.js";
+import "../../../resizable.module-I6iyBAvM.js";
+import "../../../utils/resize/resize_handle.js";
 import '../../../mobile_date_picker_year_selector.css';const $ = "_mobile-year-selector_31f3a58", E = "_mobile-year-button_494c1af", g = { "mobile-year-selector": $, "mobile-year-button": E };
-function me({
+function ue({
   presenter: n,
   onClose: x
 }) {
   const { min: c, max: s, visibleYear: i, visibleMonth: F } = z(
     n.stateBroadcast
-  ), [a, m] = B(0), l = _(null), S = c == null ? -1 / 0 : c.getFullYear(), k = s == null ? 1 / 0 : s.getFullYear(), r = [], f = i % 20, p = i - f + a, w = p + 19;
+  ), [a, m] = B(0), l = _(null), S = c == null ? -1 / 0 : c.getFullYear(), k = s == null ? 1 / 0 : s.getFullYear(), r = [], p = i % 20, f = i - p + a, w = f + 19;
   for (let o = 0; o < 20; o++) {
     const t = new Date(i, F, 1);
-    t.setFullYear(i - f + o + a);
+    t.setFullYear(i - p + o + a);
     const u = t.getFullYear() > k || t.getFullYear() < S;
     r.push(
       /* @__PURE__ */ e(
@@ -91,7 +94,7 @@ function me({
               selectable: !1,
               emphasis: "faint",
               hierarchy: "tertiary",
-              children: `${p}-${w}`
+              children: `${f}-${w}`
             }
           ),
           /* @__PURE__ */ e(y, {}),
@@ -104,6 +107,6 @@ function me({
   );
 }
 export {
-  me as MobileDatePickerYearSelector
+  ue as MobileDatePickerYearSelector
 };
 //# sourceMappingURL=mobile_date_picker_year_selector.js.map

package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile_date_picker_year_selector.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport { Spacer } from '../../../stacks/spacer.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../../typography/index.js';\nimport { DatePickerPresenter } from '../../../inputs/date_picker/date_picker_presenter.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { clsx } from 'clsx';\nimport styles from './mobile_date_picker_year_selector.module.css';\n\nexport interface MobileDatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function MobileDatePickerYearSelector({\n  presenter,\n  onClose,\n}: MobileDatePickerYearSelectorProps) {\n  const { min, max, visibleYear, visibleMonth } = useSignalValue(\n    presenter.stateBroadcast\n  );\n\n  const [offset, setOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const minYear = min == null ? -Infinity : min.getFullYear();\n  const maxYear = max == null ? Infinity : max.getFullYear();\n  const years: React.ReactNode[] = [];\n  const remainder = visibleYear % 20;\n  const firstYear = visibleYear - remainder + offset;\n  const lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    const disabled = date.getFullYear() > maxYear || date.getFullYear() < minYear;\n\n    years.push(\n      <button\n        key={x}\n        disabled={disabled}\n        className={clsx(styles['mobile-year-button'], 'tcn-date-picker-year-button')}\n        data-is-disabled={String(disabled)}\n        data-is-selected={String(date.getFullYear() === visibleYear)}\n        onClick={() => {\n          presenter.setVisibleYear(date.getFullYear());\n          onClose();\n        }}\n      >\n        <BodyText>{date.getFullYear()}</BodyText>\n      </button>\n    );\n  }\n\n  function focus() {\n    containerRef.current?.focus();\n  }\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\n\n  const rows = [\n    years.slice(0, 4),\n    years.slice(4, 8),\n    years.slice(8, 12),\n    years.slice(12, 16),\n    years.slice(16, 20),\n  ];\n\n  function prev() {\n    setOffset(offset - 20);\n  }\n\n  function next() {\n    setOffset(offset + 20);\n  }\n\n  return (\n    <VStack\n      ref={containerRef}\n      tabIndex={0}\n      padding=\"8px\"\n      width=\"100%\"\n      className={clsx(\n        styles['mobile-year-selector'],\n        'tcn-mobile-date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <MobileButton onClick={prev} hierarchy=\"tertiary\" width=\"auto\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <MobileButton hierarchy=\"tertiary\" width=\"auto\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </MobileButton>\n      </HStack>\n      {rows.map((row, index) => (\n        <HStack key={index} gap=\"4px\" width=\"100%\">\n          {row}\n        </HStack>\n      ))}\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["MobileDatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","date","disabled","jsx","clsx","styles","BodyText","focus","useEffect","rows","prev","next","jsxs","VStack","HStack","MobileButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","row","index","FocusRedirect"],"mappings":"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"}
+{"version":3,"file":"mobile_date_picker_year_selector.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { HStack } from '../../../stacks/h_stack.js';\nimport { Spacer } from '../../../stacks/spacer.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../../typography/index.js';\nimport { DatePickerPresenter } from '../../../inputs/date_picker/date_picker_presenter.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { clsx } from 'clsx';\nimport styles from './mobile_date_picker_year_selector.module.css';\n\nexport interface MobileDatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function MobileDatePickerYearSelector({\n  presenter,\n  onClose,\n}: MobileDatePickerYearSelectorProps) {\n  const { min, max, visibleYear, visibleMonth } = useSignalValue(\n    presenter.stateBroadcast\n  );\n\n  const [offset, setOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const minYear = min == null ? -Infinity : min.getFullYear();\n  const maxYear = max == null ? Infinity : max.getFullYear();\n  const years: React.ReactNode[] = [];\n  const remainder = visibleYear % 20;\n  const firstYear = visibleYear - remainder + offset;\n  const lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    const disabled = date.getFullYear() > maxYear || date.getFullYear() < minYear;\n\n    years.push(\n      <button\n        key={x}\n        disabled={disabled}\n        className={clsx(styles['mobile-year-button'], 'tcn-date-picker-year-button')}\n        data-is-disabled={String(disabled)}\n        data-is-selected={String(date.getFullYear() === visibleYear)}\n        onClick={() => {\n          presenter.setVisibleYear(date.getFullYear());\n          onClose();\n        }}\n      >\n        <BodyText>{date.getFullYear()}</BodyText>\n      </button>\n    );\n  }\n\n  function focus() {\n    containerRef.current?.focus();\n  }\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\n\n  const rows = [\n    years.slice(0, 4),\n    years.slice(4, 8),\n    years.slice(8, 12),\n    years.slice(12, 16),\n    years.slice(16, 20),\n  ];\n\n  function prev() {\n    setOffset(offset - 20);\n  }\n\n  function next() {\n    setOffset(offset + 20);\n  }\n\n  return (\n    <VStack\n      ref={containerRef}\n      tabIndex={0}\n      padding=\"8px\"\n      width=\"100%\"\n      className={clsx(\n        styles['mobile-year-selector'],\n        'tcn-mobile-date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <MobileButton onClick={prev} hierarchy=\"tertiary\" width=\"auto\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <MobileButton hierarchy=\"tertiary\" width=\"auto\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </MobileButton>\n      </HStack>\n      {rows.map((row, index) => (\n        <HStack key={index} gap=\"4px\" width=\"100%\">\n          {row}\n        </HStack>\n      ))}\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["MobileDatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","date","disabled","jsx","clsx","styles","BodyText","focus","useEffect","rows","prev","next","jsxs","VStack","HStack","MobileButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","row","index","FocusRedirect"],"mappings":"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"}

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

@@ -9,16 +9,19 @@ import "../../../../utils/hooks/use_resize_observer.js";
 import "../../../../utils/dnd/context.js";
 import "clsx";
 import "../../../../draggable.module-BgelQsuJ.js";
+import "../../../../utils/resize/context.js";
+import "../../../../resizable.module-I6iyBAvM.js";
+import "../../../../utils/resize/resize_handle.js";
 import { useTabs as T } from "../context.js";
 import { useTabLink as C } from "./use_tab_link.js";
-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(
+const H = x(
+  ({ children: m, value: t, onClick: o, minWidth: n, maxWidth: p, id: M, ...e }, a) => {
+    const { ref: s, isMatch: r } = C(t), i = T(), c = I(s, a), d = W(
       (b) => {
         i.onChange?.(t), o?.(b);
       },
       [i, t, o]
-    ), f = i.minItemWidth ?? n, h = i.maxItemWidth ?? e;
+    ), f = i.minItemWidth ?? n, h = i.maxItemWidth ?? p;
     return /* @__PURE__ */ k(
       l,
       {
@@ -30,13 +33,13 @@ const D = x(
         id: `tab-${t}`,
         "aria-controls": `tabpanel-${t}`,
         tabIndex: r ? 0 : -1,
-        ...a,
+        ...e,
         children: m
       }
     );
   }
 );
 export {
-  D as TabLink
+  H as TabLink
 };
 //# sourceMappingURL=tab_link.js.map

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, 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;"}
+{"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;"}