@a-type/ui 5.0.21 → 5.0.22

package/dist/esm/components/toggleGroup/toggleGroup.stories.d.ts

@@ -2,10 +2,14 @@ import type { StoryObj } from '@storybook/react';
 import { ToggleGroup } from './toggleGroup.js';
 declare const meta: {
     title: string;
-    component: import("react").FunctionComponent<import("./toggleGroup.js").ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
-        Item: import("react").FunctionComponent<import("@base-ui/react/toggle").ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
+    component: import("react").FunctionComponent<import("@base-ui/react").ToggleGroup.Props<string> & import("react").RefAttributes<HTMLDivElement>> & {
+        Item: import("react").FunctionComponent<import("@base-ui/react").Toggle.Props<string> & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    argTypes: {
+        multiple: {
+            type: "boolean";
+        };
     };
-    argTypes: {};
     parameters: {
         controls: {
             expanded: boolean;

package/dist/esm/components/toggleGroup/toggleGroup.stories.js

@@ -4,7 +4,11 @@ import { ToggleGroup } from './toggleGroup.js';
 const meta = {
     title: 'Components/ToggleGroup',
     component: ToggleGroup,
-    argTypes: {},
+    argTypes: {
+        multiple: {
+            type: 'boolean',
+        },
+    },
     parameters: {
         controls: { expanded: true },
     },

package/dist/esm/components/toggleGroup/toggleGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleGroup.stories.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACkC,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,WAAW,oBAAK,IAAI,eACpB,KAAC,WAAW,CAAC,IAAI,2BAA4B,EAC7C,KAAC,WAAW,CAAC,IAAI,2BAA4B,EAC7C,KAAC,WAAW,CAAC,IAAI,2BAA4B,KAChC,CACd,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"toggleGroup.stories.js","sourceRoot":"","sources":["../../../../src/components/toggleGroup/toggleGroup.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,SAAS;SACf;KACD;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACkC,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,WAAW,oBAAK,IAAI,eACpB,KAAC,WAAW,CAAC,IAAI,2BAA4B,EAC7C,KAAC,WAAW,CAAC,IAAI,2BAA4B,EAC7C,KAAC,WAAW,CAAC,IAAI,2BAA4B,KAChC,CACd,CAAC;IACH,CAAC;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "5.0.21",
+  "version": "5.0.22",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -40,8 +40,8 @@
     "unocss": "^66"
   },
   "dependencies": {
-    "@a-type/utils": "^1.1.4",
-    "@base-ui/react": "^1.0.0",
+    "@a-type/utils": "^1.1.9",
+    "@base-ui/react": "^1.4.0",
     "@emotion/is-prop-valid": "^1.4.0",
     "@unocss/preset-mini": "66.5.4",
     "@unocss/preset-wind3": "66.5.4",

package/src/components/colorMode/ColorModeToggle.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../icon/Icon.js';
 import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
 
 export interface ColorModeToggleProps
-	extends Omit<ToggleGroupProps, 'type' | 'onValueChange' | 'value'> {
+	extends Omit<ToggleGroupProps<string>, 'type' | 'onValueChange' | 'value'> {
 	value?: 'light' | 'dark' | 'system';
 	onValueChange?: (value: 'light' | 'dark' | 'system', event: any) => void;
 }
@@ -23,7 +23,7 @@ export function ColorModeToggle({
 			value={[value]}
 			onValueChange={([value], ev) => {
 				if (userOnValueChange) {
-					userOnValueChange(value, ev);
+					userOnValueChange(value as 'light' | 'dark' | 'system', ev);
 				} else {
 					setColorMode(value as 'light' | 'dark' | 'system');
 				}

package/src/components/combobox/Combobox.tsx

@@ -118,7 +118,8 @@ export function ComboboxComposedInput({
 					className,
 				)}
 			>
-				<Input.Input
+				<BaseCombobox.Combobox.Input
+					render={<Input.Input />}
 					autoComplete="off"
 					ref={ref}
 					className={clsx(
@@ -137,7 +138,12 @@ export function ComboboxComposedInput({
 	return (
 		<Input.Border ref={ref} className={className}>
 			{icon}
-			<Input.Input autoComplete="off" minLength={3} {...props} />
+			<BaseCombobox.Combobox.Input
+				render={<Input.Input />}
+				autoComplete="off"
+				minLength={3}
+				{...props}
+			/>
 			{clearAndCaret}
 			{children}
 		</Input.Border>

package/src/components/forms/ToggleGroupField.tsx

@@ -3,14 +3,15 @@ import { ToggleGroup, ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
 import { FieldLabel } from './FieldLabel.js';
 import { FieldRoot } from './TextField.js';
 
-export type ToggleGroupFieldProps = ToggleGroupProps & {
-	name: string;
-	label?: string;
-	required?: boolean;
-	className?: string;
-	id?: string;
-	type?: 'single' | 'multiple';
-};
+export type ToggleGroupFieldProps<Value extends string> =
+	ToggleGroupProps<Value> & {
+		name: string;
+		label?: string;
+		required?: boolean;
+		className?: string;
+		id?: string;
+		type?: 'single' | 'multiple';
+	};
 
 function ToggleGroupFieldDefault({
 	name,
@@ -18,9 +19,10 @@ function ToggleGroupFieldDefault({
 	required,
 	className,
 	type = 'single',
+	multiple,
 	id,
 	...props
-}: ToggleGroupFieldProps) {
+}: ToggleGroupFieldProps<string>) {
 	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
@@ -29,12 +31,13 @@ function ToggleGroupFieldDefault({
 			<ToggleGroup
 				{...fieldProps}
 				onValueChange={(v) => {
-					if (type === 'multiple') {
+					if (multiple || type === 'multiple') {
 						tools.setValue(v);
 					} else {
 						tools.setValue(v[0]);
 					}
 				}}
+				multiple={multiple || type === 'multiple'}
 				{...props}
 				id={id}
 				className={className}

package/src/components/toasts/toasts.stories.tsx

@@ -122,6 +122,19 @@ export const Default: Story = {
 				>
 					Show Rich Toast
 				</Button>
+				<Button
+					onClick={() => {
+						toast({
+							id: 'unique-toast-id',
+							title: 'Unique Toast',
+							description:
+								"This toast has a unique ID. If you click the button multiple times, it won't create multiple toasts, but will update the existing one.",
+							timeout: 20_000,
+						});
+					}}
+				>
+					Show Unique Toast
+				</Button>
 			</Box>
 		);
 	},

package/src/components/toasts/toasts.tsx

@@ -210,6 +210,7 @@ function baseToast(
 	maybeOptions?: ToastOptions,
 ) {
 	const finalOptions = toOptions(messageOrOptions, maybeOptions);
+	console.log('finalOptions', finalOptions);
 	return manager.add(finalOptions);
 }
 

package/src/components/toggleGroup/toggleGroup.stories.tsx

@@ -4,7 +4,11 @@ import { ToggleGroup } from './toggleGroup.js';
 const meta = {
 	title: 'Components/ToggleGroup',
 	component: ToggleGroup,
-	argTypes: {},
+	argTypes: {
+		multiple: {
+			type: 'boolean',
+		},
+	},
 	parameters: {
 		controls: { expanded: true },
 	},