@a-type/ui 1.1.24 → 1.1.26

package/dist/esm/hooks/useRotatingShuffledValue.js

@@ -0,0 +1,15 @@
+// @unocss-include
+import { useEffect, useState } from 'react';
+export function useRotatingShuffledValue(options, intervalMs = 5000) {
+    const [selected, setSelected] = useState(options ? options[Math.floor(Math.random() * options.length)] : undefined);
+    useEffect(() => {
+        if (options) {
+            const interval = setInterval(() => {
+                setSelected(options[Math.floor(Math.random() * options.length)]);
+            }, intervalMs);
+            return () => clearInterval(interval);
+        }
+    }, [options, intervalMs]);
+    return selected;
+}
+//# sourceMappingURL=useRotatingShuffledValue.js.map

package/dist/esm/hooks/useRotatingShuffledValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRotatingShuffledValue.js","sourceRoot":"","sources":["../../../src/hooks/useRotatingShuffledValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,UAAU,wBAAwB,CACvC,OAAY,EACZ,UAAU,GAAG,IAAI;IAEjB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACvC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CACzE,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,OAAO,EAAE;YACZ,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;gBACjC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAClE,CAAC,EAAE,UAAU,CAAC,CAAC;YACf,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;SACrC;IACF,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1B,OAAO,QAAQ,CAAC;AACjB,CAAC"}

package/dist/esm/index.d.ts

@@ -1,2 +1,4 @@
 export { clsx } from 'clsx';
 export { toast } from 'react-hot-toast';
+export * from './hooks.js';
+export * from './components/index.js';

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 // @unocss-include
 export { clsx } from 'clsx';
 export { toast } from 'react-hot-toast';
+export * from './hooks.js';
+export * from './components/index.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAExC,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC"}

package/dist/esm/uno.preset.js

@@ -431,9 +431,9 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
 					--palette-blue-00: #00354a;
 					--palette-purple-90: #f1efff;
 					--palette-purple-80: #e0e0ff;
-					--palette-purple-70: #bdc2ff;
-					--palette-purple-60: #a0a8ff;
-					--palette-purple-50: #7c87f3;
+					--palette-purple-70: #c8cdff;
+					--palette-purple-60: #aab1ff;
+					--palette-purple-50: #8490f4;
 					--palette-purple-40: #6d78d7;
 					--palette-purple-30: #6068c0;
 					--palette-purple-20: #5a62a7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "type": "module",
   "files": [
     "/dist",

package/src/components/index.ts

@@ -0,0 +1,50 @@
+export * from './actions/index.js';
+export * from './avatar/index.js';
+export * from './button/index.js';
+export * from './camera/index.js';
+export * from './card/index.js';
+export * from './checkbox/index.js';
+export * from './chip/index.js';
+export * from './collapsible/index.js';
+export * from './colorPicker/index.js';
+export * from './contextMenu/contextMenu.js';
+export * from './datePicker/index.js';
+export * from './dialog/index.js';
+export * from './divider/index.js';
+export * from './dropdownMenu/index.js';
+export * from './editableText/EditableText.js';
+export * from './errorBoundary/index.js';
+export * from './forms/index.js';
+export * from './horizontalList/HorizontalList.js';
+export * from './icon/index.js';
+export * from './imageUploader/index.js';
+export * from './infiniteLoadTrigger/InfiniteLoadTrigger.js';
+export * from './input/index.js';
+export * from './layouts/index.js';
+export * from './liveUpdateTextField/index.js';
+export * from './marquee/marquee.js';
+export * from './masonry/masonry.js';
+export * from './navBar/index.js';
+export * from './note/index.js';
+export * from './numberStepper/index.js';
+export * from './particles/index.js';
+export * from './peek/index.js';
+export * from './popover/index.js';
+export * from './provider/Provider.js';
+export * from './relativeTime/index.js';
+export * from './richEditor/index.js';
+export * from './scrollArea/ScrollArea.js';
+export * from './select/index.js';
+export * from './skeletons/skeletons.js';
+export * from './slider/index.js';
+export { Slot, type SlotProps, Slottable } from '@radix-ui/react-slot';
+export * from './spinner/index.js';
+export * from './switch/index.js';
+export * from './tabs/tabs.js';
+export * from './textArea/index.js';
+export * from './toasts/toasts.js';
+export * from './toggleGroup/toggleGroup.js';
+export * from './tooltip/index.js';
+export * from './typography/index.js';
+export * from './utility/HideWhileKeyboardOpen.js';
+export * from './utility/SlotDiv.js';

package/src/components/input/Input.tsx

@@ -1,13 +1,7 @@
 import classNames from 'clsx';
-import {
-	ComponentProps,
-	FocusEvent,
-	forwardRef,
-	useCallback,
-	useEffect,
-	useState,
-} from 'react';
+import { ComponentProps, FocusEvent, forwardRef, useCallback } from 'react';
 import { Slot } from '@radix-ui/react-slot';
+import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export const inputClassName = classNames(
 	'layer-components:(px-5 py-[5px] text-md font-sans rounded-full bg-white select-auto min-w-60px color-black border-solid border-1 border-gray-7 shadow-sm-inset)',
@@ -50,23 +44,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 		[onFocus, autoSelect],
 	);
 
-	const [randomPlaceholder, setRandomPlaceholder] = useState<
-		string | undefined
-	>(
-		placeholders
-			? placeholders[Math.floor(Math.random() * placeholders.length)]
-			: undefined,
+	const randomPlaceholder = useRotatingShuffledValue(
+		placeholders ?? [],
+		placeholdersIntervalMs,
 	);
-	useEffect(() => {
-		if (placeholders) {
-			const interval = setInterval(() => {
-				setRandomPlaceholder(
-					placeholders[Math.floor(Math.random() * placeholders.length)],
-				);
-			}, placeholdersIntervalMs);
-			return () => clearInterval(interval);
-		}
-	}, [placeholders, placeholdersIntervalMs]);
 
 	const Component = asChild ? Slot : 'input';
 

package/src/components/layouts/PageContent.tsx

@@ -40,7 +40,7 @@ export function PageContent({
 				className={classNames(
 					'layer-components:(w-full min-w-0 flex flex-col mb-120px px-4 py-4 flex-1)',
 					{
-						'layer-variants:flex-1': fullHeight,
+						'layer-variants:(flex-1 mb-auto)': fullHeight,
 						'layer-variants:(p-0 sm:p-4)': noPadding,
 					},
 					innerProps?.className,

package/src/components/provider/Provider.tsx

@@ -28,7 +28,9 @@ export function Provider({
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
 	const supportedVirtualKeyboardBehavior =
-		'virtualKeyboard' in navigator ? virtualKeyboardBehavior : 'displace';
+		typeof navigator !== 'undefined' && 'virtualKeyboard' in navigator
+			? virtualKeyboardBehavior
+			: 'displace';
 	useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
 
 	const otherStuff = (

package/src/components/textArea/TextArea.tsx

@@ -7,12 +7,12 @@ import {
 	forwardRef,
 	HTMLProps,
 	useCallback,
-	useEffect,
 	useLayoutEffect,
 	useRef,
 	useState,
 } from 'react';
 import { inputClassName } from '../input.js';
+import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export interface TextAreaProps
 	extends Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> {
@@ -21,6 +21,8 @@ export interface TextAreaProps
 	autoSelect?: boolean;
 	// if auto-size, pad the height by this many px
 	padBottomPixels?: number;
+	placeholders?: string[];
+	placeholdersIntervalMs?: number;
 }
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
@@ -33,6 +35,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 			rows,
 			padBottomPixels = 0,
 			onChange,
+			placeholder,
+			placeholders,
+			placeholdersIntervalMs = 5000,
 			...rest
 		},
 		ref,
@@ -78,6 +83,11 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 			[autoSelect, onFocus],
 		);
 
+		const randomPlaceholder = useRotatingShuffledValue(
+			placeholders ?? [],
+			placeholdersIntervalMs,
+		);
+
 		return (
 			<textarea
 				ref={finalRef}
@@ -94,6 +104,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 				rows={autoSize ? 1 : rows}
 				onChange={handleChange}
 				onFocus={handleFocus}
+				placeholder={placeholder ?? randomPlaceholder}
 				{...rest}
 			/>
 		);

package/src/hooks/useRotatingShuffledValue.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export function useRotatingShuffledValue<T>(
+	options: T[],
+	intervalMs = 5000,
+): T | undefined {
+	const [selected, setSelected] = useState<T | undefined>(
+		options ? options[Math.floor(Math.random() * options.length)] : undefined,
+	);
+	useEffect(() => {
+		if (options) {
+			const interval = setInterval(() => {
+				setSelected(options[Math.floor(Math.random() * options.length)]);
+			}, intervalMs);
+			return () => clearInterval(interval);
+		}
+	}, [options, intervalMs]);
+
+	return selected;
+}

package/src/index.ts

@@ -1,2 +1,5 @@
 export { clsx } from 'clsx';
 export { toast } from 'react-hot-toast';
+
+export * from './hooks.js';
+export * from './components/index.js';

package/src/uno.preset.ts

@@ -465,9 +465,9 @@ export default function presetAglio({
 					--palette-blue-00: #00354a;
 					--palette-purple-90: #f1efff;
 					--palette-purple-80: #e0e0ff;
-					--palette-purple-70: #bdc2ff;
-					--palette-purple-60: #a0a8ff;
-					--palette-purple-50: #7c87f3;
+					--palette-purple-70: #c8cdff;
+					--palette-purple-60: #aab1ff;
+					--palette-purple-50: #8490f4;
 					--palette-purple-40: #6d78d7;
 					--palette-purple-30: #6068c0;
 					--palette-purple-20: #5a62a7;