@komensal/ui 0.1.0

package/src/components/otp-input.tsx

@@ -0,0 +1,62 @@
+import { OTPInput, OTPInputContext } from 'input-otp'
+import React from 'react'
+
+import { cn } from '../utils'
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      className={cn('disabled:cursor-not-allowed', className)}
+      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
+      data-slot='input-otp'
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('flex items-center gap-2', className)} data-slot='input-otp-group' {...props} />
+}
+
+function InputOTPSlot({
+  className,
+  index,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext) as {
+    slots: { char: string | null; hasFakeCaret: boolean; isActive: boolean }[]
+  }
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {}
+
+  return (
+    <div
+      className={cn(
+        'border-border text-foreground relative flex h-14 w-12 items-center justify-center rounded-[10px] border text-xl font-medium transition-all outline-none',
+        char ? 'bg-brand-subtle' : 'bg-transparent',
+        'data-[active=true]:border-primary data-[active=true]:ring-ring data-[active=true]:z-10 data-[active=true]:ring-2',
+        'aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/40',
+        className
+      )}
+      data-active={isActive}
+      data-slot='input-otp-slot'
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+          <div className='animate-caret-blink bg-foreground h-6 w-px duration-1000' />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot }

package/src/components/password-checklist.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { IoMdCheckmarkCircle, IoMdCloseCircle } from 'react-icons/io'
+
+import { PasswordRule } from '../types/password'
+import { cn } from '../utils'
+
+interface PasswordChecklistProps {
+  className?: string
+  rules: PasswordRule[]
+  value: string
+}
+
+export const PasswordChecklist = ({ className, rules, value }: PasswordChecklistProps) => {
+  if (rules.length === 0) return null
+
+  return (
+    <ul className={cn('flex flex-col gap-1', className)}>
+      {rules.map((rule) => {
+        const isMet = rule.test(value)
+        const Icon = (isMet ? IoMdCheckmarkCircle : IoMdCloseCircle) as React.FC<React.SVGProps<SVGSVGElement>>
+
+        return (
+          <li
+            className={cn(
+              'flex items-center gap-2 text-xs transition-colors',
+              isMet ? 'text-success' : 'text-inactive-text'
+            )}
+            key={rule.key}
+          >
+            <Icon aria-hidden='true' className='h-4 w-4 shrink-0' />
+            <span>{rule.label}</span>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}

package/src/components/popover.tsx

@@ -0,0 +1,31 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
+
+import { cn } from '../utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ align = 'center', className, sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      align={align}
+      className={cn(
+        'text-foreground bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        className
+      )}
+      ref={ref}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }

package/src/components/select-input.tsx

@@ -0,0 +1,236 @@
+import { ChevronDown, ChevronUp, Clock, XIcon } from 'lucide-react'
+import React, { cloneElement, JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { FieldError, Noop } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+import { cn, inputBase, inputDisabled, inputFocus, inputPlaceholder } from '../utils'
+import { Button } from './button'
+import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command'
+import { Input } from './input'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+import { Spinner } from './spinner'
+
+interface SelectInputProps<Label extends string, Value extends string> {
+  ableDeleteOption?: boolean
+  className?: string
+  disabled?: boolean
+  error?: FieldError
+  items?: null | Record<Label | Value, number | string>[]
+  labelKey?: string
+  leftIcon?: JSX.Element
+  loading?: boolean
+  onBlur?: Noop
+  onChange?: (...event: unknown[]) => void
+  onValueChangeCallBack?: (item: { label: string; value: string }) => void
+  placeholder?: string
+  placeholderClassName?: string
+  search?: boolean
+  timeField?: boolean
+  value?: string
+  valueKey?: string
+}
+
+export const SelectInput = <Label extends string, Value extends string>(props: SelectInputProps<Label, Value>) => {
+  const { t } = useTranslation('ui')
+  const {
+    ableDeleteOption,
+    className,
+    disabled = false,
+    error,
+    items,
+    labelKey = 'label',
+    leftIcon,
+    loading = false,
+    onBlur,
+    onChange,
+    onValueChangeCallBack = () => undefined,
+    placeholder,
+    placeholderClassName = '',
+    search = false,
+    timeField = false,
+    value = '',
+    valueKey = 'value'
+  } = props
+
+  const resolvedPlaceholder = placeholder ?? t('selectInput.placeholder')
+
+  const divRef = useRef<HTMLButtonElement | null>(null)
+  const [open, setOpen] = useState<boolean>(false)
+  const [width, setWidth] = useState<number>(0)
+  const [query, setQuery] = useState<string>('')
+  const [valueItem, setValueItem] = useState(value)
+
+  const normalizeString = (str: string): string => str.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase()
+
+  const normalizedItems = useMemo(() => {
+    if (!items) return [] as Record<Label | Value, string>[]
+    return items.map((it) => ({
+      ...it,
+      [labelKey]: String(it[labelKey as Label]),
+      [valueKey]: String(it[valueKey as Value])
+    })) as Record<Label | Value, string>[]
+  }, [items, labelKey, valueKey])
+
+  const filteredOptions = useMemo(() => {
+    if (!query) return normalizedItems
+    return normalizedItems.filter((el) =>
+      normalizeString(el[labelKey as Label] as string).includes(normalizeString(query))
+    )
+  }, [normalizedItems, labelKey, query])
+
+  const onValueChange = useCallback(
+    (val: string) => {
+      if (!normalizedItems.length) return
+      const item = normalizedItems.find((i) => i[valueKey as Value] === val)
+      if (item) {
+        onValueChangeCallBack({
+          label: item[labelKey as Label],
+          value: item[valueKey as Value]
+        })
+        setValueItem(val)
+      }
+    },
+    [normalizedItems, labelKey, valueKey, onValueChangeCallBack]
+  )
+
+  const buttonClassName = useMemo(
+    () =>
+      cn(
+        inputBase,
+        inputFocus,
+        'hover:bg-surface',
+        disabled && inputDisabled,
+        error && 'border-destructive',
+        className
+      ),
+    [disabled, error, className]
+  )
+
+  const updateWidth = () => {
+    if (divRef.current) {
+      const { width } = divRef.current.getBoundingClientRect()
+      setWidth(width)
+    }
+  }
+
+  useEffect(() => {
+    updateWidth()
+    window.addEventListener('resize', updateWidth)
+    return () => window.removeEventListener('resize', updateWidth)
+  }, [])
+
+  useEffect(() => {
+    setValueItem(value)
+  }, [value])
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <div className='relative flex flex-col justify-center'>
+        <Popover onOpenChange={setOpen} open={open}>
+          <PopoverTrigger asChild>
+            <Button
+              aria-expanded={open}
+              className={buttonClassName}
+              disabled={disabled}
+              isLoading={loading}
+              onBlur={onBlur}
+              ref={divRef}
+              role='combobox'
+              variant='primary'
+            >
+              {loading ? (
+                <>
+                  {t('selectInput.loading')} <Spinner />
+                </>
+              ) : (
+                <div className='relative flex h-5 w-full items-center'>
+                  <div className='flex w-full max-w-[90%] items-center truncate'>
+                    {leftIcon && (
+                      <span className='mr-2 shrink-0'>{cloneElement(leftIcon, { size: 20, strokeWidth: 1 })}</span>
+                    )}
+                    {valueItem ? (
+                      filteredOptions.find((i) => i[valueKey as Value] === valueItem)?.[labelKey as Label]
+                    ) : (
+                      <span className={cn(inputPlaceholder, placeholderClassName)}>{resolvedPlaceholder}</span>
+                    )}
+                  </div>
+                  {timeField ? (
+                    <div className='absolute top-0.5 right-0'>
+                      <Clock className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+                    </div>
+                  ) : (
+                    <div className='absolute top-0.5 right-0 flex gap-2'>
+                      {ableDeleteOption && (
+                        <XIcon
+                          className='z-100 h-4 w-4 shrink-0 opacity-50'
+                          onClick={(e: React.MouseEvent<SVGSVGElement>) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                            onChange?.('')
+                            onValueChange('')
+                            setValueItem('')
+                            setQuery('')
+                            setOpen(false)
+                          }}
+                        />
+                      )}
+                      {!open ? (
+                        <ChevronDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+                      ) : (
+                        <ChevronUp className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className='bg-surface border-border z-100 rounded-sm p-1'
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            style={{ maxWidth: 'auto', minWidth: `${width}px`, width: `${width}px` }}
+          >
+            <Command className='flex w-full flex-col gap-2'>
+              {search && (
+                <Input
+                  className='mb-1 rounded-sm'
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder={t('selectInput.search')}
+                  value={query}
+                />
+              )}
+              <CommandEmpty className='text-center'>{t('selectInput.noResults')}</CommandEmpty>
+              <CommandList>
+                <CommandGroup className='p-0'>
+                  {filteredOptions.map((item) => {
+                    const labelValue = item[labelKey as Label] as string
+                    const valueValue = item[valueKey as Value] as string
+
+                    return (
+                      <CommandItem
+                        className={cn(
+                          'hover:bg-hover mt-0.5 mb-0.5 flex cursor-pointer items-center gap-2 rounded-sm py-2 pl-3',
+                          valueValue === value && 'bg-inactive'
+                        )}
+                        key={valueValue}
+                        onSelect={(currentValue: string) => {
+                          onChange?.(currentValue)
+                          onValueChange(currentValue)
+                          setOpen(false)
+                          setTimeout(() => setQuery(''), 100)
+                        }}
+                        value={valueValue}
+                      >
+                        {labelValue.trim()}
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}

package/src/components/select.tsx

@@ -0,0 +1,143 @@
+import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import * as React from 'react'
+
+import { cn } from '../utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ children, className, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    className={cn(
+      'placeholder:text-placeholder border-border ring-offset-surface focus:ring-ring flex h-9 w-full items-center justify-between rounded-xl border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed [&>span]:line-clamp-1',
+      className
+    )}
+    ref={ref}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className='h-4 w-4 opacity-50' />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    ref={ref}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    ref={ref}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ children, className, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      className={cn(
+        'border-border text-foreground bg-surface data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      ref={ref}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' && 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label className={cn('px-2 py-1.5 text-sm font-semibold', className)} ref={ref} {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ children, className, ...props }, ref) => (
+  <SelectPrimitive.Item
+    className={cn(
+      'focus:text-foreground focus:bg-hover relative flex w-full cursor-default items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+      className
+    )}
+    ref={ref}
+    {...props}
+  >
+    <span className='absolute right-2 flex h-3.5 w-3.5 items-center justify-center'>
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className='h-4 w-4' />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>
+      <span>{children}</span>
+    </SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator className={cn('bg-border -mx-1 my-1 h-px', className)} ref={ref} {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+}

package/src/components/spinner.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+const sizes = {
+  lg: '70',
+  md: '50',
+  sm: '20',
+  xl: '100',
+  xs: '5'
+}
+
+const variants = {
+  light: 'var(--color-spinner-light)',
+  primary: 'var(--color-spinner-primary)',
+  secondary: 'var(--color-spinner-secondary)'
+}
+
+export interface SpinnerProps {
+  className?: string
+  size?: keyof typeof sizes
+  variant?: keyof typeof variants
+}
+
+export const Spinner = ({ className = '', size = 'md', variant = 'primary' }: SpinnerProps) => {
+  const { t } = useTranslation('ui')
+  return (
+    <>
+      <svg
+        fill='currentColor'
+        height={sizes[size]}
+        stroke={variants[variant]}
+        viewBox='0 0 100 100'
+        width={sizes[size]}
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <g className={clsx('spinner_V8m1', sizes[size], variants[variant], className)}>
+          <circle cx='50' cy='50' fill='none' opacity='0.25' r='35' stroke='currentColor' strokeWidth='10' />
+          <circle
+            cx='50'
+            cy='50'
+            fill='none'
+            r='35'
+            stroke='currentColor'
+            strokeDasharray='164.93361431346415 56.97787143782138'
+            strokeWidth='10'
+          >
+            <animateTransform
+              attributeName='transform'
+              dur='1s'
+              keyTimes='0;1'
+              repeatCount='indefinite'
+              type='rotate'
+              values='0 50 50;360 50 50'
+            />
+          </circle>
+        </g>
+      </svg>
+      <span className='sr-only'>{t('spinner.loading')}</span>
+    </>
+  )
+}

package/src/components/step-header.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '../utils'
+
+interface StepHeaderProps {
+  subtitle?: ReactNode
+  subtitleClassName?: string
+  title: string
+}
+
+export const StepHeader = ({ subtitle, subtitleClassName, title }: StepHeaderProps) => (
+  <div className='flex flex-col gap-1'>
+    <h1 className='text-title text-2xl font-bold'>{title}</h1>
+    {subtitle !== undefined && <p className={cn('text-subtitle text-sm', subtitleClassName)}>{subtitle}</p>}
+  </div>
+)

package/src/components/stepper.tsx

@@ -0,0 +1,69 @@
+import { CheckIcon } from 'lucide-react'
+
+import { cn } from '../utils'
+
+export interface StepperStep {
+  label: string
+}
+
+interface StepperProps {
+  activeIndex: number
+  className?: string
+  intermediate?: boolean
+  steps: StepperStep[]
+}
+
+export const Stepper = ({ activeIndex, className, intermediate = false, steps }: StepperProps) => {
+  return (
+    <div className={cn('flex w-full items-start', className)}>
+      {steps.map((step, index) => {
+        const isCompleted = intermediate ? index <= activeIndex : index < activeIndex
+        const isActive = !intermediate && index === activeIndex
+
+        return (
+          <div className='flex flex-1 flex-col items-center' key={step.label}>
+            <div className='flex w-full items-center'>
+              <div
+                className={cn(
+                  'h-0.75 flex-1 self-center',
+                  isCompleted || isActive ? 'bg-primary' : 'bg-inactive',
+                  index === 0 && 'rounded-l-full'
+                )}
+              />
+              <div
+                aria-current={isActive ? 'step' : undefined}
+                className={cn(
+                  'flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-full border text-xs font-semibold transition-colors md:h-6.5 md:w-6.5',
+                  isCompleted && 'bg-primary border-primary text-inverse',
+                  isActive && 'bg-primary border-primary text-inverse',
+                  !isCompleted && !isActive && 'bg-inactive border-inactive text-surface'
+                )}
+              >
+                {isCompleted ? <CheckIcon className='h-4 w-4' /> : index + 1}
+              </div>
+              <div
+                className={cn(
+                  'relative h-0.75 flex-1 self-center',
+                  isCompleted ? 'bg-primary' : 'bg-inactive',
+                  index === steps.length - 1 && 'rounded-r-full'
+                )}
+              >
+                {index === 0 && (
+                  <div
+                    className={cn(
+                      'absolute top-1/2 right-0 h-2.25 w-2.25 translate-x-1/2 -translate-y-1/2 rounded-full transition-colors',
+                      isCompleted ? 'bg-primary' : 'bg-inactive'
+                    )}
+                  />
+                )}
+              </div>
+            </div>
+            <span className={cn('mt-1 text-xs font-normal', isCompleted || isActive ? 'text-primary' : 'text-muted')}>
+              {step.label}
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from './toast'
+export { ToastProvider } from './toast-provider'