@remix-run/ui 0.3.0 → 0.5.0

package/src/combobox/index.tsx

@@ -0,0 +1,112 @@
+import { createElement, css } from '@remix-run/ui'
+import type { CSSMixinDescriptor, Handle, Props, RemixNode } from '@remix-run/ui'
+
+import * as combobox from '@remix-run/ui/combobox/primitives'
+import type { SearchValue } from '../shared/typeahead.ts'
+import { CheckIcon } from '../shared/icons.tsx'
+import {
+  listboxIndicatorStyle,
+  listboxLabelStyle,
+  listboxListStyle,
+  listboxOptionStyle,
+  popoverSurfaceStyle,
+} from '../shared/listbox-popover-styles.ts'
+import { componentStyleValues as styles } from '../shared/style-values.ts'
+
+export interface ComboboxProps extends Omit<Props<'div'>, 'children'> {
+  children?: RemixNode
+  defaultValue?: string | null
+  disabled?: boolean
+  inputId?: string
+  name?: string
+  placeholder?: string
+}
+
+export interface ComboboxOptionProps extends Omit<Props<'div'>, 'children'> {
+  children?: RemixNode
+  disabled?: boolean
+  label: string
+  searchValue?: SearchValue
+  value: string
+}
+
+const comboboxPopoverCss: CSSMixinDescriptor = css({
+  opacity: 0,
+  '&:popover-open': {
+    opacity: 1,
+  },
+  '&:not(:popover-open)': {
+    pointerEvents: 'none',
+  },
+  '&[data-show-reason="nav"]:not(:popover-open)': {
+    transition: 'opacity 180ms ease-in, overlay 180ms ease-in, display 180ms ease-in',
+    transitionBehavior: 'allow-discrete',
+  },
+  '&[data-show-reason="hint"]:not(:popover-open)': {
+    transition: 'none',
+    transitionBehavior: 'normal',
+  },
+})
+
+const comboboxInputCss: CSSMixinDescriptor = css({
+  minHeight: styles.control.height.sm,
+  width: '100%',
+  paddingInline: styles.space.sm,
+  border: `0.5px solid ${styles.colors.border.default}`,
+  borderRadius: styles.radius.md,
+  backgroundColor: styles.surface.lvl0,
+  color: styles.colors.text.primary,
+  fontFamily: styles.fontFamily.sans,
+  fontSize: styles.fontSize.sm,
+  lineHeight: styles.lineHeight.normal,
+  boxShadow: 'inset 0 1px 0 light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.08))',
+  '&:focus-visible': {
+    outline: `2px solid ${styles.colors.focus.ring}`,
+    outlineOffset: styles.space.none,
+  },
+  '&[data-surface-visible="true"][aria-activedescendant]:focus-visible': {
+    outline: 'none',
+  },
+})
+
+export const inputStyle = comboboxInputCss
+export const popoverStyle = comboboxPopoverCss
+
+export function Combobox(handle: Handle<ComboboxProps>): () => RemixNode {
+  return () => {
+    let { children, defaultValue, disabled, inputId, name, placeholder, ...divProps } = handle.props
+
+    return (
+      <combobox.Context defaultValue={defaultValue} disabled={disabled} name={name}>
+        <div {...divProps}>
+          <input
+            defaultValue={defaultValue ?? undefined}
+            id={inputId}
+            mix={[inputStyle, combobox.input()]}
+            placeholder={placeholder}
+          />
+          <div mix={[popoverSurfaceStyle, popoverStyle, combobox.popover()]}>
+            <div mix={[listboxListStyle, combobox.list()]}>{children}</div>
+          </div>
+          {name && <input mix={combobox.hiddenInput()} />}
+        </div>
+      </combobox.Context>
+    )
+  }
+}
+
+export function ComboboxOption(handle: Handle<ComboboxOptionProps>): () => RemixNode {
+  return () => {
+    let { children, disabled, label, mix, searchValue, value, ...divProps } = handle.props
+
+    return (
+      <div
+        {...divProps}
+        mix={[listboxOptionStyle, combobox.option({ disabled, label, searchValue, value }), mix]}
+      >
+        <CheckIcon mix={listboxIndicatorStyle} />
+        <span mix={listboxLabelStyle}>{children ?? label}</span>
+      </div>
+    )
+  }
+}

package/src/{components/combobox/combobox.tsx → combobox/primitives.tsx}

@@ -1,11 +1,8 @@
 import {
   attrs,
-  css,
-  createElement,
   createMixin,
   on,
   ref,
-  type CSSMixinDescriptor,
   type Dispatched,
   type ElementProps,
   type Handle,
@@ -15,13 +12,11 @@ import {
   type RemixNode,
 } from '@remix-run/ui'
 
-import { Glyph } from '../glyph/glyph.tsx'
-import * as listbox from '../listbox/listbox.ts'
-import * as popover from '../popover/popover.ts'
-import { theme } from '../../theme/theme.ts'
-import { type SearchValue } from '../../interactions/typeahead/typeahead-mixin.ts'
-import { waitForCssTransition } from '../../utils/wait-for-css-transition.ts'
-import { wait } from '../../utils/wait.ts'
+import * as listbox from '../listbox/index.ts'
+import * as popover from '../popover/index.ts'
+import { type SearchValue } from '../shared/typeahead.ts'
+import { waitForCssTransition } from '../shared/wait-for-css-transition.ts'
+import { wait } from '../shared/wait.ts'
 
 const COMBOBOX_CHANGE_EVENT = 'rmx:combobox-change' as const
 const INPUT_COMMIT_DELAY_MS = 50
@@ -33,48 +28,6 @@ type ComboboxChangeHandler<target extends HTMLElement> = (
 
 type ShowReason = 'hint' | 'nav'
 
-const comboboxPopoverCss: CSSMixinDescriptor = css({
-  opacity: 0,
-  '&:popover-open': {
-    opacity: 1,
-  },
-  '&:not(:popover-open)': {
-    pointerEvents: 'none',
-  },
-  '&[data-show-reason="nav"]:not(:popover-open)': {
-    transition: 'opacity 180ms ease-in, overlay 180ms ease-in, display 180ms ease-in',
-    transitionBehavior: 'allow-discrete',
-  },
-  '&[data-show-reason="hint"]:not(:popover-open)': {
-    transition: 'none',
-    transitionBehavior: 'normal',
-  },
-})
-
-const comboboxInputCss: CSSMixinDescriptor = css({
-  minHeight: theme.control.height.sm,
-  width: '100%',
-  paddingInline: theme.space.sm,
-  border: `0.5px solid ${theme.colors.border.default}`,
-  borderRadius: theme.radius.md,
-  backgroundColor: theme.surface.lvl0,
-  color: theme.colors.text.primary,
-  fontFamily: theme.fontFamily.sans,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.normal,
-  boxShadow: 'inset 0 1px 0 rgb(255 255 255 / 0.7)',
-  '&:focus-visible': {
-    outline: `2px solid ${theme.colors.focus.ring}`,
-    outlineOffset: theme.space.none,
-  },
-  '&[data-surface-visible="true"][aria-activedescendant]:focus-visible': {
-    outline: 'none',
-  },
-})
-
-export const inputStyle = comboboxInputCss
-export const popoverStyle = comboboxPopoverCss
-
 declare global {
   interface HTMLElementEventMap {
     [COMBOBOX_CHANGE_EVENT]: ComboboxChangeEvent
@@ -989,42 +942,3 @@ export function onComboboxChange<target extends HTMLElement>(
 ): ReturnType<typeof on<target, typeof COMBOBOX_CHANGE_EVENT>> {
   return on(COMBOBOX_CHANGE_EVENT, handler, captureBoolean)
 }
-
-export function Combobox(handle: Handle<ComboboxProps>): () => RemixNode {
-  return () => {
-    let { children, defaultValue, disabled, inputId, name, placeholder, ...divProps } = handle.props
-
-    return (
-      <combobox.Context defaultValue={defaultValue} disabled={disabled} name={name}>
-        <div {...divProps}>
-          <input
-            defaultValue={defaultValue ?? undefined}
-            id={inputId}
-            mix={[inputStyle, combobox.input()]}
-            placeholder={placeholder}
-          />
-          <div mix={[popover.surfaceStyle, popoverStyle, combobox.popover()]}>
-            <div mix={[popover.contentStyle, listbox.listStyle, combobox.list()]}>{children}</div>
-          </div>
-          {name && <input mix={combobox.hiddenInput()} />}
-        </div>
-      </combobox.Context>
-    )
-  }
-}
-
-export function ComboboxOption(handle: Handle<ComboboxOptionProps>): () => RemixNode {
-  return () => {
-    let { children, disabled, label, mix, searchValue, value, ...divProps } = handle.props
-
-    return (
-      <div
-        {...divProps}
-        mix={[listbox.optionStyle, combobox.option({ disabled, label, searchValue, value }), mix]}
-      >
-        <Glyph mix={listbox.glyphStyle} name="check" />
-        <span mix={listbox.labelStyle}>{children ?? label}</span>
-      </div>
-    )
-  }
-}

package/src/dev/refresh.ts

@@ -0,0 +1 @@
+export { reconcileRoots, setComponentStalenessCheck } from '../runtime/refresh.ts'

package/src/index.ts

@@ -35,7 +35,7 @@ export type {
   FrameHandle,
   FrameProps,
 } from './runtime/component.ts'
-export type { LoadModule, ResolveFrame } from './runtime/frame.ts'
+export type { LoadModule, ResolveFrame, ResolveFrameOptions } from './runtime/frame.ts'
 
 // -- Elements/JSX/Props --
 export { createElement } from './runtime/create-element.ts'

package/src/input/README.md

@@ -0,0 +1,52 @@
+# input
+
+`input` is a style mixin for text inputs. Use `input()` directly on standalone native inputs, or compose `input.root()` with `input.field()` when the input needs inline icons or controls.
+
+## Primitive Usage
+
+```tsx
+import input from 'remix/ui/input'
+
+function ProductFilters() {
+  return () => (
+    <div>
+      <input mix={input()} placeholder="Limit" />
+
+      <div mix={input.root()}>
+        <SearchIcon />
+        <input mix={input.field()} placeholder="Search and filter products" />
+      </div>
+    </div>
+  )
+}
+```
+
+Compose app-owned styles when a field needs local layout or adornments:
+
+```tsx
+import input from 'remix/ui/input'
+import { filterFieldStyle, filterRootStyle } from './filters.styles'
+
+function SearchFilter() {
+  return () => (
+    <div mix={[filterRootStyle, input.root()]}>
+      <SearchIcon />
+      <input mix={[filterFieldStyle, input.field()]} placeholder="Search" />
+    </div>
+  )
+}
+```
+
+## `remix/ui/input`
+
+- `input(options)`: styles a standalone native input. `size` may be `'md'` or `'lg'` and defaults to `'md'`.
+- `input.root(options)`: styles a flex input frame for inline icons, buttons, and a child input.
+- `input.field()`: styles the child native input inside `input.root()`.
+- `InputOptions`: accepts `size`.
+- `InputSize`: `'md'` or `'lg'`.
+
+## Behavior Notes
+
+- `input.root()` uses child selectors to size direct SVG children as presentational icons.
+- Put the icon before or after the field to control its visual position.
+- Focus and disabled states work through the native input; the root mirrors them with `:focus-within` and `:has(input:disabled)`.

package/src/input/index.ts

@@ -0,0 +1,147 @@
+import { css } from '@remix-run/ui'
+import type { CSSMixinDescriptor } from '@remix-run/ui'
+import { controlFocusShadow } from '../shared/focus-styles.ts'
+import type { CSSProps } from '../style/style.ts'
+
+export type InputSize = 'md' | 'lg'
+
+export interface InputOptions {
+  size?: InputSize
+}
+
+type InputMixin = readonly [CSSMixinDescriptor, CSSMixinDescriptor]
+
+interface InputFunction {
+  (options?: InputOptions): InputMixin
+  root(options?: InputOptions): InputMixin
+  field(): CSSMixinDescriptor
+}
+
+const frameStyles = {
+  '--rmx-input-height': '32px',
+  '--rmx-input-padding-block': '6px',
+  '--rmx-input-padding-inline': '12px',
+  '--rmx-input-root-padding-inline': '8px',
+  '--rmx-input-gap': '6px',
+  '--rmx-input-icon-size': '16px',
+  '--rmx-input-icon-color': 'light-dark(#707070, #b3b3b3)',
+  appearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  display: 'block',
+  width: '100%',
+  minWidth: 0,
+  height: 'var(--rmx-input-height)',
+  paddingBlock: 'var(--rmx-input-padding-block)',
+  paddingInline: 'var(--rmx-input-padding-inline)',
+  border: 0,
+  borderRadius: '8px',
+  background: 'light-dark(#FFFFFF, #1a1a1a)',
+  boxShadow:
+    '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2))',
+  color: 'light-dark(#101010, #ececec)',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: '13px',
+  lineHeight: '20px',
+  fontFeatureSettings: '"ss01" on, "cv01" on',
+  letterSpacing: 0,
+  textShadow: '0 1px 0 light-dark(#FFFFFF, rgb(0 0 0 / 0.35))',
+  '&::placeholder': {
+    color: 'light-dark(#B0B0B0, #777777)',
+    opacity: 1,
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    opacity: 0.55,
+  },
+} as const satisfies CSSProps
+
+const baseStyle: CSSMixinDescriptor = css({
+  ...frameStyles,
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: controlFocusShadow,
+  },
+})
+
+const rootBaseStyle: CSSMixinDescriptor = css({
+  ...frameStyles,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--rmx-input-gap)',
+  paddingInline: 'var(--rmx-input-root-padding-inline)',
+  '&:focus-within': {
+    boxShadow: controlFocusShadow,
+  },
+  '&:has(input:disabled), &:has(input[aria-disabled="true"])': {
+    opacity: 0.55,
+  },
+  '& > svg': {
+    flex: 'none',
+    width: 'var(--rmx-input-icon-size)',
+    height: 'var(--rmx-input-icon-size)',
+    color: 'var(--rmx-input-icon-color)',
+    pointerEvents: 'none',
+  },
+  '& > button': {
+    flex: 'none',
+  },
+})
+
+const fieldBaseStyle: CSSMixinDescriptor = css({
+  appearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  flex: '1 1 auto',
+  minWidth: 0,
+  width: '100%',
+  height: '20px',
+  padding: 0,
+  border: 0,
+  outline: 0,
+  background: 'transparent',
+  boxShadow: 'none',
+  color: 'light-dark(#101010, #ececec)',
+  font: 'inherit',
+  fontFeatureSettings: 'inherit',
+  letterSpacing: 'inherit',
+  textShadow: 'inherit',
+  '&::placeholder': {
+    color: 'light-dark(#B0B0B0, #777777)',
+    opacity: 1,
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    opacity: 1,
+  },
+})
+
+const sizeStyles = {
+  md: css({}),
+  lg: css({
+    '--rmx-input-height': '36px',
+    '--rmx-input-padding-block': '8px',
+    '--rmx-input-padding-inline': '14px',
+    '--rmx-input-root-padding-inline': '10px',
+    '--rmx-input-gap': '8px',
+    '--rmx-input-icon-size': '18px',
+  }),
+} as const satisfies Record<InputSize, CSSMixinDescriptor>
+
+function createInput(options: InputOptions = {}): InputMixin {
+  let { size = 'md' } = options
+  return [baseStyle, sizeStyles[size]]
+}
+
+function root(options: InputOptions = {}): InputMixin {
+  let { size = 'md' } = options
+  return [rootBaseStyle, sizeStyles[size]]
+}
+
+function field(): CSSMixinDescriptor {
+  return fieldBaseStyle
+}
+
+export const input: InputFunction = Object.assign(createInput, { root, field })
+
+export default input

package/src/{components/listbox → listbox}/README.md

@@ -1,14 +1,14 @@
 # listbox
 
-`listbox` is a headless option-list primitive for controlled selection and highlighting. Use it under components like `select` and `combobox`, or directly when you need custom listbox markup.
+`listbox` is a headless option-list primitive for controlled selection and highlighting. Use it under components like select and combobox, or directly when you need custom listbox markup.
 
-## Usage
+## Primitive Usage
 
 ```tsx
 import type { Handle } from 'remix/ui'
-import { Glyph } from 'remix/ui/glyph'
 import * as listbox from 'remix/ui/listbox'
 import type { ListboxValue } from 'remix/ui/listbox'
+import { listStyle, optionStyle } from './listbox.styles'
 
 function FrameworkListbox(handle: Handle) {
   let value: ListboxValue = 'remix'
@@ -27,11 +27,10 @@ function FrameworkListbox(handle: Handle) {
         void handle.update()
       }}
     >
-      <div aria-label="Frameworks" tabIndex={0} mix={[listbox.listStyle, listbox.list()]}>
+      <div aria-label="Frameworks" tabIndex={0} mix={[listStyle, listbox.list()]}>
         {frameworks.map((option) => (
-          <div key={option.value} mix={[listbox.optionStyle, listbox.option(option)]}>
-            <Glyph mix={listbox.glyphStyle} name="check" />
-            <span mix={listbox.labelStyle}>{option.label}</span>
+          <div key={option.value} mix={[optionStyle, listbox.option(option)]}>
+            {option.label}
           </div>
         ))}
       </div>
@@ -52,6 +51,7 @@ Use `textValue` when the visible label is not the best string for typeahead sear
 ```tsx
 <div
   mix={[
+    optionStyle,
     listbox.option({
       label: 'Staging',
       textValue: 'beta',
@@ -63,42 +63,13 @@ Use `textValue` when the visible label is not the best string for typeahead sear
 </div>
 ```
 
-Use `ref` when a parent component needs imperative coordination with the current option registry.
-
-```tsx
-import type { ListboxRef } from 'remix/ui/listbox'
-
-let listboxRef: ListboxRef | undefined
-
-function selectLastOption() {
-  listboxRef?.navigateLast()
-  void listboxRef?.selectActive()
-}
-
-;<listbox.Context
-  value={value}
-  activeValue={activeValue}
-  ref={(ref) => {
-    listboxRef = ref
-  }}
-  onSelect={(nextValue) => {
-    value = nextValue
-  }}
-  onHighlight={(nextActiveValue) => {
-    activeValue = nextActiveValue
-  }}
->
-  {/* listbox markup */}
-</listbox.Context>
-```
-
-## `listbox.*`
+## `remix/ui/listbox`
 
 - `listbox.Context`: provider for controlled `value` and `activeValue`, option registration, selection, highlighting, optional ref access, `flashSelection`, `selectionFlashAttribute`, and `onSelectSettled`.
 - `listbox.list()`: mixin that wires `role="listbox"`, default `tabIndex={-1}`, keyboard navigation, focus scrolling, and typeahead highlighting.
 - `listbox.option(options)`: mixin that registers an option with required `label` and `value`, optional `disabled` and `textValue`, and wires `role="option"`, id, selected, disabled, highlighted, mouse, and click behavior.
-- `listStyle`, `optionStyle`, `glyphStyle`, and `labelStyle`: flat style mixins for standard listbox presentation.
 - `ListboxValue`: selected or active value, represented as `string | null`.
+- `ListboxContext` and `ListboxProviderProps`: provider context and prop types for controlled listboxes.
 - `ListboxOption`: option input shape with `label`, `value`, optional `disabled`, and optional `textValue`.
 - `ListboxRegisteredOption`: registered option metadata passed to callbacks and refs.
 - `ListboxRef`: live ref object exposing active/selected options, option navigation, search matching, scrolling, and selection helpers.
@@ -108,8 +79,5 @@ function selectLastOption() {
 - Selection and highlighting are controlled. `onSelect` and `onHighlight` notify the parent, but DOM state updates after the parent rerenders with new values.
 - Disabled options are skipped by keyboard navigation, typeahead, mouse movement, and click selection.
 - Arrow keys wrap through enabled options. `Home` and `End` move to enabled boundaries. `Enter` and Space select the active option.
-- Mouse movement highlights enabled options. `mouseleave` clears the highlight when leaving the active option.
-- `Tab` is prevented and highlights the first enabled option.
 - Typeahead highlights the next matching enabled option without selecting it and supports `textValue`.
-- Focus and keyboard navigation scroll the active option into view with nearest-edge alignment.
 - `flashSelection` applies `selectionFlashAttribute` for 60ms, delays `onSelectSettled`, and ignores new highlight/select interactions until the flash completes.

package/src/{components/listbox/listbox.ts → listbox/index.ts}

@@ -1,21 +1,18 @@
 import {
   attrs,
   createMixin,
-  css,
   on,
-  type CSSMixinDescriptor,
   type ElementProps,
   type Handle,
   type MixinFactory,
   type RemixNode,
 } from '@remix-run/ui'
-import { theme } from '../../theme/theme.ts'
 import {
   hiddenTypeahead,
   matchNextItemBySearchText,
   type SearchValue,
-} from '../../interactions/typeahead/typeahead-mixin.ts'
-import { flashAttribute } from '../../utils/flash-attribute.ts'
+} from '../shared/typeahead.ts'
+import { flashAttribute } from './flash-attribute.ts'
 
 export type ListboxValue = string | null
 
@@ -69,88 +66,6 @@ export interface ListboxRegisteredOption extends ListboxOption {
 
 interface RegisteredOption extends ListboxRegisteredOption {}
 
-const listCss: CSSMixinDescriptor = css({
-  display: 'flex',
-  flexDirection: 'column',
-  outline: 'none',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  '--rmx-ui-item-inset': theme.space.sm,
-  '--rmx-ui-item-indicator-gap': theme.space.xs,
-  '--rmx-ui-item-indicator-width': theme.fontSize.sm,
-})
-
-const itemCss: CSSMixinDescriptor = css({
-  display: 'grid',
-  gridTemplateColumns: 'max-content minmax(0, 1fr)',
-  alignItems: 'center',
-  width: '100%',
-  minHeight: theme.control.height.md,
-  padding: `${theme.space.xs} ${theme.space.sm}`,
-  borderRadius: theme.radius.md,
-  backgroundColor: 'transparent',
-  color: theme.colors.text.primary,
-  fontFamily: theme.fontFamily.sans,
-  fontSize: theme.fontSize.sm,
-  fontWeight: theme.fontWeight.normal,
-  lineHeight: theme.lineHeight.normal,
-  textAlign: 'left',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  '&:focus': {
-    outline: 'none',
-  },
-  '&[data-highlighted="true"]': {
-    backgroundColor: theme.colors.action.primary.background,
-    color: theme.colors.action.primary.foreground,
-  },
-  '&[aria-disabled="true"]': {
-    opacity: 0.5,
-  },
-  scrollMarginBlock: theme.space.xs,
-  '--rmx-listbox-option-indicator-opacity': '0',
-  '&[hidden]': {
-    display: 'none',
-  },
-  '&[data-listbox-flash="true"], &[data-select-flash="true"], &[data-combobox-flash="true"]': {
-    backgroundColor: 'transparent',
-    color: theme.colors.text.primary,
-  },
-  '&[aria-selected="true"]': {
-    '--rmx-listbox-option-indicator-opacity': '1',
-  },
-})
-
-const itemGlyphCss: CSSMixinDescriptor = css({
-  gridColumn: '1',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '1em',
-  height: '1em',
-  color: 'currentColor',
-  flexShrink: 0,
-  opacity: 'var(--rmx-listbox-option-indicator-opacity)',
-  '& > svg': {
-    display: 'block',
-    width: '100%',
-    height: '100%',
-  },
-})
-
-const itemLabelCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  minWidth: 0,
-  paddingInline: theme.space.xs,
-  WebkitUserSelect: 'none',
-})
-
-export const listStyle = listCss
-export const optionStyle = itemCss
-export const glyphStyle = itemGlyphCss
-export const labelStyle = itemLabelCss
-
 function ListboxProvider(handle: Handle<ListboxProviderProps, ListboxContext>): () => RemixNode {
   let options: RegisteredOption[] = []
   let state: State = 'idle'