@a-type/ui 4.1.1 → 4.1.3

package/dist/esm/components/quickAction/QuickAction.js

@@ -13,19 +13,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog } from '@base-ui/react/dialog';
 import clsx from 'clsx';
-import { AnimatePresence } from 'motion/react';
 import { createContext, useContext, useId } from 'react';
 import { Button } from '../button/Button.js';
 const QuickActionIdContext = createContext('qab');
-export const QuickActionRoot = ({ children, }) => {
+export const QuickActionRoot = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
     const id = useId();
-    return (_jsx(Dialog.Root, { children: _jsx(QuickActionIdContext.Provider, { value: id.replace(/:/g, ''), children: children }) }));
-};
-const transition = {
-    type: 'spring',
-    damping: 25,
-    stiffness: 300,
-    mass: 0.5,
+    return (_jsx(Dialog.Root, Object.assign({}, props, { children: _jsx(QuickActionIdContext.Provider, { value: id.replace(/:/g, ''), children: children }) })));
 };
 const QuickActionTrigger = (_a) => {
     var { className, emphasis = 'primary', children } = _a, props = __rest(_a, ["className", "emphasis", "children"]);
@@ -40,14 +34,14 @@ const QuickActionTrigger = (_a) => {
 };
 const QuickActionContent = ({ children, className, align = 'center', }) => {
     const layoutId = useContext(QuickActionIdContext);
-    return (_jsx(Dialog.Portal, { children: _jsx(AnimatePresence, { children: _jsx(Dialog.Popup, { className: clsx('layer-components:contain-layout layer-components:border-1 layer-components:rounded-md layer-components:border-solid layer-components:shadow-lg layer-components:transition-all layer-components:bg-white layer-components:border-black', 'layer-components:fixed layer-components:bottom-[anchor(bottom)] layer-components:overflow-clip', {
-                    '[justify-self:anchor-center]': align === 'center',
-                    'left-[anchor(left)]': align === 'start',
-                    'right-[anchor(right)]': align === 'end',
-                }, 'data-[starting-style]:[will-change:width,height,transform] data-[starting-style]:h-[anchor-size(height)] data-[starting-style]:w-[anchor-size(width)] data-[starting-style]:rounded-200px data-[starting-style]:opacity-0', 'layer-components:[&[data-starting-style]>*]:opacity-0', 'data-[ending-style]:[will-change:width,height,transform] data-[ending-style]:h-[anchor-size(height)] data-[ending-style]:w-[anchor-size(width)] data-[ending-style]:rounded-200px data-[ending-style]:opacity-80', 'layer-components:[&[data-ending-style]>*]:opacity-0', className), style: {
-                    // @ts-ignore
-                    'position-anchor': `--${layoutId}`,
-                }, children: children }) }) }));
+    return (_jsx(Dialog.Portal, { children: _jsx(Dialog.Popup, { className: clsx('layer-components:contain-layout layer-components:border-1 layer-components:rounded-md layer-components:border-solid layer-components:shadow-lg layer-components:transition-all layer-components:bg-white layer-components:border-black', 'layer-components:fixed layer-components:bottom-[anchor(bottom)] layer-components:overflow-clip', {
+                '[justify-self:anchor-center]': align === 'center',
+                'left-[anchor(left)]': align === 'start',
+                'right-[anchor(right)]': align === 'end',
+            }, 'data-[starting-style]:[will-change:width,height,transform] data-[starting-style]:h-[anchor-size(height)] data-[starting-style]:w-[anchor-size(width)] data-[starting-style]:rounded-200px data-[starting-style]:opacity-0', 'layer-components:[&[data-starting-style]>*]:opacity-0', 'data-[ending-style]:[will-change:width,height,transform] data-[ending-style]:h-[anchor-size(height)] data-[ending-style]:w-[anchor-size(width)] data-[ending-style]:rounded-200px data-[ending-style]:opacity-80', 'layer-components:[&[data-ending-style]>*]:opacity-0', className), style: {
+                // @ts-ignore
+                'position-anchor': `--${layoutId}`,
+            }, children: children }) }));
 };
 export const QuickAction = Object.assign(QuickActionRoot, {
     Trigger: QuickActionTrigger,

package/dist/esm/components/quickAction/QuickAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,eAAe,EAAc,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,MAAM,oBAAoB,GAAG,aAAa,CAAS,KAAK,CAAC,CAAC;AAE1D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC/B,QAAQ,GAGR,EAAE,EAAE;IACJ,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,OAAO,CACN,KAAC,MAAM,CAAC,IAAI,cACX,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,YACxD,QAAQ,GACsB,GACnB,CACd,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,UAAU,GAAe;IAC9B,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,GAAG;CACT,CAAC;AAGF,MAAM,kBAAkB,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EAC3B,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,QAAQ,OAEiB,EADtB,KAAK,cAJmB,qCAK3B,CADQ;IAER,MAAM,QAAQ,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,KAAC,MAAM,CAAC,OAAO,oBACV,KAAK,IACT,MAAM,EAAE,CAAC,EAAyB,EAAE,EAAE;gBAA7B,EAAE,KAAK,EAAE,CAAC,OAAe,EAAV,QAAQ,cAAvB,SAAyB,CAAF;YAAO,OAAA,CACtC,KAAC,MAAM,kBACN,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,QAAQ,IACd,QAAQ,IACZ,SAAS,EAAE,IAAI,CACd,0FAA0F,EAC1F,SAAS,CACT,EACD,KAAK,EAAE;oBACN,aAAa;oBACb,UAAU,EAAE,KAAK,QAAQ,EAAE;iBAC3B,IACA,CACF,CAAA;SAAA,YAEA,QAAQ,IACO,CACjB,CAAC;AACH,CAAC,CAAC;AAOF,MAAM,kBAAkB,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,QAAQ,GACS,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,KAAC,MAAM,CAAC,MAAM,cACb,KAAC,eAAe,cACf,KAAC,MAAM,CAAC,KAAK,IACZ,SAAS,EAAE,IAAI,CACd,mHAAmH,EACnH,gEAAgE,EAChE;oBACC,8BAA8B,EAAE,KAAK,KAAK,QAAQ;oBAClD,qBAAqB,EAAE,KAAK,KAAK,OAAO;oBACxC,uBAAuB,EAAE,KAAK,KAAK,KAAK;iBACxC,EACD,qIAAqI,EACrI,uDAAuD,EACvD,oIAAoI,EACpI,qDAAqD,EACrD,SAAS,CACT,EACD,KAAK,EAAE;oBACN,aAAa;oBACb,iBAAiB,EAAE,KAAK,QAAQ,EAAE;iBAClC,YAEA,QAAQ,GACK,GACE,GACH,CAChB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACzD,OAAO,EAAE,kBAAkB;IAC3B,OAAO,EAAE,kBAAkB;CAC3B,CAAC,CAAC"}
+{"version":3,"file":"QuickAction.js","sourceRoot":"","sources":["../../../../src/components/quickAction/QuickAction.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAmB,MAAM,uBAAuB,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,MAAM,oBAAoB,GAAG,aAAa,CAAS,KAAK,CAAC,CAAC;AAE1D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAK/B,EAAE,EAAE;QAL2B,EAC/B,QAAQ,OAIR,EAHG,KAAK,cAFuB,YAG/B,CADQ;IAIR,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,OAAO,CACN,KAAC,MAAM,CAAC,IAAI,oBAAK,KAAK,cACrB,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,YACxD,QAAQ,GACsB,IACnB,CACd,CAAC;AACH,CAAC,CAAC;AAGF,MAAM,kBAAkB,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EAC3B,SAAS,EACT,QAAQ,GAAG,SAAS,EACpB,QAAQ,OAEiB,EADtB,KAAK,cAJmB,qCAK3B,CADQ;IAER,MAAM,QAAQ,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,KAAC,MAAM,CAAC,OAAO,oBACV,KAAK,IACT,MAAM,EAAE,CAAC,EAAyB,EAAE,EAAE;gBAA7B,EAAE,KAAK,EAAE,CAAC,OAAe,EAAV,QAAQ,cAAvB,SAAyB,CAAF;YAAO,OAAA,CACtC,KAAC,MAAM,kBACN,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,QAAQ,IACd,QAAQ,IACZ,SAAS,EAAE,IAAI,CACd,0FAA0F,EAC1F,SAAS,CACT,EACD,KAAK,EAAE;oBACN,aAAa;oBACb,UAAU,EAAE,KAAK,QAAQ,EAAE;iBAC3B,IACA,CACF,CAAA;SAAA,YAEA,QAAQ,IACO,CACjB,CAAC;AACH,CAAC,CAAC;AAOF,MAAM,kBAAkB,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,QAAQ,GACS,EAAE,EAAE;IAC7B,MAAM,QAAQ,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAClD,OAAO,CACN,KAAC,MAAM,CAAC,MAAM,cACb,KAAC,MAAM,CAAC,KAAK,IACZ,SAAS,EAAE,IAAI,CACd,mHAAmH,EACnH,gEAAgE,EAChE;gBACC,8BAA8B,EAAE,KAAK,KAAK,QAAQ;gBAClD,qBAAqB,EAAE,KAAK,KAAK,OAAO;gBACxC,uBAAuB,EAAE,KAAK,KAAK,KAAK;aACxC,EACD,qIAAqI,EACrI,uDAAuD,EACvD,oIAAoI,EACpI,qDAAqD,EACrD,SAAS,CACT,EACD,KAAK,EAAE;gBACN,aAAa;gBACb,iBAAiB,EAAE,KAAK,QAAQ,EAAE;aAClC,YAEA,QAAQ,GACK,GACA,CAChB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACzD,OAAO,EAAE,kBAAkB;IAC3B,OAAO,EAAE,kBAAkB;CAC3B,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/combobox/Combobox.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { Box } from '../box/Box.js';
-import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
 import { Combobox } from './Combobox.js';
 
@@ -101,7 +100,17 @@ export const Default: Story = {
 				<ExampleCombobox.Input
 					icon={<Icon name="food" />}
 					className="w-[200px]"
-				/>
+				>
+					{creatable && (
+						<ExampleCombobox.CreateButton
+							size="small"
+							emphasis="primary"
+							className="aspect-1 h-full"
+						>
+							<Icon name="plus" />
+						</ExampleCombobox.CreateButton>
+					)}
+				</ExampleCombobox.Input>
 				<ExampleCombobox.Content arrow={arrow}>
 					<ExampleCombobox.List>
 						{(item) => (
@@ -217,9 +226,13 @@ export const NotPopover: Story = {
 			>
 				<Box border p surface="white" col>
 					<GroupedCombobox.Input disableCaret className="w-full" disableClear>
-						<Button size="small" emphasis="primary" className="aspect-1 h-full">
+						<GroupedCombobox.CreateButton
+							size="small"
+							emphasis="primary"
+							className="aspect-1 h-full"
+						>
 							<Icon name="plus" />
-						</Button>
+						</GroupedCombobox.CreateButton>
 					</GroupedCombobox.Input>
 					<GroupedCombobox.List>
 						{(group) => (

package/src/components/combobox/Combobox.tsx

@@ -1,4 +1,3 @@
-import { ButtonProps } from '@base-ui/react/button';
 import * as BaseCombobox from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import {
@@ -13,6 +12,7 @@ import {
 import { withClassName } from '../../hooks.js';
 import { PaletteName } from '../../uno/index.js';
 import { Button } from '../button/Button.js';
+import { ButtonProps } from '../button/index.js';
 import { Chip, ChipProps } from '../chip/Chip.js';
 import { Icon } from '../icon/Icon.js';
 import { Input, InputProps } from '../input/Input.js';
@@ -145,7 +145,7 @@ export function ComboboxComposedInput({
 export const ComboboxValueContext = createContext<any>(null);
 
 const ComboboxCreatableContext = createContext<{
-	onInputEnter?: (value: string) => void;
+	onCreate?: (value: string) => void;
 	inputValue: string;
 	showCreatableItem?: boolean;
 }>({
@@ -214,7 +214,7 @@ const ComboboxRoot = ({
 		highlightedItemRef.current = item;
 		onItemHighlighted?.(item, ev);
 	};
-	const onInputEnter = onCreate
+	const handleCreate = onCreate
 		? (value: string) => {
 				if (highlightedItemRef.current) return;
 				onCreate(value);
@@ -245,7 +245,11 @@ const ComboboxRoot = ({
 	return (
 		<ComboboxAnchorContext.Provider value={anchorRef}>
 			<ComboboxCreatableContext.Provider
-				value={{ inputValue, onInputEnter, showCreatableItem: canCreate }}
+				value={{
+					inputValue,
+					onCreate: handleCreate,
+					showCreatableItem: canCreate,
+				}}
 			>
 				<ComboboxValueContext.Provider value={props.value || null}>
 					<BaseCombobox.Combobox.Root
@@ -306,7 +310,7 @@ function ComboboxInput({
 	onKeyDown: userOnKeyDown,
 	...outerProps
 }: ComboboxInputProps) {
-	const { onInputEnter } = useContext(ComboboxCreatableContext);
+	const { onCreate: onInputEnter } = useContext(ComboboxCreatableContext);
 	const handleKeyDown: ComboboxInputProps['onKeyDown'] = (ev) => {
 		if (ev.key === 'Enter' && onInputEnter) {
 			onInputEnter(ev.currentTarget.value);
@@ -332,6 +336,21 @@ function ComboboxInput({
 	);
 }
 
+function ComboboxCreateButton({ onClick, ...props }: ButtonProps) {
+	const { onCreate: onInputEnter, inputValue } = useContext(
+		ComboboxCreatableContext,
+	);
+	return (
+		<Button
+			onClick={(ev) => {
+				onInputEnter?.(inputValue);
+				onClick?.(ev);
+			}}
+			{...props}
+		/>
+	);
+}
+
 const ComboboxAnchorContext =
 	createContext<RefObject<HTMLDivElement | null> | null>(null);
 
@@ -620,6 +639,7 @@ const baseSubComponents = {
 	Chips: ComboboxChips,
 	Chip: ComboboxChip,
 	ChipsList: ComboboxChipsList,
+	CreateButton: ComboboxCreateButton,
 
 	Value: BaseCombobox.Combobox.Value,
 	MultiValue: ComboboxMultiValue,

package/src/components/input/Input.tsx

@@ -11,7 +11,6 @@ import { inputInfo } from '../../systems/inputs.js';
 
 export const inputClassName = clsx(
 	'layer-components:(min-w-60px flex-1 select-auto border-none px-0 py-1.25 text-md font-inherit bg-transparent)',
-	'layer-components:md:(min-w-120px)',
 	'layer-components:placeholder:(color-gray-dark)',
 	'layer-components:focus:(outline-none)',
 	'layer-components:focus-visible:(outline-none)',

package/src/components/quickAction/QuickAction.tsx

@@ -1,6 +1,5 @@
-import { Dialog } from '@base-ui/react/dialog';
+import { Dialog, DialogRootProps } from '@base-ui/react/dialog';
 import clsx from 'clsx';
-import { AnimatePresence, Transition } from 'motion/react';
 import { createContext, useContext, useId } from 'react';
 import { Button, ButtonProps } from '../button/Button.js';
 
@@ -8,12 +7,13 @@ const QuickActionIdContext = createContext<string>('qab');
 
 export const QuickActionRoot = ({
 	children,
-}: {
-	children: React.ReactNode;
+	...props
+}: Omit<DialogRootProps, 'children'> & {
+	children?: React.ReactNode;
 }) => {
 	const id = useId();
 	return (
-		<Dialog.Root>
+		<Dialog.Root {...props}>
 			<QuickActionIdContext.Provider value={id.replace(/:/g, '')}>
 				{children}
 			</QuickActionIdContext.Provider>
@@ -21,13 +21,6 @@ export const QuickActionRoot = ({
 	);
 };
 
-const transition: Transition = {
-	type: 'spring',
-	damping: 25,
-	stiffness: 300,
-	mass: 0.5,
-};
-
 export type QuickActionTriggerProps = ButtonProps;
 const QuickActionTrigger = ({
 	className,
@@ -73,30 +66,28 @@ const QuickActionContent = ({
 	const layoutId = useContext(QuickActionIdContext);
 	return (
 		<Dialog.Portal>
-			<AnimatePresence>
-				<Dialog.Popup
-					className={clsx(
-						'layer-components:(contain-layout border-1 rounded-md border-solid shadow-lg transition-all bg-white border-black)',
-						'layer-components:(fixed bottom-[anchor(bottom)] overflow-clip)',
-						{
-							'[justify-self:anchor-center]': align === 'center',
-							'left-[anchor(left)]': align === 'start',
-							'right-[anchor(right)]': align === 'end',
-						},
-						'data-[starting-style]:([will-change:width,height,transform] h-[anchor-size(height)] w-[anchor-size(width)] rounded-200px opacity-0)',
-						'layer-components:[&[data-starting-style]>*]:opacity-0',
-						'data-[ending-style]:([will-change:width,height,transform] h-[anchor-size(height)] w-[anchor-size(width)] rounded-200px opacity-80)',
-						'layer-components:[&[data-ending-style]>*]:opacity-0',
-						className,
-					)}
-					style={{
-						// @ts-ignore
-						'position-anchor': `--${layoutId}`,
-					}}
-				>
-					{children}
-				</Dialog.Popup>
-			</AnimatePresence>
+			<Dialog.Popup
+				className={clsx(
+					'layer-components:(contain-layout border-1 rounded-md border-solid shadow-lg transition-all bg-white border-black)',
+					'layer-components:(fixed bottom-[anchor(bottom)] overflow-clip)',
+					{
+						'[justify-self:anchor-center]': align === 'center',
+						'left-[anchor(left)]': align === 'start',
+						'right-[anchor(right)]': align === 'end',
+					},
+					'data-[starting-style]:([will-change:width,height,transform] h-[anchor-size(height)] w-[anchor-size(width)] rounded-200px opacity-0)',
+					'layer-components:[&[data-starting-style]>*]:opacity-0',
+					'data-[ending-style]:([will-change:width,height,transform] h-[anchor-size(height)] w-[anchor-size(width)] rounded-200px opacity-80)',
+					'layer-components:[&[data-ending-style]>*]:opacity-0',
+					className,
+				)}
+				style={{
+					// @ts-ignore
+					'position-anchor': `--${layoutId}`,
+				}}
+			>
+				{children}
+			</Dialog.Popup>
 		</Dialog.Portal>
 	);
 };