@svadmin/ui 0.3.0 → 0.4.1

package/src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLButtonAttributes>;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: Props & { child?: import("svelte").Snippet<[{ props: Record<string, unknown> }]> } = $props();
+</script>
+
+{#if child}
+	{@render child({ props: { ...restProps, class: cn(className), "data-slot": "dropdown-menu-trigger" } })}
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="dropdown-menu-trigger"
+		class={cn(className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/src/components/ui/dropdown-menu/index.ts

@@ -2,14 +2,20 @@ import DropdownMenu from "./dropdown-menu.svelte";
 import DropdownMenuContent from "./dropdown-menu-content.svelte";
 import DropdownMenuItem from "./dropdown-menu-item.svelte";
 import DropdownMenuSeparator from "./dropdown-menu-separator.svelte";
+import DropdownMenuTrigger from "./dropdown-menu-trigger.svelte";
+import DropdownMenuCheckboxItem from "./dropdown-menu-checkbox-item.svelte";
 
 export {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+	DropdownMenuCheckboxItem,
 	DropdownMenu as Root,
 	DropdownMenuContent as Content,
 	DropdownMenuItem as Item,
 	DropdownMenuSeparator as Separator,
+	DropdownMenuTrigger as Trigger,
+	DropdownMenuCheckboxItem as CheckboxItem,
 };

package/src/components/ui/label/index.ts

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

package/src/components/ui/label/label.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../../utils.js';
+  import type { HTMLLabelAttributes } from 'svelte/elements';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLabelAttributes> = $props();
+</script>
+
+<label
+  bind:this={ref}
+  data-slot="label"
+  class={cn(
+    "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</label>

package/src/components/ui/pagination/index.ts

@@ -0,0 +1,7 @@
+export { default as Root } from './pagination.svelte';
+export { default as Content } from './pagination-content.svelte';
+export { default as Item } from './pagination-item.svelte';
+export { default as Link } from './pagination-link.svelte';
+export { default as Ellipsis } from './pagination-ellipsis.svelte';
+export { default as Previous } from './pagination-previous.svelte';
+export { default as Next } from './pagination-next.svelte';

package/src/components/ui/pagination/pagination-content.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLUListElement> & { children?: Snippet } = $props();
+</script>
+
+<ul data-slot="pagination-content" class={cn("flex flex-row items-center gap-1", className)} {...restProps}>
+  {@render children?.()}
+</ul>

package/src/components/ui/pagination/pagination-ellipsis.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { Ellipsis } from 'lucide-svelte';
+
+  let { class: className, ...restProps }: HTMLAttributes<HTMLSpanElement> = $props();
+</script>
+
+<span aria-hidden data-slot="pagination-ellipsis" class={cn("flex size-9 items-center justify-center", className)} {...restProps}>
+  <Ellipsis class="size-4" />
+  <span class="sr-only">More pages</span>
+</span>

package/src/components/ui/pagination/pagination-item.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLLiAttributes & { children?: Snippet } = $props();
+</script>
+
+<li data-slot="pagination-item" class={cn("", className)} {...restProps}>
+  {@render children?.()}
+</li>

package/src/components/ui/pagination/pagination-link.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { buttonVariants } from '../button/index.js';
+
+  let {
+    class: className,
+    isActive = false,
+    children,
+    ...restProps
+  }: HTMLButtonAttributes & { isActive?: boolean; children?: Snippet } = $props();
+</script>
+
+<button
+  aria-current={isActive ? 'page' : undefined}
+  data-slot="pagination-link"
+  data-active={isActive}
+  class={cn(
+    buttonVariants({ variant: isActive ? 'outline' : 'ghost', size: 'icon-sm' }),
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</button>

package/src/components/ui/pagination/pagination-next.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { buttonVariants } from '../button/index.js';
+  import { ChevronRight } from 'lucide-svelte';
+
+  let { class: className, children, ...restProps }: HTMLButtonAttributes & { children?: Snippet } = $props();
+</script>
+
+<button
+  aria-label="Go to next page"
+  data-slot="pagination-next"
+  class={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), "gap-1", className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <ChevronRight class="size-4" />
+  {/if}
+</button>

package/src/components/ui/pagination/pagination-previous.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { buttonVariants } from '../button/index.js';
+  import { ChevronLeft } from 'lucide-svelte';
+
+  let { class: className, children, ...restProps }: HTMLButtonAttributes & { children?: Snippet } = $props();
+</script>
+
+<button
+  aria-label="Go to previous page"
+  data-slot="pagination-previous"
+  class={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), "gap-1", className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <ChevronLeft class="size-4" />
+  {/if}
+</button>

package/src/components/ui/pagination/pagination.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> & { children?: Snippet } = $props();
+</script>
+
+<nav aria-label="pagination" data-slot="pagination" class={cn("mx-auto flex w-full justify-center", className)} {...restProps}>
+  {@render children?.()}
+</nav>

package/src/components/ui/popover/index.ts

@@ -0,0 +1,12 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Trigger,
+	Close,
+};
+export { default as Content } from "./popover-content.svelte";

package/src/components/ui/popover/popover-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		...restProps
+	}: PopoverPrimitive.ContentProps & { class?: string } = $props();
+</script>
+
+<PopoverPrimitive.Portal>
+	<PopoverPrimitive.Content
+		bind:ref
+		{align}
+		{sideOffset}
+		class={cn(
+			"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>

package/src/components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from "./progress.svelte";

package/src/components/ui/progress/progress.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+
+	let { value = 0, max = 100, class: className, ...restProps }:
+		{ value?: number; max?: number; class?: string } & Record<string, unknown> = $props();
+
+	const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+</script>
+
+<div
+	class={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+	role="progressbar"
+	aria-valuenow={value}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	{...restProps}
+>
+	<div
+		class="h-full w-full flex-1 bg-primary transition-all duration-200"
+		style="transform: translateX(-{100 - percentage}%)"
+	></div>
+</div>

package/src/components/ui/scroll-area/index.ts

@@ -0,0 +1 @@
+export { default as ScrollArea } from "./scroll-area.svelte";

package/src/components/ui/scroll-area/scroll-area.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+
+	let { class: className, children, orientation = 'vertical', ...restProps }:
+		{ class?: string; children: Snippet; orientation?: 'vertical' | 'horizontal' } & Record<string, unknown> = $props();
+</script>
+
+<div
+	class={cn("relative overflow-hidden", className)}
+	{...restProps}
+>
+	<div class={cn(
+		"h-full w-full overflow-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border hover:scrollbar-thumb-muted-foreground/50",
+		orientation === 'horizontal' ? 'overflow-x-auto overflow-y-hidden' : 'overflow-y-auto overflow-x-hidden'
+	)}>
+		{@render children()}
+	</div>
+</div>
+

package/src/components/ui/sheet/index.ts

@@ -1,2 +1,16 @@
 import Root from "./sheet.svelte";
-export { Root, Root as Sheet };
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+import Footer from "./sheet-footer.svelte";
+
+export {
+	Root,
+	Content,
+	Header,
+	Title,
+	Description,
+	Footer,
+	Root as Sheet,
+};

package/src/components/ui/sheet/sheet-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: "left" | "right";
+	};
+
+	let {
+		ref = $bindable(null),
+		side = "right",
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-content"
+	class={cn(
+		"flex flex-col gap-4 h-full",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/sheet/sheet-description.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLParagraphElement>>;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="sheet-description"
+	class={cn("text-sm text-muted-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/src/components/ui/sheet/sheet-footer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/sheet/sheet-header.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn("flex flex-col gap-1.5 pb-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/sheet/sheet-title.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLHeadingElement>>;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<h3
+	bind:this={ref}
+	data-slot="sheet-title"
+	class={cn("text-lg font-semibold text-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</h3>

package/src/index.ts

@@ -40,6 +40,11 @@ export { default as PageSkeleton } from './components/PageSkeleton.svelte';
 export { default as NavigateToResource } from './components/NavigateToResource.svelte';
 export { default as CatchAllNavigate } from './components/CatchAllNavigate.svelte';
 export { default as ThemedTitle } from './components/ThemedTitle.svelte';
+export { default as CommandPalette } from './components/CommandPalette.svelte';
+export { default as StepsForm } from './components/StepsForm.svelte';
+export { default as InfiniteList } from './components/InfiniteList.svelte';
+export { default as ComboboxField } from './components/ComboboxField.svelte';
+export { default as PasswordInput } from './components/PasswordInput.svelte';
 
 // Field display components
 export { default as NumberField } from './components/fields/NumberField.svelte';
@@ -52,6 +57,11 @@ export { default as FileField } from './components/fields/FileField.svelte';
 export { default as MarkdownField } from './components/fields/MarkdownField.svelte';
 export { default as TextField } from './components/fields/TextField.svelte';
 export { default as ImageField } from './components/fields/ImageField.svelte';
+export { default as SelectField } from './components/fields/SelectField.svelte';
+export { default as MultiSelectField } from './components/fields/MultiSelectField.svelte';
+export { default as RelationField } from './components/fields/RelationField.svelte';
+export { default as JsonField } from './components/fields/JsonField.svelte';
+export { default as RichTextField } from './components/fields/RichTextField.svelte';
 
 // CRUD Buttons
 export {
@@ -70,7 +80,7 @@ export { Badge } from './components/ui/badge/index.js';
 export { Separator } from './components/ui/separator/index.js';
 export { Avatar } from './components/ui/avatar/index.js';
 export { Skeleton } from './components/ui/skeleton/index.js';
-export { Sheet } from './components/ui/sheet/index.js';
+export * as Sheet from './components/ui/sheet/index.js';
 export * as Alert from './components/ui/alert/index.js';
 export * as Card from './components/ui/card/index.js';
 export * as Dialog from './components/ui/dialog/index.js';
@@ -79,5 +89,24 @@ export * as Tabs from './components/ui/tabs/index.js';
 export * as Tooltip from './components/ui/tooltip/index.js';
 export * as DropdownMenu from './components/ui/dropdown-menu/index.js';
 
+// Additional shadcn components
+export * as Breadcrumb from './components/ui/breadcrumb/index.js';
+export * as Pagination from './components/ui/pagination/index.js';
+export * as ContextMenu from './components/ui/context-menu/index.js';
+export * as Drawer from './components/ui/drawer/index.js';
+export * as Collapsible from './components/ui/collapsible/index.js';
+export { Label } from './components/ui/label/index.js';
+export { Command } from './components/ui/command/index.js';
+
 // Utils
 export { cn } from './utils';
+
+// Field component registry
+export {
+  builtinDisplayComponents, registerDisplayComponent,
+  getDisplayComponent, hasDisplayComponent,
+} from './components/fieldComponentMap';
+export type { FieldComponentMap } from './components/fieldComponentMap';
+
+// Svelte Actions
+export { clickOutside, shortcut, intersect, copyOnClick } from './actions';