@toa.io/extensions.configuration 1.0.0-alpha.273 → 1.0.0-alpha.274

package/ui/src/lib/components/ui/select/select-group.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group
+	bind:ref
+	data-slot="select-group"
+	class={cn("scroll-my-1 p-1", className)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/select/select-item.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="cn-select-item-indicator-icon" />
+			{/if}
+		</span>
+		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+			{#if childrenProp}
+				{@render childrenProp({ selected, highlighted })}
+			{:else}
+				{label || value}
+			{/if}
+		</span>
+	{/snippet}
+</SelectPrimitive.Item>

package/ui/src/lib/components/ui/select/select-label.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="select-label"
+	class={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/ui/src/lib/components/ui/select/select-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<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)}
+	{...restProps}
+>
+	<ChevronDownIcon  />
+</SelectPrimitive.ScrollDownButton>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<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)}
+	{...restProps}
+>
+	<ChevronUpIcon  />
+</SelectPrimitive.ScrollUpButton>

package/ui/src/lib/components/ui/select/select-separator.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Separator } from "$ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("-mx-1 my-1 h-px bg-border pointer-events-none", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none 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 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *: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
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 text-muted-foreground pointer-events-none" />
+</SelectPrimitive.Trigger>

package/ui/src/lib/components/ui/select/select.svelte

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

package/ui/src/lib/components/ui/separator/index.ts

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

package/ui/src/lib/components/ui/separator/separator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		"data-slot": dataSlot = "separator",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		// this is different in shadcn/ui but self-stretch breaks things for us
+		"data-[orientation=vertical]:h-full",
+		className
+	)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from "./spinner.svelte";

package/ui/src/lib/components/ui/spinner/spinner.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import { cn } from "$lib/utils.js";
+	import type { SVGAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		role = "status",
+		// we add name, color, and stroke for compatibility with different icon libraries props
+		name,
+		color,
+		stroke,
+		"aria-label": ariaLabel = "Loading",
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Loader2Icon {role} name={name === null ? undefined : name} color={color === null ? undefined : color} stroke={stroke === null ? undefined : stroke} aria-label={ariaLabel} class={cn("size-4 animate-spin", className)} {...restProps} />

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

@@ -0,0 +1,18 @@
+import Content from "./tabs-content.svelte";
+import Trigger from "./tabs-trigger.svelte";
+import Root from "./tabs.svelte";
+import List, { tabsListVariants, type TabsListVariant } from "./tabs-list.svelte";
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	tabsListVariants,
+	type TabsListVariant,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	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/ui/src/lib/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const tabsListVariants = tv({
+		base: "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 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 bg-muted",
+				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 "$lib/utils.js";
+
+	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/ui/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	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-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+		"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+		"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+		className
+	)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/textarea/index.ts

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

package/ui/src/lib/components/ui/textarea/textarea.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "textarea",
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{...restProps}></textarea>

package/ui/src/lib/intl/bcp.ts

@@ -0,0 +1,25 @@
+import { locales } from "./built"
+import type { Locale } from "./types"
+
+/**
+ * Check if a BCP 47 language code matches a language code in the list
+ * 
+ * @param code BCP 47 language code
+ * @returns {boolean} True if the code is supported, otherwise false.
+ */
+function supported(code: string): boolean {
+  return locales.some(locale => locale.startsWith(code))
+}
+
+/**
+ * Find a first matching locale by a BCP 47 language code. 
+ * Defaults to 'en-US' if no match is found.
+ * 
+ * @param code BCP 47 language code
+ * @returns {Locale} A Locale type with the matched locale, or the default locale if no match is found.
+ */
+function resolveLocale(code: string): Locale {
+  return locales.find(locale => locale.startsWith(code)) ?? 'en-US'
+}
+
+export { supported, resolveLocale }

package/ui/src/lib/intl/built.js

@@ -0,0 +1,18 @@
+// Auto-generated by i18n CLI - do not edit manually
+
+/** @type {Record<import('./types').Locale, import('./types').Dictionary>} */
+export const dictionaries = {
+  "en-US": {
+    "native": "English",
+    "locale": "en-US",
+    "dir": "ltr",
+    "nav": {
+      "signout": "Sign out",
+      "filter": "Filter components"
+    }
+  }
+};
+
+/** @type {import('./types').Locale[]} */
+export const locales = ["en-US"];
+

package/ui/src/lib/intl/context.yaml

@@ -0,0 +1,18 @@
+context: Internationalization project
+inputs:
+  locale:
+    input: locale
+    context: BCP 47 language tag, should not be translated, always use the target language code
+  native:
+    input: native
+    context: native name of the language in that language, should not be translated
+  nav:
+    signout:
+      input: Sign out
+      context: button that ends the session
+    filter:
+      input: Filter components
+      context: placeholder of the search box in the header
+mounts:
+  iam: ../../@/iam/ui/intl
+  configuration: ../../@/configuration/ui/intl

package/ui/src/lib/intl/en-US.yaml

@@ -0,0 +1,6 @@
+native: English
+locale: en-US
+dir: ltr
+nav:
+  signout: Sign out
+  filter: Filter components

package/ui/src/lib/intl/index.ts

@@ -0,0 +1,65 @@
+import { derived } from 'svelte/store'
+import { dictionaries, locales } from './built.js'
+import { account } from '@/iam'
+import { value } from 'svas'
+import { supported, resolveLocale } from './bcp'
+import Negotiator from 'negotiator'
+import type { Locale, Dictionary, Grammar } from './types'
+
+const defaultLocale = 'en-US'
+
+type Translation<T = string> = Record<Locale, T>
+
+interface PluralForms {
+  other: string
+  zero?: string
+  one?: string
+  two?: string
+  few?: string
+  many?: string
+}
+
+type Plural = Translation<PluralForms>
+
+const selected = value<Locale | undefined>({
+  persist: 'intl:selected',
+})
+
+const locale = derived([account, selected], ([$account, $selected]) => {
+  if ($selected) return resolveLocale($selected)
+
+  const system = preferred()
+  if (system) return system
+
+  if ($account?.locale !== undefined && supported($account.locale))
+    return resolveLocale($account.locale)
+
+  return defaultLocale
+})
+
+export const grammar = derived(account, ($account) => $account?.grammar ?? 'none')
+
+function preferred(): Locale | null {
+  if (typeof navigator !== 'undefined')
+    for (const lang of navigator.languages)
+      if (supported(lang)) return resolveLocale(lang)
+
+  return null
+}
+
+export function acceptable(header: string | null): Locale {
+  if (header === null)
+    return defaultLocale
+
+  const negotiator = new Negotiator({ headers: { 'accept-language': header } })
+  const languages = negotiator.languages(locales) as Locale[]
+
+  return languages[0] ?? defaultLocale
+}
+
+const dict = derived(locale, ($locale) => dictionaries[$locale])
+
+export { dict, dictionaries, locales, selected, locale }
+export type { Locale, Translation, Plural, Dictionary, Grammar }
+
+export * from './bcp'

package/ui/src/lib/intl/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Auto-generated TypeScript definitions for i18n dictionaries
+ *
+ * @author copilot
+ */
+
+export type Locale = 'en-US'
+
+export type Grammar = string
+
+export type Dictionary = {
+      native: string
+      locale: string
+      dir: string
+      nav: {
+        signout: string
+        filter: string
+      }
+    }

package/ui/src/lib/tools/ago.ts

@@ -0,0 +1,10 @@
+import type { Locale } from './types'
+
+export function ago(timestamp: number, locale: Locale): string {
+  const days = Math.round((Date.now() - timestamp) / 86_400_000)
+
+  if (days < 2)
+    return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(-days, 'day')
+
+  return new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }).format(timestamp)
+}

package/ui/src/lib/tools/assert.ts

@@ -0,0 +1,3 @@
+export function assert(condition: boolean, message: string): asserts condition {
+  if (!condition) throw new Error(message)
+}

package/ui/src/lib/tools/cap.ts

@@ -0,0 +1,5 @@
+export const expire = (ms: number) =>
+  new Promise<null>((resolve) => setTimeout(() => resolve(null), ms))
+
+export const cap = <T>(promise: Promise<T>, ms: number): Promise<T | null> =>
+  Promise.race([promise, expire(ms)])

package/ui/src/lib/tools/clicks.ts

@@ -0,0 +1,25 @@
+/**
+ * Creates a click detector for rapid consecutive clicks. Invoke the returned
+ * function on each click; when `count` clicks occur within `gap` ms, `callback` runs.
+ *
+ * @param count - Required number of consecutive clicks to trigger the callback.
+ * @param callback - Function to execute when the click count is reached.
+ * @param gap - Maximum time in ms between clicks to count as consecutive. Default 500.
+ * @returns A function to call on each click event.
+ */
+export function clicks(count: number, callback: () => void, gap = 500) {
+  let taps = 0
+  let last = 0
+
+  return () => {
+    const now = Date.now()
+
+    taps = now - last < gap ? taps + 1 : 1
+    last = now
+
+    if (taps === count) {
+      taps = 0
+      callback()
+    }
+  }
+}

package/ui/src/lib/tools/contextmenu.ts

@@ -0,0 +1,19 @@
+import { dev } from '$app/environment'
+
+function allowEditable(e: MouseEvent) {
+  for (const n of e.composedPath()) {
+    if (n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement) return true
+
+    if (n instanceof HTMLElement && n.isContentEditable) return true
+  }
+
+  return false
+}
+
+export function suppressContextMenu(e: MouseEvent) {
+  if (dev) return
+
+  if (allowEditable(e)) return
+
+  e.preventDefault()
+}