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

package/ui/src/lib/components/dropdown/Item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import { tv } from 'tailwind-variants'
+
+  export const itemVariants = tv({
+    base: 'font-bold [&_svg]:text-muted-foreground px-3.5 py-2.5 dark:hover:bg-muted-foreground/20 leading-none',
+    variants: {
+      direction: {
+        col: 'justify-start',
+        row: "flex-col gap-2 h-fit [&_svg:not([class*='size-'])]:size-5 w-min min-w-20 whitespace-normal",
+      },
+    },
+    defaultVariants: { direction: 'col' },
+  })
+</script>
+
+<script lang="ts">
+  import { Button } from '$ui/button'
+  import { getGroupContext } from './GroupContext'
+  import { getContext } from './Context'
+  import type { Props } from './Item'
+
+  const { children, onclick, layer, class: classes, variant = 'ghost', ...rest }: Props = $props()
+  const ctx = getContext()
+
+  const click = $derived(layer ? () => ctx.push(layer) : onclick)
+  const direction = $derived(getGroupContext()?.direction ?? 'col')
+</script>
+
+<Button onclick={click} {variant} class={[itemVariants({ direction }), classes]} {...rest}>
+  {@render children?.()}
+</Button>

package/ui/src/lib/components/dropdown/Item.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps } from '$ui/button'
+
+export interface Props extends ButtonProps {
+  layer?: string
+}

package/ui/src/lib/components/dropdown/Layer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { getContext } from './Context'
+  import type { Props } from './Layer'
+
+  const { name = '', children }: Props = $props()
+  const ctx = getContext()
+</script>
+
+{#if ctx.layer === name}
+  {@render children()}
+{/if}

package/ui/src/lib/components/dropdown/Layer.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte'
+
+export interface Props {
+  /** @default '' */
+  name?: string
+  children: Snippet
+}

package/ui/src/lib/components/dropdown/Root.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte'
+  import { transit } from '$lib/tools'
+  import { setContext, type Context } from './Context'
+  import type { Props } from './Root'
+
+  const { children, onopen }: Props = $props()
+
+  const id = `am-${crypto.randomUUID()}`
+  let opened = $state(false)
+  let layers = $state<string[]>([])
+  let contentRef = $state<HTMLDivElement | undefined>()
+  let triggerRef = $state<HTMLDivElement | undefined>()
+
+  const ctx: Context = {
+    get opened() {
+      return opened
+    },
+    open: () => {
+      onopen?.(true)
+      transit(() => (opened = true))
+    },
+    close: () => {
+      onopen?.(false)
+
+      transit(() => {
+        opened = false
+        layers = []
+      })
+    },
+    get id() {
+      return id
+    },
+    setContentRef: (el) => (contentRef = el),
+    setTriggerRef: (el) => (triggerRef = el),
+    push: (name: string) =>
+      transit(() => {
+        layers = [...layers, name]
+      }),
+    pop: () =>
+      transit(() => {
+        layers = layers.slice(0, -1)
+      }),
+    get layer() {
+      return layers.at(-1) ?? ''
+    },
+  }
+
+  setContext(ctx)
+
+  export function open() {
+    ctx.open()
+  }
+
+  export function close() {
+    ctx.close()
+  }
+
+  onMount(() => {
+    function handle(e: MouseEvent) {
+      if (!opened) return
+
+      const target = e.target as Node
+
+      if (triggerRef?.contains(target) || contentRef?.contains(target)) return
+
+      if ((target as Element).closest?.('[data-overlay]')) return
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      onopen?.(false)
+
+      transit(() => {
+        opened = false
+        layers = []
+      })
+    }
+
+    document.addEventListener('click', handle, { capture: true })
+
+    return () => document.removeEventListener('click', handle, { capture: true })
+  })
+
+  onDestroy(() => onopen?.(false))
+</script>
+
+{@render children()}

package/ui/src/lib/components/dropdown/Root.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte'
+
+export interface Props {
+  children: Snippet
+  onopen?: (open: boolean) => void
+}

package/ui/src/lib/components/dropdown/Separator.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Props } from './Separator'
+
+  const { children }: Props = $props()
+</script>
+
+<div class="flex items-center justify-stretch gap-1">
+  {#if children}
+    <div class="bg-muted-foreground/20 my-1 h-px w-3.5"></div>
+    <span class="text-muted-foreground text-xs font-bold">{@render children?.()}</span>
+  {/if}
+  <div class="bg-muted-foreground/20 my-1 h-px w-full"></div>
+</div>

package/ui/src/lib/components/dropdown/Separator.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte'
+
+export interface Props {
+  children?: Snippet
+}

package/ui/src/lib/components/dropdown/Trigger.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Button } from '$ui/button'
+  import { buttonVariants } from '$ui/button'
+  import { beforeNavigate } from '$app/navigation'
+  import { getContext } from './Context'
+  import type { Props } from './Trigger'
+
+  const { children, id, class: classes, variant, size, ...rest }: Props = $props()
+  const ctx = getContext()
+
+  function trackRef(node: HTMLDivElement) {
+    ctx.setTriggerRef(node)
+
+    return { destroy: () => ctx.setTriggerRef(undefined) }
+  }
+
+  let style = $derived(
+    `view-transition-name: ${ctx.id}; view-transition-class: transition-spring transition-morph dropdown-content;`,
+  )
+
+  beforeNavigate(() => (style = ''))
+</script>
+
+<div class="flex-1 h-full" style="anchor-name: --{ctx.id};" use:trackRef>
+  {#if ctx.opened}
+    <!-- Placeholder of same size and position for proper dropdown alignment when trigger is hidden -->
+    <div class={[buttonVariants({ variant, size }), classes, 'invisible']}></div>
+  {:else}
+    <Button {id} {variant} {size} class={classes} {style} onclick={() => ctx.open()} {...rest}>
+      {@render children?.()}
+    </Button>
+  {/if}
+</div>

package/ui/src/lib/components/dropdown/Trigger.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps } from '$ui/button'
+
+export interface Props extends ButtonProps {
+  id?: string
+}

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

@@ -0,0 +1,8 @@
+export { default as Root } from './Root.svelte'
+export { default as Trigger } from './Trigger.svelte'
+export { default as Content } from './Content.svelte'
+export { default as Layer } from './Layer.svelte'
+export { default as Group } from './Group.svelte'
+export { default as Separator } from './Separator.svelte'
+export { default as Item, itemVariants } from './Item.svelte'
+export { default as Back } from './Back.svelte'

package/ui/src/lib/components/fullscreen/Fullscreen.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { X } from '@lucide/svelte'
+  import { Button } from '$ui/button'
+  import { transit } from '$lib/tools'
+  import { Overlay } from '$com/fullscreen'
+  import type { Props } from './Fullscreen'
+
+  let {
+    open = $bindable(false),
+    children,
+    content,
+    overlay,
+    class: classes,
+    onshow,
+    onhide,
+    x = true,
+    fragile = false,
+    controlled = false,
+  }: Props = $props()
+
+  export function show() {
+    onshow?.()
+    transit(() => (open = true))
+  }
+
+  export function hide() {
+    transit(() => (open = false)).then(() => onhide?.())
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (controlled || !open || e.key !== 'Escape') return
+
+    e.preventDefault()
+    hide()
+  }
+
+  function portal(node: HTMLElement) {
+    document.body.appendChild(node)
+
+    return { destroy: () => node.remove() }
+  }
+</script>
+
+<svelte:window {onkeydown} />
+
+<div
+  use:portal
+  role="button"
+  tabindex="0"
+  data-overlay
+  data-slot="fullscreen-container"
+  onpointerdown={fragile && !controlled ? hide : undefined}
+  class={[
+    'fixed inset-0 z-1001 flex items-center justify-center bg-background/90',
+    open || 'hidden',
+  ]}
+  style="view-transition-name: fullscreen;">
+  {#if content}
+    {@render content()}
+  {:else}
+    {@render children?.()}
+  {/if}
+  {#if overlay}
+    <Overlay>
+      {@render overlay()}
+    </Overlay>
+  {/if}
+  {#if x}
+    <Button
+      variant="ghost"
+      size="icon"
+      class="absolute top-4 inset-e-4 tim:top-[env(safe-area-inset-top)]"
+      onclick={hide}>
+      <X />
+    </Button>
+  {/if}
+</div>
+
+{#if controlled}
+  {@render children?.()}
+{:else}
+  <button
+    class={['focus:outline-none **:data-[slot=fullscreen-overlay]:hidden', classes]}
+    onclick={show}>
+    {@render children?.()}
+  </button>
+{/if}
+
+<style>
+  ::view-transition-group(fullscreen) {
+    z-index: 2;
+  }
+
+  ::view-transition-group(.fullscreen-content) {
+    z-index: 3;
+  }
+</style>

package/ui/src/lib/components/fullscreen/Fullscreen.ts

@@ -0,0 +1,18 @@
+import type { ClassValue } from 'svelte/elements'
+import type { Snippet } from 'svelte'
+
+export interface Props {
+  children?: Snippet
+  content?: Snippet
+  overlay?: Snippet
+  open?: boolean
+  onshow?: () => void
+  onhide?: () => void
+  class?: ClassValue
+  /** Close on touch outside. Default is false. */
+  fragile?: boolean
+  /** Opens manually. Default is false. */
+  controlled?: boolean
+  /** Show close button. Default is true. */
+  x?: boolean
+}

package/ui/src/lib/components/fullscreen/Overlay.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Props } from './Overlay'
+
+  const { children, class: classes }: Props = $props()
+</script>
+
+<div class={['absolute inset-0', classes]} style="view-transition-name: fullscreen-overlay;">
+  {@render children?.()}
+</div>
+
+<style>
+  ::view-transition-group(fullscreen-overlay) {
+    z-index: 4;
+  }
+</style>

package/ui/src/lib/components/fullscreen/Overlay.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'svelte/elements'
+import type { Snippet } from 'svelte'
+
+export interface Props {
+  children: Snippet
+  class?: ClassValue
+}

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

@@ -0,0 +1,2 @@
+export { default as Fullscreen } from './Fullscreen.svelte'
+export { default as Overlay } from './Overlay.svelte'

package/ui/src/lib/components/hold/Hold.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { readable, type Readable } from 'svelte/store'
+  import { Progress } from '$ui/progress'
+  import { Button } from '$ui/button'
+  import { cn } from '$lib/utils'
+  import { timeout } from '$lib/tools'
+  import type { Props } from './Hold'
+
+  const {
+    name = 'hold',
+    duration = 800,
+    label,
+    variant = 'ghost',
+    children,
+    position = 'left',
+    align = 'center',
+    portal: portaled = true,
+    onclick,
+    onpress,
+    class: classes,
+    message,
+    ...props
+  }: Props = $props()
+
+  let pressed = $state(false)
+  let shown = $state(false)
+  let hiding = $state<ReturnType<typeof setTimeout> | null>(null)
+  // svelte-ignore state_referenced_locally
+  let countdown = $state<Readable<number>>(readable(duration))
+
+  const progress = $derived(Math.round((1 - $countdown! / duration) * 100))
+
+  $effect(() => {
+    if ($countdown === 0) click()
+  })
+
+  function onpointerdown(e: PointerEvent) {
+    swallow(e)
+
+    if (e.altKey) click(true)
+    else press()
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (e.key === ' ') press()
+  }
+
+  function press() {
+    if (pressed) return
+
+    onpress?.()
+    pressed = true
+    shown = true
+    countdown = timeout(duration, 60)
+
+    if (hiding) clearTimeout(hiding)
+  }
+
+  function cancel() {
+    if (!pressed) return
+
+    hiding = setTimeout(
+      () => {
+        shown = false
+      },
+      progress > 20 ? 200 : 1000, // show hint on regular clicks
+    )
+
+    pressed = false
+    countdown = readable(duration)
+  }
+
+  function click(instant = false) {
+    if (!pressed && !instant) return
+
+    onclick?.()
+    pressed = false
+
+    hiding = setTimeout(() => {
+      shown = false
+      countdown = readable(duration)
+    }, 300)
+  }
+
+  function swallow(e: MouseEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  function portal(node: HTMLElement, enabled: boolean) {
+    if (!enabled) return
+
+    document.body.appendChild(node)
+
+    return { destroy: () => node.remove() }
+  }
+</script>
+
+<Button
+  {variant}
+  {...props}
+  class={cn('select-none', classes)}
+  {onpointerdown}
+  {onkeydown}
+  oncontextmenu={swallow}
+  onpointerup={cancel}
+  onpointerleave={cancel}
+  onkeyup={cancel}
+  style={`anchor-name: --${name};`}>
+  {@render children?.()}
+</Button>
+
+{#if shown}
+  <div
+    use:portal={portaled}
+    class={cn(
+      'fixed z-1002 w-fit min-w-26 transition-all ease-in-out space-y-1',
+      'bg-background/85 p-2 pt-1 rounded-md',
+      'starting:scale-0',
+    )}
+    style={`position-anchor: --${name}; position-area: ${position} ${align};`}>
+    <div class="text-xs text-muted-foreground">
+      {#if message}
+        {@render message()}
+      {:else}
+        {label}
+      {/if}
+    </div>
+    <Progress
+      value={progress}
+      class="h-1 [&_div[data-slot=progress-indicator]]:bg-destructive/90 [&_div[data-slot=progress-indicator]]:transition-none" />
+  </div>
+{/if}

package/ui/src/lib/components/hold/Hold.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte'
+import type { ButtonProps } from '$ui/button'
+
+export interface Props extends Omit<ButtonProps, 'onpointerdown' | 'onkeydown' | 'onclick'> {
+  name?: string
+  duration?: number
+  label?: string
+  position?: 'center' | 'left' | 'right' | 'top' | 'bottom'
+  align?: 'center' | 'left' | 'right' | 'top' | 'bottom'
+  /**
+   * Teleport tooltip to `body`. Set `false` when trigger sits inside a
+   * transformed ancestor (e.g. AlertDialog centered via `translate`) —
+   * Safari's anchor positioning ignores ancestor transforms and misaligns
+   * the tooltip. Keeping it in the transformed subtree fixes it.
+   * Remove workaround once WebKit ships transform-aware anchors:
+   * https://github.com/WebKit/standards-positions/issues/558
+   * @default true
+   */
+  portal?: boolean
+  onpress?: () => void
+  onclick?: () => void
+  message?: Snippet
+}

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

@@ -0,0 +1 @@
+export { default as Hold } from './Hold.svelte'

package/ui/src/lib/components/scrollable/Scrollable.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { scrollable, INFINITY, type Props } from './Scrollable'
+
+  const {
+    children,
+    infinite = false,
+    align = 'start',
+    bleed = false,
+    gutter = false,
+    class: classes,
+    style,
+    id,
+    dir,
+    controlled = false,
+    scroll = 0,
+    onscroll,
+  }: Props = $props()
+
+  const BLEED = 'mx-[calc(-50vw+50%)] px-[calc(50vw-50%)] scroll-px-[calc(50vw-50cqi)]'
+  const GUTTER = '[&>*:first-child]:ml-[50cqw] [&>*:last-child]:mr-[50cqw]'
+
+  let mounted = $state(false)
+
+  onMount(() => {
+    mounted = true
+  })
+</script>
+
+<div {dir} class="@container" {style}>
+  <div
+    {id}
+    {@attach scrollable({ infinite, align, scroll }, mounted)}
+    {onscroll}
+    class={[
+      'flex no-scrollbar snap-x snap-mandatory *:shrink-0 overscroll-x-contain',
+      controlled ? 'overflow-x-hidden' : 'overflow-x-auto',
+      bleed && BLEED,
+      gutter && !infinite && GUTTER,
+      classes,
+    ]}>
+    {@render children?.()}
+    {#if infinite}
+      {#each { length: INFINITY - 1 }}
+        {@render children?.()}
+      {/each}
+    {/if}
+  </div>
+</div>