compote-ui 0.13.0 → 0.14.0

package/dist/components/button/button.variants.d.ts

@@ -13,7 +13,7 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         'icon-sm': string;
         'icon-lg': string;
     };
-}, undefined, "focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+}, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", {
     variant: {
         default: string;
         outline: string;
@@ -41,6 +41,6 @@ export declare const button: import("tailwind-variants").TVReturnType<{
         'icon-sm': string;
         'icon-lg': string;
     };
-}, undefined, "focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
+}, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof button>['variant'];
 export type ButtonSize = VariantProps<typeof button>['size'];

package/dist/components/button/button.variants.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const button = tv({
-    base: 'focus-visible:outline-ring inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    base: 'inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50',
     variants: {
         variant: {
             default: 'bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80',

package/dist/components/button/link-button.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { button, type ButtonVariant, type ButtonSize } from './button.variants';
+
+	type Props = Omit<HTMLAnchorAttributes, 'class'> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		class?: string;
+	};
+
+	let { variant, size, class: className, children, ...rest }: Props = $props();
+</script>
+
+<a class={button({ variant, size, class: className })} {...rest}>
+	{@render children?.()}
+</a>

package/dist/components/button/link-button.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type ButtonVariant, type ButtonSize } from './button.variants';
+type Props = Omit<HTMLAnchorAttributes, 'class'> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    class?: string;
+};
+declare const LinkButton: import("svelte").Component<Props, {}, "">;
+type LinkButton = ReturnType<typeof LinkButton>;
+export default LinkButton;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('p-6 pt-0', className)} {...rest}>
+	{@render children?.()}
+</div>

package/dist/components/card/card-content.svelte.d.ts

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLParagraphElement> = $props();
+</script>
+
+<p class={cn('text-sm text-ink-dim', className)} {...rest}>
+	{@render children?.()}
+</p>

package/dist/components/card/card-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardDescription: import("svelte").Component<HTMLAttributes<HTMLParagraphElement>, {}, "">;
+type CardDescription = ReturnType<typeof CardDescription>;
+export default CardDescription;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('flex items-center p-6 pt-0', className)} {...rest}>
+	{@render children?.()}
+</div>

package/dist/components/card/card-footer.svelte.d.ts

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('flex flex-col gap-1.5 p-6', className)} {...rest}>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLHeadingElement> = $props();
+</script>
+
+<h3 class={cn('text-base font-semibold leading-none', className)} {...rest}>
+	{@render children?.()}
+</h3>

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardTitle: import("svelte").Component<HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/card/card.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('rounded-xl border border-border bg-surface-1 text-ink', className)} {...rest}>
+	{@render children?.()}
+</div>

package/dist/components/card/card.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+export { default as Root } from './card.svelte';
+export { default as Header } from './card-header.svelte';
+export { default as Title } from './card-title.svelte';
+export { default as Description } from './card-description.svelte';
+export { default as Content } from './card-content.svelte';
+export { default as Footer } from './card-footer.svelte';

package/dist/components/card/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from './card.svelte';
+export { default as Header } from './card-header.svelte';
+export { default as Title } from './card-title.svelte';
+export { default as Description } from './card-description.svelte';
+export { default as Content } from './card-content.svelte';
+export { default as Footer } from './card-footer.svelte';

package/dist/components/checkbox/checkbox.svelte

@@ -15,7 +15,7 @@
 	<Checkbox.Control
 		class="{children
 			? 'mt-0.5'
-			: ''} data-focus-visible:outline-ring flex size-5 shrink-0 items-center justify-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
+			: ''} flex size-5 shrink-0 items-center justify-center rounded-sm border bg-transparent transition-colors hover:border-primary/50 data-disabled:pointer-events-none data-disabled:opacity-50 data-focus-visible:outline-2 data-focus-visible:outline-offset-2 data-focus-visible:outline-ring data-invalid:border-danger data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary"
 	>
 		<Checkbox.Indicator>
 			<PhCheck class="size-3.5 text-ink-inverse" />

package/dist/components/combobox/combobox.svelte

@@ -100,8 +100,8 @@
 
 	<Combobox.Control
 		class={cn(
-			'flex min-h-9 items-center gap-1 rounded border px-3 shadow-sm',
-			'focus-within:ring-1 focus-within:ring-primary',
+			'flex min-h-9 items-center gap-1 rounded border bg-surface-1 px-3 shadow-sm',
+			'focus-within:ring-1 focus-within:ring-ring',
 			'data-invalid:border-danger data-invalid:focus-within:ring-danger',
 			multiple && 'flex-wrap py-1'
 		)}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 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 type { ProcessImageOptions, CropRegion } from './utils/image-processing';
 export { default as Carousel } from './components/carousel/carousel.svelte';

package/dist/index.js

@@ -1,5 +1,7 @@
 // Reexport your entry components here
 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 { default as Checkbox } from './components/checkbox/checkbox.svelte';

package/dist/theme.css

@@ -35,8 +35,12 @@
 	--compote-ring: var(--compote-primary);
 }
 
-.dark  { color-scheme: dark; }
-.light { color-scheme: light; }
+.dark {
+	color-scheme: dark;
+}
+.light {
+	color-scheme: light;
+}
 
 @theme inline {
 	--color-ink: var(--compote-ink);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.13.0",
+	"version": "0.14.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",