@foxui/core 0.4.0

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { type WithElementRef } from 'bits-ui';
+	import { cn } from '../../utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: 'vertical' | 'horizontal' | 'both';
+	};
+
+	let {
+		ref = $bindable(null),
+		orientation = 'vertical',
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	function getOrientationClasses() {
+		if (orientation === 'vertical') return 'overflow-y-scroll';
+		if (orientation === 'horizontal') return 'overflow-x-scroll';
+		return 'overflow-y-scroll overflow-x-scroll';
+	}
+</script>
+
+<div class={cn('scrollbar', getOrientationClasses(), className)} {...restProps}>
+	{@render children?.()}
+</div>
+
+<style>
+	.scrollbar::-webkit-scrollbar-track {
+		background-color: transparent;
+	}
+
+	@supports (scrollbar-width: auto) {
+		.scrollbar {
+			scrollbar-color: var(--color-base-400) transparent;
+			scrollbar-width: thin;
+		}
+
+		:global(.dark .scrollbar) {
+			scrollbar-color: var(--color-base-800) transparent;
+		}
+	}
+
+	@supports not (scrollbar-width: auto) {
+		:global(.scrollbar::-webkit-scrollbar) {
+			width: 14px;
+			height: 14px;
+		}
+	}
+
+	.scrollbar::-webkit-scrollbar-thumb {
+		background-color: var(--color-base-400);
+		border-radius: 20px;
+		border: 4px solid transparent;
+		background-clip: content-box;
+	}
+
+	.scrollbar::-webkit-scrollbar-thumb:hover {
+		background-color: var(--color-base-500);
+	}
+
+	/* Dark mode rules */
+	:global(.dark .scrollbar::-webkit-scrollbar-thumb) {
+		background-color: var(--color-base-800);
+	}
+
+	:global(.dark .scrollbar::-webkit-scrollbar-thumb:hover) {
+		background-color: var(--color-base-700);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import { type WithElementRef } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: 'vertical' | 'horizontal' | 'both';
+};
+declare const ScrollArea: import("svelte").Component<Props, {}, "ref">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

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

@@ -0,0 +1 @@
+export { default as ScrollArea } from './ScrollArea.svelte';

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

@@ -0,0 +1 @@
+export { default as ScrollArea } from './ScrollArea.svelte';

package/dist/components/scroll-area/style.css

@@ -0,0 +1,41 @@
+.body::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+
+@supports (scrollbar-width: auto) {
+	body {
+		scrollbar-color: var(--color-base-400) transparent;
+		scrollbar-width: thin;
+	}
+
+	.dark body {
+		scrollbar-color: var(--color-base-800) transparent;
+	}
+}
+
+@supports not (scrollbar-width: auto) {
+	body::-webkit-scrollbar {
+		width: 14px;
+		height: 14px;
+	}
+}
+
+body::-webkit-scrollbar-thumb {
+	background-color: var(--color-base-400);
+	border-radius: 20px;
+	border: 4px solid transparent;
+	background-clip: content-box;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+	background-color: var(--color-base-500);
+}
+
+/* Dark mode rules */
+.dark body::-webkit-scrollbar-thumb {
+	background-color: var(--color-base-800);
+}
+
+.dark body::-webkit-scrollbar-thumb:hover {
+	background-color: var(--color-base-700);
+}

package/dist/components/select/Select.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { Select, type WithoutChildren } from 'bits-ui';
+
+	type Props = WithoutChildren<Select.RootProps> & {
+		placeholder?: string;
+		items: { value: string; label: string; disabled?: boolean }[];
+		contentProps?: WithoutChildren<Select.ContentProps>;
+	};
+
+	let { value = $bindable(), items, contentProps, placeholder, ...restProps }: Props = $props();
+
+	const selectedLabel = $derived(items.find((item) => item.value === value)?.label);
+</script>
+
+<Select.Root bind:value={value as never} {...restProps}>
+	<Select.Trigger>
+		<div
+			class="bg-accent-500/10 border-accent-700/20 text-accent-800 dark:text-accent-300 inline-flex min-w-28 items-center justify-between gap-1 rounded-2xl border px-3 py-1 font-medium"
+		>
+			{selectedLabel ? selectedLabel : placeholder}
+
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="2.5"
+				stroke="currentColor"
+				class="size-4"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+			</svg>
+		</div>
+	</Select.Trigger>
+	<Select.Portal>
+		<Select.Content
+			{...contentProps}
+			class={cn(
+				'bg-base-50/50 border-base-500/20 overflow-hidden rounded-2xl border shadow-lg backdrop-blur-xl',
+				'dark:bg-base-900/50 dark:border-base-500/10',
+				'motion-safe: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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				contentProps?.class
+			)}
+			sideOffset={6}
+		>
+			<Select.ScrollUpButton>up</Select.ScrollUpButton>
+			<Select.Viewport class="divide-base-300 dark:divide-base-800 divide-y text-sm">
+				{#each items as { value, label, disabled } (value)}
+					<Select.Item {value} {label} {disabled}>
+						{#snippet children({ selected })}
+							<div
+								class={cn(
+									'text-base-900 dark:text-base-200 group relative isolate flex min-w-28 cursor-pointer items-center gap-1 px-1 py-2 font-medium',
+									selected ? 'text-accent-700' : ''
+								)}
+							>
+								{#if selected}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="2.5"
+										stroke="currentColor"
+										class="size-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="m4.5 12.75 6 6 9-13.5"
+										/>
+									</svg>
+								{:else}
+									<div class="size-4"></div>
+
+									<div
+										class="group-hover:bg-base-300/20 dark:group-hover:bg-base-700/20 absolute inset-0 -z-10"
+									></div>
+								{/if}
+								{label}
+							</div>
+						{/snippet}
+					</Select.Item>
+				{/each}
+			</Select.Viewport>
+			<Select.ScrollDownButton>down</Select.ScrollDownButton>
+		</Select.Content>
+	</Select.Portal>
+</Select.Root>

package/dist/components/select/Select.svelte.d.ts

@@ -0,0 +1,13 @@
+import { Select, type WithoutChildren } from 'bits-ui';
+type Props = WithoutChildren<Select.RootProps> & {
+    placeholder?: string;
+    items: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    contentProps?: WithoutChildren<Select.ContentProps>;
+};
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/select/SelectChildren.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select, type WithoutChildren } from "bits-ui";
+
+	type Props = Select.RootProps & {
+		placeholder?: string;
+		contentProps?: WithoutChildren<Select.ContentProps>;
+	};
+
+	let {
+		value = $bindable(),
+		placeholder,
+		contentProps,
+		children,
+		...props
+	}: Props = $props();
+</script>
+ 
+<Select.Root bind:value={value as never} {...props}>
+	<Select.Trigger>
+		{value}
+	</Select.Trigger>
+	<Select.Portal>
+		<Select.Content {...contentProps}>
+			<Select.Viewport>
+				{children?.()}
+			</Select.Viewport>
+		</Select.Content>
+	</Select.Portal>
+</Select.Root>

package/dist/components/select/SelectChildren.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Select, type WithoutChildren } from "bits-ui";
+type Props = Select.RootProps & {
+    placeholder?: string;
+    contentProps?: WithoutChildren<Select.ContentProps>;
+};
+declare const SelectChildren: import("svelte").Component<Props, {}, "value">;
+type SelectChildren = ReturnType<typeof SelectChildren>;
+export default SelectChildren;

package/dist/components/select/SelectItem.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { Select } from 'bits-ui';
+
+	let { value = $bindable(), label, children: myChildren, ...props }: Select.ItemProps = $props();
+
+	console.log(value);
+</script>
+
+<Select.Item {value} {label} {...props}>
+	{#snippet children(props)}
+		{#if props.selected}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-6"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+			</svg>
+		{/if}
+
+		{#if myChildren}
+			{@render myChildren?.(props)}
+		{:else}
+			{label}
+		{/if}
+	{/snippet}
+</Select.Item>

package/dist/components/select/SelectItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select } from 'bits-ui';
+declare const SelectItem: import("svelte").Component<Select.ItemProps, {}, "value">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

package/dist/components/select/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SelectChildren } from './SelectChildren.svelte';
+export { default as SelectItem } from './SelectItem.svelte';
+export { default as Select } from './Select.svelte';

package/dist/components/select/index.js

@@ -0,0 +1,3 @@
+export { default as SelectChildren } from './SelectChildren.svelte';
+export { default as SelectItem } from './SelectItem.svelte';
+export { default as Select } from './Select.svelte';

package/dist/components/select-2/Select.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { Toolbar, type WithoutChildrenOrChild } from 'bits-ui';
+
+	type Item =
+		| {
+				label: string;
+				value: string;
+		  }
+		| string;
+
+	let {
+		ref = $bindable(null),
+
+		class: className,
+		items = $bindable([]),
+		selected = $bindable(),
+
+		...restProps
+	}: WithoutChildrenOrChild<Toolbar.RootProps> & {
+		selected?: string;
+		items: Item[];
+	} = $props();
+
+	if (!selected) {
+		selected = typeof items[0] === 'string' ? items[0] : items[0].value;
+	}
+</script>
+
+<Toolbar.Root bind:ref class={className} {...restProps}>
+	<Toolbar.Group bind:value={selected} type="single" class="flex items-center gap-x-1 text-sm">
+		{#each items as item}
+			<Toolbar.GroupItem
+				aria-label="align left"
+				value={typeof item === 'string' ? item : item.value}
+				class={[
+					'inline-flex cursor-pointer items-center justify-center rounded-2xl p-1 px-2 transition-all',
+					'text-base-600 hover:text-accent-600 dark:text-base-300 dark:hover:text-accent-400 outline-accent-300',
+					'dark:outline-accent-500/30 data-[state=on]:text-accent-600 dark:data-[state=on]:text-accent-400',
+					'dark:data-[state=on]:bg-accent-700/10 data-[state=on]:bg-accent-500/10 data-[state=on]:outline'
+				]}
+			>
+				{typeof item === 'string' ? item : item.label}
+			</Toolbar.GroupItem>
+		{/each}
+	</Toolbar.Group>
+</Toolbar.Root>

package/dist/components/select-2/Select.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Toolbar, type WithoutChildrenOrChild } from 'bits-ui';
+type Item = {
+    label: string;
+    value: string;
+} | string;
+type $$ComponentProps = WithoutChildrenOrChild<Toolbar.RootProps> & {
+    selected?: string;
+    items: Item[];
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "ref" | "items" | "selected">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/select-2/index.d.ts

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';

package/dist/components/select-2/index.js

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';

package/dist/components/sidebar/Sidebar.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils';
+	import { ScrollArea } from '../scroll-area';
+
+	const {
+		class: className,
+		mobileClasses,
+		children,
+		mobileOnly = false,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		mobileClasses?: string;
+		mobileOnly?: boolean;
+	} = $props();
+</script>
+
+<div
+	popover="auto"
+	id="mobile-menu"
+	class={cn(
+		'mobileMenuPopover border-base-200 bg-white/70 dark:border-base-300/10 dark:bg-base-950/50 my-2 ml-2 overflow-y-hidden rounded-2xl',
+		'inset-auto left-0 top-0 block h-[calc(100dvh-1rem)] w-72 border shadow-lg lg:hidden backdrop-blur-xl',
+		className,
+		mobileClasses
+	)}
+	{...restProps}
+>
+	<ScrollArea orientation="vertical" class="h-screen">
+		{@render children?.()}
+	</ScrollArea>
+</div>
+
+{#if !mobileOnly}
+	<div
+		class={cn(
+			'border-base-200 bg-base-50/50 dark:border-base-300/10 dark:bg-base-950/50 backdrop-blur-xl fixed my-1 ml-0.5 overflow-y-hidden rounded-2xl',
+			'inset-auto left-1 top-0 z-50 block h-[calc(100dvh-0.5rem)] w-72 border shadow-lg lg:hidden',
+			'hidden -translate-x-72 border lg:block lg:w-72 lg:translate-x-0',
+			className
+		)}
+		{...restProps}
+	>
+		<ScrollArea orientation="vertical" class="h-screen overflow-y-scroll">
+			{@render children?.()}
+		</ScrollArea>
+	</div>
+{/if}
+
+<style>
+	.mobileMenuPopover {
+		/* Closed state transformed off the screen */
+		transform: translateX(-110%);
+		transition:
+			transform 0.1s,
+			overlay 0.1s ease-out;
+
+		/* Styles while the menu is open */
+		&:popover-open {
+			transform: translateX(0);
+		}
+
+		/* Backdrop that overlays other content */
+		&::backdrop {
+			background-color: rgba(0, 0, 0, 0.5);
+		}
+	}
+</style>

package/dist/components/sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    mobileClasses?: string;
+    mobileOnly?: boolean;
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1 @@
+export { default as Sidebar } from './Sidebar.svelte';

package/dist/components/sidebar/index.js

@@ -0,0 +1 @@
+export { default as Sidebar } from './Sidebar.svelte';

package/dist/components/slider/Slider.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		orientation = 'horizontal',
+		class: className,
+		tabindex = undefined,
+		type = 'single',
+		min = 0,
+		max = 100,
+		...props
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<SliderPrimitive.Root
+	bind:ref
+	bind:value={value}
+	{orientation}
+	class={cn(
+		"relative flex touch-none items-center select-none data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full",
+		"data-[orientation='vertical']:min-h-44 data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
+		className
+	)}
+	{tabindex}
+	{type}
+	{min}
+	{max}
+	{...props}
+>
+	{#snippet children({ thumbs })}
+		<span
+			data-orientation={orientation}
+			class={[
+				"relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='horizontal']:w-full",
+				"data-[orientation='vertical']:h-full data-[orientation='vertical']:w-2"
+			]}
+		>
+			<div
+				class="bg-base-300/30 dark:bg-base-800 border-base-400/50 dark:border-base-700 absolute inset-0 rounded-full border"
+			></div>
+
+			<SliderPrimitive.Range
+				class="bg-accent-400 dark:bg-accent-600 absolute rounded-full data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+			/>
+		</span>
+		{#each thumbs as thumb}
+			<SliderPrimitive.Thumb
+				index={thumb}
+				class={[
+					'border-accent-400 dark:border-accent-600 bg-accent-600 dark:bg-accent-800 focus-visible:outline-base-900',
+					'dark:focus-visible:outline-base-100 block size-6 rounded-full border-2 transition-colors focus-visible:outline-2 ',
+					'focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50'
+				]}
+				{tabindex}
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>

package/dist/components/slider/Slider.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/slider/SliderNumber.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Slider } from '.';
+	import NumberFlow from '@number-flow/svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		orientation = 'horizontal',
+		class: className,
+		tabindex = undefined,
+		type = 'single',
+		min = 0,
+		max = 100,
+		...props
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<div class="flex items-center gap-6">
+	<Slider
+		bind:value
+		bind:ref
+		{orientation}
+		class={className}
+		{tabindex}
+		{type}
+		{min}
+		{max}
+		{...props}
+	/>
+
+	<NumberFlow
+		{value}
+		locales="en-US"
+		format={{ useGrouping: false }}
+		aria-hidden="true"
+		class="text-base-900 dark:text-base-100 pointer-events-none min-w-6 text-right text-lg font-semibold"
+		willChange
+	/>
+</div>

package/dist/components/slider/SliderNumber.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+declare const SliderNumber: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
+type SliderNumber = ReturnType<typeof SliderNumber>;
+export default SliderNumber;

package/dist/components/slider/index.d.ts

@@ -0,0 +1,3 @@
+import Root from './Slider.svelte';
+export { Root as Slider };
+export { default as SliderNumber } from './SliderNumber.svelte';

package/dist/components/slider/index.js

@@ -0,0 +1,3 @@
+import Root from './Slider.svelte';
+export { Root as Slider };
+export { default as SliderNumber } from './SliderNumber.svelte';