paris 0.17.9 → 0.18.0

package/src/stories/informationaltooltip/InformationalTooltip.tsx

@@ -1,13 +1,13 @@
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { useState } from 'react';
-import { clsx } from 'clsx';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { clsx } from 'clsx';
 import type { HTMLMotionProps } from 'framer-motion';
-import { motion, AnimatePresence } from 'framer-motion';
-import styles from './InformationalTooltip.module.scss';
-import { TextWhenString } from '../utility';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { useState } from 'react';
 import { Icon, Info } from '../icon';
-import { pvar, pget } from '../theme';
+import { pget, pvar } from '../theme';
+import { TextWhenString } from '../utility';
+import styles from './InformationalTooltip.module.scss';
 
 export type InformationalTooltipProps = {
     /**
@@ -57,10 +57,10 @@ export type InformationalTooltipProps = {
      */
     overrides?: {
         /** The main tooltip element  */
-        tooltip?: HTMLMotionProps<'div'>,
+        tooltip?: HTMLMotionProps<'div'>;
         /** The heading element */
-        heading?: ComponentPropsWithoutRef<'div'>,
-    }
+        heading?: ComponentPropsWithoutRef<'div'>;
+    };
 };
 
 /**
@@ -112,13 +112,8 @@ export const InformationalTooltip: FC<InformationalTooltipProps> = ({
     };
 
     return (
-        <RadixTooltip.Provider
-            delayDuration={parseCSSTime(pget('new.animations.duration.normal'))}
-        >
-            <RadixTooltip.Root
-                open={isOpen}
-                onOpenChange={setOpen}
-            >
+        <RadixTooltip.Provider delayDuration={parseCSSTime(pget('new.animations.duration.normal'))}>
+            <RadixTooltip.Root open={isOpen} onOpenChange={setOpen}>
                 <RadixTooltip.Trigger
                     onClick={() => {
                         if (!disableClick) {
@@ -127,27 +122,27 @@ export const InformationalTooltip: FC<InformationalTooltipProps> = ({
                     }}
                 >
                     {!trigger ? (
-                        <Icon icon={Info} size={14} className={styles.icon} style={{ color: pvar('new.colors.contentSecondary') }} />
+                        <Icon
+                            icon={Info}
+                            size={14}
+                            className={styles.icon}
+                            style={{ color: pvar('new.colors.contentSecondary') }}
+                        />
                     ) : (
-                        <>
-                            {trigger}
-                        </>
+                        trigger
                     )}
                 </RadixTooltip.Trigger>
                 <AnimatePresence>
                     {isOpen && (
                         <RadixTooltip.Portal forceMount>
-                            <RadixTooltip.Content
-                                side={side}
-                                sideOffset={sideOffset}
-                                align={align}
-                                asChild
-                            >
+                            <RadixTooltip.Content side={side} sideOffset={sideOffset} align={align} asChild>
                                 <motion.div
                                     initial={{ opacity: 0, y: 3 }}
                                     animate={{ opacity: 1, y: 0 }}
                                     exit={{ opacity: 0, y: 3 }}
-                                    transition={{ duration: parseCSSTime(pget('new.animations.duration.normal')) / 1000 }}
+                                    transition={{
+                                        duration: parseCSSTime(pget('new.animations.duration.normal')) / 1000,
+                                    }}
                                     {...overrides?.tooltip}
                                     className={clsx(styles.tooltip, styles[size], overrides?.tooltip?.className)}
                                 >

package/src/stories/input/Input.stories.ts

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { createElement } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { createElement } from 'react';
 import { Input } from './Input';
 
 const meta: Meta<typeof Input> = {
@@ -69,10 +69,11 @@ export const WithEnhancer: Story = {
         placeholder: 'Mia Dolan',
         label: 'Name',
         description: 'Type your full name here.',
-        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
-            icon: faSearch,
-            width: `${size}px`,
-        }),
+        startEnhancer: ({ size }) =>
+            createElement(FontAwesomeIcon, {
+                icon: faSearch,
+                width: `${size}px`,
+            }),
     },
 };
 
@@ -81,20 +82,18 @@ export const WithEndEnhancer: Story = {
         placeholder: 'Mia Dolan',
         label: 'Name',
         description: 'Type your full name here.',
-        endEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
-            icon: faSearch,
-            width: `${size}px`,
-        }),
+        endEnhancer: ({ size }) =>
+            createElement(FontAwesomeIcon, {
+                icon: faSearch,
+                width: `${size}px`,
+            }),
     },
 };
 
 export const WithCustomLabel: Story = {
     args: {
         placeholder: 'Mia Dolan',
-        label: createElement('span', null, [
-            createElement('b', null, 'Name'),
-            createElement('i', null, ' (optional)'),
-        ]),
+        label: createElement('span', null, [createElement('b', null, 'Name'), createElement('i', null, ' (optional)')]),
         'aria-label': 'Name (optional)',
         description: createElement('span', null, [
             createElement(

package/src/stories/input/Input.tsx

@@ -1,15 +1,15 @@
 'use client';
 
+import { clsx } from 'clsx';
 import type { ComponentPropsWithoutRef, FC, ForwardedRef } from 'react';
 import { forwardRef, useId } from 'react';
-import { clsx } from 'clsx';
-import styles from './Input.module.scss';
-import type { TextProps } from '../text';
-import type { Enhancer } from '../../types/Enhancer';
-import { theme } from '../theme';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import type { Enhancer } from '../../types/Enhancer';
 import type { FieldProps } from '../field';
 import { Field } from '../field';
+import type { TextProps } from '../text';
+import { theme } from '../theme';
+import styles from './Input.module.scss';
 
 export type InputProps = {
     /**
@@ -25,7 +25,29 @@ export type InputProps = {
      * The input type. All HTML5 input types are supported, but some may require additional props to be set for full accessibility or aesthetic.
      * @default text
      */
-    type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    type?:
+        | 'button'
+        | 'checkbox'
+        | 'color'
+        | 'date'
+        | 'datetime-local'
+        | 'email'
+        | 'file'
+        | 'hidden'
+        | 'image'
+        | 'month'
+        | 'number'
+        | 'password'
+        | 'radio'
+        | 'range'
+        | 'reset'
+        | 'search'
+        | 'submit'
+        | 'tel'
+        | 'text'
+        | 'time'
+        | 'url'
+        | 'week';
     /**
      * The placeholder for the input.
      */
@@ -47,7 +69,7 @@ export type InputProps = {
         description?: TextProps<'p'>;
         startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
         endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
-    }
+    };
 } & FieldProps;
 
 /**
@@ -64,94 +86,96 @@ export type InputProps = {
  * ```
  * @constructor
  */
-export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forwardRef(({
-    label,
-    status,
-    type,
-    hideLabel,
-    description,
-    hideDescription,
-    descriptionPosition,
-    startEnhancer,
-    endEnhancer,
-    disabled,
-    overrides,
-    ...props
-}, ref: ForwardedRef<HTMLInputElement>) => {
-    const inputID = useId();
-    return (
-        <Field
-            htmlFor={inputID}
-            label={label}
-            hideLabel={hideLabel}
-            description={description}
-            hideDescription={hideDescription}
-            disabled={disabled}
-            descriptionPosition={descriptionPosition}
-            overrides={{
-                container: {
-                    ...overrides?.container,
-                    className: clsx(
-                        // styles.fieldContainer,
-                        overrides?.container?.className,
-                    ),
-                },
-                label: overrides?.label,
-                description: overrides?.description,
-            }}
-        >
-            <div
-                className={styles.inputContainer}
-                // data-status={status}
-                // data-disabled={disabled}
-                data-status={disabled ? 'disabled' : (status || 'default')}
+export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = forwardRef(
+    (
+        {
+            label,
+            status,
+            type,
+            hideLabel,
+            description,
+            hideDescription,
+            descriptionPosition,
+            startEnhancer,
+            endEnhancer,
+            disabled,
+            overrides,
+            ...props
+        },
+        ref: ForwardedRef<HTMLInputElement>,
+    ) => {
+        const inputID = useId();
+        return (
+            <Field
+                htmlFor={inputID}
+                label={label}
+                hideLabel={hideLabel}
+                description={description}
+                hideDescription={hideDescription}
+                disabled={disabled}
+                descriptionPosition={descriptionPosition}
+                overrides={{
+                    container: {
+                        ...overrides?.container,
+                        className: clsx(
+                            // styles.fieldContainer,
+                            overrides?.container?.className,
+                        ),
+                    },
+                    label: overrides?.label,
+                    description: overrides?.description,
+                }}
             >
-                {!!startEnhancer && (
-                    <div
-                        {...overrides?.startEnhancerContainer}
-                        className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}
-                        data-status={disabled ? 'disabled' : (status || 'default')}
-                    >
-                        {!!startEnhancer && (
-                            <MemoizedEnhancer
-                                enhancer={startEnhancer}
-                                size={parseInt(theme.typography.styles.paragraphSmall.fontSize, 10)}
-                            />
-                        )}
+                <div
+                    className={styles.inputContainer}
+                    // data-status={status}
+                    // data-disabled={disabled}
+                    data-status={disabled ? 'disabled' : status || 'default'}
+                >
+                    {!!startEnhancer && (
+                        <div
+                            {...overrides?.startEnhancerContainer}
+                            className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}
+                            data-status={disabled ? 'disabled' : status || 'default'}
+                        >
+                            {!!startEnhancer && (
+                                <MemoizedEnhancer
+                                    enhancer={startEnhancer}
+                                    size={parseInt(theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                />
+                            )}
+                        </div>
+                    )}
+                    <div className={styles.inputScaleWrapper}>
+                        <input
+                            {...props}
+                            id={inputID}
+                            ref={ref}
+                            type={type || 'text'}
+                            aria-label={typeof label === 'string' ? label : props['aria-label']}
+                            aria-describedby={`${inputID}-description`}
+                            aria-disabled={disabled}
+                            data-status={disabled ? 'disabled' : status || 'default'}
+                            readOnly={disabled}
+                            className={clsx(props.className, styles.input)}
+                        />
                     </div>
-                )}
-                <div className={styles.inputScaleWrapper}>
-                    <input
-                        {...props}
-                        id={inputID}
-                        ref={ref}
-                        type={type || 'text'}
-                        aria-label={typeof label === 'string' ? label : props['aria-label']}
-                        aria-describedby={`${inputID}-description`}
-                        aria-disabled={disabled}
-                        data-status={disabled ? 'disabled' : (status || 'default')}
-                        readOnly={disabled}
-                        className={clsx(
-                            props.className,
-                            styles.input,
-                        )}
-                    />
+                    {!!endEnhancer && (
+                        <div
+                            {...overrides?.endEnhancerContainer}
+                            className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}
+                            data-status={disabled ? 'disabled' : status || 'default'}
+                        >
+                            {!!endEnhancer && (
+                                <MemoizedEnhancer
+                                    enhancer={endEnhancer}
+                                    size={parseInt(theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                />
+                            )}
+                        </div>
+                    )}
                 </div>
-                {!!endEnhancer && (
-                    <div
-                        {...overrides?.endEnhancerContainer}
-                        className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}
-                        data-status={disabled ? 'disabled' : (status || 'default')}
-                    >
-                        {!!endEnhancer && (
-                            <MemoizedEnhancer
-                                enhancer={endEnhancer}
-                                size={parseInt(theme.typography.styles.paragraphSmall.fontSize, 10)}
-                            />
-                        )}
-                    </div>
-                )}
-            </div>
-        </Field>
-    );
-});
+            </Field>
+        );
+    },
+);