dr-widget 0.1.3__py3-none-any.whl

dr_widget/widgets/config_file_manager/src/lib/components/ui/empty/empty-media.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const emptyMediaVariants = tv({
+		base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["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?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-icon"
+	data-variant={variant}
+	class={cn(emptyMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/empty/empty-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="empty-title"
+	class={cn("text-lg font-medium tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/empty/empty.svelte

@@ -0,0 +1,23 @@
+<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="empty"
+	class={cn(
+		"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/empty/index.ts

@@ -0,0 +1,22 @@
+import Root from "./empty.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Description from "./empty-description.svelte";
+import Content from "./empty-content.svelte";
+
+export {
+  Root,
+  Header,
+  Media,
+  Title,
+  Description,
+  Content,
+  //
+  Root as Empty,
+  Header as EmptyHeader,
+  Media as EmptyMedia,
+  Title as EmptyTitle,
+  Description as EmptyDescription,
+  Content as EmptyContent,
+};

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-content"
+	class={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-description.svelte

@@ -0,0 +1,25 @@
+<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<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="field-description"
+	class={cn(
+		"text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+		"nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-error.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		errors,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+		errors?: { message?: string }[];
+	} = $props();
+
+	const hasContent = $derived.by(() => {
+		// has slotted error
+		if (children) return true;
+
+		// no errors
+		if (!errors) return false;
+
+		// has an error but no message
+		if (errors.length === 1 && !errors[0]?.message) {
+			return false;
+		}
+
+		return true;
+	});
+
+	const isMultipleErrors = $derived(errors && errors.length > 1);
+	const singleErrorMessage = $derived(errors && errors.length === 1 && errors[0]?.message);
+</script>
+
+{#if hasContent}
+	<div
+		bind:this={ref}
+		role="alert"
+		data-slot="field-error"
+		class={cn("text-destructive text-sm font-normal", className)}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{:else if singleErrorMessage}
+			{singleErrorMessage}
+		{:else if isMultipleErrors}
+			<ul class="ml-4 flex list-disc flex-col gap-1">
+				{#each errors ?? [] as error, index (index)}
+					{#if error?.message}
+						<li>{error.message}</li>
+					{/if}
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-group.svelte

@@ -0,0 +1,23 @@
+<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="field-group"
+	class={cn(
+		"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-label.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof Label> = $props();
+</script>
+
+<Label
+	bind:ref
+	data-slot="field-label"
+	class={cn(
+		"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+		"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Label>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-legend.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "legend",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
+		variant?: "legend" | "label";
+	} = $props();
+</script>
+
+<legend
+	bind:this={ref}
+	data-slot="field-legend"
+	data-variant={variant}
+	class={cn(
+		"mb-3 font-medium",
+		"data-[variant=legend]:text-base",
+		"data-[variant=label]:text-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</legend>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-separator.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+	} = $props();
+
+	const hasContent = $derived(!!children);
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-separator"
+	data-content={hasContent}
+	class={cn(
+		"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+		className
+	)}
+	{...restProps}
+>
+	<Separator class="absolute inset-0 top-1/2" />
+	{#if children}
+		<span
+			class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+			data-slot="field-separator-content"
+		>
+			{@render children()}
+		</span>
+	{/if}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-set.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLFieldsetAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLFieldsetAttributes> = $props();
+</script>
+
+<fieldset
+	bind:this={ref}
+	data-slot="field-set"
+	class={cn(
+		"flex flex-col gap-6",
+		"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</fieldset>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field-title.svelte

@@ -0,0 +1,23 @@
+<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="field-title"
+	class={cn(
+		"flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/field.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const fieldVariants = tv({
+		base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+		variants: {
+			orientation: {
+				vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+				horizontal: [
+					"flex-row items-center",
+					"[&>[data-slot=field-label]]:flex-auto",
+					"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
+				],
+				responsive: [
+					"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+					"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	});
+
+	export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: FieldOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="field"
+	data-orientation={orientation}
+	class={cn(fieldVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

dr_widget/widgets/config_file_manager/src/lib/components/ui/field/index.ts

@@ -0,0 +1,33 @@
+import Field from "./field.svelte";
+import Set from "./field-set.svelte";
+import Legend from "./field-legend.svelte";
+import Group from "./field-group.svelte";
+import Content from "./field-content.svelte";
+import Label from "./field-label.svelte";
+import Title from "./field-title.svelte";
+import Description from "./field-description.svelte";
+import Separator from "./field-separator.svelte";
+import Error from "./field-error.svelte";
+
+export {
+  Field,
+  Set,
+  Legend,
+  Group,
+  Content,
+  Label,
+  Title,
+  Description,
+  Separator,
+  Error,
+  //
+  Set as FieldSet,
+  Legend as FieldLegend,
+  Group as FieldGroup,
+  Content as FieldContent,
+  Label as FieldLabel,
+  Title as FieldTitle,
+  Description as FieldDescription,
+  Separator as FieldSeparator,
+  Error as FieldError,
+};

dr_widget/widgets/config_file_manager/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte

@@ -0,0 +1,178 @@
+<!--
+	Installed from @ieedan/shadcn-svelte-extras
+-->
+
+<script lang="ts">
+	import { cn } from '../../../utils/utils';
+	import UploadIcon from '@lucide/svelte/icons/upload';
+	import { displaySize } from '.';
+	import { useId } from 'bits-ui';
+	import type { FileDropZoneProps, FileRejectedReason } from './types';
+
+	let {
+		id = useId(),
+		children,
+		maxFiles,
+		maxFileSize,
+		fileCount,
+		disabled = false,
+		onUpload,
+		onFileRejected,
+		accept,
+		class: className,
+		...rest
+	}: FileDropZoneProps = $props();
+
+	if (maxFiles !== undefined && fileCount === undefined) {
+		console.warn(
+			'Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt'
+		);
+	}
+
+	let uploading = $state(false);
+
+	const drop = async (
+		e: DragEvent & {
+			currentTarget: EventTarget & HTMLLabelElement;
+		}
+	) => {
+		if (disabled || !canUploadFiles) return;
+
+		e.preventDefault();
+
+		const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+
+		await upload(droppedFiles);
+	};
+
+	const change = async (
+		e: Event & {
+			currentTarget: EventTarget & HTMLInputElement;
+		}
+	) => {
+		if (disabled) return;
+
+		const selectedFiles = e.currentTarget.files;
+
+		if (!selectedFiles) return;
+
+		await upload(Array.from(selectedFiles));
+
+		// this if a file fails and we upload the same file again we still get feedback
+		if (e.target as HTMLInputElement) {
+      		(e.target as HTMLInputElement).value = '';
+		}
+	};
+
+	const shouldAcceptFile = (file: File, fileNumber: number): FileRejectedReason | undefined => {
+		if (maxFileSize !== undefined && file.size > maxFileSize) return 'Maximum file size exceeded';
+
+		if (maxFiles !== undefined && fileNumber > maxFiles) return 'Maximum files uploaded';
+
+		if (!accept) return undefined;
+
+		const acceptedTypes = accept.split(',').map((a) => a.trim().toLowerCase());
+		const fileType = file.type.toLowerCase();
+		const fileName = file.name.toLowerCase();
+
+		const isAcceptable = acceptedTypes.some((pattern) => {
+			// check extension like .mp4
+			if (fileType.startsWith('.')) {
+				return fileName.endsWith(pattern);
+			}
+
+			// if pattern has wild card like video/*
+			if (pattern.endsWith('/*')) {
+				const baseType = pattern.slice(0, pattern.indexOf('/*'));
+				return fileType.startsWith(baseType + '/');
+			}
+
+			// otherwise it must be a specific type like video/mp4
+			return fileType === pattern;
+		});
+
+		if (!isAcceptable) return 'File type not allowed';
+
+		return undefined;
+	};
+
+	const upload = async (uploadFiles: File[]) => {
+		uploading = true;
+
+		const validFiles: File[] = [];
+
+		for (let i = 0; i < uploadFiles.length; i++) {
+			const file = uploadFiles[i];
+
+			const rejectedReason = shouldAcceptFile(file, (fileCount ?? 0) + i + 1);
+
+			if (rejectedReason) {
+				onFileRejected?.({ file, reason: rejectedReason });
+				continue;
+			}
+
+			validFiles.push(file);
+		}
+
+		await onUpload(validFiles);
+
+		uploading = false;
+	};
+
+	const canUploadFiles = $derived(
+		!disabled &&
+			!uploading &&
+			!(maxFiles !== undefined && fileCount !== undefined && fileCount >= maxFiles)
+	);
+</script>
+
+<label
+	ondragover={(e) => e.preventDefault()}
+	ondrop={drop}
+	for={id}
+	aria-disabled={!canUploadFiles}
+	class={cn(
+		'border-border hover:bg-accent/25 flex h-48 w-full place-items-center justify-center rounded-lg border-2 border-dashed p-6 transition-all hover:cursor-pointer aria-disabled:opacity-50 aria-disabled:hover:cursor-not-allowed',
+		className
+	)}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<div class="flex flex-col place-items-center justify-center gap-2">
+			<div
+				class="border-border text-muted-foreground flex size-14 place-items-center justify-center rounded-full border border-dashed"
+			>
+				<UploadIcon class="size-7" />
+			</div>
+			<div class="flex flex-col gap-0.5 text-center">
+				<span class="text-muted-foreground font-medium">
+					Drag 'n' drop files here, or click to select files
+				</span>
+				{#if maxFiles || maxFileSize}
+					<span class="text-muted-foreground/75 text-sm">
+						{#if maxFiles}
+							<span>You can upload {maxFiles} files</span>
+						{/if}
+						{#if maxFiles && maxFileSize}
+							<span>(up to {displaySize(maxFileSize)} each)</span>
+						{/if}
+						{#if maxFileSize && !maxFiles}
+							<span>Maximum size {displaySize(maxFileSize)}</span>
+						{/if}
+					</span>
+				{/if}
+			</div>
+		</div>
+	{/if}
+	<input
+		{...rest}
+		disabled={!canUploadFiles}
+		{id}
+		{accept}
+		multiple={maxFiles === undefined || maxFiles - (fileCount ?? 0) > 1}
+		type="file"
+		onchange={change}
+		class="hidden"
+	/>
+</label>

dr_widget/widgets/config_file_manager/src/lib/components/ui/file-drop-zone/index.ts

@@ -0,0 +1,29 @@
+/*
+	Installed from @ieedan/shadcn-svelte-extras
+*/
+
+import FileDropZone from "./file-drop-zone.svelte";
+import { type FileRejectedReason, type FileDropZoneProps } from "./types";
+
+export const displaySize = (bytes: number): string => {
+  if (bytes < KILOBYTE) return `${bytes.toFixed(0)} B`;
+
+  if (bytes < MEGABYTE) return `${(bytes / KILOBYTE).toFixed(0)} KB`;
+
+  if (bytes < GIGABYTE) return `${(bytes / MEGABYTE).toFixed(0)} MB`;
+
+  return `${(bytes / GIGABYTE).toFixed(0)} GB`;
+};
+
+// Utilities for working with file sizes
+export const BYTE = 1;
+export const KILOBYTE = 1024;
+export const MEGABYTE = 1024 * KILOBYTE;
+export const GIGABYTE = 1024 * MEGABYTE;
+
+// utilities for limiting accepted files
+export const ACCEPT_IMAGE = "image/*";
+export const ACCEPT_VIDEO = "video/*";
+export const ACCEPT_AUDIO = "audio/*";
+
+export { FileDropZone, type FileRejectedReason, type FileDropZoneProps };