negodesign 0.0.7 → 0.0.8

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

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import * as Popover from '../popover';
+	import Button from '../button/button.svelte';
+	import * as Command from '../command';
+	import { ScrollArea } from '../scroll-area';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import { cn } from '../../../utils.js';
+	import Flag from './flag.svelte';
+	import type { Country, CountryCode } from 'svelte-tel-input/types';
+
+	interface Props {
+		/** List of countries */
+		countries: Country[];
+		disabled?: boolean;
+		selected?: CountryCode | null;
+		onselect?: (val: CountryCode | null) => void;
+		/** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
+		order?: (a: Country, b: Country) => number;
+	}
+
+	let {
+		countries,
+		disabled = false,
+		selected = $bindable(null),
+		onselect = undefined,
+		order = (a, b) => {
+			return a.name.localeCompare(b.name);
+		}
+	}: Props = $props();
+
+	let selectedCountry = $derived(countries.find((a) => a.iso2 == selected));
+
+	let open = $state(false);
+	let selectedValue = $state(false);
+
+	function selectCountry(country: Country) {
+		selected = country.iso2;
+		selectedValue = true;
+		open = false;
+		onselect?.(selected);
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				type="button"
+				variant="outline"
+				class={cn('flex shrink-0 gap-1 rounded-l-lg rounded-r-none px-3')}
+				{disabled}
+			>
+				<Flag country={selectedCountry} />
+				<ChevronsUpDownIcon
+					class={cn('-mr-2 h-4 w-4 opacity-50', disabled ? 'hidden' : 'opacity-100')}
+				/>
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content
+		class="w-[300px] p-0"
+		align="start"
+		onCloseAutoFocus={(e) => {
+			if (selectedValue) {
+				selectedValue = false;
+				e.preventDefault();
+			}
+		}}
+	>
+		<Command.Root>
+			<Command.Input placeholder="Search..." />
+			<Command.List>
+				<ScrollArea class="h-72">
+					<Command.Empty>No country found.</Command.Empty>
+					<Command.Group class="overflow-clip">
+						{#each countries.sort(order) as country (country.id)}
+							<Command.Item
+								class="gap-2 [&_.cn-command-item-indicator]:hidden"
+								value={country.name}
+								onSelect={() => selectCountry(country)}
+							>
+								<Flag {country} />
+								<span class="flex-1 text-sm">{country.name}</span>
+								<span class="text-foreground/50 text-sm">
+									+{country.dialCode}
+								</span>
+								<div class="w-4">
+									{#if country.iso2 == selected}
+										<CheckIcon class="phone-input-check-icon size-4" />
+									{/if}
+								</div>
+							</Command.Item>
+						{/each}
+					</Command.Group>
+				</ScrollArea>
+			</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>

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

@@ -0,0 +1,13 @@
+import type { Country, CountryCode } from 'svelte-tel-input/types';
+interface Props {
+    /** List of countries */
+    countries: Country[];
+    disabled?: boolean;
+    selected?: CountryCode | null;
+    onselect?: (val: CountryCode | null) => void;
+    /** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
+    order?: (a: Country, b: Country) => number;
+}
+declare const CountrySelector: import("svelte").Component<Props, {}, "selected">;
+type CountrySelector = ReturnType<typeof CountrySelector>;
+export default CountrySelector;

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Country } from 'svelte-tel-input/types';
+	import { getFlag } from './flags';
+
+	interface Props {
+		country?: Country | null;
+	}
+
+	let { country = null }: Props = $props();
+</script>
+
+<span
+	class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm [&>svg]:h-4! [&>svg]:w-6!"
+>
+	{#await getFlag(country) then flag}
+		{#if flag}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+			{@html flag}
+		{/if}
+	{/await}
+</span>

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

@@ -0,0 +1,7 @@
+import type { Country } from 'svelte-tel-input/types';
+interface Props {
+    country?: Country | null;
+}
+declare const Flag: import("svelte").Component<Props, {}, "">;
+type Flag = ReturnType<typeof Flag>;
+export default Flag;

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

@@ -0,0 +1,2 @@
+import type { Country } from 'svelte-tel-input/types';
+export declare function getFlag(country: Country | null): Promise<string | null>;

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

@@ -0,0 +1,10 @@
+import { hasFlag } from 'country-flag-icons';
+let flagIcons = null;
+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;
+}

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

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

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

@@ -0,0 +1,2 @@
+import PhoneInput, { defaultOptions } from './phone-input.svelte';
+export { PhoneInput, defaultOptions };

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

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+	export const defaultOptions: TelInputOptions = {
+		spaces: true,
+		autoPlaceholder: true
+	};
+</script>
+
+<script lang="ts">
+	import CountrySelector 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,
+		country = $bindable(defaultCountry),
+		options = defaultOptions,
+		placeholder,
+		readonly = false,
+		disabled = false,
+		value = $bindable(''),
+		valid = $bindable(true),
+		detailedValue = $bindable(null),
+		order = undefined,
+		name = undefined,
+		...rest
+	}: PhoneInputProps = $props();
+
+	let el: HTMLInputElement | undefined = $state();
+
+	function focus() {
+		// sort of an after update kinda thing
+		setTimeout(() => {
+			el?.focus();
+		}, 0);
+	}
+</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}
+		{disabled}
+		{placeholder}
+		bind:el
+		{options}
+		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',
+			'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
+		)}
+		{...rest}
+	/>
+</div>

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,16 @@
+import type { Country, CountryCode, DetailedValue, TelInputOptions } from 'svelte-tel-input/types';
+export type PhoneInputProps = {
+    country?: CountryCode | null;
+    defaultCountry?: CountryCode | null;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    class?: string;
+    value?: string;
+    valid?: boolean;
+    detailedValue?: Partial<DetailedValue> | null;
+    options?: TelInputOptions;
+    order?: ((a: Country, b: Country) => number) | undefined;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import Root from './popover.svelte';
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Portal from './popover-portal.svelte';
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };

package/dist/components/ui/popover/index.js

@@ -0,0 +1,11 @@
+import Root from './popover.svelte';
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Portal from './popover-portal.svelte';
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, 
+//
+Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };

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

@@ -0,0 +1,7 @@
+<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} />

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

@@ -0,0 +1,4 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+declare const PopoverClose: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
+type PopoverClose = ReturnType<typeof PopoverClose>;
+export default PopoverClose;

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

@@ -0,0 +1,31 @@
+<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';
+
+	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-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
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>

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

@@ -0,0 +1,10 @@
+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>>;
+};
+declare const PopoverContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-description"
+	class={cn('text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const PopoverDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverDescription = ReturnType<typeof PopoverDescription>;
+export default PopoverDescription;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-header"
+	class={cn('flex flex-col gap-1 text-sm', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const PopoverHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverHeader = ReturnType<typeof PopoverHeader>;
+export default PopoverHeader;

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

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

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

@@ -0,0 +1,3 @@
+declare const PopoverPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type PopoverPortal = ReturnType<typeof PopoverPortal>;
+export default PopoverPortal;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="popover-title" class={cn('font-medium', className)} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const PopoverTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverTitle = ReturnType<typeof PopoverTitle>;
+export default PopoverTitle;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '../../../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}
+/>

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

@@ -0,0 +1,4 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+declare const PopoverTrigger: import("svelte").Component<PopoverPrimitive.TriggerProps, {}, "ref">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
+export default PopoverTrigger;

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

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

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

@@ -0,0 +1,3 @@
+declare const Popover: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/ui/scroll-area/index.d.ts

@@ -0,0 +1,3 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+export { Root, Scrollbar, Root as ScrollArea, Scrollbar as ScrollAreaScrollbar };

package/dist/components/ui/scroll-area/index.js

@@ -0,0 +1,5 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+export { Root, Scrollbar, 
+//,
+Root as ScrollArea, Scrollbar as ScrollAreaScrollbar };

package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
+	{orientation}
+	class={cn(
+		'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="bg-border relative flex-1 rounded-full"
+	/>
+</ScrollAreaPrimitive.Scrollbar>

package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+declare const ScrollAreaScrollbar: import("svelte").Component<Omit<ScrollAreaPrimitive.ScrollbarProps, "child">, {}, "ref">;
+type ScrollAreaScrollbar = ReturnType<typeof ScrollAreaScrollbar>;
+export default ScrollAreaScrollbar;

package/dist/components/ui/scroll-area/scroll-area.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { Scrollbar } from './index.js';
+	import { cn, type WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		viewportRef = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		scrollbarXClasses = '',
+		scrollbarYClasses = '',
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn('relative', className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === 'vertical' || orientation === 'both'}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === 'horizontal' || orientation === 'both'}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>

package/dist/components/ui/scroll-area/scroll-area.svelte.d.ts

@@ -0,0 +1,11 @@
+import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+import { type WithoutChild } from '../../../utils.js';
+type $$ComponentProps = WithoutChild<ScrollAreaPrimitive.RootProps> & {
+    orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+    scrollbarXClasses?: string | undefined;
+    scrollbarYClasses?: string | undefined;
+    viewportRef?: HTMLElement | null;
+};
+declare const ScrollArea: import("svelte").Component<$$ComponentProps, {}, "ref" | "viewportRef">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

package/dist/components/ui/sidebar/sidebar-menu-button.svelte.d.ts

@@ -1,35 +1,35 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const sidebarMenuButtonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-9 text-sm";
+        sm: "h-8 text-xs";
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!";
     };
 }, undefined, "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
     variant: {
-        default: string;
-        outline: string;
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-9 text-sm";
+        sm: "h-8 text-xs";
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+        outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "h-9 text-sm";
+        sm: "h-8 text-xs";
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!";
     };
-}, undefined, "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", unknown, unknown, undefined>>;
+}, undefined>>;
 export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>["variant"];
 export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
 import * as Tooltip from "../tooltip/index.js";