@tcn/ui 0.0.3 → 0.1.1

package/src/stacks/h_collapsible_box.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect } from 'react';
 import { useForkRef } from '../utils/index.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Box, BoxProps } from './box/box.js';
 import styles from './collapsible_box.module.css';
 import { useIsCollapsed } from './utils/use_is_collapsed.js';
@@ -41,7 +41,7 @@ export const HCollapsibleBox = React.forwardRef(function CollapsibleBox(
         props.onWidthResizeEnd?.(width);
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${width}px`);
       }}
-      className={classNames(props.className, styles['collapsible-box'])}
+      className={clsx(props.className, styles['collapsible-box'])}
       children={children}
     />
   );

package/src/stacks/h_stack.stories.tsx

@@ -1,22 +1,26 @@
 import React from 'react';
 import { Meta } from '@storybook/react-vite';
 import { Circle } from './story_components/circle.js';
-import { HStack, HStackProps } from './h_stack.js';
-import { HorizontalBorder } from './story_components/horizontal_border.js';
+import { HStack as HStackComponent, type HStackProps } from './h_stack.js';
 import { Spacer } from './spacer.js';
 import { Rect } from './story_components/rect.js';
-import { ZStack } from './z_stack.js';
+import { StyleBox } from './story_components/style_box.js';
 
 const meta: Meta<HStackProps> = {
-  title: 'HStack',
-  component: HStack,
+  title: 'Stacks/HStack',
+  component: HStackComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A horizontal stack component that can be used to arrange elements horizontally.',
+      },
+    },
+  },
   args: {
-    minWidth: '400px',
     width: '400px',
-    maxWidth: '400px',
-    minHeight: '150px',
     height: '150px',
-    maxHeight: '150px',
   },
   argTypes: {
     as: { table: { disable: true } },
@@ -26,12 +30,12 @@ const meta: Meta<HStackProps> = {
     inline: { table: { disable: true } },
     style: { table: { disable: true } },
     overflowX: {
-      options: ['auto', 'hidden', 'visible'],
-      control: { type: 'radio' },
+      options: [undefined, 'auto', 'scroll', 'hidden', 'visible'],
+      control: { type: 'select' },
     },
     overflowY: {
-      options: ['auto', 'hidden', 'visible'],
-      control: { type: 'radio' },
+      options: [undefined, 'hidden', 'visible'],
+      control: { type: 'select' },
     },
     vAlign: {
       options: ['start', 'center', 'end'],
@@ -41,67 +45,108 @@ const meta: Meta<HStackProps> = {
       options: ['start', 'center', 'end'],
       control: { type: 'radio' },
     },
+    width: {
+      control: { type: 'text' },
+    },
+    minWidth: {
+      control: { type: 'text' },
+    },
+    maxWidth: {
+      control: { type: 'text' },
+    },
+    height: {
+      control: { type: 'text' },
+    },
+    minHeight: {
+      control: { type: 'text' },
+    },
+    maxHeight: {
+      control: { type: 'text' },
+    },
+    allowFlow: {
+      control: { type: 'boolean' },
+    },
+    gap: {
+      control: { type: 'text' },
+    },
+    growWeight: {
+      control: { type: 'number' },
+    },
+    shrinkWeight: {
+      control: { type: 'number' },
+    },
   },
 };
 
 export default meta;
 
-export function Default(props: HStackProps) {
+export function HStack(props: HStackProps) {
   return (
-    <ZStack>
-      <HorizontalBorder>
-        <HStack {...props}>
-          <Rect
-            width="75px"
-            height="75px"
-            onClick={() => {
-              // biome-ignore lint/suspicious/noConsole: Storybook
-              console.log('hello');
-            }}
-          />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-        </HStack>
-      </HorizontalBorder>
-    </ZStack>
+    <StyleBox border="1px dashed #ccc" backgroundColor="white">
+      <HStackComponent {...props}>
+        <Rect
+          width="75px"
+          height="75px"
+          onClick={() => {
+            // biome-ignore lint/suspicious/noConsole: Storybook
+            console.log('hello');
+          }}
+        />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+      </HStackComponent>
+    </StyleBox>
   );
 }
 
+HStack.storyName = 'HStack';
+
 export function ManyChildren(props: HStackProps) {
   return (
-    <ZStack>
-      <HorizontalBorder>
-        <HStack {...props} height="auto">
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-          <Spacer width="25px" />
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-          <Spacer width="25px" />
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-          <Spacer width="25px" />
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-          <Spacer width="25px" />
-          <Rect width="75px" height="75px" />
-          <Spacer width="25px" />
-          <Circle size="75px" />
-        </HStack>
-      </HorizontalBorder>
-    </ZStack>
+    <StyleBox
+      border="1px dashed #ccc"
+      backgroundColor="white"
+      width="100%"
+      overflowX="auto"
+    >
+      <HStackComponent height="auto" {...props}>
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+        <Spacer width="25px" />
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+        <Spacer width="25px" />
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+        <Spacer width="25px" />
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+        <Spacer width="25px" />
+        <Rect width="75px" height="75px" />
+        <Spacer width="25px" />
+        <Circle size="75px" />
+      </HStackComponent>
+    </StyleBox>
   );
 }
 
 export function Padding() {
   return (
-    <HStack height="auto" style={{ border: '1px dashed #ccc' }} padding="30px">
-      <Circle></Circle>
-      <Circle></Circle>
-    </HStack>
+    <StyleBox
+      border="1px dashed #ccc"
+      backgroundColor="white"
+      width="100%"
+      overflowX="auto"
+    >
+      {' '}
+      <HStackComponent height="auto" padding="30px">
+        <Circle></Circle>
+        <Circle></Circle>
+      </HStackComponent>
+    </StyleBox>
   );
 }

package/src/stacks/h_stack.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import { removeUndefinedProperties } from './utils/remove_undefined_properties.js';
 import { CommonProps } from './types/common.js';
@@ -96,7 +96,7 @@ export const HStack = React.forwardRef(function HStack<T extends HTMLElement>(
   return (
     <As
       ref={ref}
-      className={classNames(styles['h-stack'], className, 'h-stack', 'stack')}
+      className={clsx(styles['h-stack'], className, 'h-stack', 'stack')}
       style={finalStyles}
       data-inline={Boolean(inline)}
       data-allow-flow={Boolean(allowFlow)}

package/src/stacks/spacer.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 
 export interface SpacerProps {
@@ -41,7 +41,7 @@ export const Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(function Spa
         zIndex: 1,
         flex,
       }}
-      className={classNames('spacer', className)}
+      className={clsx('spacer', className)}
     ></div>
   );
 });

package/src/stacks/story_components/circle.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ZStack, ZStackProps } from '../z_stack.js';
 import styles from './circle.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface CircleProps extends ZStackProps {
   color?: string;
@@ -23,7 +23,7 @@ export const Circle = React.forwardRef(function Circle(
       style={finalStyle}
       width={size}
       height={size}
-      className={classNames(className, styles['circle'])}
+      className={clsx(className, styles['circle'])}
       {...props}
     />
   );

package/src/stacks/story_components/picture_placeholder.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 import styles from './picture_placeholder.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface PicturePlaceholderProps extends HTMLAttributes<SVGSVGElement> {
   color?: string;
@@ -29,7 +29,7 @@ export const PicturePlaceholder = React.forwardRef(function PicturePlaceholder(
       height={size}
       viewBox="0 0 16 16"
       xmlns="http://www.w3.org/2000/svg"
-      className={classNames(className, styles['picture-placeholder'])}
+      className={clsx(className, styles['picture-placeholder'])}
       style={finalStyle}
       {...props}
     >

package/src/stacks/story_components/rect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, BoxProps } from '../box/box.js';
 import styles from './rect.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface RectProps extends BoxProps {
   color?: string;
@@ -27,7 +27,7 @@ export const Rect = React.forwardRef(function Rect(
     <Box
       ref={ref}
       style={finalStyle}
-      className={classNames(className, styles['rect'])}
+      className={clsx(className, styles['rect'])}
       width={width}
       height={height}
       {...props}

package/src/stacks/v_collapsible_box.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect } from 'react';
 import { useForkRef } from '../utils/index.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Box, BoxProps } from './box/box.js';
 import styles from './collapsible_box.module.css';
 import { useIsCollapsed } from './utils/use_is_collapsed.js';
@@ -41,7 +41,7 @@ export const VCollapsibleBox = React.forwardRef(function CollapsibleBox(
         collapsibleRef.current?.style.setProperty('--collapsible-size', `${height}px`);
         props.onHeightResizeEnd?.(height);
       }}
-      className={classNames(props.className, styles['collapsible-box'])}
+      className={clsx(props.className, styles['collapsible-box'])}
       children={children}
     />
   );

package/src/stacks/v_stack.stories.tsx

@@ -1,23 +1,95 @@
+import { Meta } from '@storybook/react-vite';
 import { Circle } from './story_components/circle.js';
 import { StyleBox } from './story_components/style_box.js';
-import { VStack } from './v_stack.js';
+import { VStack as VStackComponent, type VStackProps } from './v_stack.js';
 import { Rect } from './story_components/rect.js';
 import { PicturePlaceholder } from './story_components/picture_placeholder.js';
 
-export default {
-  title: 'VStack',
+const meta: Meta<VStackProps> = {
+  title: 'Stacks/VStack',
+  component: VStackComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A vertical stack component that can be used to arrange elements vertically.',
+      },
+    },
+  },
+  args: {
+    width: '150px',
+    vAlign: 'center',
+    gap: '25px',
+  },
+  argTypes: {
+    as: { table: { disable: true } },
+    children: { table: { disable: true } },
+    zIndex: { table: { disable: true } },
+    className: { table: { disable: true } },
+    inline: { table: { disable: true } },
+    style: { table: { disable: true } },
+    overflowX: {
+      options: [undefined, 'hidden', 'visible'],
+      control: { type: 'select' },
+    },
+    overflowY: {
+      options: [undefined, 'auto', 'scroll', 'hidden', 'visible'],
+      control: { type: 'select' },
+    },
+    vAlign: {
+      options: ['start', 'center', 'end'],
+      control: { type: 'radio' },
+    },
+    hAlign: {
+      options: ['start', 'center', 'end'],
+      control: { type: 'radio' },
+    },
+    width: {
+      control: { type: 'text' },
+    },
+    minWidth: {
+      control: { type: 'text' },
+    },
+    maxWidth: {
+      control: { type: 'text' },
+    },
+    height: {
+      control: { type: 'text' },
+    },
+    minHeight: {
+      control: { type: 'text' },
+    },
+    maxHeight: {
+      control: { type: 'text' },
+    },
+    allowFlow: {
+      control: { type: 'boolean' },
+    },
+    gap: {
+      control: { type: 'text' },
+    },
+    growWeight: {
+      control: { type: 'number' },
+    },
+    shrinkWeight: {
+      control: { type: 'number' },
+    },
+  },
 };
 
-export function Basic({ transform }: { transform?: string }) {
+export default meta;
+
+export function VStack(props: VStackProps) {
   return (
     <StyleBox
       borderLeft="1px dashed #ccc"
-      width="150px"
+      width="auto"
       height="auto"
       borderRight="1px dashed #ccc"
-      transform={transform}
+      backgroundColor="white"
     >
-      <VStack vAlign="center" gap="25px">
+      <VStackComponent {...props}>
         <Rect width="150px" height="150px" color="#acdef0">
           Content
         </Rect>
@@ -25,16 +97,25 @@ export function Basic({ transform }: { transform?: string }) {
           Content
         </Circle>
         <PicturePlaceholder size="150px" />
-      </VStack>
+      </VStackComponent>
     </StyleBox>
   );
 }
 
+VStack.storyName = 'VStack';
+
 export function Padding() {
   return (
-    <VStack width="auto" style={{ border: '1px dashed #ccc' }} padding="30px">
+    <StyleBox
+      borderLeft="1px dashed #ccc"
+      width="auto"
+      height="auto"
+      borderRight="1px dashed #ccc"
+      backgroundColor="white"
+      padding="30px"
+    >
       <Circle></Circle>
       <Circle></Circle>
-    </VStack>
+    </StyleBox>
   );
 }

package/src/stacks/v_stack.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import { removeUndefinedProperties } from './utils/remove_undefined_properties.js';
 import { CommonProps } from './types/common.js';
@@ -100,7 +100,7 @@ export const VStack = React.forwardRef(function VStack<
   return (
     <As
       ref={ref}
-      className={classNames(styles['v-stack'], className, 'v-stack', 'stack')}
+      className={clsx(styles['v-stack'], className, 'v-stack', 'stack')}
       style={finalStyles}
       data-inline={Boolean(inline)}
       data-allow-flow={Boolean(allowFlow)}

package/src/stacks/z_stack.stories.tsx

@@ -4,8 +4,16 @@ import { StyleBox } from './story_components/style_box.js';
 import { ZStack } from './z_stack.js';
 
 export default {
-  title: 'ZStack',
+  title: 'Stacks/ZStack',
   component: ZStack,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A stack component that can be used to arrange elements in a z-axis.',
+      },
+    },
+  },
 };
 
 function forEachNumber(startIndex: number, endIndex: number) {

package/src/stacks/z_stack.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import { removeUndefinedProperties } from './utils/remove_undefined_properties.js';
 import { CommonProps } from './types/common.js';
@@ -90,7 +90,7 @@ export const ZStack = React.forwardRef(function ZStack<T extends HTMLElement>(
         ...removeUndefinedProperties(defaultStyles),
         ...style,
       }}
-      className={classNames(styles['z-stack'], className, 'z-stack', 'stack')}
+      className={clsx(styles['z-stack'], className, 'z-stack', 'stack')}
       data-inline={Boolean(inline)}
       data-v-alignment={vAlign}
       data-h-alignment={hAlign}

package/src/surfaces/alert/alert.stories.tsx

@@ -1,14 +1,14 @@
 import { ZStack } from '../../stacks/z_stack.js';
 import React, { useState } from 'react';
-import { Alert } from './alert.js';
+import { Alert as AlertComponent } from './alert.js';
 import { Button } from '../../actions/index.js';
 import { AlertTriangleIcon } from '@tcn/icons/alert_triangle_icon.js';
 
 export default {
-  title: 'Alert',
+  title: 'Surfaces/Alert',
 };
 
-export function Baseline() {
+export function Alert() {
   const [showAlert, setShowAlert] = useState(false);
 
   function open() {
@@ -21,7 +21,7 @@ export function Baseline() {
   return (
     <ZStack>
       <Button onClick={open}>Open Alert</Button>
-      <Alert
+      <AlertComponent
         title="STOP"
         graphic={<AlertTriangleIcon color="#ff6565" width="80px" height="80px" />}
         description="This is where you should say something helpful to the user."

package/src/surfaces/alert/alert.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import { Button } from '../../actions/index.js';
 import { Confirm, ConfirmProps } from '../confirm/confirm.js';
@@ -18,7 +18,7 @@ export const Alert = React.forwardRef(function Alert(
   return (
     <Confirm
       ref={ref}
-      className={classNames(className, 'alert')}
+      className={clsx(className, 'alert')}
       {...props}
       actions={
         <Button onClick={onAccept} hierarchy="primary" width="100%">

package/src/surfaces/card/card.tsx

@@ -1,23 +1,17 @@
 import { VStack, type VStackProps } from '../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
-import styles from './card.module.css';
 
 export interface CardProps extends Omit<VStackProps, 'as' | 'children'> {
   children?: React.ReactNode;
 }
 
-export const Card = React.forwardRef<HTMLElement, CardProps>(function VPanel(
+export const Card = React.forwardRef<HTMLElement, CardProps>(function Card(
   { children, className, ...props }: CardProps,
   ref
 ) {
   return (
-    <VStack
-      ref={ref}
-      as="section"
-      className={classNames(className, styles.card, 'card')}
-      {...props}
-    >
+    <VStack ref={ref} as="section" className={clsx(className, 'tcn-card')} {...props}>
       {children}
     </VStack>
   );

package/src/surfaces/confirm/confirm.stories.tsx

@@ -1,14 +1,14 @@
 import { ZStack } from '../../stacks/z_stack.js';
 import React, { useState } from 'react';
 import { Button } from '../../actions/index.js';
-import { Confirm } from './confirm.js';
+import { Confirm as ConfirmComponent } from './confirm.js';
 import { BulbIcon } from '@tcn/icons/bulb_icon.js';
 
 export default {
-  title: 'Confirm',
+  title: 'Surfaces/Confirm',
 };
 
-export function Baseline() {
+export function Confirm() {
   const [showAlert, setShowAlert] = useState(false);
 
   function open() {
@@ -22,7 +22,7 @@ export function Baseline() {
   return (
     <ZStack>
       <Button onClick={open}>Show Tip</Button>
-      <Confirm
+      <ConfirmComponent
         title="Tip"
         description="This is where you should say something helpful to the user."
         graphic={<BulbIcon color="#e48139" width="100px" height="100px" />}

package/src/surfaces/confirm/confirm.tsx

@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
@@ -62,7 +62,7 @@ export const Confirm = React.forwardRef(function Confirm(
             <Box onClick={shakeConfirm} {...veilProps} height="100%"></Box>
             <div
               ref={ref}
-              className={classNames(styles.confirm, className, 'confirm')}
+              className={clsx(styles.confirm, className, 'confirm')}
               data-shake={shake}
               {...props}
             >
@@ -75,10 +75,7 @@ export const Confirm = React.forwardRef(function Confirm(
                   {description}
                 </BodyText>
                 <Spacer height="16px" />
-                <Box
-                  className={classNames(styles.actions, 'confirm-actions')}
-                  height="auto"
-                >
+                <Box className={clsx(styles.actions, 'confirm-actions')} height="auto">
                   {actions}
                 </Box>
               </VStack>

package/src/surfaces/drawers/__stories__/drawers.stories.tsx

@@ -4,7 +4,7 @@ import { DrawerTop } from '../drawer_top/drawer_top';
 import { DrawerBottom } from '../drawer_bottom/drawer_bottom';
 
 export default {
-  title: 'Drawers / Drawers',
+  title: 'Surfaces/Drawers',
   component: DrawerStart,
   tags: ['autodocs'],
 };

package/src/surfaces/drawers/drawer_bottom/drawer_bottom.tsx

@@ -1,5 +1,5 @@
 import { VStack, type VStackProps } from '../../../stacks/v_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './drawer_bottom.module.css';
 
@@ -13,7 +13,7 @@ export const DrawerBottom = React.forwardRef<HTMLElement, DrawerBottomProps>(
       <VStack
         ref={ref}
         as="section"
-        className={classNames(styles.drawerBottom, className, 'drawer-bottom')}
+        className={clsx(styles.drawerBottom, className, 'drawer-bottom')}
         {...props}
       >
         {children}