@riducms/admin 0.2.2 → 0.3.0

package/src/components/ui/select/select-scroll-down-button.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
 	import ChevronDownIcon from "~icons/lucide/chevron-down";
-	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+	import { type WithoutChildrenOrChild } from "@riducms/ui";
+	import "@admin/components/ui/select/select.scss";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +14,7 @@
 <SelectPrimitive.ScrollDownButton
 	bind:ref
 	data-slot="select-scroll-down-button"
-	class={cn(
-		"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
-		className
-	)}
+	class={["ridu-select__scroll", className]}
 	{...restProps}
 >
 	<ChevronDownIcon />

package/src/components/ui/select/select-scroll-up-button.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
 	import ChevronUpIcon from "~icons/lucide/chevron-up";
-	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+	import { type WithoutChildrenOrChild } from "@riducms/ui";
+	import "@admin/components/ui/select/select.scss";
 
 	let {
 		ref = $bindable(null),
@@ -13,10 +14,7 @@
 <SelectPrimitive.ScrollUpButton
 	bind:ref
 	data-slot="select-scroll-up-button"
-	class={cn(
-		"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
-		className
-	)}
+	class={["ridu-select__scroll", className]}
 	{...restProps}
 >
 	<ChevronUpIcon />

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

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
-	import ChevronDownIcon from "~icons/lucide/chevron-down";
-	import { cn, type WithoutChild } from "@riducms/ui";
+	import ChevronDownIcon from "@admin/components/icons/chevron.svelte";
+	import { type WithoutChild } from "@riducms/ui";
+
+	import "@admin/components/ui/select/select.scss";
 
 	let {
 		ref = $bindable(null),
@@ -18,12 +20,9 @@
 	bind:ref
 	data-slot="select-trigger"
 	data-size={size}
-	class={cn(
-		"gap-2 rounded-[3px] border border-control-border bg-control px-3 text-[13.5px] text-foreground-strong transition-[background-color,border-color,color] duration-150 hover:border-control-border-hover focus-visible:border-primary/65 aria-invalid:!border-destructive/65 data-[placeholder]:text-foreground-placeholder data-[size=field]:h-10 data-[size=compact]:h-9 data-[size=toolbar]:h-[34px] data-[size=toolbar]:px-2.5 data-[size=toolbar]:text-[12.5px] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:border-control-border-disabled disabled:bg-control-disabled disabled:opacity-45 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
-	)}
+	class={["ridu-select__trigger", className]}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon class="size-3.5 text-foreground-soft pointer-events-none" />
+	<ChevronDownIcon class="ridu-select__chevron" />
 </SelectPrimitive.Trigger>

package/src/components/ui/select/select.scss

@@ -0,0 +1,126 @@
+@use "@riducms/ui/styles.scss" as ui;
+@layer ridu.components {
+	.ridu-select__trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 10px;
+		min-width: 0;
+		height: var(--control-height);
+		padding: 0 var(--control-padding-inline);
+		@include ui.control-surface;
+		color: var(--foreground);
+		font: inherit;
+		cursor: pointer;
+
+		&:hover {
+			border-color: var(--control-border-hover);
+		}
+
+		&:focus,
+		&:active {
+			border-color: var(--ring);
+			outline: 0;
+		}
+
+		&[data-size="compact"] {
+			height: 36px;
+		}
+
+		&[data-size="toolbar"] {
+			height: 34px;
+			padding-inline: 10px;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		&[aria-invalid="true"] {
+			border-color: var(--control-invalid-border);
+		}
+	}
+	.ridu-select__chevron {
+		width: 20px;
+		height: 20px;
+		flex-shrink: 0;
+		color: var(--foreground-muted);
+	}
+	.ridu-select__content {
+		position: relative;
+		isolation: isolate;
+		z-index: 90;
+		overflow: auto;
+		max-height: var(--bits-select-content-available-height);
+		min-width: 140px;
+		padding: 5px;
+		border: 1px solid var(--control-border);
+		border-radius: 3px;
+		background: var(--background-surface);
+		color: var(--foreground);
+		box-shadow: var(--control-shadow);
+	}
+	.ridu-select__viewport {
+		width: 100%;
+		min-width: calc(var(--bits-select-anchor-width) - 12px);
+	}
+	.ridu-select__item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		min-height: 34px;
+		padding-block: 7px;
+		padding-inline: 10px 30px;
+		border-radius: 3px;
+		font-size: 13px;
+		cursor: pointer;
+		outline: none;
+		user-select: none;
+
+		&[data-highlighted] {
+			background: var(--control-surface-hover);
+		}
+
+		&[data-disabled] {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+	}
+	.ridu-select__indicator {
+		position: absolute;
+		inset-inline-end: 8px;
+		width: 14px;
+		height: 14px;
+
+		svg {
+			width: 14px;
+			height: 14px;
+		}
+	}
+	.ridu-select__label {
+		display: flex;
+		gap: 8px;
+		white-space: nowrap;
+	}
+	.ridu-select__scroll {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		padding-block: 4px;
+		background: var(--popover);
+		cursor: default;
+
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+	}
+	.ridu-select__item-check {
+		width: 14px;
+		height: 14px;
+	}
+}

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

@@ -6,9 +6,10 @@
 	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 { type WithoutChildrenOrChild } from "@riducms/ui";
+
 	import SheetOverlay from "@admin/components/ui/sheet/sheet-overlay.svelte";
+	import "@admin/components/ui/sheet/sheet.scss";
 	import type { Snippet } from "svelte";
 
 	let {
@@ -34,44 +35,15 @@
 		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
-		)}
+		class={["ridu-sheet", 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",
-				})}
-			>
+			<SheetPrimitive.Close type="button" data-slot="sheet-close" class="ridu-sheet__close">
 				<XIcon />
-				<span class="sr-only">{i18n.t("general:close")}</span>
+				<span class="ridu-sheet__close-label">{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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/sheet/sheet.scss";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <SheetPrimitive.Description
 	bind:ref
 	data-slot="sheet-description"
-	class={cn("text-sm text-muted-foreground", className)}
+	class={["ridu-sheet__description", className]}
 	{...restProps}
 />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/sheet/sheet.scss";
 
 	let {
 		ref = $bindable(null),
@@ -12,25 +12,6 @@
 <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
-	)}
+	class={["ridu-sheet-overlay", 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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as SheetPrimitive } from "bits-ui";
-	import { cn } from "@riducms/ui";
+	import "@admin/components/ui/sheet/sheet.scss";
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <SheetPrimitive.Title
 	bind:ref
 	data-slot="sheet-title"
-	class={cn("text-base font-medium text-foreground", className)}
+	class={["ridu-sheet__title", className]}
 	{...restProps}
 />

package/src/components/ui/sheet/sheet.scss

@@ -0,0 +1,221 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-sheet-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		background: var(--backdrop);
+		backdrop-filter: blur(4px);
+		animation-fill-mode: both;
+
+		&[data-state="open"] {
+			animation: ridu-sheet-overlay-in 240ms ease-out;
+		}
+
+		&[data-state="closed"] {
+			animation: ridu-sheet-overlay-out 180ms ease-in;
+		}
+	}
+
+	.ridu-sheet {
+		position: fixed;
+		z-index: 50;
+		display: flex;
+		flex-direction: column;
+		background: var(--popover);
+		color: var(--popover-foreground);
+		font-size: var(--font-size-body);
+		box-shadow: var(--shadow-dialog);
+		animation-duration: 300ms;
+		animation-fill-mode: both;
+		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+		&[data-state="closed"] {
+			animation-duration: 220ms;
+			animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+		}
+
+		&[data-side="top"] {
+			inset: 0 0 auto;
+			height: auto;
+			border-bottom: 1px solid var(--control-border);
+		}
+
+		&[data-side="right"] {
+			inset: 0 0 0 auto;
+			width: 75%;
+			border-left: 1px solid var(--control-border);
+		}
+
+		&[data-side="bottom"] {
+			inset: auto 0 0;
+			height: auto;
+			border-top: 1px solid var(--control-border);
+		}
+
+		&[data-side="left"] {
+			inset: 0 auto 0 0;
+			width: 75%;
+			border-right: 1px solid var(--control-border);
+		}
+
+		&[data-state="open"][data-side="top"] {
+			animation-name: ridu-sheet-from-top;
+		}
+
+		&[data-state="open"][data-side="right"] {
+			animation-name: ridu-sheet-from-right;
+		}
+
+		&[data-state="open"][data-side="bottom"] {
+			animation-name: ridu-sheet-from-bottom;
+		}
+
+		&[data-state="open"][data-side="left"] {
+			animation-name: ridu-sheet-from-left;
+		}
+
+		&[data-state="closed"][data-side="top"] {
+			animation-name: ridu-sheet-to-top;
+		}
+
+		&[data-state="closed"][data-side="right"] {
+			animation-name: ridu-sheet-to-right;
+		}
+
+		&[data-state="closed"][data-side="bottom"] {
+			animation-name: ridu-sheet-to-bottom;
+		}
+
+		&[data-state="closed"][data-side="left"] {
+			animation-name: ridu-sheet-to-left;
+		}
+	}
+
+	.ridu-sheet__title {
+		color: var(--foreground);
+		font-size: 16px;
+		font-weight: 500;
+	}
+
+	.ridu-sheet__description {
+		color: var(--foreground-muted);
+		font-size: 14px;
+	}
+
+	.ridu-sheet__close {
+		position: absolute;
+		inset-block-start: 16px;
+		inset-inline-end: 16px;
+		display: grid;
+		place-items: center;
+		width: 32px;
+		height: 32px;
+		border: 0;
+		border-radius: 3px;
+		background: var(--secondary);
+		color: var(--foreground-muted);
+		cursor: pointer;
+
+		&:hover {
+			background: var(--control-surface-hover);
+			color: var(--foreground);
+		}
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+	}
+
+	.ridu-sheet__close-label {
+		@include ui.visually-hidden;
+	}
+
+	@media (min-width: 640px) {
+		.ridu-sheet[data-side="left"],
+		.ridu-sheet[data-side="right"] {
+			max-width: 384px;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-sheet[data-state][data-side],
+		.ridu-sheet-overlay[data-state] {
+			animation-duration: 1ms;
+		}
+	}
+}
+
+@keyframes ridu-sheet-overlay-in {
+	from {
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-overlay-out {
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-from-top {
+	from {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-from-right {
+	from {
+		transform: translateX(100%);
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-from-bottom {
+	from {
+		transform: translateY(100%);
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-from-left {
+	from {
+		transform: translateX(-100%);
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-to-top {
+	to {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-to-right {
+	to {
+		transform: translateX(100%);
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-to-bottom {
+	to {
+		transform: translateY(100%);
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-sheet-to-left {
+	to {
+		transform: translateX(-100%);
+		opacity: 0;
+	}
+}

package/src/components/ui/skeleton/skeleton.scss

@@ -0,0 +1,20 @@
+@layer ridu.components {
+	.ridu-skeleton {
+		border-radius: 3px;
+		background: var(--muted);
+		opacity: 0;
+		animation: ridu-skeleton-reveal 150ms ease-out 180ms forwards;
+	}
+
+	@keyframes ridu-skeleton-reveal {
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-skeleton {
+			animation-duration: 0s;
+		}
+	}
+}

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

@@ -1,31 +1,19 @@
 <script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "@riducms/ui";
-	import { onMount } from "svelte";
+	import { type WithElementRef, type WithoutChildren } from "@riducms/ui";
 	import type { HTMLAttributes } from "svelte/elements";
-
-	const revealDelayMilliseconds = 180;
+	import "@admin/components/ui/skeleton/skeleton.scss";
 
 	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
-	)}
+	class={["ridu-skeleton", className]}
 	{...restProps}
-	aria-hidden={!revealed}
+	aria-hidden="true"
 ></div>