@tcn/ui 0.10.0 → 0.12.0

package/dist/typography/body_text/body_text.js.map

@@ -1 +1 @@
-{"version":3,"file":"body_text.js","sources":["../../../src/typography/body_text/body_text.tsx"],"sourcesContent":["import React from 'react';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport styles from './body_text.module.css';\n\nexport interface BodyTextOwnProps {\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  breakWords?: boolean;\n}\n\nexport type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;\n\nexport const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function (\n  {\n    size = 'md',\n    emphasis = 'normal',\n    hierarchy = 'primary',\n    color,\n    children,\n    className,\n    style = {},\n    padStart,\n    padEnd,\n    padBottom,\n    padTop,\n    pad,\n    selectable = true,\n    breakWords = false,\n  }: BodyTextProps,\n  ref\n) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['body-text'], className, 'tcn-body-text')}\n      style={style}\n      data-size={size}\n      data-word-break={breakWords}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["BodyText","React","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","breakWords","ref","jsx","clsx","styles"],"mappings":";;;wDAsBaA,IAAWC,EAAM,WAA0C,SACtE;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AACf,GACAC,GACA;AACA,SAAIH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAKC,EAAO,WAAW,GAAGZ,GAAW,eAAe;AAAA,MAC/D,OAAAC;AAAA,MACA,aAAWN;AAAA,MACX,mBAAiBa;AAAA,MAEhB,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"body_text.js","sources":["../../../src/typography/body_text/body_text.tsx"],"sourcesContent":["import React from 'react';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport styles from './body_text.module.css';\n\nexport interface BodyTextOwnProps {\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  breakWords?: boolean;\n}\n\nexport type BodyTextProps = WithDetailedHTMLProps<BodyTextOwnProps, 'div'>;\n\nexport const BodyText = React.forwardRef<HTMLDivElement, BodyTextProps>(function (\n  {\n    size = 'md',\n    emphasis = 'normal',\n    hierarchy = 'primary',\n    color,\n    children,\n    className,\n    style = {},\n    padStart,\n    padEnd,\n    padBottom,\n    padTop,\n    pad,\n    selectable = true,\n    breakWords = false,\n    ...props\n  }: BodyTextProps,\n  ref\n) {\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <div\n      ref={ref}\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['body-text'], className, 'tcn-body-text')}\n      style={style}\n      data-size={size}\n      data-word-break={breakWords}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["BodyText","React","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","breakWords","props","ref","jsx","clsx","styles"],"mappings":";;;wDAsBaA,IAAWC,EAAM,WAA0C,SACtE;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,GAAGC;AACL,GACAC,GACA;AACA,SAAIJ,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBb;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWK,EAAKC,EAAO,WAAW,GAAGb,GAAW,eAAe;AAAA,MAC/D,OAAAC;AAAA,MACA,aAAWN;AAAA,MACX,mBAAiBa;AAAA,MAChB,GAAGC;AAAA,MAEH,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/utils/dnd/hooks/use_drag_container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_drag_container.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CAiDpF"}
+{"version":3,"file":"use_drag_container.d.ts","sourceRoot":"","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,MAAM,WAAW,uBAAuB;IACtC,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,uBAAuB,GAAG,aAAa,CA2DpF"}

package/dist/utils/dnd/hooks/use_drag_container.js

@@ -1,44 +1,47 @@
-import { useState as s, useRef as b, useCallback as o } from "react";
-import { useDraggable as k } from "./use_draggable.js";
-function m(g) {
-  const [u, a] = s([]), n = b(g.initialPosition ?? { x: 0, y: 0 }), [i, c] = s(n.current), [f, l] = s(!1);
-  k({
-    handles: u,
+import { useState as s, useRef as y, useCallback as o } from "react";
+import { useDraggable as D } from "./use_draggable.js";
+function C(u) {
+  const [l, a] = s([]), n = y(u.initialPosition ?? { x: 0, y: 0 }), [g, i] = s(n.current), [f, c] = s(!1);
+  D({
+    handles: l,
     startDragCallback: () => {
-      l(!0);
+      c(!0);
     },
     dragCallback: (t, e) => {
-      c({
+      i({
         x: n.current.x + t,
         y: n.current.y + e
       });
     },
-    endDragCallback: () => {
-      l(!1), n.current = i;
+    endDragCallback: (t, e) => {
+      n.current = {
+        x: n.current.x + t,
+        y: n.current.y + e
+      }, c(!1);
     }
   });
-  const d = o(
+  const x = o(
     (t) => {
-      c((e) => {
+      i((e) => {
         const r = typeof t == "function" ? t(e) : t;
         return n.current = r, r;
       });
     },
     []
-  ), p = o((t) => {
+  ), d = o((t) => {
     a((e) => [...e, t]);
-  }, []), D = o((t) => {
+  }, []), p = o((t) => {
     a((e) => e.filter((r) => r !== t));
   }, []);
   return {
-    registerHandle: p,
-    unregisterHandle: D,
-    position: i,
+    registerHandle: d,
+    unregisterHandle: p,
+    position: g,
     isDragging: f,
-    setPosition: d
+    setPosition: x
   };
 }
 export {
-  m as useMakeDragContainer
+  C as useMakeDragContainer
 };
 //# sourceMappingURL=use_drag_container.js.map

package/dist/utils/dnd/hooks/use_drag_container.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useDraggable } from './use_draggable.js';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  const [position, setPosition] = useState(positionRef.current);\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: () => {\n      setIsDragging(false);\n      positionRef.current = position;\n    },\n  });\n\n  const setPositionState = useCallback(\n    (value: Position | ((prev: Position) => Position)) => {\n      setPosition(prev => {\n        const next = typeof value === 'function' ? value(prev) : value;\n        positionRef.current = next;\n        return next;\n      });\n    },\n    []\n  );\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return {\n    registerHandle,\n    unregisterHandle,\n    position,\n    isDragging,\n    setPosition: setPositionState,\n  };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","setPositionState","useCallback","value","prev","next","registerHandle","handle","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GACxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GACtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,MAAM;AACrB,MAAAH,EAAc,EAAK,GACnBL,EAAY,UAAUE;AAAA,IACxB;AAAA,EAAA,CACD;AAED,QAAMO,IAAmBC;AAAA,IACvB,CAACC,MAAqD;AACpD,MAAAR,EAAY,CAAAS,MAAQ;AAClB,cAAMC,IAAO,OAAOF,KAAU,aAAaA,EAAMC,CAAI,IAAID;AACzD,eAAAX,EAAY,UAAUa,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAAiBJ,EAAY,CAACK,MAAyC;AAC3E,IAAAjB,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMG,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECC,IAAmBN,EAAY,CAACK,MAAyC;AAC7E,IAAAjB,EAAW,OAAQc,EAAK,OAAO,CAAAK,MAAKA,MAAMF,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL,gBAAAD;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAd;AAAA,IACA,YAAAE;AAAA,IACA,aAAaK;AAAA,EAAA;AAEjB;"}
+{"version":3,"file":"use_drag_container.js","sources":["../../../../src/utils/dnd/hooks/use_drag_container.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport type { Position } from '../../index.js';\nimport type { DragContainer } from '../types.js';\nimport { useDraggable } from './use_draggable.js';\n\nexport interface UseDragContainerOptions {\n  initialPosition?: Position;\n}\n\nexport function useMakeDragContainer(options: UseDragContainerOptions): DragContainer {\n  const [handles, setHandles] = useState<React.RefObject<HTMLElement>[]>([]);\n  const positionRef = useRef<Position>(options.initialPosition ?? { x: 0, y: 0 });\n  /**\n   *  The value that triggers re-renders. It’s updated in dragCallback so the UI\n   *  moves while dragging, and it’s what the hook returns so the consumer can\n   *  render the element at that position\n   *  (e.g. style={{ left: position.x, top: position.y }}).\n   */\n  const [position, setPosition] = useState(positionRef.current);\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  useDraggable({\n    handles: handles,\n    startDragCallback: () => {\n      setIsDragging(true);\n    },\n    dragCallback: (deltaX, deltaY) => {\n      setPosition({\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      });\n    },\n    endDragCallback: (deltaX, deltaY) => {\n      positionRef.current = {\n        x: positionRef.current.x + deltaX,\n        y: positionRef.current.y + deltaY,\n      };\n      setIsDragging(false);\n    },\n  });\n\n  const setPositionState = useCallback(\n    (value: Position | ((prev: Position) => Position)) => {\n      setPosition(prev => {\n        const next = typeof value === 'function' ? value(prev) : value;\n        positionRef.current = next;\n        return next;\n      });\n    },\n    []\n  );\n\n  const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => [...prev, handle]);\n  }, []);\n\n  const unregisterHandle = useCallback((handle: React.RefObject<HTMLElement>) => {\n    setHandles(prev => prev.filter(h => h !== handle));\n  }, []);\n\n  return {\n    registerHandle,\n    unregisterHandle,\n    position,\n    isDragging,\n    setPosition: setPositionState,\n  };\n}\n"],"names":["useMakeDragContainer","options","handles","setHandles","useState","positionRef","useRef","position","setPosition","isDragging","setIsDragging","useDraggable","deltaX","deltaY","setPositionState","useCallback","value","prev","next","registerHandle","handle","unregisterHandle","h"],"mappings":";;AASO,SAASA,EAAqBC,GAAiD;AACpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAyC,CAAA,CAAE,GACnEC,IAAcC,EAAiBL,EAAQ,mBAAmB,EAAE,GAAG,GAAG,GAAG,GAAG,GAOxE,CAACM,GAAUC,CAAW,IAAIJ,EAASC,EAAY,OAAO,GAEtD,CAACI,GAAYC,CAAa,IAAIN,EAAS,EAAK;AAElD,EAAAO,EAAa;AAAA,IACX,SAAAT;AAAA,IACA,mBAAmB,MAAM;AACvB,MAAAQ,EAAc,EAAI;AAAA,IACpB;AAAA,IACA,cAAc,CAACE,GAAQC,MAAW;AAChC,MAAAL,EAAY;AAAA,QACV,GAAGH,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,CAC5B;AAAA,IACH;AAAA,IACA,iBAAiB,CAACD,GAAQC,MAAW;AACnC,MAAAR,EAAY,UAAU;AAAA,QACpB,GAAGA,EAAY,QAAQ,IAAIO;AAAA,QAC3B,GAAGP,EAAY,QAAQ,IAAIQ;AAAA,MAAA,GAE7BH,EAAc,EAAK;AAAA,IACrB;AAAA,EAAA,CACD;AAED,QAAMI,IAAmBC;AAAA,IACvB,CAACC,MAAqD;AACpD,MAAAR,EAAY,CAAAS,MAAQ;AAClB,cAAMC,IAAO,OAAOF,KAAU,aAAaA,EAAMC,CAAI,IAAID;AACzD,eAAAX,EAAY,UAAUa,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAA;AAAA,EAAC,GAGGC,IAAiBJ,EAAY,CAACK,MAAyC;AAC3E,IAAAjB,EAAW,CAAAc,MAAQ,CAAC,GAAGA,GAAMG,CAAM,CAAC;AAAA,EACtC,GAAG,CAAA,CAAE,GAECC,IAAmBN,EAAY,CAACK,MAAyC;AAC7E,IAAAjB,EAAW,OAAQc,EAAK,OAAO,CAAAK,MAAKA,MAAMF,CAAM,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL,gBAAAD;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAd;AAAA,IACA,YAAAE;AAAA,IACA,aAAaK;AAAA,EAAA;AAEjB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -140,8 +140,10 @@
   "dependencies": {
     "@fontsource/lato": "^5.2.7",
     "clsx": "^2.1.1",
+    "libphonenumber-js": "^1.12.38",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.2.1",
+    "react-phone-number-input": "^3.4.16",
+    "@tcn/icons": "2.3.0",
     "@tcn/state": "1.2.0"
   },
   "scripts": {

package/src/feedback/index.ts

@@ -1,3 +1,4 @@
 export * from './loading/loading.js';
 export * from './progress/progress_bar.js';
+export * from './progress/progress.js';
 export * from './lazy/lazy.js';

package/src/feedback/progress/progress.module.css

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  :where(.progress) {
+    width: 100%;
+  }
+}

package/src/feedback/progress/progress.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { Progress as Component, ProgressProps } from './progress.js';
+import styles from '../storybook.module.css';
+
+export default {
+  title: 'Feedback/Progress Bar',
+};
+
+function Base(props: Partial<ProgressProps>) {
+  const [value, setValue] = useState(props.value ?? 0);
+
+  useEffect(() => {
+    if (value >= 1) return;
+
+    const timer = window.setTimeout(() => {
+      setValue(prevValue => Math.min(prevValue + 0.1, 1));
+    }, 1000);
+
+    return () => window.clearTimeout(timer);
+  }, [value]);
+
+  return <Component {...props} message="Loading..." value={value} />;
+}
+
+export function Progress() {
+  return (
+    <table className={styles['story']}>
+      <colgroup>
+        <col style={{ width: '1fr' }} />
+        <col style={{ width: '200px' }} />
+      </colgroup>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Component</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Base</td>
+          <td>
+            <Base />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

package/src/feedback/progress/progress.tsx

@@ -0,0 +1,39 @@
+import React, { HTMLAttributes } from 'react';
+import { BodyText } from '../../typography/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { VStack } from '../../stacks/v_stack.js';
+import clsx from 'clsx';
+
+import styles from './progress_bar.module.css';
+import { ProgressBar } from './progress_bar.js';
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  message: string;
+  value: number;
+}
+
+export const Progress = React.forwardRef(function Progress(
+  { message, value, ...props }: ProgressProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const progressPercent = `${(value * 100).toFixed(0)}%`;
+
+  return (
+    <VStack
+      ref={ref}
+      className={clsx(styles['progress-container'], 'tcn-progress-container')}
+      {...props}
+    >
+      <HStack height="auto" vAlign="end">
+        <BodyText>{message}</BodyText>
+        <Spacer />
+        <Spacer width="8px" />
+        <BodyText size="sm" style={{ flexShrink: 0 }}>
+          {progressPercent}
+        </BodyText>
+      </HStack>
+      <ProgressBar value={value} />
+    </VStack>
+  );
+});

package/src/feedback/progress/progress_bar.module.css

@@ -1,4 +1,4 @@
-@system {
+@layer tcn-system {
   :root {
     --progress-bar-color: var(--accent-color); /* Default color for progress bar */
     --progress-bar-background: #dadada;
@@ -6,6 +6,9 @@
 
   :where(.progress-bar-container) {
     width: 100%;
+    height: 8px;
+    border-radius: 2px;
+    overflow: hidden;
   }
 
   :where(.progress-bar-background) {
@@ -21,7 +24,6 @@
     appearance: none;
     background: transparent;
     user-select: none;
-    /* box-shadow: 0 1px 0 0 rgba(222, 222, 222, 0.7), inset 0 1px 0 0 rgba(0, 0, 0, 0.3); */
     overflow: hidden;
   }
 
@@ -32,30 +34,4 @@
     background-color: var(--progress-bar-color);
     transition: width 200ms ease-out;
   }
-
-  :where(.progress-bar-fill::before) {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: -20px;
-    height: 100%;
-    width: calc(100% + 40px);
-    background-size: 20px 20px;
-    animation: moveStripes 500ms linear infinite;
-  }
-
-  :where(.progress-bar-fill[data-finished="true"]::before) {
-    animation: none;
-    background-image: none;
-  }
-
-  /* Animation for moving stripes */
-  @keyframes moveStripes {
-    0% {
-      transform: translateX(0);
-    }
-    100% {
-      transform: translateX(20px);
-    }
-  }
 }

package/src/feedback/progress/progress_bar.stories.tsx

@@ -19,7 +19,7 @@ function Base(props: Partial<ProgressBarProps>) {
     return () => window.clearTimeout(timer);
   }, [value]);
 
-  return <Component message="Progress..." {...props} value={value} />;
+  return <Component {...props} value={value} />;
 }
 
 export function ProgressBar() {

package/src/feedback/progress/progress_bar.tsx

@@ -1,48 +1,36 @@
 import React, { HTMLAttributes } from 'react';
-import { BodyText } from '../../typography/index.js';
-import { HStack } from '../../stacks/h_stack.js';
-import { Spacer } from '../../stacks/spacer.js';
-import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import clsx from 'clsx';
 
 import styles from './progress_bar.module.css';
 
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
-  message: string;
   value: number;
 }
 
 export const ProgressBar = React.forwardRef(function ProgressBar(
-  { message, value, ...props }: ProgressBarProps,
+  { value, ...props }: ProgressBarProps,
   ref: React.Ref<HTMLDivElement>
 ) {
   const progressPercent = `${(value * 100).toFixed(0)}%`;
   const styleVariables: any = { '--progress-percentage': progressPercent };
 
   return (
-    <VStack
+    <ZStack
       ref={ref}
-      className={clsx(styles['progress-bar-container'], 'tcn-progress-bar')}
+      hAlign="start"
+      className={clsx(styles['progress-bar-container'], 'tcn-progress-bar-container')}
       {...props}
     >
-      <HStack height="auto" vAlign="end">
-        <BodyText>{message}</BodyText>
-        <Spacer />
-        <Spacer width="8px" />
-        <BodyText size="sm" style={{ flexShrink: 0 }}>
-          {progressPercent}
-        </BodyText>
-      </HStack>
-      <ZStack height="8px" hAlign="start">
-        <div className={styles['progress-bar-background']}></div>
-        <div
-          data-finished={progressPercent === '100%'}
-          style={styleVariables}
-          className={styles['progress-bar-fill']}
-        />
-        <div className={styles['progress-bar']}></div>
-      </ZStack>
-    </VStack>
+      <div
+        className={clsx(styles['progress-bar-background'], 'tcn-progress-bar-background')}
+      ></div>
+      <div
+        data-finished={progressPercent === '100%'}
+        style={styleVariables}
+        className={clsx(styles['progress-bar-fill'], 'tcn-progress-bar-fill')}
+      />
+      <div className={clsx(styles['progress-bar'], 'tcn-progress-bar')}></div>
+    </ZStack>
   );
 });

package/src/form/field/h_field/h_field.tsx

@@ -33,8 +33,6 @@ export const HField = React.forwardRef(function HField(
   ref: React.Ref<HTMLDivElement>
 ) {
   const [finalId] = useState(() => id || `h-field-${idIndex++}`);
-  const labelId = `${finalId}-label`;
-  const descriptionId = `${finalId}-description`;
   const hasError = errorMessage ? true : false;
   const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';
 
@@ -42,8 +40,6 @@ export const HField = React.forwardRef(function HField(
     <HStack
       ref={ref}
       as="div"
-      aria-labelledby={labelId}
-      aria-describedby={descriptionId}
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}

package/src/form/field/v_field/v_field.stories.tsx

@@ -94,6 +94,14 @@ export function Baseline() {
       >
         <Input defaultValue="Disabled value" />
       </VField>
+      <Divider horizontal />
+      <VField
+        label="Aria enabled"
+        description="This field demonstrates the use of aria-labelledby and aria-describedby."
+        id="field-8"
+      >
+        <Input aria-labelledby="field-8-label" aria-describedby="field-8-description" />
+      </VField>
     </FieldSet>
   );
 }

package/src/form/field/v_field/v_field.tsx

@@ -34,15 +34,12 @@ export const VField = React.forwardRef(function VField(
 ) {
   const [finalId] = useState(() => id || `v-field-${idIndex++}`);
   const hasError = errorMessage ? true : false;
-  const labelId = `${finalId}-label`;
-  const descriptionId = `${finalId}-description`;
   const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';
+
   return (
     <VStack
       ref={ref}
       as="div"
-      aria-labelledby={labelId}
-      aria-describedby={descriptionId}
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}

package/src/form/field_set/field_set.stories.tsx

@@ -28,6 +28,7 @@ export default {
 
 export function Baseline() {
   const [multiselectValues, setMultiselectValues] = useState<string[]>([]);
+  const [phoneNumberValue, setPhoneNumberValue] = useState<string | undefined>(undefined);
   const [freeformMultiselectValues, setFreeformMultiselectValues] = useState<string[]>(
     []
   );
@@ -47,7 +48,7 @@ export function Baseline() {
       </HField>
       <Divider />
       <HField label="Phone Number" id="field-4">
-        <PhoneNumberInput />
+        <PhoneNumberInput value={phoneNumberValue} onChange={setPhoneNumberValue} />
       </HField>
       <Divider />
       <HField label="Unit" id="field-5">

package/src/inputs/__docs__/inputs.mdx

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as InputStories from './inputs.stories';
+import { Showcase } from '../../actions/__docs__/components/showcase';
+import { Gallery } from '../../actions/__docs__/components/gallery';
+
+<Meta title="Catalog/Inputs" of={InputStories} />
+
+# Inputs
+
+Form controls and data entry components for user input.
+
+- [Inputs](#inputs)
+  - [Text](#text)
+    - [Standard](#standard)
+    - [Specialized](#specialized)
+  - [Boolean](#boolean)
+  - [Date / Time](#date--time)
+  - [Selection](#selection)
+    - [Single / Constrained](#single--constrained)
+    - [Multiple](#multiple)
+
+## Text
+
+Free text entry and structured text input.
+
+### Standard
+
+<Gallery minColumnWidth="280px">
+  <Showcase title="Input" of={InputStories.InputBaseline} minWidth="240px" />
+  <Showcase title="Textarea" of={InputStories.TextareaBaseline} minWidth="280px" />
+  <Showcase title="Mask Input" of={InputStories.MaskInputBaseline} minWidth="200px" />
+</Gallery>
+
+### Specialized
+
+<Gallery minColumnWidth="280px">
+  <Showcase title="Phone Number Input" of={InputStories.PhoneNumberInputBaseline} minWidth="200px" />
+  <Showcase title="Color Input" of={InputStories.ColorInputBaseline} minWidth="200px" />
+  <Showcase title="Unit Input" of={InputStories.UnitInputBaseline} minWidth="200px" />
+  <Showcase title="Slider" of={InputStories.SliderBaseline} minWidth="280px" />
+</Gallery>
+
+## Boolean
+
+Toggle controls for on/off or true/false values.
+
+<Gallery minColumnWidth="120px">
+  <Showcase title="Checkbox" of={InputStories.CheckboxBaseline} minWidth="120px" />
+  <Showcase title="Switch" of={InputStories.SwitchBaseline} minWidth="100px" />
+</Gallery>
+
+## Date / Time
+
+Date and time selection.
+
+<Gallery minColumnWidth="280px">
+  <Showcase title="Date Picker" of={InputStories.DatePickerBaseline} minWidth="280px" />
+</Gallery>
+
+## Selection
+
+Components for choosing one or more values from options.
+
+### Single / Constrained
+
+Pick one value from a list, range, or specialized picker.
+
+<Gallery minColumnWidth="320px">
+  <Showcase title="Select" of={InputStories.SelectBaseline} minWidth="320px" />
+  <Showcase title="Radio" of={InputStories.RadioBaseline} minWidth="320px" />
+  <Showcase title="ComboBox" of={InputStories.ComboBoxBaseline} minWidth="320px" />
+</Gallery>
+
+### Multiple
+
+Pick multiple values from a list.
+
+<Gallery minColumnWidth="220px">
+  <Showcase title="Multiselect" of={InputStories.MultiselectBaseline} minWidth="220px" />
+  <Showcase title="Multi ComboBox" of={InputStories.MultiComboBoxBaseline} minWidth="220px" />
+</Gallery>