@glyphui/ui 0.1.1 → 0.3.0

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,84 @@
+import { DayPicker, type DayPickerProps } from 'react-day-picker'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { calendarStyles } from './calendar.styles'
+
+export type CalendarProps = DayPickerProps
+
+function ChevronIcon({
+  className,
+  orientation = 'left',
+}: {
+  className?: string
+  orientation?: 'up' | 'down' | 'left' | 'right'
+}) {
+  const d = {
+    left: 'm15 18-6-6 6-6',
+    right: 'm9 18 6-6-6-6',
+    up: 'm18 15-6-6-6 6',
+    down: 'm6 9 6 6 6-6',
+  }[orientation]
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d={d} />
+    </svg>
+  )
+}
+
+/**
+ * A month grid for picking dates, built on react-day-picker and styled by the theme.
+ * Supports `mode="single" | "multiple" | "range"`, disabled dates and several months.
+ */
+export function Calendar(inProps: CalendarProps) {
+  const [props, slots] = useComponentConfig('Calendar', inProps)
+  const { className, classNames, components, showOutsideDays = true, ...rest } = props
+  const s = calendarStyles()
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={s.root({ class: [slots.root, className] })}
+      classNames={{
+        months: s.months({ class: slots.months }),
+        month: s.month({ class: slots.month }),
+        month_caption: s.monthCaption({ class: slots.monthCaption }),
+        caption_label: s.captionLabel({ class: slots.captionLabel }),
+        nav: s.nav({ class: slots.nav }),
+        button_previous: s.navButton({ class: slots.navButton }),
+        button_next: s.navButton({ class: slots.navButton }),
+        chevron: s.chevron({ class: slots.chevron }),
+        month_grid: s.monthGrid({ class: slots.monthGrid }),
+        weekdays: s.weekdays({ class: slots.weekdays }),
+        weekday: s.weekday({ class: slots.weekday }),
+        weeks: s.weeks({ class: slots.weeks }),
+        week: s.week({ class: slots.week }),
+        day: s.day({ class: slots.day }),
+        day_button: s.dayButton({ class: slots.dayButton }),
+        today: s.today({ class: slots.today }),
+        selected: s.selected({ class: slots.selected }),
+        outside: s.outside({ class: slots.outside }),
+        disabled: s.disabled({ class: slots.disabled }),
+        range_start: s.rangeStart({ class: slots.rangeStart }),
+        range_middle: s.rangeMiddle({ class: slots.rangeMiddle }),
+        range_end: s.rangeEnd({ class: slots.rangeEnd }),
+        hidden: s.hidden({ class: slots.hidden }),
+        footer: s.footer({ class: slots.footer }),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className: chevronClass, orientation }) => (
+          <ChevronIcon className={chevronClass} orientation={orientation} />
+        ),
+        ...components,
+      }}
+      {...(rest as DayPickerProps)}
+    />
+  )
+}

package/src/components/calendar/index.ts

@@ -0,0 +1,3 @@
+export type { DateRange, Matcher } from 'react-day-picker'
+export { Calendar, type CalendarProps } from './calendar'
+export { calendarStyles } from './calendar.styles'

package/src/components/carousel/carousel.styles.ts

@@ -0,0 +1,43 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const carouselStyles = tv({
+  slots: {
+    root: 'relative',
+    viewport: 'overflow-hidden rounded-lg',
+    container: 'flex',
+    item: 'min-w-0 shrink-0 grow-0 basis-full',
+    control: 'absolute z-10 border-border bg-surface/85 shadow-sm backdrop-blur disabled:opacity-0',
+    dots: 'mt-3 flex items-center justify-center gap-1.5',
+    dot: [
+      'h-2 w-2 cursor-pointer rounded-pill bg-border-strong',
+      transition,
+      focusRing,
+      'hover:bg-muted-foreground aria-[current=true]:w-5 aria-[current=true]:bg-primary',
+    ],
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: '-ml-4',
+        item: 'pl-4',
+        control: 'top-1/2 -translate-y-1/2',
+      },
+      vertical: {
+        container: '-mt-4 h-full flex-col',
+        item: 'pt-4',
+        control: 'left-1/2 -translate-x-1/2 [&_svg]:rotate-90',
+      },
+    },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+})
+
+export type CarouselVariants = VariantProps<typeof carouselStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Carousel: StylesEntry<typeof carouselStyles>
+  }
+}

package/src/components/carousel/carousel.tsx

@@ -0,0 +1,278 @@
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
+import {
+  Children,
+  type ComponentProps,
+  createContext,
+  type KeyboardEvent,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { cn } from '../../utils/cn'
+import { IconButton, type IconButtonProps } from '../button'
+import { type CarouselVariants, carouselStyles } from './carousel.styles'
+
+export type CarouselApi = UseEmblaCarouselType[1]
+type EmblaArgs = Parameters<typeof useEmblaCarousel>
+export type CarouselOptions = EmblaArgs[0]
+export type CarouselPlugin = NonNullable<EmblaArgs[1]>[number]
+
+type Orientation = NonNullable<CarouselVariants['orientation']>
+
+interface CarouselContextValue {
+  viewportRef: UseEmblaCarouselType[0]
+  api: CarouselApi
+  orientation: Orientation
+  selectedIndex: number
+  snapCount: number
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  scrollPrev: () => void
+  scrollNext: () => void
+  scrollTo: (index: number) => void
+  s: ReturnType<typeof carouselStyles>
+  slots: SlotClasses<'Carousel'>
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null)
+
+function useCarousel(): CarouselContextValue {
+  const value = useContext(CarouselContext)
+  if (!value) throw new Error('Carousel parts must be used inside <Carousel>.')
+  return value
+}
+
+export interface CarouselProps
+  extends Omit<ComponentProps<'section'>, 'aria-label'>,
+    CarouselVariants {
+  /** Embla options, e.g. `{ align: 'start', loop: true }`. */
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin[]
+  /** Shortcut for `opts.loop`. */
+  loop?: boolean
+  /** Receives the Embla API for custom controls. */
+  setApi?: (api: CarouselApi) => void
+  /** Required: describes the content, e.g. "Customer stories". */
+  'aria-label': string
+}
+
+/**
+ * Swipeable, keyboard-accessible slides. Compose with CarouselContent, CarouselItem,
+ * CarouselPrevious, CarouselNext and CarouselDots.
+ */
+export function Carousel(inProps: CarouselProps) {
+  const [props, slots] = useComponentConfig('Carousel', inProps)
+  const {
+    opts,
+    plugins,
+    loop,
+    setApi,
+    orientation = 'horizontal',
+    className,
+    children,
+    ...rest
+  } = props
+  const [viewportRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      ...(loop !== undefined && { loop }),
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  )
+  const [state, setState] = useState({
+    selectedIndex: 0,
+    snapCount: 0,
+    canScrollPrev: false,
+    canScrollNext: false,
+  })
+
+  const sync = useCallback((embla: NonNullable<CarouselApi>) => {
+    setState({
+      selectedIndex: embla.selectedScrollSnap(),
+      snapCount: embla.scrollSnapList().length,
+      canScrollPrev: embla.canScrollPrev(),
+      canScrollNext: embla.canScrollNext(),
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!api) return
+    setApi?.(api)
+    sync(api)
+    api.on('select', sync).on('reInit', sync)
+    return () => {
+      api.off('select', sync).off('reInit', sync)
+    }
+  }, [api, setApi, sync])
+
+  const scrollPrev = useCallback(() => api?.scrollPrev(), [api])
+  const scrollNext = useCallback(() => api?.scrollNext(), [api])
+  const scrollTo = useCallback((index: number) => api?.scrollTo(index), [api])
+
+  const onKeyDownCapture = (event: KeyboardEvent<HTMLElement>) => {
+    const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+    const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+    if (event.key === prevKey) {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === nextKey) {
+      event.preventDefault()
+      scrollNext()
+    }
+  }
+
+  const s = carouselStyles({ orientation })
+  return (
+    <CarouselContext.Provider
+      value={{
+        viewportRef,
+        api,
+        orientation,
+        ...state,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        s,
+        slots,
+      }}
+    >
+      {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: a labelled section is a region, which supports aria-roledescription */}
+      <section
+        data-slot="carousel"
+        aria-roledescription="carousel"
+        onKeyDownCapture={onKeyDownCapture}
+        className={s.root({ class: [slots.root, className] })}
+        {...rest}
+      >
+        {children}
+      </section>
+    </CarouselContext.Provider>
+  )
+}
+
+const SlideContext = createContext<{ index: number; total: number } | null>(null)
+
+export function CarouselContent({ className, children, ...props }: ComponentProps<'div'>) {
+  const { viewportRef, s, slots } = useCarousel()
+  const items = Children.toArray(children)
+  return (
+    <div
+      ref={viewportRef}
+      data-slot="carousel-viewport"
+      className={s.viewport({ class: slots.viewport })}
+    >
+      <div
+        data-slot="carousel-content"
+        className={s.container({ class: [slots.container, className] })}
+        {...props}
+      >
+        {items.map((child, index) => (
+          <SlideContext.Provider key={index} value={{ index, total: items.length }}>
+            {child}
+          </SlideContext.Provider>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function CarouselItem({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useCarousel()
+  const slide = useContext(SlideContext)
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" + aria-roledescription is the WAI-ARIA carousel slide pattern
+    <div
+      role="group"
+      aria-roledescription="slide"
+      aria-label={slide ? `${slide.index + 1} of ${slide.total}` : undefined}
+      data-slot="carousel-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    />
+  )
+}
+
+function Chevron({ direction }: { direction: 'left' | 'right' }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={direction === 'left' ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6'} />
+    </svg>
+  )
+}
+
+type ControlProps = Omit<IconButtonProps, 'icon' | 'aria-label'> & {
+  'aria-label'?: string
+  icon?: ReactNode
+}
+
+export function CarouselPrevious({ className, icon, ...props }: ControlProps) {
+  const { scrollPrev, canScrollPrev, orientation, s, slots } = useCarousel()
+  return (
+    <IconButton
+      variant="outline"
+      size="sm"
+      aria-label="Previous slide"
+      icon={icon ?? <Chevron direction="left" />}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      className={s.control({
+        class: [slots.control, orientation === 'horizontal' ? 'left-3' : 'top-3', className],
+      })}
+      {...props}
+    />
+  )
+}
+
+export function CarouselNext({ className, icon, ...props }: ControlProps) {
+  const { scrollNext, canScrollNext, orientation, s, slots } = useCarousel()
+  return (
+    <IconButton
+      variant="outline"
+      size="sm"
+      aria-label="Next slide"
+      icon={icon ?? <Chevron direction="right" />}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      className={s.control({
+        class: [slots.control, orientation === 'horizontal' ? 'right-3' : 'bottom-3', className],
+      })}
+      {...props}
+    />
+  )
+}
+
+/** One button per snap point; the current one is highlighted. */
+export function CarouselDots({ className, ...props }: ComponentProps<'div'>) {
+  const { snapCount, selectedIndex, scrollTo, s, slots } = useCarousel()
+  if (snapCount < 2) return null
+  return (
+    <div
+      data-slot="carousel-dots"
+      className={s.dots({ class: [slots.dots, className] })}
+      {...props}
+    >
+      {Array.from({ length: snapCount }, (_, index) => (
+        <button
+          key={index}
+          type="button"
+          aria-label={`Go to slide ${index + 1}`}
+          aria-current={index === selectedIndex}
+          onClick={() => scrollTo(index)}
+          className={cn(s.dot({ class: slots.dot }))}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/carousel/index.ts

@@ -0,0 +1,13 @@
+export {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  type CarouselOptions,
+  type CarouselPlugin,
+  CarouselPrevious,
+  type CarouselProps,
+} from './carousel'
+export { type CarouselVariants, carouselStyles } from './carousel.styles'

package/src/components/code/code.styles.ts

@@ -0,0 +1,33 @@
+import type { StylesEntry } from '../../utils/registry'
+import { themedBorder } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const codeStyles = tv({
+  slots: {
+    base: 'rounded-xs bg-muted px-[0.3em] py-[0.15em] font-mono text-[0.875em] text-foreground',
+  },
+})
+
+export const codeBlockStyles = tv({
+  slots: {
+    root: ['relative min-w-0 overflow-hidden rounded-lg border-border bg-subtle', themedBorder],
+    header:
+      'flex min-h-10 items-center justify-between gap-2 border-b border-border py-1 pr-1.5 pl-4',
+    title: 'truncate font-mono text-caption text-faint-foreground',
+    copy: 'shrink-0',
+    floatingCopy: 'absolute top-2 right-2',
+    pre: 'overflow-x-auto p-4 font-mono text-small leading-relaxed text-foreground',
+  },
+  variants: {
+    wrap: { true: { pre: 'whitespace-pre-wrap break-words' } },
+  },
+})
+
+export type CodeBlockVariants = VariantProps<typeof codeBlockStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Code: StylesEntry<typeof codeStyles>
+    CodeBlock: StylesEntry<typeof codeBlockStyles>
+  }
+}

package/src/components/code/code.tsx

@@ -0,0 +1,96 @@
+import { type ComponentProps, type ReactNode, useEffect, useRef, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { CheckIcon } from '../../internal/icons'
+import { IconButton } from '../button'
+import { type CodeBlockVariants, codeBlockStyles, codeStyles } from './code.styles'
+
+/** Inline code within running text. */
+export function Code(inProps: ComponentProps<'code'>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Code', inProps)
+  return (
+    <code
+      data-slot="code"
+      className={codeStyles().base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}
+
+const CopyIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <rect width="14" height="14" x="8" y="8" rx="2" />
+    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+  </svg>
+)
+
+export interface CodeBlockProps
+  extends Omit<ComponentProps<'figure'>, 'children' | 'title'>,
+    CodeBlockVariants {
+  /** The code to show and copy. */
+  code: string
+  /** File name or caption shown in the header. */
+  title?: ReactNode
+  /** Shown in the header when there is no title, e.g. "tsx". */
+  language?: string
+  /** Show a copy button. Default true. */
+  copyable?: boolean
+}
+
+/** A block of code with an optional file name and a copy button. No syntax highlighting is applied. */
+export function CodeBlock(inProps: CodeBlockProps) {
+  const [props, slots] = useComponentConfig('CodeBlock', inProps)
+  const { code, title, language, copyable = true, wrap, className, ...rest } = props
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const s = codeBlockStyles({ wrap })
+  const heading = title ?? language
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      clearTimeout(timer.current)
+      timer.current = setTimeout(() => setCopied(false), 1600)
+    } catch {
+      // Clipboard blocked (permissions, insecure context): the code stays selectable.
+    }
+  }
+
+  const copyButton = copyable ? (
+    <IconButton
+      size="sm"
+      icon={copied ? <CheckIcon /> : <CopyIcon />}
+      aria-label={copied ? 'Copied' : 'Copy code'}
+      onClick={copy}
+      className={
+        heading ? s.copy({ class: slots.copy }) : s.floatingCopy({ class: slots.floatingCopy })
+      }
+    />
+  ) : null
+
+  return (
+    <figure data-slot="code-block" className={s.root({ class: [slots.root, className] })} {...rest}>
+      {heading ? (
+        <figcaption className={s.header({ class: slots.header })}>
+          <span className={s.title({ class: slots.title })}>{heading}</span>
+          {copyButton}
+        </figcaption>
+      ) : (
+        copyButton
+      )}
+      <pre className={s.pre({ class: slots.pre })}>
+        <code>{code}</code>
+      </pre>
+    </figure>
+  )
+}

package/src/components/code/index.ts

@@ -0,0 +1,2 @@
+export { Code, CodeBlock, type CodeBlockProps } from './code'
+export { type CodeBlockVariants, codeBlockStyles, codeStyles } from './code.styles'

package/src/components/collapsible/collapsible.tsx

@@ -0,0 +1,66 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { tv } from '../../utils/tv'
+
+export const collapsibleStyles = tv({
+  slots: {
+    root: '',
+    trigger: '',
+    content:
+      'overflow-hidden data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Collapsible: StylesEntry<typeof collapsibleStyles>
+  }
+}
+
+const s = collapsibleStyles()
+
+/**
+ * Shows and hides one region, e.g. "Show advanced options". For a list of expandable
+ * sections use Accordion.
+ */
+export function Collapsible(inProps: ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Collapsible', inProps)
+  return (
+    <CollapsiblePrimitive.Root
+      data-slot="collapsible"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    />
+  )
+}
+
+export function CollapsibleTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
+  const [, slots] = useComponentConfig('Collapsible', {})
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      className={s.trigger({ class: [slots.trigger, className] })}
+      {...props}
+    />
+  )
+}
+
+/** Animates its height open and closed; stays mounted until the closing animation ends. */
+export function CollapsibleContent({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.Content>) {
+  const [, slots] = useComponentConfig('Collapsible', {})
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      className={s.content({ class: [slots.content, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/collapsible/index.ts

@@ -0,0 +1,6 @@
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  collapsibleStyles,
+} from './collapsible'

package/src/components/combobox/combobox.styles.ts

@@ -0,0 +1,50 @@
+import type { StylesEntry } from '../../utils/registry'
+import { popover } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+import { fieldControl } from '../input/input.styles'
+
+export const comboboxStyles = tv({
+  slots: {
+    trigger: [
+      ...fieldControl,
+      'flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none',
+      'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    value: 'flex min-w-0 flex-1 items-center gap-1 truncate',
+    placeholder: 'truncate text-faint-foreground',
+    chip: 'inline-flex h-5.5 max-w-40 shrink-0 items-center truncate rounded-pill bg-muted px-2 text-caption text-foreground',
+    icon: 'size-4 shrink-0 text-faint-foreground',
+    content: [popover, 'w-(--radix-popover-trigger-width) min-w-56 p-0'],
+    search:
+      'flex items-center gap-2 border-b border-border px-3 text-faint-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+    input:
+      'h-10 w-full min-w-0 bg-transparent text-small text-foreground outline-none placeholder:text-faint-foreground',
+    list: 'max-h-72 overflow-y-auto overscroll-contain p-1',
+    empty: 'px-3 py-6 text-center text-small text-muted-foreground',
+    item: [
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-small text-foreground outline-none',
+      'data-[selected=true]:bg-muted data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+    ],
+    itemText: 'grid min-w-0 flex-1',
+    itemDescription: 'truncate text-caption text-faint-foreground',
+    check: 'size-4 shrink-0 text-primary',
+  },
+  variants: {
+    size: {
+      sm: { trigger: 'min-h-(--glyph-control-sm) text-small' },
+      md: { trigger: 'min-h-(--glyph-control-md) text-small' },
+      lg: { trigger: 'min-h-(--glyph-control-lg) text-body' },
+    },
+    multiple: { true: { trigger: 'py-1', value: 'flex-wrap overflow-visible whitespace-normal' } },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type ComboboxVariants = VariantProps<typeof comboboxStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Combobox: StylesEntry<typeof comboboxStyles>
+  }
+}