@heyramzi/ui 3.1.0 → 3.3.0

package/src/shadcn/item/item-media.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const itemMediaVariants = tv({
+		base: "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "[&_svg:not([class*='size-'])]:size-4",
+				image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-media"
+	data-variant={variant}
+	class={cn(itemMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/item/item-media.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const itemMediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        icon: string;
+        image: string;
+    };
+}, undefined, "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", undefined, undefined, undefined>;
+export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: ItemMediaVariant;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/item/item-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from "../separator/index.js";
+	import { cn } from "../../lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="item-separator"
+	orientation="horizontal"
+	class={cn("my-2", className)}
+	{...restProps}
+/>

package/src/shadcn/item/item-separator.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const $$Component: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "children" | "child"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/item/item-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-title"
+	class={cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/item/item-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/item/item.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const itemVariants = tv({
+		base: "[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
+		variants: {
+			variant: {
+				default: "border-transparent",
+				outline: "border-border",
+				muted: "bg-muted/50 border-transparent",
+			},
+			size: {
+				default: "gap-3.5 px-4 py-3.5",
+				sm: "gap-2.5 px-3 py-2.5",
+				xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ItemSize = VariantProps<typeof itemVariants>["size"];
+	export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		variant,
+		size,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		variant?: ItemVariant;
+		size?: ItemSize;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(itemVariants({ variant, size }), className),
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/src/shadcn/item/item.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const itemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+        muted: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        xs: string;
+    };
+}, undefined, "[a]:hover:bg-muted rounded-md border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors", undefined, undefined, undefined>;
+export type ItemSize = VariantProps<typeof itemVariants>["size"];
+export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
+import { type WithElementRef } from "../../lib/utils.js";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    variant?: ItemVariant;
+    size?: ItemSize;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/native-select/index.ts

@@ -0,0 +1,13 @@
+import Root from "./native-select.svelte";
+import Option from "./native-select-option.svelte";
+import OptGroup from "./native-select-opt-group.svelte";
+
+export {
+  Root,
+  Option,
+  OptGroup,
+  //
+  Root as NativeSelect,
+  Option as NativeSelectOption,
+  OptGroup as NativeSelectOptGroup,
+};

package/src/shadcn/native-select/native-select-opt-group.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLOptgroupAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptgroupAttributes> = $props();
+</script>
+
+<optgroup
+	bind:this={ref}
+	data-slot="native-select-optgroup"
+	class={cn("bg-[Canvas] text-[CanvasText]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</optgroup>

package/src/shadcn/native-select/native-select-opt-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLOptgroupAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLOptgroupAttributes>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/native-select/native-select-option.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLOptionAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOptionAttributes> = $props();
+</script>
+
+<option
+	bind:this={ref}
+	data-slot="native-select-option"
+	class={cn("bg-[Canvas] text-[CanvasText]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</option>

package/src/shadcn/native-select/native-select-option.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLOptionAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLOptionAttributes>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/native-select/native-select.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+	import { CaretDown } from "phosphor-svelte";
+
+	type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes, HTMLSelectElement>, "size"> & {
+		size?: "sm" | "default";
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = "default",
+		children,
+		...restProps
+	}: NativeSelectProps = $props();
+</script>
+
+<div
+	class={cn(
+		"group/native-select relative w-fit has-[select:disabled]:opacity-50",
+		className,
+	)}
+	data-slot="native-select-wrapper"
+	data-size={size}
+>
+	<!-- The kit's Select trigger sizes: 32px, 28px small, so the two read as one control. -->
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		data-size={size}
+		class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 enabled:hover:border-foreground/20 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-field transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] select-none aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:text-[0.8rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<CaretDown
+		size={16}
+		aria-hidden="true"
+		data-slot="native-select-icon"
+		class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 select-none"
+	/>
+</div>

package/src/shadcn/native-select/native-select.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLSelectAttributes } from "svelte/elements";
+type NativeSelectProps = Omit<WithElementRef<HTMLSelectAttributes, HTMLSelectElement>, "size"> & {
+    size?: "sm" | "default";
+};
+declare const $$Component: import("svelte").Component<NativeSelectProps, {}, "value" | "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/index.ts

@@ -0,0 +1,31 @@
+import Content from "./pagination-content.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Next from "./pagination-next.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import Previous from "./pagination-previous.svelte";
+import Root from "./pagination.svelte";
+
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton, // old
+	NextButton, // old
+	Ellipsis,
+	Previous,
+	Next,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton, // old
+	NextButton as PaginationNextButton, // old
+	Ellipsis as PaginationEllipsis,
+	Previous as PaginationPrevious,
+	Next as PaginationNext,
+};

package/src/shadcn/pagination/pagination-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn("gap-1 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>

package/src/shadcn/pagination/pagination-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLUListElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DotsThree } from "phosphor-svelte";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	aria-hidden="true"
+	data-slot="pagination-ellipsis"
+	class={cn("size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center", className)}
+	{...restProps}
+>
+	<DotsThree aria-hidden="true" />
+	<span class="sr-only">More pages</span>
+</span>

package/src/shadcn/pagination/pagination-ellipsis.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { WithElementRef } from "../../lib/utils.js";
+	import type { HTMLLiAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
+	{@render children?.()}
+</li>

package/src/shadcn/pagination/pagination-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../lib/utils.js";
+import type { HTMLLiAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLLiAttributes>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-link.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { buttonVariants, type ButtonSize } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		isActive,
+		page,
+		children,
+		...restProps
+	}: PaginationPrimitive.PageProps & {
+		size?: ButtonSize;
+		isActive: boolean;
+	} = $props();
+</script>
+
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
+<PaginationPrimitive.Page
+	bind:ref
+	{page}
+	aria-current={isActive ? "page" : undefined}
+	data-slot="pagination-link"
+	data-active={isActive}
+	data-size={size}
+	class={cn(
+		buttonVariants({ size, icon: true, variant: isActive ? "outline" : "ghost" }),
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.Page>

package/src/shadcn/pagination/pagination-link.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Pagination as PaginationPrimitive } from "bits-ui";
+import { type ButtonSize } from "../button/index.js";
+type $$ComponentProps = PaginationPrimitive.PageProps & {
+    size?: ButtonSize;
+    isActive: boolean;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/pagination/pagination-next-button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretRight } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<span>Next</span>
+	<CaretRight
+		aria-hidden="true"
+		class={cn("cn-rtl-flip size-4", className)}
+	/>
+{/snippet}
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: "ghost" }), "pr-2!", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.NextButton>

package/src/shadcn/pagination/pagination-next-button.svelte.d.ts

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

package/src/shadcn/pagination/pagination-next.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretRight } from "phosphor-svelte";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(buttonVariants({ variant: "ghost", size: "default" }), "pr-2!", className)}
+	{...restProps}
+>
+	<span class="hidden sm:block">Next</span>
+	<CaretRight
+		aria-hidden="true"
+		data-icon="inline-end"
+		class="cn-rtl-flip"
+	/>
+</PaginationPrimitive.NextButton>

package/src/shadcn/pagination/pagination-next.svelte.d.ts

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

package/src/shadcn/pagination/pagination-prev-button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretLeft } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<CaretLeft
+		aria-hidden="true"
+		class={cn("cn-rtl-flip size-4", className)}
+	/>
+	<span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(buttonVariants({ variant: "ghost" }), "pl-2!", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</PaginationPrimitive.PrevButton>

package/src/shadcn/pagination/pagination-prev-button.svelte.d.ts

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

package/src/shadcn/pagination/pagination-previous.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { CaretLeft } from "phosphor-svelte";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(
+		buttonVariants({ variant: "ghost", size: "default" }),
+		"pl-2!",
+		className
+	)}
+	{...restProps}
+>
+	<CaretLeft
+		aria-hidden="true"
+		data-icon="inline-start"
+		class="cn-rtl-flip"
+	/>
+	<span class="hidden sm:block">Previous</span>
+</PaginationPrimitive.PrevButton>

package/src/shadcn/pagination/pagination-previous.svelte.d.ts

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