fix: apply ui: prefix to all packages/ui components and automate it
This commit is contained in:
Rotimi Best
@@ -16,7 +16,8 @@
|
||||
let {
|
||||
variant,
|
||||
duration = 1,
|
||||
class: className = 'text-4xl font-bold tracking-[-0.02em] drop-shadow-sm md:text-7xl md:leading-20',
|
||||
class:
|
||||
className = 'ui:text-4xl ui:font-bold ui:tracking-[-0.02em] ui:drop-shadow-sm ui:md:text-7xl ui:md:leading-20',
|
||||
children
|
||||
}: Props = $props();
|
||||
|
||||
|
||||
@@ -10,6 +10,6 @@
|
||||
let { children, className }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class={cn('p-4 text-left', className)}>
|
||||
<div class={cn('ui:p-4 ui:text-left', className)}>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
@@ -13,15 +13,19 @@
|
||||
|
||||
<div
|
||||
class={cn(
|
||||
'relative mx-auto w-full border border-dashed border-zinc-300 px-8 shadow-sm sm:px-6 md:px-8 dark:border-zinc-800 dark:bg-[#09090B]',
|
||||
'ui:relative ui:mx-auto ui:w-full ui:border ui:border-dashed ui:border-zinc-300 ui:px-8 ui:shadow-sm ui:sm:px-6 ui:md:px-8 ui:dark:border-zinc-800 ui:dark:bg-[#09090B]',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div class="absolute top-4 left-0 z-0 h-px w-full bg-zinc-400 sm:top-6 md:top-8 dark:bg-zinc-700"></div>
|
||||
<div class="absolute bottom-4 left-0 z-0 h-px w-full bg-zinc-400 sm:bottom-6 md:bottom-8 dark:bg-zinc-700"></div>
|
||||
<div class="relative w-full border-x border-zinc-400 dark:border-zinc-700">
|
||||
<div
|
||||
class="ui:absolute ui:top-4 ui:left-0 ui:z-0 ui:h-px ui:w-full ui:bg-zinc-400 ui:sm:top-6 ui:md:top-8 ui:dark:bg-zinc-700"
|
||||
></div>
|
||||
<div
|
||||
class="ui:absolute ui:bottom-4 ui:left-0 ui:z-0 ui:h-px ui:w-full ui:bg-zinc-400 ui:sm:bottom-6 ui:md:bottom-8 ui:dark:bg-zinc-700"
|
||||
></div>
|
||||
<div class="ui:relative ui:w-full ui:border-x ui:border-zinc-400 ui:dark:border-zinc-700">
|
||||
<Ellipses />
|
||||
<div class="relative z-20 mx-auto py-8">
|
||||
<div class="ui:relative ui:z-20 ui:mx-auto ui:py-8">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
'rounded-full outline outline-8 dark:outline-gray-950 sm:my-6 md:my-8 size-1 my-4 outline-gray-50 bg-green-400';
|
||||
</script>
|
||||
|
||||
<div class="absolute z-0 grid h-full w-full items-center gap-8 lg:grid-cols-2">
|
||||
<section class="absolute z-0 grid h-full w-full grid-cols-2 place-content-between">
|
||||
<div class={`${sharedClass} -mx-[2.5px]`}></div>
|
||||
<div class={`${sharedClass} -mx-[2px] place-self-end`}></div>
|
||||
<div class={`${sharedClass} -mx-[2.5px]`}></div>
|
||||
<div class={`${sharedClass} -mx-[2px] place-self-end`}></div>
|
||||
<div class="ui:absolute ui:z-0 ui:grid ui:h-full ui:w-full ui:items-center ui:gap-8 ui:lg:grid-cols-2">
|
||||
<section class="ui:absolute ui:z-0 ui:grid ui:h-full ui:w-full ui:place-content-between grid-cols-2">
|
||||
<div class={`${sharedClass} ui:-mx-[2.5px]`}></div>
|
||||
<div class={`${sharedClass} ui:-mx-[2px] ui:place-self-end`}></div>
|
||||
<div class={`${sharedClass} ui:-mx-[2.5px]`}></div>
|
||||
<div class={`${sharedClass} ui:-mx-[2px] ui:place-self-end`}></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -275,14 +275,14 @@
|
||||
<div
|
||||
bind:this={root}
|
||||
class={cn(
|
||||
'relative h-full w-full',
|
||||
'ui:relative ui:h-full ui:w-full',
|
||||
glowColor == null && 'ui:[--dot-field-glow:#fff] ui:dark:[--dot-field-glow:#0a0a0a]',
|
||||
className
|
||||
)}
|
||||
style={glowColor != null ? `--dot-field-glow: ${glowColor}` : undefined}
|
||||
>
|
||||
<canvas bind:this={canvas} class="absolute inset-0 h-full w-full"></canvas>
|
||||
<svg class="pointer-events-none absolute inset-0 h-full w-full" aria-hidden="true">
|
||||
<canvas bind:this={canvas} class="ui:absolute ui:inset-0 ui:h-full ui:w-full"></canvas>
|
||||
<svg class="ui:pointer-events-none ui:absolute ui:inset-0 ui:h-full ui:w-full" aria-hidden="true">
|
||||
<defs>
|
||||
<radialGradient id={glowId}>
|
||||
<stop offset="0%" stop-color="var(--dot-field-glow, #fff)" />
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class={cn('pointer-events-none absolute inset-0 h-full w-full', className)}
|
||||
class={cn('ui:pointer-events-none ui:absolute ui:inset-0 ui:h-full ui:w-full', className)}
|
||||
{...restProps}
|
||||
fill={fillColor}
|
||||
>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
let {
|
||||
class: className = 'drop-shadow-sm',
|
||||
class: className = 'ui:drop-shadow-sm',
|
||||
containerClass = '',
|
||||
words = 'Gradual Spacing',
|
||||
duration = 0.5,
|
||||
@@ -30,7 +30,7 @@
|
||||
const wordsspilit = $derived(words.split(''));
|
||||
</script>
|
||||
|
||||
<div class={cn('flex justify-center space-x-1', containerClass)}>
|
||||
<div class={cn('ui:flex ui:justify-center ui:space-x-1', containerClass)}>
|
||||
<AnimatePresence let:_item list={[{ key: wordsspilit }]}>
|
||||
{#each wordsspilit as char, i}
|
||||
<Motion
|
||||
|
||||
@@ -89,34 +89,34 @@
|
||||
const selectedAnimation = $derived(animationVariants[animationStyle]);
|
||||
</script>
|
||||
|
||||
<div class="relative">
|
||||
<div class="ui:relative">
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div class="relative cursor-pointer" onclick={openVideo} role="presentation">
|
||||
<div class="ui:relative ui:cursor-pointer" onclick={openVideo} role="presentation">
|
||||
<img
|
||||
src={thumbnailSrc}
|
||||
alt={thumbnailAlt}
|
||||
width={1920}
|
||||
height={1080}
|
||||
class="w-full rounded-2xl transition-all duration-200"
|
||||
class="ui:w-full ui:rounded-2xl ui:transition-all ui:duration-200"
|
||||
/>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center">
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="flex size-24 items-center justify-center rounded-full border border-neutral-400 bg-black backdrop-blur-md transition-transform duration-300 ease-out"
|
||||
class="ui:flex ui:size-24 ui:items-center ui:justify-center ui:rounded-full ui:border ui:border-neutral-400 ui:bg-black ui:backdrop-blur-md ui:transition-transform ui:duration-300 ui:ease-out"
|
||||
onmouseenter={() => (isPlayHovered = true)}
|
||||
onmouseleave={() => (isPlayHovered = false)}
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
class="relative flex size-20 items-center justify-center rounded-full border border-neutral-400 bg-black backdrop-blur-2xl transition-all duration-300 ease-out"
|
||||
class="ui:relative ui:flex ui:size-20 ui:items-center ui:justify-center ui:rounded-full ui:border ui:border-neutral-400 ui:bg-black ui:backdrop-blur-2xl ui:transition-all ui:duration-300 ui:ease-out"
|
||||
>
|
||||
<span
|
||||
class="inline-flex size-8 items-center justify-center transition-transform duration-300 ease-out"
|
||||
class="ui:inline-flex ui:size-8 ui:items-center ui:justify-center ui:transition-transform ui:duration-300 ui:ease-out"
|
||||
style:transform={`scale(${isPlayHovered ? 1.1 : 1})`}
|
||||
style:color={iconColor}
|
||||
>
|
||||
<Play strokeWidth={1.7} class="size-full" />
|
||||
<Play strokeWidth={1.7} class="ui:size-full" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,7 +126,10 @@
|
||||
<AnimatePresence let:item list={[{ key: isVideoOpen }]}>
|
||||
{#if item.key}
|
||||
<Motion initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} let:motion>
|
||||
<div use:motion class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md">
|
||||
<div
|
||||
use:motion
|
||||
class="ui:fixed ui:inset-0 ui:z-50 ui:flex ui:items-center ui:justify-center ui:bg-black/50 ui:backdrop-blur-md"
|
||||
>
|
||||
<Motion
|
||||
initial={selectedAnimation.initial}
|
||||
animate={selectedAnimation.animate}
|
||||
@@ -134,28 +137,28 @@
|
||||
transition={{ type: 'spring', damping: 30, stiffness: 300 }}
|
||||
let:motion
|
||||
>
|
||||
<div use:motion class="relative mx-4 aspect-video w-full max-w-4xl md:mx-0">
|
||||
<div use:motion class="ui:relative ui:mx-4 ui:w-full ui:max-w-4xl ui:md:mx-0 aspect-video">
|
||||
<Motion let:motion whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
|
||||
<button
|
||||
type="button"
|
||||
use:motion
|
||||
class="absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md"
|
||||
class="ui:absolute ui:-top-16 ui:right-0 ui:rounded-full ui:bg-neutral-900/50 ui:p-2 ui:text-xl ui:text-white ui:ring-1 ui:backdrop-blur-md"
|
||||
onclick={closeVideo}
|
||||
onmouseenter={() => (isCloseHovered = true)}
|
||||
onmouseleave={() => (isCloseHovered = false)}
|
||||
>
|
||||
<X class="size-5 text-white" />
|
||||
<X class="ui:size-5 ui:text-white" />
|
||||
</button>
|
||||
</Motion>
|
||||
<Motion animate={{ scale: isCloseHovered ? 0.98 : 1 }} transition={{ duration: 0.2 }} let:motion>
|
||||
<div
|
||||
use:motion
|
||||
class="relative isolate z-1 size-full overflow-hidden rounded-2xl border-2 border-white"
|
||||
class="ui:relative ui:z-1 ui:size-full ui:overflow-hidden ui:rounded-2xl ui:border-2 ui:border-white isolate"
|
||||
>
|
||||
<!-- svelte-ignore a11y_missing_attribute -->
|
||||
<iframe
|
||||
src={videoSrc}
|
||||
class="size-full rounded-2xl"
|
||||
class="ui:size-full ui:rounded-2xl"
|
||||
allowfullscreen
|
||||
title="Video"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
|
||||
@@ -50,16 +50,16 @@
|
||||
onmousemove={handleMouseMove}
|
||||
onmouseleave={handleMouseLeave}
|
||||
class={cn(
|
||||
'group relative flex size-full justify-center overflow-hidden rounded-xl border bg-neutral-100 py-4 text-black dark:bg-neutral-900 dark:text-white',
|
||||
'group ui:relative ui:flex ui:size-full ui:justify-center ui:overflow-hidden ui:rounded-xl ui:border ui:bg-neutral-100 ui:py-4 ui:text-black ui:dark:bg-neutral-900 ui:dark:text-white',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div class="relative z-10">
|
||||
<div class="ui:relative ui:z-10">
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{:else}
|
||||
<div class="flex h-full items-center justify-center text-center">
|
||||
<p class="text-2xl">Magic Card</p>
|
||||
<div class="ui:flex ui:h-full ui:items-center ui:justify-center ui:text-center">
|
||||
<p class="ui:text-2xl">Magic Card</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -72,7 +72,7 @@
|
||||
>
|
||||
<div
|
||||
use:motion
|
||||
class="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
||||
class="ui:pointer-events-none ui:absolute ui:-inset-px ui:rounded-xl ui:opacity-0 ui:transition-opacity ui:duration-300 ui:group-hover:opacity-100"
|
||||
></div>
|
||||
</Motion>
|
||||
</div>
|
||||
|
||||
@@ -14,9 +14,9 @@
|
||||
<p
|
||||
style:--shimmer-width="{shimmerWidth}px"
|
||||
class={cn(
|
||||
'mx-auto max-w-md text-neutral-600/50 dark:text-neutral-400/50',
|
||||
'animate-shimmer bg-size-[var(--shimmer-width)_100%] bg-clip-text bg-position-[0_0] bg-no-repeat [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
|
||||
'bg-linear-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80',
|
||||
'ui:mx-auto ui:max-w-md ui:text-neutral-600/50 ui:dark:text-neutral-400/50',
|
||||
'ui:animate-shimmer ui:bg-size-[var(--shimmer-width)_100%] ui:bg-clip-text ui:bg-position-[0_0] ui:bg-no-repeat [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
|
||||
'ui:bg-linear-to-r ui:from-transparent ui:via-black/80 ui:via-50% ui:to-transparent ui:dark:via-white/80',
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
transition={{ duration: 0.8, repeat: Infinity, delay }}
|
||||
let:motion
|
||||
>
|
||||
<div {id} use:motion class="pointer-events-none absolute z-20" style:left={x} style:top={y}>
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" class="block">
|
||||
<div {id} use:motion class="ui:pointer-events-none ui:absolute ui:z-20" style:left={x} style:top={y}>
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" class="ui:block">
|
||||
<path
|
||||
d="M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z"
|
||||
fill={color}
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
</script>
|
||||
|
||||
<div style:--sparkles-first-color="{colors.first};" style:--sparkles-second-color="{colors.second};" class={className}>
|
||||
<span class="relative inline-block">
|
||||
<span class="ui:relative ui:inline-block">
|
||||
{#each sparkles as item}
|
||||
<SparkleParticle {...item} />
|
||||
{/each}
|
||||
|
||||
@@ -10,6 +10,6 @@
|
||||
let { children, className }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class={cn('text-left', className)}>
|
||||
<div class={cn('ui:text-left', className)}>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
stroke-width="1"
|
||||
stroke-linecap="round"
|
||||
stroke="currentColor"
|
||||
class={cn('absolute text-black dark:text-white', className)}
|
||||
class={cn('ui:absolute ui:text-black ui:dark:text-white', className)}
|
||||
{...rest}
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
|
||||
|
||||
Reference in New Issue
Block a user