@a-type/ui 6.1.37 → 6.1.39

package/src/components/richEditor/richEditor.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import clsx from 'clsx';
+import { Input } from '../input/Input.js';
 import { tipTapClassName, tipTapReadonlyClassName } from './index.js';
 
 const meta = {
@@ -19,49 +20,52 @@ type Story = StoryObj<{ readonly: boolean }>;
 export const Default: Story = {
 	render(args) {
 		return (
-			<div
-				className={clsx(
-					tipTapClassName,
-					args.readonly && tipTapReadonlyClassName,
-				)}
-			>
-				<div className="ProseMirror">
-					<p>{paragraphText}</p>
-					<h1>Heading 1</h1>
-					<p>{paragraphText}</p>
-					<h2>Heading 2</h2>
-					<p>{paragraphText}</p>
-					<p>{paragraphText}</p>
-					<hr />
-					<p>{paragraphText}</p>
+			<Input.Border>
+				<div
+					contentEditable={true}
+					className={clsx(
+						tipTapClassName,
+						args.readonly && tipTapReadonlyClassName,
+					)}
+				>
+					<div className="ProseMirror">
+						<p>{paragraphText}</p>
+						<h1>Heading 1</h1>
+						<p>{paragraphText}</p>
+						<h2>Heading 2</h2>
+						<p>{paragraphText}</p>
+						<p>{paragraphText}</p>
+						<hr />
+						<p>{paragraphText}</p>
 
-					<blockquote>{paragraphText}</blockquote>
-					<h3>Heading 3</h3>
-					<ul>
-						<li>{paragraphText}</li>
-						<li>{paragraphText}</li>
-					</ul>
-					<p>{paragraphText}</p>
-					<ol>
-						<li>{paragraphText}</li>
-						<li>{paragraphText}</li>
-					</ol>
-					<h4>Heading 4</h4>
-					<p>{paragraphText}</p>
-					<p>
-						<mark>Highlighted</mark> text
-					</p>
-					<p>
-						<a href="#">Link</a>
-					</p>
-					<p>
-						<strong>Bold</strong> text
-					</p>
-					<p>
-						<em>Italic</em> text
-					</p>
+						<blockquote>{paragraphText}</blockquote>
+						<h3>Heading 3</h3>
+						<ul>
+							<li>{paragraphText}</li>
+							<li>{paragraphText}</li>
+						</ul>
+						<p>{paragraphText}</p>
+						<ol>
+							<li>{paragraphText}</li>
+							<li>{paragraphText}</li>
+						</ol>
+						<h4>Heading 4</h4>
+						<p>{paragraphText}</p>
+						<p>
+							<mark>Highlighted</mark> text
+						</p>
+						<p>
+							<a href="#">Link</a>
+						</p>
+						<p>
+							<strong>Bold</strong> text
+						</p>
+						<p>
+							<em>Italic</em> text
+						</p>
+					</div>
 				</div>
-			</div>
+			</Input.Border>
 		);
 	},
 };

package/src/components/scrollArea/ScrollArea.tsx

@@ -5,7 +5,7 @@ import {
 	ScrollAreaScrollbarProps,
 } from '@base-ui/react/scroll-area';
 import { Ref } from 'react';
-import { withClassName } from '../../hooks.js';
+import { withClassName } from '../../hooks/withClassName.js';
 import cls from './ScrollArea.module.css';
 
 export type * from '@base-ui/react/scroll-area';

package/src/components/slider/Slider.tsx

@@ -1,7 +1,7 @@
 import { Slider as BaseSlider, SliderRootProps } from '@base-ui/react/slider';
 import clsx from 'clsx';
 import { Ref } from 'react';
-import { withClassName } from '../../hooks.js';
+import { withClassName } from '../../hooks/withClassName.js';
 import cls from './Slider.module.css';
 
 export const SliderRoot = withClassName(BaseSlider.Root, cls.root);

package/src/components/splashScreen/SplashScreen.tsx

@@ -1,4 +1,4 @@
-import { withClassName } from '../../hooks.js';
+import { withClassName } from '../../hooks/withClassName.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import cls from './SplashScreen.module.css';
 

package/src/components/textArea/TextArea.tsx

@@ -1,7 +1,7 @@
 import classNames from 'clsx';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { withClassName } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
+import { withClassName } from '../../hooks/withClassName.js';
 import { Input, InputProps } from '../input/Input.js';
 import cls from './TextArea.module.css';
 

package/src/components/utility/HideWhileKeyboardOpen.tsx

@@ -1,25 +1,25 @@
-import clsx from 'clsx';
-import { HTMLAttributes } from 'react';
-import { useIsKeyboardOpen } from '../../hooks.js';
-import { SlotDiv } from './SlotDiv.js';
-
-export interface HideWhileKeyboardOpenProps
-	extends HTMLAttributes<HTMLDivElement> {}
-
-export const HideWhileKeyboardOpen = function HideWhileKeyboardOpen({
-	ref,
-	className,
-	...rest
-}: HideWhileKeyboardOpenProps & {
-	ref?: React.Ref<HTMLDivElement>;
-}) {
-	const isKeyboardOpen = useIsKeyboardOpen();
-
-	return (
-		<SlotDiv
-			ref={ref}
-			className={clsx(isKeyboardOpen && 'layer-responsive:hidden', className)}
-			{...rest}
-		/>
-	);
-};
+import clsx from 'clsx';
+import { HTMLAttributes } from 'react';
+import { useIsKeyboardOpen } from '../../hooks/useVisualViewportOffset.js';
+import { SlotDiv } from './SlotDiv.js';
+
+export interface HideWhileKeyboardOpenProps
+	extends HTMLAttributes<HTMLDivElement> {}
+
+export const HideWhileKeyboardOpen = function HideWhileKeyboardOpen({
+	ref,
+	className,
+	...rest
+}: HideWhileKeyboardOpenProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	const isKeyboardOpen = useIsKeyboardOpen();
+
+	return (
+		<SlotDiv
+			ref={ref}
+			className={clsx(isKeyboardOpen && 'layer-responsive:hidden', className)}
+			{...rest}
+		/>
+	);
+};

package/src/components/viewport/Viewport.tsx

@@ -10,8 +10,9 @@ import {
 	useState,
 } from 'react';
 import { createPortal } from 'react-dom';
-import { useSizeCssVars, useStableCallback } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
+import { useSizeCssVars } from '../../hooks/useSize.js';
+import { useStableCallback } from '../../hooks/useStableCallback.js';
 import { Box, BoxProps } from '../box/Box.js';
 import {
 	useKeyboardControls,

package/src/hooks/useVisualViewportOffset.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useConfig } from '../components/provider/Provider.js';
+import { useConfig } from '../systems/config.js';
 import { useStableCallback } from './useStableCallback.js';
 
 /**

package/src/systems/config.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+export const ConfigContext = createContext<{
+	virtualKeyboardBehavior: 'overlay' | 'displace';
+}>({
+	virtualKeyboardBehavior: 'displace',
+});
+
+export function useConfig() {
+	return useContext(ConfigContext);
+}