sheer-ui 0.0.0

package/src/lib/components/empty/variants.ts

@@ -0,0 +1,16 @@
+import { declareVariants, type VariantProps } from 'overrule';
+
+export const emptyMediaVariants = declareVariants({
+	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'];

package/src/lib/components/field/field-content.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('gap-1 group/field-content flex flex-1 flex-col leading-snug', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/field/field-description.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join(
+		'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance',
+		'last:mt-0 nth-last-2:-mt-1',
+		'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</p>

package/src/lib/components/field/field-error.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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 || errors.length === 0) 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={join('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}

package/src/lib/components/field/field-group.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join(
+		'gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/field/field-label.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { Label } from '../label';
+	import type { ComponentProps } from 'svelte';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: ComponentProps<typeof Label.Root> = $props();
+</script>
+
+<Label.Root
+	bind:ref
+	data-slot="field-label"
+	class={join(
+		'items-center select-none group-data-disabled/field:pointer-events-none peer-disabled:cursor-not-allowed np-field-label group/field-label peer/field-label flex w-fit leading-snug has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</Label.Root>

package/src/lib/components/field/field-legend.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className)}
+	{...restProps}>
+	{@render children?.()}
+</legend>

package/src/lib/components/field/field-separator.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { Separator } from '../separator';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	let {
+		ref = $bindable(null),
+		class: className,
+		childBackground = 'bg-background',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+		childBackground?: string;
+	} = $props();
+	const hasContent = $derived(!!children);
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-separator"
+	data-content={hasContent}
+	class={join('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={join('relative mx-auto block w-fit px-2', childBackground)} data-slot="field-separator-content">
+			{@render children()}
+		</span>
+	{/if}
+</div>

package/src/lib/components/field/field-set.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)}
+	{...restProps}>
+	{@render children?.()}
+</fieldset>

package/src/lib/components/field/field-title.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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-label"
+	class={join('gap-2 text-sm font-medium group-data-disabled/field:opacity-50 flex w-fit items-center leading-5', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/field/field.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import { fieldVariants, type FieldOrientation } from './variants';
+	export { fieldVariants, type FieldOrientation };
+
+	/** Anything that reports validation issues — deliberately structural so ui never depends on a binding API. */
+	export type IssueSource = { issues: () => { message?: string }[] | undefined };
+</script>
+
+<script lang="ts">
+	import FieldError from './field-error.svelte';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		children,
+		field,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: FieldOrientation;
+		field?: IssueSource;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="field"
+	data-orientation={orientation}
+	class={fieldVariants({ orientation, class: className })}
+	data-invalid={field ? !!field.issues() : undefined}
+	{...restProps}>
+	{@render children?.()}
+	{#if field}<FieldError errors={field.issues()} />{/if}
+</div>

package/src/lib/components/field/index.ts

@@ -0,0 +1,32 @@
+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,
+};

package/src/lib/components/field/variants.ts

@@ -0,0 +1,19 @@
+import { declareVariants, type VariantProps } from 'overrule';
+
+export const fieldVariants = declareVariants({
+	base: 'data-[invalid=true]:text-destructive gap-3 group/field flex w-full',
+	variants: {
+		orientation: {
+			vertical: 'np-field-orientation-vertical flex-col *:w-full [&>.sr-only]:w-auto',
+			horizontal:
+				'np-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			responsive:
+				'np-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start *:w-full @md/field-group:*:w-auto [&>.sr-only]:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+		},
+	},
+	defaultVariants: {
+		orientation: 'vertical',
+	},
+});
+
+export type FieldOrientation = VariantProps<typeof fieldVariants>['orientation'];

package/src/lib/components/input/file-input.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import { inputVariants, inputVariantSlots, type InputVariant } from './variants';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		files = $bindable(),
+		variant = 'default',
+		class: className,
+		...restProps
+	}: WithElementRef<Omit<HTMLInputAttributes, 'type'> & { files?: FileList; variant?: InputVariant }> = $props();
+</script>
+
+<input
+	bind:this={ref}
+	data-slot={inputVariantSlots[variant!]}
+	class={inputVariants({
+		variant,
+		class: ['file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground', className],
+	})}
+	type="file"
+	bind:files
+	bind:value
+	{...restProps} />

package/src/lib/components/input/index.ts

@@ -0,0 +1,12 @@
+import { inputVariants, type InputVariant } from './variants';
+import FileInput from './file-input.svelte';
+import Root from './input.svelte';
+
+export {
+	Root,
+	FileInput,
+	inputVariants,
+	type InputVariant,
+	//
+	Root as Input,
+};

package/src/lib/components/input/input.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { inputVariants, inputVariantSlots, type InputVariant } from './variants';
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		variant = 'default',
+		class: className,
+		...restProps
+	}: WithElementRef<Omit<HTMLInputAttributes, 'type'> & { type?: InputType; variant?: InputVariant }> = $props();
+</script>
+
+<input
+	bind:this={ref}
+	data-slot={inputVariantSlots[variant!]}
+	class={inputVariants({ variant, class: className })}
+	{type}
+	bind:value
+	{...restProps} />

package/src/lib/components/input/variants.ts

@@ -0,0 +1,28 @@
+import { declareVariants, type VariantProps } from 'overrule';
+
+export const inputVariants = declareVariants({
+	base: 'placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 h-9 px-2.5 py-1 ',
+	variants: {
+		variant: {
+			default:
+				'rounded-md border border-input bg-transparent text-base shadow-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+			invisible:
+				'rounded-none border-0 bg-transparent text-sm shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+	},
+});
+
+export type InputVariant = VariantProps<typeof inputVariants>['variant'];
+
+/**
+ * Per-variant `data-slot`. An invisible input is an input-group control, which the
+ * `.wrap-input-identity` wrapper targets via `has-[[data-slot=input-group-control]...]`.
+ * A caller can still pass an explicit `data-slot` to override this.
+ */
+export const inputVariantSlots = {
+	default: 'input',
+	invisible: 'input-group-control',
+} as const satisfies Record<NonNullable<InputVariant>, string>;

package/src/lib/components/item/index.ts

@@ -0,0 +1,34 @@
+import Root from './item.svelte';
+import Group from './item-group.svelte';
+import Separator from './item-separator.svelte';
+import Header from './item-header.svelte';
+import Footer from './item-footer.svelte';
+import Content from './item-content.svelte';
+import Title from './item-title.svelte';
+import Description from './item-description.svelte';
+import Actions from './item-actions.svelte';
+import Media from './item-media.svelte';
+
+export {
+	Root,
+	Group,
+	Separator,
+	Header,
+	Footer,
+	Content,
+	Title,
+	Description,
+	Actions,
+	Media,
+	//
+	Root as Item,
+	Group as ItemGroup,
+	Separator as ItemSeparator,
+	Header as ItemHeader,
+	Footer as ItemFooter,
+	Content as ItemContent,
+	Title as ItemTitle,
+	Description as ItemDescription,
+	Actions as ItemActions,
+	Media as ItemMedia,
+};

package/src/lib/components/item/item-actions.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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-actions" class={join('gap-2 flex items-center', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/item/item-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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-content"
+	class={join('gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/item/item-description.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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="item-description"
+	class={join(
+		'text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</p>

package/src/lib/components/item/item-footer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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-footer" class={join('gap-2 flex basis-full items-center justify-between', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/item/item-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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}
+	role="list"
+	data-slot="item-group"
+	class={join('gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/item/item-header.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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-header" class={join('gap-2 flex basis-full items-center justify-between', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/item/item-media.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+	import { declareVariants, type VariantProps } from 'overrule';
+
+	export const itemMediaVariants = declareVariants({
+		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 type { WithElementRef } from '../../internal/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={itemMediaVariants({ variant, class: className })} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/item/item-separator.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { Separator } from '../separator/index.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={join('my-2', className)} {...restProps} />

package/src/lib/components/item/item-title.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/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={join('gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>