compote-ui 0.14.0 → 0.15.0

package/dist/components/card/card-header.svelte

@@ -5,6 +5,6 @@
 	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class={cn('flex flex-col gap-1.5 p-6', className)} {...rest}>
+<div class={cn('flex flex-col gap-1.5 pb-4', className)} {...rest}>
 	{@render children?.()}
 </div>

package/dist/components/card/card-title.svelte

@@ -5,6 +5,6 @@
 	let { class: className, children, ...rest }: HTMLAttributes<HTMLHeadingElement> = $props();
 </script>
 
-<h3 class={cn('text-base font-semibold leading-none', className)} {...rest}>
+<h3 class={cn('text-lg font-semibold', className)} {...rest}>
 	{@render children?.()}
 </h3>

package/dist/components/carousel/{carousel.svelte.d.ts → carousel backup.svelte.d.ts }

@@ -1,4 +1,3 @@
-import { Carousel } from '@ark-ui/svelte/carousel';
 import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
 interface ImageItem {
     id?: string | number;
@@ -14,6 +13,6 @@ interface Props extends Omit<CarouselRootProps, 'slideCount'> {
     selectedIds?: (string | number)[];
     onSetStar?: (id: string | number) => void;
 }
-declare const Carousel: import("svelte").Component<Props, {}, "selectedIds">;
-type Carousel = ReturnType<typeof Carousel>;
-export default Carousel;
+declare const Carouselbackup: import("svelte").Component<Props, {}, "selectedIds">;
+type Carouselbackup = ReturnType<typeof Carouselbackup>;
+export default Carouselbackup;

package/dist/components/carousel/carousel-control.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselControlProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselControlProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Control
+	class={cn(
+		'flex items-center gap-2 data-[justify=center]:justify-center data-[orientation=vertical]:flex-col',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Control>

package/dist/components/carousel/carousel-control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselControlProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselControlProps & {
+    children?: Snippet;
+};
+declare const CarouselControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselControl = ReturnType<typeof CarouselControl>;
+export default CarouselControl;

package/dist/components/carousel/carousel-indicator-group.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselIndicatorGroupProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselIndicatorGroupProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.IndicatorGroup
+	class={cn('flex justify-center gap-2 data-[orientation=vertical]:flex-col', className)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.IndicatorGroup>

package/dist/components/carousel/carousel-indicator-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselIndicatorGroupProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselIndicatorGroupProps & {
+    children?: Snippet;
+};
+declare const CarouselIndicatorGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselIndicatorGroup = ReturnType<typeof CarouselIndicatorGroup>;
+export default CarouselIndicatorGroup;

package/dist/components/carousel/carousel-indicator.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselIndicatorProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		thumbnail = false,
+		...rest
+	}: CarouselIndicatorProps & { children?: Snippet; thumbnail?: boolean } = $props();
+</script>
+
+<Carousel.Indicator
+	class={cn(
+		thumbnail
+			? 'h-14 w-14 cursor-pointer overflow-hidden rounded-sm border-2 border-transparent opacity-60 transition-all data-current:border-primary data-current:opacity-100 [&_img]:h-full [&_img]:w-full [&_img]:object-cover'
+			: 'size-2 cursor-pointer rounded-full border-0 bg-surface-3 p-0 data-current:bg-primary',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Indicator>

package/dist/components/carousel/carousel-indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CarouselIndicatorProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselIndicatorProps & {
+    children?: Snippet;
+    thumbnail?: boolean;
+};
+declare const CarouselIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselIndicator = ReturnType<typeof CarouselIndicator>;
+export default CarouselIndicator;

package/dist/components/carousel/carousel-item-group.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselItemGroupProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselItemGroupProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.ItemGroup
+	class={cn(
+		'flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.ItemGroup>

package/dist/components/carousel/carousel-item-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselItemGroupProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselItemGroupProps & {
+    children?: Snippet;
+};
+declare const CarouselItemGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselItemGroup = ReturnType<typeof CarouselItemGroup>;
+export default CarouselItemGroup;

package/dist/components/carousel/carousel-item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselItemProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselItemProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Item class={cn('min-w-0 flex-[0_0_100%]', className)} {...rest}>
+	{@render children?.()}
+</Carousel.Item>

package/dist/components/carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselItemProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselItemProps & {
+    children?: Snippet;
+};
+declare const CarouselItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/components/carousel/carousel-next-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import PhArrowRight from '../../icons/PhArrowRight.svelte';
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselNextTriggerProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselNextTriggerProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.NextTrigger
+	class={cn(
+		'inline-flex size-9 items-center justify-center rounded-md border bg-surface-1 shadow-sm hover:bg-surface-2 active:bg-surface-3 disabled:opacity-50',
+		className
+	)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhArrowRight class="size-4" />
+	{/if}
+</Carousel.NextTrigger>

package/dist/components/carousel/carousel-next-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselNextTriggerProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselNextTriggerProps & {
+    children?: Snippet;
+};
+declare const CarouselNextTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselNextTrigger = ReturnType<typeof CarouselNextTrigger>;
+export default CarouselNextTrigger;

package/dist/components/carousel/carousel-prev-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import PhArrowLeft from '../../icons/PhArrowLeft.svelte';
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselPrevTriggerProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselPrevTriggerProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.PrevTrigger
+	class={cn(
+		'inline-flex size-9 items-center justify-center rounded-md border bg-surface-1 shadow-sm hover:bg-surface-2 active:bg-surface-3 disabled:opacity-50',
+		className
+	)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhArrowLeft class="size-4" />
+	{/if}
+</Carousel.PrevTrigger>

package/dist/components/carousel/carousel-prev-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselPrevTriggerProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselPrevTriggerProps & {
+    children?: Snippet;
+};
+declare const CarouselPrevTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselPrevTrigger = ReturnType<typeof CarouselPrevTrigger>;
+export default CarouselPrevTrigger;

package/dist/components/carousel/carousel-root.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Carousel } from '@ark-ui/svelte/carousel';
+	import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
+	import { cn } from 'tailwind-variants';
+	import type { Snippet } from 'svelte';
+
+	let {
+		class: className,
+		children,
+		...rest
+	}: CarouselRootProps & { children?: Snippet } = $props();
+</script>
+
+<Carousel.Root
+	class={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', className)}
+	{...rest}
+>
+	{@render children?.()}
+</Carousel.Root>

package/dist/components/carousel/carousel-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CarouselRootProps } from '@ark-ui/svelte/carousel';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CarouselRootProps & {
+    children?: Snippet;
+};
+declare const CarouselRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselRoot = ReturnType<typeof CarouselRoot>;
+export default CarouselRoot;

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

@@ -0,0 +1,8 @@
+export { default as Root } from './carousel-root.svelte';
+export { default as Control } from './carousel-control.svelte';
+export { default as PrevTrigger } from './carousel-prev-trigger.svelte';
+export { default as NextTrigger } from './carousel-next-trigger.svelte';
+export { default as ItemGroup } from './carousel-item-group.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as IndicatorGroup } from './carousel-indicator-group.svelte';
+export { default as Indicator } from './carousel-indicator.svelte';

package/dist/components/carousel/index.js

@@ -0,0 +1,8 @@
+export { default as Root } from './carousel-root.svelte';
+export { default as Control } from './carousel-control.svelte';
+export { default as PrevTrigger } from './carousel-prev-trigger.svelte';
+export { default as NextTrigger } from './carousel-next-trigger.svelte';
+export { default as ItemGroup } from './carousel-item-group.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as IndicatorGroup } from './carousel-indicator-group.svelte';
+export { default as Indicator } from './carousel-indicator.svelte';

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { default as LinkButton } from './components/button/link-button.svelte';
 export * as Card from './components/card';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
 export type { ProcessImageOptions, CropRegion } from './utils/image-processing';
-export { default as Carousel } from './components/carousel/carousel.svelte';
+export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';

package/dist/index.js

@@ -3,7 +3,7 @@ export { default as Button } from './components/button/button.svelte';
 export { default as LinkButton } from './components/button/link-button.svelte';
 export * as Card from './components/card';
 export { loadImage, fileToDataUrl, cropImage, processImage } from './utils/image-processing';
-export { default as Carousel } from './components/carousel/carousel.svelte';
+export * as Carousel from './components/carousel';
 export { default as Checkbox } from './components/checkbox/checkbox.svelte';
 export { default as CheckboxGroup } from './components/checkbox/checkbox-group.svelte';
 export { default as Combobox } from './components/combobox/combobox.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.14.0",
+	"version": "0.15.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -35,18 +35,18 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.3",
+		"@eslint/compat": "^2.0.4",
 		"@eslint/js": "^10.0.1",
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/kit": "^2.56.1",
 		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@sveltejs/vite-plugin-svelte": "6.2.4",
 		"@tailwindcss/vite": "^4.1.18",
 		"@types/node": "^22",
-		"eslint": "^10.0.3",
+		"eslint": "^10.2.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.15.2",
+		"eslint-plugin-svelte": "^3.17.0",
 		"globals": "^17.4.0",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.4.1",