glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: purge shadcn from codebase. Replace with bits-ui components and other tools

Browse Source
This commit is contained in:
Ilia Mashkov
2026-04-17 13:37:44 +03:00
parent 0004b81e40
commit 8a93c7b545
55 changed files with 90 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/shared/lib/storybook/MockIcon.svelte
View File

@@ -7,7 +7,7 @@
correctly via the HTML element's class attribute.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type {
Component,
Snippet,
@@ -32,7 +32,7 @@ let { icon: Icon, class: className, attrs = {} }: Props = $props();
</script>
{#if Icon}
{@const __iconClass__ = cn('size-4', className)}
{@const __iconClass__ = clsx('size-4', className)}
<!-- Render icon component dynamically with class prop -->
<Icon
class={__iconClass__}

1
src/shared/lib/storybook/Providers.svelte
View File

@@ -4,7 +4,6 @@
Provides:
- responsive: ResponsiveManager context for breakpoint tracking
- tooltip: Tooltip.Provider context for shadcn Tooltip components
- Additional Radix UI providers can be added here as needed
-->
<script lang="ts">

9
src/shared/shadcn/hooks/is-mobile.svelte.ts
View File

@@ -1,9 +0,0 @@
import { MediaQuery } from 'svelte/reactivity';
const DEFAULT_MOBILE_BREAKPOINT = 768;
export class IsMobile extends MediaQuery {
constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
super(`max-width: ${breakpoint - 1}px`);
}
}

19
src/shared/shadcn/ui/popover/index.ts
View File

@@ -1,19 +0,0 @@
import Close from './popover-close.svelte';
import Content from './popover-content.svelte';
import Portal from './popover-portal.svelte';
import Trigger from './popover-trigger.svelte';
import Root from './popover.svelte';
export {
Close,
Close as PopoverClose,
Content,
Content as PopoverContent,
Portal,
Portal as PopoverPortal,
Root,
//
Root as Popover,
Trigger,
Trigger as PopoverTrigger,
};

7
src/shared/shadcn/ui/popover/popover-close.svelte
View File

@@ -1,7 +0,0 @@
<script lang="ts">
import { Popover as PopoverPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
</script>
<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

34
src/shared/shadcn/ui/popover/popover-content.svelte
View File

@@ -1,34 +0,0 @@
<script lang="ts">
import {
type WithoutChildrenOrChild,
cn,
} from '$shared/shadcn/utils/shadcn-utils.js';
import { Popover as PopoverPrimitive } from 'bits-ui';
import type { ComponentProps } from 'svelte';
import PopoverPortal from './popover-portal.svelte';
let {
ref = $bindable(null),
class: className,
sideOffset = 4,
align = 'center',
portalProps,
...restProps
}: PopoverPrimitive.ContentProps & {
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
} = $props();
</script>
<PopoverPortal {...portalProps}>
<PopoverPrimitive.Content
bind:ref
data-slot="popover-content"
{sideOffset}
{align}
class={cn(
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
className,
)}
{...restProps}
/>
</PopoverPortal>

7
src/shared/shadcn/ui/popover/popover-portal.svelte
View File

@@ -1,7 +0,0 @@
<script lang="ts">
import { Popover as PopoverPrimitive } from 'bits-ui';
let { ...restProps }: PopoverPrimitive.PortalProps = $props();
</script>
<PopoverPrimitive.Portal {...restProps} />

17
src/shared/shadcn/ui/popover/popover-trigger.svelte
View File

@@ -1,17 +0,0 @@
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
import { Popover as PopoverPrimitive } from 'bits-ui';
let {
ref = $bindable(null),
class: className,
...restProps
}: PopoverPrimitive.TriggerProps = $props();
</script>
<PopoverPrimitive.Trigger
bind:ref
data-slot="popover-trigger"
class={cn('', className)}
{...restProps}
/>

7
src/shared/shadcn/ui/popover/popover.svelte
View File

@@ -1,7 +0,0 @@
<script lang="ts">
import { Popover as PopoverPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
</script>
<PopoverPrimitive.Root bind:open {...restProps} />

19
src/shared/shadcn/ui/tooltip/index.ts
View File

@@ -1,19 +0,0 @@
import Content from './tooltip-content.svelte';
import Portal from './tooltip-portal.svelte';
import Provider from './tooltip-provider.svelte';
import Trigger from './tooltip-trigger.svelte';
import Root from './tooltip.svelte';
export {
Content,
Content as TooltipContent,
Portal,
Portal as TooltipPortal,
Provider,
Provider as TooltipProvider,
Root,
//
Root as Tooltip,
Trigger,
Trigger as TooltipTrigger,
};

53
src/shared/shadcn/ui/tooltip/tooltip-content.svelte
View File

@@ -1,53 +0,0 @@
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
import type { WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
import { Tooltip as TooltipPrimitive } from 'bits-ui';
import type { ComponentProps } from 'svelte';
import TooltipPortal from './tooltip-portal.svelte';
let {
ref = $bindable(null),
class: className,
sideOffset = 0,
side = 'top',
children,
arrowClasses,
portalProps,
...restProps
}: TooltipPrimitive.ContentProps & {
arrowClasses?: string;
portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
} = $props();
</script>
<TooltipPortal {...portalProps}>
<TooltipPrimitive.Content
bind:ref
data-slot="tooltip-content"
{sideOffset}
{side}
class={cn(
'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
className,
)}
{...restProps}
>
{@render children?.()}
<TooltipPrimitive.Arrow>
{#snippet child({ props })}
<div
class={cn(
'bg-primary z-50 size-2.5 rotate-45 rounded-[2px]',
'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
arrowClasses,
)}
{...props}
>
</div>
{/snippet}
</TooltipPrimitive.Arrow>
</TooltipPrimitive.Content>
</TooltipPortal>

7
src/shared/shadcn/ui/tooltip/tooltip-portal.svelte
View File

@@ -1,7 +0,0 @@
<script lang="ts">
import { Tooltip as TooltipPrimitive } from 'bits-ui';
let { ...restProps }: TooltipPrimitive.PortalProps = $props();
</script>
<TooltipPrimitive.Portal {...restProps} />

7
src/shared/shadcn/ui/tooltip/tooltip-provider.svelte
View File

@@ -1,7 +0,0 @@
<script lang="ts">
import { Tooltip as TooltipPrimitive } from 'bits-ui';
let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
</script>
<TooltipPrimitive.Provider {...restProps} />

7
src/shared/shadcn/ui/tooltip/tooltip-trigger.svelte
View File

@@ -1,7 +0,0 @@
<script lang="ts">
import { Tooltip as TooltipPrimitive } from 'bits-ui';
let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
</script>
<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

7
src/shared/shadcn/ui/tooltip/tooltip.svelte
View File

@@ -1,7 +0,0 @@
<script lang="ts">
import { Tooltip as TooltipPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
</script>
<TooltipPrimitive.Root bind:open {...restProps} />

40
src/shared/shadcn/utils/shadcn-utils.ts
View File

@@ -1,40 +0,0 @@
import {
type ClassValue,
clsx,
} from 'clsx';
import { twMerge } from 'tailwind-merge';
/**
* Utility function to merge Tailwind CSS classes
* Combines clsx for conditional classes and tailwind-merge to handle conflicts
*/
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
/**
* Type utility to add a ref property to HTML element attributes
* Used in shadcn-svelte components to support element references
* @template T - The attributes type (e.g., HTMLAttributes<HTMLDivElement>)
* @template E - The element type (e.g., HTMLDivElement)
*/
export type WithElementRef<T, E extends HTMLElement = HTMLElement> = T & {
/**
* Reference to the DOM element
*/
ref?: E | null;
};
/**
* Type utility to remove 'children' and 'child' properties from a type
* Used in shadcn-svelte components that use Snippets instead of children
* @template T - The type to remove children from
*/
export type WithoutChildren<T> = Omit<T, 'children'>;
/**
* Type utility to remove 'children' and 'child' properties from a type
* Used in shadcn-svelte components that use Snippets instead of children
* @template T - The type to remove children and child from
*/
export type WithoutChildrenOrChild<T> = Omit<T, 'children' | 'child'>;

4
src/shared/ui/Badge/Badge.svelte
View File

@@ -3,11 +3,11 @@
Pill badge with border and optional status dot.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
type LabelSize,
labelSizeConfig,
} from '$shared/ui/Label/config';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
@@ -64,7 +64,7 @@ let {
</script>
<span
class={cn(
class={clsx(
'inline-flex items-center gap-1 px-2 py-0.5 border rounded-full',
'font-mono uppercase tracking-wide',
labelSizeConfig[size],

18
src/shared/ui/Button/Button.svelte
View File

@@ -3,7 +3,7 @@
design-system button. Uppercase, zero border-radius, Space Grotesk.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import type {
@@ -71,7 +71,7 @@ let {
const isIconOnly = $derived(!!icon && !children);
const variantStyles: Record<ButtonVariant, string> = {
primary: cn(
primary: clsx(
'bg-swiss-red text-white',
'hover:bg-swiss-red/90',
'active:bg-swiss-red/80',
@@ -87,7 +87,7 @@ const variantStyles: Record<ButtonVariant, string> = {
'disabled:cursor-not-allowed',
'disabled:transform-none',
),
secondary: cn(
secondary: clsx(
'bg-surface dark:bg-paper',
'text-swiss-black dark:text-neutral-200',
'border border-black/10 dark:border-white/10',
@@ -98,7 +98,7 @@ const variantStyles: Record<ButtonVariant, string> = {
'disabled:text-neutral-400 dark:disabled:text-neutral-600',
'disabled:cursor-not-allowed',
),
outline: cn(
outline: clsx(
'bg-transparent',
'text-swiss-black dark:text-neutral-200',
'border border-black/20 dark:border-white/20',
@@ -109,7 +109,7 @@ const variantStyles: Record<ButtonVariant, string> = {
'disabled:text-neutral-400 dark:disabled:text-neutral-600',
'disabled:cursor-not-allowed',
),
ghost: cn(
ghost: clsx(
'bg-transparent',
'text-secondary',
'border border-transparent',
@@ -119,7 +119,7 @@ const variantStyles: Record<ButtonVariant, string> = {
'disabled:text-neutral-400 dark:disabled:text-neutral-600',
'disabled:cursor-not-allowed',
),
icon: cn(
icon: clsx(
'bg-surface dark:bg-dark-bg',
'text-secondary',
'border border-transparent',
@@ -130,8 +130,8 @@ const variantStyles: Record<ButtonVariant, string> = {
'disabled:text-neutral-400 dark:disabled:text-neutral-600',
'disabled:cursor-not-allowed',
),
tertiary: cn(
// Font override — must come after base in cn() to win via tailwind-merge
tertiary: clsx(
// Font override — must come after base in clsx() to win via tailwind-merge
'font-secondary font-medium normal-case tracking-normal',
// Inactive state
'bg-transparent',
@@ -175,7 +175,7 @@ const activeStyles: Partial<Record<ButtonVariant, string>> = {
icon: 'bg-paper dark:bg-paper text-brand border-subtle',
};
const classes = $derived(cn(
const classes = $derived(clsx(
// Base
'inline-flex items-center justify-center',
'font-primary font-bold tracking-tight uppercase',

4
src/shared/ui/Button/ButtonGroup.svelte
View File

@@ -4,7 +4,7 @@
Use for segmented controls, view toggles, or any mutually exclusive button set.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
@@ -23,7 +23,7 @@ let { children, class: className, ...rest }: Props = $props();
</script>
<div
class={cn(
class={clsx(
'flex items-center gap-1 p-1',
'bg-surface dark:bg-dark-bg',
'border border-subtle',

8
src/shared/ui/ComboControl/ComboControl.svelte
View File

@@ -5,12 +5,12 @@
-->
<script lang="ts">
import type { TypographyControl } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Slider } from '$shared/ui';
import { Button } from '$shared/ui/Button';
import MinusIcon from '@lucide/svelte/icons/minus';
import PlusIcon from '@lucide/svelte/icons/plus';
import { Popover } from 'bits-ui';
import clsx from 'clsx';
import TechText from '../TechText/TechText.svelte';
interface Props {
@@ -78,7 +78,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
-->
{#if reduced}
<div
class={cn(
class={clsx(
'flex gap-4 items-end w-full',
className,
)}
@@ -98,7 +98,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
<!-- ── FULL MODE ──────────────────────────────────────────────────────────────── -->
{:else}
<div class={cn('flex items-center px-1 relative', className)}>
<div class={clsx('flex items-center px-1 relative', className)}>
<!-- Decrease button -->
<Button
variant="icon"
@@ -119,7 +119,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
{#snippet child({ props })}
<button
{...props}
class={cn(
class={clsx(
'flex flex-col items-center justify-center w-14 py-1',
'select-none rounded-none transition-all duration-150',
'border border-transparent',

4
src/shared/ui/ControlGroup/ControlGroup.svelte
View File

@@ -3,7 +3,7 @@
Labeled container for form controls
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
interface Props {
@@ -24,7 +24,7 @@ interface Props {
const { label, children, class: className }: Props = $props();
</script>
<div class={cn('flex flex-col gap-3 py-6 border-b border-subtle last:border-0', className)}>
<div class={clsx('flex flex-col gap-3 py-6 border-b border-subtle last:border-0', className)}>
<div class="flex justify-between items-center text-xs font-primary font-bold tracking-tight text-neutral-900 dark:text-neutral-100 uppercase leading-none">
{label}
</div>

4
src/shared/ui/Divider/Divider.svelte
View File

@@ -3,7 +3,7 @@
1px separator line, horizontal or vertical.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
interface Props {
/**
@@ -24,7 +24,7 @@ let {
</script>
<div
class={cn(
class={clsx(
'bg-black/10 dark:bg-white/10',
orientation === 'horizontal' ? 'w-full h-px' : 'w-px h-full',
className,

4
src/shared/ui/FilterGroup/FilterGroup.svelte
View File

@@ -4,11 +4,11 @@
-->
<script lang="ts">
import type { Filter } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Button } from '$shared/ui';
import { Label } from '$shared/ui';
import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
import clsx from 'clsx';
import { cubicOut } from 'svelte/easing';
import {
draw,
@@ -68,7 +68,7 @@ $effect(() => {
</svg>
{/snippet}
<div class={cn('flex flex-col', className)}>
<div class={clsx('flex flex-col', className)}>
<Label
variant="default"
size="sm"

6
src/shared/ui/Footnote/Footnote.svelte
View File

@@ -3,7 +3,7 @@
Provides classes for styling footnotes
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
interface Props {
@@ -26,14 +26,14 @@ const { children, class: className, render }: Props = $props();
{#if render}
{@render render({
class: cn(
class: clsx(
'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
className,
),
})}
{:else if children}
<span
class={cn(
class={clsx(
'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
className,
)}

10
src/shared/ui/Input/Input.svelte
View File

@@ -3,8 +3,8 @@
design-system input. Zero border-radius, Space Grotesk, precise states.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import XIcon from '@lucide/svelte/icons/x';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
import { cubicOut } from 'svelte/easing';
import type { HTMLInputAttributes } from 'svelte/elements';
@@ -90,7 +90,7 @@ const hasRightSlot = $derived(!!rightIcon || showClearButton);
const cfg = $derived(inputSizeConfig[size]);
const styles = $derived(inputVariantConfig[variant]);
const inputClasses = $derived(cn(
const inputClasses = $derived(clsx(
'font-primary rounded-none outline-none transition-all duration-200',
'text-neutral-900 dark:text-neutral-100',
'placeholder:text-neutral-400 dark:placeholder:text-neutral-600',
@@ -107,8 +107,8 @@ const inputClasses = $derived(cn(
));
</script>
<div class={cn('flex flex-col gap-1', fullWidth && 'w-full')}>
<div class={cn('relative group', fullWidth && 'w-full')}>
<div class={clsx('flex flex-col gap-1', fullWidth && 'w-full')}>
<div class={clsx('relative group', fullWidth && 'w-full')}>
<!-- Left icon slot -->
{#if leftIcon}
<div class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-600 pointer-events-none z-10 flex items-center">
@@ -147,7 +147,7 @@ const inputClasses = $derived(cn(
<!-- Helper / error text -->
{#if helperText}
<span
class={cn(
class={clsx(
'text-2xs font-mono tracking-wide px-1',
error ? 'text-brand ' : 'text-secondary',
)}

4
src/shared/ui/Label/Label.svelte
View File

@@ -3,7 +3,7 @@
Inline monospace label. The base primitive for all micrographic text.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
import {
type LabelFont,
@@ -72,7 +72,7 @@ let {
</script>
<span
class={cn(
class={clsx(
'font-mono tracking-widest leading-none',
'inline-flex items-center gap-1.5',
font === 'primary' && 'font-primary tracking-tight',

4
src/shared/ui/Logo/Logo.svelte
View File

@@ -3,8 +3,8 @@
Project logo with apropriate styles
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Badge } from '$shared/ui';
import clsx from 'clsx';
interface Props {
/**
@@ -18,7 +18,7 @@ const { class: className }: Props = $props();
const title = 'GLYPHDIFF';
</script>
<div class={cn('flex items-center gap-2 md:gap-3 select-none', className)}>
<div class={clsx('flex items-center gap-2 md:gap-3 select-none', className)}>
<h1 class="font-logo font-extrabold text-base md:text-xl tracking-tight text-swiss-black dark:text-neutral-200">
{title}
</h1>

4
src/shared/ui/PerspectivePlan/PerspectivePlan.svelte
View File

@@ -5,7 +5,7 @@
-->
<script lang="ts">
import type { PerspectiveManager } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import { type Snippet } from 'svelte';
interface Props {
@@ -73,7 +73,7 @@ const isVisible = $derived(manager.isFront);
</script>
<div
class={cn('will-change-transform', className)}
class={clsx('will-change-transform', className)}
style:transform-style="preserve-3d"
style:transform={style?.transform}
style:filter={style?.filter}

4
src/shared/ui/Section/SectionHeader/SectionHeader.svelte
View File

@@ -3,8 +3,8 @@
Numbered section heading with optional subtitle and pulse dot.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Label } from '$shared/ui';
import clsx from 'clsx';
interface Props {
/**
@@ -41,7 +41,7 @@ let {
const indexStr = $derived(String(index).padStart(2, '0'));
</script>
<div class={cn('flex items-center gap-3 md:gap-4 mb-2', className)}>
<div class={clsx('flex items-center gap-3 md:gap-4 mb-2', className)}>
<div class="flex items-center gap-2">
{#if pulse}
<span class="w-1.5 h-1.5 bg-brand rounded-full animate-pulse"></span>

4
src/shared/ui/Section/SectionSeparator/SectionSeparator.svelte
View File

@@ -3,7 +3,7 @@
A horizontal separator line used to visually separate sections within a page.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
interface Props {
/**
@@ -15,4 +15,4 @@ interface Props {
const { class: className = '' }: Props = $props();
</script>
<div class={cn('w-full h-px bg-swiss-black/5 dark:bg-white/10 my-8 md:my-12', className)}></div>
<div class={clsx('w-full h-px bg-swiss-black/5 dark:bg-white/10 my-8 md:my-12', className)}></div>

4
src/shared/ui/SidebarContainer/SidebarContainer.svelte
View File

@@ -4,7 +4,7 @@
-->
<script lang="ts">
import type { ResponsiveManager } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
import { getContext } from 'svelte';
import { cubicOut } from 'svelte/easing';
@@ -79,7 +79,7 @@ function close() {
The inner div stays w-80 so Sidebar layout never reflows mid-animation.
-->
<div
class={cn(
class={clsx(
'shrink-0 z-30 h-full relative',
'overflow-hidden',
'will-change-[width]',

4
src/shared/ui/Skeleton/Skeleton.svelte
View File

@@ -3,7 +3,7 @@
Generic loading placeholder with shimmer animation.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type { HTMLAttributes } from 'svelte/elements';
interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -18,7 +18,7 @@ let { class: className, animate = true, ...rest }: Props = $props();
</script>
<div
class={cn(
class={clsx(
'rounded-md bg-background-subtle/50 backdrop-blur-sm',
animate && 'animate-pulse',
className,

4
src/shared/ui/Stat/Stat.svelte
View File

@@ -3,8 +3,8 @@
A single key:value pair in Space Mono. Optional trailing divider.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Label } from '$shared/ui';
import clsx from 'clsx';
import type { ComponentProps } from 'svelte';
interface Props extends Pick<ComponentProps<typeof Label>, 'variant'> {
@@ -36,7 +36,7 @@ let {
}: Props = $props();
</script>
<div class={cn('flex items-center gap-1', className)}>
<div class={clsx('flex items-center gap-1', className)}>
<Label variant="muted" size="xs">{label}:</Label>
<Label {variant} size="xs" bold>{value}</Label>
</div>

4
src/shared/ui/Stat/StatGroup.svelte
View File

@@ -3,8 +3,8 @@
Renders multiple Stat components in a row with auto-separators.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Stat } from '$shared/ui';
import clsx from 'clsx';
import type { ComponentProps } from 'svelte';
interface StatItem extends Partial<Pick<ComponentProps<typeof Stat>, 'variant'>> {
@@ -26,7 +26,7 @@ interface Props {
let { stats, class: className }: Props = $props();
</script>
<div class={cn('flex items-center gap-4', className)}>
<div class={clsx('flex items-center gap-4', className)}>
{#each stats as stat, i}
<Stat
label={stat.label}

4
src/shared/ui/TechText/TechText.svelte
View File

@@ -3,13 +3,13 @@
Monospace <code> element for technical values, measurements, identifiers.
-->
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
type LabelSize,
type LabelVariant,
labelSizeConfig,
labelVariantConfig,
} from '$shared/ui/Label/config';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
interface Props {
@@ -42,7 +42,7 @@ let {
</script>
<code
class={cn(
class={clsx(
'font-mono tracking-tight tabular-nums',
labelSizeConfig[size],
labelVariantConfig[variant],

6
src/shared/ui/VirtualList/VirtualList.svelte
View File

@@ -11,7 +11,7 @@
<script lang="ts" generics="T">
import { createVirtualizer } from '$shared/lib';
import { throttle } from '$shared/lib/utils';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import clsx from 'clsx';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
@@ -295,13 +295,13 @@ $effect(() => {
{/snippet}
{#if useWindowScroll}
<div class={cn('relative w-full', className)} bind:this={viewportRef} {...rest}>
<div class={clsx('relative w-full', className)} bind:this={viewportRef} {...rest}>
{@render content()}
</div>
{:else}
<div
bind:this={viewportRef}
class={cn(
class={clsx(
'relative overflow-y-auto overflow-x-hidden',
'rounded-md bg-background',
'w-full',