@riducms/admin 0.1.0

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

@@ -0,0 +1,77 @@
+<script lang="ts" module>
+	export type Side = "top" | "right" | "bottom" | "left";
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import XIcon from "~icons/lucide/x";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { buttonVariants } from "@admin/components/ui/button/index.js";
+	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+	import SheetOverlay from "@admin/components/ui/sheet/sheet-overlay.svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		showCloseButton = true,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<SheetPrimitive.PortalProps>;
+		side?: Side;
+		showCloseButton?: boolean;
+		children: Snippet;
+	} = $props();
+	const i18n = getAdminI18n();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		data-side={side}
+		class={cn(
+			"fixed z-50 flex flex-col bg-popover bg-clip-padding text-sm text-popover-foreground shadow-xl data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[side=bottom]:data-[state=open]:slide-in-from-bottom data-[side=left]:data-[state=open]:slide-in-from-left data-[side=right]:data-[state=open]:slide-in-from-right data-[side=top]:data-[state=open]:slide-in-from-top data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[side=bottom]:data-[state=closed]:slide-out-to-bottom data-[side=left]:data-[state=closed]:slide-out-to-left data-[side=right]:data-[state=closed]:slide-out-to-right data-[side=top]:data-[state=closed]:slide-out-to-top",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<SheetPrimitive.Close
+				type="button"
+				data-slot="sheet-close"
+				class={buttonVariants({
+					variant: "ghost",
+					size: "icon-sm",
+					class: "absolute top-4 end-4 bg-secondary",
+				})}
+			>
+				<XIcon />
+				<span class="sr-only">{i18n.t("general:close")}</span>
+			</SheetPrimitive.Close>
+		{/if}
+	</SheetPrimitive.Content>
+</SheetPrimitive.Portal>
+
+<style>
+	:global([data-slot="sheet-content"][data-state="open"]) {
+		animation-duration: 300ms;
+		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+	}
+
+	:global([data-slot="sheet-content"][data-state="closed"]) {
+		animation-duration: 220ms;
+		animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global([data-slot="sheet-content"]) {
+			animation-duration: 1ms;
+		}
+	}
+</style>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn("text-sm text-muted-foreground", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		"fixed inset-0 z-50 bg-backdrop supports-backdrop-filter:backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+		className
+	)}
+	{...restProps}
+/>
+
+<style>
+	:global([data-slot="sheet-overlay"][data-state="open"]) {
+		animation-duration: 240ms;
+	}
+
+	:global([data-slot="sheet-overlay"][data-state="closed"]) {
+		animation-duration: 180ms;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global([data-slot="sheet-overlay"]) {
+			animation-duration: 1ms;
+		}
+	}
+</style>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn("text-base font-medium text-foreground", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />

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

@@ -0,0 +1 @@
+export { default as Skeleton } from "@admin/components/ui/skeleton/skeleton.svelte";

package/src/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "@riducms/ui";
+	import { onMount } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	const revealDelayMilliseconds = 180;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+	let revealed = $state(false);
+
+	onMount(() => {
+		const timer = window.setTimeout(() => (revealed = true), revealDelayMilliseconds);
+		return () => window.clearTimeout(timer);
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn(
+		"rounded bg-muted transition-opacity duration-150 ease-out motion-reduce:transition-none",
+		revealed ? "opacity-100" : "opacity-0",
+		className
+	)}
+	{...restProps}
+	aria-hidden={!revealed}
+></div>

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

@@ -0,0 +1,3 @@
+import Slider from "@admin/components/ui/slider/slider.svelte";
+
+export { Slider };

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive } from "bits-ui";
+
+	import { cn } from "@riducms/ui";
+
+	let {
+		id,
+		value,
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled = false,
+		label,
+		describedBy,
+		class: className,
+		onValueChange,
+	}: {
+		id?: string;
+		value: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		label: string;
+		describedBy?: string;
+		class?: string;
+		onValueChange: (value: number) => void;
+	} = $props();
+</script>
+
+<SliderPrimitive.Root
+	{id}
+	type="single"
+	{value}
+	{min}
+	{max}
+	{step}
+	{disabled}
+	{onValueChange}
+	data-slot="slider"
+	class={cn(
+		"relative flex h-5 w-full touch-none items-center select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
+		className
+	)}
+>
+	{#snippet children({ thumbItems })}
+		<span class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-control-disabled">
+			<SliderPrimitive.Range class="absolute h-full rounded-full bg-primary" />
+		</span>
+		{#each thumbItems as thumb (thumb.index)}
+			<SliderPrimitive.Thumb
+				index={thumb.index}
+				aria-label={label}
+				aria-describedby={describedBy}
+				class="block size-4 rounded-full border-2 border-primary-foreground bg-primary shadow-sm outline-none transition-[box-shadow,transform] hover:scale-110 focus-visible:scale-110 focus-visible:ring-2 focus-visible:ring-primary/45 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none"
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>

package/src/components/ui/slider/slider.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+
+	type SliderProps = {
+		id?: string;
+		value: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		label: string;
+		describedBy?: string;
+		class?: string;
+		onValueChange: (value: number) => void;
+	};
+
+	let props: SliderProps = $props();
+	let Control = $state<Component<SliderProps> | undefined>(undefined);
+
+	void import("@admin/components/ui/slider/slider-content.svelte").then(
+		({ default: component }) => (Control = component)
+	);
+</script>
+
+{#if Control !== undefined}
+	<Control {...props} />
+{:else}
+	<div
+		class={props.class ??
+			"relative flex h-5 w-full animate-pulse items-center rounded-full bg-control-disabled"}
+		role="status"
+		aria-label={props.label}
+		aria-busy="true"
+	></div>
+{/if}

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

@@ -0,0 +1 @@
+export { default as Toaster } from "@admin/components/ui/sonner/sonner.svelte";

package/src/components/ui/sonner/sonner.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import LoaderCircleIcon from "~icons/lucide/loader-circle";
+	import { Toaster as Sonner, type ToasterProps } from "svelte-sonner";
+	import { getAdminI18n } from "@riducms/plugin";
+
+	const i18n = getAdminI18n();
+
+	let {
+		theme = "dark",
+		position,
+		closeButton = true,
+		pauseWhenPageIsHidden = true,
+		visibleToasts = 4,
+		offset = 16,
+		mobileOffset = 12,
+		toastOptions,
+		...restProps
+	}: ToasterProps = $props();
+	const resolvedPosition = $derived(
+		position ?? (i18n.direction === "rtl" ? "bottom-left" : "bottom-right")
+	);
+
+	const options = $derived({
+		unstyled: true,
+		...toastOptions,
+		classes: {
+			toast:
+				"ridu-toast flex w-[min(calc(100vw-2rem),390px)] items-start gap-2.5 rounded-[10px] py-3 pe-3.5 ps-5 shadow-[var(--shadow-popover)]",
+			content: "min-w-0 flex-1",
+			title: "text-[13.5px] leading-5 font-semibold",
+			description: "mt-0.5 text-[12.5px] leading-5",
+			icon: "mt-0.75 shrink-0",
+			closeButton: "outline-none focus-visible:outline-2 focus-visible:outline-primary/60",
+			...toastOptions?.classes,
+		},
+	});
+</script>
+
+<Sonner
+	{theme}
+	position={resolvedPosition}
+	{closeButton}
+	{pauseWhenPageIsHidden}
+	{visibleToasts}
+	{offset}
+	{mobileOffset}
+	toastOptions={options}
+	containerAriaLabel={i18n.t("general:notifications")}
+	closeButtonAriaLabel={i18n.t("general:dismissNotification")}
+	{...restProps}
+>
+	{#snippet loadingIcon()}
+		<LoaderCircleIcon class="size-3.5 animate-spin" aria-hidden="true" />
+	{/snippet}
+</Sonner>

package/src/components/ui/status-indicator/index.ts

@@ -0,0 +1,5 @@
+export {
+	default as StatusIndicator,
+	statusIndicatorVariants,
+	type StatusTone,
+} from "@admin/components/ui/status-indicator/status-indicator.svelte";

package/src/components/ui/status-indicator/status-indicator.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "@riducms/ui";
+
+	export const statusIndicatorVariants = tv({
+		base: "inline-flex items-center gap-1.75 text-[12.5px] text-foreground-muted",
+		variants: {
+			tone: {
+				live: "text-primary",
+				warning: "text-warning",
+				muted: "text-foreground-muted",
+				destructive: "text-destructive",
+				success: "text-success",
+			},
+		},
+		defaultVariants: { tone: "muted" },
+	});
+
+	export type StatusTone = VariantProps<typeof statusIndicatorVariants>["tone"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		tone = "muted",
+		pulse = false,
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+		tone?: StatusTone;
+		pulse?: boolean;
+	} = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="status-indicator"
+	class={cn(statusIndicatorVariants({ tone }), className)}
+	{...restProps}
+>
+	<span
+		class={[
+			"size-1.75 shrink-0 rounded-full",
+			tone === "muted" ? "border border-current bg-transparent" : "bg-current",
+			pulse && "shadow-[0_0_9px_currentColor]",
+		]}
+		aria-hidden="true"
+	></span>
+	{@render children?.()}
+</span>

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

@@ -0,0 +1,6 @@
+export { default as Table } from "@admin/components/ui/table/table.svelte";
+export { default as TableBody } from "@admin/components/ui/table/table-body.svelte";
+export { default as TableCell } from "@admin/components/ui/table/table-cell.svelte";
+export { default as TableHead } from "@admin/components/ui/table/table-head.svelte";
+export { default as TableHeader } from "@admin/components/ui/table/table-header.svelte";
+export { default as TableRow } from "@admin/components/ui/table/table-row.svelte";

package/src/components/ui/table/table-body.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@riducms/ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn("[&_tr:last-child]:border-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>

package/src/components/ui/table/table-cell.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@riducms/ui";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn(
+		"px-2.5 py-2.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>

package/src/components/ui/table/table-head.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@riducms/ui";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={cn(
+		"h-[31px] px-2.5 text-start align-middle text-[11.5px] font-medium whitespace-nowrap text-foreground-muted [&:has([role=checkbox])]:pe-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@riducms/ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b [&_tr]:border-control-border", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>

package/src/components/ui/table/table-row.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@riducms/ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn(
+		"border-b border-control-border transition-colors hover:bg-control data-[state=selected]:bg-primary/5",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>

package/src/components/ui/table/table.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@riducms/ui";
+	import type { HTMLTableAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table
+		bind:this={ref}
+		data-slot="table"
+		class={cn("w-full caption-bottom text-sm", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</table>
+</div>

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

@@ -0,0 +1,8 @@
+export {
+	default as TabsList,
+	tabsListVariants,
+	type TabsListVariant,
+} from "@admin/components/ui/tabs/tabs-list.svelte";
+export { default as Tabs } from "@admin/components/ui/tabs/tabs.svelte";
+export { default as TabsContent } from "@admin/components/ui/tabs/tabs-content.svelte";
+export { default as TabsTrigger } from "@admin/components/ui/tabs/tabs-trigger.svelte";

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn("text-sm flex-1 outline-none", className)}
+	{...restProps}
+/>

package/src/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "@riducms/ui";
+
+	export const tabsListVariants = tv({
+		base: "rounded-lg p-0.5 group-data-horizontal/tabs:h-8 group-data-vertical/tabs:p-1 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+		variants: {
+			variant: {
+				default: "cn-tabs-list-variant-default border border-control-border bg-tabs-surface",
+				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
+	{...restProps}
+/>

package/src/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"gap-1.5 rounded-md border border-transparent! px-3.5 py-1 text-[13px] font-medium group-data-vertical/tabs:px-3 group-data-vertical/tabs:py-1 [&_svg:not([class*='size-'])]:size-3.5 relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground-sub transition-[background-color,color] duration-150 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start data-[state=inactive]:hover:text-foreground-muted focus-visible:outline-2 focus-visible:outline-primary/60 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+		"data-[state=active]:bg-tabs-active data-[state=active]:text-tabs-text-active",
+		"after:absolute after:bg-foreground-strong after:opacity-0 after:transition-opacity data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-0 data-[orientation=horizontal]:after:h-0.5 data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:-end-1 data-[orientation=vertical]:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+		className
+	)}
+	{...restProps}
+/>