@tcn/ui 0.12.4 → 0.12.6

package/src/inputs/control/control.stories.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { Control, ControlRow } from './control.js';
+import { Input } from '../input/input.js';
+import { Button } from '../../actions/button/button/button.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { Textarea } from '../textarea/textarea.js';
+import { BugIcon } from '@tcn/icons/bug_icon.js';
+import { BodyText } from '../../typography/index.js';
+import { Spacer } from '../../stacks/spacer.js';
+import { CopyIcon } from '@tcn/icons/copy_icon.js';
+import { SendOneIcon } from '@tcn/icons/send_one_icon.js';
+import { FilterOneIcon } from '@tcn/icons/filter_one_icon.js';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import styles from './control_stories.module.css';
+import { RefreshCcwAlertIcon } from '@tcn/icons/refresh_ccw_alert_icon.js';
+import { PlayIcon } from '@tcn/icons/play_icon.js';
+import { DatePickerInput } from '../date_picker/date_picker_input.js';
+import { Divider } from '../../layouts/index.js';
+import { CalendarDatesIcon } from '@tcn/icons/calendar_dates_icon.js';
+
+export default {
+  title: 'Inputs/Control',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Control and ControlRow layout components for grouping inputs with optional leading/trailing slots (icons, actions).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+function BaseInput(props: React.ComponentProps<typeof Input>) {
+  const [value, setValue] = React.useState(props.value ?? '');
+  return <Input {...props} value={value} onChange={setValue} />;
+}
+
+export function Baseline() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <BaseInput placeholder="Enter text..." />
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function Icons() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <BugIcon />
+        <BaseInput placeholder="Search..." />
+        <FilterOneIcon />
+        <SearchIcon />
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function Actions() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <PlusIcon />
+        </Button>
+        <BaseInput placeholder="Type to clear..." value="Hello" />
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <CrossIcon />
+        </Button>
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function DatePickerControl() {
+  const [value, setValue] = React.useState<Date | null>(null);
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <DatePickerInput value={value} onChange={setValue} width="fill" />
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <CrossIcon />
+        </Button>
+        <Divider vertical length="sm" />
+        <CalendarDatesIcon />
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function StartRow() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow>
+        <BugIcon />
+        <BodyText>script.js</BodyText>
+        <Spacer />
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <CopyIcon />
+        </Button>
+      </ControlRow>
+      <ControlRow growWeight={1}>
+        <Textarea placeholder="console.log('Hello, world!');" />
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function EndRow() {
+  return (
+    <Control maxWidth={400}>
+      <ControlRow growWeight={1}>
+        <Textarea rows={6} placeholder="What's on your mind?" />
+      </ControlRow>
+      <Spacer />
+      <ControlRow growWeight={1}>
+        <BodyText>{`<n> characters remaining`}</BodyText>
+        <Spacer />
+        <Button onClick={() => {}} hierarchy="tertiary">
+          Post <SendOneIcon />
+        </Button>
+      </ControlRow>
+    </Control>
+  );
+}
+
+export function CustomStyles() {
+  return (
+    <Control className={styles.customStyles} maxWidth={400}>
+      <ControlRow growWeight={1}>
+        <BugIcon />
+        <BodyText>script.js</BodyText>
+        <Spacer />
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <RefreshCcwAlertIcon />
+        </Button>
+        <Button utility onClick={() => {}} hierarchy="tertiary">
+          <CopyIcon />
+        </Button>
+      </ControlRow>
+      <ControlRow growWeight={1}>
+        <Textarea rows={6} placeholder="Enter your code..." />
+      </ControlRow>
+      <Spacer />
+      <ControlRow growWeight={1}>
+        <BodyText>{`Line <i> Column <j>`}</BodyText>
+        <Spacer />
+        <Button onClick={() => {}} hierarchy="tertiary">
+          Run <PlayIcon />
+        </Button>
+      </ControlRow>
+    </Control>
+  );
+}

package/src/inputs/control/control.tsx

@@ -0,0 +1,32 @@
+import { clsx } from 'clsx';
+import React from 'react';
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+
+export interface ControlProps extends VStackProps {}
+
+export const Control = React.forwardRef<HTMLDivElement, ControlProps>(function Control(
+  { as = 'div', className, children, ...props }: ControlProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  return (
+    <VStack ref={ref} as={as} className={clsx(className, 'tcn-control')} {...props}>
+      {children}
+    </VStack>
+  );
+});
+
+export interface ControlRowProps extends HStackProps {}
+
+export const ControlRow = React.forwardRef<HTMLDivElement, ControlRowProps>(
+  function ControlRow(
+    { as = 'div', className, children, ...props }: ControlRowProps,
+    ref: React.Ref<HTMLDivElement>
+  ) {
+    return (
+      <HStack ref={ref} as={as} className={clsx(className, 'tcn-control-row')} {...props}>
+        {children}
+      </HStack>
+    );
+  }
+);

package/src/inputs/control/control_stories.module.css

@@ -0,0 +1,7 @@
+.custom-styles > *:not(:last-child) {
+  border-bottom: 1px solid var(--ergo-grey);
+}
+
+.custom-styles > :global(.tcn-control-row) {
+  min-height: 40px;
+}

package/src/inputs/control_set/control_set.stories.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { ControlSet } from './control_set.js';
+import { Input } from '../input/input.js';
+import { Select } from '../select/select.js';
+import { Option } from '../options/option.js';
+
+export default {
+  title: 'Inputs/Control Set',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Control Sets are used to group controls and/or inputs that manage multiple values that are closely related and must be entered together. Usually a tuple like (value, unit) or (start, end). For example a value + unit input/selection.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export function Baseline() {
+  const [value, setValue] = useState('42');
+  const [unit, setUnit] = useState('kg');
+
+  return (
+    <ControlSet maxWidth="200px">
+      <Input type="number" value={value} onChange={setValue} placeholder="Value" />
+      <Select
+        width="auto"
+        minWidth="24px"
+        value={unit}
+        onChange={setUnit}
+        placeholder="Unit"
+      >
+        <Option value="kg" label="kg">
+          kg
+        </Option>
+        <Option value="lb" label="lb">
+          lb
+        </Option>
+        <Option value="g" label="g">
+          g
+        </Option>
+      </Select>
+    </ControlSet>
+  );
+}

package/src/inputs/{input_group/input_group.tsx → control_set/control_set.tsx}

@@ -2,23 +2,23 @@ import React from 'react';
 import { clsx } from 'clsx';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 
-export type InputGroupProps = HStackProps;
+export type ControlSetProps = HStackProps;
 
-export const InputGroup = React.forwardRef<HTMLElement, InputGroupProps>(
+export const ControlSet = React.forwardRef<HTMLElement, ControlSetProps>(
   function InputGroup(
-    { children, as = 'div', className, ...props }: InputGroupProps,
+    { children, as = 'div', className, ...props }: ControlSetProps,
     ref
   ) {
     const clonedChildren = React.Children.map(children, child =>
       React.isValidElement(child)
         ? React.cloneElement(child, {
             ...child.props,
-            className: clsx(child.props.className, 'tcn-input-group-slot'),
+            className: clsx(child.props.className, 'tcn-control-set-item'),
           })
         : child
     );
     return (
-      <HStack ref={ref} as={as} className={clsx(className, 'tcn-input-group')} {...props}>
+      <HStack ref={ref} as={as} className={clsx(className, 'tcn-control-set')} {...props}>
         {clonedChildren}
       </HStack>
     );

package/src/inputs/date_picker/date_picker_input.stories.tsx

@@ -61,7 +61,7 @@ function DatePickerActions({ presenter }: { presenter: DatePickerPresenter }) {
   );
 }
 
-export function DatePickerInput() {
+export function Baseline() {
   const [value, setValue] = useState<Date | null>(null);
 
   return <DatePickerInputComponent value={value} onChange={setValue} width="300px" />;

package/src/inputs/date_picker/date_picker_input.tsx

@@ -125,7 +125,7 @@ export const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInp
       <>
         <Button
           ref={ref}
-          className={clsx(styles.button, 'tcn-select')}
+          className={clsx(styles.button, 'tcn-entry', 'tcn-date-picker-input')}
           hAlign="start"
           disabled={disabled}
           hierarchy={hierarchy}

package/src/inputs/index.ts

@@ -55,7 +55,8 @@ export * from './textarea/textarea.js';
 
 export * from './unit_input/unit_input.js';
 
-export * from './input_group/input_group.js';
+export * from './control_set/control_set.js';
+export * from './control/control.js';
 
 export {
   SelectGroup,

package/src/inputs/input/input.tsx

@@ -22,7 +22,7 @@ export const Input = React.forwardRef(function Input(
 ) {
   return (
     <input
-      className={clsx(styles.input, className, 'tcn-input', 'tcn-control')}
+      className={clsx(styles.input, className, 'tcn-input', 'tcn-entry')}
       type={type}
       ref={ref}
       data-is-disabled={props.disabled || false}

package/src/inputs/phone_number_input/phone_number_country_select_adapter.tsx

@@ -117,7 +117,7 @@ export function PhoneNumberCountrySelectAdapter({
       onChange={handleChange}
       disabled={disabled}
       aria-label={ariaLabel ?? 'Country'}
-      className={clsx(className, 'tcn-input-group-slot')}
+      className={clsx(className, 'tcn-control-set-item')}
       width="auto"
     >
       {items}

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -150,7 +150,7 @@ export function PhoneNumberInput({
           className={clsx(
             styles['phone-number-input'],
             'tcn-phone-number-input',
-            'tcn-input-group'
+            'tcn-control-set'
           )}
           displayInitialValueAsLocalNumber
           addInternationalOption={false}

package/src/inputs/phone_number_input/phone_number_input_adapter.tsx

@@ -95,13 +95,13 @@ export const PhoneNumberInputAdapter = forwardRef<
         ref={forkedRef}
         value={value}
         {...(rest as any)}
-        className={clsx(className, 'tcn-input-group-slot')}
+        className={clsx(className, 'tcn-control-set-item')}
         onChange={handleChange}
       />
       {showPhoneBook && (
         <Button
           disabled={disabled}
-          className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}
+          className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}
           aria-label={ariaPhoneBookButtonLabel}
           onClick={togglePhoneBook}
           size="md"

package/src/inputs/phone_number_input/sip_input.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect } from 'react';
 import { NotebookIcon } from '@tcn/icons/notebook_icon.js';
 import { Input } from '../input/input.js';
 import { Button } from '../../actions/index.js';
-import { InputGroup } from '../input_group/input_group.js';
+import { ControlSet } from '../control_set/control_set.js';
 import clsx from 'clsx';
 import { usePhoneContext } from './phone_number_context.js';
 import type { CountryCode } from 'libphonenumber-js';
@@ -104,7 +104,7 @@ export function SipInput({
 
   return (
     <>
-      <InputGroup>
+      <ControlSet>
         <PhoneNumberCountrySelectAdapter
           value="SIP"
           onChange={selectCountry}
@@ -124,7 +124,7 @@ export function SipInput({
         {showPhoneBook && (
           <Button
             disabled={disabled}
-            className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}
+            className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}
             aria-label={ariaPhoneBookButtonLabel}
             onClick={togglePhoneBook}
             size="md"
@@ -132,7 +132,7 @@ export function SipInput({
             <NotebookIcon size="md" />
           </Button>
         )}
-      </InputGroup>
+      </ControlSet>
       <SuggestionList
         open={isPhoneBookOpen}
         anchorElement={phoneBookElement}

package/src/inputs/select/select.tsx

@@ -130,7 +130,7 @@ export const Select = React.forwardRef(function Select(
     <>
       <Button
         ref={forkedRef}
-        className={clsx(className, 'tcn-select', 'tcn-control', styles.select)}
+        className={clsx(className, 'tcn-select', 'tcn-entry', styles.select)}
         width="100%"
         {...props}
         hAlign="start"

package/src/inputs/textarea/textarea.stories.tsx

@@ -20,7 +20,7 @@ export default {
   tags: ['autodocs'],
 };
 
-export function Textarea() {
+export function Baseline(props: TextareaProps) {
   return (
     <table className={styles.story}>
       <colgroup>

package/src/inputs/textarea/textarea.tsx

@@ -20,7 +20,7 @@ export const Textarea = React.forwardRef(function Textarea(
   return (
     <textarea
       style={{ width, height, ...style }}
-      className={clsx(className, styles.textarea, 'tcn-textarea', 'tcn-control')}
+      className={clsx(className, styles.textarea, 'tcn-textarea', 'tcn-entry')}
       data-is-disabled={props.disabled || false}
       ref={ref}
       onChange={e => {

package/src/inputs/unit_input/unit_input.tsx

@@ -7,7 +7,7 @@ import { Select } from '../select/select.js';
 import { OptionProps } from '../options/option.js';
 import styles from './unit_input.module.css';
 
-import { InputGroup } from '../input_group/input_group.js';
+import { ControlSet } from '../control_set/control_set.js';
 
 function getDisplayValue(value: string) {
   return value
@@ -80,7 +80,7 @@ export const UnitInput = React.forwardRef(function UnitInput(
   }
 
   return (
-    <InputGroup
+    <ControlSet
       ref={ref}
       className={clsx(styles['unit-input'], 'tcn-unit-input')}
       height="auto"
@@ -110,6 +110,6 @@ export const UnitInput = React.forwardRef(function UnitInput(
       >
         {children}
       </Select>
-    </InputGroup>
+    </ControlSet>
   );
 });

package/src/overlay/frame/frame.tsx

@@ -1,7 +1,13 @@
 import { clsx } from 'clsx';
 import React, { useCallback } from 'react';
 import { flushSync } from 'react-dom';
-import { Box, ZStack, type BoxProps } from '../../stacks/index.js';
+import {
+  Box,
+  ZStack,
+  type BoxProps,
+  type OnHeightResizePayload,
+  type OnWidthResizePayload,
+} from '../../stacks/index.js';
 import { useDragContainer } from '../../utils/dnd/context.js';
 import { Draggable } from '../../utils/dnd/draggable/draggable.js';
 import { Portal } from '../portal/portal.js';
@@ -15,14 +21,7 @@ export interface FrameOwnProps {
   resizable?: boolean;
 }
 
-export type FrameProps = Omit<
-  BoxProps,
-  | 'enableResizeOnLeft'
-  | 'enableResizeOnRight'
-  | 'enableResizeOnTop'
-  | 'enableResizeOnBottom'
-> &
-  FrameOwnProps;
+export type FrameProps = BoxProps & FrameOwnProps;
 
 export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
   {
@@ -32,6 +31,12 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
     veil = false,
     resizable = true,
     className,
+    enableResizeOnTop = true,
+    enableResizeOnBottom = true,
+    enableResizeOnStart = true,
+    enableResizeOnEnd = true,
+    enableResizeOnLeft = false,
+    enableResizeOnRight = false,
     ...rest
   }: FrameProps,
   ref
@@ -44,10 +49,12 @@ export const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(
           <FrameDialog
             className={className}
             ref={ref}
-            enableResizeOnLeft={resizable}
-            enableResizeOnRight={resizable}
-            enableResizeOnTop={resizable}
-            enableResizeOnBottom={resizable}
+            enableResizeOnStart={resizable && enableResizeOnStart}
+            enableResizeOnEnd={resizable && enableResizeOnEnd}
+            enableResizeOnTop={resizable && enableResizeOnTop}
+            enableResizeOnBottom={resizable && enableResizeOnBottom}
+            enableResizeOnRight={resizable && enableResizeOnRight}
+            enableResizeOnLeft={resizable && enableResizeOnLeft}
             draggable={draggable}
             {...rest}
           >
@@ -77,64 +84,37 @@ export const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(
     const drag = useDragContainer();
 
     const handleWidthResize = React.useCallback(
-      (
-        width: number,
-        origin: 'left' | 'right',
-        totalDelta: number,
-        currentDelta: number,
-        atLimit: boolean
-      ) => {
+      (payload: OnWidthResizePayload) => {
         if (!draggable) return;
-        if (atLimit) return;
-        if (origin === 'right') {
-          flushSync(() => {
-            drag.setPosition(prev => ({
-              x: prev.x + currentDelta / 2,
-              y: prev.y,
-            }));
-          });
-        }
-        if (origin === 'left') {
-          flushSync(() => {
-            drag.setPosition(prev => ({
-              x: prev.x - currentDelta / 2,
-              y: prev.y,
-            }));
-          });
-        }
+        if (payload.currentDelta === 0) return;
+        const sign = payload.origin === 'right' ? 1 : -1;
+        const dx = (payload.currentDelta / 2) * sign;
+        flushSync(() => {
+          drag.setPosition(prev => ({
+            x: prev.x + dx,
+            y: prev.y,
+          }));
+        });
 
-        onWidthResize?.(width, origin, totalDelta, currentDelta, atLimit);
+        onWidthResize?.(payload);
       },
       [onWidthResize, drag, draggable]
     );
 
     const handleHeightResize = useCallback(
-      (
-        height: number,
-        origin: 'top' | 'bottom',
-        totalDelta: number,
-        currentDelta: number,
-        atLimit: boolean
-      ) => {
+      (payload: OnHeightResizePayload) => {
         if (!draggable) return;
-        if (atLimit) return;
-        if (origin === 'bottom') {
-          flushSync(() => {
-            drag.setPosition(prev => ({
-              x: prev.x,
-              y: prev.y + currentDelta / 2,
-            }));
-          });
-        }
-        if (origin === 'top') {
-          flushSync(() => {
-            drag.setPosition(prev => ({
-              x: prev.x,
-              y: prev.y - currentDelta / 2,
-            }));
-          });
-        }
-        onHeightResize?.(height, origin, totalDelta, currentDelta, atLimit);
+        if (payload.currentDelta === 0) return;
+        const sign = payload.origin === 'bottom' ? 1 : -1;
+        const half = payload.currentDelta / 2;
+        const dy = half * sign;
+        flushSync(() => {
+          drag.setPosition(prev => ({
+            x: prev.x,
+            y: prev.y + dy,
+          }));
+        });
+        onHeightResize?.(payload);
       },
       [onHeightResize, drag, draggable]
     );

package/src/overlay/slide/slide.module.css

@@ -0,0 +1,30 @@
+@layer tcn-system {
+  :where(.slide) {
+    position: absolute;
+
+    &[data-side="top"],
+    &[data-side="bottom"] {
+      width: 100%;
+    }
+    &[data-side="start"],
+    &[data-side="end"] {
+      height: 100%;
+    }
+    &[data-side="top"] {
+      top: 0;
+    }
+
+    &[data-side="bottom"] {
+      bottom: 0;
+    }
+
+    /* TODO: support LTR directionality */
+    &[data-side="start"] {
+      left: 0;
+    }
+
+    &[data-side="end"] {
+      right: 0;
+    }
+  }
+}