@heyramzi/ui 0.0.0-stage → 1.53.1

package/src/shadcn/kbd/index.ts

@@ -0,0 +1,10 @@
+import Root from "./kbd.svelte";
+import Group from "./kbd-group.svelte";
+
+export {
+  Root,
+  Group,
+  //
+  Root as Kbd,
+  Group as KbdGroup,
+};

package/src/shadcn/kbd/kbd-group.svelte

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

package/src/shadcn/kbd/kbd.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd"
+	class={cn(
+		"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium tabular-nums select-none [&_svg:not([class*='size-'])]:size-3",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/src/shadcn/label/index.ts

@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+  Root,
+  //
+  Root as Label,
+};

package/src/shadcn/label/label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+		className,
+	)}
+	{...restProps}
+/>

package/src/shadcn/marker/index.ts

@@ -0,0 +1,15 @@
+import Content from "./marker-content.svelte";
+import Icon from "./marker-icon.svelte";
+import Root, { markerVariants, type MarkerVariant } from "./marker.svelte";
+
+export {
+  Root,
+  Icon,
+  Content,
+  markerVariants,
+  type MarkerVariant,
+  //
+  Root as Marker,
+  Icon as MarkerIcon,
+  Content as MarkerContent,
+};

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="marker-content"
+	class={cn(
+		"cn-marker-content min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:hover:text-foreground *:[a]:underline *:[a]:underline-offset-3",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/marker/marker-icon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="marker-icon"
+	aria-hidden="true"
+	class={cn("cn-marker-icon shrink-0 size-4 [&_svg:not([class*='size-'])]:size-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/marker/marker.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const markerVariants = tv({
+		base: "cn-marker group/marker relative flex w-full items-center gap-2 text-sm text-muted-foreground [a]:hover:text-foreground [a]:underline-offset-3 [a]:underline [&_svg:not([class*='size-'])]:size-4 min-h-4 text-left",
+		variants: {
+			variant: {
+				default: "cn-marker-variant-default",
+				separator:
+					"cn-marker-variant-separator before:h-px before:min-w-0 before:flex-1 before:bg-border after:h-px after:min-w-0 after:flex-1 after:bg-border before:mr-1 after:ml-1",
+				border: "cn-marker-variant-border border-b border-border pb-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type MarkerVariant = VariantProps<typeof markerVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: MarkerVariant;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(markerVariants({ variant }), className),
+		"data-slot": "marker",
+		"data-variant": variant,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/src/shadcn/message/index.ts

@@ -0,0 +1,22 @@
+import Avatar from "./message-avatar.svelte";
+import Content from "./message-content.svelte";
+import Footer from "./message-footer.svelte";
+import Group from "./message-group.svelte";
+import Header from "./message-header.svelte";
+import Root from "./message.svelte";
+
+export {
+  Root,
+  Group,
+  Avatar,
+  Content,
+  Header,
+  Footer,
+  //
+  Root as Message,
+  Group as MessageGroup,
+  Avatar as MessageAvatar,
+  Content as MessageContent,
+  Header as MessageHeader,
+  Footer as MessageFooter,
+};

package/src/shadcn/message/message-avatar.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	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="message-avatar"
+	class={cn(
+		"cn-message-avatar flex w-fit shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted min-w-8 group-has-data-[slot=message-footer]/message:-translate-y-8",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	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="message-content"
+	class={cn(
+		"cn-message-content flex w-full min-w-0 flex-col wrap-break-word gap-2.5 group-data-[align=end]/message:*:data-slot:self-end",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/message/message-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	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="message-footer"
+	class={cn(
+		"cn-message-footer flex max-w-full min-w-0 items-center group-data-[align=end]/message:justify-end text-xs font-medium text-muted-foreground px-3 group-has-data-[variant=ghost]/message:px-0",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/message/message-group.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	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="message-group"
+	class={cn("cn-message-group flex min-w-0 flex-col gap-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/message/message-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	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="message-header"
+	class={cn(
+		"cn-message-header flex max-w-full min-w-0 items-center text-xs font-medium text-muted-foreground px-3 group-has-data-[variant=ghost]/message:px-0",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/message/message.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "start",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: "start" | "end";
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="message"
+	data-align={align}
+	class={cn(
+		"cn-message group/message relative flex w-full min-w-0 text-sm gap-2 data-[align=end]:flex-row-reverse",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/message-scroller/index.ts

@@ -0,0 +1,28 @@
+import Button from "./message-scroller-button.svelte";
+import Content from "./message-scroller-content.svelte";
+import Item from "./message-scroller-item.svelte";
+import Provider from "./message-scroller-provider.svelte";
+import Viewport from "./message-scroller-viewport.svelte";
+import Root from "./message-scroller.svelte";
+
+export {
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+} from "@shadcn-svelte/primitives/message-scroller";
+
+export {
+  Provider,
+  Root,
+  Viewport,
+  Content,
+  Item,
+  Button,
+  //
+  Provider as MessageScrollerProvider,
+  Root as MessageScroller,
+  Viewport as MessageScrollerViewport,
+  Content as MessageScrollerContent,
+  Item as MessageScrollerItem,
+  Button as MessageScrollerButton,
+};

package/src/shadcn/message-scroller/message-scroller-button.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { ArrowDown } from "phosphor-svelte";
+	import { Button } from "../button/index.js";
+	import type { ButtonSize, ButtonVariant } from "../button/index.js";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		direction = "end",
+		class: className,
+		children,
+		child: childProp,
+		variant = "outline",
+		size = "sm",
+		...restProps
+	}: MessageScrollerPrimitive.ButtonProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<MessageScrollerPrimitive.Button
+	bind:ref
+	data-slot="message-scroller-button"
+	data-direction={direction}
+	data-variant={variant}
+	data-size={size}
+	{direction}
+	class={cn(
+		"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet child(state)}
+		{#if childProp}
+			{@render childProp(state)}
+		{:else}
+			<Button {variant} {size} icon={!children} {...state.props}>
+				{#if children}
+					{@render children()}
+				{:else}
+					<ArrowDown />
+					<span class="sr-only">
+						{direction === "end" ? "Scroll to end" : "Scroll to start"}
+					</span>
+				{/if}
+			</Button>
+		{/if}
+	{/snippet}
+</MessageScrollerPrimitive.Button>

package/src/shadcn/message-scroller/message-scroller-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MessageScrollerPrimitive.ContentProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Content
+	bind:ref
+	data-slot="message-scroller-content"
+	class={cn("gap-8 flex h-max min-h-full flex-col", className)}
+	{...restProps}
+/>

package/src/shadcn/message-scroller/message-scroller-item.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		scrollAnchor = false,
+		...restProps
+	}: MessageScrollerPrimitive.ItemProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Item
+	bind:ref
+	data-slot="message-scroller-item"
+	{scrollAnchor}
+	class={cn(
+		"min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/message-scroller/message-scroller-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+
+	let { ...restProps }: MessageScrollerPrimitive.ProviderProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Provider {...restProps} />

package/src/shadcn/message-scroller/message-scroller-viewport.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: MessageScrollerPrimitive.ViewportProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Viewport
+	bind:ref
+	data-slot="message-scroller-viewport"
+	class={cn(
+		"size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/message-scroller/message-scroller.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: MessageScrollerPrimitive.RootProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Root
+	bind:ref
+	data-slot="message-scroller"
+	class={cn(
+		"group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/popover/index.ts

@@ -0,0 +1,28 @@
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
+import Content from "./popover-content.svelte";
+import Description from "./popover-description.svelte";
+import Header from "./popover-header.svelte";
+import Title from "./popover-title.svelte";
+import Trigger from "./popover-trigger.svelte";
+import Portal from "./popover-portal.svelte";
+
+export {
+  Root,
+  Content,
+  Description,
+  Header,
+  Title,
+  Trigger,
+  Close,
+  Portal,
+  //
+  Root as Popover,
+  Content as PopoverContent,
+  Description as PopoverDescription,
+  Header as PopoverHeader,
+  Title as PopoverTitle,
+  Trigger as PopoverTrigger,
+  Close as PopoverClose,
+  Portal as PopoverPortal,
+};

package/src/shadcn/popover/popover-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import PopoverPortal from "./popover-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = "center",
+		// A surface never sits flush against the viewport edge. floating-ui shifts a popover back into view with no gutter of its own,
+
+		// so a picker in a right-hand property column came to rest with its border ON the edge and read as clipped.
+
+		// Eight pixels is the smallest gap that reads as a gap.
+		collisionPadding = 8,
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		{collisionPadding}
+		class={cn(
+			"t-dropdown bg-popover text-popover-foreground ring-foreground/10 rounded-xl p-4 text-sm shadow-raised ring-1 z-50 w-72 max-h-[var(--bits-floating-available-height,100svh)] max-w-[calc(100vw-1rem)] overflow-y-auto overscroll-contain outline-hidden",
+			className,
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>

package/src/shadcn/popover/popover-description.svelte

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

package/src/shadcn/popover/popover-header.svelte

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