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

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

@@ -1,31 +0,0 @@
-<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

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

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

@@ -1,11 +0,0 @@
-<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

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

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

@@ -1,88 +0,0 @@
-<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

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

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

@@ -1,13 +0,0 @@
-<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

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

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

@@ -1,33 +0,0 @@
-<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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,97 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,133 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

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

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

@@ -1,49 +0,0 @@
-<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>