@tcn/ui 0.0.3 → 0.0.4

package/src/overlay/context_menu/context_menu.stories.tsx

@@ -5,11 +5,19 @@ import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import React from 'react';
 import { useState } from 'react';
-import { ContextMenu } from './context_menu.js';
+import { ContextMenu as ContextMenuComponent } from './context_menu.js';
 import { MenuItem } from '../menu/menu.js';
 
 export default {
-  title: 'Context Menu',
+  title: 'Overlays/Context Menu',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A context menu component that displays a menu when triggered.',
+      },
+    },
+  },
 };
 
 function Example() {
@@ -41,7 +49,7 @@ function Example() {
         Right Click Me
       </ZStack>
 
-      <ContextMenu open={open} position={position} onClose={close}>
+      <ContextMenuComponent open={open} position={position} onClose={close}>
         <MenuItem label="Option 1" />
         <MenuItem
           label="Option 2"
@@ -63,12 +71,12 @@ function Example() {
             <MenuItem label="Option 4" />
           </MenuItem>
         </MenuItem>
-      </ContextMenu>
+      </ContextMenuComponent>
     </>
   );
 }
 
-export function Baseline() {
+export function ContextMenu() {
   return (
     <VStack height="100%">
       <Example />

package/src/overlay/menu/menu.stories.tsx

@@ -7,15 +7,23 @@ import { HStack } from '../../stacks/h_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Checkbox } from '../../inputs/checkbox/checkbox.js';
-import { Menu, MenuItem } from './menu.js';
+import { Menu as MenuComponent, MenuItem } from './menu.js';
 import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
 import { Button } from '../../actions/index.js';
 
 export default {
-  title: 'Menu',
+  title: 'Overlays/Menu',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A menu component that displays a list of options.',
+      },
+    },
+  },
 };
 
-export function Baseline() {
+export function Menu() {
   const [isOpen, setIsOpen] = useState(false);
   const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
   const containerRef = useRef<HTMLButtonElement | null>(null);
@@ -39,8 +47,8 @@ export function Baseline() {
 
   return (
     <VStack>
-      <Button onClick={open}>Open Menu From Top</Button>
-      <Menu
+      <Button onClick={open}>Open Menu</Button>
+      <MenuComponent
         veil
         minWidth="150px"
         anchorElement={anchorElement}
@@ -123,12 +131,12 @@ export function Baseline() {
             <MenuItem label="Third" />
           </MenuItem>
         </MenuItem>
-      </Menu>
+      </MenuComponent>
     </VStack>
   );
 }
 
-export function FromTop() {
+export function MenuFromTop() {
   const [isOpen, setIsOpen] = useState(false);
   const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
   const containerRef = useRef<HTMLButtonElement | null>(null);
@@ -152,8 +160,8 @@ export function FromTop() {
 
   return (
     <VStack>
-      <Button onClick={open}>Open Menu From Top</Button>
-      <Menu
+      <Button onClick={open}>Open Menu</Button>
+      <MenuComponent
         veil
         anchorElement={anchorElement}
         horizontalAnchor="end"
@@ -245,12 +253,12 @@ export function FromTop() {
             <MenuItem label="Third" />
           </MenuItem>
         </MenuItem>
-      </Menu>
+      </MenuComponent>
     </VStack>
   );
 }
 
-export function FromBottom() {
+export function MenuFromBottom() {
   const [isOpen, setIsOpen] = useState(false);
   const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
   const containerRef = useRef<HTMLButtonElement | null>(null);
@@ -275,8 +283,8 @@ export function FromBottom() {
   return (
     <VStack height="100%">
       <Spacer />
-      <Button onClick={open}>Open Menu From Bottom</Button>
-      <Menu
+      <Button onClick={open}>Open Menu</Button>
+      <MenuComponent
         veil
         anchorElement={anchorElement}
         horizontalAnchor="end"
@@ -339,7 +347,7 @@ export function FromBottom() {
             <MenuItem label="Third" />
           </MenuItem>
         </MenuItem>
-      </Menu>
+      </MenuComponent>
     </VStack>
   );
 }

package/src/overlay/menu/menu.tsx

@@ -7,7 +7,7 @@ import type { VStackProps } from '../../stacks/v_stack.js';
 import { Popper, type PopperProps } from '../../overlay/popper/popper.js';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import styles from './menu.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {
   children?: React.ReactNode;
@@ -105,7 +105,7 @@ export const Menu = React.forwardRef(function Menu(
       restoreFocus={restoreFocus}
       veil={veil}
     >
-      <VStack ref={ref} className={classNames(styles.menu, className, 'menu')} {...props}>
+      <VStack ref={ref} className={clsx(styles.menu, className, 'menu')} {...props}>
         {clonedChildren}
       </VStack>
     </Popper>
@@ -235,7 +235,7 @@ export const MenuItem = React.forwardRef(function MenuItem(
         ref={forkedRef}
         data-is-selected={Boolean(selected)}
         data-has-children={Boolean(hasSubmenu)}
-        className={classNames(className, styles['menu-item'], 'menu-item')}
+        className={clsx(className, styles['menu-item'], 'menu-item')}
         data-is-open={open}
         {...props}
       >

package/src/overlay/popper/popper.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react-vite';
 import { BodyText } from '../../typography/index.js';
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import { Popper, PopperProps } from './popper.js';
+import { Popper as PopperComponent, PopperProps } from './popper.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { StyleBox } from '../../stacks/story_components/style_box.js';
 import { VStack } from '../../stacks/v_stack.js';
@@ -11,52 +11,73 @@ type PopoverStoryProps = Omit<PopperProps, 'anchorElement' | 'open' | 'onClose'>
   clickAwayRefs?: React.RefObject<HTMLElement | null>[];
 };
 
-const meta: Meta<typeof Popper> = {
-  title: 'Popover',
-  component: Popper,
+const meta: Meta<typeof PopperComponent> = {
+  title: 'Overlays/Popper',
+  component: PopperComponent,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A popper component that displays a content in a portal.',
+      },
+    },
+  },
   argTypes: {
-    children: { table: { disable: true } },
-    open: { table: { disable: true } },
-    onClose: { table: { disable: true } },
+    children: {
+      table: { disable: true },
+      description: 'The content to display in the popper.',
+    },
+    open: { table: { disable: true }, description: 'Whether the popper is open.' },
+    onClose: {
+      table: { disable: true },
+      description: 'The function to call when the popper is closed.',
+    },
     verticalAnchor: {
       options: ['top', 'center', 'bottom'],
       control: { type: 'radio' },
+      description: 'The anchor to position the popper vertically.',
     },
     horizontalAnchor: {
       options: ['start', 'center', 'end'],
       control: { type: 'radio' },
+      description: 'The anchor to position the popper horizontally.',
     },
     verticalOrigin: {
       options: ['top', 'center', 'bottom'],
       control: { type: 'radio' },
+      description: 'The origin to position the popper vertically.',
     },
     horizontalOrigin: {
       options: ['start', 'center', 'end'],
       control: { type: 'radio' },
+      description: 'The origin to position the popper horizontally.',
     },
     verticalOffset: {
       control: { type: 'number' },
       defaultValue: 0,
+      description: 'The offset to position the popper vertically.',
     },
     horizontalOffset: {
       control: { type: 'number' },
       defaultValue: 0,
+      description: 'The offset to position the popper horizontally.',
     },
     restoreFocus: {
       control: { type: 'boolean' },
       defaultValue: false,
+      description: 'Whether to restore focus when the popper is closed.',
     },
     veil: {
       control: { type: 'boolean' },
       defaultValue: false,
+      description: 'Whether to display a veil when the popper is open.',
     },
   },
 };
 
 export default meta;
 
-export function Baseline(props: PopoverStoryProps) {
+export function Popper(props: PopoverStoryProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
 
@@ -73,7 +94,7 @@ export function Baseline(props: PopoverStoryProps) {
   return (
     <VStack height="100%" width="100%" minHeight="600px" hAlign="center" vAlign="center">
       <button onClick={open}>Open</button>
-      <Popper
+      <PopperComponent
         anchorElement={anchorElement}
         open={isOpen}
         onClose={close}
@@ -94,7 +115,7 @@ export function Baseline(props: PopoverStoryProps) {
         >
           <BodyText selectable>Hello World</BodyText>
         </StyleBox>
-      </Popper>
+      </PopperComponent>
     </VStack>
   );
 }
@@ -123,7 +144,7 @@ export function Focus(props: PopoverStoryProps) {
   return (
     <VStack height="100%" width="100%" minHeight="600px" hAlign="center" vAlign="center">
       <button onClick={open}>Open</button>
-      <Popper
+      <PopperComponent
         anchorElement={anchorElement}
         open={isOpen}
         onClose={close}
@@ -145,7 +166,7 @@ export function Focus(props: PopoverStoryProps) {
         >
           <button ref={containerRef}>Hello World</button>
         </StyleBox>
-      </Popper>
+      </PopperComponent>
     </VStack>
   );
 }
@@ -174,7 +195,7 @@ export function ScrollTest(props: PopoverStoryProps) {
     >
       <VStack height="4000px" hAlign="center" vAlign="center">
         <button onClick={open}>Open</button>
-        <Popper
+        <PopperComponent
           anchorElement={anchorElement}
           open={isOpen}
           onClose={close}
@@ -195,7 +216,7 @@ export function ScrollTest(props: PopoverStoryProps) {
           >
             <BodyText selectable>Hello World</BodyText>
           </StyleBox>
-        </Popper>
+        </PopperComponent>
       </VStack>
     </VStack>
   );
@@ -225,7 +246,7 @@ export function ScrollWithinPopover(props: PopoverStoryProps) {
     >
       <VStack height="4000px" hAlign="center" vAlign="center">
         <button onClick={open}>Open</button>
-        <Popper
+        <PopperComponent
           anchorElement={anchorElement}
           open={isOpen}
           onClose={close}
@@ -249,7 +270,7 @@ export function ScrollWithinPopover(props: PopoverStoryProps) {
           >
             <ZStack height="1000px">Hello</ZStack>
           </StyleBox>
-        </Popper>
+        </PopperComponent>
       </VStack>
     </VStack>
   );
@@ -304,7 +325,7 @@ export function ClickAwayRefs(props: PopoverStoryProps) {
           Also safe to click
         </div>
       </HStack>
-      <Popper
+      <PopperComponent
         anchorElement={anchorElement}
         open={isOpen}
         onClose={close}
@@ -328,7 +349,7 @@ export function ClickAwayRefs(props: PopoverStoryProps) {
             Click outside to close, but the gray boxes are safe to click!
           </BodyText>
         </StyleBox>
-      </Popper>
+      </PopperComponent>
     </VStack>
   );
 }
@@ -353,7 +374,7 @@ export function DisableClickAway(props: PopoverStoryProps) {
         <button onClick={open}>Open Popover</button>
         <button onClick={close}>Close Popover</button>
       </HStack>
-      <Popper
+      <PopperComponent
         anchorElement={anchorElement}
         open={isOpen}
         onClose={close}
@@ -378,7 +399,7 @@ export function DisableClickAway(props: PopoverStoryProps) {
             it.
           </BodyText>
         </StyleBox>
-      </Popper>
+      </PopperComponent>
     </VStack>
   );
 }
@@ -402,7 +423,7 @@ export function VeilClick(props: PopoverStoryProps) {
       <HStack gap="16px">
         <button onClick={open}>Open Popover</button>
       </HStack>
-      <Popper
+      <PopperComponent
         anchorElement={anchorElement}
         open={isOpen}
         onClose={close}
@@ -425,7 +446,7 @@ export function VeilClick(props: PopoverStoryProps) {
         >
           <BodyText selectable>This popover will close on clicking the veil.</BodyText>
         </StyleBox>
-      </Popper>
+      </PopperComponent>
     </VStack>
   );
 }

package/src/overlay/portal/portal.stories.tsx

@@ -5,7 +5,16 @@ import { StyleBox } from '../../stacks/story_components/style_box.js';
 import { ZStack } from '../../stacks/z_stack.js';
 
 export default {
-  title: 'Portal',
+  title: 'Overlays/Portal',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A baseline generic portal component that can be used to create a portal with click away listener functionality.',
+      },
+    },
+  },
 };
 
 export function ClickAwayListenerPortal() {

package/src/overlay/tooltip/tooltip.stories.tsx

@@ -1,15 +1,22 @@
 import { Tooltip } from './tooltip.js';
 
 export default {
-  title: 'Tooltip',
+  title: 'Overlays/Tooltip',
   component: Tooltip,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A tooltip component that displays a tooltip when hovered.',
+      },
+    },
+  },
 };
 
 export const TooltipStory = () => {
   return (
     <Tooltip>
-      <>tooltip</>
+      <>TODO: TOOLTIP</>
     </Tooltip>
   );
 };

package/src/overlay/tooltip/tooltip.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 './tooltip.module.css';
 
@@ -15,7 +15,7 @@ export const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(function VPan
     <VStack
       ref={ref}
       as="span"
-      className={classNames(className, styles.tooltip, 'tooltip')}
+      className={clsx(className, styles.tooltip, 'tooltip')}
       {...props}
     >
       {children}

package/src/stacks/box/bottom_resize_handle.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './bottom_resize_handle.module.css';
 import { createVerticalResizeHandler } from './resize_handlers.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { HandleProps } from './handle_props.js';
 
 export interface BottomResizeHandleProps {
@@ -32,7 +32,7 @@ export function BottomResizeHandle({
 
   return (
     <div
-      className={classNames(styles['bottom-resize-handle'], 'bottom-resize-handle')}
+      className={clsx(styles['bottom-resize-handle'], 'bottom-resize-handle')}
       onMouseDown={resizeHandler}
       style={bottomResizeHandleStyle}
     >

package/src/stacks/box/box.tsx

@@ -6,7 +6,7 @@ import { BottomResizeHandle } from './bottom_resize_handle.js';
 import { EndResizeHandle } from './end_resize_handle.js';
 import { StartResizeHandle } from './start_resize_handle.js';
 import { TopResizeHandle } from './top_resize_handle.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { isCustomSizeProp } from '../utils/isCustomSizeProp.js';
 import { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';
 import styles from '../stack.module.css';
@@ -157,7 +157,7 @@ export const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(
         ...removeUndefinedProperties(propStyles),
         ...style,
       }}
-      className={classNames(
+      className={clsx(
         styles['box'],
         className,
         isFlexing && 'stack-flex',

package/src/stacks/box/end_resize_handle.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './end_resize_handle.module.css';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { HandleProps } from './handle_props.js';
 
 export interface EndResizeHandleProps {
@@ -32,7 +32,7 @@ export function EndResizeHandle({
 
   return (
     <div
-      className={classNames(styles['end-resize-handle'], 'end-resize-handle')}
+      className={clsx(styles['end-resize-handle'], 'end-resize-handle')}
       onMouseDown={resizeHandler}
       style={endResizeHandleStyle}
     >

package/src/stacks/box/left_resize_handle.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { HandleProps } from './handle_props.js';
 import styles from './left_resize_handle.module.css';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface LeftResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
@@ -33,7 +33,7 @@ export function LeftResizeHandle({
 
   return (
     <div
-      className={classNames(styles['left-resize-handle'], 'left-resize-handle')}
+      className={clsx(styles['left-resize-handle'], 'left-resize-handle')}
       onMouseDown={resizeHandler}
       style={leftResizeHandleStyle}
     >

package/src/stacks/box/right_resize_handle.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './right_resize_handle.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface RightResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
@@ -33,7 +33,7 @@ export function RightResizeHandle({
 
   return (
     <div
-      className={classNames(styles['right-resize-handle'], 'right-resize-handle')}
+      className={clsx(styles['right-resize-handle'], 'right-resize-handle')}
       onMouseDown={resizeHandler}
       style={rightResizeHandleStyle}
     >

package/src/stacks/box/start_resize_handle.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { HandleProps } from './handle_props.js';
 import { createHorizontalResizeHandler } from './resize_handlers.js';
 import styles from './start_resize_handle.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface StartResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
@@ -32,7 +32,7 @@ export function StartResizeHandle({
 
   return (
     <div
-      className={classNames(styles['start-resize-handle'], 'start-resize-handle')}
+      className={clsx(styles['start-resize-handle'], 'start-resize-handle')}
       onMouseDown={resizeHandler}
       style={startResizeHandleStyle}
     >

package/src/stacks/box/top_resize_handle.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { HandleProps } from './handle_props.js';
 import { createVerticalResizeHandler } from './resize_handlers.js';
 import styles from './top_resize_handle.module.css';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 export interface TopResizeHandleProps {
   targetRef: React.MutableRefObject<HTMLElement | null>;
@@ -31,7 +31,7 @@ export function TopResizeHandle({
   };
   return (
     <div
-      className={classNames(styles['top-resize-handle'], 'top-resize-handle')}
+      className={clsx(styles['top-resize-handle'], 'top-resize-handle')}
       onMouseDown={resizeHandler}
       style={topResizeHandleStyle}
     >

package/src/stacks/collapsible_box.stories.tsx

@@ -10,7 +10,16 @@ import { ChevronLeftIcon as ChevronLeft } from '@tcn/icons/chevron_left_icon.js'
 import { PlusIcon as Plus } from '@tcn/icons/plus_icon.js';
 
 export default {
-  title: 'CollapsibleBox',
+  title: 'Stacks/Collapsible Box',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A basic box element that can be collapsed horizontally or vertically.',
+      },
+    },
+  },
 };
 
 function MyPanel() {

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}
     />
   );