@a-type/ui 3.0.29 → 3.0.31

package/src/components/forms/EmojiField.tsx

@@ -0,0 +1,64 @@
+import clsx from 'clsx';
+import { useField } from 'formik';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { Box } from '../box/Box.js';
+import { Button, ButtonProps } from '../button/Button.js';
+import { EmojiPicker } from '../emojiPicker/EmojiPicker.js';
+import { Icon } from '../icon/Icon.js';
+import { Popover } from '../popover/Popover.js';
+import { HorizontalFieldLabel } from './FieldLabel.js';
+
+export interface EmojiFieldProps extends ButtonProps {
+	name: string;
+	label?: string;
+	required?: string;
+}
+
+export function EmojiField({
+	name,
+	label,
+	className,
+	required,
+	id: providedId,
+	...rest
+}: EmojiFieldProps) {
+	const [props, _, tools] = useField({ name });
+	const id = useIdOrGenerated(providedId);
+	return (
+		<Box gap="sm" className={className}>
+			<Popover>
+				<Popover.Trigger asChild>
+					<Button
+						id={id}
+						aria-label="Select emoji"
+						size="small"
+						className={clsx('p-0 transition-color', className)}
+						{...rest}
+					>
+						<Button.Icon className="text-[19px] w-touch h-touch flex items-center justify-center">
+							{props.value || <Icon name="smile" />}
+						</Button.Icon>
+					</Button>
+				</Popover.Trigger>
+				<Popover.Content>
+					<EmojiPicker
+						onValueChange={(v) => {
+							tools.setValue(v);
+						}}
+						onClear={
+							required
+								? undefined
+								: () => {
+										tools.setValue('');
+								  }
+						}
+						id={id}
+					/>
+				</Popover.Content>
+			</Popover>
+			{label && (
+				<HorizontalFieldLabel htmlFor={id}>{label}</HorizontalFieldLabel>
+			)}
+		</Box>
+	);
+}

package/src/components/forms/FormikForm.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
 import { FormikForm } from './FormikForm.js';
 import { NumberStepperField } from './NumberStepperField.js';
 import { SubmitButton } from './SubmitButton.js';
@@ -36,6 +37,7 @@ export const Default: Story = {
 					tos: false,
 					newsletter: false,
 					plan: 'basic',
+					emoji: '',
 				}}
 				{...args}
 			>
@@ -56,6 +58,7 @@ export const Default: Story = {
 						Enterprise
 					</ToggleGroupField.Item>
 				</ToggleGroupField>
+				<EmojiField name="emoji" label="Favorite Emoji" />
 				<SubmitButton>Sign up</SubmitButton>
 			</FormikForm>
 		);

package/src/components/forms/FormikForm.tsx

@@ -1,6 +1,7 @@
 import { Formik, FormikConfig, FormikHelpers, FormikValues } from 'formik';
 import { useCallback } from 'react';
 import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
 import { Form } from './Form.js';
 import { NumberStepperField } from './NumberStepperField.js';
 import { SubmitButton } from './SubmitButton.js';
@@ -56,4 +57,5 @@ export const FormikForm = Object.assign(FormikFormRoot, {
 	CheckboxField,
 	SwitchField,
 	ToggleGroupField,
+	EmojiField,
 });

package/src/uno/preflights/globals.ts

@@ -1,14 +1,22 @@
-import { Preflight } from 'unocss';
 import { preflight } from './_util.js';
 
-export const globalPreflight: Preflight = preflight({
-	getCSS: () => `
+export interface GlobalsPreflightConfig {
+	disableZIndexes?: boolean;
+}
+
+export const globalPreflight = (config: GlobalsPreflightConfig) =>
+	preflight({
+		getCSS: () => `
 :root {
 	--font-sans: "Inter", sans-serif;
 	--font-serif: "Domine", serif;
 	--font-title: "Inter", sans-serif;
 	--font-default: var(--font-sans, sans-serif);
 
+	${
+		config.disableZIndexes
+			? ''
+			: `
 	--z-now-playing: 40;
 	--z-nav: 50;
 	--z-menu: 100;
@@ -16,6 +24,8 @@ export const globalPreflight: Preflight = preflight({
 	--z-dialog: 1000;
 	--z-tooltip: 10000;
 	--z-overdraw: 100000;
+	`
+	}
 
 	--un-shadow-color: #000000;
 	--un-shadow-opacity: 10%;
@@ -91,4 +101,4 @@ a {
 	inherits: false;
 }
 `,
-});
+	});

package/src/uno/preflights/index.ts

@@ -7,15 +7,17 @@ import {
 } from './customization.js';
 import { darkModePreflight } from './dark.js';
 import { fontsPreflight, FontsPreflightOptions } from './fonts.js';
-import { globalPreflight } from './globals.js';
+import { globalPreflight, GlobalsPreflightConfig } from './globals.js';
 import { layerPreflight } from './layers.js';
 
 export const preflights = (
-	config: ThemeCustomizationConfig & FontsPreflightOptions,
+	config: ThemeCustomizationConfig &
+		FontsPreflightOptions &
+		GlobalsPreflightConfig,
 ): Preflight<any>[] => [
 	layerPreflight,
 	basePreflight,
-	globalPreflight,
+	globalPreflight(config),
 	colorPreflight,
 	darkModePreflight,
 	customizationPreflight(config),

package/src/uno/uno.preset.ts

@@ -2,6 +2,7 @@ import presetWind3 from '@unocss/preset-wind3';
 import { Preset } from 'unocss';
 import { ThemeCustomizationConfig } from './preflights/customization.js';
 import { FontsPreflightOptions } from './preflights/fonts.js';
+import { GlobalsPreflightConfig } from './preflights/globals.js';
 import { preflights } from './preflights/index.js';
 import { rules } from './rules/index.js';
 import { shortcuts } from './shortcuts/index.js';
@@ -10,7 +11,8 @@ import { variants } from './variants/index.js';
 
 export default function presetAtype(
 	config: ThemeCustomizationConfig &
-		FontsPreflightOptions & {
+		FontsPreflightOptions &
+		GlobalsPreflightConfig & {
 			noPreflight?: boolean;
 		} = {
 		interFontLocation: