negodesign 0.0.71 → 0.0.72

package/dist/components/ui/phone-input/flags.js

@@ -1,10 +1,6 @@
-import { hasFlag } from 'country-flag-icons';
-let flagIcons = null;
+export function hasFlag(code) {
+    return false;
+}
 export async function getFlag(country) {
-    if (!country)
-        return null;
-    if (!hasFlag(country.iso2))
-        return null;
-    flagIcons ??= await import('country-flag-icons/string/3x2');
-    return flagIcons[country.iso2] ?? null;
+    return null;
 }

package/dist/components/ui/phone-input/index.d.ts

@@ -1,3 +1,3 @@
 import PhoneInput, { defaultOptions } from './phone-input.svelte';
 export { PhoneInput, defaultOptions };
-export type { PhoneInputProps } from './types';
+export type { PhoneInputProps, Country, CountryCode, DetailedValue, TelInputOptions } from './types';

package/dist/components/ui/phone-input/phone-input.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+	import type { TelInputOptions } from './types';
+
 	export const defaultOptions: TelInputOptions = {
 		spaces: true,
 		autoPlaceholder: true
@@ -6,16 +8,13 @@
 </script>
 
 <script lang="ts">
-	import CountrySelector from './country-selector.svelte';
+	import CountrySelector, { COUNTRIES } from './country-selector.svelte';
 	import { type PhoneInputProps } from '.';
 	import { cn } from '../../../utils.js';
-	import { TelInput, countries } from 'svelte-tel-input';
-	import 'svelte-tel-input/styles/flags.css';
-	import type { TelInputOptions } from 'svelte-tel-input/types';
 
 	let {
 		class: className = undefined,
-		defaultCountry = null,
+		defaultCountry = 'ao',
 		country = $bindable(defaultCountry),
 		options = defaultOptions,
 		placeholder,
@@ -23,6 +22,7 @@
 		disabled = false,
 		value = $bindable(''),
 		valid = $bindable(true),
+		// eslint-disable-next-line no-useless-assignment
 		detailedValue = $bindable(null),
 		order = undefined,
 		name = undefined,
@@ -30,34 +30,119 @@
 	}: PhoneInputProps = $props();
 
 	let el: HTMLInputElement | undefined = $state();
+	let dialCode = $state('');
+	let number = $state('');
+	let displayNumber = $state('');
+	let lastEmitted = $state('');
+
+	const currentCountry = $derived(COUNTRIES.find((c) => c.iso2 === country) ?? null);
+
+	function nationalDigits(input: string): string {
+		return input.replace(/\D/g, '');
+	}
+
+	function formatNational(input: string): string {
+		const digits = nationalDigits(input);
+		if (!options?.spaces) return digits;
+		return digits.match(/.{1,3}/g)?.join(' ') ?? '';
+	}
+
+	function formatFull(code: string, input: string): string {
+		const national = nationalDigits(input);
+		if (!national) return '';
+		return options?.spaces ? `+${code} ${formatNational(national)}` : `+${code}${national}`;
+	}
+
+	function parseValue(input: string): { code: string; number: string } | null {
+		const digits = nationalDigits(input);
+		if (!digits) return null;
+		for (const c of COUNTRIES) {
+			if (digits.startsWith(c.dialCode) && digits.length > c.dialCode.length) {
+				return { code: c.dialCode, number: digits.slice(c.dialCode.length) };
+			}
+		}
+		const exact = COUNTRIES.find((c) => digits === c.dialCode);
+		if (exact) return { code: exact.dialCode, number: '' };
+		return { code: '', number: digits };
+	}
+
+	function isValidNumber(input: string): boolean {
+		const length = nationalDigits(input).length;
+		if (!length) return true;
+		return length >= 6 && length <= 15;
+	}
+
+	function handleNumberInput(e: Event) {
+		const input = (e.currentTarget as HTMLInputElement).value;
+		displayNumber = input;
+		number = input.replace(/[^\d]/g, '');
+	}
 
 	function focus() {
-		// sort of an after update kinda thing
 		setTimeout(() => {
 			el?.focus();
 		}, 0);
 	}
+
+	$effect(() => {
+		const full = formatFull(dialCode, number);
+		if (value !== full) {
+			value = full;
+			lastEmitted = full;
+		}
+		valid = isValidNumber(number);
+		detailedValue = {
+			country: currentCountry,
+			code: dialCode,
+			number: nationalDigits(number)
+		};
+	});
+
+	$effect(() => {
+		const incoming = value;
+		if (incoming === lastEmitted) return;
+		lastEmitted = incoming;
+		const parsed = parseValue(incoming);
+		if (!parsed) {
+			if (!nationalDigits(incoming)) {
+				number = '';
+				displayNumber = '';
+			}
+			return;
+		}
+		if (parsed.code) {
+			const matched = COUNTRIES.find((c) => c.dialCode === parsed.code);
+			if (matched && matched.iso2 !== country) country = matched.iso2;
+		}
+		dialCode = parsed.code;
+		number = parsed.number;
+		displayNumber = formatNational(parsed.number);
+	});
 </script>
 
-<div class="flex place-items-center">
-	<CountrySelector {order} {countries} bind:selected={country} onselect={focus} />
-	<TelInput
-		{name}
-		bind:country
-		bind:detailedValue
-		bind:value
-		bind:valid
-		{readonly}
+<div class={cn('flex h-9 w-full min-w-0 items-center', className)}>
+	<CountrySelector
+		{order}
 		{disabled}
+		bind:selected={country}
+		bind:dialCode
+		onselect={focus}
+	/>
+	<input
+		type="tel"
+		{name}
+		bind:this={el}
+		bind:value={displayNumber}
+		oninput={handleNumberInput}
 		{placeholder}
-		bind:el
-		{options}
+		readonly={readonly}
+		{disabled}
+		aria-invalid={!valid}
 		class={cn(
-			'border-input border-l-none bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-l-none rounded-r-md border-y border-r px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'border-input border-l-none bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 flex-1 rounded-r-md rounded-l-none border-y border-r px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-			className
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
 		)}
 		{...rest}
 	/>
-</div>
+</div>

package/dist/components/ui/phone-input/phone-input.svelte.d.ts

@@ -1,7 +1,6 @@
+import type { TelInputOptions } from './types';
 export declare const defaultOptions: TelInputOptions;
 import { type PhoneInputProps } from '.';
-import 'svelte-tel-input/styles/flags.css';
-import type { TelInputOptions } from 'svelte-tel-input/types';
 declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "value" | "country" | "valid" | "detailedValue">;
 type PhoneInput = ReturnType<typeof PhoneInput>;
 export default PhoneInput;

package/dist/components/ui/phone-input/types.d.ts

@@ -1,4 +1,19 @@
-import type { Country, CountryCode, DetailedValue, TelInputOptions } from 'svelte-tel-input/types';
+export type CountryCode = string;
+export type Country = {
+    id: string;
+    iso2: string;
+    name: string;
+    dialCode: string;
+};
+export type DetailedValue = {
+    country: Country | null;
+    code: string;
+    number: string;
+};
+export type TelInputOptions = {
+    spaces?: boolean;
+    autoPlaceholder?: boolean;
+};
 export type PhoneInputProps = {
     country?: CountryCode | null;
     defaultCountry?: CountryCode | null;

package/dist/components/ui/popover/popover-close.svelte

@@ -1,7 +1,26 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { getPopoverContext } from "./popover-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+	let {
+		ref = $bindable<HTMLButtonElement | null>(null),
+		children,
+		...restProps
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		children?: Snippet;
+	} = $props();
+
+	const store = getPopoverContext();
 </script>
 
-<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
+<button
+	bind:this={ref}
+	type="button"
+	data-slot="popover-close"
+	onclick={() => store.closeMenu()}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

package/dist/components/ui/popover/popover-close.svelte.d.ts

@@ -1,4 +1,9 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-declare const PopoverClose: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    children?: Snippet;
+};
+declare const PopoverClose: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type PopoverClose = ReturnType<typeof PopoverClose>;
 export default PopoverClose;

package/dist/components/ui/popover/popover-content.svelte

@@ -1,31 +1,93 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
-	import PopoverPortal from './popover-portal.svelte';
-	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
-	import type { ComponentProps } from 'svelte';
+	import { getPopoverContext } from "./popover-context.svelte.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
-		class: className,
+		ref = $bindable<HTMLDivElement | null>(null),
+		align = "center",
+		side = "bottom",
 		sideOffset = 4,
-		align = 'center',
 		portalProps,
+		class: className,
+		children,
 		...restProps
-	}: PopoverPrimitive.ContentProps & {
-		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		align?: "start" | "center" | "end";
+		side?: "top" | "right" | "bottom" | "left";
+		sideOffset?: number;
+		portalProps?: Record<string, unknown>;
+		class?: string;
+		children?: Snippet;
 	} = $props();
+
+	const store = getPopoverContext();
+
+	$effect(() => {
+		if (!store.open) return;
+		function handlePointerDown(event: PointerEvent) {
+			const target = event.target as Node;
+			if (store.anchorEl?.contains(target)) return;
+			if (ref?.contains(target)) return;
+			store.closeMenu();
+		}
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === "Escape") {
+				store.closeMenu();
+				store.anchorEl?.focus();
+			}
+		}
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeydown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeydown);
+		};
+	});
+
+	let positionClasses = $derived.by(() => {
+		const horizontal = side === "right" || side === "left";
+		if (horizontal) {
+			const sideClass = side === "left" ? "right-full" : "left-full";
+			const alignClass =
+				align === "end"
+					? "bottom-0"
+					: align === "start"
+						? "top-0"
+						: "top-1/2 -translate-y-1/2";
+			const margin =
+				side === "left"
+					? `margin-right: ${sideOffset + 4}px`
+					: `margin-left: ${sideOffset + 4}px`;
+			return { sideClass, alignClass, margin };
+		}
+		const sideClass = side === "top" ? "bottom-full" : "top-full";
+		const alignClass =
+			align === "end" ? "end-0" : align === "start" ? "start-0" : "start-1/2 -translate-x-1/2";
+		const margin =
+			side === "top"
+				? `margin-bottom: ${sideOffset + 4}px`
+				: `margin-top: ${sideOffset + 4}px`;
+		return { sideClass, alignClass, margin };
+	});
 </script>
 
-<PopoverPortal {...portalProps}>
-	<PopoverPrimitive.Content
-		bind:ref
+{#if store.open}
+	<div
+		bind:this={ref}
 		data-slot="popover-content"
-		{sideOffset}
-		{align}
+		data-state={store.open ? "open" : "closed"}
+		style={positionClasses.margin}
 		class={cn(
-			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden duration-100',
-			className
+			"absolute z-50 w-72 rounded-md border bg-popover p-4 text-sm text-popover-foreground shadow-md outline-none animate-zoom-in",
+			positionClasses.sideClass,
+			positionClasses.alignClass,
+			className,
 		)}
 		{...restProps}
-	/>
-</PopoverPortal>
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/ui/popover/popover-content.svelte.d.ts

@@ -1,9 +1,13 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-import PopoverPortal from './popover-portal.svelte';
-import { type WithoutChildrenOrChild } from '../../../utils.js';
-import type { ComponentProps } from 'svelte';
-type $$ComponentProps = PopoverPrimitive.ContentProps & {
-    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    portalProps?: Record<string, unknown>;
+    class?: string;
+    children?: Snippet;
 };
 declare const PopoverContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type PopoverContent = ReturnType<typeof PopoverContent>;

package/dist/components/ui/popover/popover-context.svelte.d.ts

@@ -0,0 +1,13 @@
+export type PopoverStore = {
+    open: boolean;
+    anchorId: string;
+    anchorEl: HTMLElement | null;
+    clickEvent: MouseEvent | null;
+    toggle: () => void;
+    openMenu: () => void;
+    closeMenu: () => void;
+    setAnchor: (el: HTMLElement | null) => void;
+};
+export declare function generatePopoverId(): string;
+export declare function setPopoverContext(store: PopoverStore): PopoverStore;
+export declare function getPopoverContext(): PopoverStore;

package/dist/components/ui/popover/popover-context.svelte.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+const POPOVER_CONTEXT_KEY = Symbol("popover-context");
+let popoverIdCounter = 0;
+export function generatePopoverId() {
+    popoverIdCounter += 1;
+    return `popover-${popoverIdCounter.toString(36)}`;
+}
+export function setPopoverContext(store) {
+    return setContext(POPOVER_CONTEXT_KEY, store);
+}
+export function getPopoverContext() {
+    return getContext(POPOVER_CONTEXT_KEY);
+}

package/dist/components/ui/popover/popover-portal.svelte

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

package/dist/components/ui/popover/popover-portal.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const PopoverPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const PopoverPortal: import("svelte").Component<$$ComponentProps, {}, "">;
 type PopoverPortal = ReturnType<typeof PopoverPortal>;
 export default PopoverPortal;

package/dist/components/ui/popover/popover-trigger.svelte

@@ -1,17 +1,69 @@
 <script lang="ts">
-	import { cn } from '../../../utils.js';
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { getPopoverContext } from "./popover-context.svelte.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		// eslint-disable-next-line no-useless-assignment
+		ref = $bindable<HTMLButtonElement | null>(null),
 		class: className,
+		children,
+		child,
+		onclick,
 		...restProps
-	}: PopoverPrimitive.TriggerProps = $props();
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		children?: Snippet;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		onclick?: (event: MouseEvent) => void;
+	} = $props();
+
+	const store = getPopoverContext();
+
+	let anchorEl = $state<HTMLButtonElement | null>(null);
+
+	function handleClick(event: MouseEvent) {
+		store.clickEvent = event;
+		store.toggle();
+		onclick?.(event);
+	}
+
+	$effect(() => {
+		const el = (anchorEl ?? document.getElementById(store.anchorId)) as HTMLButtonElement | null;
+		if (el) {
+			store.setAnchor(el);
+			ref = el;
+			anchorEl = el;
+		}
+	});
 </script>
 
-<PopoverPrimitive.Trigger
-	bind:ref
-	data-slot="popover-trigger"
-	class={cn('', className)}
-	{...restProps}
-/>
+{#if child}
+	{@render child({
+		props: {
+			id: store.anchorId,
+			type: "button",
+			"aria-haspopup": "dialog",
+			"aria-expanded": store.open,
+			"data-state": store.open ? "open" : "closed",
+			onclick: handleClick,
+		},
+	})}
+{:else}
+	<button
+		bind:this={anchorEl}
+		type="button"
+		id={store.anchorId}
+		aria-haspopup="dialog"
+		aria-expanded={store.open}
+		data-state={store.open ? "open" : "closed"}
+		onclick={handleClick}
+		data-slot="popover-trigger"
+		class={cn("", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/ui/popover/popover-trigger.svelte.d.ts

@@ -1,4 +1,14 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-declare const PopoverTrigger: import("svelte").Component<PopoverPrimitive.TriggerProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
+    children?: Snippet;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    onclick?: (event: MouseEvent) => void;
+};
+declare const PopoverTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
 export default PopoverTrigger;

package/dist/components/ui/popover/popover.svelte

@@ -1,7 +1,54 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { generatePopoverId, setPopoverContext, type PopoverStore } from "./popover-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+	let {
+		open = $bindable<boolean>(),
+		defaultOpen = false,
+		onOpenChange,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		open?: boolean;
+		defaultOpen?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		children?: Snippet;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	let store: PopoverStore = $state({
+		open: open ?? defaultOpen ?? false,
+		anchorId: generatePopoverId(),
+		anchorEl: null,
+		clickEvent: null,
+		toggle: () => {
+			setOpen(!store.open);
+		},
+		openMenu: () => setOpen(true),
+		closeMenu: () => setOpen(false),
+		setAnchor: (el: HTMLElement | null) => {
+			store.anchorEl = el;
+		},
+	});
+
+	function setOpen(value: boolean) {
+		if (store.open === value) return;
+		store.open = value;
+		open = value;
+		onOpenChange?.(value);
+	}
+
+	$effect(() => {
+		if (open !== undefined && open !== store.open) {
+			store.open = open;
+			onOpenChange?.(open);
+		}
+	});
+
+	setPopoverContext(store);
 </script>
 
-<PopoverPrimitive.Root bind:open {...restProps} />
+<div class="relative" {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/popover/popover.svelte.d.ts

@@ -1,3 +1,11 @@
-declare const Popover: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: Snippet;
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/ui/separator/separator.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
+		orientation = "horizontal",
+		decorative = false,
 		class: className,
-		"data-slot": dataSlot = "separator",
 		...restProps
-	}: SeparatorPrimitive.RootProps = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: "horizontal" | "vertical";
+		decorative?: boolean;
+	} = $props();
 </script>
 
-<SeparatorPrimitive.Root
-	bind:ref
-	data-slot={dataSlot}
+<div
+	bind:this={ref}
+	data-slot="separator"
+	data-orientation={orientation}
+	role={decorative ? undefined : "separator"}
+	aria-orientation={decorative ? undefined : orientation}
 	class={cn(
-		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
-		// this is different in shadcn/ui but self-stretch breaks things for us
-		"data-[orientation=vertical]:h-full",
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
 		className
 	)}
 	{...restProps}
-/>
+></div>