diff --git a/demo/components/DemoLists.svelte b/demo/components/DemoLists.svelte index 61a39f3..bf6e295 100644 --- a/demo/components/DemoLists.svelte +++ b/demo/components/DemoLists.svelte @@ -13,7 +13,7 @@ import NeoListSearch from '~/list/NeoListSearch.svelte'; import NeoSkeletonText from '~/skeletons/NeoSkeletonText.svelte'; import { Colors } from '~/utils/colors.utils'; - import { enterTransitionProps } from '~/utils/transition.utils'; + import { quickDurationProps } from '~/utils/transition.utils'; const options = $state({ loading: false, @@ -291,7 +291,7 @@ Custom Empty {#snippet empty()} -
  • +
  • Custom empty snippet
    • {/snippet} diff --git a/demo/components/DemoText.svelte b/demo/components/DemoText.svelte index f42e6a7..af3008a 100644 --- a/demo/components/DemoText.svelte +++ b/demo/components/DemoText.svelte @@ -18,6 +18,7 @@ elevation: 0, hover: 0, + size: 'large', color: '', close: false, loading: false, @@ -138,6 +139,17 @@ groupProps={{ style: 'margin-left: 4rem' }} /> + +
    Pills - Default - Pressed - Convex + default + pressed diff --git a/demo/components/DemoTooltips.svelte b/demo/components/DemoTooltips.svelte index 4f62527..e5d93ca 100644 --- a/demo/components/DemoTooltips.svelte +++ b/demo/components/DemoTooltips.svelte @@ -12,6 +12,7 @@ import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte'; import NeoTransitionContainer from '~/containers/NeoTransitionContainer.svelte'; import IconAccount from '~/icons/IconAccount.svelte'; + import IconQuestionMark from '~/icons/IconQuestionMark.svelte'; import NeoNumberStep from '~/inputs/NeoNumberStep.svelte'; import NeoSelect from '~/inputs/NeoSelect.svelte'; import NeoInput from '~/inputs/common/NeoInput.svelte'; @@ -20,7 +21,7 @@ import NeoTooltip from '~/tooltips/NeoTooltip.svelte'; import { DefaultShadowShallowElevation, MaxShadowElevation } from '~/utils/shadow.utils.js'; - import { defaultEnterDuration, defaultFlyDuration } from '~/utils/transition.utils'; + import { defaultDuration, quickDuration } from '~/utils/transition.utils'; const options = $state({ rounded: true, @@ -194,6 +195,10 @@
    + {#snippet question()} + + {/snippet} +
    PopSelect {#key complexSelected?.item?.id}
    - +
    {/key} diff --git a/src/lib/buttons/NeoButton.svelte b/src/lib/buttons/NeoButton.svelte index 53398dc..90079d9 100644 --- a/src/lib/buttons/NeoButton.svelte +++ b/src/lib/buttons/NeoButton.svelte @@ -6,7 +6,7 @@ import IconCircleLoading from '~/icons/IconCircleLoading.svelte'; import { toAction, toActionProps, toTransition, toTransitionProps } from '~/utils/action.utils.js'; import { getColorVariable } from '~/utils/colors.utils.js'; - import { enterTransitionProps } from '~/utils/transition.utils.js'; + import { quickDurationProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -161,7 +161,7 @@ >
    {#if loading || icon} - + {#if loading} {:else} diff --git a/src/lib/icons/IconQuestionMark.svelte b/src/lib/icons/IconQuestionMark.svelte new file mode 100644 index 0000000..5258253 --- /dev/null +++ b/src/lib/icons/IconQuestionMark.svelte @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/src/lib/inputs/NeoCheckbox.svelte b/src/lib/inputs/NeoCheckbox.svelte index d621828..adc0c0a 100644 --- a/src/lib/inputs/NeoCheckbox.svelte +++ b/src/lib/inputs/NeoCheckbox.svelte @@ -13,7 +13,7 @@ import NeoInputValidation from '~/inputs/common/NeoInputValidation.svelte'; import NeoLabel from '~/inputs/common/NeoLabel.svelte'; import { coerce, DefaultShadowShallowElevation } from '~/utils/shadow.utils.js'; - import { enterTransitionProps } from '~/utils/transition.utils.js'; + import { quickDurationProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -185,7 +185,7 @@ {#if loading !== undefined} {#if loading} - + {/if} diff --git a/src/lib/inputs/NeoFilePickerCard.svelte b/src/lib/inputs/NeoFilePickerCard.svelte index 77d5883..ea9df43 100644 --- a/src/lib/inputs/NeoFilePickerCard.svelte +++ b/src/lib/inputs/NeoFilePickerCard.svelte @@ -13,7 +13,7 @@ import IconPencil from '~/icons/IconPencil.svelte'; import NeoAffix from '~/inputs/common/NeoAffix.svelte'; import NeoLabel from '~/inputs/common/NeoLabel.svelte'; - import { enterTransitionProps, flipTransitionProps, leaveDefaultFadeTransition } from '~/utils/transition.utils.js'; + import { quickCircOutProps, quickDelayProps, quickDurationProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -97,7 +97,7 @@ {rounded} {disabled} {skeleton} - out={leaveDefaultFadeTransition} + out={{ use: fade, props: quickDelayProps }} flex="1 1 auto" {...rest} class={['neo-file-picker-card', rest?.class]} @@ -114,7 +114,7 @@
    {#each files as file, i (file)} -
    +
    {file.name} {#if clearable} @@ -158,7 +158,7 @@ class:neo-disabled={disabled} class:neo-label={label} onclick={onEdit} - in:fade={enterTransitionProps} + in:fade={quickDurationProps} >
    diff --git a/src/lib/inputs/NeoRadio.svelte b/src/lib/inputs/NeoRadio.svelte index 8b26ef1..79c7c36 100644 --- a/src/lib/inputs/NeoRadio.svelte +++ b/src/lib/inputs/NeoRadio.svelte @@ -10,7 +10,7 @@ import NeoBaseInput from '~/inputs/common/NeoBaseInput.svelte'; import NeoLabel from '~/inputs/common/NeoLabel.svelte'; import { coerce, DefaultShadowShallowElevation } from '~/utils/shadow.utils.js'; - import { enterTransitionProps } from '~/utils/transition.utils.js'; + import { quickDurationProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -111,7 +111,7 @@ {#if loading !== undefined} {#if loading} - + {/if} diff --git a/src/lib/inputs/NeoRange.svelte b/src/lib/inputs/NeoRange.svelte index 64abbbd..1b1af70 100644 --- a/src/lib/inputs/NeoRange.svelte +++ b/src/lib/inputs/NeoRange.svelte @@ -14,7 +14,7 @@ import NeoLabel from '~/inputs/common/NeoLabel.svelte'; import { toAction, toActionProps, toTransition, toTransitionProps } from '~/utils/action.utils.js'; import { coerce, computeShadowElevation, DefaultShadowShallowElevation, DefaultShallowMinMaxElevation } from '~/utils/shadow.utils.js'; - import { enterTransitionProps } from '~/utils/transition.utils.js'; + import { quickDurationProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -377,7 +377,7 @@ class:neo-range-value={true} class:neo-rounded={rounded} style:--neo-range-handler-z-index={lastIndex ? 0 : 1} - transition:fade={enterTransitionProps} + transition:fade={quickDurationProps} {...floatingProps} bind:this={lowerTooltip.elements.floating} style={toStyle(lowerTooltip.floatingStyles, floatingProps?.style)} @@ -393,7 +393,7 @@ + {/if} diff --git a/src/lib/inputs/NeoSwitch.svelte b/src/lib/inputs/NeoSwitch.svelte index bbb8a03..f0df99f 100644 --- a/src/lib/inputs/NeoSwitch.svelte +++ b/src/lib/inputs/NeoSwitch.svelte @@ -14,7 +14,7 @@ import NeoInputValidation from '~/inputs/common/NeoInputValidation.svelte'; import NeoLabel from '~/inputs/common/NeoLabel.svelte'; import { coerce, DefaultShadowShallowElevation } from '~/utils/shadow.utils.js'; - import { enterTransitionProps } from '~/utils/transition.utils.js'; + import { quickDurationProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -190,7 +190,7 @@ {#if loading !== undefined} {#if loading} - + {/if} diff --git a/src/lib/inputs/common/NeoValidation.svelte b/src/lib/inputs/common/NeoValidation.svelte index b4a2a9c..e962ffb 100644 --- a/src/lib/inputs/common/NeoValidation.svelte +++ b/src/lib/inputs/common/NeoValidation.svelte @@ -5,7 +5,7 @@ import type { NeoValidationContext, NeoValidationProps } from '~/inputs/common/neo-validation.model.js'; import { toTransition, toTransitionProps } from '~/utils/action.utils.js'; - import { defaultFlyDuration } from '~/utils/transition.utils.js'; + import { defaultDuration } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -52,8 +52,8 @@ this={messageTag} id={messageId} class:neo-validation-error={true} - in:fly={{ duration: defaultFlyDuration, delay: message ? defaultFlyDuration / 2 : 0, y: '-50%' }} - out:fly={{ duration: defaultFlyDuration, y: message ? '50%' : '-50%' }} + in:fly={{ duration: defaultDuration, delay: message ? defaultDuration / 2 : 0, y: '-50%' }} + out:fly={{ duration: defaultDuration, y: message ? '50%' : '-50%' }} {...messageProps} > {#if typeof error === 'string'} @@ -67,8 +67,8 @@ this={messageTag} id={messageId} class:neo-validation-description={true} - in:fly={{ duration: defaultFlyDuration, delay: defaultFlyDuration / 2, y: '-50%' }} - out:fly={{ duration: defaultFlyDuration, y: '50%' }} + in:fly={{ duration: defaultDuration, delay: defaultDuration / 2, y: '-50%' }} + out:fly={{ duration: defaultDuration, y: '50%' }} {...messageProps} > {#if typeof message === 'string'} diff --git a/src/lib/list/NeoList.svelte b/src/lib/list/NeoList.svelte index 31a7155..bee6c5c 100644 --- a/src/lib/list/NeoList.svelte +++ b/src/lib/list/NeoList.svelte @@ -25,7 +25,7 @@ import { toAnimation, toTransition, toTransitionProps } from '~/utils/action.utils.js'; import { getColorVariable } from '~/utils/colors.utils.js'; import { toSize } from '~/utils/style.utils.js'; - import { defaultTransitionDuration, enterTransitionProps, flipTransitionProps, scaleTransitionProps } from '~/utils/transition.utils.js'; + import { quickCircOutProps, quickDurationProps, quickScaleProps, shortDuration } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -66,9 +66,9 @@ height: _height, // Animation - in: inAction = { use: scale, props: scaleTransitionProps }, - out: outAction = { use: fade, props: { ...scaleTransitionProps, delay: scaleTransitionProps?.duration } }, - animate = { use: flipToggle, props: flipTransitionProps }, + in: inAction = { use: scale, props: quickScaleProps }, + out: outAction = { use: fade, props: { ...quickScaleProps, delay: quickScaleProps?.duration } }, + animate = { use: flipToggle, props: quickCircOutProps }, // Events onselect, @@ -92,13 +92,13 @@ if (!ref) return false; ref.scrollTo({ top: 0, behavior: 'smooth', ...options }); return ref; - }, defaultTransitionDuration / 2); + }, shortDuration / 2); const scrollBottom: NeoListMethods['scrollBottom'] = debounce((options?: ScrollToOptions) => { if (!ref?.scrollHeight) return false; ref.scrollTo({ top: ref.scrollHeight, behavior: 'smooth', ...options }); return ref; - }, defaultTransitionDuration / 2); + }, shortDuration / 2); $effect(() => { if (!loading || !scrollToLoader) return; @@ -380,7 +380,7 @@ class:neo-scroll={scrollbar} class:neo-shadow={shadow} class:neo-dim={dim} - in:scaleFreeze={scaleTransitionProps} + in:scaleFreeze={quickScaleProps} {...rest} > {@render children?.(context)} @@ -394,7 +394,7 @@ role={select ? 'listbox' : 'list'} bind:this={ref} class:neo-list-empty={true} - in:fade={enterTransitionProps} + in:fade={quickDurationProps} {...rest} > {#if customEmpty} diff --git a/src/lib/list/NeoListBaseLoader.svelte b/src/lib/list/NeoListBaseLoader.svelte index f293deb..e2771c4 100644 --- a/src/lib/list/NeoListBaseLoader.svelte +++ b/src/lib/list/NeoListBaseLoader.svelte @@ -9,7 +9,7 @@ import NeoSkeletonText from '~/skeletons/NeoSkeletonText.svelte'; import { toTransition, toTransitionProps } from '~/utils/action.utils.js'; - import { scaleEnterProps, scaleLeaveProps } from '~/utils/transition.utils.js'; + import { quickScaleDelayProps, quickScaleProps } from '~/utils/transition.utils.js'; const { loading = true, @@ -23,8 +23,8 @@ items = 3, flex = items > 1 ? undefined : '0 0 70%', - in: inAction = { use: fade, props: scaleEnterProps }, - out: outAction = { use: fade, props: scaleLeaveProps }, + in: inAction = { use: fade, props: quickScaleProps }, + out: outAction = { use: fade, props: quickScaleDelayProps }, beforeProps, afterProps, diff --git a/src/lib/nav/NeoTab.svelte b/src/lib/nav/NeoTab.svelte index 29251f0..94c712e 100644 --- a/src/lib/nav/NeoTab.svelte +++ b/src/lib/nav/NeoTab.svelte @@ -11,7 +11,7 @@ import IconClose from '~/icons/IconClose.svelte'; import { getTabContext } from '~/nav/neo-tabs-context.svelte.js'; import { toAction, toActionProps } from '~/utils/action.utils.js'; - import { defaultTransitionDuration, enterFreezeTransition } from '~/utils/transition.utils.js'; + import { shortDuration, shortFreezeTransition } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -94,7 +94,7 @@ class:neo-active={active} class:neo-slide={slide} class:neo-close={closeable} - transition:transition={enterFreezeTransition} + transition:transition={shortFreezeTransition} {...tabProps} use:useFn={useProps} > @@ -119,7 +119,7 @@ class="neo-tab-close" aria-label="Close tab" class:neo-disabled={disabled} - transition:width={{ duration: skip ? 0 : defaultTransitionDuration }} + transition:width={{ duration: skip ? 0 : shortDuration }} onclick={onClose} > diff --git a/src/lib/pill/NeoPill.svelte b/src/lib/pill/NeoPill.svelte index 4880489..1de9540 100644 --- a/src/lib/pill/NeoPill.svelte +++ b/src/lib/pill/NeoPill.svelte @@ -1,6 +1,8 @@ .neo-pill-affix) { + --neo-affix-size: 0.625rem; + + margin-inline-start: 0.1875rem; + } + } + + &[medium], + &[data-type='medium'] { + font-size: var(--neo-pill-font-size-medium, var(--neo-font-size-sm)); + line-height: var(--neo-pill-line-height-medium, var(--neo-line-height-sm)); + padding-block: 0.0625rem; + padding-inline: 0.4375rem; + + :global(> .neo-pill-affix) { + --neo-affix-size: 0.8125rem; + + margin-inline-start: 0.25rem; + } + } + &:focus-within, &.neo-hover:hover { box-shadow: var(--neo-pill-hover-shadow, var(--neo-box-shadow-flat)); } :global(> .neo-pill-affix) { + --neo-affix-size: 1rem; + margin-inline-start: 0.3125rem; padding: 0; } @@ -181,14 +215,9 @@ } &.neo-rounded { - padding-inline: 0.625rem; border-radius: var(--neo-pill-border-radius, var(--neo-border-radius-lg)); } - &.neo-convex:not(.neo-flat, .neo-inset) { - padding-block: 0.1875rem; - } - &.neo-glass { --neo-skeleton-color: var(--neo-glass-skeleton-color); --neo-border-color: var(--neo-glass-border-color); @@ -196,12 +225,11 @@ background-color: var(--neo-pill-bg-color, var(--neo-glass-background-color)); backdrop-filter: var(--neo-pill-glass-blur, var(--neo-blur-3) var(--neo-saturate-2)); - &.neo-convex, &.neo-inset { border-color: var(--neo-pill-border-color, transparent); } - &:not(.neo-inset, .neo-convex, .neo-borderless, .neo-flat, .neo-disabled) { + &:not(.neo-inset, .neo-borderless, .neo-flat, .neo-disabled) { border-color: var( --neo-pill-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) diff --git a/src/lib/pill/neo-pill.model.ts b/src/lib/pill/neo-pill.model.ts index cffdcb9..8958b31 100644 --- a/src/lib/pill/neo-pill.model.ts +++ b/src/lib/pill/neo-pill.model.ts @@ -28,6 +28,12 @@ export type NeoPillContext = { * Disable interactions and display a skeleton state. */ skeleton?: boolean; + /** + * Set the size of the pill. + * + * @default large + */ + size?: 'small' | 'medium' | 'large'; /** * Pill elevation (-2 to 2). */ @@ -50,10 +56,6 @@ export type NeoPillContext = { * Recess the content of the pill if elevation is inset (< 0). */ pressed?: boolean; - /** - * Smooth the edges of the pill if elevation is raised (> 0). - */ - convex?: boolean; /** * Display the pill with a glass effect (translucent background and blur). */ diff --git a/src/lib/skeletons/NeoSkeletonContainer.svelte b/src/lib/skeletons/NeoSkeletonContainer.svelte index e99ff21..b492e1f 100644 --- a/src/lib/skeletons/NeoSkeletonContainer.svelte +++ b/src/lib/skeletons/NeoSkeletonContainer.svelte @@ -8,7 +8,7 @@ import NeoTransitionContainer from '~/containers/NeoTransitionContainer.svelte'; import { toTransition, toTransitionProps } from '~/utils/action.utils.js'; - import { scaleEnterProps, scaleLeaveProps } from '~/utils/transition.utils.js'; + import { quickScaleDelayProps, quickScaleProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -29,8 +29,8 @@ context = $bindable({}), // Transition - in: inAction = { use: fade, props: scaleEnterProps }, - out: outAction = { use: fade, props: scaleLeaveProps }, + in: inAction = { use: fade, props: quickScaleProps }, + out: outAction = { use: fade, props: quickScaleDelayProps }, // Other props containerProps, diff --git a/src/lib/skeletons/NeoSkeletonMedia.svelte b/src/lib/skeletons/NeoSkeletonMedia.svelte index 40ea4e3..3071415 100644 --- a/src/lib/skeletons/NeoSkeletonMedia.svelte +++ b/src/lib/skeletons/NeoSkeletonMedia.svelte @@ -9,7 +9,7 @@ import NeoSkeletonContainer from '~/skeletons/NeoSkeletonContainer.svelte'; import { toTransition, toTransitionProps } from '~/utils/action.utils.js'; import { toSize } from '~/utils/style.utils.js'; - import { enterTransitionProps, leaveTransitionProps } from '~/utils/transition.utils.js'; + import { quickDelayProps, quickDurationProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -36,8 +36,8 @@ height: _height, // Transition - in: inAction = { use: fade, props: leaveTransitionProps }, - out: outAction = { use: fade, props: enterTransitionProps }, + in: inAction = { use: fade, props: quickDelayProps }, + out: outAction = { use: fade, props: quickDurationProps }, // Other props containerProps, diff --git a/src/lib/skeletons/NeoSkeletonText.svelte b/src/lib/skeletons/NeoSkeletonText.svelte index 9998f76..208c551 100644 --- a/src/lib/skeletons/NeoSkeletonText.svelte +++ b/src/lib/skeletons/NeoSkeletonText.svelte @@ -6,7 +6,7 @@ import NeoSkeletonContainer from '~/skeletons/NeoSkeletonContainer.svelte'; import { toTransition, toTransitionProps } from '~/utils/action.utils.js'; import { toSize } from '~/utils/style.utils.js'; - import { enterTransitionProps, leaveTransitionProps } from '~/utils/transition.utils.js'; + import { quickDelayProps, quickDurationProps } from '~/utils/transition.utils.js'; /* eslint-disable prefer-const -- necessary for binding checked */ let { @@ -33,8 +33,8 @@ fallback = alt ? 26 : 6, // Transition - in: inAction = { use: fade, props: leaveTransitionProps }, - out: outAction = { use: fade, props: enterTransitionProps }, + in: inAction = { use: fade, props: quickDelayProps }, + out: outAction = { use: fade, props: quickDurationProps }, // Other props titleProps, diff --git a/src/lib/tooltips/NeoTooltip.svelte b/src/lib/tooltips/NeoTooltip.svelte index 7810a8a..19a78c8 100644 --- a/src/lib/tooltips/NeoTooltip.svelte +++ b/src/lib/tooltips/NeoTooltip.svelte @@ -16,6 +16,8 @@ useRole, } from '@skeletonlabs/floating-ui-svelte'; + import { scale } from 'svelte/transition'; + import type { HTMLNeoBaseElement } from '~/utils/html-element.utils.js'; import { type NeoTooltipProps, NeoTooltipSizeStrategy } from '~/tooltips/neo-tooltip.model.js'; @@ -23,7 +25,7 @@ import { toAction, toActionProps, toTransition, toTransitionProps } from '~/utils/action.utils.js'; import { coerce, DefaultShadowShallowElevation, MaxShadowElevation } from '~/utils/shadow.utils.js'; import { type SizeOption, toPixel, toSize } from '~/utils/style.utils.js'; - import { scaleTransition } from '~/utils/transition.utils.js'; + import { quickScaleProps } from '~/utils/transition.utils.js'; let { // Snippets @@ -63,7 +65,7 @@ // Actions in: inAction, out: outAction, - transition: transitionAction = scaleTransition, + transition: transitionAction = { use: scale, props: quickScaleProps }, // Actions use, diff --git a/src/lib/utils/transition.utils.ts b/src/lib/utils/transition.utils.ts index 2745d1f..cdf022f 100644 --- a/src/lib/utils/transition.utils.ts +++ b/src/lib/utils/transition.utils.ts @@ -1,40 +1,21 @@ import { circOut } from 'svelte/easing'; -import { fade, type FadeParams, scale, type ScaleParams } from 'svelte/transition'; import type { TransitionProps } from '@dvcol/svelte-utils/transition'; -import type { TransitionWithProps } from '~/utils/action.utils.js'; -export const defaultFlyDuration = 400; -export const defaultTransitionDuration = 300; -export const defaultEnterDuration = 200; +export const defaultDuration = 400; +export const shortDuration = 300; +export const quickDuration = 200; -export const enterFreezeTransition: TransitionProps = { - duration: defaultTransitionDuration, +export const shortFreezeTransition: TransitionProps = { + duration: shortDuration, freeze: true, css: `overflow: hidden; white-space: nowrap`, }; -export const enterTransitionProps: TransitionProps = { duration: defaultEnterDuration }; -export const leaveTransitionProps: TransitionProps = { delay: defaultEnterDuration, duration: defaultEnterDuration / 2 }; +export const quickDurationProps: TransitionProps = { duration: quickDuration }; +export const quickDelayProps: TransitionProps = { delay: quickDuration, duration: quickDuration / 2 }; -export const enterDefaultFadeTransition: TransitionWithProps = { - use: fade, - props: enterTransitionProps, -}; - -export const leaveDefaultFadeTransition: TransitionWithProps = { - use: fade, - props: leaveTransitionProps, -}; - -export const scaleTransitionProps: TransitionProps = { duration: defaultEnterDuration, start: 0.95 }; - -export const scaleEnterProps: TransitionProps = { duration: defaultEnterDuration, start: 0.95 }; -export const scaleLeaveProps: TransitionProps = { duration: defaultEnterDuration, start: 0.95, delay: defaultEnterDuration / 2 }; - -export const scaleTransition: TransitionWithProps = { - use: scale, - props: scaleTransitionProps, -}; +export const quickScaleProps: TransitionProps = { duration: quickDuration, start: 0.95 }; +export const quickScaleDelayProps: TransitionProps = { duration: quickDuration, start: 0.95, delay: quickDuration / 2 }; -export const flipTransitionProps: TransitionProps = { duration: defaultEnterDuration, ease: circOut, delay: defaultEnterDuration / 2 }; +export const quickCircOutProps: TransitionProps = { duration: quickDuration, ease: circOut, delay: quickDuration / 2 };