@tcn/ui 0.0.3 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "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/state": "1.0.0",
-    "@tcn/icons": "2.1.0"
+    "@tcn/icons": "2.1.1",
+    "@tcn/state": "1.0.1"
   },
   "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';
@@ -27,7 +27,7 @@ export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
       style,
       color,
       hierarchy = 'secondary',
-      size = 'medium',
+      size = 'md',
       onTouchStart,
       onContextMenu,
       ...props
@@ -68,7 +68,12 @@ 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'],
+          'tcn-interactive',
+          'tcn-base-button',
+          className
+        )}
         style={finalStyle}
         onTouchStart={handleTouchStart}
         onContextMenu={handleContextMenu}

package/src/actions/button/button/button.module.css

@@ -6,90 +6,12 @@
   --button-color-disabled: var(--status-disabled, #cccccc);
 
   min-height: var(--button-height);
-  padding: 4px 8px;
-  border-radius: 4px;
   width: auto;
-  border: 1px solid transparent;
-  outline: none;
   cursor: pointer;
-  background: transparent;
   font-size: calc(14px * var(--scalar, 1));
   line-height: calc(16px * var(--scalar, 1));
 }
 
-.button:focus-visible {
-  outline: 3px solid color-mix(in srgb, var(--button-color) 40%, transparent);
-}
-
-/* Primary */
-.button[data-hierarchy="primary"] {
-  background: var(--button-color);
-  color: #ffffff;
-}
-
-.button[data-hierarchy="primary"]:hover {
-  background: var(--button-color-hover);
-  color: #ffffff;
-}
-
-.button[data-hierarchy="primary"]:active {
-  background: var(--button-color-active);
-  box-shadow: none;
-}
-
-/* Secondary */
-.button[data-hierarchy="secondary"] {
-  color: rgb(57, 85, 120);
-  border-color: rgb(57, 85, 120);
-}
-
-.button[data-hierarchy="secondary"]:hover {
-  background: color-mix(in srgb, rgb(57, 85, 120) 10%, rgb(255, 255, 255, 0.5));
-}
-
-.button[data-hierarchy="secondary"]:active {
-  background: color-mix(in srgb, rgb(57, 85, 120) 25%, rgb(255, 255, 255, 0.5));
-}
-
-/* Tertiary */
-.button[data-hierarchy="tertiary"] {
-  border-color: transparent;
-  color: rgb(57, 85, 120);
-}
-
-.button[data-hierarchy="tertiary"]:hover {
-  text-decoration: underline;
-  text-decoration-color: rgb(57, 85, 120);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 2px;
-}
-
-.button[data-hierarchy="tertiary"]:active {
-  opacity: 0.5;
-}
-
-/* Disabled */
-.button[data-is-disabled="true"] {
-  pointer-events: none;
-  background: var(--button-color-disabled);
-  color: #ffffff;
-  border-color: var(--button-color-disabled);
-}
-
-/* Disabled Secondary */
-.button[data-hierarchy="secondary"][data-is-disabled="true"] {
-  background: transparent;
-  color: var(--button-color-disabled);
-  border-color: var(--button-color-disabled);
-}
-
-/* Disabled Tertiary */
-.button[data-hierarchy="tertiary"][data-is-disabled="true"] {
-  background: transparent;
-  color: var(--button-color-disabled);
-  border-color: transparent;
-}
-
 /* Sizes */
 .button[data-size="sm"] {
   --button-height: calc(22px * var(--scalar, 1));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import cln from 'classnames';
+import { clsx } from 'clsx';
 import { BaseButton, type BaseButtonProps } from '../base_button/base_button.js';
 import styles from './button.module.css';
 
@@ -12,13 +12,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   return (
     <BaseButton
       ref={ref}
-      className={cln(styles.button, 'button', 'tcn-button', className)}
+      className={clsx(styles.button, 'tcn-button', className)}
       {...props}
     >
       {typeof children === 'string' ? (
-        <span className={cln(styles['button-text'], 'button-text', 'tcn-button-text')}>
-          {children}
-        </span>
+        <span className={clsx(styles['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.module.css

@@ -5,29 +5,3 @@
 .slim-button[data-is-disabled="true"] {
   pointer-events: none;
 }
-
-.slim-button[data-size="sm"] {
-  padding: 1px;
-}
-
-.slim-button[data-size="md"] {
-  padding: 2px;
-}
-
-.slim-button[data-size="lg"] {
-  padding: 3px;
-}
-
-.slim-button[data-hierarchy="tertiary"][data-is-disabled="true"] {
-  background-color: transparent;
-  border: none;
-  color: var(--button-color-disabled);
-  min-height: auto;
-  pointer-events: none;
-}
-
-.slim-button[data-hierarchy="secondary"][data-is-disabled="true"] {
-  background-color: transparent;
-  border: 1px solid var(--button-color-disabled);
-  color: var(--button-color-disabled);
-}

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'], 'tcn-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,7 +5,7 @@ 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';
 
 /*
@@ -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,7 +1,7 @@
 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 type { FieldInput } from '../common/types.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,7 +1,7 @@
 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';
@@ -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_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/inputs/checkbox/checkbox.stories.tsx

@@ -17,7 +17,15 @@ function Base(props: CheckboxProps) {
 }
 
 export default {
-  title: 'Checkbox',
+  title: 'Inputs/Checkbox',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A checkbox component that allows the user to select a value.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function Checkbox() {

package/src/inputs/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import styles from './checkbox.module.css';
 
@@ -36,7 +36,7 @@ export const Checkbox = React.forwardRef(function Checkbox(
         onChange && onChange(Boolean(e.currentTarget.checked), e);
       }}
       {...props}
-      className={classnames(className, styles.checkbox, 'checkbox')}
+      className={clsx(className, styles.checkbox, 'checkbox')}
       style={{ width, height, ...style }}
     />
   );

package/src/inputs/color_input/color_input.stories.tsx

@@ -8,7 +8,15 @@ function Base(props: ColorInputProps) {
 }
 
 export default {
-  title: 'Color Input',
+  title: 'Inputs/Color Input',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A color input component that allows the user to select a color.',
+      },
+    },
+  },
+  tags: ['autodocs'],
 };
 
 export function ColorInput() {