@a-type/ui 3.0.28 → 3.0.30

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/components/slider/Slider.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import clsx from 'clsx';
+import { useState } from 'react';
 import { Slider } from './Slider.js';
 
 const meta = {
@@ -15,3 +17,41 @@ export default meta;
 type Story = StoryObj<typeof Slider>;
 
 export const Default: Story = {};
+
+export const Vertical: Story = {
+	args: {
+		orientation: 'vertical',
+		style: { height: '200px' },
+	},
+};
+
+export const CustomStyles: Story = {
+	args: {
+		orientation: 'vertical',
+		style: { height: '200px' },
+		min: -2,
+		max: 2,
+		defaultValue: [0],
+	},
+	render: (args) => {
+		const [value, setValue] = useState([0]);
+		return (
+			<Slider.Root value={value} onValueChange={setValue} {...args}>
+				<Slider.Track
+					className={clsx({
+						'bg-attention': value[0] === -2,
+						'bg-attention-light': value[0] === -1,
+						'bg-main': value[0] === 0,
+						'bg-success-light': value[0] === 1,
+						'bg-success': value[0] === 2,
+					})}
+				/>
+				<Slider.Thumb className="w-24px h-24px">
+					<div className="text-lg">
+						{['😭', '😔', '😐', '😊', '😃'][value[0] + 2]}
+					</div>
+				</Slider.Thumb>
+			</Slider.Root>
+		);
+	},
+};

package/src/components/slider/Slider.tsx

@@ -6,18 +6,21 @@ import { PaletteName } from '../../uno/index.js';
 export const SliderRoot = withClassName(
 	SliderPrimitive.Root,
 	'layer-components:(relative flex items-center select-none touch-none w-full h-30px translate-z-0)',
+	'layer-variants:[&[data-orientation=vertical]]:(flex-col h-full w-30px)',
 );
 export const SliderTrack = withClassName(
 	SliderPrimitive.Track,
-	'layer-components:(bg-transparent relative grow rounded-lg h-9px border border-1 border-solid border-black)',
+	'layer-components:(bg-transparent relative grow rounded-lg h-9px border border-1 border-solid border-black transition-colors)',
+	'layer-variants:[&[data-orientation=vertical]]:(w-9px h-full flex-1)',
 );
 export const SliderRange = withClassName(
 	SliderPrimitive.Range,
-	'layer-components:(absolute bg-main rounded-lg h-full)',
+	'layer-components:(absolute bg-main rounded-lg h-full transition-colors)',
+	'layer-variants:[&[data-orientation=vertical]]:(w-full h-auto)',
 );
 export const SliderThumb = withClassName(
 	SliderPrimitive.Thumb,
-	'layer-components:(block cursor-pointer w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-all)',
+	'layer-components:(flex items-center justify-center leading-none cursor-pointer w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-all)',
 	'layer-components:hover:(shadow-md)',
 	'layer-components:active:(shadow-lg ring-4 ring-main-dark ring-opacity-50 bg-main-light)',
 	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent ring-opacity-50 outline-none bg-main-light)',