@tcn/ui 0.11.0 → 0.12.0

package/dist/feedback/index.d.ts

@@ -1,4 +1,5 @@
 export * from './loading/loading.js';
 export * from './progress/progress_bar.js';
+export * from './progress/progress.js';
 export * from './lazy/lazy.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC"}

package/dist/feedback/index.js

@@ -1,9 +1,11 @@
 import { Loading as e } from "./loading/loading.js";
-import { ProgressBar as f } from "./progress/progress_bar.js";
-import { Lazy as p } from "./lazy/lazy.js";
+import { P as a } from "../progress_bar-CPP0Jyv-.js";
+import { Progress as m } from "./progress/progress.js";
+import { Lazy as t } from "./lazy/lazy.js";
 export {
-  p as Lazy,
+  t as Lazy,
   e as Loading,
-  f as ProgressBar
+  m as Progress,
+  a as ProgressBar
 };
 //# sourceMappingURL=index.js.map

package/dist/feedback/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/feedback/progress/progress.d.ts

@@ -0,0 +1,7 @@
+import { default as React, HTMLAttributes } from 'react';
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    message: string;
+    value: number;
+}
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=progress.d.ts.map

package/dist/feedback/progress/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/feedback/progress/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAU9C,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,QAAQ,sFAuBnB,CAAC"}

package/dist/feedback/progress/progress.js

@@ -0,0 +1,38 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import c from "react";
+import { BodyText as e } from "../../typography/body_text/body_text.js";
+import "../../typography/callout/callout.js";
+import "../../typography/caption/caption.js";
+import "../../typography/footnote/footnote.js";
+import "../../typography/headline/headline.js";
+import "../../typography/subheadline/subheadline.js";
+import "../../typography/title/title.js";
+import { HStack as a } from "../../stacks/h_stack.js";
+import { Spacer as s } from "../../stacks/spacer.js";
+import { VStack as f } from "../../stacks/v_stack.js";
+import d from "clsx";
+import { P as l, s as g } from "../../progress_bar-CPP0Jyv-.js";
+const H = c.forwardRef(function({ message: i, value: o, ...m }, p) {
+  const n = `${(o * 100).toFixed(0)}%`;
+  return /* @__PURE__ */ t(
+    f,
+    {
+      ref: p,
+      className: d(g["progress-container"], "tcn-progress-container"),
+      ...m,
+      children: [
+        /* @__PURE__ */ t(a, { height: "auto", vAlign: "end", children: [
+          /* @__PURE__ */ r(e, { children: i }),
+          /* @__PURE__ */ r(s, {}),
+          /* @__PURE__ */ r(s, { width: "8px" }),
+          /* @__PURE__ */ r(e, { size: "sm", style: { flexShrink: 0 }, children: n })
+        ] }),
+        /* @__PURE__ */ r(l, { value: o })
+      ]
+    }
+  );
+});
+export {
+  H as Progress
+};
+//# sourceMappingURL=progress.js.map

package/dist/feedback/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sources":["../../../src/feedback/progress/progress.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { BodyText } from '../../typography/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport clsx from 'clsx';\n\nimport styles from './progress_bar.module.css';\nimport { ProgressBar } from './progress_bar.js';\n\nexport interface ProgressProps extends HTMLAttributes<HTMLDivElement> {\n  message: string;\n  value: number;\n}\n\nexport const Progress = React.forwardRef(function Progress(\n  { message, value, ...props }: ProgressProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const progressPercent = `${(value * 100).toFixed(0)}%`;\n\n  return (\n    <VStack\n      ref={ref}\n      className={clsx(styles['progress-container'], 'tcn-progress-container')}\n      {...props}\n    >\n      <HStack height=\"auto\" vAlign=\"end\">\n        <BodyText>{message}</BodyText>\n        <Spacer />\n        <Spacer width=\"8px\" />\n        <BodyText size=\"sm\" style={{ flexShrink: 0 }}>\n          {progressPercent}\n        </BodyText>\n      </HStack>\n      <ProgressBar value={value} />\n    </VStack>\n  );\n});\n"],"names":["Progress","React","message","value","props","ref","progressPercent","jsxs","VStack","clsx","styles","HStack","jsx","BodyText","Spacer","ProgressBar"],"mappings":";;;;;;;;;;;;;;AAeO,MAAMA,IAAWC,EAAM,WAAW,SACvC,EAAE,SAAAC,GAAS,OAAAC,GAAO,GAAGC,EAAA,GACrBC,GACA;AACA,QAAMC,IAAkB,IAAIH,IAAQ,KAAK,QAAQ,CAAC,CAAC;AAEnD,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWI,EAAKC,EAAO,oBAAoB,GAAG,wBAAwB;AAAA,MACrE,GAAGN;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAG,EAACI,GAAA,EAAO,QAAO,QAAO,QAAO,OAC3B,UAAA;AAAA,UAAA,gBAAAC,EAACC,KAAU,UAAAX,EAAA,CAAQ;AAAA,4BAClBY,GAAA,EAAO;AAAA,UACR,gBAAAF,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,UACpB,gBAAAF,EAACC,KAAS,MAAK,MAAK,OAAO,EAAE,YAAY,EAAA,GACtC,UAAAP,EAAA,CACH;AAAA,QAAA,GACF;AAAA,QACA,gBAAAM,EAACG,KAAY,OAAAZ,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjC,CAAC;"}

package/dist/feedback/progress/progress_bar.d.ts

@@ -1,6 +1,5 @@
 import { default as React, HTMLAttributes } from 'react';
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
-    message: string;
     value: number;
 }
 export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/feedback/progress/progress_bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress_bar.d.ts","sourceRoot":"","sources":["../../../src/feedback/progress/progress_bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAU9C,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,yFAgCtB,CAAC"}
+{"version":3,"file":"progress_bar.d.ts","sourceRoot":"","sources":["../../../src/feedback/progress/progress_bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM9C,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,yFAyBtB,CAAC"}

package/dist/feedback/progress/progress_bar.js

@@ -1,49 +1,9 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import m from "react";
-import { BodyText as t } from "../../typography/body_text/body_text.js";
-import "../../typography/callout/callout.js";
-import "../../typography/caption/caption.js";
-import "../../typography/footnote/footnote.js";
-import "../../typography/headline/headline.js";
-import "../../typography/subheadline/subheadline.js";
-import "../../typography/title/title.js";
-import { HStack as l } from "../../stacks/h_stack.js";
-import { Spacer as a } from "../../stacks/spacer.js";
-import { VStack as d } from "../../stacks/v_stack.js";
-import { ZStack as b } from "../../stacks/z_stack.js";
-import f from "clsx";
-import '../../progress_bar.css';const h = "_progress-bar-container_014b4d9", _ = "_progress-bar-background_9176cc0", x = "_progress-bar_057c33d", k = "_progress-bar-fill_00854f0", u = "_moveStripes_d219e85", s = { "progress-bar-container": h, "progress-bar-background": _, "progress-bar": x, "progress-bar-fill": k, moveStripes: u }, T = m.forwardRef(function({ message: i, value: p, ...c }, n) {
-  const o = `${(p * 100).toFixed(0)}%`, g = { "--progress-percentage": o };
-  return /* @__PURE__ */ e(
-    d,
-    {
-      ref: n,
-      className: f(s["progress-bar-container"], "tcn-progress-bar"),
-      ...c,
-      children: [
-        /* @__PURE__ */ e(l, { height: "auto", vAlign: "end", children: [
-          /* @__PURE__ */ r(t, { children: i }),
-          /* @__PURE__ */ r(a, {}),
-          /* @__PURE__ */ r(a, { width: "8px" }),
-          /* @__PURE__ */ r(t, { size: "sm", style: { flexShrink: 0 }, children: o })
-        ] }),
-        /* @__PURE__ */ e(b, { height: "8px", hAlign: "start", children: [
-          /* @__PURE__ */ r("div", { className: s["progress-bar-background"] }),
-          /* @__PURE__ */ r(
-            "div",
-            {
-              "data-finished": o === "100%",
-              style: g,
-              className: s["progress-bar-fill"]
-            }
-          ),
-          /* @__PURE__ */ r("div", { className: s["progress-bar"] })
-        ] })
-      ]
-    }
-  );
-});
+import "react/jsx-runtime";
+import "react";
+import "../../stacks/z_stack.js";
+import "clsx";
+import { P as s } from "../../progress_bar-CPP0Jyv-.js";
 export {
-  T as ProgressBar
+  s as ProgressBar
 };
 //# sourceMappingURL=progress_bar.js.map

package/dist/feedback/progress/progress_bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress_bar.js","sources":["../../../src/feedback/progress/progress_bar.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { BodyText } from '../../typography/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport clsx from 'clsx';\n\nimport styles from './progress_bar.module.css';\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  message: string;\n  value: number;\n}\n\nexport const ProgressBar = React.forwardRef(function ProgressBar(\n  { message, value, ...props }: ProgressBarProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const progressPercent = `${(value * 100).toFixed(0)}%`;\n  const styleVariables: any = { '--progress-percentage': progressPercent };\n\n  return (\n    <VStack\n      ref={ref}\n      className={clsx(styles['progress-bar-container'], 'tcn-progress-bar')}\n      {...props}\n    >\n      <HStack height=\"auto\" vAlign=\"end\">\n        <BodyText>{message}</BodyText>\n        <Spacer />\n        <Spacer width=\"8px\" />\n        <BodyText size=\"sm\" style={{ flexShrink: 0 }}>\n          {progressPercent}\n        </BodyText>\n      </HStack>\n      <ZStack height=\"8px\" hAlign=\"start\">\n        <div className={styles['progress-bar-background']}></div>\n        <div\n          data-finished={progressPercent === '100%'}\n          style={styleVariables}\n          className={styles['progress-bar-fill']}\n        />\n        <div className={styles['progress-bar']}></div>\n      </ZStack>\n    </VStack>\n  );\n});\n"],"names":["ProgressBar","React","message","value","props","ref","progressPercent","styleVariables","jsxs","VStack","clsx","styles","HStack","jsx","BodyText","Spacer","ZStack"],"mappings":";;;;;;;;;;;;;;8SAeaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,SAAAC,GAAS,OAAAC,GAAO,GAAGC,EAAA,GACrBC,GACA;AACA,QAAMC,IAAkB,IAAIH,IAAQ,KAAK,QAAQ,CAAC,CAAC,KAC7CI,IAAsB,EAAE,yBAAyBD,EAAA;AAEvD,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,WAAWK,EAAKC,EAAO,wBAAwB,GAAG,kBAAkB;AAAA,MACnE,GAAGP;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACI,GAAA,EAAO,QAAO,QAAO,QAAO,OAC3B,UAAA;AAAA,UAAA,gBAAAC,EAACC,KAAU,UAAAZ,EAAA,CAAQ;AAAA,4BAClBa,GAAA,EAAO;AAAA,UACR,gBAAAF,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,UACpB,gBAAAF,EAACC,KAAS,MAAK,MAAK,OAAO,EAAE,YAAY,EAAA,GACtC,UAAAR,EAAA,CACH;AAAA,QAAA,GACF;AAAA,QACA,gBAAAE,EAACQ,GAAA,EAAO,QAAO,OAAM,QAAO,SAC1B,UAAA;AAAA,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWF,EAAO,yBAAyB,EAAA,CAAG;AAAA,UACnD,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,iBAAeP,MAAoB;AAAA,cACnC,OAAOC;AAAA,cACP,WAAWI,EAAO,mBAAmB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEvC,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,cAAc,EAAA,CAAG;AAAA,QAAA,EAAA,CAC1C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"progress_bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/form/field/common/status_input/status_input.js

@@ -4,7 +4,8 @@ import { LockTwoIcon as f } from "@tcn/icons/lock_two_icon.js";
 import { HStack as m } from "../../../../stacks/h_stack.js";
 import p from "react";
 import { Loading as g } from "../../../../feedback/loading/loading.js";
-import "../../../../feedback/progress/progress_bar.js";
+import "../../../../progress_bar-CPP0Jyv-.js";
+import "../../../../feedback/progress/progress.js";
 import "@tcn/state";
 import "../../../../stacks/v_stack.js";
 import { clsx as o } from "clsx";
@@ -25,7 +26,7 @@ import '../../../../status_input.css';const A = "_field-error_6d015c9", x = "_fi
     default:
       return null;
   }
-}, v = p.forwardRef(function({ children: i, state: t = "default", className: s, ...l }, c) {
+}, y = p.forwardRef(function({ children: i, state: t = "default", className: s, ...l }, c) {
   const d = t === "default" || t === "error";
   return /* @__PURE__ */ a(
     m,
@@ -51,6 +52,6 @@ import '../../../../status_input.css';const A = "_field-error_6d015c9", x = "_fi
 });
 export {
   I as AdornmentMap,
-  v as FieldStatusInput
+  y as FieldStatusInput
 };
 //# sourceMappingURL=status_input.js.map

package/dist/form/field/common/status_input/status_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"status_input.js","sources":["../../../../../src/form/field/common/status_input/status_input.tsx"],"sourcesContent":["import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';\nimport { LockTwoIcon } from '@tcn/icons/lock_two_icon.js';\nimport { HStack } from '../../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';\nimport React from 'react';\nimport { Loading } from '../../../../feedback/index.js';\nimport { clsx } from 'clsx';\nimport styles from './status_input.module.css';\n\n/*\n TODO: I really want to make these themeable.\n The way we do that is simply put a div placeholder with\n a class that the theme can override. They can use svgs as \n backgrounds for icons. This would make it so the component\n library doesn't dictate the icon set used. \n*/\nconst LockedAdornment: React.FC = () => {\n  return <LockTwoIcon className=\"tcn-field-lock\" size=\"lg\" />;\n};\n\nconst LoadingAdornment: React.FC = () => {\n  return <Loading size=\"20px\" className=\"tcn-field-loader\" />;\n};\n\nconst ErroredAdornment: React.FC = () => {\n  return (\n    <AlertTriangleIcon\n      className={clsx(styles['field-error'], 'tcn-field-error')}\n      size=\"lg\"\n    />\n  );\n};\n\nexport const AdornmentMap: React.FC<{ state: StatusInputState }> = ({ state }) => {\n  switch (state) {\n    case 'locked':\n      return <LockedAdornment />;\n    case 'loading':\n      return <LoadingAdornment />;\n    case 'error':\n      return <ErroredAdornment />;\n    default:\n      return null;\n  }\n};\n\nexport type StatusInputState = 'locked' | 'loading' | 'error' | 'default';\nexport interface StatusInputOwnProps {\n  children: React.ReactNode;\n  state?: StatusInputState;\n}\n\nexport type StatusInputProps = WithDetailedHTMLProps<\n  StatusInputOwnProps & HStackOwnProps,\n  'div'\n>;\n\nexport const FieldStatusInput = React.forwardRef(function StatusInput(\n  { children: Control, state = 'default', className, ...props }: StatusInputProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const showControl = state === 'default' || state === 'error';\n\n  return (\n    <HStack\n      ref={ref}\n      data-state={state}\n      className={clsx(\n        'tcn-field-status-input',\n        styles['field-status-input'],\n        className,\n        'tcn-field-status-input'\n      )}\n      vAlign=\"center\"\n      hAlign=\"end\"\n      gap=\"4px\"\n      {...props}\n    >\n      {showControl && Control}\n      <AdornmentMap state={state} />\n    </HStack>\n  );\n});\n"],"names":["LockedAdornment","jsx","LockTwoIcon","LoadingAdornment","Loading","ErroredAdornment","AlertTriangleIcon","clsx","styles","AdornmentMap","state","FieldStatusInput","React","Control","className","props","ref","showControl","jsxs","HStack"],"mappings":";;;;;;;;;;wHAiBMA,IAA4B,MACzB,gBAAAC,EAACC,GAAA,EAAY,WAAU,kBAAiB,MAAK,MAAK,GAGrDC,IAA6B,MAC1B,gBAAAF,EAACG,GAAA,EAAQ,MAAK,QAAO,WAAU,oBAAmB,GAGrDC,IAA6B,MAE/B,gBAAAJ;AAAA,EAACK;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,aAAa,GAAG,iBAAiB;AAAA,IACxD,MAAK;AAAA,EAAA;AAAA,GAKEC,IAAsD,CAAC,EAAE,OAAAC,QAAY;AAChF,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,+BAAQV,GAAA,EAAgB;AAAA,IAC1B,KAAK;AACH,+BAAQG,GAAA,EAAiB;AAAA,IAC3B,KAAK;AACH,+BAAQE,GAAA,EAAiB;AAAA,IAC3B;AACE,aAAO;AAAA,EAAA;AAEb,GAaaM,IAAmBC,EAAM,WAAW,SAC/C,EAAE,UAAUC,GAAS,OAAAH,IAAQ,WAAW,WAAAI,GAAW,GAAGC,EAAA,GACtDC,GACA;AACA,QAAMC,IAAcP,MAAU,aAAaA,MAAU;AAErD,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,cAAYN;AAAA,MACZ,WAAWH;AAAA,QACT;AAAA,QACAC,EAAO,oBAAoB;AAAA,QAC3BM;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeJ;AAAA,QAChB,gBAAAZ,EAACQ,KAAa,OAAAC,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC,CAAC;"}
+{"version":3,"file":"status_input.js","sources":["../../../../../src/form/field/common/status_input/status_input.tsx"],"sourcesContent":["import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';\nimport { LockTwoIcon } from '@tcn/icons/lock_two_icon.js';\nimport { HStack } from '../../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';\nimport React from 'react';\nimport { Loading } from '../../../../feedback/index.js';\nimport { clsx } from 'clsx';\nimport styles from './status_input.module.css';\n\n/*\n TODO: I really want to make these themeable.\n The way we do that is simply put a div placeholder with\n a class that the theme can override. They can use svgs as \n backgrounds for icons. This would make it so the component\n library doesn't dictate the icon set used. \n*/\nconst LockedAdornment: React.FC = () => {\n  return <LockTwoIcon className=\"tcn-field-lock\" size=\"lg\" />;\n};\n\nconst LoadingAdornment: React.FC = () => {\n  return <Loading size=\"20px\" className=\"tcn-field-loader\" />;\n};\n\nconst ErroredAdornment: React.FC = () => {\n  return (\n    <AlertTriangleIcon\n      className={clsx(styles['field-error'], 'tcn-field-error')}\n      size=\"lg\"\n    />\n  );\n};\n\nexport const AdornmentMap: React.FC<{ state: StatusInputState }> = ({ state }) => {\n  switch (state) {\n    case 'locked':\n      return <LockedAdornment />;\n    case 'loading':\n      return <LoadingAdornment />;\n    case 'error':\n      return <ErroredAdornment />;\n    default:\n      return null;\n  }\n};\n\nexport type StatusInputState = 'locked' | 'loading' | 'error' | 'default';\nexport interface StatusInputOwnProps {\n  children: React.ReactNode;\n  state?: StatusInputState;\n}\n\nexport type StatusInputProps = WithDetailedHTMLProps<\n  StatusInputOwnProps & HStackOwnProps,\n  'div'\n>;\n\nexport const FieldStatusInput = React.forwardRef(function StatusInput(\n  { children: Control, state = 'default', className, ...props }: StatusInputProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const showControl = state === 'default' || state === 'error';\n\n  return (\n    <HStack\n      ref={ref}\n      data-state={state}\n      className={clsx(\n        'tcn-field-status-input',\n        styles['field-status-input'],\n        className,\n        'tcn-field-status-input'\n      )}\n      vAlign=\"center\"\n      hAlign=\"end\"\n      gap=\"4px\"\n      {...props}\n    >\n      {showControl && Control}\n      <AdornmentMap state={state} />\n    </HStack>\n  );\n});\n"],"names":["LockedAdornment","jsx","LockTwoIcon","LoadingAdornment","Loading","ErroredAdornment","AlertTriangleIcon","clsx","styles","AdornmentMap","state","FieldStatusInput","React","Control","className","props","ref","showControl","jsxs","HStack"],"mappings":";;;;;;;;;;;wHAiBMA,IAA4B,MACzB,gBAAAC,EAACC,GAAA,EAAY,WAAU,kBAAiB,MAAK,MAAK,GAGrDC,IAA6B,MAC1B,gBAAAF,EAACG,GAAA,EAAQ,MAAK,QAAO,WAAU,oBAAmB,GAGrDC,IAA6B,MAE/B,gBAAAJ;AAAA,EAACK;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKC,EAAO,aAAa,GAAG,iBAAiB;AAAA,IACxD,MAAK;AAAA,EAAA;AAAA,GAKEC,IAAsD,CAAC,EAAE,OAAAC,QAAY;AAChF,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,+BAAQV,GAAA,EAAgB;AAAA,IAC1B,KAAK;AACH,+BAAQG,GAAA,EAAiB;AAAA,IAC3B,KAAK;AACH,+BAAQE,GAAA,EAAiB;AAAA,IAC3B;AACE,aAAO;AAAA,EAAA;AAEb,GAaaM,IAAmBC,EAAM,WAAW,SAC/C,EAAE,UAAUC,GAAS,OAAAH,IAAQ,WAAW,WAAAI,GAAW,GAAGC,EAAA,GACtDC,GACA;AACA,QAAMC,IAAcP,MAAU,aAAaA,MAAU;AAErD,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,cAAYN;AAAA,MACZ,WAAWH;AAAA,QACT;AAAA,QACAC,EAAO,oBAAoB;AAAA,QAC3BM;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeJ;AAAA,QAChB,gBAAAZ,EAACQ,KAAa,OAAAC,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC,CAAC;"}

package/dist/inputs/suggestions/suggestion_list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion_list.d.ts","sourceRoot":"","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,YAAY,EAAE,OAAO,EACrB,SAAS,EAAE,OAAO,KACf,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,CACR,UAAU,EAAE,MAAM,EAClB,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAC7B,IAAI,CAAC;CACX;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAU,EACV,kBAAkB,EAAE,WAAW,EAC/B,aAAa,EACb,aAAa,EACb,IAAY,EACZ,QAAQ,EACR,cAAc,EACd,mBAAwC,EACxC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,iBAAyB,EACzB,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAyYrB"}
+{"version":3,"file":"suggestion_list.d.ts","sourceRoot":"","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,YAAY,EAAE,OAAO,EACrB,SAAS,EAAE,OAAO,KACf,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,CACR,UAAU,EAAE,MAAM,EAClB,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAC7B,IAAI,CAAC;CACX;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAU,EACV,kBAAkB,EAAE,WAAW,EAC/B,aAAa,EACb,aAAa,EACb,IAAY,EACZ,QAAQ,EACR,cAAc,EACd,mBAAwC,EACxC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,iBAAyB,EACzB,YAAmB,EACnB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CA4ZrB"}

package/dist/inputs/suggestions/suggestion_list.js

@@ -1,110 +1,113 @@
-import { jsx as r, jsxs as P, Fragment as fe } from "react/jsx-runtime";
-import { BodyText as de } from "../../typography/body_text/body_text.js";
+import { jsx as r, jsxs as j, Fragment as de } from "react/jsx-runtime";
+import { BodyText as ge } from "../../typography/body_text/body_text.js";
 import "../../typography/callout/callout.js";
 import "../../typography/caption/caption.js";
 import "../../typography/footnote/footnote.js";
 import "../../typography/headline/headline.js";
 import "../../typography/subheadline/subheadline.js";
 import "../../typography/title/title.js";
-import { VStack as W } from "../../stacks/v_stack.js";
-import { ZStack as ge } from "../../stacks/z_stack.js";
-import { clsx as D } from "clsx";
-import { Children as he, isValidElement as me, useState as a, useRef as F, useLayoutEffect as b } from "react";
+import { VStack as q } from "../../stacks/v_stack.js";
+import { ZStack as he } from "../../stacks/z_stack.js";
+import { clsx as H } from "clsx";
+import Z, { Children as me, isValidElement as we, useState as a, useRef as B, useLayoutEffect as h } from "react";
 import "../../utils/click_away_listener.js";
-import { FocusRedirect as we } from "../../utils/focus_redirect.js";
+import { FocusRedirect as be } from "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "../../draggable.module-BgelQsuJ.js";
-import { SuggestionItem as be } from "./suggestion_item.js";
-import { Option as $ } from "../options/option.js";
+import { SuggestionItem as xe } from "./suggestion_item.js";
+import { Option as X } from "../options/option.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
-import { Button as xe } from "../../actions/button/button/button.js";
+import { Button as ke } from "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
 import "../../actions/toggle/toggle.js";
 import { Popper as Le } from "../../overlay/popper/legacy/popper.js";
-import '../../suggestion_list.css';const ke = "_suggestion-list_711fb17", ye = "_input_a0df060", H = { "suggestion-list": ke, input: ye }, I = 50, Se = 50;
-function Qe({
-  value: _ = "",
-  initialSearchValue: B,
-  scrollToValue: g,
+import '../../suggestion_list.css';const ye = "_suggestion-list_711fb17", Se = "_input_a0df060", K = { "suggestion-list": ye, input: Se }, C = 50, Me = 50;
+function Ye({
+  value: R = "",
+  initialSearchValue: E,
+  scrollToValue: m,
   anchorElement: l,
-  open: M = !1,
-  children: j,
-  onOptionSelect: h,
-  noSuggestionMessage: q = "-- No Matches --",
-  onClose: x,
-  onChange: K,
-  onKeyUp: E,
-  onKeyDown: N,
-  trimCustomInput: Z = !1,
-  haveValueAsOption: X = !1,
-  restoreFocus: z = !0,
-  ...G
+  open: v = !1,
+  children: N,
+  onOptionSelect: w,
+  noSuggestionMessage: z = "-- No Matches --",
+  onClose: L,
+  onChange: O,
+  onKeyUp: T,
+  onKeyDown: U,
+  trimCustomInput: G = !1,
+  haveValueAsOption: P = !1,
+  restoreFocus: J = !0,
+  ...Q
 }) {
-  const L = he.toArray(j).filter(
-    (e) => me(e) && e.type === $
-  ), [k, J] = a(() => {
-    if (g != null) {
-      const e = L.findIndex((i) => i.props.value === g);
+  const b = Z.useMemo(
+    () => me.toArray(N).filter(
+      (e) => we(e) && e.type === X
+    ),
+    [N]
+  ), [y, Y] = a(() => {
+    if (m != null) {
+      const e = b.findIndex((o) => o.props.value === m);
       if (e !== -1)
         return e;
     }
     return -1;
-  }), C = F(""), v = F(!1), [Q, O] = a(I), [d, y] = a(k), [m, T] = a(_), c = F(null), [Y, ee] = a(L.length), [n, U] = a(
-    () => R(_, I)
-  ), [te, se] = a(), [ne, ie] = a();
-  function oe(e) {
-    if (!v.current)
+  }), A = B(""), _ = B(!1), [ee, V] = a(C), [d, S] = a(y), [x, W] = a(R), c = B(null), [te, se] = a(b.length), [n, D] = a(
+    () => []
+  ), [ne, oe] = a(), [ie, re] = a();
+  function le(e) {
+    if (!_.current)
       return;
-    v.current = !1;
-    const i = e.key, t = e.currentTarget, s = C.current = i;
-    if (C.current = "", s)
-      switch (i) {
+    _.current = !1;
+    const o = e.key, t = e.currentTarget, s = A.current = o;
+    if (A.current = "", s)
+      switch (o) {
         case "Enter": {
           if (n[d] == null) {
-            const p = Z ? t.value.trim() : t.value;
-            if (p === "")
+            const u = G ? t.value.trim() : t.value;
+            if (u === "")
               return;
-            const S = p.toLocaleLowerCase(), o = L.find(
-              (A) => A.props.value.toLocaleLowerCase() === S || A.props.label != null && A.props.label.toLocaleLowerCase() === S
-            ), V = o != null, f = o?.props.label || p, pe = o?.props.value || p;
+            const k = u.toLocaleLowerCase(), g = b.find(
+              (F) => F.props.value.toLocaleLowerCase() === k || F.props.label != null && F.props.label.toLocaleLowerCase() === k
+            ), p = g != null, $ = g?.props.label || u, f = g?.props.value || u;
             requestAnimationFrame(() => {
-              h && h(
-                pe,
+              w && w(
                 f,
-                V,
-                o?.props.obfuscate ?? !1
+                $,
+                p,
+                g?.props.obfuscate ?? !1
               );
             });
             break;
           }
-          const u = n[d].props;
-          if (u.disabled)
+          const i = n[d].props;
+          if (i.disabled)
             break;
           requestAnimationFrame(() => {
-            h && h(
-              u.value,
-              u.label,
+            w && w(
+              i.value,
+              i.label,
               !0,
-              u.obfuscate ?? !1
+              i.obfuscate ?? !1
             );
           });
           break;
         }
         case "Escape": {
-          x && x(t.value, t.selectionStart, t.selectionEnd);
+          L && L(t.value, t.selectionStart, t.selectionEnd);
           break;
         }
       }
-    E && E(e);
+    T && T(e);
   }
-  function re(e) {
-    const i = e.key;
-    switch (C.current = i, v.current = !0, i) {
+  function ce(e) {
+    const o = e.key;
+    switch (A.current = o, _.current = !0, o) {
       case "ArrowDown": {
         let t = d + 1;
         for (; t < n.length && n[t]?.props.disabled; )
@@ -114,7 +117,7 @@ function Qe({
             t++;
           t === n.length && (t = -1);
         }
-        y(t), e.preventDefault();
+        S(t), e.preventDefault();
         break;
       }
       case "Tab": {
@@ -136,7 +139,7 @@ function Qe({
             s--;
           s === -1 && (s = -1);
         }
-        y(s), e.preventDefault();
+        S(s), e.preventDefault();
         break;
       }
       case "ArrowUp": {
@@ -148,115 +151,130 @@ function Qe({
             t--;
           t === -1 && (t = -1);
         }
-        y(t), e.preventDefault();
+        S(t), e.preventDefault();
         break;
       }
     }
-    N && N(e);
+    U && U(e);
   }
-  function R(e, i) {
-    const t = L.filter((s) => {
-      const w = s.props, u = String(w.label).toLocaleLowerCase(), p = w.keywords?.map((f) => f.toLocaleLowerCase()) || [], S = String(w.value).toLocaleLowerCase(), o = e.toLocaleLowerCase();
-      return w.obfuscate ?? !1 ? u.includes(o) || p.some((f) => f.includes(o)) : u.includes(o) || p.some((f) => f.includes(o)) || S.includes(o);
-    });
-    return X && e.trim().length > 0 && !t.some((s) => s.props.value === e) && t.unshift(
-      /* @__PURE__ */ r($, { value: e, label: e, keywords: [e], children: e }, "value")
-    ), ee(t.length), t.slice(0, i);
-  }
-  function le() {
+  const M = Z.useCallback(
+    function(o, t) {
+      const s = b.filter((I) => {
+        const i = I.props, u = String(i.label).toLocaleLowerCase(), k = i.keywords?.map((f) => f.toLocaleLowerCase()) || [], g = String(i.value).toLocaleLowerCase(), p = o.toLocaleLowerCase();
+        return i.obfuscate ?? !1 ? u.includes(p) || k.some((f) => f.includes(p)) : u.includes(p) || k.some((f) => f.includes(p)) || g.includes(p);
+      });
+      return P && o.trim().length > 0 && !s.some((I) => I.props.value === o) && s.unshift(
+        /* @__PURE__ */ r(X, { value: o, label: o, keywords: [o], children: o }, "value")
+      ), se(s.length), s.slice(0, t);
+    },
+    [b, P]
+  );
+  function ae() {
     const e = c.current;
     e?.focus();
   }
-  function ce() {
+  function ue() {
     const e = c.current;
-    e != null && x && x(e.value, e.selectionStart, e.selectionEnd);
+    e != null && L && L(e.value, e.selectionStart, e.selectionEnd);
   }
-  function ae(e) {
-    const i = e.currentTarget;
-    O(I), T(e.target.value);
-    const t = R(i.value, I);
-    U(t), K && K(e.target.value);
+  function pe(e) {
+    const o = e.currentTarget;
+    V(C), W(e.target.value);
+    const t = M(o.value, C);
+    D(t), O && O(e.target.value);
   }
-  function ue() {
-    const e = Q + Se;
-    O(e);
-    const i = R(m, e);
-    U(i);
+  function fe() {
+    const e = ee + Me;
+    V(e);
+    const o = M(x, e);
+    D(o);
   }
-  return b(() => {
+  return h(() => {
     const e = c.current;
-    M && (e != null && e.value.length > 0 ? e.select() : e?.focus());
-  }, [M]), b(() => {
+    v && (e != null && e.value.length > 0 ? e.select() : e?.focus());
+  }, [v]), h(() => {
     if (l != null) {
       const e = l.getBoundingClientRect();
-      se(`${e.width}px`), ie(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
+      oe(`${e.width}px`), re(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
     }
-  }, [l]), b(() => {
-    if (g != null) {
+  }, [l]), h(() => {
+    if (m != null) {
       const e = n.findIndex(
-        (i) => i.props.value === g
+        (o) => o.props.value === m
       );
-      J(e);
+      Y(e);
     }
-  }, [n, g]), b(() => {
-    y(m === "" ? k : -1);
-  }, [m, k]), b(() => {
-    T(B ?? "");
-  }, [B]), /* @__PURE__ */ r(
+  }, [n, m]), h(() => {
+    S(x === "" ? y : -1);
+  }, [x, y]), h(() => {
+    W(E ?? "");
+  }, [E]), h(() => {
+    const e = M(R, C);
+    D(e);
+  }, [R, M]), /* @__PURE__ */ r(
     Le,
     {
-      open: M,
+      open: v,
       anchorElement: l,
-      onClose: ce,
+      onClose: ue,
       verticalAnchor: "top",
       verticalOrigin: "top",
       verticalOffset: -4,
-      restoreFocus: z,
-      children: /* @__PURE__ */ P(
-        W,
+      restoreFocus: J,
+      children: /* @__PURE__ */ j(
+        q,
         {
-          minHeight: `calc(${ne}, 8px)`,
+          minHeight: `calc(${ie}, 8px)`,
           maxHeight: "300px",
-          minWidth: te,
+          minWidth: ne,
           width: "auto",
           hAlign: "start",
-          className: D(H["suggestion-list"], "tcn-suggestion-list"),
+          className: H(K["suggestion-list"], "tcn-suggestion-list"),
           children: [
             /* @__PURE__ */ r(
               "input",
               {
                 ref: c,
-                value: m,
-                onKeyUp: oe,
-                onKeyDown: re,
-                onChange: ae,
-                className: D(H.input, "tcn-suggestion-list-search-input"),
-                ...G
+                value: x,
+                onKeyUp: le,
+                onKeyDown: ce,
+                onChange: pe,
+                className: H(K.input, "tcn-suggestion-list-search-input"),
+                ...Q
               },
               -1
             ),
-            /* @__PURE__ */ P(W, { children: [
-              n.map((e, i) => /* @__PURE__ */ r(
-                be,
+            /* @__PURE__ */ j(q, { children: [
+              n.map((e, o) => /* @__PURE__ */ r(
+                xe,
                 {
                   option: e,
-                  isSelected: i === k && m !== "",
-                  isFocused: i === d,
-                  onClick: h
+                  isSelected: o === y && x !== "",
+                  isFocused: o === d,
+                  onClick: w
                 },
-                i
+                o
               )),
-              Y > n.length && /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ r(xe, { marginBlock: "8px", hierarchy: "tertiary", onClick: ue, children: "Show More" }) })
+              te > n.length && /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(
+                ke,
+                {
+                  marginBlock: "8px",
+                  hierarchy: "tertiary",
+                  onClick: fe,
+                  children: "Show More"
+                },
+                "show-more"
+              ) })
             ] }),
             n.length === 0 && /* @__PURE__ */ r(
-              ge,
+              he,
               {
                 padding: "8px",
-                className: D(H["no-results"], "tcn-suggestion-list-no-results"),
-                children: /* @__PURE__ */ r(de, { children: q })
+                className: H(K["no-results"], "tcn-suggestion-list-no-results"),
+                children: /* @__PURE__ */ r(ge, { children: z })
               }
             ),
-            /* @__PURE__ */ r(we, { onRedirect: le }, n.length + 1)
+            /* @__PURE__ */ r(be, { onRedirect: ae }, n.length + 1)
           ]
         }
       )
@@ -264,6 +282,6 @@ function Qe({
   );
 }
 export {
-  Qe as SuggestionList
+  Ye as SuggestionList
 };
 //# sourceMappingURL=suggestion_list.js.map