@tanglemedia/svelte-starter-ui-shadcn 0.1.0 → 1.0.0-next.0

package/dist/app.css

@@ -118,4 +118,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from './lib/index.ts';
-export type * from './lib/components/extra/types.ts';
+export * from "./lib/index.ts";
+export type * from "./lib/components/extra/types.ts";

package/dist/lib/components/extended/confirmation/confirmation-state.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from "svelte";
 const defaultProps = {
-    title: 'Are you sure?',
-    description: 'This action cannot be undone.'
+    title: "Are you sure?",
+    description: "This action cannot be undone.",
 };
 export class ConfirmationDialogState {
     props = $state({ ...defaultProps });
@@ -16,7 +16,7 @@ export class ConfirmationDialogState {
         this.open = false;
     }
     async confirm(props) {
-        const p = { ...defaultProps, ...props, };
+        const p = { ...defaultProps, ...props };
         return new Promise((ok) => {
             this.show();
             const { onClose, ...rest } = p;
@@ -27,14 +27,14 @@ export class ConfirmationDialogState {
                         onClose(s);
                     }
                     ok(s);
-                }
+                },
             };
         });
     }
 }
 const ctxKey = `--confirmation-dialog`;
 export function initConfirmationDialog() {
-    setContext(Symbol.for(ctxKey), new ConfirmationDialogState);
+    setContext(Symbol.for(ctxKey), new ConfirmationDialogState());
 }
 export function getConfirmationDialog() {
     return getContext(Symbol.for(ctxKey));
@@ -42,7 +42,7 @@ export function getConfirmationDialog() {
 export function useConfirmationDialog() {
     const dialog = getConfirmationDialog();
     if (!dialog) {
-        throw Error('Dialog has not been initialized. Please make sure you have called to confirmation provider');
+        throw Error("Dialog has not been initialized. Please make sure you have called to confirmation provider");
     }
     return dialog;
 }

package/dist/lib/components/extended/confirmation/index.d.ts

@@ -1,4 +1,4 @@
-import Provider from './confirmation-provider.svelte';
-import Prompt from './confirmation-prompt.svelte';
-import { useConfirmationDialog, ConfirmationDialogState } from './confirmation-state.svelte';
-export { Provider, Provider as Root, Prompt, useConfirmationDialog, ConfirmationDialogState };
+import Provider from "./confirmation-provider.svelte";
+import Prompt from "./confirmation-prompt.svelte";
+import { useConfirmationDialog, ConfirmationDialogState } from "./confirmation-state.svelte";
+export { Provider, Provider as Root, Prompt, useConfirmationDialog, ConfirmationDialogState, };

package/dist/lib/components/extended/confirmation/index.js

@@ -1,4 +1,4 @@
-import Provider from './confirmation-provider.svelte';
-import Prompt from './confirmation-prompt.svelte';
-import { useConfirmationDialog, ConfirmationDialogState } from './confirmation-state.svelte';
-export { Provider, Provider as Root, Prompt, useConfirmationDialog, ConfirmationDialogState };
+import Provider from "./confirmation-provider.svelte";
+import Prompt from "./confirmation-prompt.svelte";
+import { useConfirmationDialog, ConfirmationDialogState, } from "./confirmation-state.svelte";
+export { Provider, Provider as Root, Prompt, useConfirmationDialog, ConfirmationDialogState, };

package/dist/lib/components/extended/image-link/index.d.ts

@@ -1,2 +1,2 @@
-import Root from './image-link.svelte';
+import Root from "./image-link.svelte";
 export { Root, Root as ImageLink };

package/dist/lib/components/extended/image-link/index.js

@@ -1,2 +1,2 @@
-import Root from './image-link.svelte';
+import Root from "./image-link.svelte";
 export { Root, Root as ImageLink };

package/dist/lib/components/extended/index.d.ts

@@ -1,3 +1,4 @@
-export * as Skeletons from './skeletons/index.ts';
-export * as ImageLink from './image-link/index.ts';
-export * as Confirmation from './confirmation/index.ts';
+export * as Skeletons from "./skeletons/index.ts";
+export * as ImageLink from "./image-link/index.ts";
+export * as Confirmation from "./confirmation/index.ts";
+export * as Loaders from "./loaders/index.ts";

package/dist/lib/components/extended/index.js

@@ -1,3 +1,4 @@
 export * as Skeletons from "./skeletons/index.js";
 export * as ImageLink from "./image-link/index.js";
 export * as Confirmation from "./confirmation/index.js";
+export * as Loaders from "./loaders/index.js";

package/dist/lib/components/extended/loaders/index.d.ts

@@ -0,0 +1,2 @@
+import Message from "./loader-message.svelte";
+export { Message };

package/dist/lib/components/extended/loaders/index.js

@@ -0,0 +1,2 @@
+import Message from "./loader-message.svelte";
+export { Message };

package/dist/lib/components/extended/loaders/loader-message.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import * as Item from '../../ui/item/index.js';
+  import type {
+    ItemSize,
+    ItemVariant,
+  } from '../../ui/item/item.svelte';
+  import { Spinner } from '../../ui/spinner/index.js';
+  import { cn, type WithElementRef } from '../../utils';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+  } & {
+    title?: string | Snippet<[]>;
+    description?: string | Snippet<[]>;
+    icon?: Snippet<[]>;
+  };
+
+  let {
+    ref = $bindable(null),
+    child,
+    title = 'Loading',
+    description = 'Come back in a few minutes',
+    class: cls,
+    ...rest
+  }: Props = $props();
+
+  const mergedProps = $derived({
+    class: cn('flex w-full flex-col gap-4', cls),
+    'data-slot': 'loader-message',
+    ...rest,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {#if mergedProps.children}
+      {@render mergedProps.children?.()}
+    {:else}
+      <Item.Root variant="muted">
+        <Item.Media>
+          <Spinner />
+        </Item.Media>
+        <Item.Content>
+          <Item.Header>
+            {#if typeof title === 'string'}
+              {title}
+            {:else}
+              {@render title?.()}
+            {/if}
+          </Item.Header>
+          <Item.Description>
+            {#if typeof description === 'string'}
+              {description}
+            {:else}
+              {@render description?.()}
+            {/if}
+          </Item.Description>
+        </Item.Content>
+      </Item.Root>
+    {/if}
+  </div>
+{/if}
+
+<!-- <div
+  class={cn('rounded-xl bg-linear-to-r from-muted/40 via-muted/30 to-muted/10 p-4', cls)}
+  {...rest}
+>
+  <div class="flex items-center gap-3">
+    <div class="flex h-10 w-10 items-center justify-center rounded-sm bg-primary/10">
+      <RefreshCw class="size-5 animate-spin" />
+    </div>
+    <div class="flex flex-col text-sm leading-tight">
+      <span class="font-medium text-foreground">{title}</span>
+      <span class="text-muted-foreground">{description}</span>
+    </div>
+  </div>
+</div> -->

package/dist/lib/components/extended/loaders/loader-message.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ItemSize, ItemVariant } from '../../ui/item/item.svelte';
+import { type WithElementRef } from '../../utils';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+} & {
+    title?: string | Snippet<[]>;
+    description?: string | Snippet<[]>;
+    icon?: Snippet<[]>;
+};
+declare const LoaderMessage: import("svelte").Component<Props, {}, "ref">;
+type LoaderMessage = ReturnType<typeof LoaderMessage>;
+export default LoaderMessage;

package/dist/lib/components/extended/skeletons/index.d.ts

@@ -1,7 +1,8 @@
-import Grid from './skeleton-grid.svelte';
-import List from './skeleton-list.svelte';
-import Article from './skeleton-article.svelte';
-import Feed from './skeleton-feed.svelte';
-import Profile from './skeleton-profile.svelte';
-import Square from './skeleton-square.svelte';
-export { Grid, Article, Feed, Profile, Square, List };
+import Grid from "./skeleton-grid.svelte";
+import List from "./skeleton-list.svelte";
+import Article from "./skeleton-article.svelte";
+import Feed from "./skeleton-feed.svelte";
+import Profile from "./skeleton-profile.svelte";
+import Square from "./skeleton-square.svelte";
+import Message from "./skeleton-message.svelte";
+export { Grid, Article, Feed, Profile, Square, List, Message };

package/dist/lib/components/extended/skeletons/index.js

@@ -1,7 +1,8 @@
-import Grid from './skeleton-grid.svelte';
-import List from './skeleton-list.svelte';
-import Article from './skeleton-article.svelte';
-import Feed from './skeleton-feed.svelte';
-import Profile from './skeleton-profile.svelte';
-import Square from './skeleton-square.svelte';
-export { Grid, Article, Feed, Profile, Square, List };
+import Grid from "./skeleton-grid.svelte";
+import List from "./skeleton-list.svelte";
+import Article from "./skeleton-article.svelte";
+import Feed from "./skeleton-feed.svelte";
+import Profile from "./skeleton-profile.svelte";
+import Square from "./skeleton-square.svelte";
+import Message from "./skeleton-message.svelte";
+export { Grid, Article, Feed, Profile, Square, List, Message };

package/dist/lib/components/extended/skeletons/skeleton-message.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Skeleton } from '../../ui/skeleton/index.js';
+  import { cn } from '../../utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = {
+    message?: string;
+  } & HTMLAttributes<HTMLDivElement>;
+
+  const { message = 'Loading...', class: cls, ...rest }: Props = $props();
+</script>
+
+<div
+  class={cn('flex flex-col items-center justify-center space-y-3 p-6', cls)}
+  {...rest}
+>
+  <div class="flex items-center space-x-2">
+    <Skeleton class="h-4 w-4 rounded-full" />
+    <p class="text-sm text-muted-foreground animate-pulse">{message}</p>
+  </div>
+  <Skeleton class="h-3 w-32" />
+</div>

package/dist/lib/components/extended/skeletons/skeleton-message.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    message?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const SkeletonMessage: import("svelte").Component<Props, {}, "">;
+type SkeletonMessage = ReturnType<typeof SkeletonMessage>;
+export default SkeletonMessage;

package/dist/lib/components/extra/index.d.ts

@@ -1 +1 @@
-export * from './copy-button/index.js';
+export * from "./copy-button/index.js";

package/dist/lib/components/extra/index.js

@@ -1 +1 @@
-export * from './copy-button/index.js';
+export * from "./copy-button/index.js";

package/dist/lib/components/extra/types.d.ts

@@ -1,2 +1,2 @@
-export type * from './copy-button/types.js';
-export type * from './code/types.js';
+export type * from "./copy-button/types.js";
+export type * from "./code/types.js";

package/dist/lib/components/ui/accordion/accordion-content.svelte

@@ -16,7 +16,7 @@
 	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
 	{...restProps}
 >
-	<div class={cn("pb-4 pt-0", className)}>
+	<div class={cn("pt-0 pb-4", className)}>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

package/dist/lib/components/ui/accordion/accordion-trigger.svelte

@@ -19,7 +19,7 @@
 		data-slot="accordion-trigger"
 		bind:ref
 		class={cn(
-			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-start text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+			"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
 			className
 		)}
 		{...restProps}

package/dist/lib/components/ui/alert/alert.svelte

@@ -36,9 +36,9 @@
 <div
 	bind:this={ref}
 	data-slot="alert"
+	role="alert"
 	class={cn(alertVariants({ variant }), className)}
 	{...restProps}
-	role="alert"
 >
 	{@render children?.()}
 </div>

package/dist/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -21,7 +21,7 @@
 		bind:ref
 		data-slot="alert-dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in 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 fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			"bg-background data-[state=open]:animate-in 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 			className
 		)}
 		{...restProps}

package/dist/lib/components/ui/badge/badge.svelte

@@ -2,7 +2,7 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
 		variants: {
 			variant: {
 				default:

package/dist/lib/components/ui/badge/badge.svelte.d.ts

@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
     variant: {
         default: string;
         secondary: string;
@@ -20,7 +20,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", unknown, unknown, undefined>>;
 export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
 import type { HTMLAnchorAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../utils.js";

package/dist/lib/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="breadcrumb-list"
 	class={cn(
-		"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+		"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/button/button.svelte

@@ -4,15 +4,15 @@
 	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
 				destructive:
-					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+					"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
 				outline:
-					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
-				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+					"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
 				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
 				link: "text-primary underline-offset-4 hover:underline",
 			},

package/dist/lib/components/ui/button/button.svelte.d.ts

@@ -18,7 +18,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         "icon-sm": string;
         "icon-lg": string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variant: {
         default: string;
         destructive: string;
@@ -52,7 +52,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         "icon-sm": string;
         "icon-lg": string;
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {

package/dist/lib/components/ui/button-group/button-group-text.svelte

@@ -15,7 +15,7 @@
 	const mergedProps = $derived({
 		...restProps,
 		class: cn(
-			"bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+			"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
 			className
 		),
 	});

package/dist/lib/components/ui/calendar/calendar-cell.svelte

@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"size-(--cell-size) relative p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/calendar/calendar-day.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant: "ghost" }),
-		"size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none",
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
 		"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
 		// Outside months

package/dist/lib/components/ui/calendar/calendar-header.svelte

@@ -12,7 +12,7 @@
 <CalendarPrimitive.Header
 	bind:ref
 	class={cn(
-		"h-(--cell-size) flex w-full items-center justify-center gap-1.5 text-sm font-medium",
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/calendar/calendar-month-select.svelte

@@ -14,11 +14,15 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
 		className
 	)}
 >
-	<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+	<CalendarPrimitive.MonthSelect
+		bind:ref
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
 		{#snippet child({ props, monthItems, selectedMonthItem })}
 			<select {...props} {value} {onchange}>
 				{#each monthItems as monthItem (monthItem.value)}
@@ -33,7 +37,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pe-1 ps-2 text-sm font-medium [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}

package/dist/lib/components/ui/calendar/calendar-next-button.svelte

@@ -23,7 +23,7 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	children={children || Fallback}

package/dist/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -23,7 +23,7 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	children={children || Fallback}

package/dist/lib/components/ui/calendar/calendar-year-select.svelte

@@ -13,11 +13,15 @@
 
 <span
 	class={cn(
-		"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border",
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
 		className
 	)}
 >
-	<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+	<CalendarPrimitive.YearSelect
+		bind:ref
+		class="dark:bg-popover dark:text-popover-foreground absolute inset-0 opacity-0"
+		{...restProps}
+	>
 		{#snippet child({ props, yearItems, selectedYearItem })}
 			<select {...props} {value}>
 				{#each yearItems as yearItem (yearItem.value)}
@@ -32,7 +36,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pe-1 ps-2 text-sm font-medium [&>svg]:size-3.5"
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	class={cn("flex items-center px-6 [.border-t]:pt-6", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
 		className
 	)}
 	{...restProps}

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-title"
-	class={cn("font-semibold leading-none", className)}
+	class={cn("leading-none font-semibold", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/carousel/carousel-next.svelte

@@ -25,7 +25,7 @@
 		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
 			? "-end-12 top-1/2 -translate-y-1/2"
-			: "-bottom-12 start-1/2 -translate-x-1/2 rotate-90",
+			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
 		className
 	)}
 	onclick={emblaCtx.scrollNext}

package/dist/lib/components/ui/carousel/carousel-previous.svelte

@@ -25,7 +25,7 @@
 		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
 			? "-start-12 top-1/2 -translate-y-1/2"
-			: "-top-12 start-1/2 -translate-x-1/2 rotate-90",
+			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
 		className
 	)}
 	onclick={emblaCtx.scrollPrev}

package/dist/lib/components/ui/chart/chart-container.svelte

@@ -35,7 +35,7 @@
 		// Overrides
 		//
 		// Stroke around dots/marks when hovering
-		"[&_.stroke-white]:stroke-transparent",
+		"[&_.lc-highlight-point]:stroke-transparent",
 		// override the default stroke color of lines
 		"[&_.lc-line]:stroke-border/50",
 
@@ -44,7 +44,7 @@
 
 		// by default, when you hover a point on a stacked series chart, it will drop the opacity
 		// of the other series, this overrides that
-		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text-svg]:overflow-visible [&_.lc-text]:text-xs",
+		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible",
 
 		// We don't want the little tick lines between the axis labels and the chart, so we remove
 		// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every