@foxui/core 0.4.0

package/dist/components/index.d.ts

@@ -0,0 +1,34 @@
+export * from './accordion';
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './box';
+export * from './button';
+export * from './card';
+export * from './chat-bubble';
+export * from './checkbox';
+export * from './copy-code-button';
+export * from './head';
+export * from './heading';
+export * from './image';
+export * from './image-container';
+export * from './input';
+export * from './label';
+export * from './modal';
+export * from './navbar';
+export * from './number-input';
+export * from './paragraph';
+export * from './popover';
+export * from './prose';
+export * from './scroll-area';
+export * from './select';
+export * from './sidebar';
+export * from './slider';
+export * from './sonner';
+export * from './switch';
+export * from './tabs';
+export * from './textarea';
+export * from './theme-toggle';
+export * from './toggle';
+export * from './toggle-group';
+export * from './tooltip';

package/dist/components/index.js

@@ -0,0 +1,34 @@
+export * from './accordion';
+export * from './alert';
+export * from './avatar';
+export * from './badge';
+export * from './box';
+export * from './button';
+export * from './card';
+export * from './chat-bubble';
+export * from './checkbox';
+export * from './copy-code-button';
+export * from './head';
+export * from './heading';
+export * from './image';
+export * from './image-container';
+export * from './input';
+export * from './label';
+export * from './modal';
+export * from './navbar';
+export * from './number-input';
+export * from './paragraph';
+export * from './popover';
+export * from './prose';
+export * from './scroll-area';
+export * from './select';
+export * from './sidebar';
+export * from './slider';
+export * from './sonner';
+export * from './switch';
+export * from './tabs';
+export * from './textarea';
+export * from './theme-toggle';
+export * from './toggle';
+export * from './toggle-group';
+export * from './tooltip';

package/dist/components/input/Input.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import { type VariantProps, tv } from 'tailwind-variants';
+	import { cn } from '../../utils';
+
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+
+	export const inputVariants = tv({
+		base: 'focus:ring-2 ring-1 ring-inset border-0 focus:transition-transform rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed duration-300 active:duration-100',
+		variants: {
+			variant: {
+				primary:
+					'focus:ring-accent-500 dark:focus:ring-accent-500 ring-accent-500/30 dark:ring-accent-500/20 bg-accent-400/5 dark:bg-accent-600/5 text-accent-700 dark:text-accent-400 placeholder:text-accent-700/50 dark:placeholder:text-accent-400/50',
+				secondary:
+					'focus:ring-base-800 dark:focus:ring-base-200 bg-base-100/50 dark:bg-base-900/50 text-base-900 dark:text-base-50 ring-base-200 dark:ring-base-800 placeholder:text-base-900/50 dark:placeholder:text-base-50/50'
+			},
+			sizeVariant: {
+				default: 'px-3 py-1.5 text-base',
+				sm: 'px-3 text-xs py-1.5 font-base',
+				lg: 'px-4 text-lg py-2 font-semibold'
+			}
+		},
+		defaultVariants: {
+			variant: 'primary',
+			sizeVariant: 'default'
+		}
+	});
+
+	export type InputVariant = VariantProps<typeof inputVariants>['variant'];
+	export type InputSize = VariantProps<typeof inputVariants>['sizeVariant'];
+
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+	export type InputProps = WithElementRef<
+		Omit<HTMLInputAttributes, 'type'> & { type?: InputType }
+	> & {
+		variant?: InputVariant;
+		sizeVariant?: InputSize;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		class: className,
+		variant = 'primary',
+		sizeVariant = 'default',
+		...restProps
+	}: InputProps = $props();
+</script>
+
+<input
+	bind:this={ref}
+	class={cn(inputVariants({ variant, sizeVariant }), className)}
+	{type}
+	bind:value
+	{...restProps}
+/>

package/dist/components/input/Input.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { WithElementRef } from 'bits-ui';
+import { type VariantProps } from 'tailwind-variants';
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+export declare const inputVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    sizeVariant: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "focus:ring-2 ring-1 ring-inset border-0 focus:transition-transform rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed duration-300 active:duration-100", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    sizeVariant: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    sizeVariant: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "focus:ring-2 ring-1 ring-inset border-0 focus:transition-transform rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed duration-300 active:duration-100", unknown, unknown, undefined>>;
+export type InputVariant = VariantProps<typeof inputVariants>['variant'];
+export type InputSize = VariantProps<typeof inputVariants>['sizeVariant'];
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+export type InputProps = WithElementRef<Omit<HTMLInputAttributes, 'type'> & {
+    type?: InputType;
+}> & {
+    variant?: InputVariant;
+    sizeVariant?: InputSize;
+};
+declare const Input: import("svelte").Component<InputProps, {}, "ref" | "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

@@ -0,0 +1,2 @@
+import Root, { type InputProps, type InputSize, type InputVariant, inputVariants } from './Input.svelte';
+export { type InputProps, Root as Input, inputVariants, type InputSize, type InputVariant };

package/dist/components/input/index.js

@@ -0,0 +1,2 @@
+import Root, { inputVariants } from './Input.svelte';
+export { Root as Input, inputVariants };

package/dist/components/label/Label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	class={cn(
+		'text-base-900 dark:text-base-50 text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/label/Label.svelte.d.ts

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

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

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

package/dist/components/label/index.js

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

package/dist/components/modal/Modal.svelte

@@ -0,0 +1,167 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import { Dialog, type WithoutChild } from 'bits-ui';
+	import { Button, type ButtonProps } from '../button';
+
+	export type ModalProps = Dialog.RootProps & {
+		title?: string;
+		titleSnippet?: Snippet;
+		titleClass?: string;
+		description?: string;
+		descriptionSnippet?: Snippet;
+		descriptionClass?: string;
+		interactOutsideBehavior?: 'close' | 'ignore';
+		closeButton?: boolean;
+		contentProps?: WithoutChild<Dialog.ContentProps>;
+
+		yesButton?:
+			| boolean
+			| {
+					label?: string;
+					onclick?: () => void;
+					variant?: ButtonProps['variant'];
+					disabled?: boolean;
+					class?: string;
+			  };
+
+		noButton?:
+			| boolean
+			| {
+					label?: string;
+					onclick?: () => void;
+					variant?: ButtonProps['variant'];
+					disabled?: boolean;
+					class?: string;
+			  };
+
+		class?: string;
+
+		onOpenAutoFocus?: (event: Event) => void;
+	};
+</script>
+
+<script lang="ts">
+	import { cn } from '../../utils';
+
+	let {
+		open = $bindable(false),
+		children,
+		contentProps,
+		title,
+		titleSnippet,
+		titleClass,
+		description,
+		descriptionSnippet,
+		descriptionClass,
+		interactOutsideBehavior = 'close',
+		closeButton = true,
+		yesButton,
+		noButton,
+		class: className,
+		onOpenAutoFocus,
+		...restProps
+	}: ModalProps = $props();
+
+	let yesButtonRef = $state<HTMLButtonElement | null>(null);
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Portal>
+		<Dialog.Overlay
+			class="motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-base-200/10 dark:bg-base-900/10 fixed inset-0 z-50 backdrop-blur-sm"
+		/>
+		<Dialog.Content
+			{onOpenAutoFocus}
+			{interactOutsideBehavior}
+			{...contentProps}
+			class={cn(
+				'motion-safe:data-[state=open]:animate-in motion-safe: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-[state=closed]:slide-out-to-bottom-1/2 data-[state=open]:slide-in-from-bottom-1/2',
+				'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-1rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] shadow-lg',
+				'bg-base-50/60 dark:bg-base-900/60 backdrop-blur-xl border-base-200/80 dark:border-base-800 gap-4 rounded-2xl border p-6',
+				className
+			)}
+		>
+			{#if title}
+				<Dialog.Title class="text-base-900 dark:text-base-100 text-lg font-semibold"
+					>{title}</Dialog.Title
+				>
+			{/if}
+			{#if titleSnippet}
+				<Dialog.Title class={titleClass}>
+					{@render titleSnippet()}
+				</Dialog.Title>
+			{/if}
+			{#if description}
+				<Dialog.Description class="text-base-600 dark:text-base-400 text-sm"
+					>{description}</Dialog.Description
+				>
+			{/if}
+			{#if descriptionSnippet}
+				<Dialog.Description class={descriptionClass}>
+					{@render descriptionSnippet?.()}
+				</Dialog.Description>
+			{/if}
+
+			{#if yesButton || noButton}
+				<div class="flex flex-col items-stretch justify-end gap-2 md:flex-row md:items-center">
+					{#if yesButton}
+						<Button
+							bind:ref={yesButtonRef}
+							onclick={() => {
+								open = false;
+								if (typeof yesButton === 'object') {
+									yesButton.onclick?.();
+								}
+							}}
+							class={cn('order-last', typeof yesButton === 'object' ? yesButton.class : '')}
+							variant={typeof yesButton === 'object' ? yesButton?.variant || 'primary' : 'primary'}
+							disabled={typeof yesButton === 'object' ? yesButton?.disabled : false}
+						>
+							{typeof yesButton === 'object' ? yesButton.label || 'Yes' : 'Yes'}
+						</Button>
+					{/if}
+					{#if noButton}
+						<Button
+							onclick={() => {
+								open = false;
+								if (typeof noButton === 'object') {
+									noButton.onclick?.();
+								}
+							}}
+							class={cn(typeof noButton === 'object' ? noButton.class : '')}
+							variant={typeof noButton === 'object'
+								? noButton?.variant || 'secondary'
+								: 'secondary'}
+							disabled={typeof noButton === 'object' ? noButton?.disabled : false}
+						>
+							{typeof noButton === 'object' ? noButton.label || 'No' : 'No'}
+						</Button>
+					{/if}
+				</div>
+			{/if}
+
+			{@render children?.()}
+
+			{#if closeButton}
+				<Dialog.Close
+					class="text-base-900 dark:text-base-500 hover:text-base-800 dark:hover:text-base-200 hover:bg-base-200 dark:hover:bg-base-800 focus:outline-base-900 dark:focus:outline-base-50 focus:bg-base-200 dark:focus:bg-base-800 focus:text-base-800 dark:focus:text-base-200 absolute right-2 top-2 cursor-pointer rounded-xl p-1 transition-colors focus:outline-2 focus:outline-offset-2"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						class="size-4"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+
+					<span class="sr-only">Close</span>
+				</Dialog.Close>
+			{/if}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

package/dist/components/modal/Modal.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import { Dialog, type WithoutChild } from 'bits-ui';
+import { type ButtonProps } from '../button';
+export type ModalProps = Dialog.RootProps & {
+    title?: string;
+    titleSnippet?: Snippet;
+    titleClass?: string;
+    description?: string;
+    descriptionSnippet?: Snippet;
+    descriptionClass?: string;
+    interactOutsideBehavior?: 'close' | 'ignore';
+    closeButton?: boolean;
+    contentProps?: WithoutChild<Dialog.ContentProps>;
+    yesButton?: boolean | {
+        label?: string;
+        onclick?: () => void;
+        variant?: ButtonProps['variant'];
+        disabled?: boolean;
+        class?: string;
+    };
+    noButton?: boolean | {
+        label?: string;
+        onclick?: () => void;
+        variant?: ButtonProps['variant'];
+        disabled?: boolean;
+        class?: string;
+    };
+    class?: string;
+    onOpenAutoFocus?: (event: Event) => void;
+};
+declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

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

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal.svelte';
+export type { ModalProps } from './Modal.svelte';

package/dist/components/modal/index.js

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

package/dist/components/navbar/Navbar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils';
+
+	const {
+		class: className,
+		children,
+		hasSidebar = false,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { hasSidebar?: boolean } = $props();
+</script>
+
+<div
+	class={cn(
+		'header fixed top-1 right-0 mx-1 left-0 z-50 flex h-16 items-center justify-between p-2 shadow-lg rounded-2xl border border-base-400/30 dark:border-base-300/10 overflow-hidden',
+		hasSidebar ? 'lg:left-74' : '',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<div
+		class="backdrop from-base-100/50 via-base-50/20 dark:from-base-900/30 dark:via-base-950/10 pointer-events-none absolute inset-0 -z-10 bg-linear-to-b backdrop-blur-md"
+	></div>
+
+	<div
+		class="backdrop-edge bg-base-900/10 dark:bg-base-500/10 pointer-events-none absolute right-0 bottom-0 left-0 -z-10 translate-y-full backdrop-blur-sm"
+	></div>
+</div>
+
+<style>
+	/** better frosted glass effect adopted from https://www.joshwcomeau.com/css/backdrop-filter/ */
+	.header {
+		--thickness: 1px;
+	}
+
+	@supports (mask-image: none) or (-webkit-mask-image: none) {
+		.backdrop {
+			height: 200%;
+			-webkit-mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
+			mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
+		}
+		.backdrop-edge {
+			height: 100%;
+			inset: 0;
+			-webkit-mask-image: linear-gradient(
+				to bottom,
+				black 0,
+				black var(--thickness),
+				transparent var(--thickness)
+			);
+			mask-image: linear-gradient(
+				to bottom,
+				black 0,
+				black var(--thickness),
+				transparent var(--thickness)
+			);
+
+			filter: brightness(1.5);
+		}
+	}
+</style>

package/dist/components/navbar/Navbar.svelte.d.ts

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

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

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

package/dist/components/navbar/index.js

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