@tcn/ui 0.8.1 → 0.9.0

package/src/typography/callout/callout.tsx

@@ -20,21 +20,24 @@ export interface CalloutOwnProps {
 
 export type CalloutProps = WithDetailedHTMLProps<CalloutOwnProps, 'div'>;
 
-export function Callout({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: CalloutProps) {
+export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(function Callout(
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+  }: CalloutProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -61,6 +64,7 @@ export function Callout({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -71,4 +75,4 @@ export function Callout({
       {children}
     </div>
   );
-}
+});

package/src/typography/caption/caption.tsx

@@ -20,21 +20,24 @@ export interface CaptionOwnProps {
 
 export type CaptionProps = WithDetailedHTMLProps<CaptionOwnProps, 'div'>;
 
-export function Caption({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: CaptionProps) {
+export const Caption = React.forwardRef<HTMLDivElement, CaptionProps>(function Caption(
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+  }: CaptionProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -61,6 +64,7 @@ export function Caption({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -71,4 +75,4 @@ export function Caption({
       {children}
     </div>
   );
-}
+});

package/src/typography/footnote/footnote.tsx

@@ -20,21 +20,24 @@ export interface FootnoteOwnProps {
 
 export type FootnoteProps = WithDetailedHTMLProps<FootnoteOwnProps, 'div'>;
 
-export function Footnote({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: FootnoteProps) {
+export const Footnote = React.forwardRef<HTMLDivElement, FootnoteProps>(function Footnote(
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+  }: FootnoteProps,
+  ref
+) {
   if (pad) {
     style.padding = pad;
   }
@@ -61,6 +64,7 @@ export function Footnote({
 
   return (
     <div
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -71,4 +75,4 @@ export function Footnote({
       {children}
     </div>
   );
-}
+});

package/src/typography/headline/headline.tsx

@@ -20,65 +20,71 @@ export interface HeadlineOwnProps {
 
 export type HeadlineProps = WithDetailedHTMLProps<HeadlineOwnProps, 'h1' | 'h2' | 'h3'>;
 
-export function Headline({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: HeadlineProps) {
-  let As: React.ElementType;
+export const Headline = React.forwardRef<HTMLHeadingElement, HeadlineProps>(
+  function Headline(
+    {
+      size = 'md',
+      emphasis = 'normal',
+      hierarchy = 'primary',
+      color,
+      children,
+      className,
+      style = {},
+      padStart,
+      padEnd,
+      padBottom,
+      padTop,
+      pad,
+      selectable = true,
+    }: HeadlineProps,
+    ref
+  ) {
+    let As: React.ElementType;
 
-  if (size === 'lg') {
-    As = 'h1';
-  } else if (size === 'md') {
-    As = 'h2';
-  } else {
-    As = 'h3';
-  }
+    if (size === 'lg') {
+      As = 'h1';
+    } else if (size === 'md') {
+      As = 'h2';
+    } else {
+      As = 'h3';
+    }
 
-  if (pad) {
-    style.padding = pad;
-  }
+    if (pad) {
+      style.padding = pad;
+    }
 
-  if (padStart) {
-    style.paddingInlineStart = padStart;
-  }
+    if (padStart) {
+      style.paddingInlineStart = padStart;
+    }
 
-  if (padEnd) {
-    style.paddingInlineEnd = padEnd;
-  }
+    if (padEnd) {
+      style.paddingInlineEnd = padEnd;
+    }
 
-  if (padTop) {
-    style.paddingTop = padTop;
-  }
+    if (padTop) {
+      style.paddingTop = padTop;
+    }
 
-  if (padBottom) {
-    style.paddingBottom = padBottom;
-  }
+    if (padBottom) {
+      style.paddingBottom = padBottom;
+    }
 
-  if (color) {
-    style.color = color;
-  }
+    if (color) {
+      style.color = color;
+    }
 
-  return (
-    <As
-      data-hierarchy={hierarchy}
-      data-emphasis={emphasis}
-      data-selectable={selectable}
-      className={clsx(styles['headline'], className, 'tcn-headline')}
-      style={style}
-      data-size={size}
-    >
-      {children}
-    </As>
-  );
-}
+    return (
+      <As
+        ref={ref}
+        data-hierarchy={hierarchy}
+        data-emphasis={emphasis}
+        data-selectable={selectable}
+        className={clsx(styles['headline'], className, 'tcn-headline')}
+        style={style}
+        data-size={size}
+      >
+        {children}
+      </As>
+    );
+  }
+);

package/src/typography/subheadline/subheadline.tsx

@@ -23,65 +23,71 @@ export type SubheadlineProps = WithDetailedHTMLProps<
   'h3' | 'h4' | 'h5'
 >;
 
-export function Subheadline({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-}: SubheadlineProps) {
-  let As: React.ElementType;
+export const Subheadline = React.forwardRef<HTMLHeadingElement, SubheadlineProps>(
+  function Subheadline(
+    {
+      size = 'md',
+      emphasis = 'normal',
+      hierarchy = 'primary',
+      color,
+      children,
+      className,
+      style = {},
+      padStart,
+      padEnd,
+      padBottom,
+      padTop,
+      pad,
+      selectable = true,
+    }: SubheadlineProps,
+    ref
+  ) {
+    let As: React.ElementType;
 
-  if (size === 'lg') {
-    As = 'h3';
-  } else if (size === 'md') {
-    As = 'h4';
-  } else {
-    As = 'h5';
-  }
+    if (size === 'lg') {
+      As = 'h3';
+    } else if (size === 'md') {
+      As = 'h4';
+    } else {
+      As = 'h5';
+    }
 
-  if (pad) {
-    style.padding = pad;
-  }
+    if (pad) {
+      style.padding = pad;
+    }
 
-  if (padStart) {
-    style.paddingInlineStart = padStart;
-  }
+    if (padStart) {
+      style.paddingInlineStart = padStart;
+    }
 
-  if (padEnd) {
-    style.paddingInlineEnd = padEnd;
-  }
+    if (padEnd) {
+      style.paddingInlineEnd = padEnd;
+    }
 
-  if (padTop) {
-    style.paddingTop = padTop;
-  }
+    if (padTop) {
+      style.paddingTop = padTop;
+    }
 
-  if (padBottom) {
-    style.paddingBottom = padBottom;
-  }
+    if (padBottom) {
+      style.paddingBottom = padBottom;
+    }
 
-  if (color) {
-    style.color = color;
-  }
+    if (color) {
+      style.color = color;
+    }
 
-  return (
-    <As
-      data-hierarchy={hierarchy}
-      data-emphasis={emphasis}
-      data-selectable={selectable}
-      className={clsx(styles['subheadline'], className, 'tcn-subheadline')}
-      style={style}
-      data-size={size}
-    >
-      {children}
-    </As>
-  );
-}
+    return (
+      <As
+        ref={ref}
+        data-hierarchy={hierarchy}
+        data-emphasis={emphasis}
+        data-selectable={selectable}
+        className={clsx(styles['subheadline'], className, 'tcn-subheadline')}
+        style={style}
+        data-size={size}
+      >
+        {children}
+      </As>
+    );
+  }
+);

package/src/utils/dnd/__stories__/draggable.stories.tsx

@@ -1,8 +1,10 @@
 import { Draggable } from '../draggable/draggable.js';
+import { useDragContainer } from '../context.js';
 import { VStack } from '../../../stacks/v_stack.js';
 import { DragHandle } from '../handle.js';
 import { Box } from '../../../stacks/box/box.js';
 import { BodyText } from '../../../typography/index.js';
+import { Button } from '../../../actions/button/button/button.js';
 import styles from './draggable_stories.module.css';
 
 export default {
@@ -46,3 +48,35 @@ export const DraggableStory = () => {
     </VStack>
   );
 };
+
+function ResetPositionButton() {
+  const { setPosition } = useDragContainer();
+  return (
+    <Button onClick={() => setPosition({ x: 0, y: 0 })} hierarchy="secondary">
+      Reset position
+    </Button>
+  );
+}
+
+export const WithSetPosition = () => {
+  return (
+    <VStack minHeight="600px" height="100%" width="100%" gap="8px">
+      <BodyText>
+        Drag the box, then click &quot;Reset position&quot; to move it back to (0, 0).
+        Dragging again should start from the new position.
+      </BodyText>
+      <Draggable>
+        <Box width="400px" height="300px" className={styles['handle-container']}>
+          <VStack gap="8px" padding="8px">
+            <DragHandle>
+              <Box className={styles.handle} width="120px" padding="8px">
+                <BodyText>Drag Handle</BodyText>
+              </Box>
+            </DragHandle>
+            <ResetPositionButton />
+          </VStack>
+        </Box>
+      </Draggable>
+    </VStack>
+  );
+};

package/src/utils/dnd/context.ts

@@ -6,6 +6,7 @@ const defaultValue: DragContainer = {
   unregisterHandle: () => {},
   isDragging: false,
   position: { x: 0, y: 0 },
+  setPosition: () => {},
 };
 
 export const DragContainerContext = createContext<DragContainer>(defaultValue);

package/src/utils/dnd/hooks/use_drag_container.ts

@@ -30,6 +30,17 @@ export function useMakeDragContainer(options: UseDragContainerOptions): DragCont
     },
   });
 
+  const setPositionState = useCallback(
+    (value: Position | ((prev: Position) => Position)) => {
+      setPosition(prev => {
+        const next = typeof value === 'function' ? value(prev) : value;
+        positionRef.current = next;
+        return next;
+      });
+    },
+    []
+  );
+
   const registerHandle = useCallback((handle: React.RefObject<HTMLElement>) => {
     setHandles(prev => [...prev, handle]);
   }, []);
@@ -38,5 +49,11 @@ export function useMakeDragContainer(options: UseDragContainerOptions): DragCont
     setHandles(prev => prev.filter(h => h !== handle));
   }, []);
 
-  return { registerHandle, unregisterHandle, position, isDragging };
+  return {
+    registerHandle,
+    unregisterHandle,
+    position,
+    isDragging,
+    setPosition: setPositionState,
+  };
 }

package/src/utils/dnd/types.ts

@@ -1,6 +1,9 @@
+import type { Position } from '../types/dimensions.js';
+
 export interface DragContainer {
   registerHandle: (handle: React.RefObject<HTMLElement>) => void;
   unregisterHandle: (handle: React.RefObject<HTMLElement>) => void;
   isDragging: boolean;
-  position: { x: number; y: number };
+  position: Position;
+  setPosition: (value: Position | ((prev: Position) => Position)) => void;
 }

package/src/utils/hooks/use_media_query.ts

@@ -1,32 +1,21 @@
-import React from 'react';
+import { useLayoutEffect, useState } from 'react';
+import { useResizeObserver } from './use_resize_observer.js';
 
-/**
- * Custom hook that returns a boolean indicating if the current viewport
- * matches the given media query.
- *
- * @param query - The media query to match against (e.g. "(min-width: 768px)")
- * @returns boolean indicating if the media query matches
- */
-export function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = React.useState(false);
-
-  React.useEffect(() => {
-    const mediaQuery = window.matchMedia(query);
-
-    // Set initial value
-    setMatches(mediaQuery.matches);
-
-    // Create event listener
-    const handler = (event: MediaQueryListEvent) => {
-      setMatches(event.matches);
-    };
+export interface ViewportSize {
+  width: number;
+  height: number;
+}
 
-    // Add the listener
-    mediaQuery.addEventListener('change', handler);
+export function useMediaQuery(): ViewportSize {
+  const [size, setSize] = useState<ViewportSize>({ width: 0, height: 0 });
+  const resizeRef = useResizeObserver((width, height) => {
+    setSize({ width, height });
+  });
 
-    // Clean up
-    return () => mediaQuery.removeEventListener('change', handler);
-  }, [query]);
+  useLayoutEffect(() => {
+    const body = document.body;
+    resizeRef(body);
+  }, [resizeRef]);
 
-  return matches;
+  return size;
 }

package/src/utils/index.ts

@@ -5,8 +5,8 @@ export * from './scroll_away_listener.js';
 export * from './dnd/hooks/use_draggable.js';
 export * from './hooks/make_context_hook.js';
 export * from './hooks/use_fork_ref.js';
-export * from './hooks/use_media_query.js';
 export * from './hooks/use_resize_observer.js';
+export * from './hooks/use_media_query.js';
 
 export * from './default_value.js';
 
@@ -19,7 +19,5 @@ export * from './calendar/month.js';
 export * from './types/dimensions.js';
 export * from './types/variations.js';
 
-export * from './responsive/responsive_renderer.js';
-
 export * from './dnd/draggable/draggable.js';
 export * from './dnd/handle.js';

package/dist/body_text.module-h4XQE2pC.js

@@ -1,5 +0,0 @@
-import './body_text.css';const t = "_body-text_ee60621", e = { "body-text": t };
-export {
-  e as s
-};
-//# sourceMappingURL=body_text.module-h4XQE2pC.js.map

package/dist/body_text.module-h4XQE2pC.js.map

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

package/dist/callout.module-D8ECmxpO.js

@@ -1,5 +0,0 @@
-import './callout.css';const s = "_callout_32c6400", t = { callout: s };
-export {
-  t as s
-};
-//# sourceMappingURL=callout.module-D8ECmxpO.js.map

package/dist/callout.module-D8ECmxpO.js.map

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

package/dist/caption.module-DDq0H4xZ.js

@@ -1,5 +0,0 @@
-import './caption.css';const s = "_caption_94e02c4", t = { caption: s };
-export {
-  t as s
-};
-//# sourceMappingURL=caption.module-DDq0H4xZ.js.map

package/dist/caption.module-DDq0H4xZ.js.map

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

package/dist/footnote.module-DEyFuqOr.js

@@ -1,5 +0,0 @@
-import './footnote.css';const o = "_footnote_f4b25ae", t = { footnote: o };
-export {
-  t as s
-};
-//# sourceMappingURL=footnote.module-DEyFuqOr.js.map

package/dist/footnote.module-DEyFuqOr.js.map

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

package/dist/headline.module-BiwHBtGf.js

@@ -1,5 +0,0 @@
-import './headline.css';const e = "_headline_9a99308", s = { headline: e };
-export {
-  s
-};
-//# sourceMappingURL=headline.module-BiwHBtGf.js.map

package/dist/headline.module-BiwHBtGf.js.map

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

package/dist/subheadline.module-C-v7zMkQ.js

@@ -1,5 +0,0 @@
-import './subheadline.css';const s = "_subheadline_ae8bc38", e = { subheadline: s };
-export {
-  e as s
-};
-//# sourceMappingURL=subheadline.module-C-v7zMkQ.js.map

package/dist/subheadline.module-C-v7zMkQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"subheadline.module-C-v7zMkQ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/utils/responsive/responsive_renderer.d.ts

@@ -1,21 +0,0 @@
-import { default as React } from 'react';
-export interface ResponsiveRendererProps {
-    /**
-     * Component to render on mobile devices (width < 768px)
-     */
-    mobile: React.ReactNode;
-    /**
-     * Component to render on desktop devices (width >= 768px)
-     */
-    desktop: React.ReactNode;
-    /**
-     * Optional breakpoint in pixels. Defaults to 768px
-     */
-    breakpoint?: number;
-}
-/**
- * A component that renders different content based on screen size.
- * Uses the useMediaQuery hook to detect screen size changes.
- */
-export declare function ResponsiveRenderer({ mobile, desktop, breakpoint, }: ResponsiveRendererProps): React.ReactNode;
-//# sourceMappingURL=responsive_renderer.d.ts.map