@tcn/ui 0.0.2 → 0.0.4

package/dist/typography/title/title.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../src/typography/title/title.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGtE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAElF,wBAAgB,KAAK,CAAC,EACpB,IAAW,EACX,QAAmB,EACnB,SAAqB,EACrB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAU,EACV,QAAQ,EACR,MAAM,EACN,SAAS,EACT,MAAM,EACN,GAAG,EACH,UAAiB,EACjB,EAAE,GACH,EAAE,UAAU,2CAiDZ"}
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../src/typography/title/title.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAGtE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAElF,wBAAgB,KAAK,CAAC,EACpB,IAAW,EACX,QAAmB,EACnB,SAAqB,EACrB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAU,EACV,QAAQ,EACR,MAAM,EACN,SAAS,EACT,MAAM,EACN,GAAG,EACH,UAAiB,EACjB,EAAE,GACH,EAAE,UAAU,2CAiDZ"}

package/dist/typography/title/title.js

@@ -1,37 +1,37 @@
-import { jsx as c } from "react/jsx-runtime";
-import u from "classnames";
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as u } from "clsx";
 import { s as x } from "../../title.module-B16de2jd.js";
-function j({
-  size: r = "md",
+function A({
+  size: a = "md",
   emphasis: o = "normal",
-  hierarchy: s = "primary",
-  color: e,
+  hierarchy: c = "primary",
+  color: n,
   children: g,
   className: h,
   style: i = {},
-  padStart: n,
-  padEnd: f,
-  padBottom: m,
-  padTop: t,
-  pad: d,
+  padStart: r,
+  padEnd: e,
+  padBottom: f,
+  padTop: l,
+  pad: m,
   selectable: p = !0,
-  as: l
+  as: d
 }) {
-  let a = l;
-  return l == null && (r === "lg" ? a = "h1" : r === "md" ? a = "h2" : a = "h3"), d && (i.padding = d), n && (i.paddingInlineStart = n), f && (i.paddingInlineEnd = f), t && (i.paddingTop = t), m && (i.paddingBottom = m), e && (i.color = e), /* @__PURE__ */ c(
-    a,
+  let t = d;
+  return d == null && (a === "lg" ? t = "h1" : a === "md" ? t = "h2" : t = "h3"), m && (i.padding = m), r && (i.paddingInlineStart = r), e && (i.paddingInlineEnd = e), l && (i.paddingTop = l), f && (i.paddingBottom = f), n && (i.color = n), /* @__PURE__ */ s(
+    t,
     {
-      "data-hierarchy": s,
+      "data-hierarchy": c,
       "data-emphasis": o,
       "data-selectable": p,
-      className: u(x.title, "title", h),
+      className: u(x.title, "title", "tcn-title", h),
       style: i,
-      "data-size": r,
+      "data-size": a,
       children: g
     }
   );
 }
 export {
-  j as Title
+  A as Title
 };
 //# sourceMappingURL=title.js.map

package/dist/typography/title/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\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  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Title({\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  as,\n}: TitleProps) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\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    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={classnames(styles['title'], 'title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","classnames","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,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,IAAAC;AACF,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,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,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAWC,EAAO,OAAU,SAASZ,CAAS;AAAA,MACzD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\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  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Title({\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  as,\n}: TitleProps) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\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    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={clsx(styles['title'], 'title', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","clsx","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,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,IAAAC;AACF,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,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,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAKC,EAAO,OAAU,SAAS,aAAaZ,CAAS;AAAA,MAChE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/v_body.css

@@ -1 +1 @@
-._v-body_d8f1917{gap:var(--gap-medium);padding:var(--padding-medium)}
+._v-body_d8f1917{min-height:0;flex-grow:1;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -9,6 +9,13 @@
     "access": "public"
   },
   "access": "public",
+  "blackcatConfig": {
+    "storybook": {
+      "publish": true,
+      "title": "UI",
+      "port": 6200
+    }
+  },
   "files": [
     "dist",
     "src",
@@ -82,6 +89,18 @@
       "import": "./dist/themes/index.js",
       "default": "./dist/themes/index.js"
     },
+    "./themes/windows98": {
+      "@bc-monorepo/source": "./src/themes/themes/windows_98/windows_98_theme.ts",
+      "types": "./dist/themes/themes/windows_98/windows_98_theme.d.ts",
+      "import": "./dist/themes/themes/windows_98/windows_98_theme.js",
+      "default": "./dist/themes/themes/windows_98/windows_98_theme.js"
+    },
+    "./themes/ergo": {
+      "@bc-monorepo/source": "./src/themes/themes/ergo/ergo_theme.ts",
+      "types": "./dist/themes/themes/ergo/ergo_theme.d.ts",
+      "import": "./dist/themes/themes/ergo/ergo_theme.js",
+      "default": "./dist/themes/themes/ergo/ergo_theme.js"
+    },
     "./tokens": {
       "@bc-monorepo/source": "./src/tokens/index.ts",
       "types": "./dist/tokens/index.d.ts",
@@ -107,10 +126,10 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.1.0",
-    "@tcn/state": "1.0.0"
+    "@tcn/state": "1.0.0",
+    "@tcn/icons": "2.1.0"
   },
   "scripts": {
     "build": "vite build",

package/src/actions/button/__stories__/button.stories.tsx

@@ -6,7 +6,7 @@ import { Spacer } from '../../../stacks/spacer.js';
 import { Button, ButtonProps } from '../button/button.js';
 
 const meta: Meta<ButtonProps> = {
-  title: 'Components/Button/Button',
+  title: 'Actions/Button',
   component: Button,
   tags: ['autodocs'],
   args: {

package/src/actions/button/__stories__/button_group.stories.tsx

@@ -6,7 +6,7 @@ import { Button } from '../button/button.js';
 import { ButtonGroup } from '../button_group/button_group.js';
 
 export default {
-  title: 'Components/Button/Button Group',
+  title: 'Actions/Button Group',
   component: ButtonGroup,
   tags: ['autodocs'],
 };

package/src/actions/button/__stories__/select_group.stories.tsx

@@ -6,7 +6,7 @@ import { SelectGroup } from '../select_group/select_group.js';
 import { SingleSelectGroup } from '../select_group/single_select_group.js';
 
 export default {
-  title: 'Components/Button/Select Group',
+  title: 'Actions/Select Group',
   component: SelectGroup,
   tags: ['autodocs'],
   argTypes: {

package/src/actions/button/__stories__/slim_button.stories.tsx

@@ -8,7 +8,7 @@ import { ButtonProps } from '../button/button.js';
 import { SlimButton } from '../slim_button/slim_button.js';
 
 const meta: Meta<ButtonProps> = {
-  title: 'Components/Button/Slim Button',
+  title: 'Actions/Slim Button',
   component: SlimButton,
   tags: ['autodocs'],
   args: {

package/src/actions/button/base_button/base_button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { Hierarchy, Size } from '../../../utils/index.js';
 import { HStack } from '../../../stacks/h_stack.js';
 import type { HStackOwnProps } from '../../../stacks/h_stack.js';
@@ -68,7 +68,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
         data-hierarchy={hierarchy}
         data-size={size}
         data-is-disabled={Boolean(props.disabled)}
-        className={classNames(styles['base-button'], 'base-button', className)}
+        className={clsx(styles['base-button'], 'base-button', className)}
         style={finalStyle}
         onTouchStart={handleTouchStart}
         onContextMenu={handleContextMenu}

package/src/actions/button/button/button.tsx

@@ -1,6 +1,6 @@
-import cln from 'classnames';
 import React from 'react';
-import { BaseButton, BaseButtonProps } from '../base_button/base_button.js';
+import { clsx } from 'clsx';
+import { BaseButton, type BaseButtonProps } from '../base_button/base_button.js';
 import styles from './button.module.css';
 
 export interface ButtonProps extends BaseButtonProps {}
@@ -10,9 +10,15 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   ref
 ) {
   return (
-    <BaseButton ref={ref} className={cln(styles.button, 'button', className)} {...props}>
+    <BaseButton
+      ref={ref}
+      className={clsx(styles.button, 'button', 'tcn-button', className)}
+      {...props}
+    >
       {typeof children === 'string' ? (
-        <span className={cln(styles['button-text'], 'button-text')}>{children}</span>
+        <span className={clsx(styles['button-text'], 'button-text', 'tcn-button-text')}>
+          {children}
+        </span>
       ) : (
         children
       )}

package/src/actions/button/button_group/button_group.tsx

@@ -1,7 +1,7 @@
 import type { Hierarchy, Size } from '../../../utils/index.js';
 import { HStack } from '../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { Button, ButtonProps } from '../button/button.js';
 import styles from './button_group.module.css';
@@ -32,7 +32,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
         height="auto"
         data-hierarchy={hierarchy}
         data-size={size}
-        className={classNames(styles['button-group'], 'button-group', className)}
+        className={clsx(styles['button-group'], 'button-group', className)}
         {...props}
       >
         {buttons.map((button, i) => {
@@ -42,7 +42,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
             <React.Fragment key={i}>
               <Button
                 {...button.props}
-                className={classNames(
+                className={clsx(
                   styles['button-group-button'],
                   'button-group-button',
                   button.props.className
@@ -52,10 +52,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
               />
               {!isLast && (
                 <div
-                  className={classNames(
-                    styles['button-group-divider'],
-                    'button-group-divider'
-                  )}
+                  className={clsx(styles['button-group-divider'], 'button-group-divider')}
                   data-hierarchy={hierarchy}
                   data-size={size}
                 />

package/src/actions/button/select_group/select_group.tsx

@@ -1,6 +1,6 @@
 import { HStack } from '../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { Button } from '../button/button.js';
 import styles from './select_group.module.css';
@@ -49,7 +49,7 @@ export const SelectGroup = React.forwardRef(function ButtonGroup(
       width="auto"
       height="auto"
       data-is-disabled={disabled}
-      className={classNames(styles['select-group'], 'select-group', className)}
+      className={clsx(styles['select-group'], 'select-group', className)}
       {...props}
     >
       {options.map((option, i) => {
@@ -63,7 +63,7 @@ export const SelectGroup = React.forwardRef(function ButtonGroup(
             <Button
               disabled={disabled || option.props.disabled}
               data-is-disabled={disabled || option.props.disabled}
-              className={classNames(styles['select-group-option'], 'select-group-option')}
+              className={clsx(styles['select-group-option'], 'select-group-option')}
               hierarchy={isSelected ? 'primary' : 'secondary'}
               onClick={select}
               value={option.props.value}

package/src/actions/button/slim_button/slim_button.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import classNames from 'classnames';
 import { Button, ButtonProps } from '../button/button.js';
+import { clsx } from 'clsx';
+// Styles
 import styles from './slim_button.module.css';
 
 export const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -8,7 +9,7 @@ export const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Button
         ref={ref}
-        className={classNames(styles['slim-button'], 'slim-button', className)}
+        className={clsx(styles['slim-button'], 'slim-button', className)}
         {...props}
       >
         {children}

package/src/feedback/lazy/lazy.stories.tsx

@@ -4,7 +4,7 @@ import { HStack } from '../../stacks/h_stack.js';
 import { Runner } from '@tcn/state';
 
 export default {
-  title: 'lazy',
+  title: 'Feedback/Lazy',
 };
 
 const delay = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms));

package/src/feedback/loading/__storybook__/loading.stories.tsx

@@ -7,7 +7,7 @@ import styles from '../../storybook.module.css';
 import customStyles from './storybook_custom_lines.module.css';
 
 export default {
-  title: 'Loading',
+  title: 'Feedback/Loading',
 };
 
 function Base(props: LoadingProps) {

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

@@ -3,7 +3,7 @@ import { ProgressBar as Component, ProgressBarProps } from './progress_bar.js';
 import styles from '../storybook.module.css';
 
 export default {
-  title: 'Progress Bar',
+  title: 'Feedback/Progress Bar',
 };
 
 function Base(props: Partial<ProgressBarProps>) {

package/src/form/field/common/field_control/field_control.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { VStack } from '../../../../stacks/v_stack.js';
 import type { VStackOwnProps } from '../../../../stacks/v_stack.js';
 import type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './field_control.module.css';
 import { FieldErrorMessage } from '../field_error.js';
 
@@ -38,7 +38,7 @@ export const FieldControl = React.forwardRef(function FieldControl(
       data-locked={locked}
       data-loading={loading}
       data-error={hasError}
-      className={classNames(styles['field-control'], 'field-control', className)}
+      className={clsx(styles['field-control'], 'field-control', className)}
       height="auto"
       width="flex"
       hAlign="end"

package/src/form/field/common/field_header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { VStack } from '../../../stacks/v_stack.js';
 import type { VStackOwnProps } from '../../../stacks/v_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
@@ -27,7 +27,7 @@ export const FieldHeader = React.forwardRef(function FieldHeader(
       as="div"
       hAlign="start"
       gap="4px"
-      className={classNames('field-header', className)}
+      className={clsx('field-header', className)}
       ref={ref}
       {...props}
     >

package/src/form/field/common/status_input/status_input.tsx

@@ -5,11 +5,11 @@ import type { HStackOwnProps } from '../../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../../stacks/types/as.js';
 import React from 'react';
 import { Loading } from '../../../../feedback/index.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './status_input.module.css';
 
 /*
- TODO: I really want to make these themable.
+ TODO: I really want to make these themeable.
  The way we do that is simply put a div placeholder with
  a class that the theme can override. They can use svgs as 
  backgrounds for icons. This would make it so the component
@@ -25,10 +25,7 @@ const LoadingAdornment: React.FC = () => {
 
 const ErroredAdornment: React.FC = () => {
   return (
-    <AlertTriangleIcon
-      className={classNames(styles['field-error'], 'field-error')}
-      size="lg"
-    />
+    <AlertTriangleIcon className={clsx(styles['field-error'], 'field-error')} size="lg" />
   );
 };
 
@@ -66,7 +63,7 @@ export const FieldStatusInput = React.forwardRef(function StatusInput(
     <HStack
       ref={ref}
       data-state={state}
-      className={classNames(
+      className={clsx(
         'field-status-input',
         styles['field-status-input'],
         className,

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

@@ -10,7 +10,7 @@ import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
 import { theme } from '../../themes/index.js';
 
 export default {
-  title: 'Field/Field',
+  title: 'Form/Field',
   parameters: {
     docs: {
       description: {
@@ -19,6 +19,7 @@ export default {
       },
     },
   },
+  tags: ['autodocs'],
 };
 
 export function Baseline() {

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

@@ -9,7 +9,16 @@ import { HStack } from '../../../stacks/h_stack.js';
 import { Spacer } from '../../../stacks/spacer.js';
 
 export default {
-  title: 'Field/HField',
+  title: 'Form/HField',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A horizontal field component that displays a label and input side by side.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Baseline() {

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

@@ -1,10 +1,10 @@
 import { HStack } from '../../../stacks/h_stack.js';
 import type { HStackOwnProps } from '../../../stacks/h_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useState } from 'react';
 import styles from './h_field.module.css';
-import { FieldInput } from '../common/types.js';
+import type { FieldInput } from '../common/types.js';
 import { FieldHeader } from '../common/field_header.js';
 import { FieldControl } from '../common/field_control/field_control.js';
 import { FieldStatusInput } from '../common/status_input/status_input.js';
@@ -47,7 +47,7 @@ export const HField = React.forwardRef(function HField(
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}
-      className={classNames('base-field', styles['h-field'], 'h-field', className)}
+      className={clsx('base-field', styles['h-field'], 'h-field', className)}
       vAlign="start"
       hAlign="start"
       height="auto"

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

@@ -9,7 +9,16 @@ import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
 import { FieldSet } from '../../field_set/field_set.js';
 
 export default {
-  title: 'Field/VField',
+  title: 'Form/VField',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A vertical field component that displays a label and input below each other.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Baseline() {

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

@@ -1,13 +1,13 @@
 import { VStack } from '../../../stacks/v_stack.js';
 import type { VStackOwnProps } from '../../../stacks/v_stack.js';
 import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useState } from 'react';
 import styles from './v_field.module.css';
 import { FieldControl } from '../common/field_control/field_control.js';
 import { FieldHeader } from '../common/field_header.js';
 import { FieldStatusInput } from '../common/status_input/status_input.js';
-import { FieldInput } from '../common/types.js';
+import type { FieldInput } from '../common/types.js';
 
 export interface VFieldOwnProps extends FieldInput {
   children: React.ReactNode;
@@ -46,7 +46,7 @@ export const VField = React.forwardRef(function VField(
       data-locked={locked}
       data-error={hasError}
       data-loading={loading}
-      className={classNames('base-field', styles['v-field'], 'v-field', className)}
+      className={clsx('base-field', styles['v-field'], 'v-field', className)}
       vAlign="start"
       hAlign="start"
       height="auto"

package/src/form/field_presenters/options_field_presenter.ts

@@ -1,5 +1,5 @@
 import { Signal } from '@tcn/state';
-import { FieldOptions, FieldPresenter, FieldState } from './field_presenter.js';
+import { type FieldOptions, FieldPresenter, type FieldState } from './field_presenter.js';
 
 export interface OptionsFieldState<TValue = string, TOption = string>
   extends FieldState<TValue> {

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

@@ -15,7 +15,15 @@ import {
 import { HField } from '../field/h_field/h_field.js';
 
 export default {
-  title: 'Fieldset',
+  title: 'Form/Field Set',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A field set component that displays a legend and a group of fields.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Baseline() {

package/src/form/field_set/field_set.tsx

@@ -3,7 +3,7 @@ import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import type { VStackProps } from '../../stacks/v_stack.js';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useMemo } from 'react';
 import styles from './field_set.module.css';
 
@@ -37,13 +37,13 @@ export const FieldSet = React.forwardRef(function FieldSet(
       as="fieldset"
       aria-labelledby={labelId}
       ref={ref}
-      className={classnames(styles['field-set'], className, 'field-set')}
+      className={clsx(styles['field-set'], className, 'field-set')}
       {...props}
     >
       {legend && (
         <HStack
           id={labelId}
-          className={classnames('legend', 'field-set-legend')}
+          className={clsx('legend', 'field-set-legend')}
           hAlign="start"
           height={props.height}
         >
@@ -54,10 +54,7 @@ export const FieldSet = React.forwardRef(function FieldSet(
           {endAdornments}
         </HStack>
       )}
-      <VStack
-        className={classnames('field-set-body', styles['field-set-body'])}
-        {...props}
-      >
+      <VStack className={clsx('field-set-body', styles['field-set-body'])} {...props}>
         {children}
       </VStack>
     </VStack>

package/src/form/form_field.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useSignalValue } from '@tcn/state';
-import { FieldPresenter, FieldState } from './field_presenters/field_presenter.js';
+import { FieldPresenter, type FieldState } from './field_presenters/field_presenter.js';
 
 export function FormField<T>({
   field,