@foxui/3d 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 flo-bit
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# 🦊 fox ui
+
+svelte 5 + tailwind 4 ui kit, 3d components
+
+- [Depth 3D](https://flo-bit.dev/ui-kit/components/3d/depth-3d)
+- [Model Picker](https://flo-bit.dev/ui-kit/components/3d/model-picker)
+- [Voxel Art](https://flo-bit.dev/ui-kit/components/3d/voxel-art)
+
+> **This is a public alpha release. Expect bugs and breaking changes.**
+
+[See all components here](https://flo-bit.dev/ui-kit)
+
+For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
+
+Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
+
+For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).

package/dist/components/depth3d/Depth3D.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Canvas } from '@threlte/core';
+	import Scene, { type Props } from './Scene.svelte';
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	const {
+		class: className,
+		sceneProps,
+		...restProps
+	}: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+		sceneProps: Props;
+	} = $props();
+</script>
+
+<div id="depth3d" class={cn('h-80 w-80', className)} {...restProps}>
+	<Canvas>
+		<Scene {...sceneProps} />
+	</Canvas>
+</div>
+
+<!-- no js fallback -->
+<noscript>
+	<style>
+		#depth3d {
+			display: none;
+		}
+	</style>
+
+	<img
+		src={sceneProps.image.image}
+		alt=""
+		class={cn('h-80 w-80 rounded-2xl object-cover', className)}
+	/>
+</noscript>

package/dist/components/depth3d/Depth3D.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Props } from './Scene.svelte';
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+    sceneProps: Props;
+};
+declare const Depth3D: import("svelte").Component<$$ComponentProps, {}, "">;
+type Depth3D = ReturnType<typeof Depth3D>;
+export default Depth3D;

package/dist/components/depth3d/Scene.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" module>
+	export type Props = {
+		image: {
+			image: string;
+			depth: string;
+		};
+		rounded?: number;
+		cameraPosition?: [number, number, number];
+		rotationScale?: number;
+		rotationSpeed?: number;
+		detail?: number;
+		depthScale?: number;
+		mouseMovement?: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import { T, useTask } from '@threlte/core';
+	import { useTexture, Align } from '@threlte/extras';
+	import { Spring } from 'svelte/motion';
+
+	import { Vector2, ShaderMaterial, PlaneGeometry, LinearSRGBColorSpace } from 'three';
+
+	const {
+		image,
+		rounded = 0.2,
+		cameraPosition = [0, 0, 10],
+		rotationScale = 0.2,
+		rotationSpeed = 2,
+		detail = 50,
+		depthScale = 1.5,
+		mouseMovement = true
+	}: Props = $props();
+
+	const rotation = new Vector2(0.5, 0.5);
+
+	const geometry = new PlaneGeometry(7, 7, detail, detail);
+
+	let rotationX = new Spring(0);
+	let rotationY = new Spring(0);
+
+	let time = 0;
+	let mouseMoved = -1;
+
+	const map = useTexture(image.image, {
+		transform: (texture) => {
+			texture.colorSpace = LinearSRGBColorSpace;
+			return texture;
+		}
+	});
+	const depthMap = useTexture(image.depth, {
+		transform: (texture) => {
+			return texture;
+		}
+	});
+
+	const uniforms = {
+		uTexture: { type: 't', value: map },
+		depthMap: { type: 't', value: depthMap }
+	};
+	const material = new ShaderMaterial({
+		uniforms: uniforms,
+		vertexShader: `
+  varying vec2 vUv;
+  uniform sampler2D depthMap;
+  
+  void main() {
+	  vUv = uv;
+	  // move z position based on the depth map
+	  float depth = texture2D(depthMap, vUv).r;
+	  vec3 newPosition = position + vec3(0.0, 0.0, depth * ${depthScale.toFixed(1)});
+	  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+  }`,
+		fragmentShader: `
+uniform sampler2D uTexture;
+varying vec2 vUv;
+
+float sdRoundedRect(vec2 p, vec2 b, float r) {
+	vec2 q = abs(p) - b + vec2(r);
+	return length(max(q, 0.0)) - r;
+}
+	  ${
+			rounded > 0.01
+				? `
+void main() {
+	vec2 uv = (vUv * 2.0) - 1.0;
+
+	// Size of the rectangle (half-size)
+	vec2 rectSize = vec2(1, 1);
+
+	// Calculate distance to the edge of the rounded rectangle
+	float d = sdRoundedRect(uv, rectSize, ${rounded.toFixed(4)});
+
+	// Smooth transition for anti-aliasing
+	float aa = fwidth(d);
+	float alpha = smoothstep(0.0, aa, -d);
+
+	gl_FragColor = texture2D(uTexture, vUv) * alpha;
+}
+	  `
+				: `
+
+void main() {
+	vec2 uv = (vUv * 2.0) - 1.0;
+	gl_FragColor = texture2D(uTexture, vUv);
+}`
+		}
+`
+	});
+
+	useTask((dt) => {
+		if (mouseMoved > 0) {
+			mouseMoved -= dt;
+		} else {
+			time += dt * rotationSpeed;
+			rotationX.set(Math.sin(time) * 0.5);
+			rotationY.set(Math.cos(time) * 0.5);
+		}
+	});
+
+	function onDocumentMouseMove(event: MouseEvent) {
+		if (!mouseMovement) return;
+
+		// convert to [-0.5, 0.5]
+		rotationX.set((event.clientX / window.innerWidth - 0.5) * 2);
+		rotationY.set((event.clientY / window.innerHeight - 0.5) * 2);
+
+		mouseMoved = 1;
+	}
+</script>
+
+<svelte:window onmousemove={onDocumentMouseMove} />
+
+<T.PerspectiveCamera makeDefault position={cameraPosition}></T.PerspectiveCamera>
+
+{#await map then mapValue}
+	{#await depthMap then depthValue}
+		<Align>
+			<T.Mesh
+				rotation.x={rotationY.current * rotationScale}
+				rotation.y={rotationX.current * rotationScale}
+				scale.x={mapValue.image.width / mapValue.image.height}
+			>
+				<T is={geometry} />
+				<T
+					is={material}
+					uniforms={{
+						depthMap: { value: depthValue },
+						uTexture: { value: mapValue },
+						mouse: { value: rotation }
+					}}
+				/>
+			</T.Mesh>
+		</Align>
+	{/await}
+{/await}

package/dist/components/depth3d/Scene.svelte.d.ts

@@ -0,0 +1,16 @@
+export type Props = {
+    image: {
+        image: string;
+        depth: string;
+    };
+    rounded?: number;
+    cameraPosition?: [number, number, number];
+    rotationScale?: number;
+    rotationSpeed?: number;
+    detail?: number;
+    depthScale?: number;
+    mouseMovement?: boolean;
+};
+declare const Scene: import("svelte").Component<Props, {}, "">;
+type Scene = ReturnType<typeof Scene>;
+export default Scene;

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

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

package/dist/components/depth3d/index.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './depth3d';
+export * from './model-picker';
+export * from './voxel-art';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export * from './depth3d';
+export * from './model-picker';
+export * from './voxel-art';

package/dist/components/model-picker/base/ModelPicker.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Canvas } from '@threlte/core';
+	import { View } from '@threlte/extras';
+	import Scene from './ModelPickerScene.svelte';
+	import { cn } from '@foxui/core';
+	import { CineonToneMapping } from 'three';
+
+	let {
+		items,
+		alwaysRotate = false,
+		onselect,
+		canvasClasses = '',
+		class: className,
+		gridClasses,
+		maxColumns = 4
+	}: {
+		items: { path: string; label: string }[];
+		alwaysRotate?: boolean;
+		onselect?: ({ path, label }: { path: string; label: string }) => void;
+		canvasClasses?: string;
+		portalTo?: string;
+		class?: string;
+		gridClasses?: string;
+		maxColumns?: number;
+	} = $props();
+
+	let states = $state(
+		new Array<{ hover: boolean; dom: HTMLElement | undefined }>(items.length).fill({
+			hover: false,
+			dom: undefined
+		})
+	);
+</script>
+
+<div class={cn('relative h-full w-full', className)}>
+	<div
+		class={cn(
+			'grid h-full w-full grid-cols-2 gap-4',
+			maxColumns > 2 ? 'md:grid-cols-3' : '',
+			maxColumns > 3 ? 'lg:grid-cols-4' : '',
+			gridClasses
+		)}
+	>
+		{#each items as item, index}
+			<button
+				id="item"
+				class="hover:bg-base-200/40 dark:hover:bg-base-800/40 m-4 inline-block cursor-pointer rounded-2xl p-4 transition-all duration-300 hover:scale-105"
+				onclick={() => {
+					states[index].hover = false;
+					onselect?.({ path: item.path, label: item.label });
+				}}
+				onpointerenter={() => {
+					states[index].hover = true;
+				}}
+				onpointerleave={() => {
+					states[index].hover = false;
+				}}
+			>
+				<div class="aspect-square" bind:this={states[index].dom}></div>
+				<div class="text-base-700 dark:text-base-300 text-sm">{item.label}</div>
+			</button>
+		{/each}
+	</div>
+
+	<div class={cn('pointer-events-none absolute inset-0 h-full w-full', canvasClasses)}>
+		<Canvas toneMapping={CineonToneMapping}>
+			{#each items as item, index}
+				<View dom={states[index].dom}>
+					<Scene path={item.path} hover={states[index].hover || alwaysRotate} />
+				</View>
+			{/each}
+		</Canvas>
+	</div>
+</div>

package/dist/components/model-picker/base/ModelPicker.svelte.d.ts

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    items: {
+        path: string;
+        label: string;
+    }[];
+    alwaysRotate?: boolean;
+    onselect?: ({ path, label }: {
+        path: string;
+        label: string;
+    }) => void;
+    canvasClasses?: string;
+    portalTo?: string;
+    class?: string;
+    gridClasses?: string;
+    maxColumns?: number;
+};
+declare const ModelPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModelPicker = ReturnType<typeof ModelPicker>;
+export default ModelPicker;

package/dist/components/model-picker/base/ModelPickerScene.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { T, useTask, useThrelte } from '@threlte/core';
+	import { GLTF } from '@threlte/extras';
+	import { onMount } from 'svelte';
+	import { Box3, Group, Object3D, Vector3 } from 'three';
+
+	let {
+		path,
+		hover = false
+	}: {
+		path: string;
+		scaleFactor?: number;
+		hover?: boolean;
+	} = $props();
+
+	let rotation = $state(0);
+	let group: Group | undefined = $state();
+
+	const { start, stop } = useTask((delta) => {
+		rotation += delta;
+	});
+
+	$effect(() => {
+		if (hover) {
+			start();
+		} else {
+			stop();
+		}
+	});
+
+	const { renderer } = useThrelte();
+
+	onMount(() => {
+		renderer.toneMappingExposure = 0.7;
+	});
+</script>
+
+<T.PerspectiveCamera makeDefault position={[0, 0, 2]} fov={50} near={0.1} far={10} />
+
+<T.DirectionalLight args={[0xffffff, 2]} position={[-1, 1, 1]} />
+<T.AmbientLight args={[0xffffff, 0.7]} />
+
+<T.Group rotation={[0.5, rotation + 2.5, 0]}>
+	<T.Group bind:ref={group}>
+		<GLTF
+			url={path}
+			onload={(gltf: Group & { scene: Object3D }) => {
+				if (!group) return;
+
+				const box = new Box3().setFromObject(gltf.scene);
+				const size = box.getSize(new Vector3());
+				const center = box.getCenter(new Vector3());
+
+				let maxSize = Math.max(size.x, size.y, size.z);
+				let scale = 0.9 / maxSize;
+
+				group.scale.set(scale, scale, scale);
+				group.position.set(-center.x * scale, -center.y * scale, -center.z * scale);
+			}}
+		/>
+	</T.Group>
+</T.Group>

package/dist/components/model-picker/base/ModelPickerScene.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    path: string;
+    scaleFactor?: number;
+    hover?: boolean;
+};
+declare const ModelPickerScene: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModelPickerScene = ReturnType<typeof ModelPickerScene>;
+export default ModelPickerScene;

package/dist/components/model-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ModelPicker } from './base/ModelPicker.svelte';
+export { default as ModalModelPicker } from './modal/ModalModelPicker.svelte';
+export { default as PopoverModelPicker } from './popover/PopoverModelPicker.svelte';

package/dist/components/model-picker/index.js

@@ -0,0 +1,3 @@
+export { default as ModelPicker } from './base/ModelPicker.svelte';
+export { default as ModalModelPicker } from './modal/ModalModelPicker.svelte';
+export { default as PopoverModelPicker } from './popover/PopoverModelPicker.svelte';

package/dist/components/model-picker/modal/ModalModelPicker.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Modal } from '@foxui/core';
+	import { ModelPicker } from '..';
+
+	let {
+		items,
+		open = $bindable(),
+		alwaysRotate = false,
+		onselect,
+		canvasClasses = '',
+		title
+	}: {
+		open: boolean;
+		items: { path: string; label: string }[];
+		alwaysRotate?: boolean;
+		onselect?: ({ path, label }: { path: string; label: string }) => void;
+		canvasClasses?: string;
+		title?: string;
+	} = $props();
+</script>
+
+<Modal bind:open class="mx-auto max-h-[80dvh] max-w-5xl overflow-hidden overflow-y-scroll" {title}>
+	<ModelPicker
+		{items}
+		{alwaysRotate}
+		onselect={({ path, label }) => {
+			onselect?.({ path, label });
+			open = false;
+		}}
+		{canvasClasses}
+	/>
+</Modal>

package/dist/components/model-picker/modal/ModalModelPicker.svelte.d.ts

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    open: boolean;
+    items: {
+        path: string;
+        label: string;
+    }[];
+    alwaysRotate?: boolean;
+    onselect?: ({ path, label }: {
+        path: string;
+        label: string;
+    }) => void;
+    canvasClasses?: string;
+    title?: string;
+};
+declare const ModalModelPicker: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ModalModelPicker = ReturnType<typeof ModalModelPicker>;
+export default ModalModelPicker;

package/dist/components/model-picker/popover/PopoverModelPicker.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { ModelPicker } from '../';
+	import { Popover } from '@foxui/core';
+
+	let {
+		items,
+		open = $bindable(false),
+		alwaysRotate = false,
+		onselect,
+		canvasClasses = '',
+		triggerClasses = '',
+		title
+	}: {
+		open?: boolean;
+		items: { path: string; label: string }[];
+		alwaysRotate?: boolean;
+		onselect?: ({ path, label }: { path: string; label: string }) => void;
+		canvasClasses?: string;
+		triggerClasses?: string;
+		title?: string;
+	} = $props();
+</script>
+
+<Popover
+	bind:open
+	{triggerClasses}
+	side={'top'}
+	sideOffset={10}
+	triggerText={title}
+	class="mx-2 max-h-[60dvh] w-full max-w-[calc(100vw-1rem)] overflow-y-scroll"
+>
+	<ModelPicker
+		{items}
+		{alwaysRotate}
+		onselect={({ path, label }) => {
+			onselect?.({ path, label });
+			open = false;
+		}}
+		{canvasClasses}
+	/>
+</Popover>

package/dist/components/model-picker/popover/PopoverModelPicker.svelte.d.ts

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    open?: boolean;
+    items: {
+        path: string;
+        label: string;
+    }[];
+    alwaysRotate?: boolean;
+    onselect?: ({ path, label }: {
+        path: string;
+        label: string;
+    }) => void;
+    canvasClasses?: string;
+    triggerClasses?: string;
+    title?: string;
+};
+declare const PopoverModelPicker: import("svelte").Component<$$ComponentProps, {}, "open">;
+type PopoverModelPicker = ReturnType<typeof PopoverModelPicker>;
+export default PopoverModelPicker;

package/dist/components/voxel-art/VoxelArt.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	// from https://tympanus.net/codrops/2025/03/03/css-meets-voxel-art-building-a-rendering-engine-with-stacked-grids/
+	// editor: https://voxels.layoutit.com/
+
+	interface VoxelArtData {
+		voxels: {
+			x: number;
+			y: number;
+			z: number;
+			color: string;
+		}[];
+	}
+
+	let {
+		rows = undefined,
+		columns = undefined,
+		stacks = undefined,
+		cubeSize = 20,
+		viewingAngle = 65,
+		colorMap = {
+			'050505': 'var(--color-accent-50)',
+			'101010': 'var(--color-accent-100)',
+			'202020': 'var(--color-accent-200)',
+			'303030': 'var(--color-accent-300)',
+			'404040': 'var(--color-accent-400)',
+			'505050': 'var(--color-accent-500)',
+			'606060': 'var(--color-accent-600)',
+			'707070': 'var(--color-accent-700)',
+			'808080': 'var(--color-accent-800)',
+			'909090': 'var(--color-accent-900)',
+			'959595': 'var(--color-accent-950)'
+		},
+		data
+	}: {
+		rows?: number;
+		columns?: number;
+		stacks?: number;
+		cubeSize?: number;
+		viewingAngle?: number;
+		colorMap?: Record<string, string>;
+		data: VoxelArtData;
+	} = $props();
+
+	let maxX = Math.max(...data.voxels.map((voxel) => voxel.x));
+	let maxY = Math.max(...data.voxels.map((voxel) => voxel.y));
+	let maxZ = Math.max(...data.voxels.map((voxel) => voxel.z));
+
+	if (rows === undefined) {
+		rows = maxX;
+	}
+	if (columns === undefined) {
+		columns = maxY;
+	}
+	if (stacks === undefined) {
+		stacks = maxZ + 1;
+	}
+	if (cubeSize === undefined) {
+		cubeSize = 20;
+	}
+</script>
+
+<div
+	class="scene"
+	style="--columns: {columns}; --rows: {rows}; --stacks: {stacks}; --cube-size: {cubeSize}px; --viewing-angle: {viewingAngle}deg;"
+>
+	<div class="floor">
+		{#each Array(stacks) as _, i}
+			<div class="z" style="transform: translateZ({i * cubeSize - stacks * cubeSize}px);">
+				{#each data.voxels as voxel}
+					{#if voxel.z === i}
+						{@render cube(
+							`grid-area: ${voxel.x} / ${voxel.y} / ${voxel.x + 1} / ${voxel.y + 1}; color: ${colorMap?.[voxel.color] ?? '#' + voxel.color};`
+						)}
+					{/if}
+				{/each}
+			</div>
+		{/each}
+	</div>
+</div>
+
+{#snippet cube(style: string)}
+	<div class="cube" {style}>
+		{#if viewingAngle < 90}
+			<div class="face top"></div>
+		{/if}
+
+		<div class="face frontRight"></div>
+		<div class="face frontLeft"></div>
+		<div class="face backLeft"></div>
+		<div class="face backRight"></div>
+
+		{#if viewingAngle > 90}
+			<div class="face bottom"></div>
+		{/if}
+	</div>
+{/snippet}
+
+<style>
+	.scene {
+		perspective: 8000px;
+		min-height: calc((var(--stacks) + 5) * var(--cube-size));
+	}
+
+	.scene * {
+		transform-style: preserve-3d;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotateX(var(--viewing-angle)) rotate(0deg);
+		}
+		100% {
+			transform: rotateX(var(--viewing-angle)) rotate(360deg);
+		}
+	}
+
+	.floor {
+		transform: rotateX(var(--viewing-angle)) rotate(45deg);
+		width: calc(var(--columns) * var(--cube-size));
+		height: calc(var(--rows) * var(--cube-size));
+		animation: spin 5s linear infinite;
+	}
+
+	.cube {
+		position: relative;
+		transform: translateZ(calc(var(--cube-size) / 2));
+	}
+
+	.face {
+		position: absolute;
+		background: currentColor;
+		inset: 0;
+	}
+	.face:after {
+		content: '';
+		display: block;
+		position: absolute;
+		inset: 0;
+	}
+	.face.frontRight:after {
+		background: rgba(0, 0, 0, 0.1);
+	}
+	.face.frontLeft:after {
+		background: rgba(0, 0, 0, 0.15);
+	}
+	.face.backLeft:after {
+		background: rgba(0, 0, 0, 0.2);
+	}
+	.face.backRight:after {
+		background: rgba(0, 0, 0, 0.25);
+	}
+
+	.face.top {
+		transform: translateZ(calc(var(--cube-size) / 2));
+	}
+	.face.frontRight {
+		transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2));
+	}
+	.face.frontLeft {
+		transform: rotateX(90deg) translateZ(calc(var(--cube-size) / -2));
+	}
+
+	.face.bottom {
+		transform: translateZ(calc(var(--cube-size) / -2));
+	}
+	.face.backLeft {
+		transform: rotateY(90deg) translateZ(calc(var(--cube-size) / -2));
+	}
+	.face.backRight {
+		transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2));
+	}
+
+	.z {
+		display: grid;
+		grid-template-columns: repeat(var(--columns), var(--cube-size));
+		grid-template-rows: repeat(var(--rows), var(--cube-size));
+		position: absolute;
+		inset: 0;
+	}
+</style>

package/dist/components/voxel-art/VoxelArt.svelte.d.ts

@@ -0,0 +1,20 @@
+interface VoxelArtData {
+    voxels: {
+        x: number;
+        y: number;
+        z: number;
+        color: string;
+    }[];
+}
+type $$ComponentProps = {
+    rows?: number;
+    columns?: number;
+    stacks?: number;
+    cubeSize?: number;
+    viewingAngle?: number;
+    colorMap?: Record<string, string>;
+    data: VoxelArtData;
+};
+declare const VoxelArt: import("svelte").Component<$$ComponentProps, {}, "">;
+type VoxelArt = ReturnType<typeof VoxelArt>;
+export default VoxelArt;

package/dist/components/voxel-art/index.d.ts

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

package/dist/components/voxel-art/index.js

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

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components/';

package/dist/types.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@foxui/3d",
+  "private": false,
+  "version": "0.4.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "types": "./dist/types.d.ts",
+  "svelte": "./dist/index.js",
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.5",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.5",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.2.6"
+  },
+  "dependencies": {
+    "@threlte/core": "^8.0.2",
+    "@threlte/extras": "^9.1.4",
+    "@types/three": "^0.176.0",
+    "bits-ui": "^1.4.3",
+    "three": "^0.176.0",
+    "@foxui/core": "0.4.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=5",
+    "tailwindcss": ">=3"
+  },
+  "keywords": [
+    "svelte",
+    "ui-kit",
+    "3d",
+    "components"
+  ],
+  "description": "ui kit - svelte 5 + tailwind 4 - 3d components",
+  "homepage": "https://flo-bit.dev/ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flo-bit/ui-kit.git"
+  },
+  "author": "flo-bit (http://flo-bit.dev/)",
+  "bugs": "https://github.com/flo-bit/ui-kit/issues",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "build:package": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}