@tcn/ui 0.6.0 → 0.8.0

package/dist/utils/index.js

@@ -1,33 +1,37 @@
 import { ClickAwayListener as o, isEventWithinElement as t } from "./click_away_listener.js";
-import { FocusRedirect as m } from "./focus_redirect.js";
-import { ScrollAwayListener as s } from "./scroll_away_listener.js";
-import { useDraggable as a } from "./dnd/hooks/use_draggable.js";
+import { FocusRedirect as a } from "./focus_redirect.js";
+import { ScrollAwayListener as p } from "./scroll_away_listener.js";
+import { useDraggable as s } from "./dnd/hooks/use_draggable.js";
 import { makeContextHook as i } from "./hooks/make_context_hook.js";
-import { useForkRef as u } from "./hooks/use_fork_ref.js";
+import { useForkRef as l } from "./hooks/use_fork_ref.js";
 import { useMediaQuery as d } from "./hooks/use_media_query.js";
-import { TriggerConfig as R, useResizeObserver as c } from "./hooks/use_resize_observer.js";
-import { defaultValue as C } from "./default_value.js";
-import { CalendarDatesGenerator as v } from "./calendar/calendar_dates_generator.js";
-import { getDaysOfWeek as M } from "./calendar/get_days_of_week.js";
-import { getMonthsOfYear as b } from "./calendar/get_months_of_year.js";
+import { TriggerConfig as D, useResizeObserver as R } from "./hooks/use_resize_observer.js";
+import { defaultValue as y } from "./default_value.js";
+import { CalendarDatesGenerator as b } from "./calendar/calendar_dates_generator.js";
+import { getDaysOfWeek as v } from "./calendar/get_days_of_week.js";
+import { getMonthsOfYear as O } from "./calendar/get_months_of_year.js";
 import { Month as A } from "./calendar/month.js";
 import { ResponsiveRenderer as F } from "./responsive/responsive_renderer.js";
+import { Draggable as L } from "./dnd/draggable/draggable.js";
+import { DragHandle as z } from "./dnd/handle.js";
 export {
-  v as CalendarDatesGenerator,
+  b as CalendarDatesGenerator,
   o as ClickAwayListener,
-  m as FocusRedirect,
+  z as DragHandle,
+  L as Draggable,
+  a as FocusRedirect,
   A as Month,
   F as ResponsiveRenderer,
-  s as ScrollAwayListener,
-  R as TriggerConfig,
-  C as defaultValue,
-  M as getDaysOfWeek,
-  b as getMonthsOfYear,
+  p as ScrollAwayListener,
+  D as TriggerConfig,
+  y as defaultValue,
+  v as getDaysOfWeek,
+  O as getMonthsOfYear,
   t as isEventWithinElement,
   i as makeContextHook,
-  a as useDraggable,
-  u as useForkRef,
+  s as useDraggable,
+  l as useForkRef,
   d as useMediaQuery,
-  c as useResizeObserver
+  R as useResizeObserver
 };
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -141,8 +141,8 @@
     "@fontsource/lato": "^5.2.7",
     "clsx": "^2.1.1",
     "react-color": "^2.19.3",
-    "@tcn/state": "1.1.1",
-    "@tcn/icons": "2.2.1"
+    "@tcn/icons": "2.2.1",
+    "@tcn/state": "1.2.0"
   },
   "scripts": {
     "build": "vite build",
@@ -154,15 +154,15 @@
     "start": "pnpm storybook",
     "test": "vitest run",
     "test-coverage": "vitest run --coverage",
-    "check-all": "concurrently 'pnpm check-types' 'pnpm dlx @biomejs/biome check .'",
+    "check-all": "concurrently 'pnpm check-types' 'pnpm exec biome check .'",
     "check-types": "tsc --project tsconfig.typecheck.json --noEmit",
-    "check-format": "pnpm dlx @biomejs/biome format .",
-    "check-lint": "pnpm dlx @biomejs/biome lint .",
-    "check-imports": "pnpm dlx @biomejs/biome check --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
-    "fix-all": "pnpm dlx @biomejs/biome check --write",
-    "fix-format": "pnpm dlx @biomejs/biome format --write",
-    "fix-lint": "pnpm dlx @biomejs/biome lint --write",
-    "fix-imports": "pnpm dlx @biomejs/biome check --write --unsafe --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
+    "check-format": "pnpm exec biome format .",
+    "check-lint": "pnpm exec biome lint .",
+    "check-imports": "pnpm exec biome check --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
+    "fix-all": "pnpm exec biome check --write",
+    "fix-format": "pnpm exec biome format --write",
+    "fix-lint": "pnpm exec biome lint --write",
+    "fix-imports": "pnpm exec biome check --write --unsafe --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
     "publish-dry-run": "pnpm build && pnpm publish --dry-run --force --no-git-checks"
   }
 }

package/src/form/field_presenters/field_presenter.ts

@@ -1,4 +1,4 @@
-import { ISubscription, Runner, Signal, WeakPromise } from '@tcn/state';
+import { ISubscription, Runner, Signal, IWeakPromise } from '@tcn/state';
 
 function fastCopy<T>(value: T): T {
   return JSON.parse(JSON.stringify(value));
@@ -19,7 +19,7 @@ export interface FieldState<T> {
 
 export interface FieldOptions<T> {
   description?: string;
-  validate?: (value: T) => Promise<void> | void;
+  validate?: (value: T) => Promise<void> | void | IWeakPromise<void>;
   validateOnChange?: boolean;
   equalityCheck?: (a: T, b: T) => boolean;
   copyInitialValue?: (value: T) => T;
@@ -35,7 +35,7 @@ export class FieldPresenter<T> {
   private _cloneInitialValue: (v: T) => T;
 
   private _validationRunner: Runner<void>;
-  private _validate: (value: T) => Promise<void> | void | WeakPromise<void>;
+  private _validate: (value: T) => Promise<void> | void | IWeakPromise<void>;
   private _subscriptions: ISubscription<any>[];
   private _validateOnChange: boolean;
   private _cancelToken = 'field_presenter_cancel';

package/src/inputs/phone_number_input/phone_number_input.stories.tsx

@@ -57,6 +57,30 @@ export function PhoneNumberInput() {
             <Base disabled />
           </td>
         </tr>
+        <tr>
+          <td>Disabled Phone Number</td>
+          <td>
+            <Base disabledPhoneNumber>
+              <Option value="+14355865953" label="John Doe" keywords={['john', 'doe']}>
+                John Doe - +1 (435) 586-5953
+              </Option>
+              <Option
+                value="+984355865954"
+                label="Jane Smith"
+                keywords={['jane', 'smith']}
+              >
+                Jane Smith - +98 (435) 586-5954
+              </Option>
+              <Option
+                value="+14355865955"
+                label="Bob Johnson"
+                keywords={['bob', 'johnson']}
+              >
+                Bob Johnson - +1 (435) 586-5955
+              </Option>
+            </Base>
+          </td>
+        </tr>
         <tr>
           <td>With Value</td>
           <td>

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -130,6 +130,7 @@ export interface PhoneNumberInputProps
   countrySelectRef?: React.Ref<HTMLButtonElement>;
   phoneNumberInputRef?: React.Ref<HTMLInputElement>;
   disabled?: boolean;
+  disabledPhoneNumber?: boolean;
   allowedCountryCodes?: string[];
   children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
 }
@@ -144,6 +145,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
     countrySelectRef: countryRef,
     phoneNumberInputRef: numberRef,
     disabled = false,
+    disabledPhoneNumber = false,
     allowedCountryCodes,
     children,
     ...props
@@ -341,8 +343,8 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
         width="auto"
         value={obfuscateValue ? '' : countryCode}
         onChange={changeCountry}
-        disabled={disabled || obfuscateValue}
-        data-is-disabled={disabled || obfuscateValue}
+        disabled={disabled || obfuscateValue || disabledPhoneNumber}
+        data-is-disabled={disabled || obfuscateValue || disabledPhoneNumber}
         data-is-obfuscated={obfuscateValue}
         placeholder={obfuscateValue ? '––' : undefined}
       >
@@ -364,8 +366,8 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
             value=""
             mask={createObfuscatedMasks(currentMasks)}
             onChange={handleObfuscatedInputChange}
-            disabled={disabled}
-            data-is-disabled={disabled}
+            disabled={disabled || disabledPhoneNumber}
+            data-is-disabled={disabled || disabledPhoneNumber}
             data-has-phone-book={showPhoneBook}
             data-is-obfuscated={true}
             className={clsx(
@@ -386,8 +388,8 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
             value={phoneNumber}
             mask={currentMasks}
             onChange={transformValue}
-            disabled={disabled}
-            data-is-disabled={disabled}
+            disabled={disabled || disabledPhoneNumber}
+            data-is-disabled={disabled || disabledPhoneNumber}
             data-has-phone-book={showPhoneBook}
             data-is-obfuscated={false}
             className={clsx(styles['phone-number-input'], 'tcn-phone-number-input')}

package/src/navigation/tabs/primitives/tabs_list.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type FC, type PropsWithChildren } from 'react';
+import { forwardRef, useCallback, type FC, type PropsWithChildren } from 'react';
 import { type BaseButtonProps } from '../../../actions/index.js';
 import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
 import clsx from 'clsx';
@@ -6,15 +6,59 @@ import { Toggle } from '../../../actions/toggle/toggle.js';
 
 export type TabsListProps = HStackProps;
 
+const navigateTabs = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  const tabs = Array.from(event.currentTarget.querySelectorAll(':scope > [role="tab"]'));
+  const currentTab = event.currentTarget.querySelector(':focus');
+  const currentIndex = currentTab ? tabs.indexOf(currentTab) : -1;
+  if (currentIndex === -1) return; // Exit if the focused element is not a tab
+  let newIndex = 0;
+
+  switch (event.key) {
+    case 'ArrowRight':
+      newIndex = (currentIndex + 1) % tabs.length;
+      break;
+    case 'ArrowLeft':
+      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+      break;
+    case 'Home':
+      newIndex = 0;
+      break;
+    case 'End':
+      newIndex = tabs.length - 1;
+      break;
+    default:
+      return; // Exit if the key is not recognized
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  tabs[newIndex]['focus']();
+};
+
 export const TabsList: FC<PropsWithChildren<TabsListProps>> = ({
   children,
   className,
   role = 'tablist',
   as = 'menu',
+  onKeyDown,
   ...props
 }) => {
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      navigateTabs(event);
+      onKeyDown && onKeyDown(event);
+    },
+    [onKeyDown]
+  );
+
   return (
-    <HStack as={as} role={role} className={clsx('tcn-tabs-list', className)} {...props}>
+    <HStack
+      onKeyDown={handleKeyDown}
+      as={as}
+      role={role}
+      className={clsx('tcn-tabs-list', className)}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/navigation/tabs/state/link/tab_link.tsx

@@ -13,7 +13,7 @@ export interface TabLinkProps
     TabLinkOwnProps {}
 
 export const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(
-  ({ children, value, onClick, minWidth, maxWidth, ...props }, forwardedRef) => {
+  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {
     const { ref: internalRef, isMatch } = useTabLink(value);
     const state = useTabs();
     const ref = useForkRef(internalRef, forwardedRef);
@@ -36,6 +36,9 @@ export const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkPr
         onClick={handleClick}
         minWidth={pickMinWidth}
         maxWidth={pickMaxWidth}
+        id={`tab-${value}`}
+        aria-controls={`tabpanel-${value}`}
+        tabIndex={isMatch ? 0 : -1}
         {...props}
       >
         {children}

package/src/navigation/tabs/state/link/use_tab_link.ts

@@ -3,15 +3,15 @@ import { useTabs } from '../context.js';
 import { useTrackActiveItemRectangle } from '../../../../utils/css_utils.js';
 
 export function useTabLink(value: string) {
-  const state = useTabs();
-  const isMatch = state.value === value;
+  const { setActiveTrigger, value: currentValue } = useTabs();
+  const isMatch = currentValue === value;
   const { ref, rectangle } = useTrackActiveItemRectangle(isMatch);
 
   useLayoutEffect(() => {
     if (rectangle) {
-      state.setActiveTrigger(rectangle);
+      setActiveTrigger(rectangle);
     }
-  }, [rectangle, state.setActiveTrigger]);
+  }, [rectangle, setActiveTrigger]);
 
   return { ref, isMatch };
 }

package/src/navigation/tabs/state/tab.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { FC, PropsWithChildren } from 'react';
 import { useTabs } from './context.js';
 
@@ -8,5 +9,14 @@ export interface TabProps {
 export const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {
   const state = useTabs();
   if (state.value !== value) return null;
+
+  if (children && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...children.props,
+      id: children.props.id ?? `tabpanel-${value}`,
+      role: children.props.role ?? 'tabpanel',
+    });
+  }
+
   return children;
 };

package/src/overlay/{carrot/carrot.stories.tsx → caret/caret.stories.tsx}

@@ -1,19 +1,19 @@
 import type { StoryObj } from '@storybook/react-vite';
 import { Box } from '../../stacks/index.js';
 import { VStack } from '../../stacks/v_stack.js';
-import { BaseCarrot } from './base_carrot.js';
+import { Caret } from './caret.js';
 
 export default {
-  title: 'Overlays/Carrot',
-  component: BaseCarrot,
+  title: 'Overlays/Caret',
+  component: Caret,
   tags: ['autodocs'],
 };
 
-interface CarrotStoryProps {
+interface CaretStoryProps {
   direction: 'top' | 'bottom' | 'start' | 'end';
 }
 
-const CarrotStory = ({ direction }: CarrotStoryProps) => {
+const CaretStory = ({ direction }: CaretStoryProps) => {
   return (
     <VStack
       minWidth="100px"
@@ -22,32 +22,32 @@ const CarrotStory = ({ direction }: CarrotStoryProps) => {
       style={{ backgroundColor: 'gray' }}
     >
       <Box width="100px" height="100px" padding="24px" style={{ backgroundColor: 'red' }}>
-        <BaseCarrot direction={direction} />
+        <Caret direction={direction} />
       </Box>
     </VStack>
   );
 };
 
-export const Top: StoryObj<CarrotStoryProps> = {
-  render: args => <CarrotStory {...args} />,
+export const Top: StoryObj<CaretStoryProps> = {
+  render: args => <CaretStory {...args} />,
   args: {
     direction: 'top',
   },
 };
-export const Bottom: StoryObj<CarrotStoryProps> = {
-  render: args => <CarrotStory {...args} />,
+export const Bottom: StoryObj<CaretStoryProps> = {
+  render: args => <CaretStory {...args} />,
   args: {
     direction: 'bottom',
   },
 };
-export const Start: StoryObj<CarrotStoryProps> = {
-  render: args => <CarrotStory {...args} />,
+export const Start: StoryObj<CaretStoryProps> = {
+  render: args => <CaretStory {...args} />,
   args: {
     direction: 'start',
   },
 };
-export const End: StoryObj<CarrotStoryProps> = {
-  render: args => <CarrotStory {...args} />,
+export const End: StoryObj<CaretStoryProps> = {
+  render: args => <CaretStory {...args} />,
   args: {
     direction: 'end',
   },

package/src/overlay/caret/caret.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+
+export interface CaretOwnProps {
+  direction: 'top' | 'bottom' | 'start' | 'end';
+}
+
+export interface CaretProps extends CaretOwnProps, BoxProps {}
+
+export const Caret = forwardRef<HTMLElement, CaretProps>(function Caret(
+  { direction, className, as = 'span', ...rest },
+  ref
+) {
+  return (
+    <Box
+      ref={ref}
+      as="span"
+      data-direction={direction}
+      className={clsx('tcn-caret', className)}
+      {...rest}
+    />
+  );
+});

package/src/overlay/tethered/__stories__/shared/base_story_config.ts

@@ -9,6 +9,7 @@ type TetheredStoryArgs = Pick<
   | 'horizontalOrigin'
   | 'verticalOffset'
   | 'horizontalOffset'
+  | 'precision'
 >;
 
 export const tetheredArgTypes: ArgTypes<TetheredStoryArgs> = {
@@ -40,6 +41,12 @@ export const tetheredArgTypes: ArgTypes<TetheredStoryArgs> = {
     control: { type: 'number' },
     description: 'The offset to position the popper horizontally.',
   },
+  precision: {
+    options: ['high', 'low'],
+    control: { type: 'radio' },
+    description:
+      'The precision level for positioning. High precision includes caret offset calculations.',
+  },
 };
 
 export const tetheredArgs: TetheredStoryArgs = {
@@ -49,4 +56,5 @@ export const tetheredArgs: TetheredStoryArgs = {
   horizontalOrigin: 'center',
   verticalOffset: 0,
   horizontalOffset: 0,
+  precision: 'low',
 };

package/src/overlay/tethered/hooks/calculate_origin.ts

@@ -0,0 +1,74 @@
+import type { Position, Rectangle } from '../../../utils/index.js';
+import type { HorizontalTether, VerticalTether } from '../types.js';
+
+export type CaretDirection = 'top' | 'bottom' | 'start' | 'end' | 'none';
+
+/**
+ * Calculates the offset from the tethered element's top-left corner to the origin point
+ * based on tether dimensions and origin alignment.
+ */
+export function getOriginOffset(
+  tether: Rectangle,
+  hOrigin: HorizontalTether,
+  vOrigin: VerticalTether
+): { yOffset: number; xOffset: number } {
+  let yOffset = 0;
+  let xOffset = 0;
+
+  // Calculate vertical offset
+  switch (vOrigin) {
+    case 'top':
+      yOffset = 0;
+      break;
+    case 'center':
+      yOffset = tether.dimensions.height / 2;
+      break;
+    case 'bottom':
+      yOffset = tether.dimensions.height;
+      break;
+  }
+
+  // Calculate horizontal offset
+  switch (hOrigin) {
+    case 'start':
+      xOffset = 0;
+      break;
+    case 'center':
+      xOffset = tether.dimensions.width / 2;
+      break;
+    case 'end':
+      xOffset = tether.dimensions.width;
+      break;
+  }
+
+  return { yOffset, xOffset };
+}
+
+/**
+ * Adds offset to baseline position to get absolute origin position.
+ */
+export function getOriginPosition(
+  baselinePosition: Position,
+  offset: { yOffset: number; xOffset: number }
+): Position {
+  return {
+    x: baselinePosition.x + offset.xOffset,
+    y: baselinePosition.y + offset.yOffset,
+  };
+}
+
+/**
+ * Determines caret direction based on origin values.
+ */
+export function getOriginDirection(
+  vOrigin: VerticalTether,
+  hOrigin: HorizontalTether
+): CaretDirection {
+  if (vOrigin !== 'center') {
+    return vOrigin;
+  } else if (hOrigin !== 'center') {
+    return hOrigin;
+  } else {
+    return 'none';
+  }
+}

package/src/overlay/tethered/hooks/useCaretRefDimensions.ts

@@ -0,0 +1,22 @@
+import { useLayoutEffect, useState } from 'react';
+import type { CaretDirection } from './calculate_origin.js';
+
+export function useCaretRefDimensions(
+  precision: 'high' | 'low',
+  originDirection: CaretDirection
+): {
+  caretElementRef: (element: HTMLElement | null) => void;
+  caretSize: { width: number; height: number };
+} {
+  const [caretElement, setCaretElement] = useState<HTMLElement | null>(null);
+  const [caretSize, setCaretSize] = useState({ width: 0, height: 0 });
+
+  useLayoutEffect(() => {
+    if (precision === 'high' && originDirection !== 'none' && caretElement) {
+      const rect = caretElement.getBoundingClientRect();
+      setCaretSize({ width: rect.width, height: rect.height });
+    }
+  }, [precision, originDirection, caretElement]);
+
+  return { caretElementRef: setCaretElement, caretSize };
+}

package/src/overlay/tethered/hooks/useTether.ts

@@ -1,6 +1,6 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import type { HorizontalTether, VerticalTether } from '../types.js';
 import { type Rectangle } from '../../../utils/index.js';
+import type { HorizontalTether, VerticalTether } from '../types.js';
 import { calculateTetheredPosition } from './calculate_position.js';
 
 export interface UseTetherParams {
@@ -65,12 +65,13 @@ export function useTether({
     horizontalOffset,
   ]);
 
-  // Update the position when the window is resized
   useLayoutEffect(() => {
     const update = () => {
       const newPosition = getPosition();
       if (!newPosition) return;
-      if (position.top !== newPosition.top || position.left !== newPosition.left) {
+      const hasChanged =
+        position.top !== newPosition.top || position.left !== newPosition.left;
+      if (hasChanged) {
         setPosition(newPosition);
       }
     };

package/src/overlay/tethered/hooks/useTetherContentRect.ts

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useState } from 'react';
+import type { Rectangle } from '../../../utils/index.js';
+
+function getTetherContentRect(element: HTMLElement | null): Rectangle {
+  if (!element) {
+    return {
+      dimensions: { width: 0, height: 0 },
+      position: { x: 0, y: 0 },
+    };
+  }
+
+  const rect = element.getBoundingClientRect();
+  return {
+    dimensions: {
+      width: rect.width,
+      height: rect.height,
+    },
+    position: {
+      x: rect.left,
+      y: rect.top,
+    },
+  };
+}
+
+export function useTetherContentRect(ref: React.RefObject<HTMLElement>): Rectangle {
+  const [contentRect, setContentRect] = useState<Rectangle>(() =>
+    getTetherContentRect(ref.current)
+  );
+
+  useLayoutEffect(() => {
+    const update = () => {
+      setContentRect(getTetherContentRect(ref.current));
+    };
+
+    update();
+
+    // Track resize events
+    window.addEventListener('resize', update);
+    // Track scroll events
+    window.addEventListener('scroll', update, true);
+
+    return () => {
+      window.removeEventListener('resize', update);
+      window.removeEventListener('scroll', update, true);
+    };
+  }, [ref]);
+
+  return contentRect;
+}