@tcn/ui 0.17.0 → 0.18.1

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

@@ -1,6 +1,10 @@
 import { Divider } from '../../layouts/divider/divider.js';
+import { BodyText } from '../../typography/index.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { VStack } from '../../stacks/v_stack.js';
 import React, { useState } from 'react';
 import { FieldSet } from './field_set.js';
+import { Legend } from './legend.js';
 import {
   Input,
   MaskInput,
@@ -8,11 +12,13 @@ import {
   Multiselect,
   PhoneNumberInput,
   Select,
+  Switch,
   Textarea,
   UnitInput,
   Option,
 } from '../../inputs/index.js';
 import { HField } from '../field/h_field/h_field.js';
+import { Field } from '../field/field.js';
 
 export default {
   title: 'Form/Field Set',
@@ -34,7 +40,8 @@ export function Baseline() {
   );
 
   return (
-    <FieldSet maxWidth="600px" minWidth="300px" legend="Fieldset" gap="8px" padding="8px">
+    <FieldSet maxWidth="600px" minWidth="300px">
+      <Legend>Fieldset</Legend>
       <HField label="Input" id="field-1">
         <Input />
       </HField>
@@ -109,3 +116,96 @@ export function Baseline() {
     </FieldSet>
   );
 }
+
+export function Composition() {
+  return (
+    <FieldSet maxWidth="600px" minWidth="300px">
+      <Legend>Personal Information</Legend>
+      <HField label="Name" id="comp-field-1">
+        <Input />
+      </HField>
+      <HField label="Email" id="comp-field-2">
+        <Input />
+      </HField>
+    </FieldSet>
+  );
+}
+
+export function Disabled() {
+  return (
+    <FieldSet maxWidth="600px" minWidth="300px" disabled>
+      <Legend>Locked Section</Legend>
+      <HField label="Name" id="disabled-field-1">
+        <Input />
+      </HField>
+      <HField label="Email" id="disabled-field-2">
+        <Input placeholder="Field in disabled FieldSet..." />
+      </HField>
+    </FieldSet>
+  );
+}
+
+const HOLIDAYS = [
+  { name: "New Year's Day", date: 'January 1, 2026', day: 'Thursday' },
+  { name: 'Martin Luther King Jr. Day', date: 'January 19, 2026', day: 'Monday' },
+  { name: "Presidents' Day", date: 'February 16, 2026', day: 'Monday' },
+  { name: 'Memorial Day', date: 'May 25, 2026', day: 'Monday' },
+  { name: 'Independence Day', date: 'July 4, 2026', day: 'Saturday' },
+  { name: 'Labor Day', date: 'September 7, 2026', day: 'Monday' },
+  { name: 'Columbus Day', date: 'October 12, 2026', day: 'Monday' },
+  { name: 'Veterans Day', date: 'November 11, 2026', day: 'Wednesday' },
+  { name: 'Thanksgiving Day', date: 'November 26, 2026', day: 'Thursday' },
+  { name: 'Christmas Day', date: 'December 25, 2026', day: 'Friday' },
+];
+
+export function CustomLegend() {
+  const [year, setYear] = useState('2026');
+  const [markAll, setMarkAll] = useState(false);
+  const [enabled, setEnabled] = useState<Record<string, boolean>>({});
+
+  return (
+    <FieldSet maxWidth="400px" minWidth="300px">
+      <Legend>
+        {/* TODO: https://git.tcncloud.net/blackcat-ui/blackcat/-/issues/321 — Replace VStack + hardcoded gap with a semantic container
+            (e.g. Rows) that has thematic context for direction shifts in smaller layouts */}
+        <VStack gap="8px" hAlign="start">
+          <HStack width="100%" hAlign="start">
+            <BodyText size="lg">Suggested Federal Holidays</BodyText>
+          </HStack>
+          <BodyText emphasis="faint">
+            Based on your selected timezone, the following U.S. federal holidays occur in{' '}
+            {year}. Enable the toggle to mark a holiday as a non-working day.
+          </BodyText>
+          <Field label="Year" id="holiday-year">
+            <Select value={year} onChange={setYear}>
+              <Option value="2025" label="2025">
+                2025
+              </Option>
+              <Option value="2026" label="2026">
+                2026
+              </Option>
+              <Option value="2027" label="2027">
+                2027
+              </Option>
+            </Select>
+          </Field>
+          <HField label="Mark all holidays as non-working days" id="holiday-mark-all">
+            <Switch checked={markAll} onChange={setMarkAll} />
+          </HField>
+        </VStack>
+      </Legend>
+      {HOLIDAYS.map(holiday => (
+        <HField
+          key={holiday.name}
+          label={`${holiday.name} - ${holiday.date} (${holiday.day})`}
+          id={`holiday-${holiday.name.toLowerCase().replace(/\s+/g, '-')}`}
+        >
+          <Switch
+            checked={markAll || !!enabled[holiday.name]}
+            onChange={value => setEnabled(prev => ({ ...prev, [holiday.name]: value }))}
+          />
+        </HField>
+      ))}
+    </FieldSet>
+  );
+}

package/src/form/field_set/field_set.tsx

@@ -1,67 +1,53 @@
-import { BodyText } from '../../typography/index.js';
-import { HStack } from '../../stacks/h_stack.js';
-import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import type { VStackProps } from '../../stacks/v_stack.js';
 import { clsx } from 'clsx';
-import React, { useMemo } from 'react';
+import React, { type FieldsetHTMLAttributes } from 'react';
+import { LabelledByContext } from '../../utils/hooks/labelled_by_context.js';
+import { useLabelledById } from '../../utils/hooks/labelled_by_context.js';
 import styles from './field_set.module.css';
 
-let fieldsetIdCount = 0;
-
-export type FieldSetProps = VStackProps<HTMLFieldSetElement> & {
-  legend?: string;
-  startAdornments?: React.ReactNode;
-  endAdornments?: React.ReactNode;
+export type FieldSetOwnProps = {
+  disabled?: boolean;
+  name?: string;
 };
 
-export const FieldSet = React.forwardRef(function FieldSet(
-  {
-    legend,
-    startAdornments,
-    endAdornments,
-    className,
-    children,
-    ...props
-  }: FieldSetProps,
-  ref: React.Ref<HTMLFieldSetElement>
-) {
-  const id = useMemo(() => {
-    return fieldsetIdCount++;
-  }, []);
+export type FieldSetProps = VStackProps<HTMLFieldSetElement> &
+  FieldSetOwnProps &
+  FieldsetHTMLAttributes<HTMLFieldSetElement>;
 
-  const labelId = `field-set-${id}`;
+export const FieldSet = React.forwardRef<HTMLFieldSetElement, FieldSetProps>(
+  function FieldSet(
+    {
+      className,
+      id,
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...props
+    }: FieldSetProps,
+    ref
+  ) {
+    const { labelId } = useLabelledById(id, ariaLabelledBy);
 
-  return (
-    <VStack
-      as="fieldset"
-      aria-labelledby={labelId}
-      ref={ref}
-      className={clsx(styles['field-set'], className, 'tcn-field-set')}
-      {...props}
-    >
-      {legend && (
-        <HStack
-          id={labelId}
-          className={clsx('tcn-legend', 'tcn-field-set-legend')}
-          hAlign="start"
-          height={props.height}
+    return (
+      <LabelledByContext.Provider value={{ labelId }}>
+        <VStack
+          as="fieldset"
+          aria-labelledby={labelId}
+          ref={ref}
+          id={id}
+          data-is-disabled={props.disabled ? 'true' : 'false'}
+          className={clsx(styles['field-set'], className, 'tcn-field-set')}
+          {...props}
         >
-          {startAdornments}
-          {startAdornments && <Spacer width="8px" />}
-          <BodyText className="tcn-field-set-legend-text" size="lg">
-            {legend}
-          </BodyText>
-          {endAdornments && <Spacer />}
-          {endAdornments}
-        </HStack>
-      )}
-      <VStack
-        className={clsx('tcn-field-set-body', styles['tcn-field-set-body'])}
-        {...props}
-      >
-        {children}
-      </VStack>
-    </VStack>
-  );
-});
+          {/* TODO: may want to ensure Legend is rendered before rest of children.
+        Search over children if a match is found for legend would pop it off the children array
+        and manually render it in the correct slot. 
+        Before doing this however, may want to build Slot and Slottable util to generalize the problem/solution for re-useability. 
+        */}
+          {children}
+          <fieldset disabled></fieldset>
+        </VStack>
+      </LabelledByContext.Provider>
+    );
+  }
+);

package/src/form/field_set/legend.tsx

@@ -0,0 +1,44 @@
+import { clsx } from 'clsx';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import { BodyText } from '../../typography/index.js';
+import { useLabelledBy } from '../../utils/hooks/labelled_by_context.js';
+import styles from './field_set.module.css';
+
+export interface LegendOwnProps extends HStackProps {
+  id?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Composable legend for FieldSet. Renders as a div (HStack) with
+ * aria-labelledby wiring handled automatically via context.
+ *
+ * String children are automatically wrapped in BodyText with the
+ * `tcn-field-set-legend-text` class for consistent theme styling.
+ * Non-string children (e.g. icons, custom typography) render as-is.
+ *
+ * If a custom `id` is provided, it takes precedence over the context value.
+ * When overriding `id`, also provide a matching `aria-labelledby` to the
+ * parent FieldSet so the association remains correct.
+ */
+export const Legend = ({ id, children, className, ...props }: LegendOwnProps) => {
+  const ctx = useLabelledBy();
+  const resolvedId = id ?? ctx?.labelId;
+
+  return (
+    <HStack
+      id={resolvedId}
+      className={clsx(className, styles.legend, 'tcn-legend', 'tcn-field-set-legend')}
+      {...props}
+    >
+      {typeof children === 'string' ? (
+        <BodyText className="tcn-field-set-legend-text" size="lg">
+          {children}
+        </BodyText>
+      ) : (
+        children
+      )}
+    </HStack>
+  );
+};

package/src/form/index.ts

@@ -46,5 +46,10 @@ export {
   type OptionsFieldState,
   type OptionsFieldOptions,
 } from './field_presenters/options_field_presenter.js';
-export { FieldSet, type FieldSetProps } from './field_set/field_set.js';
+export {
+  FieldSet,
+  type FieldSetProps,
+  type FieldSetOwnProps,
+} from './field_set/field_set.js';
+export { Legend, type LegendOwnProps } from './field_set/legend.js';
 export { FormField } from './form_field.js';

package/src/inputs/date_picker/date_picker_header.tsx

@@ -2,7 +2,7 @@ import { useSignalValue, useSignalValueEffect } from '@tcn/state';
 import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import React, { useMemo, useRef } from 'react';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { getMonthsOfYear } from '../../utils/calendar/get_months_of_year.js';
 import { DatePickerPresenter } from './date_picker_presenter.js';
 import { Select } from '../select/select.js';
@@ -65,13 +65,14 @@ export function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderPro
       minWidth="35px"
       width="100%"
     >
-      <SlimButton
+      <Button
+        utility
         disabled={!state.canNavigateToPreviousMonth}
         hierarchy="tertiary"
         onClick={previous}
       >
         <ChevronLeftIcon flipOnRtl size="md" />
-      </SlimButton>
+      </Button>
       <Spacer />
       <HStack hAlign="center" gap="4px" width="auto">
         <Select
@@ -86,13 +87,14 @@ export function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderPro
         <DatePickerYearInput presenter={presenter} />
       </HStack>
       <Spacer />
-      <SlimButton
+      <Button
+        utility
         disabled={!state.canNavigateToNextMonth}
         hierarchy="tertiary"
         onClick={next}
       >
         <ChevronRightIcon flipOnRtl size="md" />
-      </SlimButton>
+      </Button>
     </HStack>
   );
 }

package/src/inputs/date_picker/date_picker_year_selector.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';
 import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
@@ -102,9 +102,9 @@ export function DatePickerYearSelector({
       gap="4px"
     >
       <HStack gap="4px">
-        <SlimButton onClick={prev} hierarchy="tertiary">
+        <Button utility onClick={prev} hierarchy="tertiary">
           <ChevronLeftIcon flipOnRtl size="md" />
-        </SlimButton>
+        </Button>
         <Spacer />
         <Headline
           selectable={false}
@@ -112,9 +112,9 @@ export function DatePickerYearSelector({
           hierarchy="tertiary"
         >{`${firstYear}-${lastYear}`}</Headline>
         <Spacer />
-        <SlimButton hierarchy="tertiary" onClick={next}>
+        <Button utility hierarchy="tertiary" onClick={next}>
           <ChevronRightIcon size="md" />
-        </SlimButton>
+        </Button>
       </HStack>
       <HStack gap="4px">{firstRow}</HStack>
       <HStack gap="4px">{secondRow}</HStack>

package/src/inputs/multiselect/multiselect_inline_values.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './multiselect_values.module.css';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { OptionProps } from '../options/option.js';
 import { Chip } from '../../tokens/index.js';
 import clsx from 'clsx';
@@ -27,7 +27,8 @@ export function MultiselectInlineValues({
         width="auto"
       >
         <span>{v.props.label}</span>
-        <SlimButton
+        <Button
+          utility
           disabled={disabled}
           size="sm"
           hierarchy="tertiary"
@@ -37,7 +38,7 @@ export function MultiselectInlineValues({
           }}
         >
           <CrossIcon size="xs" />
-        </SlimButton>
+        </Button>
       </Chip>
     );
   });

package/src/inputs/multiselect/multiselect_values.module.css

@@ -12,6 +12,7 @@
   }
 
   :where(.item-container) {
+    box-sizing: border-box;
     background-color: #fff;
     border-radius: 4px;
     padding: 4px;

package/src/inputs/multiselect/multiselect_values.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import styles from './multiselect_values.module.css';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { OptionProps } from '../options/option.js';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { Chip } from '../../tokens/index.js';
 
 export interface MultiselectValueProps {
@@ -23,13 +23,13 @@ export function MultiselectValues({
     return (
       <Chip
         hAlign="start"
-        color="rgb(57, 85, 120)"
         className={clsx(styles.chip, 'tcn-multiselect-chip')}
         key={index}
         paddingInlineStart="8px"
       >
         <span>{v.props.label}</span>
-        <SlimButton
+        <Button
+          utility
           disabled={disabled}
           size="sm"
           hierarchy="tertiary"
@@ -39,7 +39,7 @@ export function MultiselectValues({
           }}
         >
           <CrossIcon size="xs" />
-        </SlimButton>
+        </Button>
       </Chip>
     );
   });

package/src/overlay/frame/frame.stories.tsx

@@ -2,7 +2,7 @@ import { Header, Scaffold } from '../../layouts/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { BodyText } from '../../typography/index.js';
 import { Title } from '../../typography/title/title.js';
-import { DragHandle } from '../../utils/dnd/handle.js';
+import { DragHandle } from '../../utils/decorators/draggable/drag_handle.js';
 import { Frame, type FrameOwnProps } from './frame.js';
 import styles from './frame_stories.module.css';
 export default {
@@ -24,6 +24,7 @@ export const FrameStory = (args: Omit<FrameOwnProps, 'children'>) => {
       <Frame
         width="300px"
         height="300px"
+        minWidth="100px"
         className={styles['sb-frame-container']}
         {...args}
       >

package/src/overlay/frame/frame.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { flushSync } from 'react-dom';
 import {
   Box,
@@ -8,12 +8,14 @@ import {
   type OnHeightResizePayload,
   type OnWidthResizePayload,
 } from '../../stacks/index.js';
-import { useDragContainer } from '../../utils/dnd/context.js';
-import { Draggable } from '../../utils/dnd/draggable/draggable.js';
+import { useDragContainer } from '../../utils/decorators/draggable/context.js';
+import { Draggable } from '../../utils/decorators/draggable/draggable.js';
+import { Resizable } from '../../utils/decorators/resizable/resizable.js';
+import { ResizeHandle } from '../../utils/decorators/resizable/resize_handle.js';
 import { Portal } from '../portal/portal.js';
 
 // Styles
-import styles from './frame.module.css';
+
 export interface FrameOwnProps {
   isOpen?: boolean;
   draggable?: boolean;
@@ -37,6 +39,8 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
     enableResizeOnEnd = true,
     enableResizeOnLeft = false,
     enableResizeOnRight = false,
+    minWidth = 1,
+    minHeight = 1,
     ...rest
   }: FrameProps,
   ref
@@ -56,6 +60,8 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
             enableResizeOnRight={resizable && enableResizeOnRight}
             enableResizeOnLeft={resizable && enableResizeOnLeft}
             draggable={draggable}
+            minWidth={minWidth}
+            minHeight={minHeight}
             {...rest}
           >
             {children}
@@ -77,18 +83,36 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
       draggable,
       onWidthResize,
       onHeightResize,
+      onWidthResizeEnd,
+      onHeightResizeEnd,
+      enableResizeOnTop,
+      enableResizeOnBottom,
+      enableResizeOnStart,
+      enableResizeOnEnd,
+      enableResizeOnLeft,
+      enableResizeOnRight,
       ...rest
     }: FrameDialogProps,
     ref: React.Ref<HTMLElement>
   ) {
     const drag = useDragContainer();
+    const prevWidthRef = useRef<number | null>(null);
+    const prevHeightRef = useRef<number | null>(null);
 
     const handleWidthResize = React.useCallback(
       (payload: OnWidthResizePayload) => {
-        if (!draggable) return;
-        if (payload.currentDelta === 0) return;
-        const sign = payload.origin === 'right' ? 1 : -1;
-        const dx = (payload.currentDelta / 2) * sign;
+        const actualDelta =
+          prevWidthRef.current !== null
+            ? payload.width - prevWidthRef.current
+            : payload.currentDelta;
+        prevWidthRef.current = payload.width;
+
+        if (!draggable || actualDelta === 0) {
+          onWidthResize?.(payload);
+          return;
+        }
+        const sign = payload.origin === 'end' ? 1 : -1;
+        const dx = (actualDelta / 2) * sign;
         flushSync(() => {
           drag.setPosition(prev => ({
             x: prev.x + dx,
@@ -103,11 +127,18 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
 
     const handleHeightResize = useCallback(
       (payload: OnHeightResizePayload) => {
-        if (!draggable) return;
-        if (payload.currentDelta === 0) return;
+        const actualDelta =
+          prevHeightRef.current !== null
+            ? payload.height - prevHeightRef.current
+            : payload.currentDelta;
+        prevHeightRef.current = payload.height;
+
+        if (!draggable || actualDelta === 0) {
+          onHeightResize?.(payload);
+          return;
+        }
         const sign = payload.origin === 'bottom' ? 1 : -1;
-        const half = payload.currentDelta / 2;
-        const dy = half * sign;
+        const dy = (actualDelta / 2) * sign;
         flushSync(() => {
           drag.setPosition(prev => ({
             x: prev.x,
@@ -120,17 +151,34 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
     );
 
     return (
-      <Box
-        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}
-        ref={ref}
+      <Resizable
         onWidthResize={handleWidthResize}
         onHeightResize={handleHeightResize}
-        as={as}
-        role={role}
-        {...rest}
+        onWidthResizeEnd={(width, origin) => {
+          prevWidthRef.current = null;
+          onWidthResizeEnd?.(width, origin);
+        }}
+        onHeightResizeEnd={(height, origin) => {
+          prevHeightRef.current = null;
+          onHeightResizeEnd?.(height, origin);
+        }}
       >
-        {children}
-      </Box>
+        <Box
+          className={clsx('tcn-frame', 'tcn-frame-dialog', className)}
+          ref={ref}
+          as={as}
+          role={role}
+          {...rest}
+        >
+          {children}
+        </Box>
+        {enableResizeOnTop && <ResizeHandle position="top" />}
+        {enableResizeOnBottom && <ResizeHandle position="bottom" />}
+        {enableResizeOnStart && <ResizeHandle position="start" />}
+        {enableResizeOnEnd && <ResizeHandle position="end" />}
+        {enableResizeOnLeft && <ResizeHandle position="start" />}
+        {enableResizeOnRight && <ResizeHandle position="end" />}
+      </Resizable>
     );
   }
 );

package/src/overlay/popper/base/dismissal_decorator.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, type PropsWithChildren } from 'react';
-import { ClickAwayListener } from '../../../utils/click_away_listener.js';
-import { ScrollAwayListener } from '../../../utils/scroll_away_listener.js';
-import { MouseLeaveRegion } from '../../../utils/mouse_leave_region.js';
+import { ClickAwayListener } from '../../../utils/listeners/click_away_listener.js';
+import { ScrollAwayListener } from '../../../utils/listeners/scroll_away_listener.js';
+import { MouseLeaveRegion } from '../../../utils/listeners/mouse_leave_region.js';
 
 export enum PopperDismissal {
   CLICK_AWAY = 'clickAway',

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

@@ -97,8 +97,15 @@ export function Popper(props: PopoverStoryProps) {
   }
 
   return (
-    <VStack height="100%" width="100%" minHeight="600px" hAlign="center" vAlign="center">
-      <button onClick={open}>Open</button>
+    <VStack
+      height="100%"
+      width="100%"
+      minHeight="600px"
+      hAlign="center"
+      vAlign="center"
+      style={{ display: 'flex', alignItems: 'flex-end' }}
+    >
+      <button onClick={open}>Open me</button>
       <PopperComponent
         anchorElement={anchorElement}
         open={isOpen}

package/src/overlay/slide/slide.stories.tsx

@@ -3,7 +3,7 @@ import { ZStack } from '../../stacks/z_stack.js';
 import { BodyText } from '../../typography/index.js';
 import { Title } from '../../typography/title/title.js';
 import { Slide, type SlideProps } from './slide.js';
-import { DragHandle } from '../../utils/dnd/handle.js';
+import { DragHandle } from '../../utils/decorators/draggable/drag_handle.js';
 
 export default {
   title: 'Overlays/Floating/Slide',